# Frontend Playground

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

---

LLMS index: [llms.txt](/ood-agile-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.