hx-pod
128 episodes — Page 3 of 3
Celebrate your little victories
bonusWhen you make your life easier, that's a win.
S2 Ep 2Advanced htmx: hx-sync
Having any weird async ajax request issues? htmx got yer back 🤜 🤛
S2 Ep 1Advanced 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"
Brain-coding an htmx to-do app V2 - NO MUSIC
bonusPer listener request: Same episode as last, but without the soundtrack!Keeping the other up for posterity's sake.
Brain-coding an htmx to-do app
bonusEvery developer should have their own custom to-do app. Join me for my journey building this simple app in my head using htmx
S1 Ep 16The basics: Season 1 recap, grouping the attributes
Every attribute so far and where they fit together.
S1 Ep 15The 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.
A conversation with chat gpt, aka the htmx shillbot 2000
bonusNOTE: 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.
S1 Ep 14The 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/
S1 Ep 13The 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!
S1 Ep 12The 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"
S1 Ep 11The 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>
Bonus: The Single Source of Truth
bonusYour 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
S1 Ep 10The 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">
Bonus: HOWL (Hypermedia On Whatever you'd Like)
bonusOr, "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/
S1 Ep 9The 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/
S1 Ep 8The basics: hx-confirm
What, you're too good for a regular javascript confirmation?Finehttps://htmx.org/examples/confirm/
Bonus: htmx and gatekeeping
bonusWho gatekeeps the Gatekeepers? the coast guard?Thank you to rick @maverism for tweeting out the podcast!
S1 Ep 7The 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">
S1 Ep 6Bonus: A real-world example of using hx-swap-oob
bonusHow 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>.....
S1 Ep 6The 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>
S1 Ep 5The basics: hx-include
Uh oh. Your inputs are outside a <form> tag, what's to be done?
S1 Ep 4The 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 EVERY request gets the right headers. I love this one!)hx-headers<div hx-post="/your-endpoint" hx-headers='{"X-CSRF-Token": "YourCSRFTokenHere"}'> <!-- Your content --> </div>(add this attribute along with your hx-post)
S1 Ep 3The basics: hx-swap
You got your data back and your target, now where does it fit?
S1 Ep 1Trailer: The premise of this podcast is that you people are sick
trailerIs this really learning? It might be.
S1 Ep 2The basics: hx-trigger
What would "tailwind but for javascript" feel like?
S1 Ep 1The basics: hx-get and hx-target
What if your browser could skip the json-processing step of an api?
S1 Ep 1Bonus: Considering your legacy (code)
bonusConsider this: you have to add a fancy feature to a legacy app. Who you gonna call?