The Senior Frontend Engineer's Companion
The reference I wish I'd had when I started building apps for millions of users.
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
Frontend development has moved from building whole pages to building interfaces out of small, reusable components.
-
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
With progressive enhancement, your web app keeps working for everyone, even when some of its code fails to load.
Guides
Longer guides that compare the options for the bigger frontend decisions, such as state management and rendering.
All 11 guides-
Accessible Interaction Playbook
Making 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
Choosing 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
Choosing 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
Choosing between local state, lifted state, dependency injection, and global state libraries, based on what your application needs.
-
Designing Component APIs
Choosing 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.
Patterns
Solutions to problems that come up again and again in frontend code, grouped by category.
All 41 patterns