Notes and builds for senior frontend engineers
Frontend Handbook
A working notebook for frontend engineering: classic UI problems built from scratch, plus the browser, performance, accessibility, security and system design knowledge around them. Every page pairs short notes with a live demo you can break on purpose. Start with the React Practices, then move on to the other handbooks.
Why it exists
Tutorials stop at the happy path. Real frontend work starts when the network is slow, the list has 100,000 rows, the user is on a keyboard, or the token has just expired.
The knowledge behind those cases is spread across MDN, web.dev, RFCs and blog posts. This handbook pulls it together, next to code that uses it.
Building each piece from scratch, then writing down why it works, is the fastest way to really understand it, and leaves a reference worth coming back to.
What you get
- Complete, working featuresEach practice is a complete feature with its own API route, built without a library doing the hard part.
- Failure on purposeDemo controls add latency, errors and load, so you see the loading, empty, error and retry states as well as the happy path.
- The why behind each choiceGuides spell out the approach, best practices, what to avoid and the trade-offs, so you can defend the design.
- The platform under ReactNetworking, rendering, Core Web Vitals, accessibility, security, system design and the build tools behind it all, each with an interactive demo.
How to use it
- 01Build itEach practice is a classic frontend problem built from scratch, with a live demo and controls that break it on purpose.
- 02Explain itEvery page has a guide: the key ideas, how it was built, best practices and trade-offs behind each choice.
- 03Stretch itThe other sections cover what sits around the code: the browser, performance, accessibility, system design, and the build tools under it.
Sections
React Practices
Fourteen classic UI problems built from scratch, with the reasoning behind each: notifications, infinite lists, forms, caching, real-time and more.
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.
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.
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.
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, an autocomplete, a frontend monorepo and micro frontends.
5 of 5 pages writtenOpen
Under the Hood
What runs between your source and the screen: the build pipeline, transpilers, bundlers, the CSS toolchain, and how React turns JSX into DOM updates.
5 of 5 pages writtenOpen
How this site is built
- Framework
- Next.js 16 App Router on React 19. Pages are Server Components; client code lives only in the interactive leaves.
- Backend
- Every demo talks to real route handlers under /api in the same repo. Input is validated with Zod and logic sits in server-only services.
- UI
- Tailwind CSS v4 and shadcn/ui on Base UI primitives, lucide icons, and theme tokens so light and dark mode both work.
- Process
- Spec-driven: each feature starts as a spec with acceptance criteria, then design, tasks, implementation and verification against those criteria.
- Hosting
- Deployed to Cloudflare Workers with the OpenNext adapter.
References
The sources these pages lean on most. Each topic page links to the specific articles it draws from.