How to use this guide
- Beginner (Part I): values, types, scope, functions, objects, prototypes, arrays, strings, errors. Ends with a CLI mini-project.
- Intermediate (Part II): the event loop, callbacks, Promises, async/await, timers, modules. Ends with an async task queue.
- Browser internals (Part III): the browser's multi-process architecture, how Blink/Gecko/WebKit actually differ, the DOM/CSSOM, and the critical rendering path from bytes to pixels.
- Networking (Part IV): HTTP fundamentals, HTTP/1.1 vs 2 vs 3 in the
browser,
fetch, CORS, caching, WebSockets. - Rendering applications (Part V): CSR/SSR/SSG, virtual DOM vs fine-grained reactivity, hydration, Core Web Vitals.
- Advanced: concurrency (Part VI): Web Workers,
SharedArrayBuffer+Atomics, Shared/Service Workers, real multi-threaded browser architectures. - Client-side storage & security (Part VII): cookies,
localStorage,sessionStorage, IndexedDB, and the Web Crypto API — including exactly what client-side encryption can and can't protect against. - Expert (Part VIII): what's actually happening inside V8 — parsing, bytecode, the JIT, garbage collection, and browser sandboxing.
- Capstone I (Part IX): an offline-first, multi-threaded, end-to-end encrypted note-taking app that uses nearly everything in Parts I–VIII.
- Modern JavaScript (Part X): metaprogramming with Proxy and Reflect, lazy iteration and Web Streams, every ES2023–ES2026 feature worth using, and 16 "predict the output" puzzles.
- JavaScript and AI (Part XI): WebGPU, Transformers.js and WebLLM running models in the browser, Chrome's built-in AI, streaming chat UIs, the agent tool-calling loop, WebMCP, actionable UI for agents, and edge functions. Ends with the Support Desk agent app.
- Security and auth (Part XII): the OWASP Top 10:2025 and the OWASP Top 10 for LLM Applications (the "top 20") implemented in JavaScript, plus sessions, CSRF, OAuth with PKCE and passkeys.
- Reading the source (Part XIII): Preact, Preact Signals, Zustand and Hono, read line by line and rebuilt in miniature.
- E2E testing (Part XIV): Playwright in depth on a real project, with the six bugs the suite found and how it was made flake-free.
- Capstone II (Part XV): Browser Lab, a nine-station animated tour of networking, rendering, the event loop, V8, threads, storage, Core Web Vitals and debugging, built with JS and CSS only.
Conventions:
- Code targets evergreen browsers and modern Node.js (ES2022+). Version-gated
features (e.g.
Array.prototype.group, cross-origin isolation requirements) are called out explicitly. - "Real-world example" boxes ground a concept in something you'll actually build. "War story" boxes describe a real incident or trade-off engineers have hit in production. "🎯 Challenge" boxes (Parts X–XV) are exercises that stretch the chapter.
- Parts X–XV were written in October 2026. Their code was run in Chromium 153 and Node 22, and both projects' Playwright suites pass. Features that are not yet in every browser carry a support note.
- This guide is JS/browser-specific. For the network layer underneath
fetch/HTTP, seewiki/networking/tcp-ip/real-life-example.md; for the load-testing/perf-measurement side of the APIs you'll build here, seewiki/scale-perf/real-life-scale-guide.md.