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 17, 2024 • 12min
The basics: Season 1 recap, grouping the attributes
Every attribute so far and where they fit together.
Feb 16, 2024 • 8min
The basics: hx-select
What if.. you wanted just a part of the html from the response?In a perfect world, you could just use a simple css selector to get only what you need and filter everything else out.Well, welcome to the perfect world -- hx-select style.
Feb 12, 2024 • 28min
A conversation with chat gpt, aka the htmx shillbot 2000
NOTE: This is some Star Trek computer shit. You gotta hear it to believe it BIG interview today.We delve into where htmx fits in the broader dev world, how we might build a calendar with htmx, and even how to build and publish our own hx-load-class attribute.
Feb 9, 2024 • 3min
The basics: hx-preserve
Updating a chunk of the DOM is easy -- but what if you wanted to leave one element alone?<div id="leave-me-alone" hx-preserve>Content preserved</div>Content will NOT be swapped out in the request, as long as the id in the request data matches.https://htmx.org/attributes/hx-preserve/
Feb 6, 2024 • 8min
The basics: hx-indicator and the special htmx loading classes
Do you ever want to let the user know you are loading something?Of course you do. Just add the htmx-indicator class to any element (loading div, svg, gif), and the parent requests will make it show up.We discuss the magic you get for free in htmx and the way to customize it!
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/
