I’ve previously written about a basic experience with Web Components and not getting it, but I think I get it now. In this (quite long) post, I’m going to go over how I built Ghola, a palette generator for developers. It’s entirely built with custom elements. It has almost no dependencies, runs fast, and was fun to work on.

Andy Croll asked on Mastodon for good/bad/indifferent experiences at previous RailsConfs’ and I wrote him a wall of text in my email client that I instead turned into this blog post.

A while back, Joe Sondow posted a great thread on Mastodon that is a perfect example of why you should split a complex job up into several individual ones. Basically, Worf was experiencing an error that caused Riker to post more than he should have.

In two previous posts, I explored the custom elements part of Web Components, concluding that the lifecycle callbacks provide value beyond rolling your own. I want to look at the other two parts of Web Components, which are the Shadow DOM and the <template> tag. These provide a templating mechanism that doesn’t work like any other web application templating environment and is incredibly limiting to the point I must be just not understanding.

Feedback from my previous post on Web Components was that the lifecycle callback methods like connectedCallback are actually what makes custom elements useful. After exploring this more, I can see why and want to demonstrate.

People saying that “Web Components are having a moment” should look at the difference between Web Components and just using the browser’s API. They are almost identical, so much so that I’m struggling to understand the point of Web Components at all.

Let’s take Jim Neilsen’s user avatar example and compare his implementation to one that doesn’t use Web Components. This will help us understand why there is so much client-side framework churn.

Performing a resilient operation on bulk data can be challenging, especially if the operation relies on a third party. You can safely do this by fanning out the work to idempotent background jobs that operate on only one piece of data at a time. Those jobs can retry independently as needed, making the entire operation more easy to manage. This post will show an example of how that works and why you might want to use this pattern.