DevIdiot!

How we built streaming-safe Markdown for AI chat in React

If you've built an AI chat UI, you've seen this: the model streams half a code block, and suddenly your whole reply turns into a giant monospace mess. A ** opens bold and never closes. A link renders as [text](htt. Then the next token arrives and everything jumps back.We hit this so often that we ended up building a component library around it: anythic/ui, open-source React components for AI apps. The problem: Markdown is not designed to be incompleteMarkdown parsers assume they get the who

Build an AI Agent That Triages Support Emails With Human Approval

To build an AI agent that triages support emails safely, let the model classify and draft, but never let it act. Every reply or action it proposes goes into an approval queue, and a human signs off before anything reaches a customer or a system. This tutorial builds exactly that in Node.js, including the approval step most agent demos leave out.If you run a support inbox, you have probably watched a demo where an agent answers emails end to end and thought: I would never let that near my real cu

A pivot table your users can drag, on a million rows, and how to tell whether it freezes the page

Every reporting screen gets the same request after its first week: "Can I see this by month instead?" Then by product, then by country and month together. A pivot table is the answer that stops the requests, because the user drags the fields where they want them and gets the report they were about to ask for.The catch is the data. Every drag regroups and re-sums every row. With a few thousand rows nobody notices. With a million, the obvious implementation freezes the page while it works, and a p

Integrating Real-Time Email Validation into a Next.js Signup Flow

Server-side validation catches bad emails before they hit your database, but by then the user has already submitted the form and is waiting on a response. If you want to tell someone their email looks undeliverable while they're still typing, that's a different problem — and Next.js's API routes make it pretty clean to solve.Here's how I wired real-time validation into a signup flow, from the client-side debounce to the API route doing the actual check. Step 1: The Basic Signup FormStarting

Why const Doesn't Mean What Most JavaScript Beginners Think

You use const because you don't want a variable to change.But JavaScript has a surprise for you. 👀const user = { name: "Rahul"};user.name = "Alex";console.log(user.name);Output:AlexWait… wasn't user declared with const?Here's the trick.const prevents you from reassigning the variable. It doesn't make the object itself immutable.This works:user.name = "Alex";But this doesn't:user = { name: "Sam" };Why?Because const keeps the variable bound to the same object, but the object's properties can stil

Handling Catch-All Domains Programmatically: A Developer's Guide

Catch-all domains are the quiet reason your "validated" email list still has garbage in it. A catch-all domain accepts mail sent to any address at that domain — [email protected] will get a "delivered" response even if no such mailbox exists. Your MX check passes. Your regex passes. The email still bounces or silently vanishes later.Here's how to actually detect and handle these programmatically, instead of finding out the hard way — this is the exact gap tools like Gamalogic exist

Why "1" + 2 + 2 is "122" but 1 + 2 + "2" is "32"

This is the third post in a series I'm writing as I learn JavaScript.Here are two lines that look almost identical:console.log("1" + 2 + 2); // "122"console.log(1 + 2 + "2"); // "32"Same numbers. Same +. The only difference is where the string sits. And yet the answers aren't just different — they're different kinds of thing. One is a hundred and twenty-two-ish. The other is thirty-two-ish. Both are actually text.When I first saw this I assumed it was a trick question. It isn't. Once you know th

Building a free Urdu AI voice with Gemini TTS: three bugs we hit

We make Sitey, a small app for people in Pakistan who write in Urdu. In October we added a speaker button: every AI answer can be read aloud in Urdu, and you can send it to WhatsApp as a voice note. We also put the same voice on the web, free, at app.sitey.pk/urdu-ai-voice.Getting a voice to talk was quick. Making it work properly took longer. These are the problems we hit, in case you are building text-to-speech for a language that isn't English. Picking the voice: listen, don't read bench

ElevenLabs + React: Building a Voice-Enabled UI

IntroductionIf you’ve ever wanted to give your web app a voice—whether it’s reading out notifications, narrating articles, or creating a fully‑spoken chatbot—you’re in the right place. In this walkthrough we’ll combine React with the powerful text‑to‑speech (TTS) and voice‑cloning capabilities of ElevenLabs to build a simple but extensible voice‑enabled UI.By the end of the article you’ll have:A React app that can send text to ElevenLabs and play back the generated audio.A reusable useElev

A timestamp-age badge needs a contract, not just Date.parse

A timestamp can be syntactically readable and still be the wrong input for a dashboard decision. A number labelled “five minutes old” hides several assumptions: which clock produced it, which timezone the string carries, and what the interface means by old.I built Clock Contract Lab as a small, dependency-free JavaScript example. It uses a fixed synthetic reference clock and ten visible boundary fixtures. You can change the timestamp and review window without connecting a live feed or submitting

Add a "New from Template" Gallery to Your SaaS in Two API Calls

TL;DR — A "New from Template" gallery in your SaaS takes two REST calls with ByteChef Embedded: GET /automation/projects returns your curated catalog, and POST /automation/workflow-templates/{uuid}/copy clones a template into the user's own workspace. The copy is a normal, editable workflow that starts as a draft. This is part 8 of the ByteChef Embedded series.Most users don't want a blank canvas. In part 7 we let users build workflows from scratch in a UI we designed — flexible, but slow. What

React Hooks: useContext, useRef, and useMemo

React provides useful hooks to manage shared data, access DOM elements, and improve performance. 1. useContextuseContext lets you share data between components without passing props through every level.import { createContext, useContext } from "react";const ThemeContext = createContext("light");function App() { return ( <ThemeContext.Provider value="dark"> <Child /> </ThemeContext.Provider> );}function Child() { const theme = useContext(ThemeContext); return

If AI Can Build Your Charts, Why Learn Recharts?

You can ask an AI coding tool to build a Recharts component for you, give it some sample data and a prompt, and you'll get something that looks like it works.If you build dashboards, you’ll run into charts sooner or later, whether you're displaying revenue trends, user growth, order volumes or performance metrics.So why learn Recharts?Because getting a chart to render isn't the same as getting the chart to work as intended. The generated code might use the wrong dataKey or data shape, it might w

Building a pet-only meme video page: what the sample needs to prove

I built Bulin47, a pet-only video project inspired by the Bulin 47 freestyle meme. The idea is deliberately narrow: use one authorized pet photo to replace the lead performer in a fixed clip, keeping the other people and the scene unchanged.The output specification is about 19 seconds, vertical 9:16, 480p, with the original freestyle audio. The frontend uses TanStack Start, React and TypeScript, with Cloudflare Workers for deployment. The video-editing integration uses Seedance 2.5 through EvoLi

Deploy Static Next.js App to S3 Bucket

Let's deploy a static Next.js app to an S3 Bucket. I will use Yandex Object Storage (an S3-compatible service by Yandex). But it could be any S3 service and any "static" web app (Vite React, bare HTML, etc.); the process will be very similar. Create Next.js Appbun create next-appCheck everything works as expected by running the dev server:bun run devNow we need to change the next.config.ts to:import type { NextConfig } from "next";const nextConfig: NextConfig = { /* config options here */

Why free batch file tools cap you at 3 files, and how I built one that doesn't (Web Workers + streamed ZIP)

Compressing one PDF is free everywhere. Compressing the forty in a folder is where free tiers stop. The usual excuse is server cost, which is true when files get uploaded, processed on someone else's hardware and downloaded again. Do the work in the browser and that cost disappears, so a 3-file cap is a business decision.But browser-side batch processing swaps the bottleneck from server capacity to your device's memory. How I handled it:Bounded concurrency: 3 files at a time in Web Workers, rath

How I read an Etsy order export in the browser without uploading it

A new EU packaging rule made Etsy ask some sellers for an EPR number. The sellers' question was how much of their shop that touches. The answer sits in one CSV, and that CSV is full of other people's addresses. This post covers how I read it without sending it anywhere. What the export looks likeEtsy's Order Items file has one row per item sold. The header includes Buyer, Ship Name, Ship Address1, Ship City and Ship Zipcode. So the file holds your buyers' names and home addresses.Column ord

Your Architecture Isn't Fast Until It Has a Number Attached

Your Architecture Isn't Fast Until It Has a Number AttachedEvery frontend system design interview has a moment where the candidate says "it'll be fast and scalable" and the interviewer's pen does a little dance. Not the good kind of dance. The "zero points, moving on" dance."Fast" is not a design. It is a hope with a logo. The candidate who sounds senior never says fast. They say a number, and then they say what they are deleting to hit it. That second part is the whole game. The perf

Score Any Public Repository Reproducibly with harness-maturity-analysis

If you are evaluating how well a repository supports AI-assisted development, it is easy to mix two different jobs: measuring one repository quickly and adding a research observation to a maintained corpus. Those jobs need different levels of evidence.harness-maturity-analysis gives you both paths. Its corpus workflow pins repositories to exact commits and records scanner versions. Its ad hoc command lets you inspect any local path or public repository without writing to the corpus.This tutorial

Nuxt 4 Migration: The Breaking Changes That Actually Bite

Nuxt 3 reached end-of-life on July 31, 2026. No more security patches, no more bug fixes, no more compatibility updates — ever, for that line. If your package.json still says "nuxt": "^3", you're not behind on a nice-to-have; you're running unmaintained software in production. And the first time you run npm install nuxt@latest to fix that, something you didn't touch will break in a way the error message doesn't explain.This article is written against Nuxt 4.6.0 (verified against the nuxt package