Posts tagged: webdev

All posts with the tag "webdev"

214 posts latest post 2026-07-05
Publishing rhythm
Jun 2026 | 2 posts
[1] I align a lot with this post. From growing up in a rural house where internet access was harder to get. It was slow and only had one line, if you were on the internet, no one in the house could recieve a phone call. Idk if what is now the smol webl, the indieweb, is seeing a resurgence, if I’m just noticing it more. It does feel like along there has been a very small number of users willing to get their own domain, their own server, and host their own shit. A few of these are starting to really break out occasionally, see things like wordle [2] hitting mass adoptioun before being swooped up by a giant. I too miss the internet of old, heck I really dont even mind the middle era of fb, twitter, instagram dominance, but what we have now is dominated by political undertones on it all with everyone shouting “Fake News” at each other. These sites are the easiest place to stay in touch with those you have met online, yet they are riddled with so much toxicity its impossible to have a great experience on them. I’m about a year and a half of not having a single one on my phone, and at this point I barely log into them once a week. RSS is the way forward, as long as its not killed b...

Keys.waylonwalker.com

Today I got sick of my go to online keyboard tester [1] not supporting holds and fighting an issue with holds on one of my boards, I vibed out a replacement. I did a bit of work with it to get it how I wanted. gpt5.4 still likes to make lots of cards and build readable sites with a reasonable width for reading, not full page apps. keyboard tester A keyboard tester that works for me, how I like it keys.waylonwalker.com [2] The main feature is to be able to see when alt+key or shift+key is pressed, the keyboard tester was not able to do this. 73e71d2d-eaf9-4a0a-9e04-0039a1df0b26.mp4 [3] Here is a video of me using it. I tend to use keyboard tester a lot as I build a lot of weird keyboards so I suspect this one to get a lot of use and may grow over time, but for now it works good enough for me. I can already think of a whole list of features like supporting keycodes for js, pygame, zmk, qmk. But for now I’m just building what I need and not overcomplicating it. References: [1]...
The Website Specification A platform-agnostic, full specification of the technical features a good website should have. Built in the open under an MIT licence. The Website Specification · specification.website [1] A solid checklist for agents to implement on most sites. Very few sites need 100% coverage, but most should probably check most of these boxes References: [1]: https://specification.website/

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.

d628ffba-de18-4fff-91a8-700f037df119.webp

It’s done with a class wrapper around the image components.

