Posts tagged: dev
All posts with the tag "dev"
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.
What Your Coding Tool Says About You
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 saw this tip from Cassidoo and had to try it out for myself. I kicked on a screen recording right from where my terminal was, converted it, and it actually looks pretty good.
ffmpeg \
-i screenrecording-2026-01-01_10-10-49.mp4 \
-vf "negate,hue=h=180,eq=contrast=1.2:saturation=1.1" \
screenrecording-2026-01-01_10-10-49-light.mp4
Dark Mode
Light Mode
There are a few unsettling things about it, but overall I feel like it was a success.
I’ve been using this one for awhile now, I have a post type that I only edit from my phone, but I have all the post numbered. I set up a template in obsidian for using templater, the template goes right in the static site repo, I point templater to the templates directory and this has been working pretty seamlessly for awhile.
---
date: <% tp.date.now("YYYY-MM-DD HH:mm:ss") %>
templateKey: myposttype
published: true
tags:
- myposttype
<%*
const folder = "pages/myposttype";
// get all files in the vault, keep only those inside the folder
const files = app.vault.getFiles().filter(f => f.path.startsWith(folder + "/"));
// extract numeric suffixes from filenames like myposttype-123.md
const nums = files.map(f => {
const m = f.basename.match(/^myposttype-(\d+)$/);
return m ? parseInt(m[1], 10) : null;
}).filter(n => n !== null);
// next number (start at 1 if none exist)
const next = (nums.length ? Math.max(...nums) : 0) + 1;
// include the .md extension when moving
const newPath = `${folder}/myposttype-${next}`;
await tp.file.move(newPath);
%>
---
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