This week was a side quest (soon to be main quest) to build my new company website. We’re talking proper business here so I can’t be messing about. I figured an off the shelf SSG would be most suitable.

I asked the socials, “11ty or Astro?” Both are popular but Astro had the edge. I gave Astro an early spin back in 2022 and found it slow. Maybe it’s good now?

The install

I ran pnpm create with minimum release age to avoid immediately getting pwned.

I selected Astro’s “Use minimal (empty) template” option and it generated both an AGENTS.md and CLAUDE.md file — are you f — deep breaths, don’t fall for the rage bait.

I code in a modern editor so I installed the recommended Astro extension. At first I struggled with Zed recognising HTML.

I discovered a restart temporarily fixed the issue, but I guess I restarted one time too many because now the Astro LSP is completely broken.

No modern comforts for me then. At least I can look at HTML without the red squigglies.

I know what you’re going to say, “Dave bro, you’re inflicting this pain upon yourself! Just write HTML!” And I should. I just want native no-framework HTML includes, you know? Can you imagine the civilisation we’d live in if that could happen?

The docs are nice

I persevered and got my templates built with minimal fuss. I added a markdown collection and got the blog part blogging. It’s obvious that people use Astro to build real websites because all my “how do I” questions had an answer in the documentation.

I’ve been forced to deploy way too many “React spaces” in my templates because Astro’s whitespace treatment is a mystery. I don’t need many components so I haven’t gone deep on Astro vs JSX. My site has zero JavaScript on the front-end. I plan to keep it that way.

I’ll keep it around

Astro has got the job done, despite the developer experience being broken out of the box. I dread to think what graveyard of dotfiles is installed if I choose a non-minimal start. I can easily de-Astro my templates should I need to. Right now Astro is solving the right problems and the issues are but a nuisance.

Final conclusion: Astro is fine I guess. I’m not convinced Cloudflare’s acquisition is a good thing, considering their record for performative slop. I’ve lost my enthusiasm for DX and tooling to be honest. Even my own SSG experiments are collecting dust. I’d call the ecosystem a lost cause if I was being dramatic.

I just try to avoid the worst of it and care about the end product: shipping a damn fine website! Which I can’t do because I’ve got more businessing to business before this particular site sets sail. Maybe in a few months? It’s looking awesome on localhost though.

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.

At the risk of pissing on people’s chips I figured it’d be helpful to illustrate the three classes of AI user I’ve identified in the slopageddon. You might be thinking: “Hey, those personas are all negative!” — and you’re absolutely right!

Believe me, I’d love nothing more than to shut up about “AI”.

The thing is, not a week goes by without one of my peers crying out in abject despair. Until the grifters cease spitting in my face and threatening my career, please allow me to extend a middle finger their way.

I’m working on more positive plans that I hope to announce soon(-ish). Makes sense to be more proactive and spend energy where it matters. Not that this post didn’t! I enjoyed a few technical challenges artworking the page.

Images used with modifications:

Chalk Outline by Simon Child from Noun Project (CC BY 3.0)

Hand by Elisa Pintonello from Noun Project (CC BY 3.0)

Zombie by Hamstring from Noun Project (CC BY 3.0)

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.

I’m led to believe “Watch this space” is the latest propaganda piece from His Majesty’s Nanny State. I haven’t read past the title but according to gaming site Dexerto, YouTube lawyers read it and YouTube ain’t happy. Poor little YouTube.

The government is consulting on options, considering whether to make public service news easier to discover on sites like YouTube and TikTok, with greater prominence and with more visibility during periods of major public importance. It also seeks to discuss misinformation and online viewing habits.

YouTube urges creators to fight proposed UK algorithm changes - Matthew Benson, Dexerto

I glossed over the Dexerto article too. This whole thing is something about kids being hooked on Skibidi and not paying their racketeering license fee. Minecraft Let’s Plays will be spliced with a BBC impartiality report on what some fascist gammon thinks. Should the proposal become law, of course.

