Posts tagged: webdev

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 Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://specification.website/ [2]: /thoughts/

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. — @daringfireball [1] via [2] References: [1]: https://daringfireball.net [2]: https://daringfireball.net/2026/05/what_is_a_dickover

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>

[1]https://t.co/BKnwCDIp75" [1] loading=“lazy”> 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 webdev twitter is blowing up with implementations of pretext text calculations. The examples are absolutely fun and ridiculous. [2] Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://x.com/_chenglou/status/2037713766205608234 [2]: https://dropper.waylonwalker.com/file/350a368f-0e6b-4375-98d6-6303961c0d6c.webp [3]: /thoughts/

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/ Note This post is a thought [2]. It’s a short note that I make about someone e...

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. Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://tools.simonwillison.net/ffmpeg-crop [2]: /thoughts/

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. Note This post is a thought [3]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://www.tinytooltown...

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 # [1] .container { padding: 2rem; } .child { padding: 2rem; } Now your content is 4rem from the edge. Not what I meant at all. The Fix # [2] 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. References: [1]: #the-problem [2]: #the-fix

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. Note This post is a thought [5]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: http...

Yesterday I wrote about a way to do light mode screen recording [1] 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 References: [1]: /light-mode-screen-recording/

Convert a video from dark mode to light mode with FFmpeg! Here cassidoo.co [1] Converting video from dark mode to light mode after the fact is a pretty great idea, I’m surprised at how well it does. Its definitely not perfect, but looks really good. Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://cassidoo.co/post/ffmpeg-dark-light/ [2]: /thoughts/

I found snow-fall component from zachleat [1], and its beautiful… to me. I like the way it looks, its simple and whimsical. Install # [2] 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 # [3] 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. Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://www.zachleat.com/web/snow-fall/ [2]: /thoughts/

FastAPI [1].">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 [2] 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 202...

- 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. Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://solar.lowtechmagazine.com/ [2]: /thoughts/

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. Note This post is a thought [2]. It’s a short note that I make about someone else’s content online #thoughts References: [1]: https://litewindcss.com/ [2]: /thoughts/

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 [1]. <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> References: [1]: /html/