Thank you, HTMX
Alright, quick start out. I love Jinja2 Templating. I'm a flask lover. I... ok well Django kinda sucks but it has Jinja so whatever. Point being, I like
making just one layout template with insertion blocks for regions for overall site uniformity! If I change the banner, I change it once.
Now, Neocities has no such feature due to no serverside backend! All pages need to be served statically and ALTHOUGH there are a few hacky things
you can do with Java/Typescript, the truth is there's no templating. I attempted to do some stuff with like, reloading the entire base page and then
inserting my new stuff via getElementById(). However, this caused a "blink" when accessing the new page.
So, I'm over myself and out of denial. I'm trying to love static layouts, and one thing that's making it easier to appreciate is HTMX! So at first I was
trying to use it as a SPA/Routing replacement via swap methods (e.g., with the /posts section's prior version just being an html fragment). Truth is, I
shouldn't be using it for that at all! That also had an issue of pushing the url for navigation allowing the end user to accidentally stumble on a plaintext
fragment randomly. Uhoh! What do I do?... not that! Instead, I've rolled out more static layouts for pages which means I can take advantage of the robust
AJAX-like attributes of hx-boost="true"
and hx-preserve="true"
. Notice how elements of the page don't refresh on anchor transitions?
That's thanks to those two! Notably, boost is doing the lifting combined with preserve -- you need both for it to work!
To explain it in short, we have hx-boost="true"
as an attribute for the anchor tag. Adding that makes it so the anchor tag does a bit of a silly
action and replaces the body tag (the head is still swapped normally, HTMX touches the head VERY little). Think of it like a Javascript document replacement, but
no reprocessing required (and, well, no javascript required). Now, it WONT replace things marked to be preserved however! So, we stick preserve on the sections
that we want to stay around. In my case, I put it on my header, footer, left panels, and right panels. Now, it looks like a SPA without any injection or replacement!
Originally I hadn't thought too deeply of how HTMX should operate in my stack, but I've got a much better idea now after that whole bungle. Learning to live, laugh,
and love with static pages and use HTMX to smooth the transitions between hyper documents.
Oh, and P.S., big fan of HTMX. Montana-made, and local to me.
P.P.S, if you want to see how the weird """templating""" I did before worked, checkout my other post about the topic!