DevIdiot!

Designing an Honest Loading State for AI UI Generation

A model taking a while is a backend problem. Making the whole editor look frozen while it waits is a product problem too.In Napkin, users describe a UI idea or upload a sketch and ask the app to generate a responsive HTML draft. When Gemini took close to two minutes, the existing draft stayed safe—but the feedback was a generic spinner over the editor. It obscured the workspace without showing where the result would appear. Put the wait where the result will beFor the first generation, the

What remains without import type? Comparing tsc, esbuild, and side effects

Some configurations automatically erase an import used only as a type, even without import type. With verbatimModuleSyntax: true, however, the spelling also changed whether a module's side effect ran. Check type-checking success separately from runtime module evaluation.In particular, these forms do not always emit the same JavaScript:import type { Ticket } from "./registry.js"import { type Ticket } from "./registry.js" Put a visible marker in the imported moduleThe experiment ran on Septem

Six things I fixed while building a 3D card gallery with React Three Fiber

I run a small comparison site for crypto debit cards, and the main page is a 3D ring of 11 cards you can spin, tap and flip. It is built with React 19, @react-three/fiber, drei and three.js r185. You can try it here: cryptocardinsider.com/?view=gallery.Getting a ring of cards on screen was the easy part. Making them look like real cards and run smoothly on a mid-range phone took most of the work. These are the fixes, with the code. 1. Use the real card proportionsMy first cards were "roughl

URL Encoder / Decoder: Why My Report Link Lost Half Its Query String (and the Percent-Encoding Fix in Python, Node, and the Browser)

I shipped a "copy view link" button for our internal reporting page last month. It produced links that looked like this:https://reports.acme.com/view?redirect=https://app.acme.com/dash?tab=sales&range=30d&q=caféTwo question marks. Three ampersands. One accented character. Pasted into Slack, the link half worked: people landed on the default tab, range silently reset to 7 days, and the search box came back empty.Nothing crashed, which is what made it annoying. The URL was ambiguous, not i

Detecting fake hi-res audio in the browser: a peak-hold FFT with the Web Audio API

The file header says 24-bit/96 kHz, but that only describes the container. If you want to know what is actually in the file, you have to look at the spectrum. I built a browser tool that does this for The Audio Stuff, the FLAC & Hi-Res Audio Checker. Here is how to build the core of one with the Web Audio API and a plain JavaScript FFT, with no server and no libraries. 1. Don't let decodeAudioData resample your fileThis is the trap that catches almost everyone. decodeAudioData() always

Jostraca Review: A Good Merge Engine with Unsafe Defaults

Most code generators assume you never touch what they produce. That assumption rarely holds. Someone adds a prop or fixes a class name, and the next regeneration wipes it out.Jostraca is an open-source JavaScript code generator that takes this problem head on. It says it can regenerate over hand-edited files and keep your edits. That is a big claim, so I tested it. I built a small React component generator, edited the output by hand, and changed the generator to see what survived.Short version:

Building Paper Adventure: a printable game app with React, Cloudflare, and Stripe

I'm building Paper Adventure Workshop, a web app for printable story adventures for families and classrooms. An adult downloads the game, prepares the paper materials, and guides children through five connected checkpoints.There are two product paths: ready-made games with existing files, and AI-assisted custom adventures built around a buyer's idea. Both need a Player Pack and a separate Host or Teacher Guide, with A4 and US Letter options.The live homepage introduces the print-first experience

Technical Breakdown: Vitest Dev-Server Secret Leak (CVE-2026-112948) & How to Protect Your .env

Original Technical Advisory & Research published on DevOmniTools Security Lab. Executive Summary & Vulnerability ContextOn October 21, 2026, the GitHub Advisory Database published CVE-2026-112948 (GHSA-p458-7748-mcp3), exposing a critical file access vulnerability in Vitest 5 dev servers.When developers execute test suites using:The interactive UI (vitest --ui)Vitest Browser Mode (@vitest/browser)- Or by exposing the remote API (api: true / --api)Vitest's underlying HTTP server inad

Running AI in a Manifest V3 Extension: Putting 1024-D Vector Search Inside the Browser

This is an engineering write-up, not a product launch. It documents how I run image feature extraction and vector similarity search entirely on the client side of a Chrome extension — no image ever leaves the user's device — under the constraints Manifest V3 imposes. The working example is OmniPic, one of the extensions in the OmniSuite collection (https://omnisuite.top). 1. The constraints MV3 puts on on-device computeThe service worker is disposable. Background work can be killed at any t

How I Built a Privacy-First PDF Processor That Never Uploads Your Files

TL;DR: Most online PDF tools transmit your documents to remote infrastructure. We engineered KAOpdf to execute all PDF manipulations directly inside the browser sandbox using WebAssembly and Web Workers — zero server uploads, zero remote storage, zero data leakage risk. Here is the technical breakdown of how we built it. The Problem With "Free" Online PDF ConvertersIf you have ever used a standard online PDF compressor, converter, or merger, you have almost certainly uploaded your documents

