Frontend Labs
⋯
Read as one page Original HTML edition ↗ Markdown source ↗
🟨

JavaScript — The Complete Field Guide (Beginner → Expert)

A practical, example-driven path through JavaScript: the language itself, the browser it usually runs in, the network it talks over, and the multi-threaded, encrypted, offline-capable applications you can build once you understand all three.

93 chapters · 3 h 18 min of reading

Contents

93 chapters, one page each. Prefer one long page? Read the whole book on one page.

  1. How to use this guide2 min
  2. Table of contents4 min
  3. Part I — Foundations: the JS way
  4. 1. What JavaScript is, and the engines that run it2 min
  5. 2. Running JS: console, Node, and your first script1 min
  6. 3. Values and types: primitives, coercion, == vs ===1 min
  7. 4. Variables and scope: var / let / const , hoisting, the TDZ1 min
  8. 5. Operators and control flow1 min
  9. 6. Functions in depth: closures, this , call / apply / bind1 min
  10. 7. Objects and prototypes: the prototype chain, classes as sugar1 min
  11. 8. Arrays and iteration: methods, iterators, generators1 min
  12. 9. Strings, template literals, and regular expressions1 min
  13. 10. Error handling: try / catch , custom Error subclasses1 min
  14. 11. Mini project: a CLI todo app (Node)1 min
  15. Part II — Intermediate: async JavaScript and the event loop
  16. 12. The call stack, heap, and the event loop model1 min
  17. 13. Callbacks and Promises: what actually happens under the hood1 min
  18. 14. async / await : sugar over promises, and its sharp edges1 min
  19. 15. Timers and scheduling: setTimeout , rAF, requestIdleCallback , MessageChannel1 min
  20. 16. Modules: CommonJS vs ES Modules, bundlers, dynamic import()1 min
  21. 17. Mini project: an async task queue with concurrency limits and retry1 min
  22. Part III — Inside the browser
  23. 18. The browser's process model: multi-process architecture and site isolation2 min
  24. 19. Browser engines compared: Blink/V8, Gecko/SpiderMonkey, WebKit/JavaScriptCore1 min
  25. 20. The DOM and BOM: window , document , node trees, the CSSOM1 min
  26. 21. The critical rendering path: bytes → DOM → CSSOM → render tree → layout → paint → composite2 min
  27. 22. Compositing and the GPU: layers, rasterization, the 16.6ms frame budget, jank1 min
  28. 23. The event model: capturing, bubbling, delegation, passive listeners1 min
  29. 24. Mini project: finding and fixing jank with the Performance panel1 min
  30. Part IV — HTTP, networking, and the browser
  31. 25. HTTP fundamentals for JS developers1 min
  32. 26. HTTP/1.1 vs HTTP/2 vs HTTP/3 in the browser1 min
  33. 27. fetch and XMLHttpRequest : requests, streaming, aborting1 min
  34. 28. CORS in depth: same-origin policy, preflight, credentials1 min
  35. 29. HTTP caching and the browser cache1 min
  36. 30. WebSockets and Server-Sent Events1 min
  37. 31. Mini project: a resilient fetch client (timeout, retry, cache, dedup)1 min
  38. Part V — Rendering web applications in depth
  39. 32. Rendering models: CSR, SSR, SSG, ISR1 min
  40. 33. Virtual DOM reconciliation vs fine-grained reactivity (signals)1 min
  41. 34. Hydration and partial/progressive/resumable hydration1 min
  42. 35. Core Web Vitals: LCP, INP, CLS — measuring and fixing them1 min
  43. 36. Mini project: a virtual-DOM renderer from scratch (~150 lines)2 min
  44. Part VI — Advanced JS: concurrency and multi-threaded browser apps
  45. 37. Why JS is (mostly) single-threaded, and what that really means1 min
  46. 38. Web Workers: postMessage , structured clone, transferable objects1 min
  47. 39. SharedArrayBuffer and Atomics : real shared-memory concurrency1 min
  48. 40. Shared Workers and Service Workers: lifecycle, scope, background sync1 min
  49. 41. Multi-threaded architecture patterns: worker pools, Comlink-style RPC1 min
  50. 42. Mini project: a multi-threaded Mandelbrot renderer (worker pool + SAB)2 min
  51. Part VII — Client-side storage and encryption
  52. 43. Cookies in depth: attributes, HttpOnly / Secure / SameSite2 min
  53. 44. localStorage and sessionStorage : API, quotas, pitfalls1 min
  54. 45. IndexedDB: transactional storage for structured, larger data1 min
  55. 46. The Web Crypto API: hashing, AES-GCM, key derivation, asymmetric crypto1 min
  56. 47. What client-side encryption can't protect against: the XSS threat model2 min
  57. 48. Mini project: an encrypted notes app (Web Crypto + IndexedDB)1 min
  58. Part VIII — Expert: engine internals and browser security
  59. 49. Inside V8: parsing, Ignition bytecode, TurboFan, hidden classes, inline caches2 min
  60. 50. Garbage collection and memory leaks in real JS apps2 min
  61. 51. Browser security internals: CSP, sandboxing, Spectre, site isolation1 min
  62. Part IX — Capstone I: the encrypted notes PWA
  63. 52. Capstone: an offline-first, multi-threaded, end-to-end-encrypted notes PWA2 min
  64. Part X — Modern JavaScript: deep, current, and fun
  65. 53. Metaprogramming: Symbols, Proxy and Reflect5 min
  66. 54. Iterators, generators and streams: data that arrives over time4 min
  67. 55. JavaScript in 2026: the features worth adopting now5 min
  68. 56. JavaScript puzzles: predict the output, then explain it4 min
  69. Part XI — JavaScript and AI: models in the browser, agents in the UI
  70. 57. Machine learning in the browser: WebGPU, WebAssembly and Transformers.js4 min
  71. 58. WebLLM: running a real LLM entirely in the browser3 min
  72. 59. Built-in AI and streaming conversational UIs3 min
  73. 60. Agents in JavaScript: the tool-calling loop4 min
  74. 61. Actionable UI: a small framework for agentic interfaces4 min
  75. 62. Edge functions: JavaScript next to your users4 min
  76. 63. Mini project: Support Desk — a working agentic web app2 min
  77. Part XII — Client-side security, authentication and the OWASP lists in JavaScript
  78. 64. The browser threat model, and the OWASP "top 20"2 min
  79. 65. OWASP Top 10:2025, implemented in JavaScript9 min
  80. 66. OWASP Top 10 for LLM Applications, in a JavaScript agent app3 min
  81. 67. Authentication in the browser: sessions, tokens, OAuth and passkeys5 min
  82. 68. Mini project: harden and audit Support Desk2 min
  83. Part XIII — Reading the source: popular open-source JavaScript, in depth
  84. 69. How to read a large JavaScript codebase1 min
  85. 70. Preact: a whole React in a few kilobytes7 min
  86. 71. Signals from the inside: push dirtiness, pull values4 min
  87. 72. Zustand: a state manager in 20 lines, and useSyncExternalStore3 min
  88. 73. Hono: routing with one regex, middleware as an onion4 min
  89. Part XIV — End-to-end testing in depth with Playwright
  90. 74. A testing strategy for web apps, and how Playwright works2 min
  91. 75. Setting up Playwright for a real project2 min
  92. 76. Writing tests that survive refactors3 min
  93. 77. Advanced techniques: mocks, streams, clocks, users, a11y, visuals5 min
  94. 78. Flakiness, debugging and CI: war stories from this suite4 min
  95. Part XV — Capstone II: Browser Lab, a live animated tour of the browser
  96. 79. Architecture and setup4 min
  97. 80. Station walkthrough: from URL to bytes2 min
  98. 81. Station walkthrough: rendering, the event loop and V84 min
  99. 82. Station walkthrough: threads and storage2 min
  100. 83. Station walkthrough: Core Web Vitals and debugging3 min
  101. 84. Testing the lab, extending it, and where to go next2 min
  102. Appendix A: Event-loop task-ordering cheat sheet1 min
  103. Appendix B: Storage options comparison table1 min
  104. Appendix C: Web Crypto API cheat sheet1 min
  105. Appendix D: Glossary2 min
  106. Appendix E: Further reading8 min
  107. Appendix F: Playwright cheat sheet1 min
  108. Appendix G: Modern platform features: support at a glance (October 2026)1 min

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