hx-pod cover image

hx-pod

Latest episodes

undefined
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>.....
undefined
Jan 22, 2024 • 6min

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>
undefined
Jan 18, 2024 • 4min

The basics: hx-include

Uh oh. Your inputs are outside a <form> tag, what's to be done?
undefined
Jan 17, 2024 • 8min

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 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)
undefined
Jan 14, 2024 • 6min

The basics: hx-swap

You got your data back and your target, now where does it fit?
undefined
Jan 13, 2024 • 2min

Trailer: The premise of this podcast is that you people are sick

Is this really learning? It might be.
undefined
Jan 13, 2024 • 8min

The basics: hx-trigger

What would "tailwind but for javascript" feel like?
undefined
Jan 10, 2024 • 7min

The basics: hx-get and hx-target

What if your browser could skip the json-processing step of an api?
undefined
Jan 9, 2024 • 6min

Bonus: Considering your legacy (code)

Consider this: you have to add a fancy feature to a legacy app. Who you gonna call?

Get the Snipd
podcast app

Unlock the knowledge in podcasts with the podcast player of the future.
App store bannerPlay store banner

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode

Save any
moment

Hear something you like? Tap your headphones to save it with AI-generated key takeaways

Share
& Export

Send highlights to Twitter, WhatsApp or export them to Notion, Readwise & more

AI-powered
podcast player

Listen to all your favourite podcasts with AI-powered features

Discover
highlights

Listen to the best highlights from the podcasts you love and dive into the full episode