This Week in HTMX

Issue № 2: Three out of Thirty Nine

2021-10-24T00:00:00Z

3 htmx talks were given at DjangoCon US 2021!

The conference over this weekend featured these talks from members of the htmx community:

Server-Side is Dead! Long Live Server-Side (+ HTMX) by Jack Linke
By the end of this talk, audience members will have a better understanding of what HTMX is, will understand concrete examples of how it can be applied to their django projects, and will have a list of resources for further learning and discussion.

Outline:
- The current state: [...]
- One potential approach: [...]
- Feature and approach walk-throughs For a variety of common web application features [...]
- Tips, best practices, and pitfalls: [...]
HTMX: Frontend Revolution by Thomas Güttler
I developed my first CGI script in 1998. Since that day I have seen a lot of hypes coming and going.

The talk will consist of three parts:
- My humorous odyssey of trying to find a great frontend framework
- Retrospective: What do I want from the frontend?
- I finally found: HTMX: HTML Fragments over the wire
- How to use HTMX with Django.
Besides simplicity, good Web Vitals performance (SEO) is a benefit of this method. ¶ The talk will express my personal opinion, feelings and fun. It won’t dive into technical details.
REST, HATEOAS & Django - It's OK to not use JSON... or Javascript by Carson Gross
In this talk we will revisit the basics of REST (REpresentational State Transfer), a term coined by Roy Fielding to describe the web network architecture, in contrast with older client-server network architectures. In particular we will focus in on the “Uniform Interface” constraint and get to the bottom of what that means, discussing each of the following:
- Resource identification in requests
- Resource manipulation through representations
- Self-descriptive messages
- Hypermedia as the engine of application state (HATEOAS)
with a particular focus on the last two.

1cg [...] if you told me a year ago that htmx would be involved in 3 of 39 talks at djangocon 2021 I would have laughed at your crazy talk: I don't program in python and know next to nothing about django [...]

💬 October 22, 2021, 2:09 PM UTC

Recordings are available at the DjangoCon US YouTube channel.

💙 to DjangoCon organizers & the whole Django community!

tinycode2 is using htmx with microfrontends

tinycode2 Is there a way to bind URL to changes to page state via htmx?

alejandros You can update the URL from the server side using the HX-Push header https://htmx.org/reference/#response_headers and you can also do it on the client side via htmx-push-url https://htmx.org/attributes/hx-push-url/

tinycode2 Ok but what if I have several areas which update different parts of the URL?

tinycode2 E.g. query string arguments

1cg ideally they would each have a hx-push-url that updated the local URL appropriately or relied on the server to return the correct URL in an HX-Push header

alejandros For complex cases, I use the header. htmx always sends the current URL in the request headers so you can take that, change it, then send it back. 🔥 1

tinycode2 In my case I'm using micro-frontends so responsibility for query string components (and html rendering) isn't centralised in a single backend service. I guess I'll need to build some sort of aggregating proxy server which does this :/

tinycode2 Actually the model you suggested should also work for microfrrontends @alejandros

💬 Invalid DateTime

Daniel made Bootstrap modals work with htmx

Daniel - East TN FWIW - this is "doing it wrong". I put an hx-get on the button that launches the modal, targeting the body of the modal; then, I return the HTML fragment from the server. All the htmx stuff works like it should again. 🙂

💬 October 21, 2020, 1:22 PM UTC

An inconsistency in _hyperscript syntax was fixed

Currently, the send command can dispatch events on other elements, but trigger cannot:

send evt            -- works, dispatches on "me"
send evt to #elt    -- works, dispatches on #elt
trigger evt         -- works, dispatches on "me"
trigger evt on #elt -- syntax error!

This will no longer be the case in the next release of _hyperscript.

https://github.com/bigskysoftware/_hyperscript/commit/ff28e64

htmx mentioned on devMode.fm

devMode already has an episode on htmx featuring Carson, but the latest episode mentions it as well, near the end.

💙 to the devMode.fm podcast!

