I was watching Zach’s presentation at JSHeroes 2023, “The Good, The Bad, and The Web Components”, and a subtle point stuck out to me at the ending of his talk.
When you run into performance problems, it's [because you tried] to reorder these things or combine them in weird ways.
We often see the web’s stack of technologies written together: “HTML, CSS, and JS”. What was reinforced to me from Zach’s presentation is that the ordering of this list of technologies has meaning.
As I noodled with my words on this subject, trying to re-state what Zach had said so clearly, I ended up expressing his point anew in HTML (which was kind of fun).
This is the web’s tech stack, expressed as HTML:
While some might gloss over the semantics of that markup, there’s meaning in there. The ordering is important, that’s why it’s expressed as
<ol>. From Zach:
As Zach goes on to point out, when you run into performance issues on the web it’s often because you’ve glossed over this idea that the ordering of web technologies is important because it’s the fundamental principle behind the design of the web and how browsers work.
One subtle change to that markup — an
<ol> to a
<ul> — would change our entire understanding of how to use these technologies:
Now there’s no guidance as to how to use these technologies. There’s simply three, ordering isn’t important, so use them however you see fit.
Or, again to Zach’s point, what often happens is these elements get combined in ways that change the original idea behind their design:
Or, to mark it up as is common practice today: