Making no-spoilers more accessible

no-spoilers was sorely lacking with respect to accessibility. Thanks ot the lessons learned from Scott's article, I was able to make some much needed improvements.

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

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