DEV Community: Lukman Isiaka

Notes From Four Years of AI-Assisted Coding

Lukman Isiaka — Mon, 11 May 2026 13:33:38 +0000

The day I couldn't work was the day it really hit me. I'd burned through my Claude Code messages for the day, stared at the rate-limit screen, and just... stopped. That was the moment I realized my life had been completely revolutionized, and that I was paying for it.
Let me back up.
I've had access to AI-assisted coding for about four years, since the days when GitHub Copilot was the real deal. Back then, having something quietly suggesting the next line of code in the background felt like the future. But Copilot had its problems. It couldn't suggest multi-line edits (I hated that), and the latency. I don't know if it was peculiar to this part of the world or an internal GitHub thing, but the slowness on every tab used to anger me deeply.
Then ChatGPT dropped. I was scrolling Twitter randomly the day the demo came out, and watching it, it dawned on me that the world as we knew it was about to change, especially for software developers. The concept of autonomous agents handling or aiding coding tasks started making the rounds. What I didn't know was that Copilot's quiet competitor was already on the rise.
Then Cursor showed up. Every problem I'd had with Copilot, Cursor had shipped a solution to from the get-go. Multi-line edits, faster suggestions, the works. And the cherry on top, I witnessed an AI agent build, debug, and fix errors for the first time. For a while I was still stuck on Copilot out of habit, but the moment I actually got my hands dirty with Cursor, I switched sides immediately. Cursor became my right hand man.
I thought Cursor was the pinnacle. Oh boy, was I wrong.
The moment is fuzzy now, but if I remember correctly, I saw a demo somewhere of someone interacting with an AI agent through the terminal. Later I learned the tool was Claude Code. The initial release was madness. It unleashed something in me. I've always had the knack for building virtually anything that pops into my head, but Claude Code made it feel almost frictionless. Until it didn't. As with every other nice thing, the cracks showed up. Rate limits. Context consumption. Token costs. And then came the day I described at the top. The day I just stopped, because I'd run out of messages.
I build faster now. I ship more. I complete tasks I wouldn't have attempted four years ago. But I pay for it with cognition and my cash.
The cognition part is the one that bothers me. I notice I reach for the agent before I've even thought through the problem. I skim code I would have read line by line two years ago. When an API goes down or the context gets too long, I feel something close to panic. Not because the task is hard, but because I've forgotten what it feels like to sit with a hard task alone. That's the real bill.
Two lessons from all of this. One, in this market, innovate fast or your competition kicks you out. Cursor ate Copilot's lunch in months. Two, rely on AI tools, but keep every one of your instincts active while you do. The day you stop noticing the tradeoff is the day the tradeoff wins.

Submission for the DEV Weekend Challenge: Community

Lukman Isiaka — Mon, 02 Mar 2026 22:15:17 +0000

This is a submission for the DEV Weekend Challenge: Community

The Community

The web development community. We pour hours into building apps, but understanding why users get frustrated remains one of the hardest problems. Enterprise tools like FullStory and Hotjar are expensive and privacy-heavy. Indie developers, small teams, and open-source maintainers are left guessing and reading through support tickets or hoping users speak up.

Reev exists because every web developer deserves to know when their UI is failing users, without needing a six-figure analytics budget.

What I Built

Reev is a lightweight, open-source UX frustration detector that automatically catches real user frustration on your website and asks them what went wrong -right in the moment.

Drop a single <script> tag on your site and Reev detects 4 types of UX frustration in real time:

Rage Clicks - 3+ rapid clicks on the same element within 1.5 seconds
Dead Links - same-origin links that return errors or timeout
Broken Images - images that fail to load, including dynamically added ones
Form Frustration - users clearing and retyping the same form field repeatedly
Flow Suggestions - guide frustrated users to the right page with navigation hints, created manually, auto-discovered from pageview data, or imported from your sitemap

When frustration is detected, an inline popover appears next to the problem element asking the user "What went wrong?". Their feedback is sent to your dashboard with full context -browser, device, the element they interacted with, and recent errors.

The dashboard then groups repeated feedback into patterns -so if 5 users report the same dead link on your pricing page, you see one actionable pattern instead of 5 separate reports.

The tracker is ~7KB, zero dependencies, and works on any website or framework.

Demo

Live app: reev.kreativekorna.com

Quick setup - add to any site in 60 seconds:

