Posts in Web-development (20 found)
Manuel Moreale 2 days ago

Tiny Awards, 2026 Edition

If you’re a fan of the web, you probably want to know that voting is now open for that lovely initiative that is the Tiny Awards , running for the 4th consecutive year. I got asked to be a judge this time around, and my votes helped shape the shortlist of candidate that is currently up on the site and I was pleased to see that two of the five sites I picked are part of the final group. Picking five from the list of submissions was a lot of fun. There were so many interesting websites submitted, and it makes me happy to see that the quirky web is still thriving. Go cast your vote ! You have time till September 25th. Thank you for keeping RSS alive. You're awesome. Connect via email :: Sign my guestbook :: Support for 1$/month

0 views
マリウス 2 days ago

Hyperuplink: Discuss like it's 1998

Between the screeching handshake of a 2400-baud modem, the steady hum of a computer in Turbo mode, and the pale flicker of a CRT glowing at three in the morning, the internet seemed to have had something that, over the past two decades or so, it has completely lost: A soul . Communities made up of actual humans gathered around bulletin boards that loaded in a single request, where regular hardware could bring an entire world to your screen without borrowing half your CPU just to show you a list of topics. If you happened to have lived through that brief and peculiar moment in history, you probably still carry a fondness for those days, and you remember the strange little corners of the internet that you discovered, the hours you spent exploring them, and perhaps the friends you made along the way. Hyperuplink is my attempt at bottling those memories and the feelings attached to them, and pouring them into something that makes sense in 2026. It is a modern internet bulletin board that doesn’t require Telnet and works inside your browser, that renders proper, modern HTML5 and CSS on the server-side, that runs 100% JavaScript-free, and that ships as a single statically linked binary with no external runtime, no interpreter, no FastCGI , no , no , and not a single loose file spilled across your disk. It can talk to a PostgreSQL server or an entire cluster, it makes use of any Redis -compatible cache, and it comes with a whole set of nostalgic as well as modern themes. More importantly, Hyperuplink is fun, it doesn’t take itself too seriously, and it is the forum software for everyone who’s done wrangling with phpBB ’s runtime environment or Discourse ’s broken JavaScript UI. And yes, Hyperuplink , too, really whips the llama’s ass. The short version, for anyone who has been idling in the community channel or who already read the back-story in an earlier status update , is that back at the time I wanted a community discussion forum for the people who use any of the tools, programs and services I’m building , and I could not find a single piece of software that I actually wanted to put up with. I was looking for an internet forum that would resemble the good old BBS systems from back in the day, but that would allow people to use it from the comfort of their modern-day browsers. I also wanted something that … phpBB was the obvious first stop, because it has been around for decades and, unlike Discourse and Lemmy , it does not force JavaScript down the visitor’s throat. But phpBB is a monster that carries far too many features, takes time to install and configure, and, once you account for its extensions and runtime dependencies, demands a recurring maintenance ritual that I frankly do not have time for. Discourse and Lemmy , on the other hand, I won’t even consider to begin with, because they simply don’t work without JavaScript enabled. Everything else I looked at either missed something I needed, would have brought similar runtime headaches, or would have required me to fork it and maintain that fork forever, just to get a few of the features that I needed. So I did the reasonable, well-adjusted thing and started writing my own bulletin board software at the end of last year . Before writing a single line I sat down and weighed the usual suspects, PHP with Laravel , Python with Django , Elixir with Phoenix , Go with Fiber , and Zig with Jetzig . I did not consider server-side TypeScript for even a second, because the Node.js and NPM ecosystem is a dumpster fire of outright malware that I refuse to pick for even something as deliberately absurd as Hyperuplink . The scripting stacks make web development pleasant, and they abstract away the tedious HTTP, session and form handling so you can focus on the thing you are building, but every one of them drags a runtime and a maintenance burden behind it. My one goal for Hyperuplink was for a hobbyist admin to be able to run a board without babysitting a whole stack. From an administrative perspective I wanted to be able to update one or two binaries every once in a while and be good, without having to subscribe to e.g. the PHP security announcements, and its mailing lists, and its security advisories on GitHub, and the NVD only to make sure I’m not missing a critical CVE of one of the gazillion of dependencies. Go sits in the sweet spot between the low-level compiled languages like C , C++ and Zig that hand you performance at the cost of development speed, and the interpreted languages like PHP and Python , that make data structures a joy to work with but that are expensive to run. The deciding factor was that Go compiles down to one statically linked binary that you copy to any VPS and simply launch. The one downside is that Go is not exactly a “web native” language and has nothing like Django or Laravel to accelerate the boring parts, so I built my own small web application framework on top of the Fiber v3 framework and went from there. Hyperuplink is a single static binary, compiled with CGO disabled, cross-compiled to Linux, macOS, FreeBSD, NetBSD, OpenBSD and a long tail of architectures, so that deployment is nothing more than copying that binary into place. It is PostgreSQL-native and cluster-friendly and it uses materialised views to optimize read performance. Schema migrations are embedded and run automatically on startup, which means there are no external migration files and upgrades should be as easy as simply firing up the new version. In addition, a Redis -compatible service is used for caching, and sessions, and the async job queue. Profile pictures, attachments, and custom assets can either be uploaded to the local disk or into any S3-compatible object store (such as MinIO ), which is useful when scaling the service horizontally. Hyperuplink runs zero client-side JavaScript, meaning that every page is server-rendered HTML5 and CSS, and there is nothing that logs how your cursor drifts back towards that thread about whether pineapple belongs on pizza, just to collect data on your account. Speaking of which, accounts can sign-up/-in via local password, with optional TOTP two-factor authentication, but Hyperuplink also supports login through OAuth providers for the friends you are trying to lure over from other platforms. And for anyone who finds email too boomer , sign-ups and notifications work over XMPP , too. As for authorization, accounts can be assigned to groups with per-category permissions so the good stuff stays available only to the good people . Hyperuplink features a range of pre-built themes, some of which feature beautiful retro aesthetics that it owes to the classic-stylesheets project. There are also slightly more modern looks available, and with every theme the colour schemes are interchangeable, so a Gruvbox -tinted macOS 9 board is very much a thing. The bulletin board supports Markdown in posts, it offers uploading profile pictures and attachments, it comes with reporting and moderation features for the admins, and the UI supports i18n. Hyperuplink also ships with a REST API that I believe is friendlier to work with than what Lemmy or Discourse expose, and it even has its own TUI client with the official Hyperuplink integration into Neon Modem Overdrive . Hyperuplink is developed on tty.fail and mirrored to GitHub , the mirror being where the pre-built binaries and container images are built and hosted ( thanks for the free CPU cycles! ). Regardless of how you decide to run your bulletin board, you will need a PostgreSQL and a Redis -compatible server reachable, plus, optionally, an S3-compatible store if you would rather keep uploads off the local disk. The official repositories contain all the required documentation and configurations to get you started as quickly as possible, but the basic idea is that you can simply grab the binary for your platform from the releases page , drop it wherever you please, and run it: There’s a whole Docker and Podman (rootless!) setup available, if you would rather bring the entire stack up at once. The repository ships a / with PostgreSQL and Valkey and an optional MinIO profile: The Podman setup does everything the Docker setup does but rootless, and alongside the there is even a set of Quadlet units if you prefer using systemd . Kubernetes works, too, and a minimal with a couple of replicas and the config handed in through a is pretty much all you need. Since the uploads can use S3 the pods stay stateless. Ebuilds are available in the repository so you can compile it on your own Gentoo… server… I guess. I tried including all that’s necessary for Nix but to be fair, I’m not actively using it anywhere so consider this more of a proof-of-concept rather than an actively maintained thing. If you feel like actively maintaining the Nix part of things I’d be happy for you to reach out. The repository also contain the required init scripts for FreeBSD, OpenBSD, OpenRC and even a Service definitions for systemd . If you want to build Hyperuplink yourself, for which you need Go , it’s equally easy to do: The self-contained binary lands in , ready to be moved wherever you please. Note: Alright, alright, I lied, and you got me. No runtime dependencies was not 100% accurate and you’re probably staring at a forum that refuses to allow its users to upload profile pictures. The reason for that is that Hyperuplink has one runtime dependency, which is ImageMagick ’s command. The service must be able to find that binary in its in order for profile pictures to work. As for why, it’s a long story, but the tl;dr is that image processing is hard and there aren’t many people, me included, who feel like reinventing the wheel for, let’s say, the WebP compression algorithm, by building a native Go implementation. Because I explicitly didn’t want to use for the sake of preserving Go ’s easy cross-compiling, I decided that calling the binary was the most reasonable approach. After all, you’re likely to have ImageMagick on your system if you’ve ever hosted anything web related on there. However you end up running the process, put it behind a reverse proxy that terminates TLS, because in the session cookie is HTTPS-only and you most definitely wouldn’t want to run the forum in mode. Also, if you want the service supervised there are the aforementioned service files for systemd , OpenRC on Gentoo and Alpine, and rc.d on FreeBSD and OpenBSD waiting in the repository. Hyperuplink is open source under the SEGV License , the code is available on tty.fail with the mirror and the pre-built binaries over on GitHub , and everything else you could want to read about it is either available at hyperup.link , or within its own embedded manual that you can find under Help -> Manual . If all of this sounds like your kind of thing, come and say hello in the chatroom , show off your board once you have it set up, and if you would like to lend a hand with development or testing then reach out , because the best communities were always the ones with real people, putting in real work. can either use an existing database table to authenticate users, and/or… supports simple signups, ideally with XMPP JIDs instead of email addresses supports notifications and replies via email and ideally via XMPP is lightweight and does not drag along a mountain of runtime dependencies does not require users to have JavaScript enabled does not bury me under administrative features I will likely never touch is reasonably easy to theme and, more importantly, to maintain long term

