https://htmx.org logo
Join Discord
Powered by
# htmx-general
  • a
    That means that if one uses etags to minimize bandwith, it will only benefit of it on consecutive calls for the exactly same content. It the client keeps alternating between full page and partial content, there will be no benefit.
  • m
    Can you write your conclusions up? Would like to include in the docs. Also still considering a cache buster option for htmx
  • a
    Conclusions: 1) Re Last-Modified/If-Modified-Since: If you have a route on your server which: - Returns a different response depending on the 
    HX-Request
    request header. - Includes the 
    Last-Modified
    response header to allow the client to cache the response. - Processes 
    If-Modified-Since
    request headers to return a 
    304 Not modified
    , telling the client to use the cached response. Then: - The server response must also include 
    Vary: HX-Request
    response header alongside the 
    Last-Modified
    header. This tells the client to cache by URL and HX-Request header value, instead of only by URL. 2) Re Etags. If you have a route on your server which: - Returns a different response depending on the 
    HX-Request
    request header. - Includes the 
    Etag
    response header to allow the client to cache the response. - Processes 
    Etag
    request headers to return a 
    304 Not modified
    , telling the client to use the cached response. Then: - The server must generate a different 
    Etag
    value for each response. Ideally, it should be some kind of hash of the response, making it unique. 3) How this affects htmx? No changes on htmx are needed. Everything is working according to HTTP specs.
  • a
    I'm not sure how to write all that in a more clear English :\
  • m
    there are two hard problems in computer science
  • m
  • m
    anyone willing to try idiomorph out, lmk
  • m
  • m
    Copy code
    html
<body hx-ext="morph">
  ...
  <button hx-get="/whatever" hx-swap="morph">
    Morph It
  </button>
  ...
</body>
  • m
    offers an outerMorph and innerMorph concept, lining up w/ 
    outerHTML
    and 
    innerHTML
    (open to name suggestions)
  • m
    tests are spartan, but not non-existent
  • p
    Very interesting! Would be good to add this to the htmx docs for future reference.
  • b
    Hi all, would anybody have some guidance on how to integrate HTMX with Leaflet? (I did search and saw a few messages but not a pattern on how to get started).
    Copy code
    <script>

    // Initialize the map instance:
    var map = L.map('map');
    
    // Map tiles:
    [...]
    
    // Create a markers:
    var marker = L.marker([51.5, -0.09]).addTo(map);
  
</script>
    This is the basic Leaflet which gets added to bottom of the HTML. How could we dynamically add markers? My first instinct was to insert a 
    div
    and use 
    hx-get
    inside the 
    script
    tag -- do forgive the HTML/JS newbie!! What I tried:
    Copy code
    <script>
    [...]
    <div hx-get="{% url 'marker_data' %}" hx-trigger="every 5s">
    </div>
</script>
    The 
    marker_data.html
    (Django)
    Copy code
    {% for city in cities_all %}
    var marker = L.marker([{{city.latitude}}, {{city.longitude}}]).addTo(map)
{% endfor city in cities_all %}
  • b
    To answer my own Q: In the body of the HTML:
    Copy code
    <div id="markers" hx-get="{% url 'marker_data' %}" hx-trigger="every 10s"> </div>
    In the Leaflet script:
    Copy code
    document.getElementById('markers');
    In `marker_data.html`:
    Copy code
    <script>
    {% for city in cities_all %}
        var marker = L.marker([{{city.latitude}}, {{city.longitude}}]).addTo(map)
    {% endfor city in cities_all %}
</script>
    Very satisfiying to see these markers appear on the map like this!
  • m
  • m
  • m
    we have a first alpha extension for htmx, if you want to try out morphing in htmx
  • b
    Looks like the template fragments essay is 404'ing https://htmx.org/essays/essays/template-fragments/
  • g
  • b
    Oh yeah. Link on the page is broken https://htmx.org/essays/
  • b
    Mea culpa. Forgot the slash at the start.
  • w
    Is there a way to use the disconnection of a sse or websocket stream as a 
    hx-trigger
    ?
  • b
    If the socket gets an error then it emits an error event. Doesn’t look like there’s more detail than that.
  • b
    If the socket gets an error then it emits an error event. Doesn’t look like there’s more detail than that.
  • b
    Not sure if @gorgeous-ghost-95789 has any more insight as I know he’s touched the code in the past. Maybe a PR with some more events sprinkled in? It would be nice to know if a connection has dropped etc
  • g
    @bland-coat-6833 is right. 
    hx-trigger
    would need to listen for an event. We’d have to double check to be certain, but I think the extensions just try to reconnect instead of notifying you of a disconnect. It shouldn’t be too hard to add an event into them, though.
  • e
    Question about the new idiomorph plugin: Will it preserve the state of CSS animations? For example, say I swap
    Copy code
    html
<div class="animation" id="my-div">text content</div>
    with
    Copy code
    html
<div class="animation" id="my-div">different text content</div>
    Should the animation continue smoothly? My use case is updating an animated progress bar--not really critical.
  • h
    I have an OOB swap: 
    <li hx-swap-oob="beforeend:#messages">{% include "components/toast.html" %}</li>
    that gets included w/ a template response, would you expect the resulting dom to include the li or not? Currently it doesn't and just has the inner contents
  • m
    i would expect it to include the li
  • m
    seems like a bug
1...824825826...1146Latest