Share your ideas, follow the build!

An htmx interview with Makinde Adeagbo
https://htmx.org/essays/interviews/makinde-adeagbo/

This is the lost promo for the full 3-part Hypermedia Wars series
Episode 1: Inflection 2010
Episode 2: Virtual DOMination
Episode 3: Hypermedia Strikes Back

================== EPISODE LINKS
Tony on X: https://x.com/tonyennis
Html First: https://html-first.com
Mini JS: https://mini-js.com
Base Styles: https://base-styles.com
Tony's talk at big Sky: https://www.youtube.com/watch?v=aknX6xq8Vfg
Una at Google IO: https://www.youtube.com/watch?v=VTCIStB6y8s

================== CHAPTERS
00:00 Intro to Tony
00:34 Tony's work at Really Good Software
02:17 "My whole thing though is ..."
05:03 The Platform and a Stylesheet talk
07:18 Html tag list
07:26 Una and the Chrome dev team making progress
09:10 Popovers
11:56 New UI Elements in Html 2023 vs 2025
12:34 Modal
15:48 select with selectedcontent tag
16:27 Multi-selects (they are still bad, but working on it)
16:50 datalist (autocomplete)
20:22 Async in HTML (replacing htmx?)
28:57 Where React is preferred
34:40 The Front-end spectrum -- Mini JS 
45:52 Mini-js code example
50:43 Laz on why html is great at UI
52:30 Why a five-year-old can learn html
55:21 Building mobile apps with React Native and webviews
59:50 Server-driven web apps
1:05:45 Base styles (unreleased minimal CSS framework)
1:10:25 CSS Layers for siloing your libraries

Obviously: Carson Gross (Htmx, fixi), Delaney Gillilan (Datastar), Alex Petros (HTML triptych), Adam Stepinski (Hyperview)
BUT ALSO: Caleb Porzio, Aaron Francis, Levels io, and DHH??

Embrace the backend
https://www.youtube.com/watch?v=uQO4Xh1gMpY

47:16 MY MIND IS BLOWN
Jon-Michael does something pretty crazy here. His entire 3D scene is static HTML. The 3d movement only comes from swapping out the style tag and the CSS!?!???!

===================== BIG SKY DEV CON TALK
Building things for Twitter Clout
https://www.youtube.com/watch?v=yQzpyIXdzcE

===================== 3D GAME
Demo: https://htmx-3d.deastl.com/
Github: https://github.com/DeaSTL/3d-htmx-game

===================== FLAPPY BIRD
Github: https://github.com/DeaSTL/flappybird-htmx 
**** Includes video!

===================== Chapters (From AI)
00:00 Introduction to Jon-Michael Hartway
02:22 Development Background and Programming Journey
05:10 HTMX Experiments and Flappy Bird Game
07:35 Technical Insights on Game Development
10:09 Challenges and Server Management
12:47 Exploring Twitter Clout Projects
18:54 Rule #1: Viral
19:34 Rule #2: Ridiculous
20:56 Rule #3: The wrong tech
26:56 Rule #4: Low scope
29:42 Rule #5: Fun
29:50 Challenges of 3D Rendering in CSS
33:39 Understanding Gimbal Lock and Camera Mechanics
37:57 Implementing Multiplayer with WebSockets
41:18 Innovative Use of CSS for 3D Positioning
46:21 Future Projects and Learning Experiences

Official Docs: https://htmx.org/extensions/response-targets/

Hypecp example: https://hypecp.com/#htmx-response-targets

