Episodes

  • Large table pattern using htmx
    Jun 20 2024

    Mentioned, how to submit and reset a form on success using htmx:

    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.

    Show more Show less
    19 mins
  • Htmx headers: Season 3 Recap
    Jun 13 2024

    "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

    Show more Show less
    11 mins
  • I went to Big Sky Dev Con 2024 so you don’t have to
    Jun 9 2024

    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
    Show more Show less
    54 mins
  • Htmx response headers: HX-Trigger, HX-Trigger-After-Swap, HX-Trigger-After-Settle
    Jun 5 2024

    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”}}



    Show more Show less
    11 mins
  • Htmx response headers: HX-Reselect
    Jun 3 2024

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

    Show more Show less
    5 mins
  • Is optimistic UI the "final boss" of htmx? (and livewire, unpoly, liveview, hotwire, etc)
    May 31 2024

    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

    Show more Show less
    31 mins
  • Htmx response headers: HX-Retarget
    May 29 2024
    { "HX-Retarget": "#my-special-target" }



    Show more Show less
    6 mins
  • Htmx response headers: HX-Reswap
    May 24 2024

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

    Show more Show less
    5 mins