Episoder
-
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 Thoram
https://www.reddit.com/r/htmx/comments/125gha4/prevent_scrolling_on_hxboost/
-
Manglende episoder?
-
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/cookbook
Ben on Twitter: https://x.com/ben_pylo
Craft CMS: https://craftcms.com
http://devMode.fm
Ben Croker + Carson Gross podcast episode: https://devmode.fm/episodes/dynamic-html-with-htmx -
An HTMX success story
https://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
-
<dialog> tag is great
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog -
Ignorance is bliss
-
John says what's up with marketing for small businesses
Youtube: 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.com
1: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 received
single event
HX-Trigger-After-Swap - after new html is swapped in
HX-Trigger-After-Settle - after new html is settled and processed by browser
HX-Trigger:eventmultiple events
HX-Trigger:event1, event2 single event with value
HX-Trigger:{“event1”:”event 1 message”} single events with key/value data
HX-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" }
- Vis mere