=================== CHAPTERS:
00:00 - Intro, Aaron Francis, Primeagen 
01:19 - 01 - Carson Gross - API Design 
04:40 - 02 - Stephanie Gredell - From Human To Bots 
07:04 - 03 - typecraft (Chris Power) - VaaS (Vim as a service) -- How to teach vim to thousands of people with Rails and Go 
10:28 - 04 - Robbie Wagner - HTML is stealing our jobs! 
13:20 - 05 - Warren Buffering - Browsers are for Reads, Native Apps are for Writes
16:49 - 06 - Jon-Michael Hartway - Building things for twitter clout
20:00 - 07 - Ken Wheeler - you can just build things 
22:55 - 08 - Duncan Lutz - Potatoes Go Brrr: Adventures in High-Speed Embedded Rust 
25:08 - 09 - Mike Amundsen - Making Connections and Solving Problems : Hypermedia's Legacy and Future 
29:22 - 10 - Barrett A Breshears - Backends?!? Where we are going we don't need backends 
32:41 - 11 - Adam Stepinski - Extending vs Scripting: Lessons from building the Hyperview client 
36:47 - 12 - Alex Petros - What's Left for Frontend Engineers? 
41:30 - 13 - Dennis Ivy - Why good developers fail interviews
44:55 - 14 - Turner Houghton - JSX minus react plus htmx 
47:23 - 15 - Tony Ennis - The Platform and a Stylesheet (A path to Platform / SPA Parity) 
54:23 - 16 - Dan Vail I'm dumb and so can you!
57:27 - Closing

=================== TALKS MENTIONED:

Aaron Francis "Publishing Your Work" - Laracon US 2023 Nashville
https://www.youtube.com/watch?v=2YaEtaXYVtI

The Primeagen on Lex Fridman
https://www.youtube.com/watch?v=tNZnLkRBYA8

Big Sky Dev Con 2025 Playlist
https://www.youtube.com/watch?v=dTstnhS3moc&list=PLE57lymIlIyVXwAO-pO6gvMmnd6isAFTR

01 - Carson Gross - API Design 
https://www.youtube.com/watch?v=dTstnhS3moc

02 - Stephanie Gredell - From Human To Bots 
https://www.youtube.com/watch?v=9Sd_09Ci2cM

03 - typecraft (Chris Power) - VaaS (Vim as a service) -- How to teach vim to thousands of people with Rails and Go 
https://www.youtube.com/watch?v=IfH-hzl3al8

04 - Robbie Wagner - HTML is stealing our jobs! 
https://www.youtube.com/watch?v=cdocEPDlwYM

05 - Warren Buffering - Browsers are for Reads, Native Apps are for Writes
https://www.youtube.com/watch?v=ojy5pQLJ_RQ

06 - Jon-Michael Hartway - Building things for twitter clout
https://www.youtube.com/watch?v=yQzpyIXdzcE

07 - Ken Wheeler - you can just build things 
https://www.youtube.com/watch?v=p8WcV7LdnvU

08 - Duncan Lutz - Potatoes Go Brrr: Adventures in High-Speed Embedded Rust 
https://www.youtube.com/watch?v=uu0hUxz6cJ0

09 - Mike Amundsen - Making Connections and Solving Problems : Hypermedia's Legacy and Future 
https://www.youtube.com/watch?v=i-GQhQs671k

10 - Barrett A Breshears - Backends?!? Where we are going we don't need backends 
https://www.youtube.com/watch?v=c4CECgmr96s

11 - Adam Stepinski - Extending vs Scripting: Lessons from building the Hyperview client 
https://www.youtube.com/watch?v=GJdgZsnihnM

12 - Alex Petros - What's Left for Frontend Engineers? 
https://www.youtube.com/watch?v=z7M2inHiT4Y

13 - Dennis Ivy - Why good developers fail interviews
https://www.youtube.com/watch?v=3uWfmFCwmII

14 - Turner Houghton - JSX minus react plus htmx 
https://www.youtube.com/watch?v=x51t1pQ_gAg

15 - Tony Ennis - The Platform and a Stylesheet (A path to Platform / SPA Parity) 
https://www.youtube.com/watch?v=aknX6xq8Vfg

16 - Dan Vail I'm dumb and so can you!
https://www.youtube.com/watch?v=ZlmsRmarXA0

https://htmx.org/extensions/preload

Examples: 
https://hypecp.com/#htmx-preload

