All posts with the tag "webdev"
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.
> A command-line utility for taking automated screenshots of websites
Daaaang, this is such an elegantly simple way to get web screenshots with a cli. I was literally up and running with two commands on my arch linux machine (which it warned was unsupported by playwright).
pip install shot-scraper # Now install the browser it needs: shot-scraper install shot-scraper waylonwalker.com shot-scraper https://datasette.io/ shot-scraper https://datasette.io/ -h 1280 -w 1920 shot-scraper https://datasette.io/ -h 480 -w 720 shot-scraper shot --selector '#posts' https://thoughts.waylonwalker.com/post/89
Note
shot-scraper https://datasette.io/is a full length screenshot of the entire page.Oh and its pretty dang fast, let alone the setup time, this crushes on startup time in my attempts to use a headless browser in the past.
An alternative approach to building modern web withhout heavy js and json, but instead html over the wire, keeping the logic in the backend of rails.
A super handy reference to the vuejs lifecycle.
Most of the time when creating links in html you want to maintain the default behavior, as this is what users are going to expect, but sometimes your site behaves such that it does not fit, and it does something unexpected anyways. in this case you might want to make the default behavior to open the link in a new tab rather than relying on users to control click.
Use this with restraint as this can make your site feel janky and do things that do not feel natural to the web.
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
How to enable debug mode in pywebview. 🤯 jinja comes with a loader to I’ve definitely been missing out on setting up a proper jinja loader on a few projects, I need to lean on this a bit more. The path can be relative or absolute. Relative paths are relative to the current working directory. Nice intro into tailwind, I definitely started grasping some of the concepts after watching Brad. A nice tool to check compression on a public url. And this is why we don’t run cdn in prod, respect your users who can’t control where the assets are stored. There are so many fast static hosting providers out there, if you are worried about performance reasons use one of those to self host. Getting request headers in fastapi has a pretty nice stetup, it allows you to get headers values as function arguments, I was able to use headers to detect if a request was made from htmx or not. If the request was made from htmx, then we want a html format, otherwise I’m probably hitting the api programatically from something like Great short explaination of session vs token authentication. Getting form data inside of fastapi was not intuitive to me at first. Everything I had used in fastapi leaned on pydantic models. Form data comes in differently and needs collected differently. A feature of jinja that I just discovered is including sub templates. Here is an example from the docs. And inside of my thoughts project I used it to render posts. note that post_item.html automatically inherits the post variable. A guide to add Jinja2Templates to fastapi. A complete reference of all of the htmx swapping methods.
pre-compile templates! Defihnitely need to look at this for markata, as jinja is till one of the biggest hot spots.
class jinja2.FileSystemLoader(searchpath, encoding='utf-8', followlinks=False): ''' Load templates from a directory in the file system. '''
curl or python
{% include 'header.html' %} Body goes here. {% include 'footer.html' %} <ul id='posts'> {% for post in posts.__root__ %} {% include 'post_item.html' %} {% endfor %} </ul>