https://htmx.org logo
Join Discord
Powered by
# 🔥-django-htmx
  • a
    or 
    on click hide #target with slide
  • f
    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
    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
    But it's cool that you can simply add new functionality/verbs(?) to Hyperscript like that.
  • a
    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
    See link; sorry. Might have been confusing
  • a
    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
    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
    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
    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
    In other words... event-based, server-side instead of reactive client-side updates for the most part
  • a
    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
    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
    Exactly!
  • f
    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
    ☝️ 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
    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
    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
    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
    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
    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
    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
    hx-val
    seems like a slippery slope into rebuilding an AJAX endpoint 😛
  • a
    No no that's perfect! 
    hx-vals
    is definitely only necessary when you're doing something a bit special
  • a
    Exactly 😂
  • f
    hehehe I bet; I mean gotta say the way Hyperscript looks is quite compelling - can't deny that
  • a
    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
    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
    You're very welcome!
  • g
    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