Posts tagged: htmx

Damn he makes this easy. I did not know about hx-select. yes there is waste in requesting the entire thing every 5s, but damn that was easy to get life reload. I’ve only done very specific backend endpoints, built pages up from partials, made endpoints for partials. keeping this one in my back pocket.

I’m just kind of amazed that he could do this all in html without touching the backend or js, typically things like this require one or the other. Yes js is running, but no other js library I’m aware of lets you do this.

Today I learned how to configure the baseurl for htmx using the tag. This is pretty handy to be able to configure different baseurls.

Very interesting approach to htmx and fast api. It uses separate decorators for returning template partials and json that can be stacked to include both options on a single route. The templates are explicitly set in the decorator. Separate decorators are used for full page and partial pages. I don’t see an example of full and partial pages being combined. I think the demo app must be behaving in a spa like fashion where it does not get all of the data when it calls index and index will ask for user-list.

Definitely going to keep my eye on this project and ponder on it.

Very interesting approach to htmx and fast api. It uses separate decorators for returning template partials and json that can be stacked to include both options on a single route. The templates are explicitly set in the decorator. Separate decorators are used for full page and partial pages. I don’t see an example of full and partial pages being combined. I think the demo app must be behaving in a spa like fashion where it does not get all of the data when it calls index and index will ask for user-list.

Definitely going to keep my eye on this project and ponder on it.

The htmx response-targets extension allows me to respond to errors from the backend and do normal htmx swaps.

Load the extension in head

<script src="https://unpkg.com/[email protected]/dist/ext/response-targets.js"></script>

Use the extension on an endpoint that might return a 400.

jinja has a loop variable that is very handy to use with htmx. Whether you want to implement a click to load more or an infinite scroll this loop variable is very handy.

{% for person in persons %} <li {% if loop.last %} hx-get="{{ url_for('infinite', page=next_page) }}" hx-trigger="intersect once" hx-target="#persons" hx-swap='beforeend' hx-indicator="#persons-loading" {% endif %} {{ person.name.upper() }} - {{ person.phone_number }} </li> {% endfor %}

Now for every chunk of contacts that we load we will trigger the infinite scroll by loading more once the last one has intersected the screen.

Interesting principle here. What a great example, If I’m looking at the second jQuery example, I have to dig into dev tools or make some assumtions that this team uses jQuery, and selects by id, therefore I can grep for $("#d1").

Consider two different implementations of an AJAX request in HTML, the first in htmx:

sse-FastAPI.">starlette provides server sent events for startlette and FastApi. I’m evaluating for use with htmx.

HATEOAS gonna hate. More and more htmx seems like the js library for backend devs. So rather than making 55 rest calls here, just make an endpoint that does what you want it to do with one, or a few requests.

An extension to disable elements during flight of an htmx request, Looks super useful for things like a create or delete button where the server would end up with an error if you double delete or double create. This eliminates an error path that the user might see under normal use of the ui.

The htmx-request class is added to htmx-target elements. You can target this css selector to create loading state throbbers.

By default the target element will the self, but you can use the typical htmx css selector to select which element will recieve the htmx-request class while the request is running.

The only way to override the name of the class is through config.

Prime concisely made sense of why htmx is so awesome compared to what has become modern reactive web dev in 2 minutes. I had never thought of it this way and it’s incredible.

One thing I have comepletely missed out on with my use of htmx is setting the disabled state while the server is working, what a genius move!

Three ways to support updating other content. Fantastic article walking through the different ways to update other parts of the screen using htmx.

In htmx there is no 2 way data binding, the dom is your state, and if you have elements derived from the same data on the screen in different places you need to think about how to keep them in sync.

I went down the route of leveraging the json-enc extention in htmx, but later realized that this completely breaks browsers/users who do not wish to use javascript. While most of the web would feel quite broken with javascript disabled, I don’t want to contribute to that without good reason.

Taking a second look into this issue, rather than using json-enc, and using as_form to get form data into a model keeps the nice DX fo everything being a pydantic model, but the site still works without js. with js htmx kicks in, you get a spa like experience by loading partials onto the page, and without, you just get a full page reload.

copied from August 8, 2023

json-enc extension converts url encoded form values into json encoded data, this is very useful for fastapi to have the same interface for htmx and curl type of interfaces.

A complete reference of all of the htmx swapping methods.

Using templates with htmx requires the client-side-templates extension, and the template engine to be loaded in a <script> tag.

example htmx using templates.

Love the poling example with hx-trigger=‘every 1s’.