Volume 1

JavaScript & Browser Fundamentals

The first volume builds the mental model senior engineers need for browser execution, JavaScript runtime behavior, rendering, memory, and performance trade-offs.

Handbook Chapters100

Volume Target100

Latest TopicVolume One Senior Frontend Capstone

Progress100%

Q100: Volume One Senior Frontend Capstone

Pick up from the latest completed chapter, then use the practice grounds to test output questions and runtime behavior.

Open latest question

Latest Additions

Recently expanded chapters

Q100Volume One Senior Frontend Capstone Q099Frontend Career Growth from Senior to Staff Q098Frontend Command Palette and Power User Flows Q097Frontend Notification Systems Q096Frontend Search Architecture

Your Local Progress

0% covered

Progress is stored in this browser only. A page is completed after the minimum reading time and scroll-depth checks pass.

Completed0 / 104

Started0

Total time0s

Continue progress

How To Use This Volume

Runtime

Execution context, stack, heap, event loop, workers, and the cost of JavaScript on the main thread.

Rendering

DOM, CSSOM, critical rendering path, layout, paint, compositing, and resource priority.

Network and Cache

Cookies, service workers, HTTP caching, CORS, fetch lifecycle, offline behavior, and freshness trade-offs.

Security and Reliability

XSS, CSP, token exposure, telemetry, memory leaks, and production debugging habits.

Next Focus

Upcoming interview depth

Review Q001-Q100 for consistency and add refreshed PDFs
Use local progress to identify started, completed, and skipped chapters
Generate refreshed batch PDFs and mock interview packs
Upgrade the JS and TS practice console split layout

Study Batches

Start here

Runtime Foundations

Q001-Q005 / Browser navigation, V8, execution context, call stack, and memory heap.

First pass through browser navigation and JavaScript execution.Core browser model

Browser Scheduling and Rendering

Q006-Q015 / Event loop scheduling, rendering pipeline, storage, cookies, events, script loading, and workers.

Understanding why pages render, freeze, repaint, and respond the way they do.Production browser boundaries

Network, Cache and Security

Q016-Q027 / Service workers, HTTP caching, CORS, fetch lifecycle, realtime transports, observability, performance APIs, bundling, memory, XSS, CSP, CSRF, and isolation controls.

Preparing for caching, security, realtime, observability, and debugging questions.UI engineering depth

UX Systems and Interface Architecture

Q028-Q040 / Accessibility, resilient forms, responsive media, localization, URL state, navigation performance, uploads, permissions, motion, CSS architecture, layout systems, tokens, and theming.

Studying senior UI quality, accessibility, forms, layout, media, i18n, and design systems.Application correctness

State, Testing and TypeScript

Q041-Q049 / Client caching, state boundaries, error resilience, testing strategy, Playwright, TypeScript fundamentals, narrowing, generics, and runtime validation.

Learning how senior engineers keep complex apps reliable and typed.Framework mastery

React and Next.js Application Architecture

Q050-Q063 / React rendering, state, effects, memoization, forms, composition, context, profiling, Suspense, Next.js App Router, rendering modes, SEO, authentication, and authorization.

Preparing for React, Next.js, rendering, auth, SEO, and app architecture interviews.Senior system design

Platform, Delivery and System Design

Q064-Q075 / Micro frontends, module federation, monorepos, CI/CD, Docker, CDN, feature flags, dashboards, data grids, offline sync, trade-off communication, and storytelling.

Studying architecture, deployment, system design, rollout, offline sync, and senior communication.Senior practice

Senior Architecture and Team Practice

Q076-Q085 / Frontend platform API design, large migrations, incident response, technical debt, ADRs, mentoring, code review, API collaboration, performance budgets, and design-system governance.

Practicing senior ownership, migrations, incidents, team influence, API collaboration, and design-system governance.Operational quality

Quality, Risk and Operations

Q086-Q090 / Dependency management, security review process, accessibility audit and remediation, cross-browser compatibility, and frontend documentation strategy.

Preparing for senior conversations about dependency risk, security review, accessibility remediation, compatibility, and documentation.Product reliability

