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=9142s

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

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 talks

Every talk is available to watch at: https://bigskydevcon.com

1. 1:26 - The htmx guide to gonzo open source marketing by Carson Gross
2. 8:23 - The Life & Death of HTMX by Alex Petros
3. 13:29 - Hypermedia Middleware: Introducing Walrus by Ben Damman
4. 17:14 - htmx sucks and now you're gonna hear about it (Mind the Gap) by Ryan Florence
5. 23:27 - Abusing Hypermedia by Nathaniel Maile & Jon-Michael Hartway
6. 27:51 - Local First by Warren Buffering
7. 30:30 - Geospatial Data in an AI World by Jaron Jones
8. 31:12 - What's the Deal with Flutter? by Marcus Twichel
9. 32:41 - High floor, high ceiling by Sam Selikoff
10. 36:41 - Building HTML Frontend with Go & Templ by Adrian Hesketh
11. 37:56 - You can't build very interactive web apps without SPAs... and other HTMX myths by Anthony Alaribe
12. 47:50 - Development & DevOps Lessons from the New Montana Cadastral Application by Kenny Ketner
13. 48:27 - A Talk By ThePrimeagen by ThePrimeagen
14. 51: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
HX-Trigger-After-Swap - after new html is swapped in
HX-Trigger-After-Settle - after new html is settled and processed by browser

1. single event
   HX-Trigger:event

2. multiple events
   HX-Trigger:event1, event2

3. single event with value
   HX-Trigger:{“event1”:”event 1 message”}

4. single events with key/value data
   HX-Trigger:{“event1:{“key1”:”value1,”key2:”value2”}}

5. 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/1795758603577545035

DHH responses:
https://x.com/dhh/status/1796163806650868149

Htmx guy responses:
https://x.com/htmx_org/status/1796182554883539236