HTMX Seems Cool!

Howdy folks! It’s been a minute, which means that it’s time to recklessly update python and also all the libraries I use for this infrequently-updated publication! I also want to check out the htmx library (toolset? module? framework? What do I even call these js accessories?). Will I get to that before I get distracted? It all depends on how this update process goes!

Python 3.10.4 is the most recent option as of publication (lol probably not, I’m writing this on 3-30-22, but I doubt I’ll finish before the next update, not exactly a model of clockwork updates over here at sullivankelly dot com), and I’m excited to check out match statements (although I totally do not understand exactly how they work).

It was actually pretty simple. I got really hyped for disaster, and none came!⌬ Turns out it was actually pretty easy to update, I thought there’d be more fire and fury, but the only hiccup was the aiohttp module misbehaving as of the most recent version, so I switched to httpx Ah well…

So, I’m going to refactor some of my image api tooling to just operate with htmx. The cool thing here is that I won’t need any javascript to do the fetching and html building and all that. I think that all I need to do is just use the html to replace the container element on load with the beautiful art.⌬ So, I’m basically moving some html rendering to the server. Currently, it’s rendered on the client. I think, in principle, this is a nice performance improvement if I do clever cache-ing, and it seems less messy, tbh. Also, I can use jinja for the templates, and who doesn’t love that! Super simple! Right? Right!

This is a test!

I’m crushing it. It was really simple. Major props to the htmx folks. Basically, I modified one of the endpoints to look like this:

        
@app.get('/random_art_html')
async def random_art_html(request: Request, art_type: Optional[str] = Query(None,
                                                                        max_length=200,
                                                                        regex=f"^[a-z]+$")):
art_obj = await random_art(art_type=art_type)

return templates.TemplateResponse("art.jinja.html",
                                    {'request': request,
                                    **art_obj})

And then just threw the htmx script in up on this page, and then added this to the post:

    
<figure class="test-art">
<div hx-get="/random_art_html" hx-trigger="load" hx-swap="outerHTML">
<em>This is a test!</em>
</div>
</figure>

That’s it! Hot Dang! Basically, the hx-trigger='load' means that it fires on load (as opposed to click, or keyup, or somesuch. Then, the hx-get='/random_art_html' says to use a GET request to the “random_art_html” endpoint, and then the hx-swap='outerHTML' means that it replaces—rather, swaps—the html of the enclosing div with whatever the output of the endpoint happens to be! Cool!