This Week in HTMX

Issue № 8: null

2021-12-19T00:00:00Z

htmx on JavaScript Jabber podcast

https://javascriptjabber.com/htmx-and-intercooler-ft-carson-gross-jsj-513

_hyperscript on devMode.fm podcast

https://devmode.fm/episodes/hype-for-hyperscript

The new _hyperscript Cheatsheet

Keeping all the features of event listeners, ways of finding elements, the intricacies of variable scopes and the syntax of every single command just a glance away — the _hyperscript cheatsheet!

hyperscript-cheatsheet.pdf

The Prayer Journal Pentalogy reached its thrilling conclusion

When I say “simplicity,” I am speaking of a lack of complexity, not a naïveté of approach.

If you’ve made anything with htmx/_hyperscript, please share it! It’s lovely to hear from you. 💙

https://blog.bitbadger.solutions/2021/a-tour-of-myprayerjournal-v3/conclusion.html

Avoid listening to `htmx:load` when you have big responses

htmx on Spring blog

HTMX is a library that allows you to access modern browser features directly from HTML, rather than using javascript. It is very easy to use and well suited to server-side rendering because it works by replacing sections of the DOM directly from remote responses. It seems to be well used and appreciated by the Python community.

— Dave Syer, Client Side Development with Spring Boot Applications, Spring Blog

https://spring.io/blog/2021/12/17/client-side-development-with-spring-boot-applications

How to submit an htmx form using JavaScript?

TL;DR: Use form.requestSubmit() instead of form.submit().

Wrt. the `closest` expression

What do you think about closest?

tables 🤮

(see StackOverflow, Form inside a table)

Issue № 7: Midterm Season

2021-12-05T00:00:00Z

Several htmx/_hyperscript related blog posts were published

Ben Croker, A First Look at _hyperscript

Ben Croker @ben_pylo
What do locality of behaviour, scripting and poetry have in common? I gave _hyperscript by @htmx_org another chance and I like what I see!! #CraftCMS

Twitter · November 30, 2021, 8:17 PM UTC

https://putyourlightson.com/articles/a-first-look-at-hyperscript
Daniel - East TN#0482, A Tour of myPrayerJournal v3

A blog series on rewriting a web app in htmx.

[…] eliminates a host of synchronization issues with SPAs and their associated APIs - duplicating shapes of data, ensuring calculations are in sync, etc.

Fubarrr ↪ Re. Daniel - East TN Part 3 (post 3) is up… “… demonstrates that htmx is a true batteries-included SPA framework” 👈 now there’s a phrase you don’t hear everyday 😁 👍 👍 1

Discord · November 30, 2021, 12:41 AM UTC

https://blog.bitbadger.solutions/2021/a-tour-of-myprayerjournal-v3/introduction.html
SirRichard#6804, Interactive zero Javascript sites with django

How to rocket-start your frontend with HTMX

https://medium.com/ambient-innovation/interactive-zero-javascript-sites-with-django…

_hyperscript is looking for contributors to help with documentation

Would you like to become that someone else? We have amazing benefits!

a friendly community of smart programmers that don’t take themselves too
seriously
an exciting, experimental, fun-focused yet refreshingly utilitarian project
creative freedom over your work
14% raise every year (this is a volunteer job)
a maintainer that will edit your work when you’re asleep (that’s me) (i’ll only do minor changes)
I forgot what I was talking about

RichardG launched Comedy Wham with htmx, _hyperscript and Sprig

💙

https://comedywham.com/events

HTML as a database?!

Never change, HTMX Discord 💙

Johan (Commspace) is still using intercooler.js

They didn’t end up using a new release, since Commspace was using a custom build anyway. However, it’s a good reminder that Intercooler is still supported (to the extent that any non-profit open source project can be “supported”, at least).

bpamiri#9470 is looked into using htmx with ColdFusion

💙 Welcome aboard!

Issue № 6: New Releases

2021-11-21T00:00:00Z

htmx 1.6.1 out soon

_hyperscript 0.9 released

Highlights include:

when clause for show
ES Module support
continue for loops
and much more!

https://hyperscript.org/posts/2021-11-02-hyperscript-0.9-is-released/

_hyperscript noticed by openxtalk.org

OpenXTalk is the working name of a fork of the now unsupported LiveCode Community project, with the goal of keeping a FREE OPEN SOURCE xTalk language publicly available.

— OpenXTalk

xTalk is a loosely defined family of scripting languages. The mother of all xTalk languages is HyperTalk, the language used by Apple’s HyperCard environment.

