Posts tagged: webdev
All posts with the tag "webdev"
Keys.waylonwalker.com
dickover n. : a modal panel, popover, or curtain presented by a website or app, deliberately obscuring its own content to frustrate the user with an unwanted, unnecessary, mandatory interaction; e.g. asking the user to accept “cookies”, subscribe to a newsletter, install the website’s mobile app, agree to terms of service, or anything else that the user couldn’t give two shits about.
markata-go now has web awesome integration for image compare. It renders a
nice web component with a slider to compare two images.


It’s done with a class wrapper around the image components.
::: wa-comparison


:::
Without markata-go’s web awesome integration, the above would look like:
<script type="module">
import 'https://ka-f.webawesome.com/[email protected]/components/comparison/comparison.js';
</script>
<wa-comparison>
<img
slot="before"
src="https://dropper.wayl.one/file/d628ffba-de18-4fff-91a8-700f037df119.webp"
alt="Grayscale version of kittens in a basket looking around."
/>
<img
slot="after"
src="https://dropper.waylonwalker.com/file/ca30665f-1a15-453e-aab8-221901c7df99.webp"
alt="Color version of kittens in a basket looking around."
/>
</wa-comparison>
You Can Just Build Things
Is Ai Faster Yet
I keep forgetting about the double gutter problem with nested containers. When you put padding on a parent and the child also has padding, you get twice the spacing you wanted.
The Problem #
.container {
padding: 2rem;
}
.child {
padding: 2rem;
}
Now your content is 4rem from the edge. Not what I meant at all.
The Fix #
Either remove padding from the parent or use box-sizing: border-box and plan
for it. I usually just drop the parent padding when I realize what I have done.
Yesterday I wrote about a way to do light mode screen recording to convert to light mode from dark mode with ffmpeg. I was wondering if it could be done entirely on the front end for web applications. Turns out you can. I’m sure there are limited wikis and site builders that don’t allow adding style like this, but it works if you can.
<video
src="https://dropper.waylonwalker.com/file/1c53dbcb-4b84-4e94-9f04-a42986ab3fa1.mp4?width=800"
controls
style="filter: invert(1) hue-rotate(180deg) contrast(1.2) saturate(1.1);"
>
<!--markata-attribution-->
</video>
0 deg hue rotate
90 deg hue rotate
180 deg hue rotate
270 deg hue rotate
I found snow-fall component from zachleat, and its beautiful… to me. I like the way it looks, its simple and whimsical.
Install #
There is an npm package <a href="https://zachleat.com" class="mention" data-name="Zach Leatherman" data-bio="A post by Zach Leatherman (zachleat)" data-avatar="https://www.zachleat.com/og/opengraph-default.png" data-handle="@zachleat">@zachleat</a>/snow-fall if that’s your thing. I like
vendoring in small things like this.
curl -o static/snow-fall.js https://raw.githubusercontent.com/zachleat/snow-fall/refs/heads/main/snow-fall.js
I generally save it in my justfile so that I remember how I got it and how to update…. yaya I could use npm, but I don’t for no build sites.
get-snowfall:
curl -o static/snow-fall.js https://raw.githubusercontent.com/zachleat/snow-fall/refs/heads/main/snow-fall.js
Usage #
Now add the component to your page.
<!-- This belongs somewhere inside <head> -->
<script type="module" src="snow-fall.js"></script> <!-- Adjust the src to your path -->
<!-- This belongs somewhere inside <body> -->
<!-- Anything before will be below the snow. -->
<snow-fall></snow-fall>
<!-- Anything after will show above the snow. -->
FastAPI.">Starlette has a head request that works right along side your get requests.
This morning I fiddled around with custom routes for GET and HEAD, but had
to manually set some things about the file, and was still missing e-tag in
the end. Turns out as a developer you can just add a head route to
your get routes and starlette will strip the content for you, while
preserving all of those good headers that fastapi FileResponse created
automatically for you.
from fastapi import APIRouter
from fastapi.response import FileResponse
from fastapi import Request
from pathlib import Path
router = APIRouter()
@router.get("/file/{filename}")
@router.head("/file/{filename}")
async def get_file(filename: str, request: Request,):
headers = {
"Cache-Control": "no-cache, no-store, must-revalidate",
}
from pathlib import Path
filename = Path(f"data/{filename}")
if not filename.exists():
raise HTTPException(status_code=404, detail="File not found")
return FileResponse(filename, headers=headers)
Here is an example of the response with curl.
❯ curl -I -L "http://localhost:8100/api/file/e5523925-1565-454c-bab3-c70c4deabc83.webp?width=250"
HTTP/1.1 200 OK
date: Wed, 22 Oct 2025 14:16:03 GMT
server: uvicorn
cache-control: no-cache, no-store, must-revalidate
content-type: image/webp
content-length: 17206
last-modified: Tue, 23 Sep 2025 14:03:20 GMT
etag: f891660c1543feb1af7564f08abdd511
❯ curl -I -L "http://localhost:8100/api/file/unknown-file.webp?width=250"
HTTP/1.1 404 Not Found
date: Wed, 22 Oct 2025 14:16:11 GMT
server: uvicorn
content-length: 27
content-type: application/json