hx-pod

{ "HX-Refresh": "true" }

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

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

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/

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

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

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

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

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!

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

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

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

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

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

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

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/

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

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='...

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

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

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

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.

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

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.