Floppy shop💾

This is a piece I drew in 2022. It’s been four years, but it’s still one of my favorites🧡

bluemonday.exe

The artist Banksy has installed (without a permit, one assumes) a new statue in London that depicts a man in a suit marching off off a ledge, blinded by a flag.

The artwork has been dubbed Blind Patriotism, although Banksy, enigmatic as always, doesn’t explain the meaning of his latest work. However, many have interpreted it as satirising the rise of nationalistic fervour in the UK, typified by the populist politician Nigel Farage and other forces on the far right.

Another bullseye for Banksy. 🎯

Tags: art · Banksy · politics

This is the hilarity that headlines Your AI Slop Bores Me, a website by programmer Mihir Maroju where you write a prompt and a human being somewhere in the world roleplays as the AI responding to it.

The system is set up pretty simply – you can either use 1 credit to enter a prompt, or LARP (live-action roleplay) as an AI to earn 1 credit. If you'd like to give the "AI" more thinking time, you can spend 2 credits. If you LARP, you have 60 seconds to answer a writing or doodling prompt, otherwise Sam Altman burns your H100. (That's a direct quote.)

You do end up having to wait a few minutes when LARPing, as there are a bunch of other people waiting to steal AI's job with you. But you can always go do other things in the meantime – the website notifies you with a nice "ding!" sound when a prompt is ready for you, when someone's answered your prompt, or when someone has liked one of your answers.

I tried out a variety of prompts to see what the vibe was, and I was not disappointed:

I LARPed a little, too:

It's very reminiscent of good-old-days Internet (StumbleUpon, anyone?), and has exactly the kind of playful shitposting energy that we'd find on sites like mylifeisaverage.

It may look silly on the surface, but ultimately, it's a vehemently human experience that uses the whimsical as a vehicle for protest.

So what are you waiting for? Go steal AI's job.

It wasn’t a bad job, not by most metrics. It ticked the boxes a job is supposed to tick: good pay. Health insurance. Remote work. Time off. Nice coworkers.

I worked as our org's only design engineer and maintainer of our design system. My job was to build components, to polish the final product that went out into the world, and to bridge gaps between design and engineering. During my time, I doubled surface coverage of our components, chipped away at bugs, and fixed accessibility issues. I published documentation. I administered twice-yearly surveys which indicated high satisfaction from the team—up significantly compared to when I began. I was doing good work.

And yet, work was rendering me increasingly miserable. I questioned myself. Why am I here? Does any of this work actually matter? And if I stop caring about the quality of my work... will anyone notice? (An uncomfortable thought.)

I knew I was tired, but I wasn't sure if I wanted to quit. I took a week off to consider it, and told myself: if you still want to leave at the end of this week, hand in your resignation.

The following Monday, I handed in my resignation. I felt immediate relief. I had nothing else lined up, but I knew I needed to go. I'm unsure when (or if) I'll return to full-time tech work.

What happened?

<figure> (quality:90) <figcaption> Not long after quitting, my phone dropped and shattered. Photo by the author. </figcaption> </figure>

The psychic toll of AI

Consider the following scenarios:

• You join a meeting with a coworker. Your coworker has enabled an AI tool to automatically take notes and summarize the meeting. They do not ask for consent to turn it on. The tool mischaracterizes what you discuss.
• A team lead adds an AI chatbot to a Slack channel. Anyone can tag the bot to answer questions about the company's products. Coworkers tag the chatbot many times a day. You never see someone check that the bot's responses are correct.
• An engineer adds 12,000 lines of code affecting your app's authentication. They ask that it be reviewed and merged same-day. Another engineer enlists a "swarm" of AI agents to review the code. The code merges with no one having read the full set of changes.
• A designer is tasked with exploring a new feature. They prompt an AI tool for an interactive prototype. Design crit is spent analyzing visual details in the generated prototype, with minimal discussion of core ideas, goals, or tradeoffs.
• One of your pull requests has been open for a few days. You ask other engineers to leave a code review. Minutes later, an engineer pastes a review that was generated by an AI tool. There are no additional thoughts of their own.
• You point an engineer to the relevant section of a library's docs in order to request a feature. They tell you that the feature request is not possible, and send a screenshot of their chat with an AI tool as proof.
• Documents and code are being generated faster than team members can review. You get the feeling that most people have stopped reading altogether.
• Organization leadership has mandated that each person adopt new AI tools to "uplevel" themselves and their team.

I encountered each of these scenarios over the past few years, and each one left me wondering: do I raise an issue about AI here? Do I ask my coworker to disable their note-taking tool, or do I allow them to record me? (Where does the data go? Who is reading it? Do we retain knowledge in the same way without manual note-taking?) Do I voice concerns over unread code entering the codebase, and the consequences of that pattern for institutional knowledge-building? Do I ask others on the design team to delay prototyping until later in the design process? Is it already too late to ask? Has the team already shipped the code, already designed the feature, already moved onto the next task? If someone requests my review on a pull request that was clearly vibe coded, do I review the code and write comments as usual, or send it back to them for self-review? Would initiating these discussions result in interpersonal stress? Should I just let things slide? Would I become known as a "difficult" coworker for pushing back on AI use? Does any of it really matter? Does anyone really care?

All of these questions consumed energy. Whether I decided to confront them or not was moot: they left me tired and alienated either way. AI had hooked its tendrils into every corner of my work life. Even if I, personally, abstained from most AI usage, I was steeped in an environment which made it impossible to avoid. Pushing back felt futile.

<aside> I prefer to avoid AI usage for ethical, practical, and financial reasons.

1. Ethically: Generative AI tools, powered by data centers which consume vast amounts of water and pollute our environment, are built on the collective theft of the works of millions of artists, developers, authors, and other creatives, supercharge the spread of disinformation and fascism, have repeatedly provoked psychosis and suicide, and concentrate wealth in fewer hands while providing cover for widespread layoffs.
2. Practically: I have found that AI tools overcomplicate implementations and that cleaner, simpler solutions can often be written by hand. AI doesn't "know" anything, and is making life worse for open source maintainers. Overreliance on AI risks deskilling.
3. Financially: I dislike sending money to large corporations when alternatives include learning the skill for free and contributing to open source projects. Tokens are currently heavily subsidized and likely to become more expensive, so I would prefer not to make a habit of using them.

I use AI tools sparingly for assistance while refactoring code in languages I understand. I occasionally use it to help compose command line arguments for tools like ffmpeg. I never use AI to generate images, video, or prose. </aside>

The explosion of AI has played a significant role in my own burnout. Worse, it feels inescapable. Few tech organizations are taking a principled stance against AI use.

But AI use is only one part of broader social trends within tech that leave me questioning whether I should remain here.

The loss of an ideal

When I started full-time design and dev work in the 2010s, tech was generally understood to be a progressive place. This was peak "fun tech job" era, with magazines publishing glossy covers about life at Google. Apple had a gay CEO!

The web was still in flux; as a designer, the prospect of shaping sites into more usable forms excited me. Usability and user-centered design were hot topics. Budding federal organizations like 18F and the United States Digital Service were embarking on meaningful technology-enabled civic work.

After Trump's first election, people recoiled with shock and disbelief. How could this happen? Many organizations distanced themselves from the administration and reiterated their commitment to equality. Then, the COVID-19 pandemic hit, alongside a surge of protests for racial justice. There was a glimpse of unity. Biden was elected and swiftly proclaimed a return to "normal".

"Normal" landed us where we are now: the second Trump administration, more flagrantly corrupt and cruel than the first. Protests surge (larger than ever!) amidst a quieter type of elite resignation. The words "equity" and "inclusion" are no more.

Tech organizations have now given up on pushing back against an unethical and violent administration, deciding that it is in their best business interest to flatter the president's ego with gold trophies and pandering praise. Elon Musk and the "Department of Government Efficiency" took a sledgehammer to 18F and replaced it with National Design Studio, a propaganda shop whose main talent is building expensive and inaccessible landing pages.

Leaders at Google have abandoned former climate pledges as they work to build new data centers powered by natural gas turbines which emit more carbon than the entire city of San Francisco. Other tech CEOs smile for photos alongside war criminals.

<figure class="no-bleed" style="max-width: 560px;"> (quality:100) <figcaption> Guillermo Rauch, CEO of Vercel, poses with Benjamin Netanyahu, prime minister of Israel. The International Criminal Court has issued an arrest warrant for Netanyahu for "war crimes of starvation as a method of warfare and of intentionally directing an attack against the civilian population." Original tweet. </figcaption> </figure>

I keep asking myself:

What happened to the principles that were professed a decade ago? To address climate change? To reduce racial, gender, and economic inequality? To "don't be evil"?

Were these principles abandoned, or were they merely born of convenience?

Has tech always been like this? Was I just blind to it before?

When I say that I am burnt out I do not mean simply that I am tired. I'm referring to the "emotional experience of political defeat":

Burnout in Freudenberger’s articles from this period is not just defined in terms of physical tiredness as a result of doing too many things; rather, it emerges from emotional investment in a cause and from the disappointments that arise when flaws in a political project become apparent. Freudenberger’s concept not only describes physical exhaustion but also acknowledges the need to deal with anger caused by grief brought about by the “loss of an ideal.” Burnout in the context of social justice projects thus often involves a process of mourning, according to Freudenberger. Returning to his earlier writings on burnout makes it clear that when understood as a malaise arising from politically committed activities, burnout cannot be equated with tiredness or stress.

<cite>Hannah Proctor, Burnout, p. 92</cite>

I love designing and building things for the web, but I'm mourning an industry that does not share the ideals I once thought it did.

