DevIdiot!

Case Study: Making My Portfolio Loud (Without Making It Slow)

My portfolio worked fine. That was the problem.It was a tidy neubrutalist site: yellow, cyan and green cards, thick black borders, hard drop shadows, a dark-mode toggle. And it did its job: it helped me land Oatopia, Rev6 and Digital Trek (Rodentia Pest Products) as clients.But it looked like a lot of other neubrutalist portfolios, and a UX audit I'd been working through kept pointing out the same thing. It was clean and it was forgettable.So I tried something I'd normally talk myself out of. I

Promise.all Failed. Your Database Write Might Still Be Running.

The checkout request failed. The inventory reservation still completed.If your error handler assumes that failure means nothing happened, the retry can be the most dangerous line in the feature.Consider a hypothetical implementation that starts an inventory reservation and a notification together, then awaits Promise.all. Notification fails. The page shows an error. The reservation is still in flight. Reproduce the order without a timerThis small JavaScript example lets us finish one operat

I built an in-browser resume ATS checker to test if anyone still wants a one-time purchase

Jobscan charges $49.95/month, and its free tier cuts you off after five scans. For someone applying to jobs full-time for a couple of months, that subscription adds up fast. More importantly, uploading a complete work history, phone number, and address to a remote server just to parse text layout felt unnecessary.I wanted to see if the core utility could be delivered entirely on the client side. How it worksThe tool is packaged as a single HTML file. It uses Mozilla's PDF.js to extract text

Day 23 of My React.js Learning Journey 🚀 | JSX and Components

Today, I learned about JSX in React, component-based architecture, and the two types of React components: class components and functional components. I also got introduced to Hooks and the useState Hook.1. What Is JSX?Today, I learned about JSX in React, component-based architecture, and the two types of React components: class components and functional components. I also got introduced to Hooks and the useState Hook.JSX stands for JavaScript XML. It is a syntax extension for JavaScript that all

Lessons from building 24 pass-and-play browser games for one shared phone

Most online board games assume every player has their own device and an account. I wanted the opposite: two to twelve people sitting together, passing one phone, tablet or laptop around, with no sign-up and no internet needed after the first visit.That idea became Pass and Play Games, a free collection of browser games: chess, ludo, checkers, backgammon, mancala, dominoes, plus party games like Imposter and Charades. I'm a business analyst by day, so I run it with a developer: I write the briefs

Building MachineConvert: a static site where every number has to show its source

If you train in more than one gym, you know the problem: 60 kg on one brand's leg press is not 60 kg on another's. Levers, cams and pulleys change the force you actually feel, so the number on the stack doesn't carry over. I built MachineConvert to catalog strength machines across brands and to answer one question: "I lift X on this machine, what is it on that one?"Here is how it's built, and the one rule that shaped almost every decision. The rule: no number without a sourceThe rule is tha

ElevenLabs + React: Building a Voice-Enabled UI

Why Voice‑First UI Matters TodayIf you’ve been watching the rise of voice assistants, you’ve probably noticed a shift from “nice‑to‑have” to “must‑have.” Users expect apps to respond instantly, and hearing a natural‑sounding voice can make a UI feel more personal, accessible, and engaging. Enter ElevenLabs, a text‑to‑speech (TTS) platform that delivers ultra‑realistic voices and even lets you clone your own. The service is API‑first, which means you can drop it into any front‑end stack—Re

Classify Logistics Review Text Data Using an Embeddings API in Node.js: 3 Steps

Short answer: use embeddings to classify logistics text by comparing a new review item with pre-labeled examples, then keep the provider behind a Node.js adapter so the API can change without changing your queue.To classify logistics review text data using embeddings, create vectors for a small labeled set and compare each new change with cosine similarity. The least complex design is one embedding per text, a provider adapter, and an explicit threshold. Keep the embedding API behind one functio

Writing a Google review link to an NFC tag (NTAG213/215/216) with a QR fallback

Plenty of small businesses want a "tap here to review us" card or sticker at the counter. Doing it yourself takes a few dozen lines of JavaScript, a few cheap NTAG stickers and an Android phone. You do have to watch a few details: which URL you write, whether it fits on the chip, whether you lock the tag, and what happens when someone's phone has no NFC.This post covers:Getting the review link (and the writereview URL format)NDEF byte math: will the URL fit on an NTAG213, 215 or 216?Writing the

Auditing CVE-2026-109461: Insecure Token Handling & Safe In-Browser Verification

Original Technical Research & Offline Verification provided by DevOmniTools Security Suite. Vulnerability Context & OverviewOn 2026-10-23T22:16:44Z, the security advisory CVE-2026-109461 disclosed a critical token and credential leak mechanism in developer workflows:MSAL Node authorization code flow may disclose parameters to an attacker-controlled endpointWhen applications expose internal loopback listeners or misconfigure cookie serialization attributes, authentication secrets and

Why your date shows up a day early: a one-minute check

