Posts by series
View as: Grid | By series
JavaScript Reactivity 📎
-
JavaScript Reactivity (Part 1): A Global Look2026-05-08Reactivity is a creative, opinionated, scrappy corner of front-end JavaScript. Part 1 of a series getting the lay of the land on reactivity - defining some terms, introducing the actors, and marveling at the diversity. -
JavaScript Reactivity (Part 2): Deep vs. Shallow Reactivity2026-05-22The fundamental reactivity question is: what's changed? Let's dive into the spectrum of reactivity depth and understand the pros and cons of these different strategies.
Web Components and You 📎
-
Web Components and You (part 1): The Shadow Dom2024-02-23We look at why web components are a good solution now, and the very basics on how to make one. -
Web Components and You (part 2): Attributes and Reactivity2024-03-01Let's take a look at web component attributes and how you can get your components to react to attribute changes! -
Web Components and You (part 3): Simplifying with Lit2024-03-06It can be tedious to wire up reactivity in a web component ourselves. Let's see how easy it can be with Lit
-
Web Components and You (part 4): Style2024-03-11Let's visit how you would do CSS styles in a web component, and how Lit includes styles. -
Web Components and You (part 5): Piercing the Shadow DOM2024-03-24The Shadow DOM has scoped styles, which means that styles outside the shadow root don't affect it. But there are some exceptions! We will discuss the `:part()` psuedo-selector, css variables, declarative shadow DOM, and other ways the shadow DOM can be styled!
-
Web Components and You (part 6): Slots and how to use them2024-04-01Slots are a fantastic new feature that comes along with the Shadow DOM. You don't even need to make a custom element to use them. Let's look at how to use slots, name slots, and some of the lifecycles and features that come along with them. -
Web Components and You (part 7): Let's talk about Shadow DOM mode2024-04-14The Shadow DOM allows us a certain level of encapsulation, and there are two options for which mode you'd like the Shadow DOM to be int: open or closed. We'll talk about the differences, the pros and cons, and ultimately whether it's worth it to close the Shadow DOM. -
Web Components and You (part 8): Making a form element web component!2024-04-26We can create form elements with our new web components, but we need to do a few new things: attach internals, handle focus delegation, and register the component as a bona fide form element with a value. It's pretty simple once you get into it- let's make a special text component as an example.
-
Web Components and You (part 9): Handling empty slots2024-08-12Sometimes you want to check the contents of slots in the shadow DOM and conditionally do things based on what's in them. Can you do this with slots? Yes! It's a little strange though... -
Web Components and You (part 10): Provider patterns2024-08-31Web components are by default pretty isolated. There are some nice patterns to start sharing state and actions among web components. This article explores the 'provider' pattern
Standalone posts 📎
-
Web components + anchor positioning + popover API = I love the platform2024-10-12Man I love the platform. It's gotten really great recently with custom elements, new CSS like anchoring, and new element apis like the popover api. Let's look at making a popover element in this post.
-
The Differentiating Property of Web Components2024-11-09There's been a lot of discussion on whether web components are good or not. But there is one property of web components that might make them the best or the worst solution for your needs.
-
Some Web Component 'Render Prop' Patterns2024-11-14Eventually while creating web components you're going to want to use something like render props, where you can let the consumer of your components decide how things look and feel. In web components it requires a bit of a shift in mindset from what we're used to with frameworks. In this post I'm going to share a few strategies to invert control with rendering. -
Global state and stores with web components2025-01-18Any larger application with web components will need some way to share state and notify consumers that the state has changed. We can 'thread' props down through the DOM tree, or we could use something like context. Front end frameworks have solutions for this: sometimes it's a 'service.' Many times it's a 'store.' Let's talk about reactive stores in web components and start from the simplest possible examples! -
The Case for Services2025-02-02Services and dependency injection feel good with web components. The trick is to come up with a strategy that handles the run-time nature of web components. In this post I suggest a service/DI pattern that works so well with web components and frameworks as well!
-
BYOF: Build Your Own Framework2025-02-24The platform is getting so good that it's not hard for us to get reactive and declarative components going with a few utilities and web components. This is a look at how easy it is to build your own (web components) framework today. -
The Secret Lives of Classes: A deep dive into javascript prototypes and classes2025-04-05What started out as adding syntactic sugar to javascript prototypes fundamentally changed javascript forever. Classes are no longer "just" a simpler layer over prototypes. Classes are becoming the expected unit of abstraction and are affecting the way specifications are written. Let's dive deep into classes, objects, and prototypes!
-
Element Attributes Are Not Element Properties2025-04-30We discuss why attributes and properties are often confused, and I share my super-secret of learning and coding. -
Opinion: AI is bad for us2025-05-17AI is a hot topic right now. Unfortunately, CEOs and presidents think that AI will replace people, increase efficiencies, and make more money. What is at risk an ethical issue: what do we give up by using AI, and how to we protect human dignity?
-
Using the Browser Highlight API2025-09-01I'm celebrating the Highlight API being available in all browsers with some examples!
-
This is why we don't write date libraries2025-09-12I found myself commiting a cardinal web-dev sin: making a util function to work with dates. This is my story. Learn from me. -
Build Your Own Router2025-11-11Wake up, honey, URLPattern just dropped. It's time to make our own SPA router with web components! -
You Might Not Need an Abstraction2026-02-05The beginner copies and pastes. The mid-level engineer makes abstractions. The experienced engineer gets stuff done. -
Asynchronicity and Promises2026-02-22Promises weren't always a platform primitive. Neither were async tasks... kind of. Let's talk about the internals of async tasks and promises and a little bit of their history! -
Concurrency with Workers2026-03-08Javascript is single threaded... mostly! Let's look at how you can spin up workers and use them to run things concurrently! -
Brooks' Surgical Team Model and AI2026-04-19Brooks described a 10-person team structure 50 years ago. It turns out to be a surprisingly good model for working with AI agents- with some important caveats about where it breaks down.