DevIdiot!

Search Results That Jump Back to an Old Query in React: Finding and Fixing the Race

The problemA developer built a search bar in React. Each time the user types a letter, the component sends a request to the server and shows the results. Most of the time it works. But sometimes the list shows results for an older, shorter search. The box says "react", and the list shows results for "r". Typing slowly hides the bug. Typing fast makes it show up again.This is a common bug, and it is easy to miss in local testing, because a local server answers almost every request at the sa

Random Number Generator: Picking 10 Giveaway Winners Nobody Can Predict (Python, Node, and the Browser)

Our marketing team ran a webinar in October and promised ten $200 vouchers to ten randomly chosen registrants. The export hit my inbox at 09:40, a CSV with 8,453 rows.Legal added two conditions before I touched it. Nobody may predict the winners, and we have to reproduce the exact draw six months later if anyone contests it.Those two conditions fight each other. Reproducible means a seed. A seed published before the draw lets anybody compute all ten names in advance. It took most of an afternoon

Shareable, Accessible, and Non-Blocking: Three Upgrades for a Client-Side Text Repeater

Most "simple tool" tutorials stop the moment the output appears on screen.But once real people start using a tool, three questions show up fast.Can I send my exact settings to a friend without retyping everything?Does this work with a screen reader, or does it just announce noise?And what happens to the UI when I push the count to ten thousand?I ran into all three while maintaining a text repeater called happy birthday 100 times, and none of the fixes needed a framework. Here is how I handled ea

Scalable React Project Structure with Vite and Tailwind CSS

Scalable React Project Structure with Vite and Tailwind CSSBuilding a React application is easy to start. Keeping it maintainable as it grows is the real challenge.As new features are added, a project can quickly become difficult to navigate. Components end up in the wrong folders, API requests are scattered across the codebase, and business logic becomes tightly coupled to the UI.A well-organized React project structure helps developers maintain clean code, reuse components, and scale app

URL-Safe Base64 vs Standard: How to Tell Them Apart

Standard Base64 uses 64 characters: A–Z, a–z, 0–9, and then + and /. Those last two are the problem. In a URL, + means space in application/x-www-form-urlencoded; / is a path separator. In a filename, / is a directory separator. So a string that is perfectly valid Base64 becomes structurally dangerous the moment you put it in a query parameter, a cookie value, or a JWT.The fix is an alphabet substitution, and it is where a surprising number of decoding failures begin. The substitution, and

Merging PDFs in the browser without uploading them: pdf-lib, lazy loading and a test that fails on any POST

I'm the developer of MakeQuickWork, a small site of free browser tools. This post is about how its Merge PDF tool works under the hood.Most "merge PDF online" sites follow the same pattern: you upload your files, a server stitches them together, and you download the result. That works, but the files you merge are often the ones you least want to hand to a stranger's server: a signed contract plus its annex, a passport scan for a visa application, a pile of receipts for an expense report.Merging

Friday Offer Click here and Shop Now

<p>Details<a href="https://www.profitableratecpmnetwork.com/swgncyp6a?key=87e65e5887f8baaf4e35c07bcefe62ae" rel="noopener noreferrer">Read more</a></p>

I built a motion graphics editor that runs in a browser tab (and let an AI animate in it)

Every time I needed a 15-second animated clip, I had two options: pay for a motion graphics suite I would open twice a month, or fight a template site that exports a watermark.So I built my own. It's called Riptide, and it runs in a browser tab.It's not a toy. The promo Short for it was made in it. Here is what it does, how it is built, and the bug that taught me the most. What it doesLayers and keyframes. Rectangles, ellipses, polygons, stars, arcs, waves, text, images and video. Any p

Click here and Shop Now

<p>Click here and Shop Now<a href="https://www.profitableratecpmnetwork.com/swgncyp6a?key=87e65e5887f8baaf4e35c07bcefe62ae" rel="noopener noreferrer">Read more</a></p>

I Built Rillio: A JSX UI Runtime Using Addressable DOM Instead of Virtual DOM

I've been working on a side project called Rillio, a small TypeScript/JSX UI runtime.GitHub: https://github.com/vyquocvu/rillioIt started as an experiment. I was curious about one question:What if DOM nodes had stable identities, and we could update them directly without relying on a Virtual DOM tree as the main source of truth?React and Preact already solve UI rendering really well. SolidJS also showed that fine-grained reactivity can work without a traditional Virtual DOM.So I'm not trying to

GSTR-2B Reconciliation Made Simple

