All Episodes
Displaying episodes 1 - 30 of 73 in total
Software that lasts, a story
My father in law runs his business using a CAD app running on a floppy disk. No, I'm not kidding
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Building a framework on top of htmx (Sprig) - with htmx contributor Ben Croker
Ben Croker is building Sprig for CraftCMS, a reactive framework for CraftCMS built using htmx.As one of the top contributors to htmx, Ben also shares his tips on contr...
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Empowering Junior Devs with htmx - Sheena O'Connell
An HTMX success storyhttps://www.sheenaoc.com/articles/2024-06-30-htmxSheena joins to talk about how she teaches her junior devs to teach noob devs how to become junio...
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Karson's Korner - A conversation on practice before theory, hx-swap-oob, and optimistic uis with htmx creator Carson Gross
Practice over theory. hx-swap-oob. optimistic uis. the secret to making memes
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Building a modal, PART 2
tag is greathttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
The advantage of being dumb
Ignorance is bliss
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
PRO: Produce, Review, Optimize - marketing with htmx ceo John Dietrich
John says what's up with marketing for small businessesYoutube: https://www.youtube.com/watch?v=S7BX2ocn7XM
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
How to build a modal with htmx
What's an efficient/great way to add modals using htmx?
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Anthony Alaribe on building a company with htmx and leveraging the browser
Anthony's talk at Big Sky Dev Con:https://www.youtube.com/watch?v=uVKSmR_hBMs&t=9142sThis episode on youtube (i.e. see faces)https://www.youtube.com/watch?v=LQfKmpx7QZ8
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Large table pattern using htmx
Mentioned, how to submit and reset a form on success using htmx:This assumes the last row is the add form, and places the newly added item directly above it.
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx headers: Season 3 Recap
"We've done them all now"All headers grouped===========> REQUEST HEADERS======> Flags*HX-Boosted - was it a boosted link*HX-Request - is it an htmx request*HX-History-...
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
I went to Big Sky Dev Con 2024 so you don’t have to
i went to #BSDC2024 (not an htmx con) so you don't have to. here's my own recap of all the talksEvery talk is available to watch at: https://bigskydevcon.com1:26 - The...
![](https://img.transistor.fm/z4DVegTqlFkY_4RZStFbnyddKsr0WriaXfrBZZkcFA4/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS8yNzAz/MTI4MWE3NzVkMDgw/MDllNzAzZDllMGU0/NzcyNy5qcGVn.webp)
Htmx response headers: HX-Trigger, HX-Trigger-After-Swap, HX-Trigger-After-Settle
Use this response header to send event trigers to ANY client side browser event (javascript, htmx, custom, etc)HX-Trigger - as soon as response receivedHX-Trigger-Afte...
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx response headers: HX-Reselect
{ "HX-Reselect": "#one-div-inside-html" }
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Is optimistic UI the "final boss" of htmx? (and livewire, unpoly, liveview, hotwire, etc)
This episode explores what an optimistic ui might look like in htmx. Also: is it what we want to do? Is it even possible? Or is it incompatible with the idea of having...
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx response headers: HX-Retarget
{ "HX-Retarget": "#my-special-target" }
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx response headers: HX-Reswap
Override your "hx-swap=" attribute. Correct your hx-swap mistake! Do it now!!!
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx response headers: HX-Refresh
{ "HX-Refresh": "true" }
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx response headers: HX-Push-Url and HX-Replace-Url
Decide from your server side what url the user sees!https://htmx.org/headers/hx-push-url
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
A conversation with Tom from Reddit: Building production apps using htmx
Speaking with a prolific developer who recently switched from React to htmx
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx response headers: HX-Location and HX-Redirect
Redirect your users to a new page from your back-end server in SPA-mode (no refresh for them)https://htmx.org/headers/hx-location/
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx request headers: HX-History-Restore-Request
This header is to make sure your system loads the full page when 1) You are suing hx-push-url to work with the url bar2) Users click the back button.3) The full page c...
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx request headers: Hx-Current-URL
The htmx request header that tells youEXACTLY where the user is making the request fromThe full url string with all ids and params
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Stop taking shortcuts
A case for taking the extra steps. It's a good thing
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx request headers: HX-Prompt
hx-prompt="what's your favorite size turtle?"Request Headers:Hx-Prompt: small
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx request headers: Hx-Boosted
How can your server tell if its a regular link click or an hx-boost SPA-mode link click??I'll tell you everything about it in these 5 minutes!
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx request headers: Hx-Target
Let's your server know what the id is of the hx-target!You need 2 things to send this request header:1. Use the attribute: hx-target="some_id"2. Use a DOM id as the ta...
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx request headers: Hx-Trigger and Hx-Trigger-Name
You can use these headers to conditionally branch your response based on *which element* the request was triggered fromexample of format:Request Headers:Hx-Trigger: se...
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
Htmx request headers: Hx-Request
An example in the wild: The Laravel blade documentation:https://laravel.com/docs/11.x/blade#rendering-blade-fragments
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)
What's next on the podcast?
We're (Me're) 43 episodes in. What's next?
![](https://img.transistor.fm/pO06_aJo-k-yRHTFqb_gkDWr1KVKtzWb6s5q7Hgv520/rs:fill:800:800:1/q:60/aHR0cHM6Ly9pbWct/dXBsb2FkLXByb2R1/Y3Rpb24udHJhbnNp/c3Rvci5mbS84MTJm/ZDY2NmU4YTJmY2Ew/ZWQxYjFhMGVjMmJj/ZjU2YS5wbmc.webp)