<body hx-ext="morph">
<hx-swap="morph">
https://htmx.org/extensions/idiomorph

Examples:
https://hypecp.com/#htmx-idiomorph

https://htmx.org/extensions/htmx-1-compat/

Working example:
https://hypecp.com/#htmx-head-support

<script src="https://cdn.jsdelivr.net/npm/htmx-ext-head-support@2.0.2"></script>
<body hx-ext="head-support">
<title hx-head="re-eval">

A wide-ranging conversation with the creator of the real-time hypermedia framework Datastar Delaney Gillilan.

1.0 launches with a full rewrite, a new website, and a non-profit foundation.

* What is datastar?
* What's different in 1.0?
* Why datastar got rid of all dependencies
* Going bigger and planning for the future
* Web devs can learn a thing or two from game devs
* Is SSE going to have its 'moment'?
* Lazarus on why htmx is here to stay
* Taking on Tailwind CSS (Stellar)
* Rethinking web components (Rocket)
* Utilizing UDP (Darkstar)

================ GENERAL LINKS ===============
Datastar: https://data-star.dev
Delaney Gillilan on X:https://x.com/delaneygillilan
The Datastar Podcast channel (w Ben & Delaney): https://www.youtube.com/@data-star

==============  REFERENCED VIDEOS ============
Our first conversation (2024):
Hypermedia at 144fps
https://www.youtube.com/watch?v=HbTFlUqELVc

00:23 V1 and Beyond (The journey to Datastar 1.0 blog post)
https://data-star.dev/essays/v1_and_beyond

03:18 Anthony Alaribe
You can’t build interactive web apps except as SPA (and other myths) 
https://www.youtube.com/watch?v=uVKSmR_hBMs&t=9142s

03:58 Sam SelikoffHigh Floor, High Ceiling
https://www.youtube.com/watch?v=uVKSmR_hBMs&t=5693s

01:11:21 Daniel Colbourne - Put Verbs in your database - Event Sourcing
https://www.youtube.com/watch?v=-mb2L97Yq88

2:26:20 Ben Croker Bug fix
https://www.youtube.com/watch?v=pdbaGOibJkc&t=1051s

============= CHAPTERS (from AI) ==========
00:00 The Journey to DataStar 1.0
02:57 Hypermedia and Modern Web Features
05:46 Understanding DataStar's Philosophy
08:42 The Core Concept of DataStar
11:17 Embracing Server-Sent Events (SSE)
14:13 The Evolution of DataStar's Signals
17:04 DataStar's Rewrite and New Features
20:03 Comparing DataStar with Other Tools
22:41 The Future of DataStar and SDKs
28:22 Community Building and SDK Evolution
29:55 Dependency Management and Performance Optimization
32:40 Testing and Metrics in Development
35:06 The Importance of Size and Speed
38:06 Plugins and Core Functionality
42:31 Version 1 Launch and Nonprofit Structure
45:20 Introducing Rocket and Stellar
54:45 The Evolution of CSS and Semantic HTML
59:32 Introducing Darkstar: A New Era for Web Development
01:04:12 Event Sourcing and Real-Time Collaboration
01:08:15 The Future of Hypermedia and DataStar vs HTMX
01:26:44 The Limitations of Polling and State Management
01:33:12 Comparing DataStar and HTMX: A Functional API Discussion
01:38:18 The Future of Frameworks: DataStar vs. HTMX
01:43:35 Hypermedia as the Future of Web Development
01:50:39 The Journey of Open Source Development
01:54:21 Embracing Collaboration and Innovation
01:56:51 The Challenge of Popularity and Engagement
01:59:09 Navigating the Landscape of Hypermedia
02:03:17 Building a Community and Onboarding
02:07:24 Understanding Preferences in Development
02:12:04 The Future of SSE and Hypermedia

         Sending...

</div>

Original X post:
"we are now at a point that we can ditch build systems for many projects & many people underestimate the amount weight doing so would lift off their burdened shoulders"
- htmx_org
https://x.com/htmx_org/status/1928819921376395580

