This Week in HTMX

Issue № 4: I Don’t Speak German But I Can If You Like

2021-11-07T00:00:00Z

Commspace became the first corporate sponsor of htmx

extremely thankful to announce the first corporate sponsor of htmx & hyperscript:

@commspaceapp

thank you to @jvosloo and the whole commspace team!

— @htmx_org

💙 The founder of Commspace is Johan Vosloo, who is also a supporter of the Week.

https://www.commspace.co.za

https://github.com/sponsors/bigskysoftware

https://thisweek.htmx.org/support

Michael Anckaert used htmx for a CI/CD service

I picked server side rendered HTML as the main technology for the user interface. Thanks to HTMX I was able to add some nice interactivity and UI / UX improvements without having to resort to a large scale framework such as Vue or React. Using HTMX makes me very productive on the frontend, which as a more backend leaning developer is a big bonus. Read more about HTMX and HTML over the wire concepts.

https://sinax.be/blog/general/pipeliner-a-cicd-pipeline-runner.html

An htmx meetup in Chemnitz, Germany is coming up

25 Nov, 19:00–21-00, Q-HUB GmbH | Innovation & Startup Space Chemnitz. Thomas Güttler will be speaking!

https://www.meetup.com/de-DE/Web-Developer-Chemnitz/events/281827325/

Daniel shared an (unreleased) htmx library for F#

Daniel - East TN This is not quite ready for release, but all that I have left is packaging and automation for its first (pre)release. https://github.com/bit-badger/Giraffe.Htmx