A date that shows up as the day before is one of the most common small bugs in front-end code. Here is a one-minute check you can run in any console. The checkconst a = new Date("2026-10-25"); // date-only stringconst b = new Date("2026-10-25T00:00"); // date-time string, no offsetPer MDN's Date reference, when there is no time zone offset, date-only strings are read as UTC, and date-time strings are read as local time. MDN notes this comes from a historical spec error that could no

Benchmarking Expo Router Navigation: Memory Footprint and Frame Drop Analysis Under Deep Stack Depth

Benchmarking Expo Router Navigation: Memory Footprint and Frame Drop Analysis Under Deep Stack DepthWhen migrating a multi-tenant dashboard from React Navigation to Expo Router's file-based routing, we hit a silent performance cliff at 42 nested routes. Navigation animations dropped from 60fps to 38fps, and memory usage spiked by 140MB on Android mid-range devices. This benchmark isolates the breaking point. Test TopologyEnvironment:Expo SDK 52, React Native 0.76Test devices: Pixel 5

Syntax Comparison of ES5 vs ES6

Basically, I was revising JavaScript fundamentals. While doing that, I had a curious thought that led me to write content on it. And this is a common topic roaming all over the internet.## Demo Dataconst users = [ { id: 1, name: "Rafi", age: 22, role: "intern" }, { id: 2, name: "Nila", age: 17, role: "student" }, { id: 3, name: "Sami", age: 28, role: "developer" }, { id: 4, name: "Tina", age: 31, role: "developer" },];## ES6 functional expression using template literals// Option A: Print eac

Next.js use cache Explained: Cache Components, cacheLife and cacheTag in Next.js 16.4

Cross-posted from my blog. The original, with any updates, lives on fabwaseem.com.Next.js use cache is a directive that marks an async function, component or whole file as cacheable, so its output is stored and reused for matching inputs. It is the core of Cache Components, the caching model that Next.js 16.4 now turns on by default in create-next-app. Add 'use cache', set a lifetime with cacheLife, label it with cacheTag, and invalidate it with updateTag or revalidateTag.This guide is written a

A Read-Only WebMCP Tool Erased My React Form State

The read path in Trip Workbench can erase a person’s unsaved purpose without sending a write.In a deterministic reproduction, the returned saved snapshot still says “Workshop.” The edit buffer contains “Leadership meeting” before the read, then loses that value when the response is applied.That failure is reproducible in Trip Workbench at commit 4b3f370, the public React and TypeScript demo I built and maintain. Its get_trip_draft tool refreshes saved state through the same coordinator that mana

84% of abandoned v0 apps run a known-exploited Next.js

A field note on what happens to AI-built apps after the builder walks away, measured on October 21, 2026, the day Next.js 15 left security support.Of 274 abandoned v0-built apps whose Next.js version we could read, 231 (84%) declare a version inside the React2Shell range, the remote code execution flaw CISA has listed as actively exploited since December 5, 2025. 226 of them run the exact same version: Next.js 15.2.4. Only 3 run Next.js 16, and none runs the current patched release.The date matt

Matita 0.4.0: 60 new icons, and one number from sketchy to exact

Matita is a set of pencil-style icons for the web, drawn by code. Lines run a little past their ends, box corners cross, circles overlap where the pen closes. 0.4.0 is out today: 60 new icons (200 to 260) and a new setting called wobble that goes from the full sketchy hand all the way down to exact shapes.If you haven't seen it, the first post explains the engine: [LINK to the first dev.to article]. The short version is that every icon is a line of plotted shapes, and a small deterministic engin

Sloth Notes: a local AI digest for the notes you don't want to reread

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 3: Slow and Steady. What I BuiltSloth Notes turns a messy block of English notes into a short, source-linked digest and a list of suggested actions.The idea is small: rereading a meeting recap to find the next thing to do is busywork. Paste the recap, choose up to three, five, or seven highlights, and let a small open model do a first pass. Every highlight quotes an original sentence. Each source button takes you back

47-day TLS certificates are coming. Here's a single-file HTML tool to keep track of them

In April 2025 the CA/Browser Forum voted to shorten public TLS certificate lifetimes: 200 days since March 2026, 100 days from March 2027 and 47 days from March 2029. A certificate you used to renew once a year will soon need renewing every few weeks.Automation (ACME, certbot, win-acme) handles most of it. But there's always the leftover: the FortiGate VPN cert installed by hand, the Synology NAS, the Exchange server that needs a cmdlet after every renewal, the internal CA, and the auto-renewal

React 18 and Claude Code Animations Project

I created 10 loader animations using Claude code and Opus 5.5. It was wild to see my imagination coming to life within seconds. The new Anthropic model Opus 5.5 is really good at animations. The project is meant to have fun with animations and try new ideas with AI.The result is react-loaders: 10 loaders, zero dependencies, each one a folder you can copy into your app. 🎬 A few of themGlow Dust: the button dissolves into ~1,100 particles that drift through a "wind" field. Move your finger th