Issue № 2: Three out of Thirty Nine

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 [...]

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

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

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?

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