Progressive enhancement of static sites with HTMX

HTMX is pretty neat and has quickly become one of my top contenders for frontend technologies for future projects. While it primarily is meant for more complex and dynamic sites and apps than this blog, even a website built with a static site generator like Zola can benefit. While Static site generators are great, and offer several upsides, a downside is the user experience compared to more complex frontend applications. A collection of linked documents is how the web works, but navigating between them forces the browser to clear the current view and load the new page. On a fast connection, this is quite seamless, but on a slower connection or device, it can be a bit jarring. HTMX solves this with the hx-boost-property, which automatically enhances all anchor tags and forms (the hypermedia controllers of HTML), overriding the default operation with an AJAX-call that replaces only the content of the page, and not the page itself. The result is smoother navigation, no flash of unstyled content and no clearing of the whole page for each click on a link. And in cases where the client has deactivated JavaScript, the fallback is of course the default behavior, meaning the site works just as it should.

For this site, I put hx-boost="true" on the body tag, as I wanted the whole site boosted. This initially broke the light/dark-mode toggle, as the content is reloaded, but not the javascript, resulting in a missing event-listner. The good people behind HTMX had luckily thought of such things, as the hx-preserve-attribute prevents single elements from being replaced. This is done via the id-attribute, so I had to set a unique and unchanging id on the toggle.

Seeing how HTMX bridges the gap between traditional hypermedia and modern user experiences gives me hope for future projects. Leveraging the strengths of HTML, HTTP and going with the grain of the web, while not compromising on the usability of the product feels very powerful.