DevIdiot!

Beyond Upvote Rings: How We Engineered a Real-Time 24-Hour Launch Engine with React and Firestore

If you've spent any time on major tech launchpads recently, you’ve probably noticed that ranking algorithms have essentially become pay-to-win popularity contests. Makers buy WhatsApp upvote rings, launch in arbitrary timezones where half their audience is asleep, and get delayed by 14-day manual queues unless they pay expensive "fast-track" fees.When I started building Astro Discover, my goal was to engineer a platform where the software’s technical merit and utility matter more than marketing

The Secret Science: Inside the Tech and Patents of Modern Shapewear

When you wear a piece of shapewear, you're not just wearing fabric—you're wearing years of engineering. Behind the 300+ patented technologies of a brand like Nebility lies a world of biomechanics, materials science, and ergonomic design that most of us never think about. Let's lift the hood and explore the science that makes shaping actually work.The biomechanics of supportHuman bodies move in complex, three-dimensional patterns. A garment that only compresses evenly across the surface misses th

Tiny icons as data URIs — skip another network hop for chrome assets

Chrome UI is full of tiny assets that should never fight the critical path: a 16×16 chevron, a mute glyph, a spinner frame, a toolbar mark that shows up before the rest of the page finishes deciding who you are.I still see those shipped as separate /icons/*.svg or /icons/*.png requests. On a good day they ride HTTP/2 multiplexing and you barely notice. On a cold CDN edge, a flaky hotel Wi‑Fi, or a settings drawer that mounts before the icon sprite is warm, you get the classic flash of empty boxe

Turning Raw JSON into TypeScript Types is Harder Than You Think

In modern frontend tooling, a JSON to TypeScript converter is often dismissed as a weekend hobby project. The consensus intuition seems deceptively trivial: traverse a JavaScript object using Depth-First Search (DFS), emit an opening curly brace for nested objects, map primitive values to string, number, or boolean, and sprinkle a few regular expressions to format the output.Yet, the moment you subject such naive scripts to real-world production payloads—deeply nested microservice responses, eve

A free React frontend roadmap: what to learn, in what order

The frontend world and the AI world change every day, and what you read last month may already be out of date.If you are starting out, or you are at a certain level and want to grow, the question is the same: which source should I read? There are too many, and it's hard to know which ones are still current.I wanted one place that answers that question. ViraStack Academy is a React frontend roadmap that shows which tools to learn and in what order, from web fundamentals to AI-native frontend. Eac

Theme App Extensions vs Script Tags: What Changed and Why It Matters

Theme App Extensions vs Script Tags: What Changed and Why It MattersIf an app on your store still injects itself via script tags instead of a theme app extension block, that's worth noticing — it's the older pattern, and it causes problems that theme app extensions were specifically built to fix. 🩹 What Script Tags Actually BrokeScript-tag apps inject JavaScript globally and hope it finds the right place in the DOM. Change themes, update a template, or install a second app doing the s

Stop dividing by 4. I counted 951 texts and the rule is wrong both ways.

Most token guides say one token is about four characters, and a lot of code runs Math.ceil(text.length / 4) right before an API call without anyone checking it.I build an LLM cost calculator, so this number ends up inside every estimate I make. This week I finally counted. I ran 951 text samples through OpenAI's o200k_base tokenizer (GPT-4o and newer) with tiktoken 0.14.0. Characters per tokenContentCharacters per tokenlength / 4 gives youEnglish blog writing4.981.24x the real countEnglish

Drawing semi-log and log-log graph paper: the math behind the lines

Semi-log graph paper looks like someone drew it by hand with a shaky ruler: the lines bunch uptoward the top of every band and then start over. It is actually one of the most regular gridsthere is. Every line comes from a single formula, and the only real decision is how many linesto draw before the page turns grey.I recently added semi-log and log-log paper to a printable graph paper generator, and these arethe notes I wish I'd had before starting. One decade, one formulaOn a log axis, a v

How Transferify encrypts files in your browser

Every file you send with Transferify is encrypted in your browser before any of its bytes leave your device. The cipher is AES-256-GCM, run by your browser's built-in Web Crypto API, and the key is made on your device for each transfer. The sending modes differ in one thing only: where that key goes afterwards.This post explains the mechanism for readers who want to check it: how the key is made, how a file is cut and sealed, what stops a stored file from being changed, and who can unlock it in

Detecting emoji that Windows 10 can't draw, and swapping in images without breaking copy

I run CopyCute, a small site of cute symbols and kaomoji. I started it after watching a friend search all over the place just to find a few emoji they wanted. Almost everything on the site is plain text, which is the whole point: you tap an item, it goes to your clipboard, and you paste it into a bio or a nickname.Plain text has one catch. I don't control how a character is drawn. The visitor's fonts do. For most symbols that's fine, but emoji have a hard cutoff on Windows 10, and I wanted to ha

Add a live filter to a server-rendered list with one script tag

Every server-rendered app ends up with this ticket:The team page has 40 people on it. Can we add a search box?You can build it. You can also solve it the way many teams do: render the list again in JavaScript, fetch JSON from a new endpoint, or turn the page into an SPA. All of those mean the list now exists twice, once on the server and once in the browser, and you have to keep them in agreement.There's a smaller option. The server already sent the list. The filter only has to hide the rows tha

Why Crypto Tax Calculators Overstate Swap Gains on Base (And How to Audit Unlimited Permit2 Exposures Client-Side)

Every crypto tax tool I have audited on Base makes the same two mistakes, and both inflate a number the user is about to hand to an accountant. One is a swap priced from two different sources that cannot agree. The other is a disposal with no cost basis scored as a 100% loss. Neither is exotic. Both are arithmetic that looks correct until you check that a swap should net to zero.This post is the working notes from building a browser-only scanner and tax exporter for Base, with the real numbers f

Your preventDefault() Did Nothing, and the Only Warning Went to a Phone You Do Not Have

The report says the page scrolled while they were dragging the slider. Or that pull-to-refresh fired in the middle of a swipe. Or that the carousel moved and the page moved with it.You open the handler and it is right there, the line that is supposed to stop exactly this:document.addEventListener("touchmove", (e) => { e.preventDefault() drag(e)})It is being ignored. Not failing, not throwing, not running late. Ignored, by the specification, and the only notice anybody gets is a console warn

Stop trusting your AGENTS.md: the drift-check that makes it a contract

Back in September I published Stop bloating your AGENTS.md: reference your conventions instead of pasting them — and advice I still stand behind: keep AGENTS.md a thin index, move the details into per-topic docs, reference them from one place. The argument was about context hygiene — your conventions stay detailed, your context stays clean. What that argument never claimed to do was enforcement.It was a solid argument. It was also half an argument, and the second half bit me within two weeks of

Stop adapting axios to TanStack Query: a fetch client built for queryFn

TanStack Query doesn't care how you fetch. It only asks one thing of your queryFn: return data, throw on failure, and respect the AbortSignal.Most HTTP clients don't do that out of the box, so every project grows the same glue. The usual gluequeryFn: async ({ signal }) => { try { const res = await axios.get('/users', { signal }) return res.data } catch (e) { if (axios.isAxiosError(e) && e.response?.status === 401) { await refreshToken() // what if 5 queries hit 40

Speeding up your React Router server-side-rendered (SSR) app with Hono

If you're running a React Router app in framework mode, you get SSR out of the box and for production it hands you @react-router/serve, a small server built on top of Express. While it does the job, Express carries a bit of history (and weight) with it, so if you're the kind of person who wants a leaner server, or just more control over what happens around your app, there's a really nice alternative that drops in with almost no glue. Hono (and its Node server)The createRequestHandler from r

JavaScript SEO FAQ: 11 questions frontend devs ask (with straight answers)

Every frontend team ends up having the same SEO conversation, usually right after marketing asks why the new React site gets less search traffic than the old WordPress one. Here are the questions that come up most often, with straight answers and code where it helps. 1. Does Google execute JavaScript?Yes. Googlebot renders pages with an evergreen Chromium. But rendering happens in a second stage: the raw HTML is crawled first, and rendering is queued. For most sites the delay is short, but

Opening hours component in React with time zones

The first "Open now" badge I shipped for a client lied. The salon was in Zurich, the site was deployed on servers in the US, and I was testing from my laptop at home. It showed "Open" at 11 pm because somewhere in the chain a date was created in the wrong time zone. That bug is the reason the Opening hours component and the Open now badge in Facade compute everything in the business's own IANA time zone and never trust the raw clock. Here is how they work. Why new Date() on the client is wr

React & Modern UI Stack

IntroThe React & Modern UI Stack path covers the essential frontend ecosystem and modern tooling roadmap, built directly on top of the Core Web Stack foundation. Tutorials00. Core Web Stack Path ✅Internet Beginner: ✅ Start Now — Learn how the web works, client-server architecture, and HTTP request-response cycles.HTML: ✅ Start Now — Master semantic markup, document structure, and web form fundamentals.CSS: ✅ Start Now — Build responsive layouts using modern styling, Flexbox, and C

Prompt packs for empty / error / loading states — stop shipping happy-path only

Agents are weirdly good at the happy path. Give them a Figma frame of a filled dashboard and you get a filled dashboard. Give them a “build a projects list” prompt and you get rows, avatars, and a neat toolbar.What you usually don’t get: the empty list on day one, the 500 that lands mid-scroll, or the skeleton that doesn’t jump when real data arrives. Those states are where users decide whether the product feels finished — and they’re the first thing agents skip unless you ask for them on purpos