Capstone — Lead the Room

FE Lead · Lesson 24 — the one to reread last
The mindset

They're not testing recall — they're testing whether they'd want you leading the room. Every answer: headline → mechanism → trade-off → (anchor) → invite. Think aloud while you draw. Adapt depth to the audience. Disagree by engaging the trade-off.

The spine — URL → interactive (6 phases)

  1. Connect — DNS · TCP · TLS1.3 · QUIC (L16/L20/L01)
  2. TTFB — rendering mode · SSR/BFF · 103 Early Hints (L09/L26/L08)
  3. Parse/CRP — DOM/CSSOM · render- vs parser-blocking · async/defer (L02/L01)
  4. Paint/CWV — FCP → LCP (hero img, fetchpriority) · CLS (L03/L06)
  5. Hydration — download→re-execute→attach = top INP cost (L10/L11)
  6. Interactive — INP · long tasks block 1 main thread (L07/L11)

Delivery: 60-sec headline of all six, then "I can go deep at any layer — where would you like to dig?"

Whiteboard drill — the hotel flow

  1. Clarify + state assumptions (SEO on search, personalized checkout, 40+ locales).
  2. Headline: "rendering strategy per surface, not per app."
  3. Diagram: marketing→SSG/ISR · search→streaming SSR + edge · filters→client island · detail→ISR+streaming · checkout→fresh SSR no-store.
  4. Cross-cutting: images/LCP (L06) · i18n+hreflang (L23) · BFF/no waterfall (L26) · caching+budgets (L08) · A/B no-flicker (L22) · CSP maps/pay (L19) · resilience (L25).
  5. Close: trade-off per surface + "where would you push back?"

CARL stories (prep 3–4, reuse)

Each = cross-team impact + clear trade-off + measurable outcome.

  • Context — situation + stakes, brief.
  • Action — what YOU did + the trade-off + how you built alignment (RFC/codemod/metrics).
  • Result — the number (KB saved, LCP −Xs, adoption %).
  • Learning — the principle / what you'd change.
Question Story
Drove arch across teams Design system + alignment + bundle metric
Disagreed w/ senior Engaged data, named when they'd be right
Standard to teams you don't own InnerSource RFC + codemod + adoption
Root-caused systemically Fixed instance + added CI guardrail

Rapid-fire skeleton

headline → mechanism → trade-off → anchor

  • Token: in-mem access + HttpOnly refresh (L18).
  • INP>FID: worst full interaction vs first delay (L03/L11).
  • Not-MFE: small/perf/coupled → monorepo first (L14).
  • 3rd-party: async, facade-then-load, budget it (L02/L07).
Don't fail the interview
Memorize

Lead the room, don't recite. · 6-phase spine = every topic hangs off a phase. · Per surface, not per app. · CARL = impact + trade-off + number. · Fix the class, not the instance. · Headline first, trade-off always, invite the push-back.