Posts tagged: dev
All posts with the tag "dev"
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
Why Make a Website in 2025
I needed to display some hover text in a web app that I am using tailwind and jinja on. It has no js, and no build other than the tailwind. I want this to remain simple. Turns out that you can use a span with a title attribute to get hover text in HTML.
<p>
I needed to display some hover text in a web app that I am using tailwind and
jinja on. It has no js, and no build other than the tailwind. I want this to
remain <span style='cursor: help; color:yellow;' title='respective to the
python developer I am and the team it is used for'>simple</span>.
</p>