I understand why people use AI. Life can be difficult and confusing. Prompting the machine is so alluring—it answers with such certainty! How could it be wrong? (And even if it is a little wrong, well... hasn't it saved time? Does it need to be perfect?) The temptation is real.

I don’t blame people for opting to use tools that promise quick, convenient solutions to problems. We all operate under capitalism. Many of us have bullshit jobs where the goal is not, in fact, to make something good, or even to learn, but to simply make money to pay rent and medical expenses. To hopefully find a little joy on the side. The whole system is broken; AI alone didn't break it, but it is widening the cracks.

I guess what I'm trying to say is I wish none of us had to live like this. I would like to imagine a future that does not look like this.

Ironically, what I've gained from AI is a deeper appreciation for human communication, in all its messy imperfection. The point of a code review is not simply for good code to make it into a codebase, but to build institutional knowledge as people debate and iterate and compromise, slow as it may be. Friction is good.

<blockquote class="bluesky-embed" data-bluesky-uri="at://did:plc:xfjf7fkhv6rwsx5e6p2ar37o/app.bsky.feed.post/3midldzhcdc26" data-bluesky-cid="bafyreid2n3rks7uaki5mqzi55obgrmvj7av5bf6wiixaqanxf6bvrwoycq" data-bluesky-embed-color-mode="system"> <p lang="en"> I’ve posted it before, but it feels evergreen

The two hardest problems in Computer Science are

1. Human communication
2. Getting people in tech to believe that human communication is important </p> — Hazel Weakly (<a href="https://bsky.app/profile/did:plc:xfjf7fkhv6rwsx5e6p2ar37o?ref_src=embed">@hazelweakly.me</a>) <a href="https://bsky.app/profile/did:plc:xfjf7fkhv6rwsx5e6p2ar37o/post/3midldzhcdc26?ref_src=embed">March 31, 2026 at 2:46 AM</a> </blockquote><script async src="https://embed.bsky.app/static/embed.js" charset="utf-8"></script>

Where do I go from here?

No matter how rapidly technology changes, I am coalescing around some core beliefs:

1. Things that are worth doing are worth doing well.
2. Things that are done well require time and effort.
3. You make meaning through the doing.
4. Ideas are common; effort is not.
5. There are no shortcuts.

I am, as it stands, without a job. Recovering from burnout will take time. Thankfully, I have savings that afford me the privilege to take that time. I’m distancing myself from social media and news, at least for a little while. At some point, I will need to decide if I want to remain in this industry, and if so, where to go next.

In the meantime, I’m going to the gym. (Crossfit, weirdly.) I’m learning more about how synthesizers work and I'm generating different sounds. I’m looking at birds. I'm looking at my cat. I’m continuing to build tools to help trans people with legal name changes. I'm spending time with friends.

Eventually I will find new work. Who knows where.

ALT

under the blue sky

ralsiiiiii!!!!

inspiration

People who rely on AI are the ones who will be left behind. They'll forget how to think, how to write, how to do a simple reliable search, how to tell fact from fiction... they'll forget how to fucking LEARN. I think that's the part that makes me the saddest. What a beautiful thing it is just to learn stuff.

If you believe chat GPT can do better than you, why would you just let it? Why wouldn't you aim to be better, to learn how to be or do something that AI would never?

Previous

waaaa

The argument is always based in "alternatives" that not everyone has.

"Just eat plant-based foods:" because those are freely and cheaply available everywhere? Because grain, fruit, and vegetable farming isn't exploitative of sentient beings or the environment? Because you can overcome your allergies and aversions if you care enough about cows?

"Just get a better job:" because jobs that pay a living wage are just lying around for the taking? Because being trafficked is a choice? Because things like "eating" and "not dying of exposure" can wait until you convince someone to pay you for something you're not ashamed to do?

"Just don't give money to--" yeah, okay, sure. A handful of vast conglomerates own everything on earth. Even if you can live naked in a field eating nothing but organic native grasses (which, more power to you), you're still going to have to pay taxes to a corrupt government.

"No ethical consumption under capitalism" isn't an excuse. It's a fact. Everyone alive on this planet has to make moral compromises in order to live at all. Yes, some of those compromises are more defensible than others. That doesn't mean you get to tell strangers on the internet that they're bad people because they want to survive in a shitty world.

Am I saying you can't talk shit about internet strangers at all? Of course not. Things that are not crucial to anyone's survival include but are not limited to: inflicting pain for shits and giggles! Getting ChatGPT to write your term papers! Calling abuse survivors liars! Shitting in someone's Cheerios! Driving 90mph on a one-lane road at 3 am! Playing your music so loudly that the neighbor's house shakes! Arbitrarily declaring people subhuman based on their physical characteristics! Making your child feel bad about their weight! Travelling around the world for the sole purpose of killing large animals so you can prove your dominance! Wearing your underpants on your head! Cheering for someone's death! Leaving the toilet seat up! There are any number of reasons -- valid, invalid, profound, petty -- to criticize other people's behavior.

But "they're doing whatever they have to in order to live any kind of life" is not on the list.

Uh, just an artwork of my OC working.
#furry

The number of screenshots of Claude conversations is going up in my life and it’s beginning to have an impact on my general mood. Most of the time it’s well-intended; coworkers working through a problem with a chatbot before bothering me or someone exploring unconventional ideas before bringing it to a broader audience. Both of those situations seem considerate. A tool for thought, as it were.

It’s probably good practice to do your own research before you rope in another person on a cognitive task. But a small thread in the reliability of these tools-for-thought begins to unwind due to the well-documented sycophantic nature of engagement-thirsty language models. One of my favorite studies is Anthropic’s own study (2023), when asked to review an argument with I wrote this [...], the LLM gave positive feedback. But if you start a new chat with I didn't write this [...] or give any hint of your own personal bias, it provides much more critical feedback. And the ultimate twist is, we prefer models that are super nice to us.

I was telling my son’s friend about this phenomenon and he responded with the perfect GenAlpha summation:

AI is a D1 glazer, bro.

We need to acknowledge that we’re probably getting the answer we want rather than a cold-hard fact. Not to get too serious but when I read about AI psychosis, I think the overly-confident “You’re a genius” style of reply is the point where it all starts to go wrong.

Awhile back Hidde De Vries identified a pain point around LLM-usage in standards work which leads to something I call an asymmetry of thought. In a conversation where one person is a domain expert and one person is copy-pasting ChatGPT responses, it creates an imbalance of effort in the discussion. A second-hand burdening, like Brandolini’s Law, where debunking inaccuracies and subtly-wrongs takes more effort than creating the inaccuracies. We are, in effect, taxing experts to do quality assurance on the model’s responses. When that work is unpaid I believe this is immoral… or at least it’s a breach in social etiquette.

In situations like that where people are using models as a form of appealing to authority, unless both parties have agreed that the LLM is a neutral arbiter, a random noise generator has the same amount of social authority.

So, when a screenshot or copy-pasted block of “Here’s what Claude said…” comes across my screen… I don’t care about the screenshot. I don’t care about the screenshot because I want your thoughts, not Claude’s. I want your unfiltered and half-baked ideas, not Claude’s synthesized extrusions. Instead of a screenshot of a reply, I’d rather have the original prompt so I can just ask the machine myself. At least then I’d know the context you provided the machine and your understanding of the problem, because that matters immensely.

A trite example that I deal with from time to time, if you ask an LLM “React or Web Components?” it will say “React” because that’s what was popular in the 2023 training data. But did you mention anything about different teams on different tech stacks? Anything about hitting memory ceilings? Context is everything to these machines and –as the disclaimers say– they can make mistakes. If we need anything more than an approximation, a language model might not be the right tool for the job.

Anyways, that’s my issue with other people’s chatbots weaving their way into my daily conversations. I’d rather have a human-to-human conversation with you, not a chat with Claude by proxy. What Claude said is an okay chunk of “anecdata”, but it’s not a substitute for our working relationship.

jolteonnn!!

Suppose one of you wants to build a tower. Won’t you first sit down and estimate the cost to see if you have enough money to complete it? For if you lay the foundation and are not able to finish it, everyone who sees it will ridicule you, saying, ‘This person began to build and wasn’t able to finish.’

That pretty much sums me up when I try to vibe a prototype.

Don’t get me wrong, I’m a big advocate of prototyping.

And LLMs make prototyping really easy and interesting.

And because it’s so easy, there’s a huge temptation to jump straight to prototyping.

But what I’ve been finding in my own behavior is that I’ll be mid-prototyping with the LLM and asking myself, “What am I even trying to do here?”

And the thought I have is: “I’d be in a much more productive place right now if I’d put a tiny bit more thought upfront into what I am actually trying to build.” Instead, I just jumped right in, chasing a fuzzy feeling or idea only to end up in a place where I’m more confused about what I set out to do than when I started.

Don’t get me wrong, that’s fine. That’s part of prototyping. It’s inherent to the design process to get more confused before you find clarity.

But there’s an alternative to LLM prototyping that’s often faster and cheaper: sketching.

I’ve found many times that if I start an idea by sketching it out, do you know where I end up? At a place where I say, “Actually, I don’t want to build this.” And in that case, all I have to do is take my sketch and throw it away. It didn’t cost me any tokens or compute to figure that out. Talk about efficiency!

I suppose what I’m saying here is: it’s good to think further ahead than the tracks you’re laying out immediately in front of you. Sketching is a great way to do that.

(Thanks to Facundo for prompting these thoughts out of me.)

Reply via: Email · Mastodon · Bluesky

The post Anatomy of Baba Yaga appeared first on Sheldon® Comic Strip.

ALT

ALT

ALT

ALT

under the blue sky

That’s right, the new iteration of our beloved possum mascot will be representing the larger Awesomeverse of open source projects as well (complete with custom wardrobe)!

Puppeteer isn’t just for headless browsers any more.

You can read the history of our prior possum commissions:

• November 2023 from David Neal
• October 2021 from Geri Coady
• December 2019 from Phineas X. Jones
• May 2018 from James Williamson

Eleventy Mascot Series

(Unknown Name)

James Williamson. 22 May 2018. Before the possum, there was the cat

Edison

James Williamson. 22 May 2018. James pioneered the static-generating possum.

Grumpy

Phineas X. Jones. 18 December 2019. Our first commissioned iteration.

Masked Grumpy

Remixed by Ben Brignell. 7 July 2020

(Not yet named)

Geri Coady. July 2021. Our second commission! The community has grown.

A Single Div

Lynn Fisher. October 2022. From a.singlediv.com.

Elle

David Neal. November 2023. Our third commission! We’re getting smarter.

Awesome Possum

Font Awesome. March 2026. The possum has grown up! Now the mascot of the larger Awesomeverse.

View this on ArtStation
驼渣滓 on ArtStation

https://abs-0.twimg.com/emoji/v2/svg/2728.svg

To begin with, Times New Roman was the only game in town if you wanted serif type on a website. When Microsoft introduced Georgia it was a godsend. A beautiful typeface designed by Matthew Carter for the screen. I put it right at the start of my font stack for The Session.

Later, web fonts came along. Boy, does that short sentence belie the drama! There were very heated discussions about whether web browsers should provide this ability at all, and what it would mean for type foundries.

Microsoft led the way with their prorietary EOT format. Then everyone agreed on WOFF. Finally we got WOFF2, Electric Boogaloo.

Perhaps more important than that, we got intermediaries. Typekit, Fontdeck, and then the big daddy, Google Fonts.

That’s pretty much the state of play today. Oh yeah, and we’ve got variable fonts now.

I remember Nick Sherman presenting the idea of variable fonts at an Ampersand event years ago. I remember thinking “great idea, but it’ll never happen.” Pure science fiction. I thought the same thing when I first saw a conference presentation about a miraculous image format called Scalable Vector Graphics.

Sometimes I like to stop and take stock of what we take for granted in web browsers now. Web fonts. Variable web fonts. SVG. Flexbox. Grid. Media queries. Container queries. Fluid typography. And I haven’t even mentioned how we were once limited to just 216 colours on the web.

Georgia

Given all the advances in web typography, you might be wondering how my font strategy for The Session changed over the years.

It didn’t.

I mean, sure, I added fluid typography. That was a natural extension of my love for liquid layouts and, later, responsive design. But the font stack itself? That was still Georgia all the way.

Y’see, performance has always been a top priority for The Session. If I was going to replace a system font with a web font that the user had to download, it really needed to be worth it.

Over the years I dabbled with different typefaces but none of them felt quite right to me. And I still think Georgia is a beautiful typeface.

“But your website will look like lots of other websites!” some may cry. That used to be true when all we had was system fonts. But now that web fonts have become the norm, it’s actually pretty unusual to see Georgia in the wild.

Lora

Recently I found a font I liked. Part of why I like it is that it shares a lot of qualities with Georgia. It’s Lora by Olga Karpushina and Alexei Vanyashin.

I started to dabble with it and began seriously contemplating using it on The Session.

It’s a variable font, which is great. But actually, I’m not using that many weights on The Session. I could potentially just use a non-variable variety. It comes in fixed weights of regular, medium, semibold, and bold.

Alas, the regular weight (400) is a bit too light and the medium weight (500) is a bit too heavy. My goldilocks font weight is more like 450.

Okay, so the variable font it is. That also allows me to play around with some subtle variations in weights. As the font size gets bigger for headings, the font weight can reduce ever so slightly. And I can adjust the overall font weight down in dark mode (there’s no grading feature in this font, alas).

Subsetting

Lora supports a lot of alphabets, which is great—quite a few alphabets turn up on The Session occasionally. But this means that the font file size is quite large. 84K.

Subsetting to the rescue!

I created a subset of Lora that has everything except Cyrillic, Greek, and Latin Extended-B. I created another subset that only has Cyrillic, Greek, and Latin Extended-B. Now I’ve got two separate font files that are 48K and 41K in size.

I wrote two @font-face declarations for the two files. They’ve got the same font-family (Lora), the same font-weight (400 700), and the same font-style (normal) but they’ve got different values for unicode-range. That way, browsers know to only use appropriate file when characters on the page actually match the unicode range.

The first file is definitely going to be used. The second one might not even be needed on most pages.

I want to prioritise the loading of that first subsetted font file so it gets referenced in a link element with rel="preload".

The switcheroo

As well as file size, my other concern was how the swapping from Georgia to Lora would be perceived, especially on a slow connection. I wanted to avoid any visible rejiggering of the content.

This is where size-adjust comes in, along with its compadres ascent-override and descent-override.

Rather than adjusting the default size of Lora to match that of Georgia, I want to do it the other way around; adjust the fallback font to match the web font.

Here’s how I’m doing it:

@font-face {
    font-family: 'Fallback for Lora';
    src: local('Georgia');
    size-adjust: 105.77%;
    ascent-override: 95.11%;
    descent-override: 25.9%;
}

And then my font stack is:

font-family: Lora, 'Fallback for Lora', Georgia, serif;

It’s highly unlikely that any device out there has a system font called “Fallback for Lora” so I can be pretty confident that the @font-face adjustment rules will only get applied to browsers that have the right local font, Georgia.

But where did those magic numbers come from for size-adjust, ascent-override, and descent-override?

They came from Katie Hempenius. As well as maintaing a repo of font metrics, she provides the formula needed to calculate all three values. Or you could use this handy tool to eyeball it.

With that, Georgia gets swapped out for Lora with a minimum of layout shift.

First-timers and repeat visitors

Even with the layout shift taken care of, do I want to serve up web fonts to someone on a slow connection?

It depends. Specifically, it depends on whether it’s their first time visiting.

The Session already treats first time visitors differently to repeat visitors. The first time you visit the site, critical CSS is embedded in the head of the HTML page instead of being referenced in an external style sheet. Only once the page has loaded does the full style sheet also get downloaded and cached.

I decided that my @font-face rules pointing to the web fonts are not critical CSS. If it’s your first time visiting, those CSS rules only get downloaded after the page is done loading.

And unless you’re on a fast connection, you won’t see Georgia get swapped out for Lora. That’s because I’ve gone with a font-display value of “optional”.

Most people use “swap”. Some people use “fallback”. You’ve got to be pretty hardcore to use “optional”.

But the next page you go to, or the next time you come to the site, you more than likely will see Lora straight away. That’s because of the service worker I’ve got quietly putting static assets into the Cache API: CSS, JavaScript, and now web fonts.

So even though I’m prioritising snappy performance over visual consistency, it’s a trade-off that only really comes into play for first visits.

Next

I’m pretty happy with the overall strategy. Still, I’m not going to just set it and forget it. I’ll be monitoring the CRUX data for The Session keeping a particular eye on cumulative layout shift.

Before adding web fonts, the cumulative layout shift on The Session was zero. I think I’ve taken all the necessary steps to keep it nice and low, but if I’m wrong I’ll need to revisit my strategy.

Update: Big thanks to Roel Nieskens—of Wakamai Fondue fame—who managed to get the file size of my main subsetted font down even further; bedankt!

In the 350 years hence, no one has created a better way of acquiring information from others, voluntarily or not.

An awful lot of the world wide web involves forms. Indeed, they’re practically the only means of explicitly acquiring information from a user that isn’t duplicitously tracking their online behaviour so you can extort money from them (a practice more commonly known as ‘digital marketing’).

But a lot of online forms are also kind of… bad. They so often seek to reproduce paper forms, where materials is money and you need to cram as many fields onto a page as possible. The web is not paper! We can make things so much better here!

So I’m gonna drop some of the wisdom I’ve gained in designing forms across my career, be it for marketing, for membership organisations, for government, and for events.

This is (hopefully) going to be a series of blog posts covering the design and development of good online forms, starting with what you ask for in the first place.

Strip away the cruft

My absolute first principle of form design is to remember is that nobody wants to be filling out a form. A form is a barrier that prevents people from reaching the information they’re trying to get or the outcome they’re trying to achieve.

It may be a necessary evil, but it’s still an evil. Forms are therefore the ideal place to trim as much cruft as you possibly can.

If you don’t need a piece of information, don’t ask for it. If you don’t need it right now, ask for it later in the user journey or as part of a supplementary flow separate from collecting the things you need to know immediately.

In the case of time-sensitive forms (say for example, a popular concert with limited availability), you could provide users with the ability to create an account and fill out their personal information ahead of time, with the actual ticket sale only requiring them to log in and confirm the quantity-limited tickets and addons they want.

Ask questions

Imagine that you’re at an office to renew a passport for a relative. You walk up to the reception desk and, without letting you say anything or even looking up at you, the person behind the desk just says ‘Name.’

That’s a little rude, isn’t it? And what do they even mean? Your first name or full name? The name the office might have on their records? The name on your passport? The name you go by, if that’s different? Your name at birth, if that’s different too? Do they even want your name, or do they actually want the name of the person whose passport you’re renewing?

If the same person asked ‘What’s the name on the passport to be renewed?’, it would both be more pleasant and easier to understand what information they need from you. Humans don’t talk like that to one another, so why should an interface talk like that to a human?

This conversational style of asking questions reduces cognitive burden and helps to avoid jargon. ‘What is your date of birth?’ is a more readily understandable question than asking for a ‘DOB’, for example, as is asking ‘What is the card’s security code?’ instead of just asking for a ‘CVV’.

Accept answers

Questions asked specifically enough will often only have a single answer. There are some questions, however, where no amount of specificity will guarantee you the exact same response.

If a person asks you ‘What is your date of birth?’, these are all valid answers:

• 11/08/1991
• 11/8/91
• 1991-08-11
• 11.08.1991
• 8/11/91 (confusing!)
• 11th August 1991
• August 11, 1991
• 11 Aug '91
• Sunday, 11 August 1991

If the answer is correct, why would you return an error saying it’s wrong? Why shouldn’t a digital form permit a similar level of flexibility?

You could try to design around the problem, such as adding hint text specifying ‘DD/MM/YYYY’ format or similar, but that doesn’t mean that someone has answered incorrectly just because they wrote it as ‘11 8 1991’ instead.

On GOV.UK, even though the date input component is built to encourage a ‘DD MM YYYY’ formatted answer, we encourage developers to accept a variety of variations for that format, allowing the names and abbreviations of months and not requiring leading zeroes.

As much as possible, be flexible with what format an answer can be given in. If an answer is ‘good enough’ to be unambiguously understood, then accept it. Doing so reduces the likelihood that a user encounters an unnecessary validation error, lowering a barrier to completion.

Mark what’s optional, not required

Don’t do the whole ‘required fields are marked with a *’ thing. That entire practice is a relic of paper forms, where space is limited by physical dimensions and the questions are unable to adapt to known information.

On the web nearly every question in a form should be required, as a natural consequence of stripping away cruft.

If you’re unsure, you can often determine what questions need to be asked based on previously provided answers or a simple ‘gate’ question. You don’t need to present a user with a whole address form of optional fields if you ask ‘Do you want the thing posted to you?’ first!

If something is truly not required, you have virtually unlimited space to include the word ‘optional’.

The asterisk approach adds an extra, utterly unnecessary, step to a user understanding a form and what it wants from them. Don’t do it.

That’s it for this one. If you have any questions, you’re welcome to drop me a line and I might answer them in a future post.

In a poignant Gemini post, Kevin Boone wrote about his anxiety to go out of his house without his phone. (This is the Gemini protocol, totally unrelated to the Google chatbot.)

• Phone anxiety (larsthebear.me)
• Web version of the former

Around 2018, I had the same epiphany: I was unable to get out of my house without my phone. In fact, I was so addicted that it was hard not to take the phone with me even inside the house or, God forbid, into the bathroom!

I had this discussion with Matt Baer, Write.as creator, and he told me that he had started to consciously go for short walks without his smartphone. I thought it was a good idea. I started to leave my phone at home for short walks. I disabled notifications. I even invested in an e-ink smartphone and, later, in a Mudita Kompakt.

• Se passer d’écran avec un téléphone e-ink (ploum.net)
• Une vie sans notifications (ploum.net)

At first, not having a phone was a real source of anxiety. For me, the anxiety was not about being able to call someone or being called. It was really about missing notifications, about not knowing if I had a new email. It was about not being able to "feel like I was doing something" if I had to wait a couple of minutes somewhere.

What is even more scary about this particular addiction is that the anxiety of being without a phone is not only internal: it is also highly socially inflicted. My mother asked me: "What if there is an urgency for me or your father?" To which I replied: "I’m not a medic and I live 30 minutes away from you. If there’s an urgency for you, telling me about it is not urgent and will not help."

But, quickly, the feeling to be without a smartphone changed from anxiety to liberating. I felt really happy not to have a phone on me while outside. I was rediscovering my old way of getting lost in my thought, of sometimes talking to myself to clarify an idea. Which is less weird these days because everybody assumes you have an ear bud and are on the phone with someone else. In fact, when walking alone, I’m often on a call with myself.

It may seem weird, but instead of scrambling for my phone to find a direction or the name of that actor that was in that movie, I made peace with the fact that "I didn’t know something." I look around for clues about a bus schedule, I ask strangers for directions. I let my subconscious work in the background to surface the forgotten name half an hour later. And I appreciate that. Sure, there are times when things would have been easier with a smartphone. But nothing insurmountable.

I became more and more allergic to any kind of notifications, even from other phones. I feel them as constant aggression. In part because I was addicted, in part because those are, by definition, designed to disrupt your thought. That’s the whole purpose of a notification.

And we are only starting to understand the damage those are doing to our cognitive abilities.

• How Much Cognitive Damage Does A Phone Notification Actually Do? (carlhendrick.substack.com)

These days, I use a Mudita phone which has a side switch to put it completely offline (a kind of hardware enabled airplane mode). Every night, I pull that switch. Some days, I realise I totally forgot to put my phone online in the morning.

When I go outside, I ask my wife: "Is there any reason for me to take my phone?" If there’s none, which is the usual case, I don’t take it. This ritual has two purposes: it allows me to consciously choose whether to take my phone or not and to remind my wife that I don’t have my phone with me.

My only exception is when I go cycling. I remember how my friend Thierry Crouzet broke his hip in the middle of the woods. So I take my phone, just in case. This is not problematic because you cannot mindlessly start checking your phone while pedalling. It’s just a little weight in my jersey pocket.

• Un auteur se fracture le fémur pour faire parler de lui (gemini.tcrouzet.com)
• Web version of the former

I would like to say that I’m cured of my smartphone addiction, but this is not true. Put a smartphone with a shiny coloured screen in my pocket and it would probably not take more than a few days for me to return to what is the new social norm. I’m an addict and will stay an addict my whole life. But at least I have put in place enough guardrails to be free of smartphones and feel a lot happier about it.

Of course, this only applies to my smartphone. We will talk about my laptop another time…

There is a certain kind of computer review that is really a permission slip. It tells you what you’re allowed to want. It locates you in a taxonomy — student, creative, professional, power user — and assigns you a product. It is helpful. It is responsible. It has very little interest in what you might become.

The MacBook Neo has attracted a lot of these reviews.

The consensus is reasonable: $599, A18 Pro, 8GB RAM, stripped-down I/O. A Chromebook killer, a first laptop, a sensible machine for sensible tasks. “If you are thinking about Xcode or Final Cut, this is not the computer for you.” The people saying this are not wrong. It is also not the point.

Nobody starts in the right place. You don’t begin with the correct tool and work sensibly within its constraints until you organically graduate to a more capable one. That is not how obsession works. Obsession works by taking whatever is available and pressing on it until it either breaks or reveals something. The machine’s limits become a map of the territory. You learn what computing actually costs by paying too much of it on hardware that can barely afford it.

I know this because I was running Final Cut Pro X on a 2006 Core 2 Duo iMac with 3GB RAM and 120GB of spinning rust. I was nine. I had no business doing this. I did it every day after school until my parents made me go to bed.

The machine came as a hand-me-down from my nana. She’d wiped it, set it up in her kitchen in Massachusetts. It was one software update away from getting the axe from Apple. I torrented Adobe CS5 the same week. Downloaded Xcode and dragged buttons and controls around in Interface Builder with no understanding of what I was looking at. I edited SystemVersion.plist to make the “About this Mac” window say it was running Mac OS 69, which is the s*x number, which is very funny. I faked being sick to watch WWDC 2011 — Steve Jobs’ last keynote — and clapped alone in my room when the audience clapped, and rebuilt his slides in Keynote afterward because I wanted to understand how he’d made them feel that way.

I knew the machine was wrong for what I wanted to do with it. I didn’t care. Every limitation was just the edge of something I hadn’t figured out yet. It was green fields and blue skies.

I thought about all of this when I opened the Neo for the first time.

What Apple put inside the Neo is the complete behavioral contract of the Mac. Not a Mac Lite. Not a browser in a laptop costume. The same macOS, the same APIs, the same Neural Engine, the same weird byzantine AppKit controls that haven’t meaningfully changed since the NeXT era. The ability to disable SIP and install some fuck-ass system modification you saw in a YouTube tutorial. All of it, at $599.

They cut the things that are, apparently, not the Mac. MagSafe. ProMotion. M-series silicon. Port bandwidth. Configurable memory. What remains is the Retina display, the aluminum, the keyboard, and the full software platform. I held it and thought, “yep, still a Mac.”

Yes, you will hit the limits of this machine. 8GB of RAM and a phone chip will see to that. But the limits you hit on the Neo are resource limits — memory is finite, silicon has a clock speed, processes cost something. You are learning physics. A Chromebook doesn’t teach you that. A Chromebook’s ceiling is made of web browser, and the things you run into are not the edges of computing but the edges of a product category designed to save you from yourself. The kid who tries to run Blender on a Chromebook doesn’t learn that his machine can’t handle it. He learns that Google decided he’s not allowed to. Those are completely different lessons.

Somewhere a kid is saving up for this. He has read every review. Watched the introduction video four or five times. Looked up every spec, every benchmark, every footnote. He has probably walked into an Apple Store and interrogated an employee about it ad nauseam. He knows the consensus. He knows it’s probably not the right tool for everything he wants to do.

He has decided he’ll be fine.

This computer is not for the people writing those reviews — people who already have the MacBook Pro, who have the professional context, who are optimizing at the margin. This computer is for the kid who doesn’t have a margin to optimize. Who can’t wait for the right tool to materialize. Who is going to take what’s available and push it until it breaks and learn something permanent from the breaking.

He is going to go through System Settings, panel by panel, and adjust everything he can adjust just to see how he likes it. He is going to make a folder called “Projects” with nothing in it. He is going to download Blender because someone on Reddit said it was free, and then stare at the interface for forty-five minutes. He is going to open GarageBand and make something that is not a song. He is going to take screenshots of fonts he likes and put them in a folder called “cool fonts” and not know why. Then he is going to have Blender and GarageBand and Safari and Xcode all open at once, not because he’s working in all of them but because he doesn’t know you’re not supposed to do that, and the machine is going to get hot and slow and he is going to learn what the spinning beachball cursor means. None of this will look, from the outside, like the beginning of anything. But one of those things is going to stick longer than the others. He won’t know which one until later. He’ll just know he keeps opening it.

That is not a bug in how he’s using the computer. That is the entire mechanism by which a kid becomes a developer. Or a designer. Or a filmmaker. Or whatever it is that comes after spending thousands of hours alone in a room with a machine that was never quite right for what you were asking of it.

I was that kid.

He knows it’s probably not the right tool. It doesn’t matter. It never did.

The reviews can tell you what a computer is for. They have very little interest in what you might become because of one.

dreamsy990:

dreamsy990:

dreamsy990:

i saw someone say nobody needs to know what a .txt file is anymore. what the fuck is the world coming to

unironically i think we need to bring back computer labs because APPARENTLY some people WERENT taught basic computer literacy and internet safety in school

things about computers/the internet i think kids should be formally taught in schools because theyre important to know and the amount of soon to be grown adults i know who know NOTHING about any of these is quite frankly almost all of them (and resources to learn if you dont know these things, because its never to late to get better with computers)

• how to troubleshoot by yourself when you have a technical problem
• what common file types are
• some very basics on how to use “"developer tools”“ on your computer (because i cant think of a better way to refer to them) like task manager and command prompt (and their mac equivalents, terminal and activity monitor ofc)
• how to read and understand a privacy policy and what your personal data is, as well as what it being collected actually means and steps you can take to keep it private
• how to understand terms of service
  (hey. if you have trouble with reading legalese and worry about being able to understand these policies anyways, here’s a site that gives basic summaries of privacy policies and ToS)
• what a cookie actually is
• internet privacy and your digital footprint!! seriously i dont know why we stopped teaching people that they shouldnt be putting their entire real identity online in a world where your online actions can ruin you irl
• basic safety measures like antivirus software (and why you should use it or if the built in one on windows or mac is enough for you) and backing up your computer (also a mac guide)
• common keyboard shortcuts (and on mac)

as an additional note: things i think everyone should know on computers and the internet but schools may bit hesitant to teach about for whatever moral/legal standards schools pretend to operate on

• vpns and adblockers! (btw for most of these where you can pay for things im purposefully not recommending any specific software but seriously just use ublock origin for an adblocker)
• how to not get a virus while pirating something
• what a temporary email is and when to use one
• red flags that you shouldn’t trust a website (and how to quickly check the security of a site)
• what javascript on a website does and how to disable it to get around paywalls

ok one last addition! if you want to take it one level higher, i think learning the very basics of at least one programming language is good for people. it makes computers less scary and it makes you feel very cool, and a lot of people get discouraged about it because it seems overly complicated and hard to learn outside a formal classroom setting, so heres some resources for learning the very basics of python (because i consider it the easiest language to learn and knowing one language will make it easier to learn others)

• an online compiler so you dont need to download anything or worry about running code directly on your computer if that makes you nervous
• a basic video guide to introduce you to python and walk you through beginner steps
• a guide to some syntax and commands you should know (this was literally my lifeline in my first CS class)
• some performance tasks to give you things to code to practice and assess yourself

My serval oc, who got more attention than my own sona uxu

bincliff:

redstonedust:

pet peeve is when you look up fashion references from a specific era and you keep getting modern day ’[era]-inspired’ fashion like NO i want authenticity damn it. i can see your 2020 photo quality and your 2020 hair and your 2020 makeup. youre not fooling me.

hello i’m a historical fashion researcher and i have a lot of experience looking up things! this is a very widely experienced irritation and you’re definitely not alone in this, but i am here to share everything i know!

so, ways to get around this:

• turn off AI results. they’re literally nonsense to us
• don’t use pinterest because the sources/provenance is often hard to trace
• a standard internet search can be okay, but museum collections are the top tier (list of collections below this list)
• instead of broad terms like victorian, regency, tudor, renaissance etc. try using the decade you’re looking for. if you’re not sure of what decade it is but have a vague image in your head, look on the fashion history timeline and just jump around until you find it. but even changing to e.g. 19th century will give better results than victorian
• including terms like womenswear/menswear, daywear, formal wear, evening wear, court dress should increase the value of your search too
• including “fashion plates” in your search can give you a nice impression of the intended silhouettes of the era. some of these might be a little stylised but will show you what was considered in vogue
• for pre-fashion plate eras or things like makeup and styling, you’ll have to look at portraiture or manuscripts. these are harder to actually find what you’re looking for, but searching museum collections and limiting results to specific date ranges will be your friend
• when looking at art, do bear in mind sometimes artists would paint fabric extra flow-y to show off their skills. it might not have been exactly like that in terms of fabric weight or drape. so, a pinch of salt required!
• if you find something on image search where the provenance is dubious, reverse image search and you might find a source! i’ve been able to trace random pinterest images to real sources, but this does take a lot of time and effort and is often not worth the headache

some online resources and museum collections:

• fashion history timeline is an invaluable resource if you’re trying to get a feel for everything and should be your first port of call. it’ll also link to good examples
• the met has a vast number of extant examples of clothing, as well as fashion plates
• costume institute fashion plates is a subcollection of the met for fashion plates (1800s-1922)
• v&a also has many extant garments, fashion plates, and incredible articles on clothing and aesthetics. read the details of the objects because they’ll often reveal a lot about the piece
• lacma is good for C19th-20th pieces
• nypl digital collection for photographs
• national portrait gallery or similar for portraiture, or literally any museum in your country that has historical art
• national museums scotland can be useful situationally but might be oddly specific
• stout style history is a great collection for finding image references for fat people wearing historical clothes. survival bias of a lot of museum pieces tends towards smaller clothing that couldn’t be repurposed, but this aims to counter that. it’s not sortable, but is still a really nice resource
• wikimedia commons is surprisingly handy! and the images, if you should need to link/repost them, are public domain
• auction websites sound like a funny one to recommend. some won’t have mannequins and some will. just look up historical garment auctions and you’ll find some!

anyway, i hope this has been a good place to start for anyone interested! there are probably some i’ve missed because there are so many museums across the world and i don’t know about all of them or can’t remember them. but these are the ones i’ve used the most! (my specialisation/jobs i’ve had to research for have only really been in western fashion, so my resources reflect that)

Wikipedia has a list of fashion museums. Unfortunately, the page itself is only available in German, but the introductory paragraph is very short and after that, it’s organised by country, and then it’s a simple list. If you click on a museum’s article, the website is usually linked in the overview table.

Village dog

Let's not argue that "have to" can be worked around, and that no one has gotten into problems for not using it. I generally do what I am told to, I am not the type to protest.

A few days ago I have tried to pick up a personal project I started six months ago: its use-case came up again, with much more narrow scope, so it was actually achievable.

And man, was it painful.

Portion of it could be attributed to my nostalgic choice of using Sublime Text 4 instead of PyCharm. Without intellisense, I had to look up more of the Python's standard library than usual, and I have made a few syntactic mistakes I do not think I should have done.

But what was even worse, it felt really exhausting. To write out every line by hand was like trying to walk in a viscous liquid that sticks to your legs. My brain hurt.

It was not like sugar which you can fight by not buying those snacks when doing groceries. It felt like a literal withdrawl. I got nervous, my focus was gone, and so was clear thinking about what I was trying to achieve.

I am aware this was not the only thing that was different. At work, I am contributing to major projects that have had most of their architectural and technical decisions made a decade ago.

Greenfields done by myself for myself have them all unresolved, and it may contribute to that uneasy feeling.

But the fact I craved AI, not a stable project I would be improving upon, points me at the direction I have described above.

And I have got no idea what to do about it. My job is my dealer and until the whole system collapses, it will not stop inviting me to take more shots.

This is a gift link to the piece in full but if you just want to read the parts I pulled out and posted below, you can do that too.

Talarico doesn’t just root his policies and ideology in his Christian beliefs, he’s a seminarian willing to dive deep into theology. When he’s arguing with the religious right about, say, Christian nationalism, he makes a specifically Christian argument to counter a poisonous Christian movement.

“Jesus liberates,” Talarico said in a sermon in 2023. “Christian nationalism controls. Jesus saves. Christian nationalism kills. Jesus started a universal movement based on mutual love. Christian nationalism is a sectarian movement based on mutual hate.”

And, later:

For example, in an interview with my colleague Ezra Klein, Talarico criticized the evangelical focus on abortion and homosexuality in politics. “It’s remarkable to me,” Talarico said, “that you have an entire political movement using Christianity to prioritize two issues that Jesus never talked about.”

And, later:

Put simply, if the primary American divide is between right and left, then Talarico isn’t that interesting. There’s a long history of progressive religious activism in the United States, just as there is a long history of conservative religious activism. White evangelicals might be overwhelmingly Republican, but American Christians are remarkably diverse politically, and we’ve been arguing with one another for a long time.

Yet if the primary American divide is between decent and indecent, then the equation changes. Talarico shines.

Or, to put it another way, Talarico is one of the few openly Christian politicians in the United States who acts like a Christian, and by acting like a Christian he reveals a profound contrast with so many members of the MAGA Christian movement that’s dominated American political life for 10 years.

I'll stop citing here before the Times drone strikes my house, but it's a good column and it made me think. I don't really give a fuck about the United States outside of a few contexts (including "many of my friends live there and I like them" and "without NBA/WNBA basketball and Major League Baseball IDK who I am") but I pay attention to what is going on there politically for reasons that are obvious to anyone who lives in the shadow of a superpower. Their stuff influences our stuff.

A guy I used to be friends with used to express considerable surprise and confusion that I would keep up with American news. I would tell him that American news affects the rest of the world, and that American influence permeates many aspects of Canadian culture. His attitude was always something close to bemusement —— to him, America was simultaneously the centre of the universe but also a place that non-Americans shouldn't look too closely at.

This is because he was stupid, and probably still is.

🌲 gonna
🌼 go
🌱 touch back to
🌳 grass work
🌷 now

If you enjoyed this post, click the little up arrow chevron thinger below the tags to help it rank in Bear's Discovery feed and maybe consider sharing it with a friend or on your socials.

I started out as a frontend developer.

I cared about the craft and spent a lot of time trying to master HTML, CSS, JavaScript and accessibility.

Over time, I learned how these technologies affected UX, so as a dev, I started to suggest design changes to improve usability and accessibility.

But most of the designers I worked with ignored my suggestions.

Years later I transitioned to design. I tried to hide my engineering past because I was worried other designers would assume my designs were influenced too much by tech constraints.

But later on in my career I got a contract at Just Eat.

And that’s where I got to work closely with Mark Jenkins, the lead designer.

To my surprise, he listened to what I had to say and valued it.

Mark pointed me to designer Frank Chimero’s blog post, The Web’s Grain.

It put words to my experience as a front-end developer.

His argument was simple:

The web is a material. Like wood, it has a grain. You can work with it or fight against it.

Frank starts by looking at a completely unstyled HTML page and points out that:

• The page is fluid by default
• It adapts to any viewport
• Text reflows automatically
• Content stacks vertically

That’s the web’s grain.

But problems start to appear when you place elements side by side.

When you change the window width:

• the image gets taller as it gets wider because its proportions are fixed
• the text gets shorter as it gets wider since it has no fixed proportions

That’s the fundamental challenge of responsive design. It can’t be solved, only managed.

Every breakpoint exists because of it.

But when you go against the grain, you end up with something Frank calls:

“bicycle bear websites”

He says:

It is very impressive that you can teach a bear to ride a bicycle, and it is fascinating and novel. But perhaps it’s cruel? Because that’s not what bears are supposed to do. And that bear will never actually be good at riding a bicycle.

The example he gives is Apple’s Mac Pro landing page:

• It used scroll jacking
• It created lag on powerful laptops
• It spun up computer fans as the processors worked overtime

And it didn’t even work properly on Apple’s own devices.

All that engineering. All that visual polish.

And the result was a website that fought against everything the web naturally does well.

Many designers and engineers thought the landing page was technically impressive.

But in reality it was hostile to users.

You’ve likely experienced bicycle bear websites where:

• you can’t scroll normally
• the back button breaks
• you stare at a loading spinner before content appears

I spent years building this stuff.

The results were always complex and fragile.

But ‘the grain’ of the web is in everything.

Take native form controls as an example:

Most designers I worked with hated how the native <select> dropdown looked.

So they designed a custom one to make it look good and match the brand.

But that meant having to abandon the native element and build a custom dropdown from scratch.

Even if you ignore the extra work, you lose:

• Keyboard navigation
• Screen reader support
• Automatic form submission
• The native iOS scroll wheel
• Functionality without JavaScript

Some of this is hard to recreate, some of it is impossible.

If you don’t understand the materials you’re working with, you may end up building a bicycle bear website without realising it.

But if you don’t want to create a bicycle bear website without realising it, you might like my course.

It’s for interaction designers and content designers who work on GOV.UK services and want to design in code instead of Figma.

https://prototypekitcourse.com

When I talk about Marathon on the internet, I hear a common refrain. It has lodged in people’s minds. They play for hours, watching time just disappear. Sometimes, people tell me they’re dreaming about the game. I’m dreaming about it too.

In my dreams, I am a runner. A worm prints my body and my consciousness is born into it, crystallized from caterpillar to moth. Rain beats down on my synthetic form on Tau Ceti IV, lightning striking mere meters from me. I duck in and out of buildings that look like they are made of candy. I am gunned down by shells that look like mine; I drown in blood as blue as painter’s tape. Then I rise again, silk from a worm once more. My alarm clock rings in Brooklyn. What I hear is Poppy’s voice singing, “in death we’ve just begun.”

The thing about Marathon is that the entire game is a puzzle. Marathon is ostensibly an “extraction shooter,” a genre typified by games like Arc Raiders and Escape from Tarkov, but I don’t think that describes what is going on in this game very well. But like Breath of the Wild, like Dwarf Fortress, like Elden Ring, you are presented with a goal so vague that you might bounce off of the premise entirely. Marathon is a game that offers you a map and says “figure out how to stay alive” and then lets a lot of the video game occur inside your head. The stakes, the tension, the drama from each run is something you determine.

Yesterday, I was playing in a squad of two with my friend, trying to finish off a contract so I could get access to a new faction—essentially, trying to progress a little more so I could get access to more loot and cosmetics. Because it was just the two of us, we had to play it really cautiously. We dropped into Dire Marsh, a map that my friend told me has killed them through environmental hazards alone, and shortly after we landed I did indeed die to a poison plant while running away from a turret.

As we crouch-walked through the swamp, our backs toward the edge of the map so nothing could sneak up on us, my friend and I heard gunfire. I didn’t hear anything in response, so I assumed it was a team fighting against some bots. We didn’t need to approach the building from that angle, so we ducked through the weeds—I jokingly called it “space Vietnam.”

We got closer to our objective and heard gunshots again, from the southwest. This time, it was clear that two teams were going at it. My friend and I ducked into an abandoned building on the outskirts of the map, hoping that no one spotted us. After thirty seconds of silence we tried again, only to realize that these teams were going at it right in front of us.

Running in Marathon is nerve wracking, by the way. Everything you do makes a sound, and everything that makes a sound can attract an enemy. Opening doors makes a sound, and closing a door makes a louder sound. Looting makes a sound. Crouch-walking makes a sound. All these sounds are distinct from each other—you learn a lot about what’s going around you by just listening. The most information rich sound in Marathon is running. It is loud, even louder when you do it through water, and you can very accurately find the source of running and gunfire by listening closely and following what you hear. The most dangerous thing in Marathon is giving information about your whereabouts to another runner, because quite frequently they’ll kill you shortly after.

All this was on my mind when my friend and I tried to finish my quest, which amounted to a button prompt next to a cargo crate and then picking up a few nearby items. We were lucky-–the two teams seemed to have moved on. We tried to gun it to an extraction site, but my friend was able to see that there was another team there. Even at exfil—maybe especially at exfil—you can’t trust that the other team will be friendly. We tried to run into the extraction zone just as it closed but missed it by mere seconds. The only option we had was the guarded exfil, which spawns bots as soon as it’s triggered.

My friend was using the Recon shell, which gave them the ability to spot incoming enemies from afar, and I was using Assassin, which lets me go invisible and toss out a smoke grenade. I felt like we had a good chance of being able to extract without attracting attention. As has become routine when I’m using the Assassin shell, I went invisible to turn on the exfil site, and then tossed my smoke grenade as soon as the bots came down. But of course, all that commotion attracted attention. The squad that had been murdering other shells all throughout our run descended on us. We were dead before we could extract—but the bots killed the other team too. All for nothing!

You decide which puzzle you are solving each run. Are you playing the “loot everything and sneak out like a ghost” game, or the “kill everything you see” game? You’re also allowed to change your mind, go from ghost to murderer, within a single run.

I turn this beautiful puzzle over in my head every night before I go to sleep, every morning upon waking. And that’s not even getting into the lore, which sometimes is called to the front of my mind when I’m living my normal life, reflected in everything I do and see. One of the factions is an evil McDonald’s that’s merged with Monsanto; another, anarchists that are absolutely willing to firebomb a Walmart in their quest to rid the universe of corps; another is basically just Amazon. It’s insightful speculative fiction that looks at the world of the gig economy and makes the bodies of workers literally expendable, designed to be killed by their manufacturers. 

And that’s not even getting into the game’s visual language, which stuns me every time I load it up. The color choices are so thoughtful—those harsh planes of neon differentiate the manmade buildings from the landscape of Tau Ceti IV and makes calling out enemy locations and points of interest so easy (I’m in the blue building, head for the pink tunnel). Each new run I land on a new detail from the game’s design and am awed by the level of confidence in these choices. The game is polarizing because the developers are okay if people bounce off of it. The true sickos who love what it’s doing cannot stop playing it, not even in their dreams.

pannndora:

electrictopaper:

peachdoxie:

There’s a bunch of adhd advice out there that’s like “people with adhd tend to work better under deadlines due to the anxiety so here are ways to artificially induce a stress response in order to get you to get work done” and it’s like well what if I don’t want to be stressed out all the time in order to function

this gold shouldn’t stay in the comments

ALT

hey loves, I’ve been reading through the comments and loads of people are asking how to not fall into this pattern because that’s all they know. so, here’s some advice from Auntie Pan who’s been in the trenches (stress-caused disabilities and chronic illnesses).

context: grew up in an abusive, controlling home, escaped to uni, had a prolonged mental breakdown, became a teacher and worked in a dysfunctional school with amazing kids and nightmare management for years. I did not realise I have adhd and autism for a long time. (You might even be able to scroll back through this blog to find the time around which I did realise lol.)

ANYWAY, things that have helped me because my body can no longer handle any kind of stress without flaring up:

1. If you’re doing anything that requires you to do a lot of prep before you begin the actual thing (e.g. cooking, deep cleaning a room, moving house), mise en place. That’s a fancy french way of saying get everything ready before you begin. So if I’m cooking idk spaghetti carbonara, that means fry and chop the bacon, separate the egg yolks from the whites, put water in the kettle, put dry spaghetti into a pan. Once everything’s ready, it reduces the mental load and means I can focus on the actual cooking and any clean up that I can do along the way. H/t to @ms-demeanor for this, you changed my life!
2. the Might As Well rule. This one works really well for me but you gotta be careful otherwise you’ll get sucked into the Vortex. Basically, let’s imagine you’re in the bathroom, brushing your teeth. You notice that the extra roll of toilet paper has been used. instead of thinking, “I’ll get to that later”, and then forgetting about it until you sit down on the bog (no judgement, we’ve all been there), you think “Might As Well put an extra roll while I’m here!” This tends to help with the little tasks that build up over time. This Does Not Work for big tasks.
3. Leading on from no.2, Do It Immediately/ASAP really helps me too. My current boss will email me on a Friday and say, ‘don’t reply to this now! Leave it til monday!’ But she and i both know that if i leave it til monday, I will forget and get stressed and this will make me Very Ill. So, instead, the moment i receive the email, I’ll either schedule in replying to it as soon as I’m done with my current thing, OR I’ll reply to it immediately.
4. Anything that can’t be actioned immediately, i mark as Unread. Anything Unread in my inbox is a future action, and i check those Unread emails/texts/whatevers Every. Day. To make sure whether today is the day i have the info to action it. (This also means i have to stay on top of my inbox. I read all my emails and then mark them accordingly. I’m also brutal with unsubscribing)
5. The House Always Wins. Both in a literal sense, because i am in a constant battle with keeping my house clean, and i know now that I’ll never get it as clean as i want it. It’s impossible, i no longer have the energy or stamina to vacuum and scrub everything. But also just in a life sense. I’m never going to achieve things to perfection, and perfect is the opposite of done. And getting things done is that much more important when you have limited energy and strength. Accept that you often have to half-arse life in order to Full-Arse the few things that really matter to you.
6. Have multiples of everything, everywhere. I wear support gloves, so i need to have handcream at every sink and everywhere i sit down in the house. I try to keep it unobtrusive, but it means i don’t have to trek upstairs just to moisturise my hands. Gum, phone chargers, pens and pencils, water bottles, hand sanitizer, whatever you need.
7. Work with people, even if it’s online. Body doubling actually works. Also I’ve found that if I’m working on assignments, taking myself to a library or study area that isn’t my bedroom helps so much.
8. Show off! Tell people on here or elsewhere in your life about the fact that you’ve just written 100 words! Or that you’ve cleaned the fridge and that’s a really big deal for you. Celebrate your wins, no matter how small.
9. Basically, you’re aiming to reduce the mental load as much as possible. Wear the same types of clothes all the time to minimise the amount of laundry. Eat the same three lunches so decision fatigue doesn’t take over.

All of this takes time to implement and it is cumulative, but i hope it helps. Reading the comments on this post, i finally understand why adhd is comorbid with so many other conditions. let’s take care of each other <3

I’m so glad to hear that helped you!

For anybody looking for resources from someone dealing with actual ADHD, I have an incomplete but ever growing list of ADHD tips, tools, and suggestions on my website.

A lot of the pages on that site are adapted from my tumblr posts, for instance I’m adapting this post about car repair projects with ADHD into a guide on project management and completion with ADHD.

(Red links are stuff that I’ve got planned but haven’t published for reasons that are probably clear to anyone looking for ADHD advice online)

What I wanted was a 'living' component. Something that does what I needed and can easily update itself.

That's exactly what the <baseline-status> web component can do. It fetches current support data from the Web Features API and renders a small, self-contained component on the page.

Here's how it's integrated into this Eleventy (Build Awesome) website.

Why Baseline over CanIUse?

I've been a big fan of Can I Use since forever. It's brilliant for deeper investigation. Checking specific browser versions, finding out if something needs a flag or prefix, any know bugs or existing resrouces, or getting a wider overview of a feature.

But it still leaves the decision on using a new CSS feature entirely with you.

Baseline is opinionated by design.

• Limited Availability - when a feature isn't yet known to be supported across all core browsers
• Newly Available - once all core browsers have shipped support
• Widely Available - once that support has been stable for 30 months

With these three states, you can make an informed decision instantly. If your teams CSS authroing guidelines stipulate only using Widely Available features, you know immediately whether you're good to go.

The component fetches live data from the Web Features API, so the status will update as browsers move features through these states. Folks get a clear 'on the day' answer, not a point-in-time screenshot.

The integration

Installing the package

npm install baseline-status

The package ships a minified, self-contained ES module (baseline-status.min.js) that includes everything it needs, including Lit. It's around 50KB minified (including the Lit framework). That's not ridiculously huge, but it's not something I want loading on every page either.

Copying the script at build time

Rather than loading the component from a CDN, I copy it from node_modules into the build output during the Eleventy build. In .eleventy.js:

config.addPassthroughCopy({
  'node_modules/baseline-status/baseline-status.min.js':
    'scripts/baseline-status.min.js',
});

The script ends up at /scripts/baseline-status.min.js in the site output. No CDN dependency, no runtime fetch to jsDelivr or unpkg, it's served straight from my own servers. The version is also pinned in package.json, so the component won't quietly change underneath me between builds.

Updating is as simple as:

npm update baseline-status

The passthrough copy should pick up the new file on the next build automatically.

Easily "turn on and off-able"

I could have just dropped the script into the bottom of my page template and called it done. But then every page would carry that extra weight, even articles that never mention browser support. Instead, I made it opt-in at the article level using Nunjucks conditionals and a frontmatter flag.

The shortcode checks for the frontmatter flag before rendering anything. When writing an article, I add baselineStatus: true to the frontmatter, then type {% baselineStatus 'feature-id' %} wherever I want the widget to appear.

If I forget to set the flag, nothing renders, which I'll spot when reviewing the article.

The frontmatter flag

Any article that wants to use <baseline-status> sets a flag in its front matter:

---
title: 'My Article About a CSS Feature'
date: 2026-03-09
baselineStatus: true
---

No flag, no script. It's off by default for the rest of the site.

The conditional load in the base layout

In _includes/layouts/base.njk, just before </body>, the script tag is only rendered when that flag is present:

{% if baselineStatus %}
<script type="module" src="/scripts/baseline-status.min.js"></script>
{% endif %}

As the script is loaded as type="module", it defers automatically and shouldn't block rendering. Browsers that don't support ES modules don't load it at all which is fine, because in practice those are browsers that wouldn't render the component (or probably the web platform feature) either.

The shortcode

Writing raw HTML in a Markdown article is fine, but using a shortcode can keep things a little cleaner and consistent.

In .eleventy.js:

config.addShortcode('baselineStatus', function (featureId) {
  // Only render if the page has baselineStatus flag set
  if (this.ctx && this.ctx.baselineStatus) {
    return `<baseline-status featureId="${featureId}"></baseline-status>`;
  }
  return '';
});

Using it in an article

Finding a feature ID

Feature IDs come from the web-platform-dx/web-features repository. The quickest way to find one is to visit webstatus.dev, search for the feature you're interested in, and read the ID from the URL.

Feature IDs don't always match what you'd expect. For example, CSS Nesting is just called nesting in the data, and Anchor Positioning is anchor-positioning. The safest approach is to search webstatus.dev for what you want - you'll find the correct ID right there in the URL.

Here are some common examples:

Step-by-step

1. Add baselineStatus: true to the article's front matter. This loads the script on that page and only that page.

---
title: My Brilliant Article about Container Queries
baselineStatus: true
---

2. Drop the shortcode wherever you want the widget to appear:

{% baselineStatus 'container-queries' %}

3. That's it. Here's what that actually renders on this page:

The component fetches live data from the Web Features API, so the status reflects the current state of the feature not whatever was true when I wrote the article.

Worth it tho?

Since I have been regularly writing about brand new or relatively new CSS and web platform features. Yes, absolutely.

I like that the opt-in approach keeps the script off pages that don't need it, the shortcode keeps the authoring tidy, and serving the file myself means I'm not dependent on a third-party CDN staying online.

It's a small thing, but I think it can make the articles feel a little more alive, more informative.

Browser support data that updates itself beats a screenshot from 2024 every time.

Like Zoolander who can't turn right, I thought View Transitions couldn't swoop.

I had been under the impression that they couldn't curve towards the destination, and it was one of those things that you like can't unsee. All view transitions going in straight lines…

All my prior attempts had failed, til now.

The way of the swoop #

When you give something a view-transition-name like:

#ball1 { 
  view-transition-name: view-transition-ball;
}