<script>
!function(c, s) {
  window.ReevConfig = c;
  s = document.createElement("script");
  s.src = "https://unpkg.com/reev.js/dist/reev.js";
  document.head.appendChild(s);
}({
  projectId: "your-project-id",
  apiUrl: "https://reev.kreativekorna.com"
})
</script>

Code

codellyson / reev

Reev

UX is hard. Reev makes it simple.

Reev is a lightweight, open-source UX frustration detector with real-time feedback collection. Install a script on your site, and Reev catches frustration as it happens - rage clicks, dead links, broken images, form frustration. When issues occur, users can provide instant feedback via inline popovers. The dashboard groups repeated feedback into patterns so you can fix problems fast.

How it works

1. Install   → Paste a <script> tag on your site
2. Detect    → Reev watches for rage clicks, dead links, broken images, and form frustration
3. Collect   → Users submit feedback when issues are detected (optional inline popovers)
4. Fix       → Reports and patterns tell you what's wrong, what users said, and where

What Reev detects

Issue	How it works	Severity
Rage clicks	3+ clicks on the same element within 1.5 seconds	Medium
Dead links	Same-origin links that return errors or

…

View on GitHub

How I Built It

Tracker library (reevjs/):

Vanilla TypeScript compiled to a single IIFE bundle via esbuild
Zero dependencies - uses native browser APIs (MutationObserver, PerformanceObserver)
Configured via window.ReevConfig -supports toggling each detector, popover theme (dark/light), cooldowns, and debug mode
Self-initializes on DOMContentLoaded, no method calls needed

Dashboard & API (app/):

Next.js 16 (App Router) with React 18 and TypeScript
PostgreSQL (Neon-compatible) for event and feedback storage
NextAuth.js for authentication
TanStack Query for data fetching
Tailwind CSS + Framer Motion for the UI

How detection works:

The tracker detects frustration client-side and shows a feedback popover
User feedback is sent to POST /api/events and stored in a dedicated feedback table
When 2+ feedback reports share the same issue type and page URL, a pattern is automatically created
The dashboard shows individual reports (/reports) and recurring patterns (/patterns), filterable by status and issue type
A separate /flows page lets you manage navigation suggestions -create them manually, auto-discover common page transitions from pageview data, or import from a sitemap
Flow widget is configurable per-project: display mode (on frustration or always), position, theme, and max suggestions

Key architectural decisions:

JSONB storage for flexible event data -no schema migrations needed when adding new event types
Ring buffers for context capture (last 5 errors, last 10 breadcrumbs) lightweight memory footprint
Rate limiting (60 req/min per IP, max 50 events per batch, 512KB max payload) to prevent abuse
Privacy-first: no session replay, no PII collection just enough context to fix the problem.

Submitted By: codellyson

How to parse HTML to React

Lukman Isiaka — Thu, 19 May 2022 17:24:07 +0000

Recently, I have been working on a project, one of the requirement was that I should implement a Rich Text Editor and render the text firstly in a preview card as truncated text as shown in the image below

Secondly, The main view, is where users get to read the content in detail. This was not a problem in particular as React provides us with a built-in solution to render raw HTML. dangerouslySetInnerHTML.

Problem

React built-in solution to my problem dangerouslySetInnerHTML works same way like vanilla JavaScript innerHTML. this is a risky solution because:

This solution by default exposes you to Cross Site Scripting (XSS), to be safe you'd have to use it alongside another package dom-purify to sanitize your HTML input.
The text rendered by this solution cannot be truncated because the way dangerouslySetInnerHTML works is by passing it as an attribute to a JSX element



<div dangerouslySetInnerHTML={{
__html: //htmlInput
}}> </div>

and one of my project requirement is to have a preview of the content.

Solution

After doing so many research, I bumped into a package called html-to-react it's available on NPM, actively maintained and about 577k weekly downloads perfect!

The best thing about this package is that it solves the two problems I listed above.

I can now do



import HtmlToReactParser from "html-to-react";
import ReactTruncate from "react-truncated-component";
// other imports
function Wiki({body}) {
// other functions
return (
   <div className="wiki-card"> 
     <ReactTruncate numberOfLines={3} lineHeight={23}. 
       ellipsis="..." >
            <p className="w-hero__desc">. 
             {HtmlToReactParser.Parser().parse(
              body)}
            </p>
     </ReactTruncate>
   </div>
)
}

Using the package this way, you will be able to truncate you r text anyhow you want and also render your HTML content nice and clean.

Peace ✌🏽.