# Frontend Playground

> Guided practicals for the Modern Front-End Engineering book.

---

LLMS index: [llms.txt](/frontend-book/llms.txt)

---

The Playground contains the guided practical work for the book. The runnable
source code will live in a separate companion repository; this site contains
the instructions, verification criteria, and links back to the relevant
chapters.

## Practical work

| Practical | Related chapter | Focus |
| --- | ---: | --- |
| [01 - Browser Observation (optional virtualization)](practical-01-browser-observation-and-virtual-scroller/) | 1 | Browser work and measured virtualization |
| [02 - Accessible Composite Listbox](practical-02-accessible-composite-listbox/) | 2 | Semantics, keyboard interaction, and accessibility |
| [03 - Intrinsic, Container-Aware Dashboard](practical-03-intrinsic-dashboard/) | 3 | Modern CSS layout |
| [04 - Typed, Abortable Event Hub](practical-04-abortable-event-hub/) | 4 | JavaScript events and cancellation |
| [05 - Runtime-Validated Data Boundary](practical-05-runtime-validated-boundary/) | 5 | TypeScript and runtime validation |
| [06 - Compound Headless Tabs](practical-06-compound-headless-tabs/) | 6 | Component architecture |
| [07 - Reactive Computed Graph](practical-07-reactive-computed-graph/) | 7 | Reactivity and derived state |
| [08 - URL-Driven Catalogue State](practical-08-url-driven-catalogue/) | 8 | Routing and application state |
| [09 - Cached Administrative API Client](practical-09-cached-api-client/) | 9 | APIs, caching, and failure states |
| [10 - Offline Outbox and Recovery](practical-10-offline-outbox/) | 10 | Offline persistence and recovery |
| [11 - Rendering Topology Comparison](practical-11-rendering-topology-comparison/) | 11 | CSR, SSR, and SSG trade-offs |
| [12 - Modern Front-End Toolchain](practical-12-module-graph-and-splitting/) | 12 | Module graphs and code splitting |
| [13 - Secure Front-End Application Boundary](practical-13-security-boundary-review/) | 13 | Security boundaries and safe sinks |
| [14 - Design-System Package and Ownership Map](practical-14-design-system-ownership/) | 14 | Design systems and ownership |
| [15 - Measured Virtualized Performance](practical-15-measured-virtualized-performance/) | 15 | Performance investigation |
| [16 - Resilient UI Integration Suite](practical-16-resilient-integration-suite/) | 16 | Integration testing |
| [17 - Delivery, Observability, and Rollback Loop](practical-17-delivery-observability-rollback/) | 17 | Delivery and operations |
| [18 - Make and Defend an Architecture Decision](practical-18-architecture-decision-record/) | 18 | ADRs and technical decision-making |

## Companion code

The companion repository will contain the runnable Vite and TypeScript
projects, checkpoints, tests, and reference implementations. This repository
deliberately keeps those implementation files separate from the book and its
practical instructions.

---

Section pages:

- [Browser Observation and Measured Virtualization](/frontend-book/playground/practical-01-browser-observation-and-virtual-scroller/)
- [Accessible Multilingual Interface and Composite Controls](/frontend-book/playground/practical-02-accessible-composite-listbox/)
- [Intrinsic, Container-Aware Dashboard](/frontend-book/playground/practical-03-intrinsic-dashboard/)
- [Abortable Event Hub and Asynchronous Control](/frontend-book/playground/practical-04-abortable-event-hub/)
- [Runtime-Validated Data Boundary and Typed Event Hub](/frontend-book/playground/practical-05-runtime-validated-boundary/)
- [Compound Headless Tabs and Component State Boundaries](/frontend-book/playground/practical-06-compound-headless-tabs/)
- [Reactive Dependency Graph and State Derivation](/frontend-book/playground/practical-07-reactive-computed-graph/)
- [URL-Driven State Architecture and Form Boundaries](/frontend-book/playground/practical-08-url-driven-catalogue/)
- [Cached Server-State Client with Optimistic Mutations](/frontend-book/playground/practical-09-cached-api-client/)
- [Offline Outbox and Resilient Synchronization](/frontend-book/playground/practical-10-offline-outbox/)
- [Rendering Topology Comparison: CSR, SSR, and Static Delivery](/frontend-book/playground/practical-11-rendering-topology-comparison/)
- [Inspect a Modern Front-End Toolchain and Module Graph](/frontend-book/playground/practical-12-module-graph-and-splitting/)
- [Security Boundary Review: XSS, CORS, and Authentication Boundaries](/frontend-book/playground/practical-13-security-boundary-review/)
- [Design-System Package Governance and Ownership Mapping](/frontend-book/playground/practical-14-design-system-ownership/)
- [Measure, Diagnose, and Optimize Core Web Vitals](/frontend-book/playground/practical-15-measured-virtualized-performance/)
- [Resilient UI Integration Suite](/frontend-book/playground/practical-16-resilient-integration-suite/)
- [Delivery, Observability, and Rollback Loop](/frontend-book/playground/practical-17-delivery-observability-rollback/)
- [Make and Defend an Architecture Decision](/frontend-book/playground/practical-18-architecture-decision-record/)