so I am working on a project template that uses django+htmx and I just made a small QoL fix I wanted to share

That will fix django-debug-toolbar to be htmx aware

specifically with boosted links

Ok actually getting debug toolbar and htmx to play 100% correctly together was more work than I expected

it works pretty well though I gotta say

you click around triggering hx events and you get sql/cache/cpu timing information on just the htmx request and it slides right in

there's a history tab in the toolbar as well that lets you go back and see a log of all the hx events and the initial load

I think the next thing to do with this would be to make a panel that snapshots dom state right before the hx event and associates that with the history tab so you can do time travel debugging

gonna work on that this weekend after I make some more progress on the template

and hopefully they merge

What do you think about this integration to lazy load images on a page using django? # html to load image (send a post with img source and image dimensions)

<div hx-post="{% url 'lazy_image' %}" 
      hx-vals='{"src": "{% static 'avatars/first.jpg' %}", "height": "280", "width": "320"}' 
      hx-trigger="load">

      <img class="htmx-indicator" width="150" src="/img/bars.svg"/>
</div>

# view to return the image html

def lazy_image(request):
    src = request.POST.get('src', None)
    height = request.POST.get('height', None)
    width = request.POST.get('width', None)
    img = f'<img style="padding-right: 1vw;" height="{height}" width="{width}" src="{src}">'
    return HttpResponse(img)

Does this makes sense for you? im not sure if this is a bad practice or if there is a better way to do it *I dont like that it makes 1 extra request, but im not sure it thats the only way of doing it

Hi! I think I understand your implementation, using the

hx-post

to request the image tag from the

lazy_image

view. I haven't tried it but at first glance I think it could do the trick. However, I don't understand why you are POSTing with

hx-post

instead of GETting the image (with

hx-get

). Usually POST requests are used when you want to modify a resource in the server, whereas GET requests make more sense when you want to fetch information from the server (in your case, the image tag). I think it would make more sense to use

hx-get

here. If you need to pass parameters to the GET request (as you would with regular query parameters), I believe you can use https://htmx.org/attributes/hx-params/ for that purpose.

Another thing I've realized: can you not use simply the

loading=lazy

attribute for your

<img>

tags? It seems to be well supported nowadays (except for Safari): https://caniuse.com/loading-lazy-attr Here's an article about the topic: https://addyosmani.com/blog/lazy-loading/

yeah agreed that just using the loading=lazy attribute is probably easier

if you wanted to go the htmx way my suggestions would be - use get instead of post, remove the outer div and apply the hx attributes directly to the img attribute and have it replace itself on load

if you're looking for optimization choices you might want to check out https://htmx.org/extensions/preload/ as well

Hey something I'd really like to think/talk about is a partial render library like https://github.com/5monkeys/django-viewlet or https://github.com/utapyngo/django-render-partial

it seems pretty clear to me that's a really strong synergy between htmx and something like that - create a component and use it as part of a bigger page or directly through htmx in a single decorator

I haven't used either of those before and I'm curious if anyone else has, and has opinions/ideas

throwing out some ideas I think there could be some kind of {% htmx_refresh %} tag that would take a viewlet/component/partial and would automatically add the url/htmx attribute to allow refresh of a component?

or am I not thinking big enough, and there might be some way to write up a full page template w/o thinking about htmx fragments at all, that then automatically removes and renders the sections you need as the page state changes?

I haven't really thought through what that would look like from an authoring pov

you're basically inventing a frontend framework but on the backend

i wonder if it would be possible to run react on the server, and send changes to the client via htmx

i hope not

lol yes it would but I think that's unneeded

you could do it w/ like next.js or one of the SSR frameworks