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.
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.
I refactored markup, wrangled with browser quirks, and hid elements all in the hopes of improving the screen reader experience
A quick and simple HTML web component to render a masonry layout.
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.
There are three different, yet similar selectors available in web components, :host, :host(), and :host-context(). Let's look at the difference between them.
Cut down on the amount of JavaScript you ship by refactoring a scroll-linked animation from JavaScript to CSS.
Convince your boss that Component Odyssey is a worthy investment in your and your team’s development.
Building a component library can be complicated, let's explore some of the dilemmas you'll face when creating one.
Learn how to use cutting edge CSS features like animation-timeline, color-mix, and trigonometric functions to build a sleek progress indicator.
A quick and simple HTML web component to give your textareas the ability to grow with its value.
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.
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.
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.
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