Out With the JS, In With the HTML

I’ve been posting about how you can make lots of HTML pages and leverage navigations over in-page, JS-dependent interactions. Now I’m gonna post another example. On my icon sites, I have a little widget that allows you to resize the icons you’re looking at. Previously, I implemented this functionality as a web component that looked something like this: <icon-list size="md"> <a href=""><img src="" width="128" height="128" /></a> <a href=""><img src="" width="128" height="128" /></a> <!-- more --> </icon-list> The size attribute corresponded to an enumeration like sm | md | lg | xl which mapped to actual pixel dimensions like 64×64 or 512×512. When the little widget was clicked to render icons at a different size, JavaScript changed the size attribute on the <icon-list> custom element. From there, the web component’s JS took over changing the dimensions of the children <img> elements, their src attributes, etc. It all worked pretty well. However, because that was a client-side solution…