Product Reliability and Governance

Q091-Q095 / Analytics instrumentation, frontend SLOs, rollback playbooks, multi-tenant frontend architecture, and privacy consent systems.

Preparing for senior interviews that connect frontend engineering to product metrics, reliability, rollback safety, tenancy, and privacy.Volume 1 complete

Senior Frontend Capstone

Q096-Q100 / Search architecture, notification systems, command palettes, senior-to-staff growth, and the Volume 1 capstone.

Finishing Volume 1 with high-level product workflows, power-user UX, career growth, and capstone synthesis.Execution foundations

Advanced JavaScript Execution

Q101-Q105 / Lexical environments, closures, scope chains, this binding, and advanced function invocation behavior.

Starting Volume 2 with deeper JavaScript execution, lexical environment, closure, scope, and this-binding topics.Object model and protocols

Objects, Iteration and Promises

Q106-Q110 / Prototypes, descriptors, class inheritance, symbols, iterators, generators, promises, thenables, and resolution.

Deepening JavaScript object model, property behavior, iteration protocols, and promise internals.Async, modules and metaprogramming

Async Flow, Modules and Metaprogramming

Q111-Q115 / async/await, task and microtask ordering, ES modules, CommonJS, dynamic imports, Proxy, Reflect, WeakMap, WeakSet, and weak references.

Practicing async control flow, browser scheduling, module systems, proxy behavior, and memory-aware collections.Memory and data patterns

Memory, Cancellation and Data Patterns

Q116-Q120 / Garbage collection, memory leaks, AbortController, request lifecycles, structured cloning, serialization, custom errors, stack traces, and functional patterns.

Practicing production JavaScript patterns around memory, cancellation, copying, error modeling, and functional design.Utilities and safe objects

Performance Utilities and Safe Objects

Q121-Q125 / Debounce, throttle, rate limiting, memoization, cache keys, invalidation, equality, identity, structural sharing, and prototype pollution defenses.

Practicing common senior JavaScript utility patterns, equality reasoning, immutable updates, and safe object handling.Syntax and async streams

Language Ergonomics and Async Streams

Q126-Q130 / Type coercion, destructuring, rest, spread, optional chaining, nullish coalescing, event emitters, pub-sub, async iterators, streams, and backpressure.

Practicing conversion rules, modern syntax semantics, event-driven design, and streaming async data.Formats, precision and URLs

Formats, Precision and URLs

Q131-Q135 / Date and time zones, Intl formatting, regular expressions, BigInt, number precision, safe integers, URL parsing, URLSearchParams, and encoding.

Practicing practical JavaScript data handling for dates, locales, text patterns, numbers, and URL state.Debugging and compatibility

Debugging, Measurement and Compatibility

Q136-Q140 / Console and debugger workflow, source maps, production debugging, User Timing API, feature detection, polyfills, progressive enhancement, and browser compatibility strategy.

Practicing senior JavaScript debugging, production diagnostics, measurement, and browser support strategy.Runtime contracts

Runtime Contracts and Loading Boundaries

Q141-Q145 / Strict mode, module evaluation order, circular dependencies, lazy loading, code splitting, side-effect boundaries, defensive programming, runtime guards, API contracts, and normalization.

Practicing strict runtime semantics, module evaluation, loading strategy, defensive guards, and API boundary design.Volume 2 complete

Runtime Reliability Capstone

Q146-Q150 / Safe JSON parsing, object key safety, cooperative scheduling, runtime configuration, feature flags, environment data, and an advanced JavaScript runtime reliability capstone.

Consolidating advanced JavaScript reliability topics into safe data handling, scheduling, config, and capstone system thinking.Rendering foundations

React Rendering Foundations

Q151-Q155 / React render mental model, Fiber units of work, reconciliation, keys, state update queues, batching, effects, synchronization, and dependency arrays.

Starting Volume 3 with React rendering, Fiber, reconciliation, state queues, batching, and effects.Stateful patterns

React Identity and Stateful Patterns

Q156-Q160 / React.memo, useMemo, useCallback, referential stability, prop identity, useRef, DOM refs, mutable values, useReducer, complex state transitions, and custom hooks.

Practicing React memoization, reference identity, refs, reducers, and custom hook design.App state and resilience

React App State and Resilience

Q161-Q165 / Context provider design, rerender boundaries, useSyncExternalStore, controlled and uncontrolled forms, Server Actions, error boundaries, recovery UI, Suspense, loading boundaries, streaming, and async React UI.

Practicing React application architecture around Context, external stores, forms, error boundaries, and Suspense.Concurrent interactions

Concurrent React Interaction Patterns

Q166-Q170 / Concurrent rendering, update priority, useTransition, useDeferredValue, responsive search UI, optimistic mutations, action state, pending feedback, Activity, preserved state, and hidden UI trade-offs.

Practicing modern React concurrency patterns for responsive inputs, async mutations, and preserved UI state.Performance and architecture

React Performance and Architecture APIs

Q171-Q175 / React DevTools Profiler, render debugging, virtualization, large list rendering, component composition, compound components, slot APIs, portals, modals, layered UI, React Server Components, and Next.js client boundaries.

Practicing evidence-driven React performance debugging, scalable component APIs, overlays, and Next.js Server Component boundaries.Data boundaries

React Data Boundaries and Capstone

Q176-Q180 / Server state, client state, cache ownership, data fetching effects, race conditions, hydration mismatches, client-only rendering, Next.js routing, layouts, state preservation, and the Advanced React and Next.js capstone.

Consolidating React data ownership, async effect safety, hydration, routing state, and advanced React/Next.js architecture.Modern tooling

Modern React Tooling and Test Strategy

Q181-Q185 / useEffectEvent, stable effect callbacks, useId, accessibility IDs, React Compiler, automatic memoization, View Transitions, navigation motion, React testing strategy, hooks, components, and user flows.

Practicing modern React APIs, compiler-aware code shape, navigation motion, and behavior-focused testing.Volume 3 complete

React Delivery, Governance and Capstone

Q186-Q190 / Component library governance, versioning, large React migrations, production observability, errors, performance, user flows, React security boundaries, dangerouslySetInnerHTML, trusted UI, and an Advanced React volume capstone.

Closing the React volume with senior delivery topics: shared libraries, migration, observability, security, and system design.Vitals foundation

Core Web Vitals and Performance Budgets

Q191-Q195 / Core Web Vitals, field vs lab data, Largest Contentful Paint, loading path optimization, Interaction to Next Paint, main-thread responsiveness, Cumulative Layout Shift, visual stability, performance budgets, and regression prevention.

Starting Volume 4 with field measurement, LCP, INP, CLS, and regression prevention.Runtime cost

Frontend Loading and Runtime Cost

Q196-Q200 / Bundle analysis, JavaScript cost, route splitting, code splitting, prefetching, loading strategy, image and font performance, static asset delivery, third-party scripts, runtime risk, and a performance debugging workflow capstone.

Practicing bundle analysis, loading strategy, assets, third-party scripts, and complete performance debugging workflows.Type system

TypeScript Type System Foundations

Q201-Q205 / TypeScript strict mode, compiler configuration, structural typing, assignability, type compatibility, type inference, literal types, widening, discriminated unions, narrowing, exhaustiveness, generics, constraints, and reusable type API design.

Practicing strict TypeScript configuration, structural typing, inference, narrowing, and reusable generic APIs.Type utilities

Advanced Type Transformations

Q206-Q210 / Utility types, type transformations, mapped types, key remapping, conditional types, infer, template literal types, typed events, declaration files, module typing, third-party types, and safe TypeScript integration patterns.

Practicing utility types, mapped types, conditional types, template literal types, and third-party declaration boundaries.Applied TS

Applied TypeScript Architecture

Q211-Q215 / Typing React props, children, component APIs, type-safe forms, validation, user input, API contracts, runtime schemas, type-safe error modeling, result types, and a TypeScript frontend architecture capstone.

Practicing TypeScript in real frontend architecture: React APIs, forms, runtime schemas, errors, and capstone decisions.Typed delivery

Typed Platform Delivery

