Latest Microblog Entry

24 February 2021

Modernized my Bookshelf with HTMx

I’ve always been a huge fan of htmx  for it’s straightforward empowerment of the HTML specification. For those who may not know, htmx allows you to “access AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext”.

I never got around to finding a good use case for htmx in a personal capacity, but recently I wanted to revamp my Bookshelf page; which was initially built using a combination of Tabs and Modals (as afforded by Bootstrap) in order to group book covers and display their summaries.

It wasn’t a bad setup, however in my opinion it wasn’t very elegant because the content of the inactive tabs would also load within the page itself, even though they were hidden. This resulted in a larger request size since all the cover images would be included.

There were obvious scaling issues that would appear as the number of books increased. I needed to refactor the landing page with that in mind, whilst keeping the other pages for each title range separate — so that they could be swapped into the DOM intelligently and in keeping with the tabbed concept.

Immediately htmx came to mind, and it’s so simple to use that I implemented the fix in less than 10 minutes. Each alphabetical title range now resides on it’s own page (five in total), and Jekyll populates the content within them from the .yml data files at build time as it normally would.

The main difference is that now the Bookshelf landing page only displays the first set of titles; with the content from the other pages loaded only when they are requested. All this is done without leaving the existing URL, as the innerHTML of the parent container is the only element that’s interacted with.

The result is that the Bookshelf page went from ~150 lines of HTML to ~30 lines of HTML, and only the number of images for the first of five categories are initially loaded, versus all of the images being loaded in the previous iteration.

It’s a lovely way for me to implement the desired functionality and also pay homage to htmx which in my opinion represents what the KISS  methodology is all about. While not forgetting to mention its distant cousin Turbolinks , htmx is one of the greatest innovations in Frontend Development to-date.

I shall gracefully steal their haiku and place it here for extra style points:

javascript fatigue:

longing for a hypertext

already in hand

All Microblog Entries 

Latest Blog Posts

01 February 2021 • 6 min read

CSS Cache-Busting in BunnyCDN using Jekyll Variables

Automatically fetch fresh BunnyCDN files at build time using Jekyll variables.

21 August 2020 • 6 min read

Enable BunnyCDN for Asset Delivery in Jekyll

Offload assets and images using BunnyCDN for a more scalable Jekyll website.

25 June 2020 • 9 min read

Tips for Playing Better Chess

A few precepts I've learnt along the way that have helped improve my Chess.

23 June 2020 • 13 min read

From JAMstack to RAMstack

Use Varnish and Netlify to hyper-charge static sites for cents on the gigabyte.

04 April 2020 • 3 min read

Using Netdata for Desktop Stats

It would be really neat to have an ultra-detailed overview of system metrics. Cue Netdata.

All Blog Posts