The Challenge of Manual ReconciliationFor Indian SMBs, reconciling the purchase register against the GSTR‑2B feed is a monthly chore that involves thousands of invoice line items. Each line must be matched by vendor, GSTIN, invoice number, amount, tax rate, and HSN code. The current manual workflow relies on spreadsheets, ad‑hoc filters, and a lot of trial‑and‑error. Even a single misplaced comma can trigger a cascade of “unmatched” flags, forcing finance teams to dig through logs and re‑e

Two checks worth adding when you rewrite a checkout modal

While rebuilding the free-preview and checkout flow in CrawlGraph, our review caught two details that are easy to miss: inherited disabled state and native email validation.The browser APIs covered both cases. We added checks for the pending request state.I build CrawlGraph, a backlink research and outreach tool. Here are the two checks from the interface work we just released. 1. A fieldset can disable an input without changing its attributesOur checkout has a plan chooser. While its reque

I built a Markdown to Word converter that never uploads your document

Most online file converters work the same way: you upload your document, a server converts it, you download the result. For a Markdown to Word converter that is a strange trade. The conversion is cheap, the document is often the one thing the user does not want to hand to a stranger, and the server costs money forever.I built md-to-word.com the other way round. Nothing is uploaded. The page is static HTML; the converter is a small React island; both conversion engines run in the visitor's browse

JSON ids above 2^53 arrive rounded, and a reviver only fixes the leaf

A JSON integer above 2^53 does not survive a round trip through JSON.parse. It comes back as a different number, with the same type, no exception and no warning. A record that matched a row in the database stops matching, and the code consuming it has no signal that anything moved.The measurements below ran on Node v26.12.1. They locate the boundary, show where a JSON.parse reviver helps, and show the two places where it does not. The smallest case that failsconst parsed = JSON.parse('{"id"

YouTube AI Comment Moderation Tool That I Open Sourced

I started a YouTube channel and saw far too many hate comments for my comfort level.There’s a problem and I want to do something about it. That’s why I made Moderaty. I want trolls dealt with without having to personally read and react to every shitty thing they leave.AI reads your comments and handles toxic ones automatically. Borderline comments wait for your decision. You can add specific rules, but you don’t have to build a blacklist to get started.I don’t intend to start my next channel wit

I built a study tracker on a $12/month Kubernetes cluster. Here's the stack and what I learned

I kept starting learning roadmaps (DSA, system design, AI engineering) and then losing track: what I'd covered, how much time I'd really put in, and what was next. Spreadsheets didn't stick. So I built Gradiaqo, a free app that turns any subject into a study plan and tracks your progress. What it doesReady-made paths: DSA, System Design, AI Engineer and Data ScientistYour own paths: build one in the app, or import it from a spreadsheet or YAML fileStudy sessions: log your time and watch you

Streaming JSON when the model emits content before type

Suggestions stream as JSON with three fields: type, title, and content. OpenAI and Google calls send response_format set to json_schema. The OpenAI-compatible Anthropic layer has no response_format. JSON is an instruction in the system prompt, and on that path Claude can emit content before type.A parser that prints the first string value will show the rest of the object as the suggestion. The braces at the end are still syntax.The parser is a state machine with a short reserve. It holds the tai

Optimize Transparent Assets with Blob URLs

Transparent Image Optimization with Blob URLsTransparent image assets can significantly impact a website's performance if not handled correctly. Blob URLs offer a way to dynamically generate and load these assets efficiently, reducing memory usage and improving rendering speed. This guide walks you through the process of using Blob URLs to optimize transparent images in a TypeScript environment. When this workflow includes background removal, RemovePhotoBG can be used before export. Keep t

Smart Forms to Adobe Forms: Invoices and Statutory Documents Done Right

Why Smart Forms Migration Is More Than a Formatting ExerciseMany Canadian SAP teams treat a move from Smart Forms to Adobe Forms as a visual redesign. In practice, it is a business-critical migration involving invoices, packing slips, credit memos, tax documents, and statutory outputs. A form that appears correct in development can still fail when printed, emailed, translated, or generated for a different legal entity.For organizations planning an SAP Erp Implementation Services initiative, form

Why Building a Reliable Calendar UI Is Harder Than It Looks

In a workforce calendar, shifts, absences, and days off can look like variations of the same event. They aren't. A day off belongs to a calendar date; a shift belongs to a span of time. Mixing those rules can move an event to the wrong day without producing an obvious error.I worked on a workforce calendar using React, TypeScript, and Bryntum. It combined shifts, absences, overtime, and days off from separate services. They looked similar in the calendar, but their date handling and visibility r