Chapters:
0:14 What is no-build?
1:35 The X arguments
4:25 Why the build process is (was) good
5:26 Build process in practice
6:31 Got money to burn?
8:25 Do your own thing
9:12 Tailwind CSS and Remix 3 (!!!) are introducing no-build setups
11:00 There's always new ways to build great things
11:20 (but learn build steps and React to get a job)

Built specifically for use with server-rendered templates, htmx, vanilla js, alpine, and other hypermedia-based solutions.

Basecoat UI: https://basecoatui.com/
Basecoat Repo: https://github.com/hunvreus/basecoat
Ronan on X: https://x.com/hunvreus

I ask him how he built it, why he built, and what he has in store for it.

Chapters (from AI)
00:00 Introduction to Basecoat UI
06:51 The Journey of Building Basecoat UI
11:09 Understanding Theming and Customization
18:57 Complexity in UI Libraries
24:01 Design Principles and Aesthetics
30:06 Future of Basecoat UI and Community Engagement
38:24 Navigating Browser Compatibility Challenges
41:49 The Evolution of Web Technologies
45:25 Performance Optimization in Web Development
51:14 The Aesthetic Appeal of Modern Web Applications
54:29 Generative UI and the Future of Development
01:01:21 Simplifying Complexity in Web Development
01:11:42 Open Source Contributions and Community Engagement

00:00 Intro
01:00 What is the Grug Brained Developer?
06:13 Carson's dev cred
12:12 Web dev is hard!
13:08 The Eternal Enemy: Complexity
17:27 Saying No
19:07 Saying ok
22:28 Factoring Your Code
26:45 Testing
32:56 Agile
35:04 Refactoring
38:42 Chesterton's Fence
41:03 Microservices
45:12 Tools
Type Systems
53:58 Expression Complexity
57:07 DRY
1:00:22 Separation of Concerns (SoC)
1:04:28 Closures
1:07:57 Logging
1:08:14 Concurrency
1:09:44 Optimizing
1:11:31 APIs
1:18:17 Parsing
1:19:44 The Visitor Pattern
1:19:55 Front End Development
1:22:55 Fear Of Looking Dumb
1:28:20 The Essay vs. The Book

One of many in the htmx/uncle bob twitter feud:
https://x.com/unclebobmartin/status/1917306604267135311

Demo: https://hypecp.com/demos/datastar-signals
Video: https://youtu.be/csPFLpm8OYI
Bad Apple: https://data-star.dev/examples/bad_apple

The visual version of this episode:
https://www.youtube.com/watch?v=NU3FEHJRMEs

In this episode I talk to Brock Benson, creator of Mayples, a business valuation SaaS. Last year, Brock made the decision to rewrite his large-scale, Live VueJS production app into an htmx app. During this rebuild, Brock went on a journey into the internals of htmx, built his own extensions, embraced _hyperscript, and pushed against the limits of htmx.

Does it scale? What were the pain points? What tricks did he come up? How does it compare with his earlier Vue version of the same app? 

I hope you enjoy this in-depth conversation with premiere htmx application developer Brock Benson.

Fixi is a new hyper-minimalist javascript library. At less than 4kb, it gives much of the power of similar hypermedia libraries like htmx, with a new stream-lined approach. 

Use attributes like fx-action, fx-method, fx-trigger, and fx-swap to perform ajax requests to work with html from your server.

In this episode Lazarus talks to its creator, Jason Cross.

Chapters (from AI)

