https://htmx.org logo
Powered by
# htmx-general
  • m
    😑
  • m
    HyperSprink
  • g
    scriptles
  • m
    SprinkleScript
  • m
    SprinkleTalk
  • m
    not the most masculine word, I think we have to all admit
  • m
    this is now a hyperscript naming channel
  • g
    neither am i 🤷
  • g
    jokes aside, Raku (fka Perl 6) has this colorful butterfly mascot partly in order to make the community more accepting of women programmers by being unappealing to misogynistic men
  • g
    it also has a syntax equally intimidating to everyone regardless of gender
  • g
    > htmx discord post in the right channel challenge (IMPOSSIBLE)
  • m
    😑
  • m
    Have you guys compared the new Hotwire to htmx yet?
  • g
    they're similar, but quite different there, i compared them /
  • f
    I was actually just now checking out hotwire/stimulus, and about to go re-read the htmx/hyperscript docs. I think there is some value in the question asked. Seems to me that htmx - and please correct me if I'm wrong - stays closer to the original idea of hypermedia driven interactions as compared to hotwire. Additionally, although not technically a prerequisite, hotwire seems to be geared towards the RoR folks primarily - although I've seen a rendition that leverages Java. HTMX effectively doesn't care, although there are some communities (looking at you Django) that is picking it up more quickly then others. One other noteworthy thing is probably that hotwire specifically pushes (pun) sse/websockets as a key piece. HTMX also provides support for that, but labels it as: These features are under active development, so please let us know if you are willing to experiment with them. (which begs the question: what is the state of sse/websocket in HTMX?). O yes, and then there is Hey which is built using hotwire/stimulus and can be viewed as substantial application showcasing what is possible. (Not that it means a whole lot, but Thoughtworks has put hotwire on the 'assess' category: https://www.thoughtworks.com/radar/techniques/hotwire) On a different note, I've been 'tormenting' my brain thinking about whether I'll/we'll go all-in on HTMX for our next application, or not. I understand we can take a hybrid approach where we create the 'complex' page(s) with a front-end framework (thinking Vue at the moment) and the other (boring?) pages with HTMX. We'll be embedding TipTap (https://www.tiptap.dev/) in this application, along with some other editing controls like can be seen in notion.so (https://www.notion.so). So if this community has any kind of advise - I'll happily take it.
  • m
    that comparison seems reasonable, HTMX is more bottom up and extending HTML when possible, hotwire (well, I guess to be completely correct, turbo) is more of a complete system with its own language (frames) etc. Definitely more of a focus on things like WebSockets, etc. Stimulus I suppose can be compared with hyperscript, but they are really very different beasts, as a cursory glance at the documentation of each shows.
  • g
    stimulus seems like hyperscript behaviors for JavaScript
  • m
    TurboNative and Strada look to be native-integrated technologies, which I have no expertise or interest in at this point
  • m
    that's an interesting comparison
  • m
    regarding going all in on htmx, I'm obviously a fan. I built an app, LeadDyno, all in on it, and it went great (with a rails back end). But I understand being hesitant about it as well. If you mix htmx and vue.js, you can see how far you can push the htmx/hypermedia approach in your app and, if it isn't working out, use vue. Both are pretty incremental (if I understand vue correctly) and so you don't have to make a big up front commitment.
  • f
    Thanks appreciate it! ~ Did you mean this: https://www.leaddyno.com/ (Ah - I see, you are the CTO. Looking at one of the youtube vids - cool!)
  • f
    Following @User example of using HTMX in Spring boot, I'm gradually finding my way. (Thanks Will). One thing that I'm noticing of which I'm unsure about is that HTMX seems to be adding an empty class (i.e. class="") to the element that I'm targeting. Only if that target has a class to begin with, HTMX seems to leave it alone. Is that intended behavior?
    Copy code
    <body>
        <section layout:fragment="content">
            <ul id="collection">
                <th:block th:fragment="greet">
                    <li th:text="${name}"></li>
                </th:block>
            </ul>
            <br/>
            <input id="new-name" name="new-name" placeholder="New name..." required type="text"/>
            <button hx-include="#new-name" th:attr="hx-post=@{/create}"
                    hx-target="#collection" hx-trigger="click" hx-swap="beforeend">Add
            </button>
        </section>
    </body>
    This will result in a DOM that looks like:
  • m
    we add classes during the swapping operation to assist with CSS transitions: https://htmx.org/docs/#request-operations so this is probably a relic of that.
  • f
    Thanks for the pointer - makes sense (in case there is actually a class specified in the content to be swapped in). So, you are saying that this intended behavior - to add a default empty class when no class was present? I'm not judging here, just curious.
  • m
    I wouldn't say it's intended behavior, but I wouldn't call it a bug either. From the DOM API perspective there isn't an empty class, it's just no classes. We added some classes during the transition and then removed them, and apparently when you remove all the classes from an element, the DOM keeps the attribute around. If it causes issues for someone I could see trying to remove the attribute as well, if there are no classes present.
  • f
    No worries.
  • f
    I'm trying to listen to the 
    htmx:afterRequest
    event in AlpineJS - but it seems that that is not working:
    Copy code
    <button hx-include="#new-name" th:attr="hx-post=@{/create}"
                    hx-target="#collection" hx-trigger="click" hx-swap="beforeend"
                    @htmx:afterrequest="console.log('Event')">Add
            </button>
`
  • f
    Any ideas?
  • f
    Specifying the correct case does not matter either.
  • f
    The event is raised by htmx just fine so it seems:
1...353354355...1146Latest