DevIdiot!
Cache and Memory Are Not the Same Thing. Frontend Engineers Keep Treating Them As If They Are.
We use these words interchangeably all the time."The browser caches it." "React Query caches the response." "We memoize that calculation." "Service worker cache." "In-memory cache."Cache. Memory. Memoization. Same bucket, different labels.They're not the same thing. And the difference isn't pedantic β it's architectural, and it changes how you should design systems. Start with what they actually areMemory is a place where a system stores something it owns. The value exists because the syste
Turning a 4,000-node DOM into 40 components: the hard part of website-to-React
In my last post I broke down why "convert this website to React" is so much harder than scraping HTML, and I ended on the one problem I called the hardest: turning a rendered page into actual components. This post is about that problem specifically, because it's the difference between output a developer keeps and output they delete.Here's a 2-minute demo of the tool doing the full conversion first, so you have context:https://www.loom.com/share/00f1a18348a34770a77bb3d2b79ef641The gap nobody warn
Security Pitfalls in React Apps I Learned the Hard Way
A few months back I was doing a code review for a friend's project and noticed they were storing JWTs in localStorage. I almost said nothing because honestly, I had done the same thing in like three projects before someone pointed it out to me. That's kind of the problem with frontend security. Nobody really teaches it properly, so we all just copy patterns from tutorials that were written to be quick, not safe.So here's what I've picked up, mostly from messing things up myself or catching bugs
React 19.2 Activity Component: Keeping Unmounted Trees Alive for Faster Tab Switching
React 19.2 Activity Component: Keeping Unmounted Trees Alive for Faster Tab Switching The Tab Switching Problem Every React Developer FacesMost state persistence problems in React stem from the framework's unmount behavior. When developers build tab systems, multi-step forms, or dashboard layouts, they typically use conditional rendering. The active tab renders, the inactive tabs unmount completely. Users switch back to a previous tab and discover their form data vanished, their video
URL Encoding vs Percent Encoding β Are They the Same Thing?
Most developers use these two terms interchangeably. Stack Overflow threads mix them up. Documentation switches between them mid-paragraph. Even MDN uses both terms in the same article.So are they the same thing β or is there a real difference?Short answer: they refer to the same mechanism, but come from different contexts. Understanding which is which will save you from some genuinely painful debugging sessions.What is URL Encoding?URL encoding is the informal, developer-facing term for convert
How I Keep Video Preview, Editing, and Export in Sync With VideoJSON
I kept running into the same bug in video projects: the preview looked right, the editor looked right, and the export was slightly off. By the time I had a browser renderer, a server renderer, and an editing UI, I was maintaining three versions of the same logic.The fix was to stop treating preview, editing, and rendering as separate artifacts. I moved to one VideoJSON source of truth and let different renderers consume it. That is the workflow I now reach for when I want structured, repeatable
Why Splitting a 2,500-Line File Broke Our Architecture
TLDR A single 2500-line index.html with all JS inline worked. Splitting it into modules surfaced three classes of bugs: arrow functions with broken $(this), initialization order errors from circular-looking imports, and implicit state dependencies that were invisible inside a shared closure. The bugs were not created by the split. They were revealed by it.Schema CAD Editor The Assumption That Seemed ReasonableA large single-file codebase is a starting point. You iterate fast, eve
Race Your Friends at Typing β Free Multiplayer Typing Race, No Signup
A multiplayer typing race is the most fun way to practice typing β everyone races the same passage at the same time, and watching a friend's progress bar creep ahead of yours is far more motivating than any solo WPM test. It's the TypeRacer idea, but free and with no account.The multiplayer typing race at Ultimate Tools lets you spin up a private room, share the link, and race up to 8 people live β with progress bars, per-racer WPM, and a finish-order leaderboard at the end. No signup, no downlo
Run OCR 100% in the browser: images & scanned PDFs to text, no server
OCR usually means uploading your document to someone's server. For a receipt or a contract, that's a privacy cost for a one-line task. But you don't need a server β a full OCR engine runs in the browser via WebAssembly. Here's how to turn images and scanned PDFs into editable text fully client-side. The piecesTesseract.js β the Tesseract OCR engine compiled to WASM. Recognises text in an image.pdf.js β to render scanned PDF pages to a canvas first (a scanned PDF is just images, so we OCR ea
The most-installed XML viewers are 2β
and abandoned. So I hand-wrote one.
Open a .xml file in your browser and you usually get one of three things: a wall of unindented text, a viewer that freezes the tab on anything big, or β when the XML is actually broken β a blank page that won't tell you why.So I went looking for a good XML viewer extension. The most-installed ones on the stores are stuck around 2 stars and haven't been updated since 2023. The reviews rhyme: "doesn't work", "freezes", "just shows plain text". I built Xwift to do the three things those don't.
PNG to PDF without losing transparency: what most converters get wrong
You export a logo as a transparent PNG, drop it into a "PNG to PDF" converter, and the result has an ugly black box around it β or the transparency silently becomes white and ruins a design meant to overlay something. This is the single most common bug in PNGβPDF conversion, and it comes from one fact people forget:A PDF page is not transparent. When you print or flatten it, "transparent" has to become some colour.So the real question isn't "does it keep transparency?" β it's "what should the tr
How to convert a PDF to images entirely in the browser (no upload)
Most "PDF to image" websites work like this: you upload your file, their server renders it, and you download the result β trusting that they delete your document afterwards. For a contract, an ID scan, or a medical form, that's a lot of trust to hand over for a one-line conversion.The good news: you don't need a server at all. Modern browsers can render PDF pages to a <canvas> and export them as PNG or JPG entirely on the client. Here's how to do it properly β including the part everyone g
Building Velodrome: A Real-Time Multiplayer Typing Race Game
Building Velodrome: A Real-Time Multiplayer Typing Race GameI built a full-stack typing game with live multiplayer, ghost racer replays, and per-key analytics. This post covers how I solved the hard parts.Live demo | GitHub The IdeaTyping games like TypeRacer are fun, but I wanted to add something different. Three things mattered to me:Ghost racer - your best run replays as an opponent in future racesPer-key analytics - figure out which specific characters trip you upReal-time multipl
8 Years of Maintaining a React Native App: What I Got Right and Wrong
In 2018, I started building LoaderApp.At the time, it was a relatively simple mobile application. Like many side projects, I expected to work on it for a few months before moving on to something else.Instead, I'm still maintaining and improving it in 2026.Over the last eight years, the app has survived:Multiple React Native releasesAndroid API changesiOS platform changesDependency deprecationsStore review policy changesCountless feature requestsMore bugs than I'd like to admitHere's what I learn
5 Things I Learned Building APIs with Node.js:
Why Your CORS Setup Breaks in ProductionYou build the API. Test it locally. Everything works perfectly.Then you deploy, and suddenly the browser console is full of red text about CORS policy violations.If you've been there, here's why it happens and how to actually fix it instead of just slapping origin: '*' on everything and hoping for the best.1. Localhost is forgiving. Production is not.When you're developing locally, your frontend and backend often run on the same machine, sometimes even the
Why I Started Learning React Query (TanStack Query) Today
Why I Started Learning React Query (TanStack Query) TodayLet's be honest, we've all been there. You start a new React project, full of enthusiasm for building a sleek, responsive UI. But then, almost inevitably, you hit the data wall. Suddenly, your components are littered with isLoading flags, isError checks, setData calls, and useEffect hooks with dependency arrays that make your head spin. You end up writing the same boilerplate over and over again, manually managing cache invalidation,
I Built a Production AI Pipeline for a UK FinTech β Here's What Actually Happened
After five years of shipping features at Rangewell, the team gave me a piece of feedback that stung a little: I was good, but I only ever built what I was asked to build. And we delivered, end to end, every week. From dashboards to multi-step workflows to third party integrations, all of it to make dense workflows understandable. Somewhere along the way I'd become all about business critical web apps, where the frontend is not just visual, it's how people execute operations reliably.But it just
Voice Agent UI
Voice AgentInteractive grid-based voice assistant interface with multiple state visualizers.Live Simulation >>[Preview][Usage]import { VoiceAgent } from '@unbrn/ui/VoiceAgent';export default function Example() { return ( <VoiceAgent status="speaking" onMuteToggle={() => console.log('Muted')} onDisconnect={() => console.log('Hangup')} /> );} Examples Agent StatusesThe voice agent supports 5 statuses: idle, connecting, listening, speaking, a
Why I Started Learning React Query (TanStack Query) Today
Today I started learning something that honestly changed the way I think about React apps: React Query, now known as TanStack Query.At first, I thought it was just another state management tool like Redux. But itβs not.It solves a completely different problem.And if you are building React apps, especially with APIs, this is one of those tools that quietly removes a lot of pain. The Real Problem It Solves (What I Didnβt Understand Before)In React apps, we usually deal with two types of state
CSSQuake
<a href="https://news.ycombinator.com/item?id=48608223">Comments</a>