00:00 Introduction to Hypermedia Frameworks
02:49 Exploring HTMX and HTMZ
05:58 The Philosophy Behind Fixi
09:03 The Lean Software Approach
11:59 Minimalism in Fixi
15:06 Attributes and Functionality of Fixi
17:55 Comparing Fixi and HTMX
21:03 Copy and Paste Philosophy in Development
23:51 Debugging and Size Considerations
26:57 Future of Fixi
29:45 The Philosophy of Open Source and Simplicity
31:33 View Transitions and User Experience
36:32 Design Decisions in Fixi vs HTMX
38:27 Collaboration and Maintenance of Open Source Projects
41:11 Attribute Inheritance and Locality of Behavior
42:07 Event Handling and Extensions in Fixi
46:32 JavaScript and the Future of Web Development

Hypermedia shines when the data on the page gets big

id | class | type

https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Unpoly has been around for a decade and is used in production by companies all around the world, including Bosch, Volkswagen, Audi, and Siemens.
https://github.com/unpoly/unpoly/discussions/666

The book: https://pragprog.com/titles/mvhtmx/server-driven-web-apps-with-htmx/
A talk on htmx: https://www.youtube.com/watch?v=U3CYrD2ry-U
A blog on EVERYTHING: https://mvolkmann.github.io/blog/topics/
The Notes directory: https://github.com/mvolkmann/MyUnixEnv/tree/master/notes

Hyperview lets you create a shell for your iOS/Android app, then populate it using XML and hypermedia, htmx-style inspired concepts.

Hyperview is extensible, so you can find or build your own plugins.

Links discussed:
Website: https://hyperview.org
Hyperview Github Repo (best place to ask questions): https://github.com/instawork/hyperview
Discussion about client-side validation: https://github.com/Instawork/hyperview/discussions/332
Examples of defining multiple behaviors: https://hyperview.org/docs/reference_behavior

For-Profit: https://makestartups.com
Non-Profit (school): https://makestartups.org
Personal website: https://ericharrison.info

Links:
PyCon PT 23 | Building advanced back-office interfaces using Django & HTMX
https://www.youtube.com/watch?v=hdLWZQb8pkE

Where is our ShadCN? Where is our Flux UI? Where is our Tailwind UI?

Shoutout to reddit user Thoram

https://www.reddit.com/r/htmx/comments/125gha4/prevent_scrolling_on_hxboost/

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

Sheena joins to talk about how she teaches her junior devs to teach noob devs how to become junior devs

Youtube: https://www.youtube.com/watch?v=S7BX2ocn7XM

This episode on youtube (i.e. see faces)
https://www.youtube.com/watch?v=LQfKmpx7QZ8

This assumes the last row is the add form, and places the newly added item directly above it.

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

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

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

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

https://htmx.org/headers/hx-push-url

https://htmx.org/headers/hx-location/

Useful links mentioned:
https://github.com/bigskysoftware/htmx/issues/497

https://htmx.org/docs/#history

Request Headers:
Hx-Prompt: small

example of format:
Request Headers:
Hx-Trigger: search_input
Hx-Trigger-Name: search

https://laravel.com/docs/11.x/blade#rendering-blade-fragments

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-wordpress

Alpine/Livewire in Wordpress:
https://github.com/boxybird/morph

This means we have now gone through every attribute! (not counting extensions)

1. Browser & History

Hx-push-url - set your url

Hx-replace-url - replace your url, save no snapshot

Hx-history-elt - change snapshot from default to particular element

Hx-history - prevent something from being saved in the htmx snapshot

2. Customizing Requests

Hx-request - set no headers or timeout on request

Hx-headers - set custom headers, dynamic or static json

Hx-sync - allows you to set rules for multiple htmx requests at once

3. Submitting Data

Hx-validate - allows you to use validation rules outside of forms

Hx-disabled-elt - disables a button once you’ve clicked it

Hx-encoding - allows you to upload files via Ajax

4. Overriding Htmx

Hx-disable - allows you to disable htmx for user comments, posts, etc

Hx-disinherit - breaks inheritance chain for one or more attributes

5. Fun!

Hx-select-oob - lets you place element from your response wherever you want

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/

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

that's hx-select-oob 

Server traffic cop: hx-swap-oob
Client traffic cop: hx-select-oob

If the answer is yes, please ignore this episode.

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.

