Best Optimized HX Podcasts (2024)

Anthony's talk at Big Sky Dev Con: https://www.youtube.com/watch?v=uVKSmR_hBMs&t=9142s This episode on youtube (i.e. see faces) https://www.youtube.com/watch?v=LQfKmpx7QZ8By Lazarus

1
Large table pattern using htmx 19:04

Play Pause

18d ago19:04

19:04

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

1
Htmx headers: Season 3 Recap 11:10

20d ago11:10

11:10

"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-Restore-Request - is it a back button restore request ======> Auto-sent variables *HX-Current-URL - current url page is at *HX-Target - id of target if has id *HX-Trigger-Name -…

1
I went to Big Sky Dev Con 2024 so you don’t have to 54:08

28d ago54:08

54:08

i went to #BSDC2024 (not an htmx con) so you don't have to. here's my own recap of all the talks Every talk is available to watch at: https://bigskydevcon.com 1:26 - The htmx guide to gonzo open source marketing by Carson Gross 8:23 - The Life & Death of HTMX by Alex Petros 13:29 - Hypermedia Middleware: Introducing Walrus by Ben Damman 17:14 - htm…

1
Htmx response headers: HX-Trigger, HX-Trigger-After-Swap, HX-Trigger-After-Settle 10:58

1M ago10:58

10:58

Use this response header to send event trigers to ANY client side browser event (javascript, htmx, custom, etc) HX-Trigger - as soon as response received HX-Trigger-After-Swap - after new html is swapped in HX-Trigger-After-Settle - after new html is settled and processed by browser single event HX-Trigger:event multiple events HX-Trigger:event1, e…

1
Htmx response headers: HX-Reselect 4:36

1M ago4:36

4:36

{ "HX-Reselect": "#one-div-inside-html" }By Lazarus

1
Is optimistic UI the "final boss" of htmx? (and livewire, unpoly, liveview, hotwire, etc) 30:46

1M ago30:46

30:46

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 the dom as the true application state? Original tweet: https://x.com/noahflk/status/1795758603577545035 DHH responses: https://x.com/dhh/status/1796163806650868149 Htmx guy responses…

1
Htmx response headers: HX-Retarget 5:35

1M ago5:35

5:35

{ "HX-Retarget": "#my-special-target" }By Lazarus

1
Htmx response headers: HX-Reswap 4:30

2M ago4:30

4:30

Override your "hx-swap=" attribute. Correct your hx-swap mistake! Do it now!!!By Lazarus

1
Htmx response headers: HX-Refresh 2:51

2M ago2:51

2:51

{ "HX-Refresh": "true" }By Lazarus

1
Htmx response headers: HX-Push-Url and HX-Replace-Url 7:38

2M ago7:38

7:38

Decide from your server side what url the user sees! https://htmx.org/headers/hx-push-urlBy Lazarus

1
A conversation with Tom from Reddit: Building production apps using htmx 36:22

2M ago36:22

36:22

Speaking with a prolific developer who recently switched from React to htmxBy Lazarus

1
Htmx response headers: HX-Location and HX-Redirect 7:46

2M ago7:46

7:46

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/By Lazarus

1
Htmx request headers: HX-History-Restore-Request 8:48

2M ago8:48

8:48

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 bar 2) Users click the back button. 3) The full page cached history snapshot isn't there Useful links mentioned: https://github.com/bigskysoftware/htmx/issues/497 https://htmx.org/docs/#history…

1
Htmx request headers: Hx-Current-URL 4:35

2M ago4:35

4:35

The htmx request header that tells you EXACTLY where the user is making the request from The full url string with all ids and paramsBy Lazarus

1
Stop taking shortcuts 12:10

2M ago12:10

12:10

A case for taking the extra steps. It's a good thingBy Lazarus

1
Htmx request headers: HX-Prompt 6:09

2M ago6:09

6:09

hx-prompt="what's your favorite size turtle?" Request Headers: Hx-Prompt: smallBy Lazarus

1
Htmx request headers: Hx-Boosted 5:19

2M ago5:19

5:19

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!By Lazarus

1
Htmx request headers: Hx-Target 4:27

2M ago4:27

4:27

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 target: some_id needs to be an id, not another css selectorBy Lazarus

1
Htmx request headers: Hx-Trigger and Hx-Trigger-Name 6:26

2M ago6:26

6:26

You can use these headers to conditionally branch your response based on *which element* the request was triggered from example of format: Request Headers: Hx-Trigger: search_input Hx-Trigger-Name: searchBy Lazarus

1
Htmx request headers: Hx-Request 6:11

3M ago6:11

6:11

An example in the wild: The Laravel blade documentation: https://laravel.com/docs/11.x/blade#rendering-blade-fragmentsBy Lazarus

1
What's next on the podcast? 7:26

3M ago7:26

7:26

We're (Me're) 43 episodes in. What's next?By Lazarus

1
Wordpress and htmx: A conversation with developer Andrew Rhyand 49:24

3M ago49:24

49:24