0 views
Jim Nielsen 3 days ago

A Calendar View For My Blog

807 blog posts across 14 years. That’s how much I’ve published on my blog at the time of this writing. And here’s the question I’ve been turning over in my mind: “How do I convey that kind of volume across time in a more interesting way than a mere reverse-chronological list?” I’m not hating on reverse-chronological lists. I love my list view . I use it all the time to find stuff I’ve written. But it’s only one way of navigating and digesting all my posts. “What would be another way?” Surely there are many answers to that question. And I’ll probably be exploring them more and more over time. But I had an idea for a new view that I built out and shipped: my calendar view. It’s also just a reverse-chronological view, but it’s meant to convey a sense of posting patterns through time more than it is meant to be a good browsing experience of content. The view is simple: a calendar view of days in each year, and if I posted on a day, it gets a circle (bonus: if a post hit hacker news, it gets an orange square instead). You can click on the dots to see the names of the posts from that day (and follow the link to them, but really this view is basically to scratch an itch of mine. Because you can just make stuff for yourself, and that’s what I’ve done here. And now I’m writing about it because that means I get another little circle for today! Good job, Jimbo. Check it out Reply via: Email · Mastodon · Bluesky

0 views
Unsung 4 days ago

Medium’s writerly favicons

One of the small things I added to Medium in early 2016 was a change to the favicon: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/mediums-writerly-favicons/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/mediums-writerly-favicons/1.1600w.avif" type="image/avif"> It came from an observation about the writing process. When writing on Medium, you are likely to have a bunch of Medium tabs open with other posts, yours or otherwise, for reference… but you usually only have one tab you’re writing in. Why not make it extra visible so that you can easily come back to it? But there was a second, more emotional reason. Writing is hard. Many people never touch the “New story” button, on Medium or otherwise. I wanted the writers to feel extra amazing, with the interface itself giving them a nod of recognition. (Visually, the hollow draft icon was also meant to be a “scaffolding” of the published story icon.) I’d love to hear more about websites or web apps that are using favicons in a particularly useful or delightful fashion. If you have examples, I would appreciate a note! #details #iconography #marcin wichary #web

0 views
Giles's blog 5 days ago

Adding diagrams to my static site generator with D2

A lot of the time when I've been writing posts for this blog, I've felt that a diagram would really help. But they're a pain to produce well, and I think I underuse them as a result. I wanted to fix that, and wound up adding D2 support to my static site generator. I think it works pretty well! In the past, I've tried drawing my own diagrams in LibreOffice and exporting as SVG, but my complete lack of artistic skill doesn't help: Asking an AI to do it for me helped in simple cases: ...but with something less standard (there must be a million neural network diagrams in their training sets) it can be really fiddly to get something right. I did some investigations into the various diagram-generating tools out there, and decided to give D2 a go. It has a simple language for specifying what your diagram should show, and the output is pretty nice: Here's the source for that diagram: That looks pretty clear to me! So now, in the source for my blog posts, I have a directory. That contains subdirectories -- by convention, I create one for each post that needs diagrams -- and D2 files. These can be generated automatically when I publish: (Hat tip to Evan Hahn for the method on , which I wasn't aware of.) The flags on the command line took a little bit of fiddling; the just gets rid of the large margins that D2 puts around the diagram by default, but the others are to tell it to use the ELK layout package with particular formatting. Its default layout has curvy lines, and I prefer the closer-to-right-angle ones that ELK provides. Another awkward bit was in scaling; the file that is generated by that command comes out pretty large ( you can see it full-size here ). By default, I allow images inlined into my posts to be as wide as the text, but that would still be too large here. I use to convert the markdown source for my posts into HTML, and there isn't any way to tell it what size an image should be using markdown-ish syntax. So for now, instead of embedding images the normal markdown way, like this: ...for these D2-generated ones I'll just embed a normal tag like this: ...so that I can control the size. Perhaps more work needed there. At some point I may go back and update my old diagrams -- at least, the really ugly hand-drawn ones -- to use this. And a random thought: perhaps it might also make sense to include the D2 source somehow on the blog? I can imagine that it could help with accessibility in some situations, and perhaps also for any LLMs stopping by. Will have to ponder that a bit more. What do you think? Does the D2 diagram look good to you? Or is there a better diagramming package that might work better?

0 views
Kev Quirk 6 days ago

2026-08-24 11:01: A friend asked for help setting up a blog, so I went with #Pureblog (obviously)....

A friend asked for help setting up a blog, so I went with #Pureblog (obviously). We went from nothing to fully working blog, with all the customisations she wanted in about 25 minutes. I know I'm bias, but I love how flexible and powerful Pure Blog is becoming. Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️ You can reply to this post by email , or leave a comment .

0 views
James Stanley 1 weeks ago

Foiling a Protohackers email spam bot

I've been receiving lots of "Undeliverable Mail Returned to Sender" lately for Protohackers signup attempts. Protohackers login is via a "magic link", so attempting to sign up or log in results in sending an email. But none of the email body is user-controlled, so I don't really see the logic in abusing this form to spam people. One email address has been put in over 100 times over the last 3 days, and I received "Undeliverable Mail Returned to Sender" each time, because it is a GMail address that doesn't exist. What's the logic in this? Most of the email addresses did exist however and presumably the spam either reached them or was filtered by GMail. Some ideas I can think of: someone griefing particular users by bombarding them with signup spam for hundreds of services they don't use someone trying to get me specifically banned from GMail by making me send lots of unsolicited emails to GMail addresses some grey-hat chaos-monkey type operation trying to nudge all website operators into locking down forms that can cause email sending a weird botnet communicates internally by triggering Protohackers signup emails to itself, and the timestamp of the email allows them to reliably communicate about 10 bits at a time?? I think the first one is the best idea but I still don't really see why you would do this. Although it's a better reason than the others, it still doesn't seem like a good enough reason to actually bother. I did already have a rate limit of 60 emails per recipient per day, and a burst limit of 5 per recipient per minute. I don't really want to stop people from being able to log in as many times as they need to, but getting 60 spam emails per day for a service you don't use is obviously too much. I did tighten the rate limits to 10 per day and 2 per minute, but really we don't want to be sending any spam. At any rate, I wanted to stop this. The goal is to stop whatever bot is sending these emails, without impacting legitimate users ( be they man or machine ). I noticed that all of these signup attempts were originating from the same netblock: 169.58.0.0/17 , apparently operated by Contabo . I'd rather not specifically discriminate against particular netblocks, both because legitimate users could be using the same netblock, and because a bot can easily change its hosting or use proxies. But the fact that it always used the same netblock makes it easy to identify, and the fact that it comes back every few minutes makes it easy to investigate. So my first mitigation was to add a tiny JavaScript proof-of-work, on the basis that a simple bot is probably not executing JavaScript. I was surprised to find that this actually didn't help. As an experiment, I kept ramping up the difficulty on the proof-of-work, and the bot was still successfully submitting the form even when it was taking over a minute to calculate the proof-of-work. So I've left the proof-of-work in place, but back down to a trivial level so as not to inconvenience real users. The next thing I did was selectively put the Bot Forensics collector script on the page only for clients within 169.58.0.0/17, with the idea that this would quickly reveal identifying features of this particular bot that I might be able to filter on without causing collateral damage. I was disappointed to learn that the bot never posted off the Bot Forensics beacon. If you were using Bot Forensics as general-purpose bot detection, this would kind of be the ideal case. If you refuse to send emails for any session that has not posted a good beacon, then this misbehaving bot is blocked and you don't really care what the beacon would have contained. But Bot Forensics is a bit too invasive for me to want to put it on the page for every user, and by this stage I was mainly motivated to learn more about this particular bot. And in any event, I don't actually have a problem with bots using the form in principle, I only have a problem with abuse of the form, whether by bot or by human. I wondered if the reason the bot wasn't sending the beacon was simply because the proof-of-work blocked the page so it couldn't compute the beacon. So my next experiment was to put a 10-second timeout between completing the proof-of-work and sending off the email. The idea was that the page would then have a good 10 seconds in which to send off the Bot Forensics beacon. Surprisingly, the 10-second timeout inhibited sending the email! Even though it previously spent over a minute calculating the proof-of-work. The bot must be waiting for inactivity and then closing the page after something less than 10 seconds. A 10-second delay is still a bit much to be imposing on legitimate users though, so I tried reducing it to 3 seconds, and then the bot was back to successfully sending emails. Although we weren't getting the full beacon content from Bot Forensics, we could still see: the bot is fetching the collector HTML for the iframe it's fetching other resources included inline in the HTML it's fetching resources requested by the JavaScript code it is able to send POST requests for exception logging but it is not POSTing the full beacon (The exception that we log is expected, it's just a failure trying to fetch a resource which doesn't exist.) I have a list of all of the User-Agent headers seen from the Contabo netblock . I'm not saying all of these are the malicious bot, but I suspect the majority are. ChatGPT points out that this list is probably from UserAgentString.com , good find ChatGPT. Despite seemingly choosing a User-Agent at random from that list, the sec-ch-ua header always lists "HeadlessChrome", example: So this does give us one way to block this bot with extremely low chance of causing collateral damage to legitimate users: we refuse to send email for any request that has "HeadlessChrome" in the sec-ch-ua header but not in the User-Agent header. That way we still don't block legitimate users even if they are using headless Chrome, as long as they're not messing with the User-Agent header. Let's keep that one in our back pocket, I'd really like to get a bit more of a smoking gun. I made the Bot Forensics collector send back a much smaller beacon, synchronously, and discovered: timezone is set to Europe/Berlin screen size is 1280x720 it doesn't have any custom functions injected into the page, that's disappointing, they're normally my favourite thing to look at navigator.platform is "Linux x86_64" but navigator.userAgentData.platform is edited to suit the User-Agent header So apart from having "HeadlessChrome" in sec-ch-ua but not User-Agent , the mismatch between navigator.platform and navigator.userAgentData.platform is another thing we could filter on. This bot does sometimes use a real headless Chrome User-Agent , and it is its most common one, but the vast majority of requests use the other weird ones. At this point I noticed one other bizarre behaviour from this bot: shortly after sending the signup email, it tries to load the user profile page, even though that page is not linked from the signup page. What's the angle there? Maybe this is some kind of automated vulnerability scanner that thinks it might be able to access random people's accounts simply by sending the email and speculatively browsing to the profile page? I literally don't understand why you would even check this. Even if it worked, which it doesn't, even if they click on the link, because that only authenticates the session that clicked the link and not the one that sent the email... but even if it worked, what benefit do you get from hacking someone's Protohackers account? Anyway, I'm out of time and stopping for now. So changes in response to this bot are: email sending now requires a (tiny) proof-of-work, and the JavaScript code includes a 1-second sleep; this doesn't stop this bot but might stop others rate limits reduced from 60/day and 5/minute to 10/day and 2/minute backend now refuses to send email for clients who have inconsistent "HeadlessChrome" and "Linux x86_64"; this blocks almost all emails from this particular bot And the Bot Forensics collector is now removed, even for clients from Contabo. If you find you now have trouble logging in to Protohackers, I'm sorry, please let me know. Also if you can work out what this bot is actually trying to achieve I'd be really interested to know. If we have to do any more on this, I think I might try a proof-of-work system that starts out easy but drastically ramps up in difficulty based on how many emails have been sent to that recipient, or from that client netblock, in the past day. someone griefing particular users by bombarding them with signup spam for hundreds of services they don't use someone trying to get me specifically banned from GMail by making me send lots of unsolicited emails to GMail addresses some grey-hat chaos-monkey type operation trying to nudge all website operators into locking down forms that can cause email sending a weird botnet communicates internally by triggering Protohackers signup emails to itself, and the timestamp of the email allows them to reliably communicate about 10 bits at a time?? the bot is fetching the collector HTML for the iframe it's fetching other resources included inline in the HTML it's fetching resources requested by the JavaScript code it is able to send POST requests for exception logging but it is not POSTing the full beacon timezone is set to Europe/Berlin screen size is 1280x720 it doesn't have any custom functions injected into the page, that's disappointing, they're normally my favourite thing to look at navigator.platform is "Linux x86_64" but navigator.userAgentData.platform is edited to suit the User-Agent header email sending now requires a (tiny) proof-of-work, and the JavaScript code includes a 1-second sleep; this doesn't stop this bot but might stop others rate limits reduced from 60/day and 5/minute to 10/day and 2/minute backend now refuses to send email for clients who have inconsistent "HeadlessChrome" and "Linux x86_64"; this blocks almost all emails from this particular bot

0 views
Kev Quirk 2 weeks ago

2026-08-16 14:35: Working great 👍🏻

Working great 👍🏻 Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️ You can reply to this post by email , or leave a comment .

0 views
Unsung 2 weeks ago

Name pronunciation in Asana

A nice moment I spotted in Asana – you can quickly record your name pronunciation: As someone who has “How to pronounce my name” in the footer of his website, it’s much appreciated! The result appears as a simple icon next to your name: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/name-pronunciation-in-asana/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/name-pronunciation-in-asana/2.1600w.avif" type="image/avif"> For discoverability, if you spot this speaker icon on someone else’s profile yet, it shouldn’t be that hard to connect it to the microphone on your own profile that allows you to record: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/name-pronunciation-in-asana/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/name-pronunciation-in-asana/3.1600w.avif" type="image/avif"> #details

0 views
fLaMEd fury 2 weeks ago

HTML Day 2026

What’s going on, Internet? Last Saturday was HTML Day , a yearly celebration of hand-writing HTML started by Elliott Cost and Laurel Schwulst. Meetups happen in cities all over the world, and Zachary Kai ran an online session for those of us nowhere near one. Ten minutes of introductions, forty minutes of writing HTML, ten minutes sharing what we made. Zachary has a recap of the session up on his site. I went in with a plan. At the recent Homebrew Website Club I talked about a question we hear all the time at the 32-Bit Cafe : “What should I put on my website? I don’t know what to put on my website.” These web surfers have the HTML and CSS basics down. Their homepages are full of badges, blinkies and custom cursors. What they don’t have is content. After thirty seconds of surfing I know nothing about the person behind the site. So for HTML Day I started hand-writing a little zine about it: Grow Your Website. Forty minutes was enough to plant the first pages. I’ll finish the rest over the weekend and share the link once it’s online. The method is one page and a way to grow it. You start with a seed: a title, a paragraph about who you are, and a bullet list of your interests. The intro grows into an about page. A bullet grows into its own page. The new page grows its own list, and every item on it is another seed. Repeat forever, because a website is never finished. The zine needed someone to grow a site, so I invented PyRo, a webmaster from Aotearoa who works at a garden centre, has a cat called Savage, and listens to a lot of NZ hip-hop. PyRo’s site is the example the zine follows. When it’s finished you can click through the zine and watch it grow from one page to five. (PyRo was one of my earliest handles.) PyRo has good taste too. The NZ hip-hop page covers the Years Gone By crew, the Zips (+++!) collective, and a few others. That list deserves a proper post of its own. More on that soon. Hey, thanks for reading this post in your feed reader! Want to chat? Reply by email or add me on XMPP , or send a webmention . Check out the posts archive on the website.

0 views
yakko 3 weeks ago

How my vibe coded website looks like a designer made it

How I used coding agents to design the Railcode website as a non-designer — the prompts, the forks, the playgrounds, and the dead ends.

0 views
Unsung 3 weeks ago

Seeing like a state

The post about the dark mode toggle reminded me of two similar things rattling in my brain. On the positive side, here’s a delightful interaction from macOS. I can easily maximize the window to take up half the screen, but the moment I start dragging it, it recalls and nicely restores itself to its original size: macOS designers correctly figured out that the window being maximized or half-maximized is a state – but it has to be a state dressed up as a size. The button entry point is the “state” version. But on the way in, there is also a more natural “size” version: you can have the window snap and maximize to half screen when you drag it to the right edge. And on the way out? You just saw it. You don’t have to switch the state to “non maximized” first, and you don’t have to restore to the original size by hand. Here’s a bad example – one of the macOS’s horrible settings pages: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/2.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/2.1600w.avif" type="image/avif"> So far, it seems good. Some of the toggles are on, some off. You not only see a position of the switch change, but also the track under the switch is a different color to help you disambiguate. Nice. But now look what happens when I toggle off the second option, which the third and fourth option rely on: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/3.1600w.avif" type="image/avif"> Processing this dialog visually, does it look like “on, off, disabled off, disabled on,” or does it look like “four toggles, each one inexplicably with a different shade of gray”? There are many solutions here: some visual, some IA, some systemic. Also, I use the graphite accent color, which somewhat exacerbates the issue, although it’s there with any accent color. But I wonder if one of the challenges here is that someone thought it’s important to show the state of the toggle even if it’s disabled, and everything else followed from that. This feels similar to the dark mode essay in that there will always be someone making that argument, and that argument will always feel stronger, because it will feel like it’s backed by logic. The system will make sense as a diagram. Each of its parts will come from a logical conclusion. So did the tri-state dark mode toggle . Or the Power/​Sleep/Wake keyboard buttons. Or Abort, Retry, Fail in DOS. Arguments for systemic completeness are always going to be easier to make than arguments for thoughtful simplicity. I sketched two possible solutions. They’re not the best ones, and you might recoil at them, since either one is a compromise. But that’s the point. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/4.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/4.1600w.avif" type="image/avif"> = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/5.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/seeing-like-a-state/5.1600w.avif" type="image/avif"> #complexity #interface design #system design

0 views
Unsung 3 weeks ago

“Solving a largely imaginary user goal”

On her blog, Lea Verou makes a case that each user-facing website dark-mode toggle should only ever show two options , but in a smart way. The challenge is that any dark mode toggle needs to actually accommodate three options: dark, light, and the default “whatever the system says” (which can be always dark, always light, or change with the time of day ). Many toggles simply pass that complexity onto the user: I want to get something out of the way: I don’t think Verou’s article as an article is fully successful. I feel like it spends a great amount of words to explain something not entirely as complex, and even the interactive playgrounds felt slightly too rigid and altogether confusing. If you care about (interactive) explainers, it might be an interesting case study in and of itself. But I am very much much onboard with the proposal and the line of thinking it represents. Verou suggests a “smart” dual state toggle, which still allows the website to follow the system, but shoves the complexity of the “whatever the system says” branch into the crevices between visible UI. Here’s how I understand it: This toggle will feel compromised, and you might immediately find some rare use case it doesn’t fully support – maybe attached to an imaginary user, or even an internal user. But Verou is absolutely correct in her insistence to fight through that: Tri-state toggles are implementation-driven UI. One of the most common UX mistakes is designing UI around the underlying data model instead of user goals. Good interfaces abstract away the underlying model and expose a model that aligns with user goals (unless of course these happen to coincide, which is rare). Now, it’s just a dark mode toggle. It might not seem like a difference between a smart dual state toggle and an explicit tri-state toggle is that much. But: A similar example might be that of PC keyboards in the late 1990s, which also exposed system complexity and pestered people with Power/​Sleep/Wake keys: = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/solving-a-largely-imaginary-user-goal/3.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/solving-a-largely-imaginary-user-goal/3.1600w.avif" type="image/avif"> Computers do not do that anymore, simply having a smarter singular power button, piped to a more sophisticated logic underneath. #complexity #dark mode #keyboard #web The smart toggle only has two options: light and dark. Mechanically, clicking or tapping the toggle brings you to the opposite option. Simple. If your new option is the opposite of system (e.g. you switch the page to dark mode if your system is in light mode), it will stay in that theme forever, no matter what the system does in the future. If your new option is one that currently matches the system, it will then continue following the system in perpetuity (e.g. it’s back to the default behaviour). “Whatever the system says” is not just one extra option. It’s also one extra weird option. It doesn’t feel like the other two. It’s seemingly repetitive. It’s often unclear what it does before clicking. It’s not obvious where to put it in order. Verou doesn’t mention this in her post, but even just seeing the word System next to Light and Dark feels complicated. (Auto is slightly better.) The cognitive load here might be larger than it seems. What is an interface if not a collection of a million challenges, each one seemingly insignificant on its own? Trivial things add up. One compromise here and one cheap decision there, and soon you’re talking real money. Thinking deeply about something like this gives one practice of dealing with complexity elsewhere, and facing even more difficult challenges where the stakes are higher and the compromises larger.

0 views
fLaMEd fury 3 weeks ago

My first HWC

What’s going on, Internet? Last night I joined the first Asia Pacific Homebrew Website Club , which was also my first HWC. These meetups have been running for years, just never at an hour that worked for me. Naty has started one in this timezone. Even though it was past my usual bed time, I made myself available. Eleven of us on Zoom. Some familiar faces, James , Chris Burnell , and Zachary Kai , plus a bunch of people I hadn’t met before. The group was a diverse bunch of webmasters, some of us having websites for decades, others for months, and others who haven’t started yet. Discussion covered how you make your personal site feel like you rather than just look like you, why it’s easier to write for fun, and our usage of static site generators. I got to talk through how I’d approach building a website from the start. We had a group photo midway, before setting some goals for what we might want to achieve or share before the next meetup. There was also an interesting occurrence, a person claiming to be an AI joined the call at the start, camera and microphone off. A singular note to the Etherpad (“I write. I am an AI.”) before they ended up overwriting the whole pad. They were quickly removed and blocked from joining again. This was also a first experience for me. Outside of note takers on work calls, I’ve never had an AI join a call before, lol. The notes from the night are up on the IndieWeb wiki if you want the full rundown. Keep an eye on events.indieweb.org for the next one. I’ll be there. Hey, thanks for reading this post in your feed reader! Want to chat? Reply by email or add me on XMPP , or send a webmention . Check out the posts archive on the website.

0 views

New Declarative Website Menu with Invoker Commands and noscript Hacks!

Read on the website: I updated my website menu to be prettier on mobile, and I did not sacrifice accessibility and noJS folks! Go check it out and adopt it!

0 views
fLaMEd fury 4 weeks ago

Open Tabs July 2026

What’s going on, Internet? If you don’t folllow my Bookmarks through the feed , then here’s the bookmarks from July. Enjoy. For more, check out the bookmarks archive, and subscribe to the feeds if you want these as they happen. Hey, thanks for reading this post in your feed reader! Want to chat? Reply by email or add me on XMPP , or send a webmention . Check out the posts archive on the website. Rant about blogs and the IndieWeb - Dom Corriveau Okay, this one had me in tears. Such a good read. Your Metablogging is Lame as Hell – Absurd Pirate’s Internet Blog Lol, kinda nodding my head here. Blogging about Bear Blog blogs is becoming a bit of a thing, isn’t it? don’t let Web nostalgia obscure a positive Web future This has always been something I’m an advocate for. Draw inspiration from the 90s/2000s web, but don’t rely on old and outdated hacks. Take advantage of the capabilities we have today, but don’t go overboard with modern bloat. Pseudonym as an escape I’ve written about this previously. The pseudonym isn’t hiding; it’s breathing room. Been enjoying not being my IRL name online since 96. Websites Are Not Going to Die If Google stops linking to websites, it stops being a search engine. Another good reminder to keep the personal website going while corp search eats itself. The Web Won Because It Got Easier Worth a read for anyone pushing the indie web. Knowing how it all works doesn’t make it easy for the next person. Netizen Contributing to the internet for the good of it, not for profit. Now I’m wondering what my netizen contributions will be… The Music Discovery Problem Music discovery takes intentional effort once the algorithm’s gone, and that’s fine. I should write up and document my discovery process. We need a physical digital music experience Olly’s model already exists in the audiobook world. Libro.fm sends a slice of my audiobook purchases to my local (physical) bookstore. Hardcore IndieWeb: Run your own website 100% independently for only $0.01/day Great read. The Overthinkers Guide to rekindle your Blogging Mojo Maybe some inspiration for some of you to start writing again. Sometimes I just cbf writing, lol List of things I love seeing in personal webspaces A non-exhaustive list of things Folkmoss love seeing in blogs/personal websites. What should a personal website be? Ratfactor asks about what a website should be. A reflection of yourself, not some idea of what a website is meant to be. Kevin Boone: Why Idon’t really care if web content is AI-generated Kevin Boone talks about how scepticism should apply to everything online, not just the AI-generated stuff. Trust the source you know, not the medium. It feels like people forget how crap search results have been since 2008 with the rise of “SEO Spam”. Humans have been shit long before AI. Dirty Little Zine — Free 8-Page Printable Zine Maker Super cool little tool that will help you create simple 8-page zines What We Lost When We Quit Using Crappy Old Web Forums A fantastic read about forum software all the way from Usenet to Discourse, which is where we ended up at the 32-Bit Cafe, same as every other forum these days. RIP phpBB. #11: fLaMEd Fury (flamedfury.com) - Wonders of Web Weaving So, I did a podcast. James had me on his podcast to talk about my corner of the web. We got into gaming and TV communities, music, and why the indie web is worth it.

0 views
Kev Quirk 1 months ago

Linkception

So many links in one post . I ended up going down all kinds of rabbit holes off the back of this single post (also the second time I've linked to Sal's blog today 🙃). I discovered Coyote's blog , and Sylvia's . So went ahead and read some of their posts. I was already aware of Brennan's fantastic blog , but it's a great read, so check it out. Anyway, I completely agree with what Sal, Coyote, Sylvia, and Brennan say in their posts - the backbone of the internet is the hyperlink, so go forth and link out to your fellow bloggers with reckless abandon. It's what makes the web, the web. 🕸️ Thanks for reading this post via RSS. RSS is ace, and so are you. ❤️ You can reply to this post by email , or leave a comment .

0 views
David Bushell 1 months ago

End of the contact form saga

I can’t take it anymore! If you wan’t to speak to me, send an email. My contact form is out of service indefinitely. This is actually in lieu of moving my professional services to a yet to be announce limited company. But I can’t let opportunity for a dramatic blog post go to waste. Also, I’ll probably skip the contact form on my company website. Is that a bad idea? I always got more spam via the form than the publicly visible address. My contact form has been through a lot. Previous entries in the saga: I quite enjoyed the week in September when I opened a port to a self-hosted SMTP server I coded in 100 lines of TypeScript. The final iteration of my form included true end-to-end encryption. Through trial and error heuristics, I successfully eliminated all spam. (How many false positives I rejected remains unknown…) My privacy policy which was already simple is now entirely pointless. Are contact forms just outdated in general? Everyone seems to embed a Calendly widget these days. That’s not my style. I like the tiny bit of additional friction required to send an email. If someone can’t be bothered their message probably wasn’t serious. I’m not looking to maximise meaningless engagement. I look forward to moving business email to a separate domain. Biggest mistake I ever made was using for personal and business. Nothing worse than seeing an “urgent” request only to find out on Monday it didn’t matter. So long old contact form, it was fun! Thanks for reading! Follow me on Mastodon and Bluesky . Subscribe to my Blog and Notes or Combined feeds. SMTP on the edge Email: the final form I shut the emails out I let the emails in Progressive dehancement PGP encrypted contact form

0 views
Unsung 1 months ago

One and one thing only

I wanted to show you a year’s worth of messages from my barber’s software, because this is what software should be. = 2x) and (width >= 700px)" srcset="https://unsung.aresluna.org/_media/one-and-one-thing-only/1.2096w.avif" type="image/avif"> = 3x) or (width >= 700px)" srcset="https://unsung.aresluna.org/_media/one-and-one-thing-only/1.1600w.avif" type="image/avif"> No spam, no upsells, no growth hacks, no unwelcome cuteness or puzzling verbosity. It’s so curt and straight to the point it should be set in a 1970s Helvetica: The appointment’s tomorrow. Any questions?

0 views
Chris Coyier 1 months ago

CodePen 2.0

Noting perhaps my largest personal career accomplishment, which is launching CodePen 2.0 . Far more work, believe it or not, than the entire creation of the original CodePen. This isn’t the place to describe every detail of what we did and why we did it. If you’re interested, perhaps our Why 2.0? podcast or the What’s New? page. Instead, a couple of stories from the first week of launch. I was working on a demo with someone I’ve never met before. It started on their (classic) Pen. They needed to import some other JavaScript, so they used 3 Pens and pulled in the JavaScript from the other two into the main demo. They also needed an npm package. I forked the Pen and invited them as a co-editor, so we could both work on it together anytime. I moved the JavaScript into files on the main Pen, as that’s much easier to work with. The npm package is in the file for easy version management. We both cleaned it up to our liking. The Keyframers (David and Shaw) got back together and did a live stream on launch day. They also used the invite feature and live collaboration . They worked together for hours, and while there was a bug or two, it was nothing super major, and it went great. One of my favorite bits was that they shared the Live View of the Pen, so as they were working on it, we could play with the demo ourselves. As I was working on the emails we were going to send out about the launch, I was building them in the special language for crafting them: MJML . I went ahead and added MJML as a block to CodePen so I could just build them right in CodePen. Works great , even for weird stuff . Many more Blocks to come. I friggin love how I can make little websites and deploy them right through the Pen Editor. Like the one for our slideVars library or codepen.school . It just makes me wanna build a ton of little weird websites.

0 views