DevIdiot!
From a GraphQL monorepo to FastAPI and React: the coupling changed
Language Power is a vocabulary trainer I've built three times. The current version is a Python backend, FastAPI with PostgreSQL and Redis, and a React client, kept in two separate repositories and talking over REST. It runs as a private deployment I use every day and a public demo with strict limits. The version before it was a TypeScript monorepo with a GraphQL API and a shared schema.I built the app for my own language learning, so what follows is about maintaining one developer's project over
Best shadcn registries for ready-made blocks in 2026
Checked against official sites on November 2, 2026.You need a pricing section, a hero and a footer. The useful question is not which library has the most components. It is which registry gives you a complete section that fits your project, and what happens when your agent installs it.My shortlist: shadcn/ui for free application layouts, Shadcnblocks for a broad marketing catalog, Tailark for marketing pages, VibeUI for a visual pick → AI instruction → install workflow, and Magic UI for animated
TanStack Table vs ReUI: picking a React data grid for a shadcn app
If you build a data grid with TanStack Table in a shadcn app, most of the work is the grid UI, not the table logic. ReUI's data grid is that UI already written, on top of the same TanStack Table. So the useful question isn't which engine to use. It's how much grid UI you want to write, and how much of it you want to own.I work on ReUI, so keep that in mind. I'll point out where plain TanStack Table is the better call. What I checkedI compared @tanstack/react-table 9.3.1 with the ReUI data g
Styling Server Components without a stylesheet or a build step
Style React Server Components with typed props and no 'use client', style registry or build plugin, with the CSS inside the HTML React streams. This article shows how that works in a Next.js App Router app, measures what it costs against a plain CSS module, and lists what still has to run on the client.The examples here are screenshots; they run live in the original article. The problemYou moved a page to the App Router, and the first component that styles itself wants 'use client'. Runtime
Dark mode without the flash
A dark mode should paint the reader's theme on the first frame, switch without re-rendering the page, and let one section disagree with the rest. Most manage one or two of those three jobs. This article builds all three with Box Kite, shows what each line costs, and is explicit about the one piece the library leaves to you.The examples here are screenshots; they run live in the original article. The problemSomebody opens your server-rendered page at night with their system set to dark. The
I built a hand-drawn React UI kit that's crooked on purpose and accessible anyway
Most UI kits try hard to look neutral. PlopUI goes the other way: wobbly sticker buttons, washi-tape tags, a hand-lettered marker font, colors picked by instinct. The whole thing looks like it was drawn on the back of a receipt.It has one rule: break the visual rulebook, never the accessibility one. The drawing sits on top, never insteadA PlopUI button is a real <button>. A checkbox is a real checkbox. The hand-drawn outlines, shadows and doodles are decoration layered over native ele
Feature-flag AI-suggested UI before it hits every user
The first time we shipped an agent-written settings panel straight to main, it looked fine in staging. Then support got three tickets in an hour: a toggle that did nothing for free plans, a “Save” that double-fired on slow networks, and a new empty state that hid the only CTA half our users needed.CI was green. Visuals looked close. The bug was product judgment the model never had — and we gave 100% of traffic that judgment on day one.So we stopped treating “agent UI merged” as “agent UI live.”
Building OrderCraft: A Local-First Financial Charting Terminal in a Single ~14MB Go Binary
Modern financial charting platforms have converged on the same frustrating cloud SaaS model: lock basic technical analysis behind $15 to $60/month subscriptions, restrict free users to 2 indicators per chart, paywall multi-chart split-screen layouts, and force all your watchlists and layouts into their cloud.On the flip side, developers who try to build hosted open-source alternatives hit two massive walls almost immediately:IP Rate Limits: Public exchange APIs (like Binance or Yahoo Finance) ba
React 19 forwardRef Migration: ref as a Prop in TypeScript
TL;DRIn React 19, function components receive ref as a regular prop, so you delete forwardRef, read ref from props (or let it travel in ...props) and type it with ComponentProps or Ref<HTMLInputElement>. forwardRef still works in React 19.3 and logs no warning, but React plans to deprecate it, and a library that supports React 18 has to keep it. The parts that need care are merged refs, which should pass on cleanup functions, and asChild, where the ref belongs on the child element.Yo
Next.js Open Graph Image Missing? Your Page Replaced It
My homepage had a share image. Fourteen other pages on my site didn't, and nothing told me.I only found out when I ran my own pages through a metadata checker I'd just built. Lighthouse hadn't flagged it: pages with no og:image still scored 100 for SEO. The causeHere's the setup almost every Next.js site starts with. The layout holds the shared tags, and each page adds its own title.// app/layout.tsxexport const metadata: Metadata = { metadataBase: new URL("https://example.com"), openGrap
WebAuthn errors: NotAllowedError, InvalidStateError and more
WebAuthn reports every failure as a DOMException with a name. The message text differs between Chrome, Safari and Firefox, so branch on err.name and log the message for yourself. This page lists each name the spec throws from navigator.credentials.create() (registering a passkey) and navigator.credentials.get() (signing in), what causes it in practice, and what to show the user.try { const cred = await navigator.credentials.create({ publicKey: options });} catch (err) { console.log(err.name, e
Building an Image Compressor That Hits an Exact File Size
Every upload form has the same annoying quirk: it rejects on file size, but every compressor gives you a quality slider instead of a size input.So you end up in a loop. Compress, check size, compress again. Adjust quality from 80 to 70. Check again. 65. Again.I wanted to invert that: give the tool the number, let it figure out the quality. The problem with quality-firstJPEG file size doesn't vary linearly with the quality parameter. Going from q=0.9 to q=0.8 might drop the file by 40%, or b
AI-Powered Technical Support for 5G and IoT: Benefits and Limitations
The expansion of 5G networks and the Internet of Things (IoT) has increased the complexity of telecom operations. Telecom operators must manage connected devices, investigate network faults, and maintain service quality across interconnected infrastructure. Traditional support processes can struggle to deliver the visibility and speed these environments require.AI-powered technical support for 5G and IoT helps operators detect network anomalies, automate routine diagnostics, and identify potenti
"Shipping a data-heavy browser extension: offline tables, daily updates, no host permissions"
I maintain a reference site for steel section weights, and recently turned it into a browser extension: a weight calculator in the toolbar, a look-up for standard beam sizes such as W8x18 or IPE 200, and a right-click card that shows the weight of a size selected on any page. The extension is plain JavaScript with no build step: an HTML popup, a module service worker and one shared core.js.The interesting part was not the UI but the data: 1,557 sections, pipe schedules, rebar sizes and sheet gau
Build a Microphone Level Meter in JavaScript with the Web Audio API
Every video call app has a little bar that jumps when you talk. It looks like magic, but the browser gives you everything you need in about 15 lines of JavaScript with the Web Audio API. Here is how a microphone level meter works, plus the error handling that makes it usable for real people.👉 Live demo: arelvox.com/mic-test 1. Ask for the microphonenavigator.mediaDevices.getUserMedia({ audio: true }) .then(start) .catch(showError);The browser shows its permission prompt. Note that getUser
How I mapped BaZi luck cycles onto a stock candlestick chart
Most BaZi (Four Pillars) readings come back as a wall of text. You get a birth chart, a list of ten-year luck periods, and paragraphs about each one. It's hard to see the shape of it. Which decade is the high point? Is 2027 better or worse than 2026?I've spent a lot of time looking at stock charts, and at some point the obvious idea showed up: a life laid out year by year is a time series. A time series with ups, downs and turning points is what candlestick charts were made for. So I built Life
One codebase, two outputs: a zero-dependency static site and an Android app for Quran audio
I built a Quran audio project where the same JavaScript generates both a static website and an Android app, with no runtime dependencies in the generator. Here is how it is structured and what I would do again.The result is called Suwar: one page per surah, in Arabic and English. The constraintI wanted every one of the 114 surahs to have its own indexable page, in two languages, plus a mobile app that reuses the same interface. That is 228 pages. I did not want a framework build step to mai
Why We Ditched a 30MB AI Model and Built a <2.5ms Canvas Snapper in TypeScript
When building FocusFlow — a spatial storytelling canvas that turns architecture diagrams into 60fps cinematic presentations — we faced an intriguing computer vision problem: Click-to-Snap.When a user imports a rasterized architecture diagram (PNG/JPEG/SVG) and clicks anywhere inside an element (like an ECS task card, a VPC boundary, or a database cylinder), the engine needs to extract its precise bounding box in < 5ms to smoothly anchor camera viewport frustums. 1. The Initial Mirage: We
CSSForge: Upgrading to v1.1 soon!
Hey DEV Community! 👋Over the past few weeks, we’ve been gathering incredible feedback on CSSForge, a zero-bloat web tool designed to help developers create production-ready multi-layer shadows and glassmorphism effects with clean CSS export.We’re excited to share a sneak peek of what’s coming in v1.1, along with an invitation to test the current v1.0 release. 🔮 What’s Coming in v1.1?🎲 Smart "Randomize" Engine: Instant generation of curated, production-ready multi-layer shadow presets inspir
What a "no-upload" PDF tool actually does with your file (and 4 limits nobody mentions)
"Your files never leave your device" is on every browser-tool landing page now. I build one of these sites, so here is what that claim really covers — and where it quietly stops.1. "No upload" ≠"offline." The file is read with the File API inside the tab, but the page still loads its PDF and image libraries from a CDN. Open the tool with no network and it won't start. I wrote up exactly what happens step by step in what the browser does with your file.2. Client-side PDF compression usually mean