We talk integrating htmx with Wordpress! Andrew Rhyand https://andrewrhyand.com/ Mentioned links: HTMX movies demo: (very slick & educational) https://htmx.andrewrhyand.com/ Author of the Wordpress/Inertia Adapter: https://github.com/boxybird/inertia-wordpress Alpine/Livewire in Wordpress: https://github.com/boxybird/morph…

1
Advanced htmx: Season 2 recap, grouping the 13 advanced attributes 20:04

3M ago20:04

20:04

Advanced htmx: Recap & grouping each of the 13 advanced attributes we went over this "season" This means we have now gone through every attribute! (not counting extensions) 1. Browser & History Hx-push-url - set your url Hx-replace-url - replace your url, save no snapshot Hx-history-elt - change snapshot from default to particular element Hx-histor…

1
Advanced htmx: hx-disinherit 8:21

3M ago8:21

8:21

Reddit thread with an example: https://www.reddit.com/r/htmx/comments/1bukz76/hxselect_reset/By Lazarus

1
Advanced htmx: hx-history-elt 6:38

3M ago6:38

6:38

What if you wanted a part of your site to persist even using the back and forward on your browser? Here is the reddit thread I mention in the episode, with an example: https://www.reddit.com/r/htmx/comments/1bu14sg/how_to_make_a_audio_player_that_survives_the_back/By Lazarus

1
Advanced htmx: hx-disabled-elt 3:01

3M ago3:01

3:01

This one might actually be essential, not just an advanced attribute. Keeps you and your users from accidentally submitting things multiple times.By Lazarus

1
Advanced htmx: hx-encoding 5:32

3M ago5:32

5:32

An amazingly simple file uploading form *with a progress bar* using htmx: Upload

1
Advanced htmx: hx-select-oob 8:38

3M ago8:38

8:38

What if you could "select" snippets out of your response and send them to anywhere on the page ("out-of-band") of the target? that's hx-select-oob Server traffic cop: hx-swap-oob Client traffic cop: hx-select-oobBy Lazarus

1
The css zen garden was a beautiful lie 22:58

4M ago22:58

22:58

Let's talk big ideas like Locality of Behavior vs. Separation of Concerns by relentlessly attacking one of the best websites ever createdBy Lazarus

1
Advanced htmx: hx-request 5:27

4M ago5:27

5:27

Set the outer layer of settings of your request with THESE THREE OPTIONSBy Lazarus

1
Advanced htmx: hx-disable 5:11

4M ago5:11

5:11

Question: Do you want your users in the comment section to write htmx that runs on your site? If the answer is yes, please ignore this episode.By Lazarus

1
Advanced htmx: hx-history 4:58

4M ago4:58

4:58

What if you don't want your page kept into the browser history local storage?By Lazarus

1
What is htmx good for? 24:39

4M ago24:39

24:39

This is a somewhat open thought process looking at the question I see online: what is htmx good for? Mentioned in the episode: the htmx movies example from Andrew Rhyand: https://htmx.andrewrhyand.com/ A great looking page with smooth animations and educational htmx content on it.By Lazarus

1
Advanced htmx: hx-validate 8:52

4M ago8:52

8:52

Your browser has built in types and validation on inputs in a form. But what happens when you use inputs without a form?? Note: I accidentally posted an incomplete episode at first, if you dont hear the end, try to re-download!By Lazarus

1
A conversation with the CEO of htmx 12:58

4M ago12:58

12:58

By Lazarus

1
Advanced htmx: hx-headers 5:05

4M ago5:05

5:05

Every request has secret hidden headers. But what if you wanted to make your own? https://htmx.org/attributes/hx-headers/By Lazarus

1
Celebrate your little victories 13:53

4M ago13:53

13:53

When you make your life easier, that's a win.By Lazarus

1
Advanced htmx: hx-sync 10:54

4M ago10:54

10:54

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

1
Advanced htmx: hx-push-url and hx-replace-url 9:46

5M ago9:46

9:46

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="/accou…

1
Brain-coding an htmx to-do app V2 - NO MUSIC 30:37

5M ago30:37

30:37

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

1
Brain-coding an htmx to-do app 30:55

5M ago30:55

30:55

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

1
The basics: Season 1 recap, grouping the attributes 12:12

5M ago12:12

12:12

Every attribute so far and where they fit together.By Lazarus

1
The basics: hx-select 7:46

5M ago7:46

7:46

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.By Lazarus

1
A conversation with chat gpt, aka the htmx shillbot 2000 27:38

5M ago27:38

27:38

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.By Lazarus

1
The basics: hx-preserve 2:32

5M ago2:32

2:32

Updating a chunk of the DOM is easy -- but what if you wanted to leave one element alone? Content preserved 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/By Lazarus

1
The basics: hx-indicator and the special htmx loading classes 7:54

5M ago7:54

7:54

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!By Lazarus

1
The basics: hx-params 3:48

5M ago3:48

3:48

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"By Lazarus

Podcasts Worth a Listen

Optimized HX Podcasts

Podcasts Worth a Listen

Quick Reference Guide