Q216-Q220 / TypeScript with Next.js App Router boundaries, typed Web Vitals, analytics and observability events, type-safe feature flags, config and experimentation, type-aware testing, contracts, compile-time safety, and a performance plus TypeScript delivery capstone.

Practicing TypeScript boundaries in Next.js, typed telemetry, feature flags, test contracts, and performance delivery.Runtime internals

Runtime Performance Internals

Q221-Q225 / Main thread, event loop, responsiveness, Web Workers, off-main-thread CPU work, memory leaks, garbage collection, runtime retention, rendering pipeline, style, layout, paint, compositing, and a runtime performance debugging capstone.

Practicing browser runtime performance: main thread responsiveness, workers, memory leaks, rendering pipeline, and debugging capstones.Resource delivery

Resource Delivery and Performance Capstone

Q226-Q230 / Network waterfall analysis, resource prioritization, HTTP caching, CDN behavior, immutable assets, preload, prefetch, preconnect, priority hints, performance budgets, CI regression automation, and a Volume 4 performance plus TypeScript capstone.

Practicing resource loading, caching, hints, CI budgets, and a full Volume 4 performance plus TypeScript capstone.Quality model

Mobile, Hydration and Quality Governance

Q231-Q235 / Mobile performance, low-end devices, network constraints, hydration cost, client islands, interactive boundaries, streaming, Suspense, perceived performance, dependency governance, bundle risk, supply chain cost, and a frontend quality operating model capstone.

Practicing mobile constraints, hydration cost, streaming UX, dependency governance, and frontend quality operating models.Secure delivery

Secure Performance and Resilience

Q236-Q240 / Content Security Policy, security headers, secure browser storage, cookies, token handling, authentication, session performance, user experience, resilient networking, retries, offline recovery, progressive recovery, and a secure performant frontend delivery capstone.

Practicing security headers, secure storage, auth performance, resilient networking, and secure performant delivery decisions.Production ready

Production Debugging and Readiness

Q241-Q245 / Source maps, production debugging, release symbolication, error reporting, logging, client observability, release monitoring, feature rollouts, rollback strategy, frontend incident triage, postmortem practice, and a production readiness review capstone.

Practicing source maps, client observability, release rollouts, incident triage, and production readiness reviews.Volume 4 complete

Inclusive Delivery and Volume Bridge

Q246-Q250 / Accessibility and performance, inclusive interactions, internationalization, localization, rendering performance, SEO, metadata, structured data, print, PDF export, offline reading readiness, and a Volume 4 operating capstone that bridges into future networking and platform volumes.

Closing Volume 4 with accessibility-performance trade-offs, localization, SEO, export readiness, and the bridge into networking and system design.Foundation

HTTP and Browser Security Foundations

Q251-Q255 / HTTP request and response anatomy, frontend system boundaries, cache validation, ETags, browser cache behavior, DNS, TCP, TLS, HTTP versions, CORS, preflight, credentials, origins, sandboxing, and browser security trust boundaries.

Starting Volume 5 with HTTP contracts, cache behavior, browser request lifecycle, CORS, credentials, origin isolation, and trust boundaries.Client security

Cookies, CSP and Client State Security

Q256-Q260 / Secure cookies, SameSite, session boundaries, CSRF threat modeling, mutation protection, Content Security Policy rollout, XSS defense-in-depth, service workers, Cache Storage, offline security, storage partitioning, privacy, and secure client state architecture.

Practicing secure session cookies, CSRF mutation protection, CSP rollout, service worker cache safety, storage partitioning, and privacy-aware client state.Auth boundary

Auth Flows, Permissions and Embeds

Q261-Q265 / Secure API design, frontend authorization boundaries, OAuth, OpenID Connect, PKCE, token refresh, session renewal, auth race conditions, browser permission UX, powerful APIs, iframe security, postMessage contracts, sandboxing, and embed isolation.

Practicing secure frontend API boundaries, OAuth/OIDC with PKCE, token refresh, browser permissions, and iframe/embed isolation.Runtime risk

Crypto, Realtime and Supply Chain Risk