This is somewhat of a dilemma for a guy like me. If there’s one thing I hate more than a meddling GOV.UK, that might just be Big Tech. The thought of Google et al being ruffled warms my heart like a hot cup of tea on the summer solstice.

That was too many words on something I never read so I’ll get to the lede. I’m about to reveal the secret sauce that Big Tech has tried to suppress. The one true algorithm, which ironically might be their saviour.

SELECT p.* FROM posts p
JOIN follows f ON p.user_id = f.following_id
WHERE f.follower_id = ?
ORDER BY p.created_at DESC;

Only one parameter is required in the perfect algorithm: who I choose to follow.

I’m literally providing the exact data needed to curate my feed.

I know what defenders of the deceptive arts are thinking: but algorithms are proven to increase engagement! — I know, Sherlock. Do you enjoy your doomscrolling misery? Not every metric needs to be min-maxed at the expense of human health.

Modern apps sucks. Modern media sucks. Stick your “algorithm”.

^† It’s been decades since I studied SQL and database normalisation so please have mercy.

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.

I’m a front-end developer not a medical practitioner. If you’re bleeding IRL visit the hospital and stop googling medical issues!

The full-bleed layout — as described there by Josh Comeau — can be done with CSS grid (and subgrid). Sometimes you can’t grid the entire page.

That’s where Andy Bell’s utility class is useful.

.full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

But it ain’t perfect. The issue is that viewport units don’t solve the classic scrollbar problem. If you’re on macOS or a fancy OS that has fancy scrollbars, test on Windows! 100vw can be wider than the viewport. Because why would browsers do anything sensible?

It’s hard to see in Andy’s CodePen but a few pixels can be cropped either side. Add something like a border or shadow and it’s easier to see.

.full-bleed {
  box-shadow: inset 0 0 0 10px yellow;
}

This is not always a problem but it can lead to subtle alignment issues. By the way, macOS has a scrollbar setting “Show scroll bars > Always” that’ll let you test the issue.

Andy solves this partially by hiding horizontal overflow on the <body> element.

body {
  overflow-x: hidden;
}

An alternative fix is to always reserve space for the classic scrollbar.

html {
  scrollbar-gutter: stable;
}

That can look weird if there is no vertical scroll necessary.

Modern solution

The “modern” approach is to use CSS containment. Turn the <body> element (or any 100% width child) into a container. Then replace the viewport units with container units.

body {
  container: body / inline-size;
  overflow-x: clip;
}

.full-bleed {
  inline-size: 100cqi;
  margin-inline-start: calc(50% - 50cqi);
}

Now hiding overflow is not strictly necessary. I prefer clip — see Overflow Clip guide by Ahmad Shadeed. I clip out of caution because I make dumb things. I also use logical properties and values to support right-to-left (RTL) text direction. Ahmad has an excellent RTL Styling 101 too.

But wait!

Using cqi units assumes body is the parent container of the .full-bleed element. What if we have nested containers? Check this out. I’ve forked Andy’s CodePen to add another .inside container that is not the full viewport width.

This alone would usually break the new .full-bleed class and ruin the fun.

But we can fix that!

@property --body-size {
  syntax: "<length> | <percentage>";
  inherits: true;
  initial-value: 100%;
}

body {
  container: body / inline-size;
}

.inside {
  --body-size: 100cqi;
  container: inside / inline-size;
}

.full-bleed {
  inline-size: var(--body-size);
  margin-inline-start: calc(50% - (0.5 * var(--body-size))); /* † */
}

What is that @property magic?

To be honest I struggle to wrap my smooth brain around this!

Let me try to explain it to myself. Without the at-rule the value of --body-size is calculated at the time of use, i.e. within .full-bleed and therefore relative to the inside container. By explicitly defining a @property the value is now calculated when it’s set within .inside. There 100cqi refers to the parent body container and .full-bleed inherits that value.

But what if you have more containers?

(╯°□°)╯︵ ┻━┻

