Posts tagged: dev

Tailwind CSS Cheat Sheet Cheat sheet to learn Tailwind CSS quickly. Browse and search all Tailwind utility classes or CSS properties on one page. nerdcave.com A nice searchable cheatsheet for tailwindcss classes.

GitHub - simonw/shot-scraper: A CLI utility for taking screenshots of websites, recording video demos and scraping sites using JavaScript A CLI utility for taking screenshots of websites, recording video demos and scraping sites using JavaScript - simonw/shot-scraper GitHub · github.com 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). Note 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.

HTML Over The Wire | Hotwire Hotwire is an alternative approach to building modern web applications without using much JavaScript by sending HTML instead of JSON over the wire. hotwired.dev 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.

Vue.js Vue.js - The Progressive JavaScript Framework vuejs.org A super handy reference to the vuejs lifecycle.

How to Use HTML to Open a Link in a New Tab Tabs are great, aren't they? They allow the multitasker in all of us to juggle a bunch of online tasks at the same time. Tabs are so common now that, when you click on a link, it's likely it'll ope... freeCodeCamp.org · freecodecamp.org 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.

Create Models with a Many-to-Many Link - SQLModel SQLModel, SQL databases in Python, designed for simplicity, compatibility, and robustness. sqlmodel.tiangolo.com 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.

External Link stackoverflow.com I went down the route of leveraging the 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, 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 # copied from https://stackoverflow.com/questions/60127234/how-to-use-a-pydantic-model-with-form-data-in-fastapi And the usage looks like

How to enable debug mode in pywebview.

API — Jinja Documentation (3.1.x) jinja.palletsprojects.com 🤯 jinja comes with a loader to templates! Defihnitely need to look at this for, as 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. 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.

Gzip/Brotli Compression Test | GiftOfSpeed Check if Gzip or Brotli compression is working on your website. giftofspeed.com A nice tool to check compression on a public url.

Reasons to avoid Javascript CDNs Wesley Aptekar-Cassels · blog.wesleyac.com 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.

External Link stackoverflow.com 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.

External Link htmx.org 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.

Header Parameters - FastAPI FastAPI framework, high performance, easy to learn, fast to code, ready for production fastapi.tiangolo.com 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 or

Great short explaination of session vs token authentication.

Form Data - FastAPI FastAPI framework, high performance, easy to learn, fast to code, ready for production fastapi.tiangolo.com 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.

Template Designer Documentation — Jinja Documentation (3.1.x) jinja.palletsprojects.com 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.

Templates - FastAPI FastAPI framework, high performance, easy to learn, fast to code, ready for production fastapi.tiangolo.com A guide to add Jinja2Templates to fastapi.