Issue № 5: Perfectly On Time
Mother of All Demos, brought to you by Commspace
Fubarrr Ok, time for a bit of show and tell! We’ve just added a command palette into our React app, so I thought I’d show you what a TRUE SPA looks like. You’ll also see a bit of our async backend processing behaviour, complete with UI progress bars, individual list item status updates, etc. https://youtu.be/zHoAwVcSLdE 👍 4 😲 2
Fubarrr Ok ok… just before @1cg has a heart attack - that ain’t no React app ☝️😁 That’s a good old traditional MVC Java app, powered by htmx and hyperscript 💪 All of the page loading and most of the JS UI widget behaviour is also driven by htmx and/or hyperscript. There’s some gratuitous web socket usage to update the individual table line item statuses during the latter part of the clip … but for the rest it’s html fragments all the way, complete with URL pushing and history support (oh, and not a single full page refresh anywhere of course)
Fubarrr (no idea why the video preview image isn’t showing up 🤷♂️ )
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?
andrew.welch Hey @1cg look at this PR for Craft CMS carefully 🙂 https://github.com/craftcms/cms/pull/10075
Conditions + element source improvements by brandonkelly · Pull Req… Overview This is a bit of a loaded PR. It does the following:
Moves element index settings to the project config Adds a condition builder framework (powered by Htmx) Adds element index filtering (…
Adds a condition builder framework (powered by Htmx)
1cg 🤯
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
Daniel - East TN It’s live! https://github.com/bit-badger/Giraffe.Htmx/tree/v0.9.1
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
endpattern
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.valueDeniz Akşimşek ↪ Re. benpate There’s so much good stuff…
action: add .foo to me
...
rollback action
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
As a developer, I see the appeal of @Alpine_JS, but _hyperscript by @htmx_org makes a compelling case for readability and “Locality of Behavior”. The main downside is having to learn a new grammar, and this is where autosuggest can help, now we just need someone to build it!!
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
kirbyzone Would you forgive me if I became the ‘voice of dissent’ here, as far as let goes?…
[…]
if you want to copy and format that whole conversation, feel free https://github.com/dz4k/this-week-in-htmx
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
i recently reviewed a moderately sized react/graphql/rails code base done by very competent, senior developers
i have never been more bullish on htmx
never
Forum vs. Discord?
alfonsrv Use forums rather than Slack/Discord to support developer community: https://www.mooreds.com/wordpress/archives/3451
alfonsrv Some interesting thoughts here. Thought I’d share
September 11, 2021, 7:39 PM UTC
kirbyzone Kirby uses Discourse - you can see it here: https://forum.getkirby.com/
1cg ok, that’s what we tried to use
1cg it got shut down for lack of use 😑
kirbyzone I suspect your experience would probably be different now - based on the amount of traffic I’ve seen here in the past week or two.
1cg 🙂
1cg OK, maybe in the newyear 👍 1 🎉 1
benpate We do have several places for discussions already – Github, Discord, Stack Overflow, Reddit. I’m all for having the best tools for the job (and Discord is NOT great for many uses) but adding yet another channel should be done carefully.
benpate I think the biggest issue right now is that questions and issues don’t immediately go to Github or Stack Overflow.
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+