Posts tagged: htmx

YouTube Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube. youtube.com [1] 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 [2] 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. Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://www.youtube.com/watch [2]: /html/ [3]: /thoughts/

External Link stackoverflow.com [1] Today I learned how to configure the baseurl for htmx [2] using the tag. This is pretty handy to be able to configure different baseurls. <base href="<scheme>://<netloc>/api/v1/"> <button hx-post="clicked" hx-trigger="click" hx-target="#parent-div" hx-swap="outerHTML"> Click Me! </button> Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://stackoverflow.com/questions/69456875/how-to-configure-base-url-for-all-requests-using-htmx [2]: /htmx/ [3]: /thoughts/

FastHX - FastHX volfpeter.github.io [1] Very interesting approach to htmx [2] 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. from fastapi import FastAPI from fastapi.templating import Jinja2Templates from fasthx import Jinja from pydantic import BaseModel # Pydantic model of the data the example API is using. class User(BaseModel): first_name: str last_name: str # Create the app. app = FastAPI() # Create a FastAPI Jinja2Templates instance and use it to create a # FastHX Jinja instance that will serve as your decorator. jinja = Jinja(Jinja2Templates("templates")) @app.get("/") @jinja.page("index.html") def index() -> None: ... @app.get("/user-list") @jinja.hx("user-list.html") async...

FastHX - FastHX volfpeter.github.io [1] Very interesting approach to htmx [2] 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. from fastapi import FastAPI from fastapi.templating import Jinja2Templates from fasthx import Jinja from pydantic import BaseModel # Pydantic model of the data the example API is using. class User(BaseModel): first_name: str last_name: str # Create the app. app = FastAPI() # Create a FastAPI Jinja2Templates instance and use it to create a # FastHX Jinja instance that will serve as your decorator. jinja = Jinja(Jinja2Templates("templates")) @app.get("/") @jinja.page("index.html") def index() -> None: ... @app.get("/user-list") @jinja.hx("user-list.html") async...

htmx ~ The htmx Response Targets Extension Extension htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypert... htmx.org [1] The htmx [2] response-targets extension allows me to respond to errors from the backend and do normal htmx swaps. Note by default htmx will only swap on 200 and 300 responses 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. <div hx-ext="response-targets"> <div id="response-div"></div> <button hx-post="/register" hx-target="#response-div" hx-target-5*="#serious-errors" hx-target-404="#not-found"> Register! </button> <div id="serious-errors"></div> <div id="not-found"></div> </div> Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://htmx.org/extensions/response-targets/ [2]: /htmx/ [3]: /thoughts/

jinja has a loop variable that is very handy to use with htmx [1]. 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. References: [1]: /htmx/

