Building with AI, Engineering the Fix: Shipping a Chatbot to GitHub Pages

Derek Kahre — Sat, 11 Jul 2026 17:07:10 +0000

"I’ve been getting back into flexing my developer muscles after an extended break, and I thought what better way to start than building something with today’s AI tools? The landscape has changed so much since I last coded—I'm so glad I don't have to scour dozens of search results just to find a simple fix anymore.

The 20-Minute Sandbox Build

To kick things off, I decided to build a basic chatbot. Using Bolt.new, I prompted what I wanted, and it compiled the initial code in about 20 minutes.

Moving to Production: Where the Real Engineering Began

Of course, getting it working in Bolt’s local sandbox was the easy part. The real work started when I tried to deploy it to my GitHub repository. Because GitHub Pages handles paths differently, the build broke immediately.

That's where the modern AI workflow really shines. Instead of slogging through endless forums for "why is my path breaking," I was able to use AI to help diagnose the configuration issues, fix the relative paths in my JSON objects, and securely wire up my Supabase backend token.

Check Out the Project

You can check out the project here.

For those of you who have been in the game for a while, what has it been like adapting your workflow to AI development versus the old way of doing things?"

Fixing the "Invisible" Accessibility Bug: Cumulative Layout Shift (CLS)

Derek Kahre — Mon, 06 Jul 2026 23:11:00 +0000

When we think about web accessibility, we usually think about adding alt text to images or ensuring color contrast is high enough. But this week, while building out the skeleton for a responsive, accessible toy store project, a strict scanner taught me about an "invisible" accessibility bug that completely changes how a page feels to a user.

I deployed my initial HTML structure to GitHub Pages and ran it through Powermapper (SortSite). While basic checkers gave me a pass, Powermapper flagged a warning about missing image width and height dimensions.

At first glance, it feels like a minor layout issue, but it's actually an accessibility hurdle known as Cumulative Layout Shift (CLS).

The Problem: Jumping Layouts
When you omit image dimensions, the browser assumes the image takes up 0 pixels of space until the file completely downloads. The moment the image pops in, it violently pushes all the content below it down the screen.

For a user utilizing screen magnification software, or someone with motor-control challenges trying to click a button, that sudden "jump" can make them completely lose their place or accidentally click the wrong element.

The "A-Ha" Fix
To fix this without breaking your responsive design on mobile, you have to let the browser pre-calculate the aspect ratio box before the image loads. You do this by combining native HTML attributes with a tiny splash of CSS.

Here is the exact pattern that cleared the error:

HTML

 /* This ensures the image stays fluid and shrinks on mobile screens */ img { max-width: 100%; height: auto; } 


alt="Set of rocks with distinct tactile textures."
width="300"
height="300">

By putting the dimensions back in the HTML, the browser leaves a perfect placeholder box open while the image downloads. No shifting, no jumping, and a completely stable reading experience.

If you are auditing your own junior projects, I highly recommend throwing them into a stricter scanner like Powermapper to see what layout vulnerabilities might be hiding in plain sight.

Hopefully, this saves someone else a few hours of head-scratching today! What's an "invisible" bug a compiler or scanner has caught for you recently?

DEV Community: Derek Kahre

Building with AI, Engineering the Fix: Shipping a Chatbot to GitHub Pages

The 20-Minute Sandbox Build

Moving to Production: Where the Real Engineering Began

Check Out the Project

Fixing the "Invisible" Accessibility Bug: Cumulative Layout Shift (CLS)