::: wa-comparison
![d628ffba-de18-4fff-91a8-700f037df119.webp](https://dropper.wayl.one/file/d628ffba-de18-4fff-91a8-700f037df119.webp)
![](https://dropper.waylonwalker.com/file/ca30665f-1a15-453e-aab8-221901c7df99.webp)
:::

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>
Cheng Lou (@_chenglou) on X My dear front-end developers (and anyone who’s interested in the future of interfaces): I have crawled through depths of hell to bring you, for the foreseeable years, one of the more important f… X (formerly Twitter) · x.com [1] webdev twitter is blowing up with implementations of pretext text calculations. The examples are absolutely fun and ridiculous. [2] References: [1]: https://x.com/_chenglou/status/2037713766205608234 [2]: https://dropper.waylonwalker.com/file/350a368f-0e6b-4375-98d6-6303961c0d6c.webp
More Details Than You Probably Wanted to Know About Recent Updates to My Notes Site Writing about the big beautiful mess that is making things for the world wide web. blog.jim-nielsen.com [1] I love the level of thought that Jim has put into these changes and making sure that urls don’t change. I’ve got a big change in flight to my main site and this is one of the reasons that I’ve been sitting on it so long. I want to make sure urls arent broken, redirects work as they should, and there are no 404’s from existing urls. Currently the new version only exists on a separate deployement https://go.waylonwalker.com/ I also added the ability to “shuffle” between posts. This is mostly for myself. I like to randomly jump through notes I’ve published in the past for reoccurring inspiration Love this idea and have it on my new site already as well, and have really enjoyed using it by pressing it a dozen or so times over the course of a few sessions. It highlights that I have too many posts like stars and thoughts and I should do some weighting to main posts. mine is at https://go.waylonwalker.com/random/ References: [1]: https://blog.jim-nielsen.com/2026/notes-site-updates/

You Can Just Build Things

I don’t know if you know this, but the web is a beautiful platform that allows you the freedom to create things and put them out there. Its not tied to four major platforms. You don’t have to post your thoughts, ideas, and apps to a platform, you can just make it. This is a beautiful thing that seems to have been forgotten. I was inspired this morning from @scotthanselman’s tinytooltown [1]. Looking through all of the tiny tools that people have built for themself, as personal software, not answering to anyone but themself, it was inspiring. Agents have gotten a lot better, like seriously better. The ai bros that were ai pilled too early that said SWE is over in six months called it too early. It wasn’t time. Now since Nov 2025 we have had agents that can do some damn work. Proving the point some of the greatest devs I’ve ever looked up to have not written a line of code since. Not hype bros or someone not good at the craft, but seriously good devs leaning on it full time. AI hype...
FFmpeg video crop tools.simonwillison.net [1] This was the inspiration for the next update in dropper that became a full clip editor. The one that I’ve long wanted, but forgotten about. It’s going to include this cropper, resize, image extractor, and trimmer. References: [1]: https://tools.simonwillison.net/ffmpeg-crop
Tiny Tool Town 🏘️ A delightful showcase for free, fun & open source tiny tools. Stupid-delightful software made with love. Tiny Tool Town · tinytooltown.com [1] Learned about this one from the @stipete interview [2] @scotthanselman did on YouTube. This is proof that the internet is alive. It’s such web 1.0 nostalgia to see that people can just build things! Did you know that you can literally just build things and make them exist? You don’t need users, You don’t need a big platform, you can just make something into existance. It seems like something we have forgotten through web 2.0 where everything as become 4 major apps all linking to each other and trying to hoard all of the attention. Scroll through tehre are some really cool apps, probably nothing that has the polish you want, or is going to change your world. What these apps have more than anything you’ve probably used in the recent years, is inspiration. Its xyz, but the way I wanted, or with my little twist. And no one else has to like it but me because I’m the user. References: [1]: https://www.tinytooltown.com/ [2]: https://youtu.be/Wm7tsiJ1nIo?si=_qvZaR5SPWozBjrY

Is Ai Faster Yet

Is AI making us more productive yet, more faster yet? Non-code # [1] probably not I’ve seen this question hitting all over the Internet lately, and often points to people not writing code. Copilot turns prompts into emails, emails back into summaries that look a lot like prompts. I think there’s a place for this, making rambled thoughts sound more coherent, summarizing notes and meeting minutes. All good stuff but does it make us more productive, probably not by an amount that you can put $ $ behind, unless you are reducing headcount. thats not what we are doing right??? Coding # [2] with chat, probably not When we talk about chatbots like gippity I think there’s a benefit to having someone with jr skills in everything to talk to, someone who can read all of the docs in an instant to get you some code snippet that might have taken all day to research and get right, but more productive, probably not. Agentic Coding # [3] maybe I’ve hit a stride with coding agents this year u...

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.

feat: add llms.txt endpoint for LLM-optimized documentation by quantizor · Pull Request #2388 · tailwindlabs/tailwindcss.com Add /llms.txt endpoint that serves a concatenated, text-only version of all Tailwind CSS documentation pages optimized for Large Language Model consumption. Extract text from MDX files, removing J… GitHub · github.com [1] Damn this one is getting some reach, I’ve seen it from Simon Willison [2] and Justin Searls [3] and t3.gg [4]. I feel for Adam, He has built a fantastic product that the world is running with, something we all needed. Something that everyone laughs at turns their nose up “ppft I don’t need that” the first time they see it, but once they try people get it, and a lot of them like it and keep it. But its something that no one really wants to pay for, no matter how big of products get built on it. As we see more and more features coming to css, its not stopping, the work will always be there. I really hope to see something happen to tailwind to keep it afloat. massive growth and revenue down 80% does not help. References: [1]: https://github.com/tailwindlabs/tailwindcss.com/pull/2388#issuecomment-3717222957 [2]: https://simonwillison.net/20...

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. -->
snow-fall Web Component—zachleat.com A post by Zach Leatherman (zachleat) Zach Leatherman · zachleat.com [1] This is a very fun way to add some whimsy to your site, added it to mine immediately when I saw it. This is what digital gardens are for, Fun, entertainment, and self-exxpression. References: [1]: https://www.zachleat.com/web/snow-fall/

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
- This is super cool, thanks to Brodie for reading me this content as I do household chores. lowtech magazine [1] is a website ran completely on solar power with only enough battery backup to cover most days. Adding enough to cover all days would increase its carbon footprint and negate the carbon offset of the solar panels it runs on. It’s fascinating to see a web server running completely off grid in a close power system. These interesting websites are fascinating keep em coming Brodie. References: [1]: https://solar.lowtechmagazine.com/
Litewind Litewind is Tailwind without the build step litewindcss.com [1] This is a sick no-build version of tailwind. I have a couple of projects that the build step of tailwind is cumbersome on, mostly because they are for non-js devs. Some are for backend python devs, some are for folks that mostly want markdown with some styles. This is a perfect no-build tailwind alternative. References: [1]: https://litewindcss.com/