Senior frontend deep-dives.
Primary sources only — ECMA-262, WHATWG HTML, Blink & V8 source. Every post ships an interactive demo you can break.
React Deep-Dives
3 postsReact's reconciler has three commit sub-phases
Every senior React dev can describe 'render and commit'. Almost nobody names the three ordered sub-phases of commit or points to where useLayoutEffect fires in ReactFiberWorkLoop.js. Here's the source-anchored story with two auto-animating canvases.
startTransition doesn't defer — it tags updates as interruptible
Every senior React dev thinks `startTransition(fn)` defers `fn`. It doesn't — `fn` runs synchronously. What the wrapper actually marks is any state updates triggered inside, promoting them to the transition lane where the scheduler may interrupt and restart them. Here's the react.dev contract with two animations.
useMemo is a cache, not a guarantee
Every senior React dev reaches for useMemo to 'memoize' a value. The docs explicitly say it isn't memoization — React may throw the cache away at any time, and the list of reasons is longer than you think. Here's the source-anchored story with two interactive canvases.
The Runtime
7 postsAbortController doesn't cancel — it signals
Every senior FE dev thinks `controller.abort()` kills a fetch. The spec is more nuanced. Abort is a signal broadcast to whoever's listening. Promise rejection is mandated; network-layer termination is implementation-defined. The distinction matters when you're combining signals or debugging leaks.
Six ways a webpage keeps a connection — polling to WebTransport
Every real-time feature you ship picks one of six transports — short polling, long polling, SSE, WebSocket, fetch streaming, or WebTransport. They differ on direction, latency, binary support, reconnection, and server cost. Here's each one at the protocol level, with the exact bytes on the wire and a decision tree for picking.
Closures don't capture variables — they capture environments
Every senior FE dev can explain closures. Almost nobody points to the ECMA-262 Environment Record and the [[Environment]] slot on function objects. Here's the spec-level story, with a step-through of the heap and a primary-source walk of why `let` fixes the for-loop trick.
for await…of is serial — not streaming, not parallel
Every senior JS dev reaches for `for await of` when iterating async sources. Almost nobody realises the ECMA-262 algorithm awaits each next() before the body runs, and the body before the next next(). Here's the spec, two timeline animations, and the three iteration patterns you actually want in your toolbox.
The microtask checkpoint nobody explains
Every senior FE dev knows Promise.then runs before setTimeout. Almost nobody can point to the exact step in the HTML spec that makes it true — or explain why queueMicrotask inside a microtask doesn't yield. Here's the walk-through, straight from ECMA-262 and WHATWG.
setTimeout(fn, 0) is never 0ms
Every FE dev knows setTimeout isn't instant. Almost nobody can quote the HTML Timers clamping rules, V8's timer backend, or explain why nested timeouts floor to 4ms. Here's the tour, primary sources only.
What await actually desugars to
Every senior FE dev has written async/await. Almost nobody can show you the generator and Promise chain underneath. Here's the desugaring straight from ECMA-262, ending with a 40-line implementation you can step through in a REPL.
Rendering Pipeline
6 postscontent-visibility — the native virtualization you're not using
Off-screen sections still pay layout + paint cost on every frame. `content-visibility: auto` tells the browser to skip them. One line of CSS, no JS virtualization library, and it's been Baseline since September 2024. Here's what it does, when it wins, and where the catches are.
z-index: 10 000 does nothing — stacking contexts, explained properly
Every senior FE dev has bumped a z-index until it 'worked'. Nobody should need to. The rule is simple: z-index only orders siblings within the same stacking context, and 16+ CSS properties create one silently. Here's the spec, four scenarios, and the complete trigger list.
Container queries — the layout primitive CSS spent 15 years missing
Media queries ask 'how big is the viewport?'. That's the wrong question for a component. Container queries ask 'how big is the slot this component was dropped into?' — which is the question any reusable component has always needed to answer. Here's the spec, the four `container-type` values, and the migration that replaces every sidebar-vs-main-content branch.
CSS containment is the spec's performance escape hatch
Layout thrashing posts tell you what not to do. `contain: layout` tells the browser a subtree's effects won't escape — so they don't, and perf scales. Most senior FE devs have never shipped it. Here's the four-value contract, a blast-radius visualizer, and the two-line shorthands.
From JS to pixel: the browser's rendering pipeline in five stages
Every senior FE dev says 'render' like it's one thing. The browser's pipeline is five distinct stages — JS, style, layout, paint, composite — each with its own cost curve and its own short-circuit rules. Here's the stage-by-stage walk, with a property-to-stage mapper you can tap.
Layout thrashing is a spec-defined hazard, not a perf tip
Every senior FE dev knows 'don't read after write'. Almost nobody can point to the WHATWG rendering algorithm that makes it a hazard or the CSSOM clauses that force layout on read. Here's the spec-level story and a live counter you can watch tick.
Performance
2 postsINP is not the average — it's closer to P98
Most senior FE devs read INP as 'some latency percentile'. Almost nobody can state the trimming rule, the Event Timing duration definition, or what an 'interaction' actually is. Here's the spec-level story with a slider you can watch misbehave.
LCP is the largest candidate that survived until interaction
Most senior FE devs optimise for 'paint the big element fast'. The LCP metric actually tracks a moving marker through page load, excludes elements nobody intuits are excluded, and freezes on the first user interaction. Here's the candidate-eligibility story with a timeline you can watch and a tap-through exclusion checker.
System Design
3 postsDesigning a collaborative editor — four decisions that shape the rest
Every collaborative product — Figma, Notion, Google Docs, Linear — picks the same four decisions before writing a line of code. Get them right and the rest is implementation; get them wrong and no amount of engineering recovers. Here's the framework, with working examples from the three shops that do this well.
Designing a live chat — from WebSocket to delivery receipts
WhatsApp, Slack, Discord, Messenger all solve the same core loop: deliver a message to the right people, confirm arrival, handle offline, show who's there. Here's the five-decision framework that shapes every live-chat product, with the end-to-end data flow you can step through.
OT vs CRDT — how two clients converge without a referee
Two users, one document, concurrent edits, no fighting. Every collaborative product resolves this with either Operational Transformation or a CRDT. Here's what each actually does — with a step-by-step animation you can scrub, the real ops on the wire, and the reason you'd pick one over the other.
Agentic / LLM FE
2 postsPrompt caching is a prefix hash, not memoization
Every agent engineer turns on prompt caching expecting 'same input → same output, cheap'. That's memoization. The Claude prompt cache is prefix hashing with TTL, a 20-block lookback, cascade invalidation, and writes that cost more than regular input. Here's the actual contract — with a six-scenario walker and a live cost calculator.
Tool calls are not function calls
Every agent engineer writes `result = call_tool(…)` as if it were a local function. It isn't. LLM tool calls have no stack, no locals, no implicit state — every turn re-reads the entire transcript. Here's the ABI mismatch, straight from Anthropic's tool-use contract, with a side-by-side visualizer.