Posts tagged: webdev

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.

Creating many to many relationships with sqlmodel requires a LinkTable Model. The link model will keep track of the linked id’s between each of the models.

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 Aug 8, 2023

How to enable debug mode in pywebview.

🤯 jinja comes with a loader to pre-compile templates! Defihnitely need to look at this for markata, as jinja is till one of the biggest hot spots.

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.

class jinja2.FileSystemLoader(searchpath, encoding='utf-8', followlinks=False): ''' Load templates from a directory in the file system. '''

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.

In flask apps I often get a 404 for routes with a trailing slash. This Stack Overflow post shows how to configure flask to allow trailing slashes on some or all routes.

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.

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 curl or python

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.

{% include 'header.html' %} Body goes here. {% include 'footer.html' %}

And inside of my thoughts project I used it to render posts.

<ul id='posts'> {% for post in posts.__root__ %} {% include 'post_item.html' %} {% endfor %} </ul>

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.

I am trying to use htmx on a new fastapi site for my thoughts, and have been hitting this error.

Mixed Content: The page at 'https://front.mydomain.com/#/clients/1' was loaded over HTTPS, but requested an insecure resource 'http://back.mydomain/jobs/?_end=25&_order=DESC&_sort=id&_start=0&client_id=1'. This request has been blocked; the content must be served over HTTPS.

What is happening #

I have an htmx component that gets the current users name, but if they are not logged in the backend redirects to a login form.

<div hx-get='/users/me' hx-trigger='load'> get me </div>

But for some reason when the front end gets this redirect, it tries to do it through http,...

...

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.