Learning HTMX

I am exploring htmx. I learned Alexander Petros was a former colleague of mine and he is now a core developer for htmx. We've never met, but we correspond on slack. I reached out to him after watching his talk at Big Sky Con and shared with him my admiration for his work.

Aram Zucker-Sharff did a little fun project, Song Obsessed using htmx. He mentioned to me that he wanted to explore htmx and the project was a cool fun way to understanding it.

I am reading through Hypermedia Systems by Carson Gross, Afam Stepinkski, Deniz Aksimsek and Wm Talcott. I listened to Carson Gross on Syntax.fm here as he talked about building htmx. As I'm collecting notes on it, I am excited to be learning some cool stuff. The web doesn't seem so dead after all.

Goals

• Rebuild sarajstreeter.com in htmx
• phase out nextjs and react for htmx
• it's a simple static one page site. Nextjs is overkill.

TIL December 2024

• two attributes that enables htmx:
  • hx-get
  • hx-swap

Skip code block ▼

<button hx-get=/users hx-swap=outerHTML>View Users</button>

• hx-swap=outerHTML means "replace outerHTML which means the button" or other words, replace button with ul list

2025-01-06

I recall a conversation I had about the use of htmx, or rather where/when to use it. A site that doesn't have much interactivity is a good candidate for htmx because static sites don't need a shadow dom, or a thick client. Swapping out html should not rely on a data structure, like JSON.

2025-01-06

hx-get and swapping out html partials on response to a user interaction or event is a similar idea to Astro's Island Architecture.
Islands architecture | Docs, Understanding Astro islands architecture - LogRocket Blog, and Server Islands | Astro

• Astro would be swapping out react components
• this pattern in swapping out components has a benefit in rendering a smaller footprint and render cycles
• Would it create a thinner client?