Frontend Handbook

How to use it

1. 01Build itEach practice is a classic frontend problem built from scratch, with a live demo and controls that break it on purpose.
2. 02Explain itEvery page has a guide: the key ideas, how it was built, best practices and trade-offs behind each choice.
3. 03Stretch itThe other sections cover what sits around the code: the browser, performance, accessibility and system design.

Sections

• React Practices

  Fourteen classic UI problems built from scratch, with the reasoning behind each: notifications, infinite lists, forms, caching, real-time and more.

  x

  14 of 14 practices builtOpen

• Browser & Web Platform

  How a page is loaded, rendered and secured: the rendering pipeline, networking and caching, storage, and XSS, CSP and CORS.

  x

  3 of 3 pages writtenOpen

• Performance & Accessibility

  Measuring and fixing Core Web Vitals, profiling and bundle size, and building for keyboard and screen-reader users.

  x

  2 of 2 pages writtenOpen

• Security

  How a web app proves who is calling and keeps it that way: tokens and sessions first, with XSS, CSP and CSRF to follow.

  x

  2 of 2 pages writtenOpen

• Frontend System Design

  How to run a frontend design: scope the requirements, shape an architecture and data model, choose the trade-offs, then apply it to a news feed, autocomplete, chat or design system.

  x

  3 of 3 pages writtenOpen