Note: I accidentally posted an incomplete episode at first, if you dont hear the end, try to re-download!

https://htmx.org/attributes/hx-headers/

htmx got yer back 🤜 🤛

.. but what happens when you refresh?

Work with the browser history on any htmx request with hx-push-url and hx-replace-url.

PUSH it to the Browser history stack:
hx-get="/account/details" hx-push-url="true"

REPLACE the current browser history stack:
hx-get="/account/details" hx-replace-url="true"

Keeping the other up for posterity's sake.

In a perfect world, you could just use a simple css selector to get only what you need and filter everything else out.

Well, welcome to the perfect world -- hx-select style.

BIG interview today.

We delve into where htmx fits in the broader dev world, how we might build a calendar with htmx, and even how to build and publish our own hx-load-class attribute.

<div id="leave-me-alone" hx-preserve>Content preserved</div>

Content will NOT be swapped out in the request, as long as the id in the request data matches.

https://htmx.org/attributes/hx-preserve/

Of course you do. Just add the htmx-indicator class to any element (loading div, svg, gif), and the parent requests will make it show up.

We discuss the magic you get for free in htmx and the way to customize it!

hx-params="first_name, last_name, state"

or what if you wanted to exclude a field?

hx-params="not secret_field"

STATIC
<button hx-get="/my/weather/data"
              hx-trigger="click"
              hx-vals='{"location": "01245"}'>
   Click for weather in one static location
</button>

DYNAMIC
<button hx-get="/my/weather/data"
              hx-trigger="click"
              hx-vals='js:{location: document.getElementById("zipcode").value}'>
   Click for weather in one static location
</button>

OR
<button hx-get="/my/weather/data"
              hx-trigger="click"
              hx-vals='js:{location: someJavascriptCalculationFunction()}'>
   Click for weather in one static location
</button>

Here are the two server/client mental model discussions referenced in the audio:

1. Primagean "The truth about HTMX"
Front end backend s=discussion starts around 12m
https://www.youtube.com/watch?v=2hMrk7A8Wf0

2. Mostly Technical Podcast
"High Floor vs. High ceiling"
https://mostlytechnical.com/episodes/13-the-sql-injection-slide-with-sam-selikoff#t=9m6s

<body hx-boost="true">

Essay on HOWL from htmx.org:
https://htmx.org/essays/hypermedia-on-whatever-youd-like/

...sort of

1->2 guide:
https://v2-0v2-0.htmx.org/migration-guide-htmx-1/

hx-on attribute:
https://htmx.org/attributes/hx-on/

Fine
https://htmx.org/examples/confirm/

Thank you to rick @maverism for tweeting out the podcast!

Well, which do you like better?
A) <button hx-delete="/articles/1">
B) <button hx-post="/articles/1/delete">

On site:
<div hx-get="/load-podcast-links" hx-trigger="load"></div>

In response:
<div id="placement-1" hx-swap-oob="true">Placement 1 text and link</div>
<div id="placement-2" hx-swap-oob="true">Placement 2 text and link</div>
<div id="placement-3" hx-swap-oob="true">Placement 3 text and link</div>
.....

<div id="my-update-div" hx-swap-oob="true">Updated html</div>

<div id="my-update-div-2" hx-swap-oob="true">More updated html elsewhere on the page</div>

As promised in the episode, here are three ways to set up your CSRF token headers:

1. Like normal in your forms:

<input type="hidden" name="_token" value=""/>

 
(the regular html way works with htmx, of course)

2. Javascript

<script>
document.body.addEventListener('htmx:configRequest', (e) => {
    e.detail.headers['X-CSRFToken'] = '';
})
</script>

(add this to the bottom of your </body> so that EVERY request gets the right headers. I love this one!)

hx-headers

<div hx-post="/your-endpoint" hx-headers='{"X-CSRF-Token": "YourCSRFTokenHere"}'> 

<!-- Your content --> 

</div>

(add this attribute along with your hx-post)