I love to collaborate and solve problems. A front end dev blogging about html, css, javascript, web components... and more!
JavaScript Reactivity (Part 4): Push vs. Pull Reactivity Published 2026-07-23, About 15 minute read. Series: JavaScript Reactivity A Global Look Deep vs. Shallow Reactivity Coarse vs. Fine-Grained Reactivity Push vs. Pull Reactivity Reactivity as Cache Invalidation (Coming soon!) Agnostic Reactivity - Does It Exist? (Coming soon!) Reactivity and Scheduling (Coming soon!) In the docs for RxJS there…
JavaScript Reactivity (Part 3): Coarse vs. Fine-Grained Reactivity Published 2026-06-06, About 10 minute read. Series: JavaScript Reactivity A Global Look Deep vs. Shallow Reactivity Coarse vs. Fine-Grained Reactivity Push vs. Pull Reactivity Reactivity as Cache Invalidation (Coming soon!) Agnostic Reactivity - Does It Exist? (Coming soon!) Reactivity and Scheduling (Coming soon!) In Part 2 we…
JavaScript Reactivity (Part 2): Deep vs. Shallow Reactivity Published 2026-05-22, About 14 minute read. Series: JavaScript Reactivity A Global Look Deep vs. Shallow Reactivity Coarse vs. Fine-Grained Reactivity Push vs. Pull Reactivity Reactivity as Cache Invalidation (Coming soon!) Agnostic Reactivity - Does It Exist? (Coming soon!) Reactivity and Scheduling (Coming soon!) When you first start…
JavaScript Reactivity (Part 1): A Global Look Published 2026-05-08, About 8 minute read. Series: JavaScript Reactivity A Global Look Deep vs. Shallow Reactivity Coarse vs. Fine-Grained Reactivity Push vs. Pull Reactivity Reactivity as Cache Invalidation (Coming soon!) Agnostic Reactivity - Does It Exist? (Coming soon!) Reactivity and Scheduling (Coming soon!) My world lately at work has been…
Brooks' Surgical Team Model and AI Published 2026-04-19, About 11 minute read. I revere The Mythical Man Month . The author Frederick P. Brooks, Jr. was 50 years ahead of his time. He concretely pointed out the difficulty of organizing coders into teams and the issues with creating larger organizations of engineers. Just take a gander at this quote: The dilemma is a cruel one. For efficiency and…
Concurrency With Workers Published 2026-03-08, About 12 minute read. Javascript is single threaded... mostly! In my last post I traced the beginnings of how the microtask queue evolved in javascript, and how this can lead to asynchronous code. We found that asynchronous code is not truly concurrent, because the single thread in javascript can only handle one task or microtask at a time.…
Asynchronicity and Promises Published 2026-02-22, About 16 minute read. You're in a technical interview and there are two Staff Developers zooming with you. They share their screen: They ask you with a smirk: "What is the expected output?" Could you reason out what would happen? Okay, seriously, if you ever find yourself in this situation for a technical interview, I would run, not walk, away from…
You Might Not Need an Abstraction Published 2026-02-05, About 14 minute read. One of my all-time favorite Youtubers MPJ used to often repeat these words of wisdom: The new engineer copies and pastes. The mid-level engineer makes abstractions. The experienced engineer gets s*** done. - MPJ (paraphrased) The thrust of his saying was that there is often a common path in the course of a software…
Build Your Own Router Published 2025-11-11, About 8 minute read. URLPattern just became available in all browsers: So I wanted to dig into what it would take to make a simple SPA router with vanilla JavaScript and browser APIs. We should be able to make a component that takes in a router configuration and renders the appropriate component determined by the browser URL. What does URLPattern() Do?…
This is why we don't write date libraries Published 2025-09-12, About 8 minute read. I was assigned a pretty straightforward bug last week: we were miscalculating the end of day datetime. When a date was 2025-09-13T12:24:11.181+03:00 , we needed to check to see if that datetime was the "end of day" Why would need this? We needed to represent a date range up to and including a particular day. So…
Using the Browser Highlight API Published 2025-09-01, About 4 minute read. The Hightligh API just recently became broadly available! (Well, at the time of writing this I know it's generally available , so hopefully the above widget information updates!) This API unlocks the ability to highlight portions of text without having to inject or modify DOM . In this post I'll describe the problems we had…
Opinion: AI is bad for us Published 2025-05-17, About 16 minute read. In the past month or so I'm seeing many company Presidents, CEOs, and other C-level people saying some wild stuff about AI assistants and large language models. Recently, Shopify has mandated AI use and requires employees to justify why AI can't be a solution for hiring or resource needs. Talking with Shopify employees I know,…
Element Attributes Are Not Element Properties Published 2025-04-30, About 6 minute read. Something that has come up a number of times as people are stepping away from their javascript frameworks and leaping into web components is that they don't know the difference between attributes and properties. This matters because there's a big difference between the two, and you need to know when to use…
The Secret Lives of Classes: A deep dive into javascript prototypes and classes Published 2025-04-05, About 13 minute read. You can be a succesful dev in javascript land and not think about prototypes much at all. They are a quaint relic, an oddball basis for the pet scripting language written in a week for Netscape . As I spend time working on architectural and library-based applications in…
BYOF: Build Your Own Framework Published 2025-02-24, About 9 minute read. The platform is getting so good. You may remember when I gushed over how it's now easy to make a dropdown web component . We're hopefully getting signals natively . And someday we might get declarative HTML rendering . But the native features avilable to us today nearly cover all we need to make a component framework…
The Case for Services Published 2025-02-02, About 8 minute read. I've mentioned before that one of the first difficulties you encounter as you adopt web components is communicating between components. . If only we could reach out and share instances between web components, especially when web components might be loading dynamically and at different times. Hear me out: Services are a fantastic way…
Global state and stores with web components Published 2025-01-18, About 8 minute read. If you build an application that needs to scale at all, you probably started to think about state. You might start to feel the pain of trying to orchestrate state between components and making them react to each other appropriately without creating a big bowl of spaghetti. This concern about application…
Some Web Component "Render Prop" Patterns Published 2024-11-14, About 9 minute read. Web components provide a lot of solutions that frameworks provide: state solutions, reactivity, mounting on the DOM, slots... So it's no surprise that web components can also invert control to consumers. In my last post I argued that this render props pattern, because web components don't fundamentally have a…
The Differentiating Property of Web Components Published 2024-11-09, About 12 minute read. About two months ago a Ryan Carniato wrote an inflammatory piece explaining that Web Components Are Not The Future . Ryan's piece made the internet rounds, and it seems almost everyone had something to say. I appreciate the more measured responses by Lea Verou and Nolan Lawson It made me reflect on the pains…
Web components + anchor positioning + popover API = I love the platform Published 2024-10-12, About 8 minute read. I want to make a simple popover web component that let's you define an anchor and attach a popover to that anchor. This element should handle some simple things, like an open attribute and clickout/focusout behavior. This used to be super tricky, and you'd have to rely on some…
Web Components and You (part 10): Provider Patterns Published 2024-08-31, About 6 minute read. You won't go very far building web components before you realize that sometimes components need to be aware of each other. This could be to pass and react to state changes, for contextual information, or to send actions or execute methods. There's a few strategies to do this: Using good ol' fashioned DOM…
Web Components and You (part 9): Handling empty slots Published 2024-08-12, About 4 minute read. You won't go very far building web components until you reach an interesting scenario: How do you tell when a slot has stuff in it? Here's an example: Here's a slotted label Attribute and slot Yes, you could say this is the user's fault. They provided both a slot and attribute. But can't we be more…
Web Components and You (part 8): Making a form element web component! Published 2024-04-26, About 5 minute read. One thing you may notice while building web components is that once you put a form input in the shadow DOM it doesn't get automatically recognized by the form it might be in. Also, it doesn't seem to enjoy the priviledges of form elements, like :disabled or :valid CSS psuedo selectors…
Web Components and You (part 7): Let's talk about Shadow DOM mode Published 2024-04-14, About 11 minute read. When you create a shadow root for a web component you have a choice that must make: should it be in "open" or "closed" mode? The MDN docs aren't very explicit about this , but you have to either include "open" or closed" or you'll get an error. The above snippet would error if you tried…
Web Components and You (part 6): Slots and how to use them Published 2024-04-01, About 8 minute read. It's time to talk about the real workhorse of the shadow DOM: slots! Slots enable you to accept markup from the consumer. The elements are styled as if they're in the light DOM, but they're placed where you determine in your web component. This is a pretty well-known patter in frameworks like…
Web Components and You (part 5): Piercing the Shadow DOM Published 2024-03-24, About 7 minute read. In post 1 of this series we showed how the shadow Dom encapsulate styles. Basically, whatever is defined outside the shadow DOM doesn't intrude inside the web component's shadow root. You can then style inside the shadow DOM and not have a care about how this component will look in any context- the…
Web Components and You (part 4): Styles Published 2024-03-11, About 6 minute read. We have options when we want to include CSS in our web components. Each solution has differing levels of support by different browsers, levels of ease of use, and levels of reusability. Here's a few I'd like to share: Inline styles in the shadow root Using Lit's css`` helper Adopting stylesheets Using tailwind two…
Web Components and You (part 3): Simplifying with Lit Published 2024-03-06, About 5 minute read. We've seen that if you use attributeChangedCallback after you've registered your attribute in your static observedAttributes you can have your web components react to changes in its attributes. It's just a lot of wiring up to do, and we're used to easy reactivity in modern frameworks. Also, who wants…
Web Components and You Part 2: Attributes and Reactivity Published 2024-03-01, About 4 minute read. HTML is powerful because it has attributes to customize elements. You can specify why type of input by include type="_type_"` inside the <input /> tag. You can set properties like whether a checkbox is checked by using the checked boolean attribute. So of course custom elements are going to use…
Web Components and You (Part 1): The Shadow Dom Published 2024-02-23, About 6 minute read. Web components are finally becoming truly usable, and more and more and more are using them and touting them. So why should we use them? How do you get started? In this post I hope to give a good answer to the "why" and introduce how to get started quickly with these glorious components. So, why should I…