Posts tagged: webdev

heroicons is a really nice set of many of the basic icons that you will need for building nice ui’s. They have a really nice copy as svg or jsx button, so that you can just yank it and paste it on your page without any extra packages or installation.

Wes has some of the coolest OG images i’ve ever seen. Here he talks about how to enable cache configuration so that its constantly updating the cache without the user waiting for the image to be created.

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, the first in htmx:

Tailwind comes with space that I have never heard of that is made to give margin and padding together in one class. Adam dropped it here in the Tailwind Connect conference.

Litestar is an interesting api framework similar to fastpi, that I am interested to check out to see if it fits into some project scope. It sounds like it comes with a lot more batteries included for things like auth, but does not have hard opinions like django. At this point I’m not jumping off of fastapi, but its something I want to try.

![[None]]

Yet again twitter cards were causing me pain. This time it was me not realizing that they require full urls, and not relative or abolute urls.

This was not working

<meta name="twitter:image" content="/shot/?path={{ request.url|quote_plus }}" content-type='image/png'/>

This does work with a full url

Boot.dev is crushing it with these interviews. This one has Wes Bos, includes teaching, webdev, where is webdev headed.

sse-FastAPI.">starlette provides server sent events for startlette and FastApi. I’m evaluating for use with htmx.

Controlling overflow with tailwindcss

Default scrollbars on a dark theme website are just the ugliest thing. This page covers all the pseudo selectors needed to style the scrollbar.

All the hover, select, autofil, focus combinations have left me confused on how to consistently get my form elements styled in dark mode

This snippet from CSS tricks has fixed all the different states for me to give me full control.

arel is a “Lightweight browser hot reload for Python ASGI web apps”

I just implemented this on my thoughts website using fastapi, and it’s incredibly fast and lightweight. There just two lines of js that make a web socket connection back to the backend that watches for changes.

When in development mode, this snippet gets injected directly on the page and does a refresh when arel detects a change.

import os import arel from fastapi import FastAPI, Request from fastapi.templating import Jinja2Templates app = FastAPI() templates = Jinja2Templates("templates") if _debug := os.getenv("DEBUG"): hot_reload = arel.HotReload(paths=[arel.Path(".")]) app.add_websocket_route("/hot-reload", route=hot_reload, name="hot-reload") app.add_event_handler("startup", hot_reload.startup) app.add_event_handler("shutdown", hot_reload.shutdown) templates.env.globals["DEBUG"] = _debug templates.env.globals["hot_reload"] = hot_reload @app.get("/") def index(request: Request): return templates.TemplateResponse("index.html", context={"request": request}) # run: # DEBUG=true uvicorn main:app --reload

I just discovered arel for hot reloading python applications when content changes from this snippet that implements it for fatapi.

...

HATEOAS gonna hate. More and more htmx 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.

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!

...

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. emmet-ls just uses lsp-completion, so its the same flow as other completions.

You can try it out by installing with :Mason

Tried out biome today and it worked better than prettier on jinja templates, I might adopt this over prettier.

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.