Frontend Labs
⋯

Table of contents

Part I — Foundations: the JS way

  1. What JavaScript is, and the engines that run it
  2. Running JS: console, Node, and your first script
  3. Values and types: primitives, coercion, == vs ===
  4. Variables and scope: var/let/const, hoisting, the TDZ
  5. Operators and control flow
  6. Functions in depth: closures, this, call/apply/bind
  7. Objects and prototypes: the prototype chain, classes as sugar
  8. Arrays and iteration: methods, iterators, generators
  9. Strings, template literals, and regular expressions
  10. Error handling: try/catch, custom Error subclasses
  11. Mini project: a CLI todo app (Node)

Part II — Intermediate: async JavaScript and the event loop 12. The call stack, heap, and the event loop model 13. Callbacks and Promises: what actually happens under the hood 14. async/await: sugar over promises, and its sharp edges 15. Timers and scheduling: setTimeout, rAF, requestIdleCallback, MessageChannel 16. Modules: CommonJS vs ES Modules, bundlers, dynamic import() 17. Mini project: an async task queue with concurrency limits and retry

Part III — Inside the browser 18. The browser's process model: multi-process architecture and site isolation 19. Browser engines compared: Blink/V8, Gecko/SpiderMonkey, WebKit/JavaScriptCore 20. The DOM and BOM: window, document, node trees, the CSSOM 21. The critical rendering path: bytes → DOM → CSSOM → render tree → layout → paint → composite 22. Compositing and the GPU: layers, rasterization, the 16.6ms frame budget, jank 23. The event model: capturing, bubbling, delegation, passive listeners 24. Mini project: finding and fixing jank with the Performance panel

Part IV — HTTP, networking, and the browser 25. HTTP fundamentals for JS developers 26. HTTP/1.1 vs HTTP/2 vs HTTP/3 in the browser 27. fetch and XMLHttpRequest: requests, streaming, aborting 28. CORS in depth: same-origin policy, preflight, credentials 29. HTTP caching and the browser cache 30. WebSockets and Server-Sent Events 31. Mini project: a resilient fetch client (timeout, retry, cache, dedup)

Part V — Rendering web applications in depth 32. Rendering models: CSR, SSR, SSG, ISR 33. Virtual DOM reconciliation vs fine-grained reactivity (signals) 34. Hydration and partial/progressive/resumable hydration 35. Core Web Vitals: LCP, INP, CLS — measuring and fixing them 36. Mini project: a virtual-DOM renderer from scratch (~150 lines)

Part VI — Advanced JS: concurrency and multi-threaded browser apps 37. Why JS is (mostly) single-threaded, and what that really means 38. Web Workers: postMessage, structured clone, transferable objects 39. SharedArrayBuffer and Atomics: real shared-memory concurrency 40. Shared Workers and Service Workers: lifecycle, scope, background sync 41. Multi-threaded architecture patterns: worker pools, Comlink-style RPC 42. Mini project: a multi-threaded Mandelbrot renderer (worker pool + SAB)

Part VII — Client-side storage and encryption 43. Cookies in depth: attributes, HttpOnly/Secure/SameSite 44. localStorage and sessionStorage: API, quotas, pitfalls 45. IndexedDB: transactional storage for structured, larger data 46. The Web Crypto API: hashing, AES-GCM, key derivation, asymmetric crypto 47. What client-side encryption can't protect against: the XSS threat model 48. Mini project: an encrypted notes app (Web Crypto + IndexedDB)

Part VIII — Expert: engine internals and browser security 49. Inside V8: parsing, Ignition bytecode, TurboFan, hidden classes, inline caches 50. Garbage collection and memory leaks in real JS apps 51. Browser security internals: CSP, sandboxing, Spectre, site isolation

Part IX — Capstone I 52. Capstone: an offline-first, multi-threaded, end-to-end-encrypted notes PWA

Part X — Modern JavaScript: deep, current, and fun 53. Metaprogramming: Symbols, Proxy and Reflect 54. Iterators, generators and streams: data that arrives over time 55. JavaScript in 2026: the features worth adopting now 56. JavaScript puzzles: predict the output, then explain it

Part XI — JavaScript and AI: models in the browser, agents in the UI 57. Machine learning in the browser: WebGPU, WebAssembly and Transformers.js 58. WebLLM: running a real LLM entirely in the browser 59. Built-in AI and streaming conversational UIs 60. Agents in JavaScript: the tool-calling loop 61. Actionable UI: a small framework for agentic interfaces 62. Edge functions: JavaScript next to your users 63. Mini project: Support Desk — a working agentic web app

Part XII — Client-side security, authentication and the OWASP lists 64. The browser threat model, and the OWASP "top 20" 65. OWASP Top 10:2025, implemented in JavaScript 66. OWASP Top 10 for LLM Applications, in a JavaScript agent app 67. Authentication in the browser: sessions, tokens, OAuth and passkeys 68. Mini project: harden and audit Support Desk

Part XIII — Reading the source: popular open-source JavaScript 69. How to read a large JavaScript codebase 70. Preact: a whole React in a few kilobytes 71. Signals from the inside: push dirtiness, pull values 72. Zustand: a state manager in 20 lines, and useSyncExternalStore 73. Hono: routing with one regex, middleware as an onion

Part XIV — End-to-end testing in depth with Playwright 74. A testing strategy for web apps, and how Playwright works 75. Setting up Playwright for a real project 76. Writing tests that survive refactors 77. Advanced techniques: mocks, streams, clocks, users, a11y, visuals 78. Flakiness, debugging and CI: war stories from this suite

Part XV — Capstone II: Browser Lab 79. Architecture and setup 80. Station walkthrough: from URL to bytes 81. Station walkthrough: rendering, the event loop and V8 82. Station walkthrough: threads and storage 83. Station walkthrough: Core Web Vitals and debugging 84. Testing the lab, extending it, and where to go next

Appendices

  • A. Event-loop task-ordering cheat sheet
  • B. Storage options comparison table
  • C. Web Crypto API cheat sheet
  • D. Glossary
  • E. Further reading
  • F. Playwright cheat sheet
  • G. Modern platform features: support at a glance (October 2026)

Generated from real-life-JS-guide.md · 8 Oct 2026 16:36