24 Feb 2021  notes

Modernizing 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

Webmentions & Comments

Copyright © Paramdeo Singh. Built with Jekyll and ☕️ in Guyana. All Rights Reserved.

Last Site Build on Mon, 02 Aug 2021 12:05:40 -0400

1MB Club Badge

Paramdeo Singh Guyana

Riding the wave of consciousness in this treacherous mortal sea.

Technology Design Strategy Literature Personal Blogs