Examples in the wild
Auto Navigator→
Auto Navigator is Capital One's car-buying application. The search page is one of the most complex and data-intensive features on the site which was recently rewritten using the design system I architected, built and maintain. Migrating away from bespoke code to use the design system saw a dramatic drop in load time (around two seconds), greater consistency, developer velocity and a reduction in accessibility issues.
Auto Prequalify→
The Capital One Auto prequality page was written from the ground up to utilize the FS Design System. This led to a reduction in accessibility findings and better developer ergonomics.
Open source projects
A collection of projects I wrote and currently maintain. This work touches thousands of developers and projects each week.
@open-wc/form-control→
A mixin for creating universal form controls
@open-wc/form-helpers→
Helper utilities for working with forms across multiple frameworks
element-internals-polyfill→
A browser polyfill for the ElementInternals and AriaMixin specifications
construct-style-sheets-polyfill→
A browser polyfill for the constructible stylesheets specification
Published articles
A collection of articles written and published, mostly for CSS-Tricks.
Creating Custom Form Controls with ElementInternals→
Ever since the dawn of time, humanity has dreamed of having more control over form elements. OK, I might be overselling it a tiny bit, but creating or …
3 Approaches to Integrate React with Custom Elements→
In my role as a web developer who sits at the intersection of design and code, I am drawn to Web Components because of their portability. It makes sense: custom elements are …
TypeScript, Minus TypeScript→
Unless you’ve been hiding under a rock the last several years (and let’s face it, hiding under a rock sometimes feels like the right thing to do), you’ve probably heard of and likely used TypeScript. TypeScript is …
How to Tame Line Height in CSS→
In CSS, line-height is probably one of the most misunderstood, yet commonly-used attributes. As designers and developers, when we think about line-height, we might think about the concept of leading from print design …
Advanced Tooling for Web Components→
Over the course of the last four articles in this five-part series, we’ve taken a broad look at the technologies that make up the Web Components standards. First, we looked at …
Encapsulating Style and Structure with Shadow DOM→
This is part four of a five-part series discussing the Web Components specifications. In part one, we took a 10,000-foot view of the specifications and …
Creating a Custom Element from Scratch→
In the last article, we got our hands dirty with Web Components by creating an HTML template that is in the document but not rendered until we need it. Next up, we’re going to continue our quest to …
Crafting Reusable HTML Templates→
In our last article, we discussed the Web Components specifications (custom elements, shadow DOM, and HTML templates) at a high-level. In this article, and the three to follow, we will …
An Introduction to Web Components→
Front-end development moves at a break-neck pace. This is made evident by the myriad articles, tutorials, and Twitter threads bemoaning the state of what once was a fairly simple tech stack. In this article …