Setting up my Development Environment
Whenever I get a new MacBook, I take joy in setting in up from scratch. Over the years, I’ve become particular about how I like my machine to behave, from trusted applications, to handy shortcuts.
Component Odyssey Articles
Learn how to easily build, manage, and distribute your component library in an ever-increasing complex web development landscape
Latest posts
Making no-spoilers more accessible
no-spoilers was sorely lacking with respect to accessibility. Thanks to the lessons learned from Scott's article, I was able to make some much needed improvements.
Reduce Your App’s Memory Consumption With Event Delegation
Learn how to improve you're site's performance and memory consumption with event delegation.
The Two Lines of CSS That Tanked Performance (120fps to 40fps)
Learn WCs felt so sluggish on Firefox that I disabled the background animation for all users. Turns out, fixing it took changing two lines of CSS.
Improving the Screen Reader Experience for Learn WCs
I refactored markup, wrangled with browser quirks, and hid elements all in the hopes of improving the screen reader experience
How to be Notified When Images Get Loaded in HTML
This is how you can be notified when images have been loaded in HTML within a DOM subtree.
How Does the Browser Render HTML?
Let's take a high-level overview of how the browser renders your HTML
Using Document Fragments for Performant DOM Operations
Let's see how we can use document fragments to perform DOM operations in a performant way.
Trying to Use Fewer Dependencies
Can we reduce our reliance on third-party code?
masonry-gallery Web Component
A quick and simple HTML web component to render a masonry layout.
What is a Component Library and Should You Build Your Own?
Before diving into building you're own component library from scratch, let's have a look at the different types of component libraries out there, and the benefits and drawbacks of using them.
Wait, what's the difference between :host, :host(), and :host-context()?!
There are three different, yet similar selectors available in web components, :host, :host(), and :host-context(). Let's look at the difference between them.
Refactoring a scroll-driven animation from JavaScript to CSS
Cut down on the amount of JavaScript you ship by refactoring a scroll-linked animation from JavaScript to CSS.
Convince Your Boss
Convince your boss that Component Odyssey is a worthy investment in your and your team’s development.
The Dilemmas You'll Face When Creating a Component Library
Building a component library can be complicated, let's explore some of the dilemmas you'll face when creating one.
Using Heaps of Cutting Edge CSS Features to Build a Progress Indicator
Learn how to use cutting edge CSS features like animation-timeline, color-mix, and trigonometric functions to build a sleek progress indicator.
autosize-textarea Web Component
A quick and simple HTML web component to give your textareas the ability to grow with its value.
Navigating Your Component Journey with Component Odyssey
There are dozens reasons to build a component library, but it's not an easy task. Component Odyssey will help you navigate your component library journey.
Gather User Feedback On Any Website with Hermes WC
Nothing is more valuable than direct feedback from your users. Hermes WC is an open source package built on web component that offers you a quick and easy way to learn what your users are thinking.
Writing Components That Work In Any Frontend Framework
Web components let developers write interoperable components, but at the cost of lots of boilerplate. Learn how you can write components that work in Svelte, Vue, React, and other frameworks, with minimal boilerplate.
Introducing Sandpack Lit: The Universal CodeSandbox
Learn how you can run entire web applications within your own web apps, regardless of whether you're using Svelte, Vue, React, or any other JavaScript framework