hx-pod
Lazarus
Join me while I learn about web fundamentals and talk at you about it
Twitter: @all__hype
Twitter: @all__hype
Episodes
Mentioned books
Feb 3, 2024 • 4min
The basics: hx-params
ok, you are submitting a form.. but what if you don't want to submit the whole thing?Use what only i call "the mysql selector of htmx"hx-params="first_name, last_name, state"or what if you wanted to exclude a field?hx-params="not secret_field"
Feb 1, 2024 • 4min
The basics: hx-vals
How do you feel about setting your request values right there inline?STATIC<button hx-get="/my/weather/data" hx-trigger="click" hx-vals='{"location": "01245"}'> Click for weather in one static location</button>DYNAMIC<button hx-get="/my/weather/data" hx-trigger="click" hx-vals='js:{location: document.getElementById("zipcode").value}'> Click for weather in one static location</button>OR<button hx-get="/my/weather/data" hx-trigger="click" hx-vals='js:{location: someJavascriptCalculationFunction()}'> Click for weather in one static location</button>
Jan 30, 2024 • 7min
Bonus: The Single Source of Truth
Your built-in advantage of building html on the server: everything important is already there.Here are the two server/client mental model discussions referenced in the audio:1. Primagean "The truth about HTMX"Front end backend s=discussion starts around 12mhttps://www.youtube.com/watch?v=2hMrk7A8Wf02. Mostly Technical Podcast"High Floor vs. High ceiling"https://mostlytechnical.com/episodes/13-the-sql-injection-slide-with-sam-selikoff#t=9m6s
Jan 28, 2024 • 7min
The basics: hx-boost
How can you change your entire site to be faster and snappier with just one attribute?How can you recreate the entire libraries of turbolinks and pjax in a single line?How can you make your entire site essentially an SPA?<body hx-boost="true">
Jan 25, 2024 • 8min
Bonus: HOWL (Hypermedia On Whatever you'd Like)
Or, "How I learned to stop worrying and stack this stack on all other stacks."Essay on HOWL from htmx.org:https://htmx.org/essays/hypermedia-on-whatever-youd-like/
Jan 25, 2024 • 6min
The basics: hx-on (htmx 1.x -> 2.0)
ALERT ALERT hx-on is changing tomorrow!...sort of1->2 guide:https://v2-0v2-0.htmx.org/migration-guide-htmx-1/hx-on attribute:https://htmx.org/attributes/hx-on/
Jan 24, 2024 • 4min
The basics: hx-confirm
What, you're too good for a regular javascript confirmation?Finehttps://htmx.org/examples/confirm/
Jan 23, 2024 • 8min
Bonus: htmx and gatekeeping
Who gatekeeps the Gatekeepers? the coast guard?Thank you to rick @maverism for tweeting out the podcast!
Jan 23, 2024 • 5min
The basics: hx-put, hx-patch, and hx-delete
What on earth are PUT PATCH and DELETE and why would I use them instead of POST?Well, which do you like better?A) <button hx-delete="/articles/1">B) <button hx-post="/articles/1/delete">
Jan 22, 2024 • 5min
Bonus: A real-world example of using hx-swap-oob
How to load a bunch of links to the after the page loads and place them anywhere you want with hx-swap-oobOn site:<div hx-get="/load-podcast-links" hx-trigger="load"></div>In response:<div id="placement-1" hx-swap-oob="true">Placement 1 text and link</div><div id="placement-2" hx-swap-oob="true">Placement 2 text and link</div><div id="placement-3" hx-swap-oob="true">Placement 3 text and link</div>.....