Gosh! Stop being so difficult!

I would have a direct child of <body> like <main> set the --body-size value.

<body>
  <main>
    <!-- blah -->
  </main>
</body>

^† I’m multiplying by 0.5 because division is for chumps.

Next-gen solution

What CSS needs is a way to reference a container when using container units.

Ideas have been proposed for example:

.full-bleed {
  inline-size: 100cqi(body);
  inline-size: calc(100 * cqi(body));
  inline-size: calc(100 * container(cqi, body));
}

Cancel Interop 2026 and make this happen!

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.

Today I’m introducing the next generation of code editor. A modern app to satiate the needs of the discerning coder. We’re talkin’ blazing fast collaboration between man and machine.

Try out the demo below (for best experience: desktop Chrome, obvs).

If you’re reading this in RSS I have no clue what you’re about to see… maybe visit the demo it’s a fun one!

Ahhhhh!

Yeah so um… have you noticed that all modern software is teetering on the enshitty cliff? Everything in my dock is an Electron-ified enshittybomb one update from disaster. There used to be alternatives. Now those suck too.

I don’t want to collaborate. How about you leave me alone and I’ll email you the file when I’m finished? Here, take a hard copy and jog on. You want to comment? I don’t remember asking for an opinion. Oh fantastic, now the computer thinks it’s people! I’ve got dialogs and popovers all up in my face yammering about agentic bollocks. Mystery icons everywhere. Wait… did they move my cheese? Ahhhhh!

It’s all your fault! I sure as heck didn’t ask for it. Remember when they made entire video games on a 32 KB floppy disk? Those were real developers.

v1 Release Notes: done.

Can you stop adding new “features”, please? You had one good idea. Finish it already? Now you’ve got ten thousand GitHub issues. Well done.

