The Senior Frontend Engineer's Companion
The reference I wish I had when I started building apps for millions of users.
Core principles
Foundations
Core principles that shape how we build for the web.
All 6 foundations-
Accessibility as a Foundation
Accessibility belongs in your architecture from day one, instead of being retrofitted later.
-
Component-Driven Architecture
How frontend development moved from page-based thinking to component-based thinking.
-
Logical Separation of Concerns
Component-based architectures still separate concerns, but they separate frontend code by feature instead of by technology.
-
Performance as a Foundation
Performance belongs in the architecture from day one, instead of being bolted on after users start complaining.
-
Resilience by Design
Systems keep working when things fail if you design for failure and recovery from the start, instead of adding error handling at the end.
-
The Progressive Enhancement Mindset
Build resilient web applications that work for everyone, even when failures occur.
Decision guides
Guides
Comprehensive guides to navigate complex frontend decisions.
All 11 guides-
Accessible Interaction Playbook
How to make interactive UI accessible, with focus management, keyboard support, and screen reader announcements.
-
Building with Progressive Enhancement
A guide to building web applications that keep working for everyone, whatever their browser supports.
-
Choosing a CSS Strategy
How to choose between BEM, CSS-in-JS, utility-first CSS, and CSS Modules for your team and your project.
-
Choosing a Frontend Framework
The criteria I use to choose between React, Vue, Svelte, Angular, and other frontend frameworks on real projects.
-
Choosing a Networking Style for Realtime Apps
How to choose between polling, Server-Sent Events, WebSockets, and CRDTs, depending on how realtime your app needs to be and whether users edit together.
-
Choosing a State Management Approach
How to choose between local state, lifted state, dependency injection, and global state libraries, based on what your application needs.
-
Designing Component APIs
How to choose between props, slots, render props, compound components, and other patterns when you're designing a component's interface.
-
Managing AI Response States
Patterns for handling the thinking and streaming states of a language model response, and the interruptions that can cut it short.
Full library
Patterns
Reusable solutions to common frontend development challenges.
All 41 patterns