— xTalk from Wikipedia, the open encyclopedia

While _hyperscript takes a lot from its ancestor HyperTalk, it’s designed for HTML through-and-through. However, it’s also designed to be extensible — if you can write JavaScript, you can add features to _hyperscript. An end-user app builder like HyperCard for our decade is a very noble (and fun) goal.

💙 to the OpenXTalk project!

https://openxtalk.org

“Intentionally unscalable”

WE CAN’T LET HIM KEEP GETTING AWAY WITH THIS.

Josef Erben used htmx to build hoarddit.com

Feeling empowered by the good documentation and useful examples on the HTMX website, we decided to implement infinite scrolling. Half an hour later, we had the first working version.

In a rush of euphoria, we decided to HTMXize the whole project; liking, unliking, selling, buying and updating the balance. It went quite well, we implemented all those features without duplicating code in the backend and on the client.

[…]

HTMX truly feels like an extension of HTML, something that should have been standardized and included in HTML a while ago.

the first big wave of public htmx apps is coming folks

— @htmx_org

💙

https://www.joseferben.com/posts/hoarddit_a_website_to_discover_art/

htmx vs _hyperscript, when to use which?

Issue № 5: Perfectly On Time

2021-11-14T00:00:00Z

Mother of All Demos, brought to you by Commspace

Now, THAT’S what I call a TRUE SPA! My chatlog widget doesn’t support link embeds anyway, so you’re fine :)

htmx in Craft CMS?

If this PR gets merged, htmx will have a lot more cred… (not that we need it, of course)

💙 to Craft CMS!

Daniel’s F# library, Giraffe.Htmx, was released

Giraffe.Htmx provides extensions that facilitate using htmx on the server side, primarily reading and setting headers. Giraffe.ViewEngine.Htmx provides attributes and helpers to produce views that utilize htmx. Both can be installed from NuGet via standard methods.

Introducing Giraffe.Htmx. https://blog.bitbadger.solutions/2021/introducing-giraffe-htmx.html

Big updates to the `show` and `hide` commands in _hyperscript

1cg one common pattern I note is the
if cond
  show
else
  hide
end
pattern

1cg is there a good syntactic way to wrap that up?

1cg show <target> when <cond>?

— November 11, 2021, 7:23 PM UTC

benpate There’s so much good stuff happening in this thread. You’re all right on target, working to make things better.

I’ll add one small idea, that code that reads in a more declarative way is often easier to understand. I know hyperscript is not a declarative language, but there are a few bits that blue the lines.

So, I really like syntax along the lines of show .foo when it’s innerHTML contains “bar”.

I think some kind of “undo” stack might also be helpful here. Something like a function that performs its operation, and retina a function that can restore things to their previous state. I shared an article along these lines before, from the go community. Let me know if it would be helpful to pull up again.

Deniz Akşimşek
-- one line search, fits within column 80
on input show <li/> in me when its textContent contains my.value
Deniz Akşimşek ↪ Re. benpate There’s so much good stuff…
action: add .foo to me
...
rollback action

Discord · November 10, 2021, 3:55 PM UTC

show thing when condition has been implemented and will be there in the new release. As for everything else, that’s where you all come in.

Ben Croker wants IDE tooling for _hyperscript

There’s an unwritten rule about suggesting features on the htmx discord… but then, Ben did buy me coffees.

kirbyzone and yours truly had a grand debate

It’s a little too long to copy here, but you can read it all on the Discord and pitch in with your own opinions.

(Be warned: If your opinion is good, you will probably be asked to implement it. I joined the server for REST memes and look where I ended up…)

Carson reviewed a React codebase

Forum vs. Discord?

Reading the full discussion is highly recommended. What do you think? Would you use such a forum? Do you prefer forums to chats? Do you know of any alternative solutions? Tell us in the Discord, on Twitter (@htmx_org), or email the editor (deniz+thisweek@denizaksimsek.com).

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

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

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

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

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?

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:

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

We discussed debugging/inspection tools for htmx

htmx made it to the Twitter “Explore” page

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

Daniel used HTML as an API for a side project

Daniel pedantic bloggers asked about how to write htmx & _hyperscript

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

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

💙💙💙

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.

Recordings are available at the DjangoCon US YouTube channel.

💙 to DjangoCon organizers & the whole Django community!

Rashad started a lovely conversation about Haskell & htmx

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

monadposting on main

tinycode2 talked about using htmx with microfrontends

Daniel made Bootstrap modals work with htmx

And later:

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

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

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

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.

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

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

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

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.

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!