I used to enjoy making things on a computer :(

Icons used: Griddy Icons MIT License. “Clippy” © Microsoft (this is parody).

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.

I read an article the other day that had this facepalm moment:

And with modern LLM agents, turning a spec into working code is surprisingly fast. Point the agent at the APG pattern, describe your component’s markup, and get a solid first draft you can refine and test.

This is worrying, and the use of “LLM agents” isn’t the worst part!

The APG is not a how-to guide of ‘best practices’ for building accessible websites. It exists to demonstrate how the ARIA specification should work in theory — regardless of support and regardless of whether more accessible, non-ARIA patterns exist (they do).

As Eric Bailey notes —

The guide was originally authored to help demonstrate ARIA’s capabilities. As a result, its code examples near-exclusively, overwhelmingly, and disproportionately favor ARIA.

What I Wish Someone Told Me When I Was Getting Into ARIA - Eric Bailey

— which makes sense, because:

Browser and assistive technology developers can thus utilize code in this guide to help assess the quality of their support for ARIA 1.2.

Read Me First - ARIA Authoring Practices Guide (APG)

Even if ARIA was fully supported (it’s not) the APG still wouldn’t be a ‘best practice’ guide. ‘Best practice’ is not using ARIA at all.

If you can use a native HTML element or attribute with the semantics and behavior you require already built in, instead of re-purposing an element and adding an ARIA role, state or property to make it accessible, then do so.

2.1 First Rule of ARIA Use - Using ARIA, W3C

APG exists in a vacuum to show off the ARIA spec.

The button example includes this code, for crying out loud!

<div tabindex="0"
     role="button"
     id="action">
  Print Page
</div>

I’m unaware of any circumstance where <div role="button"> should ever be used over a <button>. Before you tell me you can’t edit your React component library, do the web a favour and delete your codebase.

In fairness, the button example has a “Read This First” disclosure — and guess what: they use a <details> element and not the disclosure pattern because the APG isn’t best practice. It’s hard to blame developers for misusing ARIA and the APG. I’ve been confused myself. As W3C documentation goes, APG is rather sexy. It’s a useful resource if you understand why it exists.

Misuse of ARIA has made the web less accessible.

Increased ARIA usage on pages was associated with higher detected errors. The more ARIA attributes that were present, the more detected accessibility errors could be expected.

The WebAIM Million - WebAIM

TL;DR

Avoid ARIA where ever possible. Don’t point a freaking LLM at the APG! I can’t believe I’m saying this but use Google’s slop if you absolutely refuse to learn/code yourself. Apparently OpenAI is throwing ARIA at the web and seeing what sticks. Ahhh! I don’t know anymore, take some pride in your expertise?

P.S. name an assistive technology that isn’t a screen reader.

Ain’t easy, is it? So don’t be casually punctuating with the word “test” like it’s some get-out-of-jail-free card for your dubious practice and advice.

“Overview of Digital Accessibility Technologies” by Declan Chidlow is a great help if you want to win this game at parties.

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.

CSS isn’t just a complex language, it’s one of the most advanced graphics, layout, and typesetting languages available in computing.

The deskilling of web dev is harming the product but, more importantly, it’s damaging our health – this is why burnout happens - Baldur Bjarnason

Hard isn’t a negative label. You know what else is hard? Applying silicone sealant to waterproof bathroom fixtures. It’s hard enough that such expertise are worthy of a profession. Regardless, I decide it should be easy. I made a proper mess and my hands are now hydrophobic. Seriously, any tips applying this gunk?

CSS is deceptively hard as a whole despite many of the constitute parts being simple. CSS syntax is simple (mostly). CSS properties and values are simple (to lookup). What is hard is deciding how to organise styles. What we like to call: CSS methodology.

Methodology

Every developer has their own preferred methodology. Over the years we’ve seen many notable examples published — SMACSS, OOCSS, BEM, ITCSS, CUBE — to name a few. These methodologies have several things in common:

• Naming conventions
• Modular composition
• Cascade management
• Controlled specificity

The CSS spec does not dictate methodology. You are left to bring order to chaos. The correct methodology is the one that you and your team can adhere to.

Historically, I’ve used a basic BEM-like naming convention. I prefer flat specificity and a logical order to match the design hierarchy. I think component-first and avoid getting too DRY because I can’t control who is going try their hand at styling later.

Modern CSS is moving too fast to settle on one methodology. Custom properties allow design tokens to be part of the system. @container and @scope rules add a new depth to encapsulation. Cascade layers and the unassuming :where pseudo-class have all but nullified specificity wars.

As CSS gets more complex, I dare say CSS is actually getting easier (for a professional).

Strict methodological conventions become less important when the laws they impose can be safeguarded by the code itself. That frees us to explore more adventurous and less rigorous styles. Safe in the knowledge that any mess is more readily contained. CSS technical debt is a cheaper commodity. Some kind of CSS methodology is still necessary but breaking the rules is not the headache it used to be. Gnarly selectors are not the bane of my existence anymore.

Behold!

Now this is the point where you’re expecting me to announce my brand new CSS methodology with a trendy domain and a ten part TikTok series. Maybe a few practical code examples to backup my bold claims?

You’re going to be very disappointed. That is not this post.

I just think it’s neat to capitalise component class names like they’re proper nouns.

<article class="Post">
  <h2>Hello, world!</h2>
</article>
<!--/Post-->

Isn’t that fun? I find it adds clarity to a component’s scope. I even add an HTML comment after the closing tag so that source-spelunkers don’t get lost.

I do plan to write a more groundbreaking thesis on CSS one day. The world is not ready for my radical ideas yet and I’ve got a bathroom to finish redecorating.

Interesting tidbit from the original CSS level 1 specification (emphasis mine).

CSS gives so much power to the CLASS attribute, that in many cases it doesn’t even matter what HTML element the class is set on -- you can make any element emulate almost any other. Relying on this power is not recommended, since it removes the level of structure that has a universal meaning (HTML elements). A structure based on CLASS is only useful within a restricted domain, where the meaning of a class has been mutually agreed upon.

1.4 Class as selector - Cascading Style Sheets, level 1

class considered harmful!

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.

I rescued an animal today! Probably…

The UK has its fair share of canals. I like canals. They cut through urban life offering an escape back to nature and are teaming with wildlife.

Canal towpaths are perfect for running. They’re easy underfoot — until late spring when the goslings hatch and then I’m doing a ballet to avoid trouble. Canada goose are the most visible bird living here all year round. They gather in groups and are rather docile around humans until the little yellow fluffballs arrive and then it’s mayhem.

Mute swans are a less common sight on the routes I run. This year a pair chose to nest in a safe but visible spot which was wonderful to witness. Swan nests are huge mounds of dirt, twigs, and coke bottles, apparently.

This morning I found dad-swan charging back and forth across the water. He stopped to peer into an overflow trench around 2–3 feet deep aside the canal. As I ran closer I saw a young bird has fallen in. It was older than a fluffball but still covered in muddied down. Larger than a duck, for scale. It was still too young to fly out of its predicament. At first I thought it was one of the cygnets. Mum-swan was in the nest with the others not far away.

I don’t speak bird but dad-swan seemed more aggressive than concerned. As I got closer he paddled a short distance away to observe.

I went down on my stomach and slowly reach under the guard rails wondering how painful a finger-pecking would be. I kept my ears open for a charge attack. The young bird didn’t flinch. It allowed me to reach under its belly and lift it up.

Before I could place it safely on the ground it attempted a Loony Tunes escape by running in the air. This unbalanced and forced me to tip it sideways, thankfully onto the stones just below water level and not back into the trench. It then frantically hopped not into the water, but up onto the towpath and quickly waddled behind me into the grass.

As I got back to my feet dad-swan returned to investigate and looked satisfied the young bird was gone before returning to his nest. It took me a minute to find the young bird now resting deep in the brambles. It was only then did I realise this might not be a swan but a goose. It was large enough to have outgrown the distinct yellow colouring.

I left it where it was hiding. My presence would only cause further distress. It was not physically injured otherwise I might have called the RSPCA who can rescue wildlife (RSPB don’t; common misconception).

I don’t go running with my phone anyway so I returned later to check and take photos. The young bird had vanished from its hiding spot. I’m almost certain it was a goose now after seeing this family not far from the scene.

It’s funny, despite being so common I’ve never once seen an actual goose nest. I’ve no idea where they hide them.

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.

That’s some serious cognitive dissonance!

404 Media recently reported on “How Deepfakes Tore a High School Apart”. Kids are using deepfake apps (from Apple’s App Store) to victimise their classmates. Adults are doing it too, of course. Deepfakes on demand are a cornerstone of new Twitter.

Apple front-loaded the keynote with a “we care about children” narrative that the media and fanboys lapped up. Then they advertised features that are suspiciously at odds (if you stop to think). It was a shrewd marketing stunt they’ve pulled before. In past events Apple has greenwashed the opening spiel before flogging a new iPhone model with an annual upgrade plan. Don’t worry, it’s all recycled. Totally eco-friendly to ship mass-produced luxury goods around the world to meet a manufactured demand. I’m sure Apple-branded slop will be harmless too, I remember someone telling me they care about this stuff.

Non-consent

I’ve written about AI’s consent problem in more trivial context before. The AI industry simply cannot take “no” for an answer. You will use it. You will suffer it. You will be a victim.

Jared White makes a point on this topic:

I don’t know about y’all, but I think it should be illegal to generate slop imagery of other people without their consent.

Apple really fell down hard on this feature (and I’ve been hearing other podcasters saying the exact same thing). I hope they come to their senses and realize the “ick” isn’t worth a flashy keynote demo.

@jaredwhite@indieweb.social - Mastodon

At the very least I implore the ‘court of public opinion’ to vilify generative AI. It’s seriously creepy, and not just the uncanny valley aesthetic.

Jared makes a stronger point on the Vibe Coded podcast. What happens when someone deepfakes a person with a disability that wasn’t visible in the original photo? Good chance it’ll erase their disability. That ain’t okay. That might be traumatic for some people.

But sure, Photoshop exists. We must accept that new technology can be misused, right? Seriously, whole lotta money riding on this! It’s just a tool.

AI apologists are quick to abandon all moral and common sense for the most mediocre slop. Whether or not Apple’s own app is capable of anything doesn’t matter. Its presence will only help to normalise the dehumanising efforts of the AI industry.

This future sucks! They did fix those rounded corners on macOS though.

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.

Bluesky has always supported a few open graph meta tags which I use to generate images for blog posts. That’s part of the social media game; get in people’s faces as loudly as possible. Now the game has changed!

Fancy button

I return Monday ready to work and suddenly I start seeing a fancy new “View publication” button appear in my Bluesky feed. I’ve never wanted nor needed a button before but now that people are rocking buttons, what am I supposed to be, a buttonless pleb?

I got my own button it looks like this:

Mat Marquis, fellow button connoisseur, was quick with a guide to “Implementing Standard.Site” which I hastily copied.

Automation

Mat used an atproto explorer to edit records which is akin to rawdoggin’ SQL in production. Given the weekly GitHub and NPM malware party this is probably a safer play than running npm install yourself. I’m never going to remember to publish manually though.

I have a janky build script and some experience with the @atcute libraries. How hard can it be? My script begins by generating a manifest of pages by parsing markdown before rendering the HTML template.

I added a new step that fetches all atproto records in the site.standard.document collection. It cross-references the paths in my manifest. Any unknown path has the record deleted. It then iterates the manifest and either updates the atproto record (if title or description has changed), or creates a new record if none existed. Finally it adds the atproto URI to the manifest for the <link> element.

Now my blog is standard.site and I have a fancy button to prove it.

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.

My break came at a time of high industry (and personal) stress.

Seeing talented people lose motivation bums me the hell out.

Reach out and say thanks - Kevin Powell

Thank you to those who reached out whilst I was offline :)