https://devmode.fm/episodes/what-even-is-javascript

Richard appreciated syntax highlighting for _hyperscript

RichardG Yes indeed, is fun 🙂 and the syntax highlighting in VSCode helps a ton

RichardG Phpstorm doesn't seem to have it, that I can find?

💬 October 18, 2021, 6:54 PM UTC

The _hyperscript plugin for Visual Studio Code adds syntax highlighting, even for code embedded in HTML! The newest version supports _hyperscript in Markdown code blocks. Try it out:

https://marketplace.visualstudio.com/items?itemName=dz4k.vscode-hyperscript-org

I've also just started writing a tree-sitter grammar, for those who are into that sort of thing:

https://github.com/dz4k/tree-sitter-_hyperscript

Issue № 1: HTMX at JavaScript Day

2021-10-17T00:00:00Z

Carson gave a talk on htmx at JetBrains JavaScript Day 2021

In his talk htmx: Writing JavaScript to Avoid Writing JavaScript, Carson delivered a rationale and demonstration of htmx, and obligatory discussion of REST/HATEOAS as usual... to an audience for whom it was quite out of the ordinary. Was he provocative enough to get some JavaScripters curious? We'll have to see.

💙 to the conference organizers and attendees!

https://youtu.be/R2Q0L9PDHtc?t=15881

Ben Pate committed to refactoring SSE & WebSocket support into plugins

1cg pull web sockets and server sent events out into extensions 👍 5👎 1

benpate Just say "go" and I'll volunteer to do it

1cg go

1cg 1.7 we will pull them out

benpate F. What have I done?? 🇫 1😂 1

💬 October 13, 2021, 8:44 AM UTC

Carson explains how to make third-party components work with htmx

1cg Ah, OK. So, here's the deal

1cg and I need to document this, sorry

💬 October 14, 2021, 10:01 AM UTC

When using a JavaScript library that makes a lot of modifications to the DOM, the modified DOM being saved into history is usually undesirable and can lead to bugs. Carson explains how to avoid it.

In summary, initialize your libraries in htmx.onLoad(), and uninitialize them on the htmx:beforeHistorySave event.

Fubarrr [...] If you want your back button to behave as you expect it to… this pattern of “undoing” all the DOM manipulation your JS widgets did initially on page/fragment load, is critical. [...]

💬 January 14, 2021, 10:44 AM UTC

https://discordapp.com/channels/725789699527933952/725789747212976259/897967497335148605

Thomas Güttler reminded us about the htmx tag on StackOverflow

guettli I think up to now I am the only one who tries to support new htmx users which ask a question on Stackoverflow. It would be very nice, if some more users could subscribe to the tag htmx, so that you receive an email if a new htmx question got asked: https://stackexchange.com/filters/409974/htmx

Of course I will up-vote your answers 🙂

💬 October 12, 2021, 7:41 AM UTC

You heard him, folks.

https://stackexchange.com/filters/409974/htmx

_hyperscript adopted the microbundle build system

Don't worry, _hyperscript will always be available as a single file that you can load from a CDN. However, we can now make ES module builds available as well!

https://github.com/developit/microbundle

URL literals for _hyperscript were considered

alleho how can you fetch a url that has been built and placed inside a variable?

💬 October 12, 2021, 2:32 PM UTC

This question started a whole discussion that ended with URL literals as a potential new feature. Here's a peek at how that might look:

set url to https://cors.example.com/api 
append /user?id=${the userId} to url.pathname
  
fetch url

htmx was brought up in a Hacker News thread about Laravel Livewire

Let me check again... Nope, that's not LimeWire.

1cg htmx swoopin' on livewire on orange site:

1cg [Screenshot: "How Laravel Livewire works", top comment is about htmx]

💬 October 13, 2021, 8:49 AM UTC

Hacker News is far from a good barometer for the general community of developers (someone tell Paul Graham!) but the attention feels too good to ignore it.

https://news.ycombinator.com/item?id=28850757

💙 to Livewire and the Laravel community!