DevIdiot!

Mapping a picture onto a Minecraft skin in the browser: what worked and what didn't

I build BlockSkinLab, a small set of free Minecraft skin tools that run in the browser. This post is about the least glamorous part of it: taking an ordinary image and mapping it onto the 64×64 Minecraft skin layout without a server and without pretending the result is magic.BlockSkinLab is an independent project. It is not affiliated with, endorsed by, or sponsored by Mojang or Microsoft. Minecraft is a trademark of Mojang and Microsoft. The stackNext.js static export (no backend for the t

Running ffmpeg, Whisper and background removal in the browser: lessons learned

I ship a few "server-class" engines in plain static web pages: ffmpeg.wasm for video, Whisper for transcription, an ONNX segmentation model for background removal, and Tesseract for OCR. No backend at all. They all work, but each one taught me something. Here are the practical lessons. 1. Never load the engine with the pageA 30 MB WASM binary in the critical path will ruin your Largest Contentful Paint and your search rankings. The page should be fully usable (dropzone, options, explanation

ShowDev: CreateMyQR — 37 Client-Side QR & Barcode Tools, Forever Free

We've all seen them. The sleek, modern websites advertising "dynamic QR codes" and "advanced analytics" for an eye-watering monthly subscription. They promise to manage your digital presence, update your menus, and track engagement. And if you dare to cancel your $45/month plan, your QR code, once a beacon of convenience, becomes a broken link, a digital tombstone for your restaurant's updated menu or event flyer. It’s an infuriating display of digital rent-seeking, holding basic 1994 geometry h

61.5% of Shopify Stores Still Run Script Tags That Die on March 1, 2027 — I Scanned 253 of Them

Shopify has set a hard date: on March 1, 2027, script tags stop running. Not deprecated-with-a-warning, not phased out quietly — stopped. Every tracking pixel, review widget, and app snippet that still reaches the storefront through a script tag has to move to Web Pixels, App Embeds, or another supported route before that day, or it simply goes dark.That date is about sixteen months out, which in store-maintenance time is basically tomorrow. So I got curious: how ready are stores, actually? Not

Why I Built a 100% In-Browser Privacy Toolkit (And How to Manipulate PDFs in Memory Without a Backend)

A few weeks ago, I had to merge three confidential NDA agreements and a set of company invoice receipts. Like most developers, I opened Google and clicked on the top results—the familiar online PDF tools. But right before hitting upload, I paused. Why was I about to upload sensitive corporate financial data and legal signatures to a random remote cloud server? On top of that, halfway through the process, I was greeted with:"You've reached your free daily limit. Upgrade to Pro for $39/month to do

Bridging Telecom and the Web: Integrating a Self-Hosted Asterisk PBX into a MERN Stack CRM

The bottleneck: disconnected systems cost real moneyMost growing real estate sales teams run two systems that never talk to each other: a phone system and a CRM. Reps make calls from a desk phone or a softphone, and the CRM has no idea the call happened unless someone manually logs it afterward. In practice, that logging is inconsistent. Leads go stale. Follow-ups get missed. Managers can't see call volume or outcomes without asking reps to self-report, which is unreliable at best.The fix

Batch-Renaming Users' Files With No Backend: File System Access API, the Firefox/Safari Fallback, and Why I Ship a ZIP Anyway

A small feature request: "I have 80 invoice PDFs called invoice (12).pdf. Can your tool rename them to 2026-10-15_Acme_550.00.pdf based on what's inside?" Reading the PDF and extracting the date, vendor and amount is the fun part. Actually renaming the files on the user's disk turned out to be the tricky part. Here are the three approaches I tried. Option 1: File System Access APIChromium browsers let you ask for a directory handle and write to it:const dir = await window.showDirectoryPicke

Dithering made my GIF up to 50% bigger, and what to check first when a GIF will not shrink

If a GIF refuses to get smaller, I would check the colour count and then whether dithering is switched on. Dithering sounds like a quality feature that should cost nothing, but on the animation I tested it made the file between 0.7% and 36.9% bigger in a browser tool and between 32% and 50% bigger in my own rebuild. I wanted to know why, so I counted what a GIF-style encoder actually writes.Everything below comes from one sample, one laptop and one run per setting. The sample is MORPH.gif, 675×5

What one 10-frame sample can and cannot tell you before you change your GIF export settings

Before changing the export settings of demo GIFs for a small site, I wanted to know two things: does turning dithering on cost bytes, and how far does a lower colour count go. All I had to look at was one sample, a 10-frame GIF, so this is a list of what it answered and what it left open.The sample is File:MORPH.gif from Wikimedia Commons, author Kowloonese, CC BY-SA 3.0. It is 675×599, 10 frames at 100 ms each, 3,003,893 bytes, a photo-style gradient with text morphing across it. I ran it throu

Which GIF knobs change file size in a browser tool: colors, dithering, frame drop, scale

Every GIF tool shows you a different pile of sliders when a file is too big to send. I wanted to know which of them actually move the byte count. The sample is MORPH.gif, 675×599, 10 frames, 3,003,893 bytes, by Kowloonese on Wikimedia Commons under CC BY-SA 3.0. Everything below comes from this one clip, one machine (Apple M4, desktop Chromium), single runs, so read the numbers as "this clip" and not as a rule for GIFs in general. Cutting colors moves the size the mostI used the animation t

I mounted 1,000 rows that each read one item from a store, changed one item, and counted renders in React 19.Read the art: https://mozzammel-haque.medium.com/i-changed-one-of-1-000-items-in-zustand-redux-toolkit-and-jotai-on-react-19-cc3dceb94846?sharedUs

<div class="crayons-card c-embed text-styles text-styles--secondary"> <div class="c-embed__content"> <div class="c-embed__body flex items-center justify-between"> <a href="https://mozzammel-haque.medium.com/i-changed-one-of-1-000-items-in-zustand-redux-toolkit-and-jotai-on-react-19-cc3dceb94846?sharedUs" rel="noopener noreferrer" class="c-link fw-bold flex items-center"> <span class="mr-2">mozzammel-haque.medium.com</span> </a> </div> </div></div>

What Problem Does React Solve Better Than Other Alternatives

Did you ever think about what problem React actually tries to solve?So, the problem starts when you need to build a complex layout, and this layout depends on multiple states.Now, the problem starts. How do you keep this complex UI synchronized with changing application state without manually managing every DOM change?Before React, you needed to figure out which DOM elements were affected by a particular state change. Then, you needed to find those elements and modify them manually. You had to m

How I Solved the Pakistan Address & City Data Problem for MERN Developers

The ProblemDevelopers building e-commerce or delivery apps in Pakistan usually rely on outdated, broken GitHub Gists. These flat JSON files lack relational structure, miss newly formed districts, and ignore how local courier networks actually operate.The Solution: pakistan-addressI engineered a plug-and-play npm package to permanently solve this data headache:Normalized Official Data: Accurately maps the structured hierarchy of Provinces → Divisions → Districts → Tehsils.Unofficial Courier Deliv

October 2026 for React and AI Devs: Next.js 16.4, TypeScript 7.1 Beta, a Big TanStack Month, Convex 1.47 to 1.49

October was busy. Next.js shipped a release and two critical security fixes in the same month, TypeScript 7.1 went to beta, TanStack put out five announcements in four weeks, and Convex shipped three minor versions. This is what I think is worth knowing from it, with a link to the release note or announcement behind every item. Dates are the publish dates on those pages.There's one thing to put in your calendar first. Next.js has a scheduled security release on November 3 covering seven medium-s

Is There a CabloyJS Equivalent in the React/Next.js Ecosystem?

In the Node.js fullstack world, CabloyJS has always occupied a rather specific position. It is not a "frontend framework with some API routes on the side," but an enterprise fullstack architecture with module boundaries, built-in IoC (inversion of control / dependency injection), native RBAC and Workflow, and a metadata contract shared by frontend and backend.So a familiar question comes up: if a team's stack is React/Next.js, is there something "close enough"?The short answer: there is no exact

I added a Three.js typewriter intro to my site, and then I made it skippable

My portfolio opens with a typewriter scene built in Three.js. It looks great the first time. The tenth time, it's a delay.This post is about the rules that keep a nice-to-have animation from turning into an obstacle, with the actual mechanics so you can copy them. The short version: flair should serve the first impression and then get out of the way. The temptationA 3D intro is fun to build. It shows off the skills the site exists to demonstrate. And for a first-time visitor it sets a tone:

What an AI Rap Video Generator Taught Me About Crawlable React Pages (2026)

Disclosure: I build MyAIRap.video, a photo-to-Rap tool. This is a development case study from that project, written with AI assistance and checked against our local release records. It is not a claim that server rendering alone produces rankings.The first useful SEO question for a React product is surprisingly practical: what does a reader get before JavaScript runs?Our redesigned interface looked complete in a browser. It had examples, pricing and a clear path to the creator. A raw HTML check t

useSyncExternalStore: test snapshot identity and the initial SSR value

An external store can notify its subscribers without changing the screen rendered through useSyncExternalStore. After the same snapshot object was mutated in this experiment, the screen still displayed 0 following the notification.The Hook needs a subscription notification and a snapshot that represents the change. With SSR, the initial client read must also receive the value used to generate the server HTML. The notification arrived with the same snapshot referenceThis test store includes

State Explorer: A Zoomable Timeline for React

I turned an old Azure visualization idea into an open-source React component. The useful part is the little window at the bottom.Imagine an API that was healthy all morning, degraded for five minutes, then healthy again. On a chart showing six hours, that five-minute interval is easy to skim past. A table gives you the exact timestamps, but makes it harder to see how that incident fits into the rest of the day.I wanted both views at once: the whole story and a close look at the interesting bit.T

Advanced JavaScript Module Systems and Bundlers: Webpack, Rollup, and More

JavaScript development has evolved tremendously with the rise of modern frameworks, large codebases, and complex dependencies. At the core of managing this complexity lie module systems and bundlers — crucial tools that help developers organize code, manage dependencies, and optimize delivery for browsers and servers.This post dives into modern module systems, particularly CommonJS and ES Modules (ESM), and explores popular bundlers like Webpack and Rollup that bring these systems together for e