June 26, 2024
TL;DR Today I am starting a challenge to release an open-source web component every couple of weeks for the next year as part of the HotFX project.
Web components are pretty rad. Of course, developers have been building open source code and reusable components for decades — but now they, like, actually work pretty well. (If you haven’t already heard about web components, there’s a pretty good introduction on web.dev.)
For a variety of reasons, custom elements have been somewhat slow to take off and most web developers appear to be staying in their ecosystems, building React components or Vue components and the like. I can understand the inertia because until the last few years this technology has not felt ready for prime time, and well, when you’re building React apps all day long, it probably just makes sense to build another React component.
Web components are just kind of better, though. You can use them in React, or Vue or pretty much any other framework. Or in just plain HTML without a framework (imagine that). It’s pretty great tech and since they’re built into the browser, they’re here to stay and your code will be reusable forever without any dependency hell.
I would say the biggest problem with web components is that there aren’t enough of them that I want to use. So, today, I’m starting a challenge for myself: release a new open-source web component every couple of weeks for an entire year.
There are a handful of frontend libraries that have embraced web components to build some pretty great stuff. However, most of them are using web components to build design systems, elaborate meshes of interconnected components that all rely on each other. To use these components, it’s all or nothing.
Design systems are great for big companies like Adobe or Alaska Airlines that want to keep many websites or products adhering to a consistent look and feel. But for me as an independent developer, they’re not helpful at all.
Shoelace is awesome and it will soon be even more awesome. You can style all the elements with an integrated theme or cherry pick just the ones you want. Now that’s more like it.
Often, I just want a bit of functionality and I could save some work by
not recreating it from scratch every time. A good example of a reusable
standalone element is something like the <clipboard-copy>
element. It’s so easy to just drop an element like that that into
your page when you need a piece of logic. And you can still easily style
it however you want.
The first component in this series, which I am releasing today, is one that we can all recognize. It’s one of the most overused UI elements out there: a hamburger menu. Frontend devs have built these from scratch so many times that it has become a tragic joke—especially when they don’t work very well.
Helping myself and other devs make things that work exceptionally well is another goal of releasing these as open source. To further the educational part of this project, I have also put the source code on a web page that presents extensive comments in a readable format, a nod to the tradition of literate programming.
Helping junior devs get a detailed understanding of these components will enable them to modify the code for their own specific needs. If you don’t like how my hamburger element works, well feel free to just change it and make your own version.
Interestingly, Shoelace creator Cory LaViska decided not to create this same component, saying that he didn’t want to limit site navigation to this one paradigm. I would say if there’s another way of doing site navigation, let’s make a component for that too.
Keeping components single-purpose and standalone is part of my minimalist web component philosophy. Hot Page is all about unique designs and rapid prototyping. Having the skills to roll your own JavaScript is an important part of that work flow and that’s what I hope people can pick up from this project.
I will be releasing these components as part of a project I’m calling HotFX. Crucially, HotFX is not so much a library as a collection. Each of the components will work on their own and independently from the others. I imagine that most developers will incorporate one component and leave the rest on the shelf — and that’s exactly the idea. To further that, these components will be separate NPM packages with separate versioning, so they’re easy to mix and match as needed without any dependency problems.
I suppose that it’s worth mentioning now that the term “web component” is really quite amorphous. It’s a suite of technologies and custom HTML elements are just one part of it. For this coding challenge, I don’t plan to limit myself to just custom elements, and some components may be just CSS or just a bit of JavaScript with a small, well-defined functionality.
Your feedback and contributions are always welcome through GitHub or via email (my first name at hot.page). I hope you’ll follow along and maybe find one of these useful for your own sites. Until next week!