DevIdiot!

How to upscale images in bulk with one API call (2x or 4x, no GPU)

Upscaling one image is easy: open a desktop app, drop the file, save the result. Upscaling a few hundred images from inside a pipeline is a different job. The typical cases: a supplier feed full of 600×600 product photos when the marketplace wants larger ones, AI-generated images that are too small for print, avatars and thumbnails pulled by a scraper that look soft at full width.What you want there is boring: a list of URLs in, a list of larger files out, the new width and height for each, and

Merge PDFs in the browser with pdf-lib, and what it silently drops

You can merge PDFs entirely in the browser with pdf-lib. No server, no upload, about ten lines. We use exactly this in a small tool, so here is the whole thing, plus the two things it silently drops, which I checked rather than assumed. The mergeconst merged = await PDFLib.PDFDocument.create();for (const file of files) { // File objects from <input type="file" multiple> const buf = await file.arrayBuffer(); const src = await PDFLib.PDFDocument.load(buf); const

How AI and Image OCR Are Solving Real-World Multilingual Challenges

In today's interconnected global landscape, cross-border communication and multilingual text extraction have become essential for students, travelers, and businesses alike. While traditional translators have been around for years, modern machine learning models bring context-aware translations across hundreds of regional dialects without losing nuance. Key Technological Advances:Context-Aware Machine Translation: AI now understands sentence context rather than performing word-for-word subst

I wrote 187 tests for a Chrome extension. The three bugs that mattered were invisible to all of them.

My unit tests were green. My integration tests were green. The feature was broken in a way that produced no error, no warning, and no visual clue that anything was wrong.The feature was a CSS difference blend mode, used to compare a design mockup against a live page: matching pixels turn black, so only the differences light up. Mine turned nothing black. It looked exactly like normal mode, and I lost about a week to it.The cause was one line of CSS, and the reason no test caught it is the intere

Document automation with no backend: turning Word templates into questionnaires in the browser

Law firms, HR teams and freelancers draft the same Word documents over and over: engagement letters, NDAs, offer letters, invoices. Document automation tools exist for this, but the established ones are cloud services. They cost roughly $80 to $400 a month, and they all start with the same step: upload your templates and your clients' details to someone else's server.I wanted to see how far the browser alone could go. The result is Clausery: you take a .docx you already use, mark the parts that

We Built a Free QR Code Debugger (100% Client-Side)

A tool that tests QR codes before you print them. No backend, no uploads, no login.We recently launched RahaLune QR Code Debugger — a free tool that tests QR codes before printing.It runs entirely in the browser. No server, no uploads, no tracking.Here's why we built it and what makes it different. The ProblemQR codes fail more often than people realize. The usual suspects:Low contrast between colorsMissing white space (quiet zone)Low resolution for printWeak error correctionOversized logoN

Building a passport/ID photo maker that never uploads the photo (MediaPipe in the browser)

Most "passport photo online" sites ask you to upload a selfie and then charge to remove the watermark. I wanted to see how far a browser-only version could go: crop to the official spec, replace the background and export print-ready files without the image ever leaving the phone. Here is what turned out to matter. 1. Specs are about head height, not zoomOfficial rules describe the head height (chin to top of head) and the margin above it:PhotoSizeHeadSourceBrazil 3x430 x 40 mm≈ 30 mm (70–80

Building My First Chrome Extension with Manifest V3: What I Learned as an Indie Dev

Hi everyone! 👋I'm Pluong06, a developer based in Vietnam who loves tinkering with modern web tools and building practical productivity utilities.A while ago, I decided to step outside the usual sandbox of web apps and build a real-world Chrome Extension using Manifest V3. Like many developers diving into browser extensions for the first time, I quickly realized that building inside a browser tab comes with its own unique set of rules, challenges, and architectural quirks.Here are a few honest ta

How to Extract Tailwind CSS Configs and Figma Tokens from Any Site in 1 Click

Every developer and designer has been there: you stumble upon a beautifully designed website and want to reverse-engineer its design tokens or inspect how its typography, color palette, and utility classes are structured.Normally, this means opening DevTools, inspect-elementing dozens of DOM nodes one by one, manually copying computed HEX codes or CSS --variables, and spending 30 minutes manually formatting a tailwind.config.js or syncing values into Figma.I got tired of this repetitive manual p

We built 149 file tools that run entirely in the browser. Here is what went wrong

Last week we launched Fileora (fileora.tools): 149 small tools for PDFs, images, video, audio, text and unit conversion. There is no backend, no database and no login. Every file is processed inside the browser tab and never uploaded.That constraint was the whole point. It keeps user files private and it keeps hosting costs close to zero. It also caused most of the problems below.The stack: Next.js 16 (App Router), strict TypeScript, Tailwind v4, shadcn/ui. The actual work is done by pdf-lib and

useContext Hook in React

Context and useContext in ReactWhen building a React application, components often need to share data with other components. Normally, we pass data from a parent component to a child component using props. This works well when the components are close to each other. However, when the data needs to travel through several components before reaching the component that actually needs it, the code can become difficult to manage. This problem is known as prop drilling.Context provides a way to s

Animations Play. Interactions Respond.

I kept rebuilding the same web effects for different projects. Eventually, I stopped rebuilding them and started building a library.There is a folder on my machine where most of my motion experiments go to die.Magnetic buttons.Distorted images.Liquid text.Particle fields.Scroll effects.Shader experiments.Some were useful. Some were terrible. Some looked impressive for about five minutes.And some made me realize something:Animations play. Interactions respond.That distinction became the foundatio

I built a sudoku app where the AI coach is never allowed to be wrong

I play sudoku most mornings. Every app I tried was either slow to enter digits, covered in ads, or both. So I built Kodiak Sudoku, and along the way I ran into three problems that turned out more interesting than I expected. 1. Making 81 cells feel instantA sudoku board is 81 cells, each with up to 9 pencil marks. If typing a digit rerenders the whole grid, you feel it, especially on a cheap phone.What worked:Zustand with one selector per field. Each cell subscribes only to its own value, i

How to Add Award-Winning Website Interactions to React Without Building Every Effect From Scratch

How to Add Award-Winning Website Interactions to React Without Building Every Effect From ScratchA surprising number of “award-site” interactions are difficult for reasons that have little to do with the visible transform.Moving a heading upward is easy. The real work appears around it: deciding when the sequence starts, coordinating it with nearby elements, handling resize, cleaning up listeners or timelines, adapting pointer behaviour for touch, respecting reduced motion, and making sure

useRef in React

What is useRef?useRef is a React Hook that allows us to create a mutable reference that persists across component re-renders.Unlike useState, updating a useRef value does not cause the component to re-render.Syntaxconst refName = useRef(initialValue);Importing useRefimport { useRef } from "react"; Why Do We Use useRef?The useRef Hook is mainly used for:Accessing and manipulating DOM elements directly.Storing values that should persist between renders.Keeping track of previous values.M

Frontend System Design: How I Would Architect a Production Dashboard in React

React dashboards rarely become difficult because of JSX. They become difficult when ownership gets unclear: who owns server data, session state, URL state, transient UI, permissions, mutations, and failures?I use the React frontend of my AI Support Assistant as a reference. It has authentication, a dashboard, tickets, conversations, and AI reply suggestions. The code shows a useful set of boundaries and also where those boundaries need more definition. This article distinguishes what the applica

Select all in a million filtered rows, and send the server one line instead of a list

"How do I get the selected rows from a checkbox column?" has been read more than 82,000 times on Stack Overflow, and it is rarely about the checkbox. It comes up when a table has a filter on and a header checkbox, and someone asks:When the user ticks "select all" on a filtered table, which rows are selected? The ones on screen, the ones the filter matches, or every row?Which of them does my code get back?What do I send to the server when "all" means a million rows?This post answers each one on r

This Week In React #299 : Panda, Vinext, Next.js | Variable font, Activity Result, Lynx, Lucent, macOS | TC39, Composites

Hi everyone, Seb and Jan here 👋!This week we have 2 major releases in the React ecosystem: Panda CSS v2 and Vinext v1.On the mobile side, RN is getting support for variable font and Android Activity Result. Lynx v4 is out. Lucent is a new way to write native modules.I’m particularly excited about the TC39 meeting happening right now. Many proposals progressed, including my favorite one: Composites moved to stage 2!Let's dive in!💡 Subscribe to the official newsletter to receive an email every wee

I ran an SEO experiment on my side project and broke my own control group

In September I had a weird problem with my side project, a tarot card reference in four languages: https://tarot-magic.com. The Ukrainian card pages sat at positions 6-9 in Google and got almost no clicks. Over three months they had 2,614 impressions and 2 clicks.On September 21 I rewrote all 78 Ukrainian meta descriptions. The old ones were keyword dumps cut off mid-sentence. The new ones are one plain sentence about what the page actually covers. I left the other three languages alone as a con

useContext Hook in React

useContextuseContext is a React Hook used to access shared data from a Context without passing props manually through every component.It is useful when the same data needs to be accessed by multiple components.Examples of data that can be shared using Context include:User informationThemeLanguageLogin statusApplication settings Why Do We Use useContext?Normally, data is passed from a parent component to a child component using props.For example:App ↓Navbar ↓ProfileIf Profile needs som