https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • s
    What are 0-dependency libraries that are good?
    g
    l
    • 3
    • 14
  • e
    ya it would be kind of cool to have htmx broken into chunks and only the functionality that is being used gets sent to the page...
  • e
    may be a lot of effort and very little value tho
  • g
    extensions are kind of that
  • e
    ya
  • e
    you opt into them by adding a script tag. The thing Qwik does would be like if htmx loaded the extension right before it needed it for you
  • g
    i can't see how htmx could achieve that without violating HOWL
  • s
    Extensions are very heavyweight actually. On every swap htmx goes through DOM recursively and looks for extensions. This takes a lot of time. I had to rewrite parts of app in my own custom coded htmx-kindof library, that is focused on speed instead of extensibility. And it works 5x times faster on big tables.
  • e
    nice
  • b
    Did you spot any scope for an optimisation?
  • s
    What do you mean?
  • b
    Just wondering whether you see what was the slow path. My naive thinking is that there could be something that could be cached but that will probably bring its own problems.
  • f
    Alright time to see how well I can make a personal project using htmx, hyperscript and missing.css and how far I can take it, gonna be a good learning phase
  • a
    to submit a form any time an input on the form is changed do I put the hx-trigger on the form or on the child element? I have it on the form right now and a web request is indeed being sent but I am actually have two requests being sent. One has the form contents, one is a completely empty post
  • a
    Can you use trigger on the form with 
    from:
    modifier using a css selector for the inputs?
  • a
  • a
    The empty form content seems unexpected. If you want the whole form contents to be submitted each time any of the inputs are changed then put the trigger on the form.
  • m
    i would use 
    monitorEvents()
    in chrome to see where the 
    changed
    event is coming from. Maybe you can use throttle or an event filter to pick out the one you are interested in. Overall, your approach sounds right to me.
  • s
    Swap logic is slow. It's going recursively for all the children and calling getExtensions() for each.
  • m
    Is there a way to specify multiple swaps? I have an input box. When I click a button, the text of the input box is placed inside another div. When this happens, I would like to also clear the input box. Any ideas on how to pull this off? I think I need to use htmx:afterSwap, but I have never used that before. Reading the docs now...
  • s
    HX-Trigger-After-Swap
    is what you want. https://htmx.org/headers/hx-trigger/
  • i
    I have a project where using the back button on one particular page results in a 3 second delay before the page is responsive again. The page is not particularly large. This only happens in mobile browsers; I have tried Firefox, Safari and Brave, and the 3 second delay is consistent. On desktop it does not happen. Has anyone experienced something similar and can point me in the right direction for debugging it?
  • a
    Presumably you think something in htmx is causing this? If so then 
    <script>htmx.logAll()</script>
    in your page and then use something like Safari Web Inspector (connecting via your desktop machine). Been a while since I’ve done this but these instructions look familiar https://www.idownloadblog.com/2019/06/21/how-to-use-safari-web-inspector-ios-mac/
  • i
    Thanks for the pointer. I’m on Linux, but will take a look if it will work there as well. I’m quite certain it’s something in HTMX, because going back from any other page to /dash does not cause the delay.
  • i
    I will take a closer look at your suggestion when I’m at a computer again.
  • i
    So it turns out remote debugging on an iOS device is only possible from a Mac. Guess I should have known… This goes on the list of problems I will inspect at some other time, and maybe work around until then. Who knows, maybe I accidentally fix it while doing something else. 😂
  • m
    How might I have a trigger of Key Up if the key is enter (return)? I am trying to emulate this kind of functionality:
    Copy code
    js
        node.addEventListener("keyup", ({key}) => {
          if (key === "Enter") {
            this.onSendButton(chatBox)
          }
        })
    I found examples like 
    hx-trigger="keyup changed delay:500ms"
    in the docs, but I don't see anything on listening to specific keys.
  • g
    Try 
    hx-trigger="keyup[key==Enter]"
  • g
    Htmx lets you filter on specific properties in the event. The thing that always throws me is the 
    ==
    because it's using JS syntax for the evaluation.
  • m
    Hmm. That didn't seem to work, but when I wrapped the input in a form, I just realized pressing enter automatically submits it, so I think I don't actually need it.
1...105210531054...1146Latest