Lead essaydevops

npm-bloat-detector

npm-bloat-detector is a tiny command-line tool that shows you which dependencies are actually taking up the most space in your project. Instead of guessing from registry estimates, it walks your installed `node_modules`, measures the real on-disk bytes of every declared dependency (resolving pnpm an

By Er An Khoo

Jul 20, 2026 · 5 min read

Read the essay →

npm-bloat-detector — live demo screenshot

№ 01

devops

The Dispatchrecent thinking, in brief05 pieces

spring-counter

spring-counter is a tiny, dependency-free React library that animates a number toward its target using a real spring simulation — mass, stiffness, and damping — instead of a fixed-duration tween, so stats count up and live values retarget with motion that actually feels physical. It ships a drop-in

react-render-cost is a small command-line tool that ranks your React components by average render cost, reading the data your app already produces through React's built-in `<Profiler>`. Instead of scrubbing a flame graph, you get a ranked table: which components are actually expensive, how often the

headless-modal is an accessible, headless modal / dialog primitive for React — it owns the behavior that's easy to get wrong (focus trap, focus return, body scroll lock with scrollbar compensation, portal rendering, Escape and overlay-click dismissal, and the full WAI-ARIA dialog wiring) and ships z

By Er An Khoo

frontend

5 min

headless-radio-group-react

headless-radio-group-react is an accessible, headless radio group primitive for React — it owns the tricky behavior (roving tabindex, orientation-aware arrow-key navigation, Home/End, Space/Enter, and the full WAI-ARIA radio pattern) and ships zero styling, so you keep complete control of the markup

magnet-cursor is a tiny React library for the "magnetic cursor" interaction you see on award-winning sites: a custom cursor that glides across the page and snaps onto your buttons and links as the pointer drifts near them. You render one component, tag the elements you want to feel sticky with `data

By Er An Khoo

frontend

5 min

From the Studiolatest piecesUpdated Jun 25, 2026

№ 07

frontend

frontendJun 25, 2026

glow-card-react

glow-card-react is a tiny React library that adds a cursor-tracking glow to any card — a soft radial spotlight that follows the pointer and fades out when it leaves. It ships a drop-in `<GlowCard>` component and a headless `useGlowCard` hook, works with both React 18 and 19, and has zero runtime dep

By Er An Khoo4 min read

css-unused-finder — grade how fragile your CSS is

№ 08

frontend

frontendJun 22, 2026

I built a tool that grades how fragile your CSS is

css-unused-finder is a hosted, browser-only tool that reads any stylesheet and grades how fragile it is — flagging `!important` pileups, ID selectors, runaway specificity, deep descendant chains, magic z-index values and duplicate selectors, then rolling them into a 0–100 fragility score and an A–F

By Er An Khoo4 min read

№ 09

frontend

frontendJun 18, 2026

I built a CLI that prints a specificity heat map for your CSS

A tiny CLI that reads a stylesheet and prints a color-coded heat map of every selector's specificity — making the usually-invisible cause of failing CSS overrides visible at a glance.

By Er An Khoo5 min read

Archivefurther reading

№ 10

frontend

frontendJun 15, 2026

typewriter-fx

typewriter-fx is a tiny, dependency-free React library for typewriter text effects with a cursor that actually behaves like a real one — solid while characters are landing, blinking only when the typing rests. It ships a drop-in `<Typewriter>` component for the common case and a headless `useTypewri

By Er An Khoo5 min read

Gotham Garage — diecast collection catalog

№ 11

devops

devopsJun 12, 2026

Gotham Garage

A personal-collection-first PWA for diecast collectors: scan a UPC or photo-match a loose car against your own library — so you never double-buy.

By Er An Khoo4 min read

og-image-studio — design Open Graph images in your browser

№ 12

devops

devopsJun 11, 2026

og-image-studio

OG Image Studio is a free, fully client-side editor for designing Open Graph / social-share images. You set a title and subtitle, pick a solid, gradient or image background, tweak fonts and colours, and watch a pixel-perfect 1200×630 card update live — then export it as a PNG in one click. Nothing i

By Er An Khoo5 min read