Serious question. No one ever got fired for choosing PostgreSQL But, why. It’s the most loved db, right? Right? Maybe it’s time to rethink it. Don’t get me wrong, if I need a relational db as a service, PostgreSQL is going to be my first choice, but why do I need to run a separate application for it? Tutorials use sqlite Why is that? Because there is nothing else to stand up. Nothing else to maintain. And you probably already have it installed on just about anything that has a battery. SQLite runs in memory Don’t need, or maybe don’t want to persist state. Run it in memory. This is a nice feature for running tests. Less exposure SQLite is a file on your filesystem. It’s not a web service. It’s not a cloud service. Not that postgres is insecure, but it is one more endpoint that you have to think about securing. this means that is probably also cheaper 🤑 SQLite is easy to replicate Want to run your new feature with prod data? Pull a replica or backup. It’s a file, you can cp, scp, rsync…
Pagefind Pagefind is a fully static search library that aims to perform well on large sites, while using as little of your users’ bandwidth as possible, and without hosting any infrastructure. Pagefind · pagefind.app Pagefind is absolutely insane. I’ve tried a number of static site searches, and found them all hard to get get going, clunky and not the best experience as a user or developer. I setup pagefind in about 2 minutes on my site where it found and indexed 833 pages in 2 minutes. The only downside I see so far is that it is a lot of bandwidth to the user. On simulated slow 3G you can definitly feel it, but not terrible. Anything slower and its going to start feeling frustrating. edit: I have actually fully deployed it on waylonwalker.com, and its fast! create the index Then I put this on a page, it looks really nice on a white background, but would need some work to drop into a dark theme.
I was watching @theprimeagen recently and I think he sold me on using tailwindcss. The thing about tailwind is that it is not a big component library, it’s a set of css classes mapped to a few (usually one) style. All css classes are shitty, so you might as well use someone else’s shitty css classes on all your projects rather than thinking you’re being smart with a new set of classes that you will hate in 6 months when you come back to the project. roughly quoted from memory of @theprimeagen It’s tiny So unlike big component libraries like tailwind, it comes with a cli that that it uses to create the final css file. It is able to treeshake out all the tailwind classes that you are not using and only ship the ones that you are using. It’s hard to clash Since the classes are so small and single purpose it’s hard to end up with something like in two places that mean different things causing you to duplicate most of that css anyways so that the whole design doesn’t break when you change o…
GitHub - aca/emmet-ls: Emmet support based on LSP. Emmet support based on LSP. Contribute to aca/emmet-ls development by creating an account on GitHub. GitHub · github.com This is the greatest nvim emmet plugin I have tried. In the past I had tried the vim plugin a few times and just could not get a good flow with the keybindings and found it confusing for my occasional use. just uses lsp-completion, so its the same flow as other completions. You can try it out by installing with config
Formatter How to use the Biome formatter. Biome · biomejs.dev Tried out biome today and it worked better than prettier on jinja templates, I might adopt this over prettier.
</> 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 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.
</> 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 The class is added to elements. You can target this css selector to create loading state throbbers. By default the target element will the, but you can use the typical htmx css selector to select which element will recieve the 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!
</> 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 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.
Bigger Applications - Multiple Files - FastAPI FastAPI framework, high performance, easy to learn, fast to code, ready for production fastapi.tiangolo.com Fastapi lets you tag your ’s so that the swagger docs are grouped according to the router. Now all routes in will appear in the router group in the swagger docs.
Preline UI Docs | Free Tailwind CSS Component Library Quickly set up Preline UI for Tailwind CSS with installation docs, JavaScript setup, component examples, themes, and framework guides. Preline · preline.co Tailwind css component library. There are many examples with copy and pastabily with the tailwind classes already setup.
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
Debugging | pywebview Build GUI for your Python program with JavaScript, HTML, and CSS pywebview.flowrl.com 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.
Calendar data could not load. Try again.