Stage 0 — Foundation

Triết lý cốt lõi: Không timeline cứng, không đếm ngày. Chỉ có thứ tự module và Exit Criteria.
Tuân theo dependency: bạn không thể hiểu sâu React Fiber nếu chưa hiểu Browser Rendering Pipeline; không thể tối ưu Network nếu chưa hiểu HTTP/2 và TLS.
Quy tắc duy nhất: không sang module sau khi chưa đạt Exit Criteria module trước.

Phase: UNLEARN (50:50 | 70:30 | 80:20)
Teaching Model: 70% Teaching / 30% Questioning
Deliverable: Bộ 5 bản vẽ (Event Loop, Rendering Pipeline, Prototype Chain, HTTP Request Lifecycle, Debug Flowchart) + 1 demo app chứng minh hiểu biết về closure, this, và memory leak + 1 Decision Record mẫu.

Mục tiêu

Hiểu "máy tính chạy code như thế nào" và "trình duyệt render trang như thế nào" trước khi chạm vào framework.

• Unlearn → Rebuild: Tháo gỡ nhận thức sai về JS, Browser, Network. Xây lại từ spec/engine.
• Staff Lens: Mỗi module kết thúc bằng "Nếu bạn là Staff review code này..."
• Decision Record: Mỗi nhóm module lớn có DR mẫu để tập quen với việc "decide trước khi code".

Tại sao Stage 0 tồn tại

• Bối cảnh thực tế: 80% bug "kỳ lạ" ở production đều xuất phát từ hiểu sai cơ chế JS engine, event loop, hoặc rendering pipeline.
• Hậu quả nếu bỏ qua: Bạn sẽ học React theo kiểu "copy-paste magic", không bao giờ debug được hydration mismatch, memory leak, hoặc INP cao.
• Output của Stage 0: Khả năng giải thích bằng giấy bút (không code) cách 1 dòng JS biến thành pixel trên màn hình.

Danh sách module

Tư duy & Phương pháp

Module	Nội dung	Mức độ	Status
0.0.1 First Principles Thinking	Dạy cách hỏi "tại sao" trước khi học syntax. Socratic method cơ bản.	Foundation	⬜

JS Engine & Runtime

Module	Nội dung	Mức độ	Status
0.1.1 V8 Engine & Memory Basics	Ignition → Sparkplug → Maglev → TurboFan, Hidden Classes, Inline Cache, Generational GC	Foundation	⬜
0.1.2 Event Loop Fundamentals	Call Stack, Microtask, Macrotask, Render Pipeline	Foundation	⬜
0.1.3 Scheduler & Browser Task Scheduling	rAF, rIC, scheduler.postTask(), React Scheduler	Application	⬜
0.1.4 Execution Context	Hoisting, Scope Chain, TDZ	Foundation	⬜
0.1.5 Closure	Closure, Lexical Environment, Memory Leak	Foundation	⬜
0.1.6 this Binding	4 quy tắc this, Arrow Function, Explicit/Implicit Binding	Foundation	⬜
0.1.7 Prototype Chain, Proxy & Reflect	Prototype Chain, Object Creation, Proxy, Reflect	Foundation	⬜

Browser Rendering & CSS

Module	Nội dung	Mức độ	Status
0.2.1 Critical Rendering Path	DOM → CSSOM → Render Tree → Layout → Paint → Composite	Foundation	⬜
0.2.2 CSS Rendering Deep Dive	Stacking Context, Containing Block, BFC, GPU Layer, will-change	Application	⬜

Browser APIs & Storage

Module	Nội dung	Mức độ	Status
0.3.1 Browser Storage & Persistence	localStorage, IndexedDB, Cookie, Quota, Eviction	Foundation	⬜
0.3.2 Browser APIs — Observers & Workers	IntersectionObserver, ResizeObserver, Web Workers, Service Worker	Application	⬜
0.3.3 Web Components & Shadow DOM	Custom Elements, Shadow DOM, Slot, ::part(), ElementInternals	Application	⬜

