https://htmx.org logo
Powered by
# htmx-general
  • c
    "The default settle delay is 100ms" what's the reason for this? I found out after spending a long time trying to figure out why there was delay when render the request
  • m
  • c
    okey thanks, but why not default it to 0? I'm new to this framework, but I first thought the framework had some performance issues.
  • c
    ..then i read the docs.. 😉
  • m
    We give the DOM a few milliseconds between swapping the content and "settling" where we swap the old metadata (e.g. classes) for the new metadata. This allows you to use CSS transitions between the two states. e.g if you have:
    Copy code
    html
  <div id="div-1" class="class1">...</div>
    and send down:
    Copy code
    html
  <div id="div-1" class="class2">...</div>
    you can write a css transition between the two and it will show up during the swap. Maybe we should drop the default to 10ms? Anything under 100ms shouldn't be noticeable compared w/ most network latency, is my understanding. (nb. you can update it yourself using 
    htmx.config.defaultSettleDelay
    https://htmx.org/api/#config
  • m
    I think you can also add a settle modifier to the swap directive. From the repo tests 
    <div id='d1' hx-get='/test' hx-swap='outerHTML settle:10ms'></div>
  • m
    yep
  • m
    @User I might need your drawing skills to properly document how swap/settle works. Are you open to that?
  • c
    thank you. in my case I was experiencing flickering and a "laggy" transition. I was using the same classes for both states, and also a 3rd party fire in onLoad.
  • c
    when I set default to 0, it was all smooth
  • m
    Can you set to 10 and see how it looks?
  • c
    yes, will do it tomorrow 👍
  • a
    is there a way to reset 
    hx-select
    to the entire response? IE, a parent DOM element has an 
    hx-select="#content"
    , but for a child dom node I want to just use everything we get back?
  • m
    Not sure it will work, but you can try an empty attribute value 
    hx-select=""
    in the child element.
  • m
    It seems to me that should work based on the code:
    Copy code
    js
        function maybeSelectFromResponse(elt, fragment) {
            var selector = getClosestAttributeValue(elt, "hx-select");
            if (selector) {
                var newFragment = getDocument().createDocumentFragment();
                forEach(fragment.querySelectorAll(selector), function (node) {
                    newFragment.appendChild(node);
                });
                fragment = newFragment;
            }
            return fragment;
        }
  • a
    oh, brilliant. I don't know why I didn't think to try that
  • a
    thanks!
  • m
    we really need to support a standardized reset mechanism
  • m
    that will be my next task
  • m
    a first pass at explaining REST: https://htmx.org/essays/rest-explained/
  • m
    I tried to structure it around Fielding's dissertation. Not sure I like how it turned out.
  • g
    > Again, you don't need to know much about this, except that Javascript exists, and you shouldn't use it. (I kid. Kinda.) I propose: > Again, you don't need to know much about this, except that JavaScript is the only part that's optional.
  • m
    updated
  • m
    (give the server a sec)
  • u
    Just a note: the href's inside the Uniform Interface section are pointing to 
    /contacts/42/...
    and, I guess, should be 
    /contacts/1/...
  • g
    missing 
    >
  • g
    also you should use more semantic elements when evangelizing html
  • g
    Copy code
    html
<article>
    <p>Name: Joe Blow
    <p>Email: joe@blow.com
    <ul>
      <li><a href="/contacts/42/edit">Edit</a>
      <li><a href="/contacts/42/email">Email</a>
      <li><a href="/contacts/42/archive">Archive</a>
    </ul>
</article>
  • m
    everything isn't a div?
  • d
    I'm exploring SSE. It looks like the swap attribute is used to indicate which element is replaced by the next event sent from the server. It appears as though I will only ever see the most recent event. Is there a mechanism to append incoming events? Something similar to hx-swap that has options to insert responses before first child or after last child of target element?
1...327328329...1146Latest