https://htmx.org logo
Join Discord
Powered by
# πŸ”₯-django-htmx
  • a

    adamant-exabyte-92636

    01/05/2022, 1:25 PM
    or
    on click hide #target with slide
  • f

    fresh-controller-36545

    01/05/2022, 1:25 PM
    Interesting. Looks like Animate.css (https://animate.style/) could also be useful here. What about dragging+dropping elements in a list/table and sending the new ordering to the backend? Think that's within the realm of possibility?
  • f

    fresh-controller-36545

    01/05/2022, 1:25 PM
    On a similar note I have also thought about pairing Alpine.js with HTMX, but Apline seems like more of a front-end framework - as in making it easy to manipulate elements and displaying that in the frontend. Not sure how that state/data is then supposed to synced to the backend though
  • f

    fresh-controller-36545

    01/05/2022, 1:26 PM
    But it's cool that you can simply add new functionality/verbs(?) to Hyperscript like that.
  • a

    adamant-exabyte-92636

    01/05/2022, 1:30 PM
    Yes the sliding thing is a bit contrived and could definitely be done with CSS rather. But yes, dragging and dropping stuff is definitely doable - @User already created a "draggable" behaviour showcasing the possibility. And then yes, hyperscript is extendable via custom commands and in some cases like the example above, customising existing commands (that's an example of customising the existing show/hide commands)
  • f

    fresh-controller-36545

    01/05/2022, 1:31 PM
    See link; sorry. Might have been confusing
  • a

    adamant-exabyte-92636

    01/05/2022, 1:34 PM
    alpine and hyperscript are much closer in what they are trying to achieve than say alpine and htmx. Alpine is very good, comes with a small set of things you need to grok and is generally quite useful. It fits very well with htmx and people often use the 2 together: htmx for the dom swapping stuff and alpine for the purely client-side interactivity stuff. hyperscript plays the same role in that pattern as alpine and you could opt to use it instead of alpine, together with htmx. Since htmx emits a bunch of events and hyperscript likes to react to events, they work very well together.
  • f

    fresh-controller-36545

    01/05/2022, 1:40 PM
    Yeah, no I get that. But from what I have gathered, Alpine.js seems to be tailored not only towards intractability but mainly frontend-state keeping e.g. clicking a button and incrementing a number and having multiple Alpine.js-defined variables manipulated. But what about syncing state between the front- and backend?
  • f

    fresh-controller-36545

    01/05/2022, 1:41 PM
    Sounds like e.g. having to keep an invisible form element and submitting that via HTMX whenever e.g. the button-counter is pressed+increased or when the order of a list is modified.
  • a

    adamant-exabyte-92636

    01/05/2022, 1:43 PM
    Oh yes, if reactivity is important... alpine does have a light-weight mechanism for that. ito syncing state.... that's why I don't go for alpine and the like... I like to just swap mostly html (with only the occasional sprinkling of json), which means I don't really go for the reactive stuff. If I want some other part of the page to update, i.e. either expand the htmx fragment target, or I trigger an event-based update (or in a few cases use htmx's dependency plugin.. since I came from intercooler where we used this a lot)
  • a

    adamant-exabyte-92636

    01/05/2022, 1:45 PM
    In other words... event-based, server-side instead of reactive client-side updates for the most part
  • a

    adamant-exabyte-92636

    01/05/2022, 1:47 PM
    I mean, if I can update the screen via server-side updates quicker than this guy can draw, then I think I'm ok 😁

    https://www.youtube.com/watch?v=DSd8V-kb6Roβ–Ύ

  • f

    fresh-controller-36545

    01/05/2022, 1:47 PM
    Mmm well; also came from playing around with intercooler a bit and could solve most things so far by simply adding
    hx-action
    back. Even though this obviously relies on a JavaScript function being defined in a JS file somewhere, which seems to be the whole gist of what hyperscript is about - eliminating JS-based functions for small interactivity - if I understand it correctly then
  • a

    adamant-exabyte-92636

    01/05/2022, 1:47 PM
    Exactly!
  • f

    fresh-controller-36545

    01/05/2022, 1:47 PM
    Please don't judge me. I think it's painfully obvious I don't know much about JS.
    Copy code
    javascript
    document.addEventListener('htmx:afterOnLoad', function(evt){
      var fnstring = evt.detail.elt.getAttribute('hx-action');
      if (typeof fnstring === 'undefined' || fnstring === null) return
      return Function('"use strict";return (' + fnstring + ')')();
      var fn = window[fnstring];
      if (typeof fn === "function") fn();
    });
  • a

    adamant-exabyte-92636

    01/05/2022, 1:50 PM
    ☝️ now that just hurts my brain. You could replace that as an hyperscript attribute on the element directly, something like this:
    Copy code
    <button _="on htmx:afterOnload doSomethingInANormalJSFunction()">
  • f

    fresh-controller-36545

    01/05/2022, 1:51 PM
    Just one thing that's left unclear now - how are the
    draggable
    changes @User came up with sent/synchronized to the backend? Assume it's something like simple table with ordered elements ... or if we want to be super advanced - Trello.
  • a

    adamant-exabyte-92636

    01/05/2022, 1:55 PM
    Hmmm... that depends a little on how you want to go about it. I guess you could trigger an hx-post as soon as the drop completes and use hx-vals to include custom params to send to the backend, along with hx-swap="none"
  • a

    adamant-exabyte-92636

    01/05/2022, 1:56 PM
    You could theoretically also do a post with the hyperscript fetch command, but I find that quite counter-intuitive (the clue is in the name 'fetch' 😁 )
  • a

    adamant-exabyte-92636

    01/05/2022, 1:57 PM
    If you're doing stuff like that to kind of resuscitate the
    ic-action
    attribute... then I'd defintely replace that with hyperscript instead
  • a

    adamant-exabyte-92636

    01/05/2022, 2:01 PM
    But also - no judgement from me - my Javascript looks a lot like this πŸ˜‚ Which is why it gives me such great pleasure to rip out reams of stuff like that and replace it with one or 2 inline hyperscripts
  • f

    fresh-controller-36545

    01/05/2022, 2:04 PM
    tbh even with HTMX, I'm not sure I'm using it right when you bring up things like `hx-val`; I really only use
    hx-trigger
    ,
    hx-get
    ,
    hx-post
    ,
    hx-indicator
    ,
    hx-target
    ,
    hx-swap
    ,
    hx-swap-oob
    ,
    hx-boost
    and
    hx-confirm
    🌚
  • f

    fresh-controller-36545

    01/05/2022, 2:05 PM
    hx-val
    seems like a slippery slope into rebuilding an AJAX endpoint πŸ˜›
  • a

    adamant-exabyte-92636

    01/05/2022, 2:05 PM
    No no that's perfect!
    hx-vals
    is definitely only necessary when you're doing something a bit special
  • a

    adamant-exabyte-92636

    01/05/2022, 2:06 PM
    Exactly πŸ˜‚
  • f

    fresh-controller-36545

    01/05/2022, 2:06 PM
    hehehe I bet; I mean gotta say the way Hyperscript looks is quite compelling - can't deny that
  • a

    adamant-exabyte-92636

    01/05/2022, 2:07 PM
    Perhaps one of the other folks can give us a good example of how to persist state back to the server in a elegant way, post changing order of things via dragging and dropping. Paging @User , @User , @User , @User
  • f

    fresh-controller-36545

    01/05/2022, 2:10 PM
    Overall I guess it makes sense; you made a good point. Thanks for taking the time. Been contemplating & trying out basic Django design patterns for the last 2yrs now; similarly to the frontend I just don't want to amess a lot of technical depth for a 20apps+ web-application.
  • a

    adamant-exabyte-92636

    01/05/2022, 2:11 PM
    You're very welcome!
  • g

    gorgeous-ghost-95789

    01/05/2022, 2:58 PM
    Basically, try triggering an event that htmx can pick up. I think there’s a demo of this using sortable in the htmx site.
1...353637...100Latest