hx-pod

Ok, so different build (no Node js, no npm, no yarn)https://tailwindcss.com/blog/standalone-cli

Sahil's tweet:https://x.com/shl/status/1839686512767627310Where is our ShadCN? Where is our Flux UI? Where is our Tailwind UI?

Hypermedia contrained by ajax and network calls?No way -- Delaney is here to expand your mind with 60fps hypermedia streaming to your browser!Data Star:https://data-star.devGrugs around the Fire:https://data-star.dev/essays/grugs_around_fire

John is ready to build something real.What if it went straight into production as a dashboard widget?

See what I'm talking about:https://x.com/htmxlabs/status/1831510008946708959Shoutout to reddit user Thoramhttps://www.reddit.com/r/htmx/comments/125gha4/prevent_scrolling_on_hxboost/

My father in law runs his business using a CAD app running on a floppy disk. No, I'm not kidding

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 contributing to open source.Sprig Cookbook: https://putyourlightson.com/sprig/cookbookBen on Twitter: https://x.com/ben_pyloCraft CMS: https://craftcms.comhttp://devMode.fm Ben Croker + Carson Gross podcast episode: https://devmode.fm/episodes/dynamic-html-with-htmx

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

Practice over theory. hx-swap-oob. optimistic uis. the secret to making memes

<dialog> tag is greathttps://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog

Ignorance is bliss

John says what's up with marketing for small businessesYoutube: https://www.youtube.com/watch?v=S7BX2ocn7XM

What's an efficient/great way to add modals using htmx?

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

Mentioned, how to submit and reset a form on success using htmx:<form hx-post="/admin/candidates" hx-target="#candidates_add_form" hx-swap="beforebegin" hx-on::after-request=" if(event.detail.successful) this.reset()" >This assumes the last row is the add form, and places the newly added item directly above it.

"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 - which element triggered it by name*HX-Trigger - which element triggered it======> User Variables*HX-Prompt - user is asked to provide prompt, this is what they typed============> RESPONSE HEADERS======> Browser & history commands*HX-Location - hx-boost reload to page*HX-Redirect - regular redirect*HX-Refresh - refresh page*HX-Push-Url - push url to top bar*HX-Replace-Url - replace url in top bar======> override attributes*HX-Reswap - sets hx-swap value*HX-Retarget - set hx-target value*HX-Reselect - set hx-select value======> Trigger events*HX-Trigger - trigger an event on client immediately*HX-Trigger-After-Swap - trigger an event after swapping in html*HX-Trigger-After-Settle - trigger an event next lifecycle

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 htmx guide to gonzo open source marketing by Carson Gross8:23 - The Life & Death of HTMX by Alex Petros13:29 - Hypermedia Middleware: Introducing Walrus by Ben Damman17:14 - htmx sucks and now you're gonna hear about it (Mind the Gap) by Ryan Florence23:27 - Abusing Hypermedia by Nathaniel Maile & Jon-Michael Hartway27:51 - Local First by Warren Buffering 30:30 - Geospatial Data in an AI World by Jaron Jones31:12 - What's the Deal with Flutter? by Marcus Twichel32:41 - High floor, high ceiling by Sam Selikoff36:41 - Building HTML Frontend with Go & Templ by Adrian Hesketh37:56 - You can't build very interactive web apps without SPAs... and other HTMX myths by Anthony Alaribe47:50 - Development & DevOps Lessons from the New Montana Cadastral Application by Kenny Ketner48:27 - A Talk By ThePrimeagen by ThePrimeagen51:19 - Release of HTMX 2.0 on floppy disk

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-After-Swap - after new html is swapped inHX-Trigger-After-Settle - after new html is settled and processed by browsersingle eventHX-Trigger:eventmultiple eventsHX-Trigger:event1, event2 single event with valueHX-Trigger:{“event1”:”event 1 message”} single events with key/value dataHX-Trigger:{“event1:{“key1”:”value1,”key2:”value2”}}multiple events with key/value data HX-Trigger:{“event1:{“key1”:”value1,”key2:”value2”}, “event2”:{“key1”:”value1,”key2:”value2”}}

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

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/1795758603577545035DHH responses: https://x.com/dhh/status/1796163806650868149Htmx guy responses:https://x.com/htmx_org/status/1796182554883539236

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

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

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

The htmx request header that tells youEXACTLY where the user is making the request fromThe 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 fromexample of format:Request Headers:Hx-Trigger: search_inputHx-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-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.

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.

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!

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