hx-pod

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-wordpressAlpine/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 & HistoryHx-push-url - set your urlHx-replace-url - replace your url, save no snapshotHx-history-elt - change snapshot from default to particular elementHx-history - prevent something from being saved in the htmx snapshot2. Customizing RequestsHx-request - set no headers or timeout on requestHx-headers - set custom headers, dynamic or static jsonHx-sync - allows you to set rules for multiple htmx requests at once3. Submitting DataHx-validate - allows you to use validation rules outside of formsHx-disabled-elt - disables a button once you’ve clicked itHx-encoding - allows you to upload files via Ajax4. Overriding HtmxHx-disable - allows you to disable htmx for user comments, posts, etcHx-disinherit - breaks inheritance chain for one or more attributes5. Fun!Hx-select-oob - lets you place element from your response wherever you want

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='0' max='100'></progress></form><script>    htmx.on('#form', 'htmx:xhr:progress', function(evt) {      htmx.find('#progress').setAttribute('value', evt.detail.loaded/evt.detail.total * 100)    });</script>

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