DevIdiot!
Six Chart Types in My React and TypeScript Dashboard Demo
My charts repository contains a small dashboard-style chart showcase built with React, TypeScript, Vite, and Recharts. The README is still the standard React and Vite template, so it does not explain the actual application. The implementation in src/App.tsx is much more useful: it contains six chart examples, typed mock datasets, reusable presentation components, and a dashboard shell. One wrapper, several visualizationsChartCard is the central layout abstraction. It accepts a title and chi
Vibe-coded UIs drift. I built Tavero to catch it.
If you build React UI with a coding agent, you've probably seen this: every page looks fine on its own, but put them side by side and something's off. The Team page has a flat grey button with a 2px black border. Reports has a pill. Settings has a red one with radius 4. Billing uses #4263eb, which is almost your primary color, but not quite.Nobody decided this. The agent just wrote a new button inline each time, because it didn't know (or forgot) that src/components/Button.tsx exists.I built Tav
Building E-commerce Applications with React: A Practical Guide
Building an e-commerce application with React involves much more than displaying products and adding a shopping cart. A production-ready storefront needs predictable state management, responsive product listings, reliable cart calculations, accessible interfaces, and a checkout flow that customers can trust.In my experience, the biggest challenge is keeping the shopping experience consistent as users browse products, change quantities, apply discounts, and move toward checkout. React makes this
Inspect emitted JavaScript before replacing enums with literal unions
If a state only needs to be constrained to "ready" or "waiting" in the type system, a literal union can express that. If code must also refer to a named value such as State.Ready at runtime, it needs a value object as well.Separate those requirements when comparing an enum, a literal union, and an as const object. A regular enum emits JavaScript; it is more than another spelling for a type. Emit the same states in four formsThe experiment ran on September 11, 2026, with macOS arm64, Node.js
The Veloce-Engine Demo Still Says "Coming Soon" — So I Tested the Demo That is Already Live
The short versionThe Veloce-Engine page still tells you a live demo is "coming soon." It isn't. There's a working interactive reservation manager on that page right now — and I pulled its data model apart to see how far it actually goes.Try it yourself: https://reggiebro.github.io/WorkflowAlpha.ai/veloce-engine/ What I found on the pageTwo things that don't line up:The "See it in action" section shows a fully functional dashboard — reservations table, staff roster, shift schedule, liv
Own your browser game and sell it: a complete HTML5 starter kit
Shipfern is a complete, playable HTML5 game you rename, re-skin and fill with your own levels: 20 solver-checked levels, a daily puzzle with streaks, share cards with "beat my score" links, an installable offline PWA and synthesized sounds. Monetisation is built in: a Stripe Payment Link unlock confirmed by your own Cloudflare Worker, and portal builds for Poki, CrazyGames and GameDistribution. Plain JavaScript, no runtime dependencies, 21 unit tests and 5 browser test groups. Who this is f
After Effects, but inside a browser tab (free, no install)
AtomCut is a free motion design and video studio that runs in a browser tab. If you know After Effects, you already know most of it: compositions, keyframes, a graph editor, expressions, tracking, rigs, 3D. The difference is where it lives. You open a URL and start keyframing. No installer, no account, no Creative Cloud updater asking to restart.This post maps the After Effects workflow onto AtomCut, tool by tool, with screenshots from the editor as it is today (version 4.17). It also lists wher
Cajyu
<p>Check Github> <a href="https://github.com/abs-js/Cajyu" rel="noopener noreferrer">https://github.com/abs-js/Cajyu</a></p>
How Browser-Based WebAssembly Scans Encrypted WiFi QR Codes Without Server Uploads
Connecting to guest Wi-Fi networks in hotels, cafes, and offices has become ubiquitous through Wi-Fi QR codes. However, standard smartphone cameras often parse these codes silently without displaying the raw credentials, and many mobile scanning apps aggressively monetize or harvest network SSIDs and WPA keys by routing camera frames through cloud servers.In this deep-dive, we examine how client-side WebAssembly (Wasm) and HTML5 Canvas APIs enable instant, zero-latency, and 100% private QR and b
Base64 Image Not Showing? Six Checks, Cheapest First
A Base64 image that will not display is one of the least informative failures in web development. You get a broken-image icon, or an empty box, or nothing at all — and the browser console is silent. There is no exception to catch, because the browser did exactly what it was told: it tried to render a resource and gave up quietly.The good news is that there are only six realistic causes, they are cheap to check in order, and each one produces a different symptom if you look closely. Check 1:
Google sign-in fails with redirect_uri_mismatch on Supabase? Here's the fix
You add "Sign in with Google" to your app, click the button, and Google shows one of these instead of the account picker:Error 400: redirect_uri_mismatchAccess blocked: This app's request is invalidUnable to exchange external codeGoogle only sends users back to addresses listed in your OAuth client. With Supabase, that address is your project's auth callback, not your app. So the fix is: add the callback URL shown on the Supabase Google provider page to Authorized redirect URIs, add your site to
I'm not a programmer. I built 70+ free browser games for my kids with AI. Here's what I learned
I'm not a programmer. My kids asked me for a game "with our rules", and I didn't know how to make one. So I asked an AI to help me.One of the first games was a small platformer with my daughter as the hero. Today there are more than 70 free games on the site, in four languages, and the whole family tests them. This is what I learned along the way, for anyone else who is "not technical" and wants to try. The stack is boring on purposeWordPress on managed hosting, because I needed something I
How I Shrunk a QR Kanji Table by 36% Using Dynamic Programming
QR codes have a dedicated Kanji mode that encodes supported characters in 13 bits each. A character like 龍 takes 24 bits in UTF-8, so choosing Kanji mode can save useful space.For my JavaScript implementation, I needed to ship a lookup table mapping Unicode values to QR Kanji indices. The challenge was to preserve every mapping while keeping the embedded data as small as possible.The table is only 16,384 bytes as binary data. Encode those bytes as Base64, though, and it becomes a 21,848-characte
Deploy FastAPI and a React app on a VPS with nginx, systemd and uv
A single small VPS (or a home server) runs a FastAPI + React app comfortably. No containers needed: the frontend is static files, the API is one Python process under systemd, and nginx sits in front of both. What you needAn Ubuntu server (22.04 or newer) you can SSH intoA domain with two DNS records pointing at the server: example.com (the site) and api.example.com (the API)Your app's code, with the backend managed by uv 1. Prepare the serversudo apt update && sudo apt install
React View Transitions in Next.js 16.4: ViewTransition, addTransitionType and Tested Examples
Cross-posted from my blog. The original, with any updates, lives on fabwaseem.com.React View Transitions animate UI changes with the browser's View Transition API, declaratively. You wrap elements in <ViewTransition>, and React animates them when they enter, exit, update or move between pages. They became stable in React 19.3 on September 9, 2026, and Next.js 16.4 ships React 19.3, so they work in the App Router with no configuration.I built a small Next.js 16.4.2 app with the four main pa
How to add Solid Glass to a shadcn/ui app, plus ready-made AI agent components
AI interfaces are full of things that move: responses streaming in, agents running tools, questions waiting for a human. Solid Glass is a design system built for that: one stylesheet that gives your existing shadcn/ui components a calm, glass-like material, plus a set of agent-specific components for status lines, tool steps, diffs and questions.The best part: it finds each part of a shadcn/ui component by the data-slot and classes it already carries, so the components you have need no changes.
How I built a content site with Next.js 16, MDX and one data file
I recently built StackSaver, a small content site that compares what AI and ecommerce tools cost. It has a landing page, two audience pages, a savings calculator and an MDX blog with about 20 posts.The goal was simple: adding a post or changing a price should be a one-file edit, and everything else (sitemap, RSS, category pages, tables) should follow. Here's how it fits together with Next.js 16 (App Router) and Tailwind CSS 4. 1. Facts live in typed data filesEvery price shown on the site c
Rasengan.js 2.0 is stable
Two months ago I shipped the Rasengan.js 2.0 beta and asked people to break it. They did, and today Rasengan.js 2.0 is stable.Rasengan.js is a full-stack React framework built on Vite and React Router: file-based routing, SSR, static generation and SPA mode, with a backend story that now lives in the same project.npx create-rasengan@latestHere's what changed in 2.0. A core built on web standardsThe dev server and the production request handler used to run on Express. In 2.0 they run on Futo
When Does Local State Become Shared State? A React State Ownership Guide
State Management Decision Authority — Part 02Your React state doesn't need to be global just because two components need it.In Part 1, useState vs useReducer: Stop Choosing Tools Before Understanding State, I explored an architectural idea I call the State Management Decision Authority: choosing state management strategies through consistent criteria rather than tool preferences.One of those criteria deserves a deeper discussion:State Ownership.Because sharing state and globalizing state are two
Why average call duration misleads your VoIP billing (with a 10-line JavaScript function)
If you have ever sized a VoIP termination deal with a sentence like "our calls average 30 seconds", there is a good chance the invoice surprised you. The reason is simple: carriers round each call, not the average. This post shows the rounding as code, with two sets of calls that have the same average and very different bills. How a billing rule worksWholesale voice rates are quoted per minute, but the invoice counts seconds. The rule that turns a call's real duration into billed seconds is