Q266-Q270 / Web Crypto, hashing, encryption, key handling, WebSocket and Server-Sent Events security, realtime resilience, secure file upload validation, download safety, browser isolation headers, COOP, COEP, CORP, frontend supply-chain security, dependency risk, and package governance.

Practicing Web Crypto judgment, realtime transport security, secure file handling, browser isolation headers, and frontend supply-chain governance.Security ops

Security Operations and Platform Defaults

Q271-Q275 / Dependency update strategy, security patch rollout, secrets exposure, environment variables, frontend boundaries, logging privacy, sensitive data redaction, frontend security testing, SAST, DAST, abuse cases, threat modeling, and secure-by-default platform guardrails.

Practicing dependency patch operations, secrets boundaries, logging privacy, security test coverage, threat modeling, and secure-by-default frontend platform design.Volume 5 complete

Security Review and Volume Capstone

Q276-Q280 / Secure architecture review, frontend feature threat review, browser and network security incident response, privacy impact reviews, data minimization, security interview capstones, senior answer structure, and a Volume 5 security operating model capstone.

Closing the current security arc with architecture review, incident response, privacy impact reviews, security interview structure, and a Volume 5 operating model capstone.Foundations

Frontend System Design Foundations

Q281-Q285 / Frontend system design foundations, requirement gathering, scope control, domain modeling, state ownership, data flows, API contracts, pagination, filtering, client data access, scalability trade-offs, and client, server, edge responsibility placement.

Starting Volume 6 with frontend system design framing, requirement gathering, state ownership, API contracts, and scalability responsibilities.Platform patterns

Rendering, Modularity and Collaboration

Q286-Q290 / Rendering architecture, SSR, SSG, ISR, streaming, client islands, micro frontends, module federation, team boundaries, design system tokens, components, governance, search indexing, ranking, results UX, realtime collaboration, conflicts, presence, and shared state recovery.

Practicing rendering architecture, micro frontend decisions, design system governance, search architecture, and realtime collaboration design.Cloud delivery

Deployment, Cloud and Delivery

Q291-Q295 / Deployment environments, release strategy, rollback design, AWS frontend architecture, CloudFront, S3, Lambda, edge trade-offs, Docker images, runtime config, Kubernetes ingress, scaling, operability, CI/CD quality gates, and progressive delivery.

Practicing deployment architecture, AWS frontend hosting, Docker, Kubernetes, CI/CD gates, and progressive delivery decisions.Operations

Observability, Flags and Platform Ops

Q296-Q300 / Frontend observability, logs, metrics, traces, user journeys, feature flags, experiments, progressive rollout, product metrics, guardrails, cost management, vendor trade-offs, reliability ownership, and frontend platform operating model capstones.

Practicing frontend observability, feature flags, experimentation, cost management, reliability ownership, and platform operating models.Architecture drills

Reviews, Roadmaps and Interview Drills

Q301-Q305 / Frontend architecture review frameworks, decision records, RFCs, technical proposals, cross-team alignment, large-scale migrations, incremental adoption, technical roadmaps, stakeholder trade-offs, executive communication, and senior frontend system design interview drills.

Practicing architecture reviews, RFCs, large migrations, stakeholder communication, roadmaps, and senior frontend system design answer structure.Leadership bridge

Capstones, Leadership and Mock Loops

Q306-Q310 / Learning platform system design capstones, cross-functional frontend leadership, engineering management interfaces, behavioural interview preparation, mock interview loops, feedback calibration, weakness tagging, answer timing, and improvement planning.

Practicing end-to-end platform capstones, cross-functional leadership, engineering management partnership, behavioural interviews, and mock interview improvement loops.Mock calibration

Advanced Mocks and Leadership Calibration

Q311-Q315 / Advanced frontend system design mock scenarios, leadership case studies, ambiguity, conflict, technical risk, architecture critique prompts, reviewer mindset, hiring bar calibration, senior, staff, principal signals, and the transition from platform design to leadership preparation.

Practicing advanced mock scenarios, leadership case studies, architecture critique, hiring level calibration, and the bridge into leadership-focused preparation.Volume bridge

Final Capstones and Readiness Bridge