Catching up on RSS and reading educators question their worth makes me angry. Seeing more people cite “AI” as a primary reason to exit tech boils my blood!

AI was the last straw. Have you heard of that island off India where the indigenous population kills any outsiders fool-hardy enough to land? They are doing the rest of us a favor by preserving a way of life we may need again someday, or at the very least should not want to see completely extinguished.

I Am Retiring from Tech to Live Offline - Chad Whitacre

The chatbox psychosis epidemic remains in full force. Despite countless studies suggesting AI isn’t paying off. Despite countless examples showing that AI is broken by design. Despite growing sentiment that AI isn’t welcome. Despite everything, the stochastic parrot feeders insist that our future is token servitude.

I crashed out hard at Google’s deskilling. That incensed me. To see the word “skill” redefined and sold as a directory of markdown files is a grave insult.

An opportunity

I’m still motivated. In the face of career-ending threats I see opportunity. I’ll be setting up shop as a limited company soon(-ish) after 15+ years of self-employment. Expect more news on that front later in the year.

First I need to get a grip on unhealthy levels of stress. That means prioritising paid client work over my blog and social media antics! I work Mon–Thursday for exactly that reason. Friday is my personal day. Lately though I’ve found myself in keyboard warrior mode at 11am midweek. That must stop if I am to survive!

The challenge is to continue enjoying my profession. I want to find a way to encourage and remotivate others too. At the same time, I can’t ignore the continued assault. The web must be fought for. That ain’t easy when it’s all so demoralising. I won’t be silenced in my fight against alternative thoughts. The gatekeepers cannot be allowed to turn one of humanity’s greatest creations into a tokendollar economy.

I can’t believe this needs repeating but: do not replace real skills with a directory of markdown files. Stay hungry to learn. Fight for the web.

Thanks for reading! Follow me on Mastodon and Bluesky. Subscribe to my Blog and Notes or Combined feeds.