The browser creates keyframes with a predictable naming pattern:

@keyframes -ua-view-transition-group-anim-view-transition-ball {
  …
}

If you pause a view transition, you can see the keyframes and the keyframe name applied to the pseudo elements:

Anticipating that naming consistency, add a comma to the ::view-transition-group() element and include some keyframes of our own:

::view-transition-group(view-transition-ball) {
  animation: 
    -ua-view-transition-group-anim-view-transition-ball 2s ease-in-out, 
/* 👉*/ swoop 2s ease-in-out;
}

The special sauce, the THING THAT TOOK FOREVER TO FIND, is that you can only use individual transforms, NO transform shorthand:

@keyframes swoop {
  50% {
/* ❌ */ transform: translateY(50px);
/* ✅ */ translate: 0 50px;
  }
}

If you try to change the transform, things fail. And if you try to add animation-composition, things fail harder (don't know why).

BUT, using individual transforms, and just like that, you can blend a scale, translate, or whatever in combination with the browser native transition.

The trick also shows you how you can add a blur to a view transition.

The key to the unlock was individual transforms.

Below is a demo you can try that makes a simple wiggling view transition.

The green ball uses custom keyframes and animation composition, and the pink ball uses view transitions. They dont perfectly match either, which is interesting (exaggerated with a scale added). There's a perspective difference at play I don't fully understand.

You can stop reading here if you want, but I'm about to rant about how this was lame as crap to discover.

The limits #

While I'm glad there's a little bit of a way for it to work, there's plenty to still want.

• No access to the dynamic values that the browser calculates for view transitions
• The solution is clunky and requires static view-transition-names (no match-element support), it breaks if the browsers name their keyframes something else or if I'm assigning names with JS
• No support for animation-composition: add
• No way to control the easing of the x vs the y axis separately, or separate durations

I really just wanted to change the X easing to be ease-out and the Y easing to be ease-in. That would give a nice swoop. Or even add a slight delay the X and not the Y, another way to create a swoop.

None of these more normal and better ergonomic ways are available. Just this narrow case with individual transforms and trying to piggy back on a browser keyframe naming convention.

But hey, now we can add swoops to a native view transition and we learned a trick that can make motion blur view transitions. That's coo.

I landed on a live studio recording of Seth Lakeman performing Rollback the Years from the 2025 album The Granite Way. I’m a sucker for raw vocal harmonies, and when they kicked in toward the first chorus, I felt tears in my eyes. When I heard the line “Roll the years back to a life we once knew”, I felt something more.

Coming from an organic oral tradition literally meaning “of the people”, folk music is one of the most raw and human-centred genres of music. Folk music has always served as an expressive way to tell stories, share ideas, or protest. When people couldn’t read or write, folk music was a way to communicate. Folk music is about community, hardship, adventure, love, heartbreak, the human condition.

Skipping ahead in the video, I found an excerpt of a track Lonesome Woods by Hannah James and Toby Kuhn. The opening of the recording features voice, cello and body percussion. There was something very profound that struck me about this track. The arrangement was so simple, yet Hannah’s bare feet on the wooden board and the sound of her hands on her own skin coupled with her silky voice and a single cello made the whole experience feel incredibly raw and real. I felt like I was there with them in the forest clearing. And then the opening lyrics of this track started to make a lot of my feelings make sense.

Through lonesome woods I took my way. So dark so dark as dark could be. The leaves were shivering on every tree. Oh don’t you think that griefs me.

And then, nearing the Golden Ratio of the track, Hannah and Toby are on the top of a hill. Hannah has an accordion now and she's playing her wooden board with shoes on, and they’re playing together, facing each other, and smiling infectiously, fully enjoying this moment of human-centred expression in the sun and the wind. And I wished I were there with them to experience it. And then I cried.

And then I thought for a while. I took myself on a walk. And I thought some more. And then I was able to put into words what I was feeling.

After clicking on this random link shared on the internet on a normal Thursday, I had uncovered a deep grief. A deep grief about how the technology industry has become so abhorrently hostile to the human experience that it has inadvertently distracted me from real and true humanity held deep within art and music; a deep grief borne from realising I thought I’d lost one of the founding concepts of my identity since I first touched a piano at the age of five. I felt all of this even though I am actively engaging in playing music every day.

I think I am in an abusive relationship with the technology industry. Yes, this is probably about AI. Stay with me.

Last week I spoke to a very good friend of mine who works as a senior software engineer. They told me that they don’t really write code anymore as part of their job; they only talk out loud to Claude. This surprised me. They also said that now they feel like an administrator rather than a software engineer — someone who merely assigns and reviews tasks — and, despite feeling “more productive”, they also don’t feel that good about the whole thing.

But I felt something weird during this conversation. Given I was surprised that this friend had seemingly embraced using AI day-to-day, and given how much I respect them, I suddenly felt like I should be doing the same. I started questioning my worth, my value, my productivity. Don’t get me wrong, I’ve tried using AI in my day-to-day activities, albeit very lightly. Given the type of work I do, it would be remiss of me not to explore the options. But there’s a deep discomfort that comes with me reaching for generative AI, not least because I have never been able to generate very good results.

Anyway, here’s where the abusive part comes in.

You simply cannot breathe without seeing, hearing, or engaging in any kind of technical conversation about AI. AI has dominated the Zeitgeist so catastrophically that the only way to escape is to turn off the WiFi and delete all the apps. Every single piece of fucking software has some kind of shitty AI add-on, forced into your face at regular intervals whilst you’re trying to go about your life or do your job or check your email or write an email or read an email or talk to a human support agent or read a recipe or open an issue on an open-source project or watch a YouTube video or open your IDE or do a fucking internet search. The cognitive overload of AI trying to Make You More Productive™️ whilst you’re actually trying to be productive is so shockingly absurd. And yet, we are being made to feel like we are stagnating, being left behind, not good enough, that we are luddites should we not adopt this imposing technology. We are being told we’re missing out, even though we’re probably doing just fine. The technology is gaslighting us.

This week, I spoke to another friend about how their company is now mandating AI usage for all employees. There is no reason for this mandate, only that someone who knows someone said that at another company where everyone adopted AI they were able to fire all the software engineers and make bank. So if I’m reading this correctly, the message is: “You must adopt this tool, or you will be fired. But we’re going to fire you soon anyway. Good luck.”

I do not enjoy using generative AI. Not only because have I seen few benefits for me personally. Not only because has it ruined the experience of trying to search for accurate and reliable information. Not only because of the way the chat-bot-style LLMs are built to project some kind of sickening quasi-human personality. Not only because mandated generative AI use is burning out my friends. Not only because this technology has caused numerous people to die. Not only because AI is draining water from areas that need it most. Not only because billions of dollars are going directly to AI organisations whilst millions of humans exist in poverty. Not only because using AI is an incredibly lonely experience where human collaboration and conversation has been replaced by weird conversations with computer algorithms. Not only because of the implicit bias generative AI displays as a result of the data it was trained on. Not only because people are doing some really weird things with AI like trying to sell apps that keep your dead relatives “alive”. Not only because apparently AI performs better when you threaten it. Not only because the pivot to AI has wrongly centred the worker value conversation around how much an individual can do rather than what they can contribute (not much has changed since I wrote this article almost a year ago).

I just enjoyed my work better when I wasn’t bombarded by a single piece of technology 24 hours a day seven days a week, that seems to have very, very bad implications for humans and the planet, actually. I'd rather go back to the era of the JavaScript framework debates.

What’s even more personally terrifying: what if I need to find a new job in the near future? There are seemingly no non-generative-AI-centred options left for someone like me. I’m afraid that every opportunity will either be for a company building some kind of generative AI experience, or one that mandates the use of generative AI in your daily responsibilities, or one that refuses to use AI at the expense of their financial success and the stability of my employment. At this point I cannot escape. I am at the mercy of the profession I chose. I have a family to feed and a mortgage to pay. Retraining is not an option right now. I must force myself to adapt.

And what will the future look like when this time comes? Will the industry’s mass cognitive decline be so far gone that none of this will matter anyway?

Through lonesome woods I took my way. So dark so dark as dark could be. The leaves were shivering on every tree. Oh don’t you think that griefs me.

Anyway. All of this is to say that I would like you to go and listen to some folk music today.

Here’s the final result:

See the Pen Wavy diving board by Cassidy (@cassidoo) on CodePen.

It’s not the most gorgeous art in the world, but it was interesting combining the wavy gradients with CSS skew and corner-shape for some diagonal lines. I admit I didn’t do this in the most efficient way, but it was fun!

I recorded a video of myself going from sketch to Pen, check it out:

There was definitely a point where the skew transform totally had me spiraling, but besides that, it was a fun way to just force myself to sit down and code for a bit, with no AI in my way.

Until next time!

Of course I have backups of the server, which backs up the repositories, but I wanted a solution that meant I also had the code locally to then send to my offsite backup.

I currently have code in three code forges: GitHub, Source Tube (which is Forgejo), and my Forgejo instance. My first instinct was to make a script that goes into every folder in my developer directory on my computer and fetches the changes but that wouldn't work if I made a new repository on one of the services. The ideal solution is to go through every repository on each of those services and fetch the latest changes to my machine. So I built Ash Fetchum and this logo that I'm very proud of (along with the name).

Ash Fetchum works by connecting to the GitHub or Forgejo API, fetches every repository, then cloning or fetching that repository to the defined location on your local machine, in my case /repo-backups. The readme has instructions on how to set it up and it should be relatively straight forward as long as you get the token permissions correct.

It also has a "manual" mode where you can give it an array of repository remotes to keep up to date. I'm using this as bodge-job replacement for some GitHub pages deployments that I want to move away from GitHub but it could easily be used for a more defined set of repositories to backup.

View Ash Fetchum on KnightForge.

Time passed and this last 6 months or so, with broader browser support and real-world usage in client projects, I've finally updated that playground to remove jQuery and modernise the code.

This quick article documents what backdrop-filter is, how it works, and how to use it effectively.

What is backdrop-filter?

The backdrop-filter CSS property applies graphical effects such as blurring or colour shifting to the area behind an element. Unlike the standard filter property which affects the element itself, backdrop-filter only impacts what's behind it.

For the effect to be visible the element tends to need some kind of semi-transparent background, but this constraint could actually be useful as it can aid and enforce intentional design decisions rather than letting blur become a "visual band-aid".

It could be particularly useful for creating "glassmorphism" effects - translucent overlays that slightly blur the content beneath (if you really, really felt the need).

.frosted-glass {
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
}

Why backdrop-filter is useful

backdrop-filter opens up design possibilities that would otherwise require heavier workarounds or compromises. Instead of choosing between obscuring content completely or losing visual focus, filters like blur create visual depth and separation with minimal overhead. Overlays and modals can maintain context—the visitor sees the page beneath and intuitively understands they're in a temporary state.

Backdrop-filter options

The backdrop-filter property accepts the same filter functions as the standard filter property.

Here are the main options:

blur()

Applies a Gaussian blur to the backdrop. The value defines the blur radius in pixels.

backdrop-filter: blur(5px);

brightness()

Adjusts brightness. Values below 100% darken, above 100% brighten. Useful for softening bright backgrounds behind text.

backdrop-filter: brightness(150%);

contrast()

Adjusts the contrast. Below 100% reduces it, above 100% increases it.

backdrop-filter: contrast(200%);

grayscale()

Converts the background to greyscale. 100% removes all colour.

backdrop-filter: grayscale(50%);

hue-rotate()

Rotates hues around the colour wheel. Values are set in degrees (deg).

backdrop-filter: hue-rotate(180deg);

invert()

Inverts colours completely. 100% is full inversion.

backdrop-filter: invert(75%);

opacity()

Adjusts opacity of the backdrop. Lower = more transparent.

backdrop-filter: opacity(50%);

saturate()

Adjusts colour saturation. Above 100% increases it, below decreases.

backdrop-filter: saturate(200%);

sepia()

Applies a sepia tone. 100% is full sepia.

backdrop-filter: sepia(90%);

Combining multiple filters

You can stack multiple effects in a single backdrop-filter rule. Blur paired with brightness feels natural:

.glass-overlay {
  backdrop-filter: blur(10px) brightness(120%);
}

But here's the catch: the order you list them in actually changes the result. Filters are applied sequentially, left to right, and each one operates on the output of the previous filter. When color-based filters interact (brightness, contrast, hue-rotate, saturate), the difference becomes visually obvious.

Filter application order

Compare these two—same filters, different order:

Brightness first, then contrast:

backdrop-filter: brightness(50%) contrast(150%);

Contrast first, then brightness:

backdrop-filter: contrast(150%) brightness(50%);

The first one darkens the backdrop, then applies extreme contrast to those darker values. The second applies contrast to the original colors first, then darkens the result. Blur and spatial effects are less sensitive to order, but always test your combinations to ensure they match your intent.

Browser support

Backdrop-filter is well supported across modern browsers. Chrome, Edge, Safari, and Firefox all support it.

The vast majority of filter functions work consistently: blur(), brightness(), contrast(), grayscale(), hue-rotate(), invert(), and saturate() are all broadly compatible. Where things get tricky is the newer or more experimental filters that some browsers haven't fully implemented yet.

opacity() and drop-shadow() are the two filters that seem to, currently, have some significant limitations. As of this writing, opacity() only has reliable support in Firefox Nightly; it's ignored in Chrome, Edge, and Safari. Similarly, drop-shadow() currently only works in Firefox Nightly and looks to be unsupported elsewhere. If you need these effects, they're safe to use as progressively enhanced features, but don't rely on them as core functionality.

For robust support for colour and blur-based effects, stick with the filters that have universal adoption: blur() paired with brightness(), contrast(), or grayscale() gives you everything you need for glassmorphism effects without compatibility worry.

Wrapping up

Backdrop-filter is a pretty straightforward property. Pair it with a semi-transparent background, pick your filter(s) (blur is most useful), and test on real devices. The main trick is remembering that transparency is generally required for the effect to show.

Try it yourself

Play with all backdrop-filter options live in this CodePen—adjust blur, brightness, contrast, saturation, and more to see how they combine:

smile, dog!

Did a colab with https://bsky.app/profile/did:plc:kzzmeg6shay6674u64gi6fd7
Where we did a sketch each, and the other did the lineart and render ^w^ Had a lot of fun

Illusory hallway

Klara
vgen comm for @medane.bsky.social
thank you so much ^w^
#kemono #furry #furryart