hx-pod

Lazarus•twitter.com

Technology

Education

Join me while I learn about web fundamentals and talk at you about it Twitter: @all__hype

Last refreshed: August 16th, 2025 at 5:33 AM ⓘ

Follow this podcast in the Metacast mobile app to refresh it and see new episodes.

Follow on

Apple Podcasts

Spotify

RSS

Podcasts are better in Metacast mobile app

Don't just listen to podcasts. Learn from them with transcripts, summaries, and chapters for every episode. Skim, search, and bookmark insights. Learn more

Episodes

Advanced htmx: hx-sync

Having any weird async ajax request issues? htmx got yer back 🤜 🤛

Feb 28, 2024•11 min•Season 2Ep. 2

Advanced htmx: hx-push-url and hx-replace-url

Push your ajax route to the url bar! Now you've got access to the back button again. .. but what happens when you refresh? Work with the browser history on any htmx request with hx-push-url and hx-replace-url. PUSH it to the Browser history stack: hx-get="/account/details" hx-push-url="true" REPLACE the current browser history stack: hx-get="/account/details" hx-replace-url="true"

Feb 24, 2024•10 min•Season 2Ep. 1

Brain-coding an htmx to-do app V2 - NO MUSIC

Per listener request: Same episode as last, but without the soundtrack! Keeping the other up for posterity's sake.

Feb 22, 2024•31 min

Brain-coding an htmx to-do app

Every developer should have their own custom to-do app. Join me for my journey building this simple app in my head using htmx

Feb 21, 2024•31 min

The basics: Season 1 recap, grouping the attributes

Every attribute so far and where they fit together.

Feb 17, 2024•12 min•Season 1Ep. 16

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 16, 2024•8 min•Season 1Ep. 15

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 12, 2024•28 min

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 09, 2024•3 min•Season 1Ep. 14

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 06, 2024•8 min•Season 1Ep. 13

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 03, 2024•4 min•Season 1Ep. 12

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: ...

Feb 01, 2024•4 min•Season 1Ep. 11

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 12m https://www.youtube.com/watch?v=2hMrk7A8Wf0 2. Mostly Technical Podcast "High Floor vs. High ceiling" https://mostlytechnical.com/episodes/13-the-sql-injection-slide-with-sam-selikoff#t=9m6s

Jan 30, 2024•7 min

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 28, 2024•7 min•Season 1Ep. 10

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•8 min

The basics: hx-on (htmx 1.x -> 2.0)

ALERT ALERT hx-on is changing tomorrow! ...sort of 1->2 guide: https://v2-0v2-0.htmx.org/migration-guide-htmx-1/ hx-on attribute: https://htmx.org/attributes/hx-on/

Jan 25, 2024•6 min•Season 1Ep. 9

The basics: hx-confirm

What, you're too good for a regular javascript confirmation? Fine https://htmx.org/examples/confirm/

Jan 24, 2024•4 min•Season 1Ep. 8

Bonus: htmx and gatekeeping

Who gatekeeps the Gatekeepers? the coast guard? Thank you to rick @maverism for tweeting out the podcast!

Jan 23, 2024•8 min

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 23, 2024•5 min•Season 1Ep. 7

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-oob On 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> ........

Jan 22, 2024•5 min•Season 1Ep. 6

The basics: hx-swap-oob

This is a new idea: let your response decide its own target(s)! <div id="my-update-div" hx-swap-oob="true">Updated html</div> <div id="my-update-div-2" hx-swap-oob="true">More updated html elsewhere on the page</div>

Jan 22, 2024•6 min•Season 1Ep. 6

The basics: hx-include

Uh oh. Your inputs are outside a <form> tag, what's to be done?

Jan 18, 2024•4 min•Season 1Ep. 5

The basics: hx-post

Want to use POST requests in ajax, and submit forms from anywhere on the page? As promised in the episode, here are three ways to set up your CSRF token headers: 1. Like normal in your forms: <input type="hidden" name="_token" value=""/> (the regular html way works with htmx, of course) 2. Javascript <script> document.body.addEventListener('htmx:configRequest', (e) => { e.detail.headers['X-CSRFToken'] = ''; }) </script> (add this to the bottom of your </body> so that E...

Jan 17, 2024•8 min•Season 1Ep. 4

← Prev

Hosted on Transistor

For the best experience, listen in Metacast app for iOS or Android