https://htmx.org logo
Powered by
# htmx-general
  • m
  • e
    @adamant-state-54102 I totally agree. The only thing htmx and Alpine.js have in common really is the Locality of Behavior aspect. I just brought it up because it's an easier transition from typical JS frameworks -> Alpine vs. typical JS frameworks -> hyperscript. But I definitely prefer hyperscript with htmx because as I mentioned, I found there was some friction and some workarounds I had to implement when using Alpine with htmx. htmx and hyperscript work together like a charm.
  • a
    Right, so rather than create a whole server-side route to re-render with a class changed, you'd just use Alpine? Is alpine actually what you'd use in that case? For something that simple I might be inclined to just use inlined vanilla JS, but Alpine is nice enough too... I am just always relectant to bring on new deps.
  • m
    vanillajs is fine too, especially for simple stuff.
  • m
    I mean, if you are asking me what to use, I'm gonna say hyperscript šŸ™‚
  • h
    I use a lot of alpine, mostly around transitions and simple ux like modals and flyout menus
  • h
    I have found that I never use the templating features but often use visibility and event binding
  • a
    are you using their paid ui component lib (https://alpinejs.dev/components) for modals, etc?
  • h
    Yeah I've been using that and tailwindui
  • h
    The paid styling
  • j
    Was thinking of nominating @mysterious-toddler-20573 for the JavaScriptLandia Awards, but there's no category for Pathfinder Award for Meme-Driven Development. https://docs.google.com/forms/d/e/1FAIpQLSdjnMJaHuOX3bz0-1-GMILNGMSIuHfFG6jEQWVs3LK7fGGStA/viewform
  • s
    hi everyone, can somebody throw more light on when to use hx-target and hx-select
  • c
    I try to make simple sets of sentences to help me remember what does what "(hx)include in the request" "(hx)select from the response" "(hx)target to swap"
  • c
    nice and succinct.
  • g
    Iā€™d suggest this component library: https://shoelace.style/components/select. It populates server side, has a good number of options -including multiselect, very nicely designed, well maintained, super quick to add, well documented, has useful props, methods, and events, and works with htmx with the addition of a few minor attributes.
  • a
    > Shoelace provides a collection of professionally designed, highly customizable UI components built on a framework agnostic technology. I love this mission. Their multi-select, unfortunately, doesn't have the "fuzzy search filter, enter to select, keep typing to choose another" functionality that I need.
  • w
    any pointers on how to use tailwindcss animations with htmx, I am having a hard time mapping enter...., leaving.... to htmx animations
  • b
  • u
    Copy code
    <div>
         <input name="email" type="email" value=""/><br>
         <input name="password" type="password" value=""/><br>
            <input type="hidden" name="csrf_token" id="csrf_token" value="{{ csrf_token }}"><br>
            <button 
            hx-post="/signup"
            hx-include="[name='email'],[name='password'],[name='csrf_token']"
            >Sign In</button>
    </div>
  • u
    how can i send values as json ?
  • m
    You'll want the json encoding extension: https://htmx.org/extensions/json-enc/
  • w
    QQ: is there a one time htmx loaded event?
  • g
    No, but you could probably hook into one of the standard browser events (looking at you, 
    window.onload
    )
  • u
    @mysterious-toddler-20573 thanks
  • s
    actually on validation error we are sending back oob which is some content any ways. I am advocating to use 400 as we are using oob here for error case. also we would instead use 200 if we want target to be replaced as well as oob. not sure why we have to be going for 204 when it means no payload. we seem to be wanting to use 204 with oob content and still refer to it as no content. what is issue with 400 ?
  • p
    Hello, I have a page with two tabs and each tab is lazy loaded with htmx. In one of my tab (tab1) I have a tag where a part of the code should only be runned once. I'm wondering if the browser is always executing the tag after swapping ?
  • m
    yes, it will. If you want it run once, the right thing is to use a global guard against multiple evaluation
  • s
    Hi guys, could someone send me the meme image of the timeline (first basic website, then complicated JS frameworks, then easy HTMX website)? I cant seem to find it
    m
    • 2
    • 2
  • s
    @mysterious-toddler-20573 any one working on this feature ?
  • m
    You can modify the swapping behavior to your preferences: https://htmx.org/docs/#modifying_swapping_behavior_with_events
1...646647648...1146Latest