DevIdiot! - Developer News & Resources

My AI page builder couldn't see its own pages. Here's how I gave it eyes (and free GPT-6.1 Sol)

openconstructor is a free, open-source page builder. You describe a page, AI agents build it on a canvas, and you export plain HTML. This update came from watching it fail. A friend asked for "a site about the current strongest LLMs with charts", and the AI:listed GPT-4o and Claude 3.7 as the newest models,drew filter buttons that did nothing,laid a line chart on top of the table,and when I asked it to fix that, said "fixed the overlaps" and changed nothing.Every one of those has the same root c

Turning a photo into a cross stitch pattern in the browser: Wu quantization, CIEDE2000 and no dithering

Cross stitch patterns are just tiny images: one square of fabric, one stitch, one color of thread. So "photo to pattern" sounds like a resize and a palette swap. It mostly is, and the parts that make it hard taught me a few useful things about color and images. Here's how the converter I built works. It runs entirely in the browser, so the photo never leaves the user's machine. 1. One pixel per stitchThe first step is the boring one: scale the photo so that one pixel is one stitch. A patter

Why Regex Tokenization and Inherited CSS Break SEO and Accessibility Checkers

Automated SEO and accessibility checkers save hours during site audits, until an edge case in CSS inheritance or string tokenization gives editors a false green or a false alarm.While auditing client websites at site-uri.ro and debugging WordPress editor workflows, I ran into two subtle bugs in widely used open-source tooling: one in WordPress Gutenberg's Block Inspector contrast checker, and one in Yoast SEO's keyphrase counting logic. Both fixes are now upstream PRs (WordPress/gutenberg#86702

How I keep a multiplayer browser city alive with zero players online

I'm a solo dev from Uruguay building Balak City, a multiplayer open-world city that runs in the browser: one shared city where everyone walks, drives, runs missions and buys businesses at the same time. It's plain JavaScript and Canvas 2D, no engine.The question that shaped the whole architecture was simple: what happens to the city when nobody is online? The problemIn a lot of browser multiplayer games, the first player to join a room becomes the "host" and simulates the world for everyone

Comparing subscription offers with a small, auditable cost function

A lower monthly price can hide an upfront fee or a longer commitment. A comparison tool should show its assumptions before ranking offers. Start with explicit inputsFor a fixed evaluation period, keep the upfront cost, monthly charge, number of months and unconditional credits separate. Do not subtract a conditional rebate until its conditions are met.function totalCost({ upfront, monthly, months, credits = 0 }) { const values = [upfront, monthly, months, credits]; if (!values.every(Numbe

🧩 Building Interactive Experiences with Vanilla JavaScript to Explain Technical Systems

A user interface usually shows the result of an action, but rarely everything that happens behind it.Clicking a login button can trigger several security checks. An API request can involve validation, data transformation, and error handling. An electronic invoice can contain structured data that remains invisible in its PDF representation.Technical documentation is useful for understanding these mechanisms, but it does not always make the sequence of operations easy to follow.Another approach is

I remove photo backgrounds without uploading the photo — the model runs in my browser

Every background remover I used before this one asked for the same thing first: upload your photo. The photo goes to a server, a model runs there, a cut-out comes back. The privacy page says the file is deleted afterwards, and I have no way to check that.There is a different way to build the same feature, and it is the one I ended up shipping: download the model to the browser, run it there, and never send the photo anywhere. How it actually worksThe tool is the Background Remover on ToolsB

Why a soft shadow prints as white dots: checking customer images before UV printing

At Kloniko customers upload their own images to print on a figure: a face, a logo on a torso, a pattern on the legs. In the configurator the image looks right. Sometimes the printed part did not: stubble, soft shadows and blush came out as whitish specks.The image was fine. The preview was wrong. What a UV printer does with transparencyA UV printer does not blend ink with the surface. To make colours show on a coloured part, it first lays down a white underbase wherever the image has any pi

5,100 draw calls to 270: 3D building instructions for a 1,689-part brick model on a phone

We build BrickPlay: step-by-step 3D building instructions that open in the browser from a QR code on the box. No app, the builder just scans and builds on a phone.Small models were fine. Then we loaded a 1,689-part model, and on phones the step animation stuttered badly. Here is what was wrong and how we fixed it with three.js. Why it was slowWe load models with LDrawLoader. Every LDraw part becomes three objects: a mesh, its edges, and the "conditional" lines that draw the outline of curve

Create an AI Podcast Generator with ElevenLabs

IntroductionPodcasts have exploded in popularity, but producing a full episode still takes hours of recording, editing, and post‑production. What if you could feed a script into a service, let an AI voice narrate it, add a splash of music, and output a ready‑to‑publish MP3? In this article we’ll build a simple AI Podcast Generator that does exactly that, using the powerful text‑to‑speech (TTS) capabilities of ElevenLabs.You’ll see how to:Call the ElevenLabs API from Python (or curl) to gen

Props Drilling in React

When building React applications, we use props to pass data from one component to another.But what happens when we need to pass data through multiple components, even when some of those components don't need that data?This is called Props Drilling.Let's understand it with a simple example. 1. What is Props Drilling?Props Drilling happens when we pass data from a parent component to a deeply nested child component through multiple intermediate components.In simple words, we pass props throug

Props in React

When building a React application, we usually divide our application into small components.For example, an e-commerce website may have:Navbar componentProduct componentCart componentFooter componentSometimes, one component needs to send data to another component.This is where Props come in. 1. What are Props?Props stands for Properties.Props allow us to pass data from one component to another in React.In simple words, props help components share data with other components.For example, we ca

useNavigate() in React Router

When building a React application, we often need to move users from one page to another.For example:After login, move the user to the Home page.After submitting a form, move to the Success page.After clicking a button, open the Cart page.We can use useNavigate() to do this. 1. What is useNavigate()?useNavigate() is a Hook provided by React Router.It helps us move from one page to another using JavaScript.In simple words, useNavigate() allows us to change pages when an action happens. 2

BrowserRouter in React

1. What is React Router?React Router is a library that helps us navigate between different pages or views in a React application.For example:/ displays the Home page./products displays the Products page./about displays the About page./cart displays the Cart page.We can move between these pages without reloading the entire website. 2. What is BrowserRouter?BrowserRouter is a component provided by React Router.It uses the browser's URL to manage navigation in our React application.In si

New SortMail app icon

Latest SortMail update 🚀It’s now a proper installable PWA.✅ New SM app icon✅ Desktop install supportTested locally and confirmed working in production.Slowly turning SortMail from a project into a real product. 📬🚀 BuildInPublic #PWA #React #WebDevelopment

Let your coding agent start from a real component instead of writing one from scratch

Ask Claude Code, Codex or Cursor for "a hotel date picker with a price under each night" and you will get a calendar written from zero. It renders. It usually misses the details a mature component already handles: check-out on a night that is booked by the next guest, a minimum stay, the total under the selected range, keyboard navigation.We built Clay UI so the agent looks in established component libraries first, then adapts real code to your project.Demo videos and the site: https://clayui.be

React useEffect Hooks

It initially re-render rather than re-rendering of everytime and you control whether it runs again using the dependency array.eg: useEffect(() => { console.log("Runs only once when the component first loads"); }, []);-> when specific values change: Put those variables inside the array. eg:useEffect(() => { console.log("Runs on first load, and ONLY when 'userId' changes"); }, [userId]);

The Future of Micro-Frontends: How to Combine Module Federation with Server-Side Rendering (SSR)

Client-side Module Federation has a well-known weakness, the browser downloads a shell, then fetches remotes, then renders. Users stare at a blank page, and crawlers may see very little. For content-heavy or SEO-sensitive products, that's a deal-breaker, and it's why teams keep asking the same question, can we get independently deployed micro-frontends **and* server-rendered HTML?*The answer is yes, with caveats. Module Federation supports server-side rendering, and the same model that works in

useEffect vs useLayoutEffect: Why the Tooltip Flashes, Then Jumps

Picture a tooltip that should sit above a button. For one frame it shows up at the top of the box, then it jumps into place.The measurement was right. It ran too late. useEffect let the browser paint the first, wrong position. The mental model: before the curtain, or afterReact updates the DOM, then the browser paints what the user sees. There is a gap between those two, like the moment before a curtain opens.useLayoutEffect runs in that gap, while the curtain is closed. useEffect runs afte

Migrating an existing Next.js app to Cache Components before Next.js 17

With Next.js 16.4 (October 2026), the Next.js team started recommending Cache Components for every app. New projects from create-next-app have it switched on, and the release notes say it will become the default in Next.js 17.If you have an existing App Router app, that gives you a choice: migrate now at your own pace, or do it under pressure during a major upgrade. This post walks through the migration by hand, in the order that keeps your app building the whole time.Short version: enable cache