Free Open-Source Alternatives to Photoshop, Excel and Slack You Can Run Yourself

This article was drafted with AI assistance and fact-checked against the project's README.Photoshop, Excel and Slack all come with a monthly bill. The HeyPuter/everything repo rebuilds free, open-source alternatives to proprietary software like these from scratch, under the MIT license. It has 3.5k stars on GitHub. What's insideA few of the apps and what they stand in for, as listed in the README:Spreadsheet: Microsoft Excel, Google Sheets, Apple NumbersDocuments: Microsoft Word, Google

Building a browser tone generator with the Web Audio API

I built a free online tone generator for The Audio Stuff: sine, square, triangle and sawtooth tones, five colours of noise, frequency sweeps, a left/right channel test, a polarity click, and WAV export. Everything runs in the browser with the Web Audio API, no server and no libraries. Here are the building blocks, simplified, in case you want to make something similar. 1. Create the AudioContext on a user gestureBrowsers block audio until the user interacts with the page, so create (or resu

Deploy FastAPI and React with Docker Compose

Docker Compose gives you the same setup on your laptop and your server: one command builds and starts the API and the frontend. This guide covers both Dockerfiles, the one setting people get wrong (build-time variables for the frontend), and going to production. The backend imageWith uv, the image is small and the install is reproducible from the lockfile:FROM python:3.12-slimCOPY --from=ghcr.io/astral-sh/uv:latest /uv /bin/uvWORKDIR /appCOPY pyproject.toml uv.lock ./RUN uv sync --frozen --

Let your users to build their own dashboards in your app

Customers like dashboards they can rearrange. Building one yourself means a grid system, a catalog of charts, a settings form, filters and a way to save the layout, and that list is longer than it looks from the outside.@datastripes/dashboard packages those pieces. You pass it an array of rows and a JSON config, and it renders a dashboard that users can edit, filter and export. This page covers how the config works, how to embed the dashboard in each framework, and what the package leaves to you

Mastering Advanced Features and Techniques of JEST React Testing Library

Welcome to a deeper journey into the JEST React Testing Library world! We'll explore advanced methods and tricks that enhance your testing expertise here. If you're new to JEST, don't worry! We've got you covered with "Exploring JEST React Testing Library: A Complete Overview," which helps you understand basic and advanced insights, ensuring a comprehensive understanding of JEST Testing. Go and check this out right here.Now, let's start exploring advanced features and techniques. 1. Simulat

I built an OpenAPI client generator where you only ship the endpoints you import

Most frontend apps talk to a backend that already has an OpenAPI description. Yet a lot of us still write the types by hand, or copy them from Swagger UI, and then watch them slowly drift away from what the server actually returns.Code generators fix the drift, but they can bring their own problems:the whole API ends up in your bundle, even if the page calls three endpoints,the request type for "create a pet" still demands the id the server assigns,errors are typed as unknown, so every catch blo

My Reducer's Switch Stopped Being Exhaustive. `as const` Fixed It.

The PR review catches it at the worst possible moment — the day after it shipped. A teammate added a 'reset' action to the cart reducer, ran the tests, watched them pass, and merged. The switch statement never ran the new branch. Not an error. Not a warning. The build was green the whole time.Here's the reducer, trimmed down to the shape that matters:function cartReducer(state: CartState, action: { type: string; payload?: unknown }) { switch (action.type) { case 'add': return { ...state

Nuxt 4.6 nuxt/server: Why Mixing h3 Imports Throws NUXT_E8012

A server/api/profile.get.ts handler that worked fine on Monday starts returning a NUXT_E8012 error on Tuesday, and the only thing that changed is a teammate added one line — reading the signed-in user's session with a helper imported from nuxt/server. Nothing else moved — not the route, not the defineEventHandler at the top of the file, not the dependency versions in any way you'd notice without reading package.json closely. The error message is honest about what's wrong, but only if you already

Your cached MCP server still asks npm first

The filesystem server's README has you paste something like this into your config:{ "mcpServers": { "filesystem": { "command": "npx", "args": [ "-y", "@modelcontextprotocol/[email protected]", "/tmp" ] } }}The first launch downloads the package. After that it's in npx's cache, so I figured it ran from disk, and that pinning the version (which write-ups like Archestra's tell you to do) made that even more true. Then I watched what npm does when it

Stop copying payee addresses from wallet history: a small pattern for repeat crypto payments

If you pay the same person in USDC or USDT every month, there is a good chance you do it like this: open the wallet, find last month's transfer, copy the address, paste, send.That one step, copying the address from history, is exactly what address poisoning is built for. The threat in one paragraphAn attacker watches the chain for your transfers. Right after you pay someone, they send you a tiny or zero-value transfer from an address that starts and ends with the same characters as your rea