It’s the shared library result of my experiment, already fielded, in converting a Vue application to an “htmx SPA”. The README describes it and has examples. It brings htmx awareness to Giraffe (the F# web server that sits atop ASP.NET Core) and its view engine (which produces HTML via strongly-typed functions).

Once I get this (pre)release done, I’ll be ready to start on the (promised, and intro post already drafted) write-up of how it went. 👑 2

1cg vue to htmx experience! Very much looking forward to hearing how it went! 👍 3

💬 November 3, 2021, 2:14 AM UTC

So am I, Carson! My sources tell me that the library will be released soon™.

https://github.com/bit-badger/Giraffe.Htmx

@aarroyoca used htmx with Prolog

First public demo of Teruel + Scryer Prolog + htmx: The Dice Webapp

https://github.com/aarroyoc/teruel/tree/main/examples/dice

— @aarroyoca

https://twitter.com/aarroyoca/status/1456374701572468740

How to submit data from a form in _hyperscript

Deniz Akşimşek should be a matter of

make a FormData from #form
fetch /url { method: "POST", body: result }

in the upcoming release it will become

make a FormData from #form
fetch /url with method: "POST", body: result

💬 November 2, 2021, 5:29 PM UTC

https://hyperscript.org/commands/make

https://hyperscript.org/commands/fetch

https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

https://developer.mozilla.org/en-US/docs/Web/API/fetch#parameters

_hyperscript vs Alpine.js

Deniz Akşimşek ↪ Re. Rashad For those that have used hyperscript and Alpine.js with TailwindCSS… Microinteractions are one of the main use cases for _. Alpine fixes the “where’s that event listener” problem, but does nothing about the DOM APIs.
I think alpine is better for larger components like data tables, because of x-for and reactivity. For microinteractions, you will need to manipulate the DOM directly a lot more, which is a dream in hyperscript.

💬 November 5, 2021, 6:07 PM UTC

Editor’s note: Let me make it clear that this is not a dig on Alpine in any way. I gave my personal opinion to help people decide what to use. We’re volunteer-run free software projects with a lot of shared goals. 💙

a Hotwire-like library based on htmx?

gone Is there any desire to make a hotwire like lib that uses htmx?

gone Hotmx 👍 1

KevinS Just on the name alone it should be built, doesn’t matter if it meets a demand the name is too good 😄

1cg hotmax 🔥 3

Atem hxwire

💬 November 5, 2021, 2:20 PM UTC

Would you use that? Let us know.

Issue № 3: Hypermedia as the Engine of Coffee Brewing

2021-10-31T00:00:00Z

Rashad released lucid-htmx for Haskell developers

We talked about Rashad’s htmx/Haskell plans in our last issue. The package is now out:

Rashad https://www.loom.com/share/dffdf15baa3045ea9eea562bd88cc1b3?sharedAppSource=personal_library

HIGHLY RECOMMEND WATCHING THE LOOM AT 1.5 ~ 2 times speed. I talk slow. Skip to the 58 minute mark to see lucid-htmx immediately. Watch the rest if you’re interested in Haskell web dev.

An overview of lucid-htmx. I’ve recently published the package to hackage, the Haskell package manager. Check it out here: https://hackage.haskell.org/package/lucid-htmx

Documentation here: https://hackage.haskell.org/package/lucid-htmx-0.1.0.0/docs/Lucid-HTMX.html

I recommend watching the loom video at 1.5 ~ 2 times speed. I talk slow and the video is long but watching it at a higher speed, I think it’s a good pace. If you want to skip straight to the htmx stuff, skip to the 58 minute mark. Otherwise, I take a dive into web dev in Haskell and answer some interesting questions like how to query a database in Haskell, how to implement a server in Haskell, and what are some annoying things about Haskell development.

Rashad Code for the example in the loom video can be found here: https://github.com/rashadg1030/haskell-htmx-examples/blob/main/app/Main.hs

💬 October 29, 2021, 5:40 PM UTC

https://hackage.haskell.org/package/lucid-htmx

We discussed debugging/inspection tools for htmx

gone Is there a way to get the code that handles the debug info in the bottom of the documentation examples?

gone the count of server requests + outgoing data and response

gone it would be very useful to drop into an app as a debug tool

Deniz Akşimşek that’s built into the mock server that HTMX uses, however a similar thing could be built for real server requests

October 29, 2021, 10:41 AM UTC

BenCroker Since you’re here @Deniz Akşimşek, I have an idea to share: a htmx devtools browser extension.
This could log requests in its own devtools window, including things such as the request params and headers, response time and payload, as well as a visual overlay of the swapped mark-up in the browser window. Kind of similar to the request viewer on the htmx examples pages, but as a browser extension.
VueJS has a very powerful devtool browser extension, for example, see the quick demo at https://youtu.be/odKVakhMk1o?t=73

Deniz Akşimşek https://discord.com/channels/725789699527933952/725789747212976259/902928361951727667 It was discussed before, and I think it’s a wonderful idea. I bet we could implement a time-travel debugger like Redux, for the framework war coolness points…

Deniz Akşimşek I’ll stop talking about this before it gets assigned to me 👆 1 😆 1

💬 October 27, 2021, 2:34 PM UTC

htmx made it to the Twitter “Explore” page

Deniz Akşimşek [Image: Screenshot of Twitter on mobile, showing a tweet from @htmx_org]

Deniz Akşimşek HTMX on the explore page

1cg lol wut

💬 October 27, 2021, 2:51 PM UTC

https://twitter.com/htmx_org/status/1453349381621653511

Daniel used HTML as an API for a side project

Daniel - East TN For a (paid) side project, I got asked to expose some information “however I want” - they’re going to integrate it into a dashboard app. They’re getting 2 endpoints - one with an HTML table of the data (fragment), and one that wraps the table in a document with minimalist styling. They can style it, or they can use my black/white/gray striping with hover highlighting. So easy!
Now, I wait for the consumers to say “Huh - how do we swap this into our placeholder?” LOL

Deniz Akşimşek thing that should exist: a convenient way to scrape html tables

benpate ↪ Re. Deniz Akşimşek thing that should exist… Yes, very cool idea. Are you thinking you’d want to scrape the tables into a Javascript array? That should be pretty easy to do in JS or Hyperscript. Would this be used in htmx, or somewhere else?

Deniz Akşimşek in programmatic clients of an html api

benpate Yup.

Deniz Akşimşek preferably with support for scope=rowgroup

Deniz Akşimşek and rowspan

Deniz Akşimşek colgroup might make sense too, thinking about it

October 29, 2021, 1:27 PM UTC

Daniel - East TN ↪ Re. Deniz Akşimşek thing that should exist… It does in F# - https://fsprojects.github.io/FSharp.Data/library/HtmlProvider.html

💬 October 28, 2021, 6:53 PM UTC

Daniel pedantic bloggers asked about how to write htmx & _hyperscript

Daniel - East TN The official name of this project/technology - is it “HTMX” or “htmx”? (Pedantic bloggers want to know!)

1cg htmx, lowercase 👍 2

Deniz Akşimşek our non-existent styleguide at This Week in HTMX mandates lowercase (despite the name of the site itself) 😆 1

Daniel - East TN Cool - I… uh, I mean… pedantic bloggers wanted to make sure they got it right. 🙂

1cg also, hyperscript is _hyperscript, and the underscore is silent 😆 1

1cg under no circumstances should hyperscript be spelled hyperscript 😆 1

Deniz Akşimşek _hyperscript, worsening your markdown experience since [however long it’s existed]

1cg _worsening

Deniz Akşimşek ah yes, my favorite programming language \_hyperscript

Daniel - East TN 🤣

💬 October 27, 2021, 6:17 PM UTC

Richard used prism-hyperscript

RichardG @1cg that prism link is gold. thank you again 🙂 helped me wrangle:

on load 
  set global submitReady to false
  repeat until submitReady is true
    wait 1s then
    if #contactName.value != '' and #contactEmail.value != ''
      remove .bg-grey-700 from #submitButton
      add    .bg-red-800  to   #submitButton
      set my disabled to false
      set submitReady to true
    end
  end

💬 October 29, 2021, 4:32 PM UTC

If you go to https://prism-hyperscript.dz4k.com, you will find a textarea where you can type any _hyperscript code and it will be syntax highlighted.

https://prism-hyperscript.dz4k.com

You can now support This Week in HTMX on Buy Me a Coffee

Fubarrr Hey all you htmx fans, just in case you haven’t yet seen the “This week in HTMX” page, check it out! https://thisweek.htmx.org/

It’s curated by the inimitable @Deniz Akşimşek and it’s your one-stop weekly news round-up of the htmx community highlights 💪 If you find it valuable or just want to show your appreciation for Deniz’s effort for putting this together, feel free buy him a coffee: https://thisweek.htmx.org/support 👆 1 👍 1

💬 October 28, 2021, 4:51 PM UTC

💙💙💙

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!

Rashad started a lovely conversation about Haskell & htmx

Rashad […] I’m a web developer who uses Haskell and I wanted to start developing an HTML driven development ecosystem for the Haskel community. […]

💬 October 23, 2021, 3:29 PM UTC

The conversation is quite long, so I’ve put it inside this convenient <details> element:

monadposting on main

Rashad Okay very understandable. Low coupling is always nice. I ask the question because I’m a web developer who uses Haskell and I wanted to start developing an HTML driven development ecosystem for the Haskell community. I believe no programming community dislikes JavaScript more than the Haskell community, so Haskellers would love to use HTMX since it would allow them to stay in “Haskell world” as much as possible. We don’t have anything like Livewire, LiveView, etc. so I was wondering if would even worth it to implement if HTMX exists. I myself have been using it in some small Haskell projects, one of them being a project actually used by a trucking company, and it has been an amazing experience. I’m using a library, which I plan on releasing soon along with a blog post for using HTMX+Haskell, that allows you to use HTMX attributes in a Haskell DSL called lucid. https://chrisdone.com/posts/lucid2/ has examples of what lucid looks like if you’re interested. Interestingly, HTML is a monad!!

Rashad On top of that library, I’m also working on one that defines each HTMX attribute as a plain ol’ algebraic data type and essentially allows me to check at compile time that the HTMX attribute values I’m using are syntactically correct. This is cool to me since we value type safety. Anyways, I think HTMX+Haskell is an awesome combo and I plan on writing a lot soon about the combination and would love to share here and with the rest of the Haskell community because a lot of my brothers and sisters in Haskell land still aren’t really familiar with it.

…

1cg ↪ Re. Rashad Okay very understandable… absolutely awesome

1cg I often think of hypermedia as a functional transform of the DOM

1cg if htmx makes programming for the web in Haskell more enjoyable, that’d be alright 🙂

1cg Haskell and lisp: two programming languages I will never use but would love to help out

💬 October 23, 2021, 3:29 PM UTC

tinycode2 talked about 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

💬 October 20, 2021, 1:29 PM UTC

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

And later:

Daniel - East TN I’ll definitely have to write up what I’ve learned doing this. […]

💬 October 24, 2021, 2:57 PM UTC

We’re excited for it, Daniel! No pressure though…

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 & _hyperscript were mentioned on devMode.fm

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

Andrew Welch: You’ve heard of HTMX?

Chris Ferdinandi: Yes, but I can’t for the life of me-

AW: So, HTMX —real quick, like thirty seconds— HTMX —this is going to be not on the show anyway— HTMX is basically- Carson, the guy who made it, kind of considers HTML, the standards body, stopped, and they really needed to do more to allow for some dynamicism [sic] and he is kind of on your page in terms of that he thinks these libraries and things are a bit crazy. So, he wrote an extension to HTML that kind of fills in the missing gaps and allows for that interactivity and stuff. It’s a really interesting library and we did a show on it if you ever want to listen about it. But then, he also – this is the question I want to ask you about, and you can just think about it – he’s also working on a project _hyperscript which is like HyperTalk from the old HyperCard days. So, it’s an interpreted language that you put in your browser that JavaScript then interprets and decodes and runs. And I think it’s just absolutely crazy [laughter] but anyway,

CF: That’s weird. I’m gonna have to check that.

💙 to the devMode.fm podcast! (and apologies for my mediocre transcription skills)

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:

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!