htmx ~ Locality of Behaviour (LoB) Carson Gross explores the Locality of Behaviour (LoB) principle, which emphasizes making the behavior of code units obvious on inspection to enhance maintainability. He discusses the tradeoffs betw... htmx.org [1] 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 [2], the first in htmx [3]: <button hx-get="/clicked">Click Me</button> > and the second in jQuery: ``` js $("#d1").on("click", function(){ $.ajax({ /* AJAX options... */ }); }); <button id="d1">Click Me</button> Note This post is a thought [4]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://htmx.org/essays/locality-of-behaviour/ [2]: /html/ [3]: /htmx/ [4]: /thoughts/

GitHub - sysid/sse-starlette Contribute to sysid/sse-starlette development by creating an account on GitHub. GitHub · github.com [1] sse-FastAPI [2].">starlette provides server sent events for startlette and FastApi. I’m evaluating for use with htmx [3]. Installation: # [4] pip install sse-starlette Usage: # [5] import asyncio import uvicorn from starlette.applications import Starlette from starlette.routing import Route from sse_starlette.sse import EventSourceResponse async def numbers(minimum, maximum): for i in range(minimum, maximum + 1): await asyncio.sleep(0.9) yield dict(data=i) async def sse(request): generator = numbers(1, 5) return EventSourceResponse(generator) routes = [ Route("/", endpoint=sse) ] app = Starlette(debug=True, routes=routes) if __name__ == "__main__": uvicorn.run(app, host="0.0.0.0", port=8000, log_level='info') Note This post is a thought [6]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://github.com/sysid/sse-starlette [2]: /fastapi/ [3]: /htmx/ [4]: #installation [5]: #usage [6]: /thoughts/

External Link X (formerly Twitter) · twitter.com [1] HATEOAS gonna hate. More and more htmx [2] 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. Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://twitter.com/teej_dv/status/1708258701008593173 [2]: /htmx/ [3]: /thoughts/

htmx ~ The disable-element Extension htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypert... v1.htmx.org [1] An extension to disable elements during flight of an htmx [2] 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. Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://v1.htmx.org/extensions/disable-element/ [2]: /htmx/ [3]: /thoughts/

htmx ~ hx-indicator Attribute The hx-indicator attribute in htmx allows you to specify the element that will have the `htmx-request` class added to it for the duration of the request. This can be used to show spinners or progre... htmx.org [1] 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 [2] 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. Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://htmx.org/attributes/hx-indicator/ [2]: /htmx/ [3]: /thoughts/

- 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! Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /htmx/ [2]: /thoughts/

htmx ~ Examples ~ Updating Other Content htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypert... htmx.org [1] Three ways to support updating other content. Fantastic article walking through the different ways to update other parts of the screen using htmx [2]. 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. Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://htmx.org/examples/update-other-content/ [2]: /htmx/ [3]: /thoughts/

External Link stackoverflow.com [1] I went down the route of leveraging the json-enc extention in htmx [2], 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. the implementation # [3] copied from https://stackoverflow.com/questions/60127234/how-to-use-a-pydantic-model-with-form-data-in-fastapi import inspect from typing import Type from fastapi import Form from pydantic import BaseModel from pydantic.fields import ModelField def as_form(cls: Type[BaseModel]): new_parameters = [] for field_name, model_field in cls.__fields__.items(): model_field: ModelField # type: ignore new_parameters.append( inspect.Parameter( model_field.alias, inspect.Parameter.POSITION...

External Link htmx.org [1] json-enc extension converts url encoded form values into json encoded data, this is very useful for fastapi [2] to have the same interface for htmx [3] and curl type of interfaces. Note This post is a thought [4]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://htmx.org/extensions/json-enc/ [2]: /fastapi/ [3]: /htmx/ [4]: /thoughts/

htmx ~ Documentation htmx gives you access to AJAX, CSS Transitions, WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypert... htmx.org [1] A complete reference of all of the htmx [2] swapping methods. Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://htmx.org/docs/#swapping [2]: /htmx/ [3]: /thoughts/

External Link htmx.org [1] Using templates with htmx [2] requires the client-side-templates extension, and the template engine to be loaded in a <script> tag. example htmx using templates. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <script src="https://unpkg.com/htmx.org"></script> <script src="https://unpkg.com/htmx.org/dist/ext/client-side-templates.js"></script> <script src="https://unpkg.com/mustache@latest"></script> </head> <body> <div hx-ext="client-side-templates"> <button hx-get="https://jsonplaceholder.typicode.com/todos/1" hx-swap="innerHTML" hx-target="#content" mustache-template="foo"> Click Me </button> <p id="content">Start</p> <template id="foo"> <p> {% raw %}{{userID}}{% endraw %} and {% raw %}{{id}}{% endraw %} and {% raw %}{{title}}{% endraw %} and {% raw %}{{completed}}{% endraw %}</p> </template> </div> </body> </html> Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://htmx.org/extensions/client-side-templates/ [2]: /htmx/ [3]: /thoughts/

- #javascript" playlabel="Play: HTMX looks pretty neat #coding #javascript [2]"> Love the poling example with hx-trigger=‘every 1s’. Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: /htmx/ [2]: /tags/javascript/ [3]: /thoughts/