browser
Browser & Frontend Runtime
What actually happens inside the browser when your page loads and runs — how JavaScript is scheduled, how pixels get drawn, and where the slow parts hide.
Start track → 00
Start from zero
Before the senior material: what the browser runtime even is, and the handful of words the rest of the track assumes you already know. 01
The event loop
One thread, two queues, one render step — and everything that happens when any of them stalls. 01 The event loop: one thread, three queues 12 min 02 Tasks, microtasks, and scheduler.yield() 16 min 03 Timer accuracy, throttling, and idle work 14 min 04 Microtask starvation, Long Tasks, and LoAF 16 min 05 Node.js event loop: phases, nextTick, and loop lag 14 min 06 React, Vue, and INP observability in production 15 min 07 Event loop: multiple-choice review 13 min 08 Event loop: free-recall review 14 min 09 Event loop: predict the output 14 min 10 Event loop: rescue an interaction from INP hell 240 min
02
The render pipeline
Six stages, two threads, one 16.67 ms budget — how bytes become pixels, and what breaks the budget. 01 The render pipeline: six stages from bytes to pixels 10 min 02 Stage costs and the renderer process model 14 min 03 Invalidation, dirty bits, and contain 14 min 04 Compositor layers: promotion, overlap, and GPU memory 14 min 05 DevTools flame strip and the frame lifecycle 16 min 06 Layout thrash: forced synchronous layout 14 min 07 BeginMainFrame, compositor-driven animations, and GPU memory 14 min 08 Production observability: LoAF, INP, and the full attack surface 18 min 09 Render pipeline: multiple-choice review 13 min 10 Render pipeline: free-recall review 14 min 11 Render pipeline: code and trace reading 14 min 12 Render pipeline: rescue a janky list 240 min
03
V8 internals
Four JIT tiers, hidden classes, inline caches, Orinoco GC, and the deopt-loop — the mechanisms that make the same JS run 100× faster or slower. 01 What V8 is and why performance varies 100× 10 min 02 V8''''s four-tier JIT pipeline and profile-guided tiering 14 min 03 Hidden classes, transition trees, and memory layout 14 min 04 Inline caches, IC states, and deoptimization 15 min 05 Orinoco GC: parallel scavenger, concurrent marking, and write barriers 14 min 06 TurboFan''''s speculative engine and the deopt-loop trap 18 min 07 V8 in production: isolates, pointer compression, and real failures 18 min 08 V8 internals: multiple-choice review 13 min 09 V8 internals: free-recall review 14 min 10 V8 internals: code and trace reading 14 min 11 V8 internals: hunt a deopt and a megamorphic IC 240 min
04
Workers
Off-main-thread compute, network proxy, and shared memory — the three worker primitives and the architectural mistakes they cannot solve. 01 What workers are and why they exist 10 min 02 Web worker mechanics: dedicated, shared, and OffscreenCanvas 14 min 03 Structured clone and transferables 12 min 04 Service worker lifecycle and cache strategies 15 min 05 SharedArrayBuffer, Atomics, and cross-origin isolation 18 min 06 Service worker edge cases: version skew, durability, and navigation traps 16 min 07 Worker pools, Comlink, and production observability 16 min 08 Workers: multiple-choice review 13 min 09 Workers: free-recall review 14 min 10 Workers: code and snippet reading 14 min 11 Workers: build a responsive offload pipeline 240 min
05
React fiber reconciler
A fiber is a JS object whose linked-list tree lets React pause, resume, and prioritise rendering — and the bailout mechanism is what keeps large UIs fast. 01 What the reconciler does: render vs commit 10 min 02 The fiber object and the double-buffer tree 12 min 03 Render phase purity and commit phase sub-steps 13 min 04 Reconciliation: diffing heuristics and the key trap 14 min 05 Priority lanes, time-slicing, and useTransition 14 min 06 Bailout, memoisation, and tearing 16 min 07 React Profiler, the Compiler, and production observability 14 min 08 React fiber: multiple-choice review 13 min 09 React fiber: free-recall review 14 min 10 React fiber: code reading 14 min 11 React fiber: tame a re-render storm 240 min
06
Render strategies: SSR, SSG, ISR, streaming, RSC — and the cost of hydration
SSG renders once at build; SSR per request; ISR refreshes on a schedule; streaming flushes the shell first. Hydration is the separate ~2× cost of making that HTML interactive — RSC and islands cut what needs to hydrate. 01 Rendering strategies: SSG, SSR, ISR, streaming, and hydration 12 min 02 SSG, SSR, ISR, streaming, and RSC — how each works 18 min 03 Hydration cost: selective, progressive, islands, resumability 16 min 04 Hydration mismatch: causes, detection, and the determinism rule 18 min 05 RSC, per-route strategy, and production observability 20 min 06 Render strategies: multiple-choice review 13 min 07 Render strategies: free-recall review 14 min 08 Render strategies: code and config reading 14 min 09 Render strategies: a per-route rendering audit 240 min
07
Core Web Vitals: LCP, INP, and CLS
Three field metrics Google scores pages on — did it show up fast (LCP), does it respond (INP), does it stay still (CLS)? 01 Core Web Vitals: what LCP, INP, and CLS measure 10 min 02 LCP: four phases, one dominant cost 14 min 03 INP: input delay, processing, presentation 14 min 04 CLS: why layout shifts happen and how to stop them 12 min 05 Lab vs field: why the two disagree and how to use each 12 min 06 Metric tradeoffs, RUM attribution, and the CI+field loop 16 min 07 Core Web Vitals: multiple-choice review 13 min 08 Core Web Vitals: free-recall review 14 min 09 Core Web Vitals: code and trace reading 14 min 10 Core Web Vitals: fix a failing article page 240 min
08
Putting it all together
Page load is a relay race through network, parse, paint, and hydration — the capstone unit traces all eight layers, names the five places production reliably dies, and gives you the three-move discipline to diagnose and fix any of them. 01 The full picture: URL to LCP to INP as a relay race 10 min 02 Eight layers traced: from the service worker to the second navigation 18 min 03 Five canonical breaks: where production reliably dies 22 min 04 The three-track method: reading traces and building a monitored system 20 min 05 Putting it together: multiple-choice review 14 min 06 Putting it together: free-recall review 14 min 07 Putting it together: code and trace reading 14 min 08 Putting it together: diagnose and fix a janky page end-to-end 240 min
Build with this track
Guided projects that exercise what you learn here.
Collaborative cursors
Show every connected user's live cursor and selection in a shared document, conflict-free, over WebSocket.
Command palette
A ⌘K command palette with fuzzy ranking, async action sources, and complete keyboard control (arrows, Enter, Escape, scoping) — the interaction layer every power-user tool needs.
Offline PWA sync
Offline-first notes PWA: a local write queue (IndexedDB) that syncs on reconnect with last-writer-wins conflict resolution, a service worker for asset caching, and background sync for missed flushes.
Personal portfolio page
Build a one-page site about you with plain HTML, CSS, and a sprinkle of JavaScript — no framework, no build step, just files you can open in a browser. By the end you'll have something real to show, and you'll actually understand every line of it because you wrote it yourself.
Virtual data grid
Render and smooth-scroll 100k rows at 60fps with windowing/virtualization, sticky headers, and full keyboard navigation — no library, just math.
Frontend Architecture
How to structure a real frontend app: where data lives, how to load it, and how to keep a growing codebase from turning into a mess.