hx-pod

Htmx response headers: HX-Reswap

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

Htmx response headers: HX-Refresh

{ "HX-Refresh": "true" }

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

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

Speaking with a prolific developer who recently switched from React to htmx

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/

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

Htmx request headers: Hx-Current-URL

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

Stop taking shortcuts

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

Htmx request headers: HX-Prompt

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

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!

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

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 from example of format: Request Headers: Hx-Trigger: search_input Hx-Trigger-Name: search

Htmx request headers: Hx-Request

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

What's next on the podcast?

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

Wordpress and htmx: A conversation with developer Andrew Rhyand

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

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

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-history - prevent something from being saved in the htmx snapshot 2. Customizing Requests Hx-request - set no headers or timeout on request Hx-heade...

Advanced htmx: hx-disinherit

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

Advanced htmx: hx-history-elt

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/

Advanced htmx: hx-disabled-elt

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

Advanced htmx: hx-encoding

An amazingly simple file uploading form *with a progress bar* using htmx: <form id='form' hx-encoding='multipart/form-data' hx-post='/[where-you-want-post-it]' hx-target='#target-div'> <input type="hidden" name="_token" value="" /> <input type='file' name='file'> <button> Upload </button> <progress id='progress' value='0' max='100'></progress> </form> <script> htmx.on('#form', 'htmx:xhr:progress', function(evt) { htmx.find('#progress').setAtt...

Advanced htmx: hx-select-oob

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

The css zen garden was a beautiful lie

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

Advanced htmx: hx-request

Set the outer layer of settings of your request with THESE THREE OPTIONS

Advanced htmx: hx-disable

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.

Advanced htmx: hx-history

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

What is htmx good for?

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.

Advanced htmx: hx-validate

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!

A conversation with the CEO of htmx

Advanced htmx: hx-headers

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

Celebrate your little victories

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