Q316-Q320 / Enterprise learning platform system design, self-review rubrics, interview readiness dashboards, final-week interview strategy, offer-stage preparation, Volume 6 synthesis, and the transition from platform design to leadership and behavioural interview preparation.

Closing the platform design arc with enterprise capstones, self-review, readiness planning, final-week strategy, and the bridge into leadership-focused preparation.Story foundation

Leadership Story Foundations

Q321-Q325 / Leadership interview foundations, ambiguity stories, conflict stories across product, design, backend, and security, mentorship, delegation, growing frontend engineers, and the first leadership story bank capstone.

Starting Volume 7 with leadership interview foundations, ambiguity stories, conflict trade-offs, mentorship evidence, and a reusable story bank.Incident leadership

Failure, Incidents and Influence

Q326-Q330 / Failure stories, owning mistakes, system change, frontend incident leadership, outages, regressions, influence without authority, platform adoption, executive communication, frontend risk, investment framing, full mock interview scorecards, and calibration rubrics.

Practicing failure stories, incident leadership, influence without authority, executive communication, and full mock scorecard calibration.Final sprint

Calibration, Roles and Final Sprint

Q331-Q335 / Staff-level calibration stories, scope, influence, durable impact, principal-level storytelling, strategy, vision, organizational change, role-specific frontend interview loops, product, platform, infrastructure, negotiation strategy, offer evaluation, career trade-offs, and a final two-week senior frontend mock sprint.

Practicing staff and principal calibration, role-specific interview loops, negotiation strategy, offer evaluation, and a two-week senior frontend mock sprint.Company loops

Company Loops and Portfolio Strategy

Q336-Q340 / Company research strategy, recruiter screen positioning, compensation and scope clarification, hiring manager conversations, expectations, team fit, take-home exercise scope, quality, communication, and Learning Studio portfolio storytelling as a senior frontend case study.

Practicing company research, recruiter screens, hiring manager conversations, take-home exercise strategy, and portfolio storytelling.Career systems

Offer, Transition and Career Systems

Q341-Q345 / Final offer comparison across compensation, scope, growth and risk, resignation and transition planning, professional handoff, first 30-60-90 day strategy, onboarding through product, codebase and people, and a long-term frontend career operating system.

Practicing final offer comparison, resignation handoff, first 30-60-90 planning, onboarding strategy, and long-term frontend career systems.Current latest

Final Leadership Readiness

Q346-Q350 / Final leadership interview capstone preparation, senior frontend mock scorecards, feedback review, portfolio, resume and LinkedIn positioning, behavioural story revision, and the closing synthesis for leadership and mock interview readiness.

Closing the leadership volume with final loop capstones, mock interview scorecards, profile review, story revision, and readiness synthesis.Simulation starters

Role-Specific Simulation Starters

Q351-Q355 / Product frontend user flow and business trade-offs, frontend platform developer experience, design system component API governance, slow dashboard performance debugging, and legacy React application migration planning.

Practicing senior frontend simulations across product flows, platform developer experience, design systems, performance debugging, and architecture migration.Mock loops

Company Prep and Mock Loops

Q356-Q360 / Company-specific senior frontend preparation packs, live coding strategy, take-home review simulations, frontend system design scorecards, and full mock loops across product, platform, coding, and leadership rounds.

Practicing company-specific preparation, live coding process, take-home review communication, architecture scorecards, and full mock interview loops.Assessment loops

Debugging, Contracts and Assessment Loops

Q361-Q365 / Deeper company-specific preparation across product, platform and growth-stage signals, production frontend regression debugging, API contract simulations, frontend observability drills, and final project-based assessment loops for senior frontend roles.

Practicing deeper company preparation, production debugging, API contract design, frontend observability, and project-based senior assessment loops.Current latest

State, Critique and Release Readiness

Q366-Q370 / Advanced state management ownership across cache, URL, local, derived and persisted state, design critique loops, accessibility audit simulations, release readiness interviews, and senior frontend case-study defense using Learning Studio and real projects.

Practicing senior state boundaries, product design critique, accessibility audits, release readiness, and real project case-study defense.