TypeScript

Module	Nội dung	Mức độ	Status
0.5.1 TypeScript Generics & Advanced Types	Generics, Mapped Types, Conditional Types, infer	Foundation	⬜
0.5.2 TypeScript Utility Types & Zod	Paths<T>, PickByValueType, unknown vs any, Zod runtime validation	Application	⬜

Network & HTTP

Module	Nội dung	Mức độ	Status
0.6.1 HTTP Protocol Evolution	HTTP/1.1, HTTP/2, HTTP/3, TLS Handshake	Foundation	⬜
0.6.2 Caching & Resource Hints	Cache-Control, ETag, preload/prefetch, Brotli	Application	⬜
0.6.3 Network Security & Infrastructure	DNS, CDN, CORS, HSTS	Application	⬜
0.6.4 API Design & Backend Contract	REST maturity, Cursor pagination, Idempotency key, Rate Limit	Application	⬜

Debugging & Engineering

Module	Nội dung	Mức độ	Status
0.7.1 Debugging Methodology Fundamentals	RIMHVRP framework, git bisect, DevTools root cause	Foundation	⬜
0.7.2 Advanced Debugging & Postmortem	3-snapshot memory leak, LoAF API, Postmortem format	Mastery	⬜
0.8.1 Cost Engineering for Frontend	Tính $/user, bundle size = infrastructure cost, CDN cost, compute cost	Foundation	⬜
0.8.2 Technical Writing: RFC, ADR, Runbook	Staff viết trước khi code. RFC, ADR, Runbook format	Foundation	⬜

Stage 0 Staff Checkpoint

Tự đánh giá trước khi sang Stage 1. Nếu trả lờ "Không" ở bất kỳ câu nào, quay lại module tương ứng.

#	Câu hỏi	Module
1	Tôi có vẽ được Event Loop đầy đủ trên giấy trong < 5 phút không? (đúng spec, không chỉ "vòng lặp")	0.1.2
2	Tôi có vẽ được Browser Rendering Pipeline từ HTML đến Pixel không? (bao gồm cả Composite layer)	0.2.1
3	Tôi có giải thích được V8 hidden class và inline caching không? (không dùng analogy sai)	0.1.1
4	Tôi có biết khi nào dùng rAF vs rIC vs postTask không? (không chỉ "dùng để animation")	0.1.3
5	Tôi có xử lý được storage quota và QuotaExceededError không?	0.3.1
6	Tôi có viết được custom element với Shadow DOM không? (hiểu encapsulation thực sự)	0.3.3
7	Tôi có debug được bug production trong 30 phút không cần Google không? (dùng RIMHVRP)	0.7.1
8	Tôi có thiết kế được API với cursor pagination không? (hiểu tại sao cursor > offset)	0.6.4
9	Tôi có giải thích được Stacking Context và Containing Block không? (không chỉ "z-index")	0.2.2
10	Tôi có viết được DeepPartial<T> và PickByValueType<T, V> không? (hiểu type system, không copy-paste)	0.5.1
11	Tôi có dùng Zod validate runtime và infer type không?	0.5.2
12	Tôi có giải thích được HTTP/2 vs HTTP/3 không? (trade-off, không chỉ "HTTP/3 nhanh hơn")	0.6.1
13	Tôi có viết được postmortem đúng format không? (không blame, có metric)	0.7.2
14	Tôi có tính cost impact của 1 quyết định kỹ thuật không? (bundle size → $)	0.8.1
15	Tôi có viết 1 RFC 1 trang cho 1 feature đơn giản không?	0.8.2

Nguyên tắc vàng

• Nếu không vẽ được Event Loop và Rendering Pipeline trên giấy, chưa sang Stage 1.
• Mỗi checkbox trong checklist là một kiến thức bạn PHẢI giải thích được cho người khác. Nếu không giải thích được, chưa hiểu sâu — quay lại học.