<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet href="/assets/css/rss.xsl" type="text/xsl"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:content="http://purl.org/rss/1.0/modules/content/">
  <channel>
    <title>dbushell.com (blog)</title>
    <description>David Bushell’s Blog only feed</description>
    <link>https://dbushell.com/blog/</link>
    <lastBuildDate>Thu, 20 Aug 2026 15:00:00 GMT</lastBuildDate>
    <atom:link href="https://dbushell.com/rss.xml" rel="self" type="application/rss+xml"/>
    <author>David Bushell</author>
    <language>en-GB</language>
<item>
  <title>Ruminations on notifications</title>
  <description>I’m on annual leave next week. Now would be the ideal time to drop premium rage-bait and walk away. “One browser tab is enough” was drafted but due to a tragic git clean accident we are all spared. This sideways look at notifications should be more relatable. When I pay using NFC I’m annoyed twice. […]</description>
  <link>https://dbushell.com/2026/08/20/ruminations-on-notifications/</link>
  <guid isPermaLink="true">https://dbushell.com/2026/08/20/ruminations-on-notifications/</guid>
  <pubDate>Thu, 20 Aug 2026 15:00:00 GMT</pubDate>
  <content:encoded><![CDATA[<p>I’m on annual leave next week. Now would be the ideal time to drop premium rage-bait and walk away. <em>“One browser tab is enough”</em> was drafted but due to a tragic <a href="https://bsky.app/profile/dbushell.com/post/3mt4oik3ek22z" rel="noopener noreferrer" target="_blank"><code>git clean</code> accident</a> we are all spared. This sideways look at notifications should be more relatable.</p><hr/><p>When I pay using NFC I’m annoyed twice. First by Apple Pay, then again when my banking app catches up. Can’t they decide between themselves? I don’t need two reminders about the groceries I bought a minute ago. Maybe I can disable notifications for either one, but then I might miss real fraud alerts.</p><p>Notifications are a chore I could do without.</p><h2 id="restart-required">Restart required</h2><p>Notifications are a core feature of <a href="https://tonsky.me/blog/needy-programs/" rel="noopener noreferrer" target="_blank">needy programs</a>. Every app wants to be the centre of attention. They can’t wait to tell you about their new features. Presumably in-app notifications are the new trend because OS level notifications are easily blocked.</p><p>Vivaldi ruined my browsing experience for a long time.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2025/vivaldi-restart.avif" alt="Vivaldi&#39;s &#39;Restart Required&#39; notice" width="190" height="80" decoding="async" fetchpriority="low" loading="lazy" id="--img-3288c263"/></figure><p>That annoying “toast” wasn’t dismissible. It crossed the <a href="https://www.theregister.com/2017/01/19/browser_line_of_death/" rel="noopener noreferrer" target="_blank">line of death</a> and looked suspicious. Eventually it was fixed by moving into the tab bar.</p><p>I recently <a href="https://dbushell.com/2026/08/07/sublime-text/">returned to Sublime Text</a> to avoid <a href="https://dbushell.com/2026/07/02/the-modern-app/">modern apps</a> that were too needy. In response to my post, developers were keen to laud their command line supremacy. I don’t disagree but the CLI isn’t immune to notification nonsense. Every time I open <a href="https://neovim.io/" rel="noopener noreferrer" target="_blank">Neovim</a> I get stopped.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/neovim-update.avif" alt="Neovim notification: Plugin Updates - Press ENTER or type command to continue." width="410" height="90" decoding="async" fetchpriority="low" loading="lazy" id="--img-965df633"/></figure><p>Guess what happens when I press enter? Nothing! How about telling me what the command is to update the damn plugin?! Dear devs, updates may be your life, they ain’t mine!</p><h2 id="noisy-websites">Noisy websites</h2><p>The web platform demands that anything native apps can do, the web must copy. There are <a href="https://infrequently.org/2020/06/platform-adjacency-theory/" rel="noopener noreferrer" target="_blank">good arguments</a> for this. The counterpoint is terrible implementation. Browser vendors have done a dismal job at designing the user experience around <a href="https://developer.mozilla.org/en-US/docs/Web/API/Push_API" rel="noopener noreferrer" target="_blank">push notifications</a>.</p><blockquote><p><em>“This website wants to send you notifications, allow?”</em></p></blockquote><p>Does this still pop up before a page has even loaded? I wouldn’t know. I blocked that years ago without thinking twice.</p><p>My advice, look for this:</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/chrome-block-notifications.avif" alt="Chromium notifications default behviour setting with &#39;Don&#39;t allow sites to send notifications&#39; selected." width="380" height="170" decoding="async" fetchpriority="low" loading="lazy" id="--img-7d325cc0"/></figure><p>— or this:</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/firefox-block-notifications.avif" alt="Firefox notifications setting with &#39;Block new requests asking to allow notifications&#39; checked." width="620" height="80" decoding="async" fetchpriority="low" loading="lazy" id="--img-e9bce9e7"/></figure><p>— and block wholesale without exception.</p><p>In all my years of building websites I’ve never had a single client request or even consider notifications. Not one project that scoped in such a requirement.</p><p>Apple held out for <a href="https://webkit.org/blog/16535/meet-declarative-web-push/" rel="noopener noreferrer" target="_blank">declarative web push</a> in Safari citing their usual privacy theatre (<a href="https://www.404media.co/apple-hide-my-email-vulnerability-reveals-peoples-real-email-addresses/" rel="noopener noreferrer" target="_blank">lol</a>). Apple aren’t fans of silent push with no visible UI. I reckon their actual trepidation is their unreliable cloud syncing infrastructure. When I tested it was 50/50 on whether a notification ever arrived via Apple.</p><p>Mozilla’s servers are rock solid. One rainy day I ran an experiment to send large data split across many hundred web push payloads. I was able to clock <em>kilobytes</em> per second. This is awful abuse of the API. Apple might be right about silent push…</p><h2 id="literal-spam">Literal spam</h2><p>Proton Mail was one of the few mobile app that I allowed notifications. My inbox is usually rather chill, except when <a href="https://dbushell.com/2026/01/22/proton-spam/">Proton spam me themselves</a>.</p><p>Alongside my public addresses I use [redacted]@ for important accounts. I configured a folder to send mobile notifications for this address only. It worked for years. Then one day the spam notifications began. Spam that had already been flagged and filtered into trash (sent to any address).</p><p>I reported this bug to Proton Support in May and was told:</p><blockquote><p>If we have any relevant information to share with you, or if we have any questions, we will follow up on this support ticket.</p></blockquote><p>I never heard back. Notifications remain disabled.</p><p>Today my phone is almost entirely notification free unless I get an SMS from family. Oh, and Apple pestering me about iOS 26 several times a week.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/ios-update-notification.avif" alt="iPhone system notification stating: iOS 26.6 is available. You can update now or schedule the update for later." width="390" height="183" decoding="async" fetchpriority="low" loading="lazy" id="--img-70da0b06"/></figure><p>My iPhone will remain on iOS 18, thanks. Apple sure love their dark arts and deceptive patterns. There is no option to stop this constant nagging. If other apps tried it I bet Apple would delist them. This ain’t about security, I get iOS 18 updates.</p><h2 id="hot-fires-in-your-area">Hot fires in your area</h2><p>UK Government got trigger happy with their alert system.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/severe-alert.avif" alt="Severe Alert.
    Issued by the UK Government.
    There is a very high risk of wildfires nationally. Residents, landowners and visitors should not undertake any activity that could start a fire, including disposable barbecues, firepits, garden incinerators or fireworks.
    Even a small flame can rapidly develop into a major wildfire placing lives, homes, businesses and emergency responders at risk.
    Follow official updates and report signs of fire immediately by calling 999. Search gov.uk/alerts for more information." width="390" height="488" decoding="async" fetchpriority="low" loading="lazy" id="--img-7aad12fc"/></figure><p>As with all mobile alerts of this nature, we’re reminded that <a href="https://www.bbc.co.uk/news/articles/cwyllkz80dlo" rel="noopener noreferrer" target="_blank">abuse victims are at risk</a>. This one also led to fire departments across <a href="https://www.independent.co.uk/news/uk/home-news/fire-uk-emergency-alert-999-call-b3033507.html" rel="noopener noreferrer" target="_blank">England</a> and <a href="https://www.northwaleschronicle.co.uk/news/26467081.north-wales-999-calls-surge-following-emergency-phone-alert/" rel="noopener noreferrer" target="_blank">Wales</a> having to remind people their neighbour’s barbecue is not an emergency.</p><p>As Robb Knight noted: <a href="https://rknight.me/blog/severe-alert-issued-by-me-this-blog-post/#:~:text=There%20is%20nothing%20actionable%20in%20the%20alert" rel="noopener noreferrer" target="_blank">“there is nothing actionable in the alert”</a>. Unless you count “Search gov.uk”, so I did. The more information provided was:</p><blockquote><p>Sent by the UK government at 7:01pm on Friday 14 August 2026</p><p>This alert was sent to England and Wales.</p><p>Surrounding areas might also have received the alert.</p><p><cite><a href="https://www.gov.uk/alerts/14-aug-2026-2" rel="noopener noreferrer" target="_blank">Emergency Alert</a> - GOV.UK</cite></p></blockquote><p>Thanks, Government. That could have been an email.</p><p>Why don’t these alerts respect my volume setting? Scared me half to death! If they have to be all or nothing, reserve them for zombies or higher.</p><h2 id="cant-be-trusted">Can’t be trusted</h2><p>And that’s the problem with notifications. There is rarely the granular control necessary to make them useful. Most senders cannot be trusted to used them responsibly. The temptation to abuse direct access to people is too much, especially for <a href="https://shkspr.mobi/blog/2026/08/and-then-the-men-with-guns-tell-you-to-do-it-anyway/" rel="noopener noreferrer" target="_blank">men with guns</a>.</p><p>If I ever allow notifications to begin with I disable them indefinitely the first time an app cries wolf. Every app cries wolf eventually.</p><p>Life is so much better when I go seeking information at my own pace.</p>
<hr>
<p>
Thanks for reading! Follow me on <a href="https://dbushell.com/mastodon/">Mastodon</a> and <a href="https://dbushell.com/bluesky/">Bluesky</a>.
Subscribe to my <a href="https://dbushell.com/rss.xml">Blog</a> and <a href="https://dbushell.com/notes/rss.xml">Notes</a> or <a href="https://dbushell.com/merge/rss.xml">Combined</a> feeds.
</p>
]]></content:encoded>
</item>
<item>
  <title>Valley Fold Ltd</title>
  <description>I’ve already announced my new company half a dozen times by now. I figured it was about time I gave real details, so here’s the name and logo! Valley Fold is my new home for professional services… once I’ve finished the website. I’m not one for big splashy launches, I’ll probably just hit deploy and […]</description>
  <link>https://dbushell.com/2026/08/11/valley-fold-logo-brand-design/</link>
  <guid isPermaLink="true">https://dbushell.com/2026/08/11/valley-fold-logo-brand-design/</guid>
  <pubDate>Tue, 11 Aug 2026 15:00:00 GMT</pubDate>
  <content:encoded><![CDATA[<p>I’ve already <a href="https://dbushell.com/2026/07/24/businessing/">announced my new company</a> half a dozen times by now. I figured it was about time I gave real details, so here’s the name and logo!</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/valley-fold-logo.png" alt="Valley Fold logo design." width="1920" height="1080" decoding="async" fetchpriority="low" loading="lazy" id="--img-5c4109ab"/><figcaption>Ta-da.</figcaption></figure><p><a href="https://valleyfold.co.uk/" rel="noopener noreferrer" target="_blank">Valley Fold</a> is my new home for professional services… once I’ve finished the website. I’m not one for big splashy launches, I’ll probably just hit deploy and let people discover it.</p><h2 id="logo-design">Logo design</h2><p>The brand and logo were designed by my very patient friend at <a href="https://axiacreate.co.uk/" rel="noopener noreferrer" target="_blank">Axia Create</a>.</p><p>George and I worked on concepts for several names, all of which I pre-emptively bought domains for (…ouch). Following feedback from trusted peers a clear winner stood out. Valley Fold happened to be the only name we both independently scribbled down early.</p><p>For those unfamiliar, “valley fold” comes from origami, an art form that has partially defined my aesthetic since <a href="https://dbushell.com/showcase/origami-unfolded/">college days</a>. (The website may have some spiel to explain.)</p><p>After the grueling task of my indecisiveness — we’ve been discussing this for a year — George is away on holiday. That leaves me guessing how he designed the logo.</p><p>Probably like this:</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/valley-fold-logo-circles.png" alt="Valley Fold logo overlayed with nonsensical concentric circles and a warped golden ratio." width="1920" height="1080" decoding="async" fetchpriority="low" loading="lazy" id="--img-e6629f67"/></figure><p>I’m joking, obviously. That’s nonsense. The logo fits on a square grid. It’s a custom logotype adapted from an existing font. We created a new “V” and “Y” and tightened the corners across all characters. The “L” were narrowed and kerning snaps neatly to the grid.</p><p>More importantly, I love it!</p><p>I’ve been secretly rocking the logo as a web button all month.</p><figure class="Image Image--basic"><p><a href="https://valleyfold.co.uk/" rel="noopener noreferrer" target="_blank">    <img alt="Valley Fold web button" src="https://dbushell.com/assets/images/webbtn-valleyfold.png" width="88" height="31" decoding="async" fetchpriority="low" loading="lazy" id="--img-db893985"/>  </a></p></figure><p>I had fun pixel aligning the logo at such a small size. The tail of the “Y” is offset to the left to avoid anti-aliasing. The web button side quest has delayed the actual website.</p><p>I’ll show more of the brand when version one of the website launches. I’m aiming for early September. I’d like to spend months designing the perfect site but client work takes precedence. Thankfully I’ve been busy. I have to get something online soon though. The nice thing about websites is that you can redesign them <a href="https://legacy.dbushell.com/" rel="noopener noreferrer" target="_blank">again and again.</a></p><hr/><p><a href="https://valleyfold.co.uk/" rel="noopener noreferrer" target="_blank">Valley Fold</a> is a big change but also a little one because my services remain the same. I’ve been making websites for coming on two decades now. Websites for real people! I plan to keep doing that for many years to come.</p>
<hr>
<p>
Thanks for reading! Follow me on <a href="https://dbushell.com/mastodon/">Mastodon</a> and <a href="https://dbushell.com/bluesky/">Bluesky</a>.
Subscribe to my <a href="https://dbushell.com/rss.xml">Blog</a> and <a href="https://dbushell.com/notes/rss.xml">Notes</a> or <a href="https://dbushell.com/merge/rss.xml">Combined</a> feeds.
</p>
]]></content:encoded>
</item>
<item>
  <title>They don’t make ’em like Sublime Text anymore</title>
  <description>After a multi-year detour wading through the quagmire of bloatware that is modern software I’m back to coding in Sublime Text. I am finally at peace! Do you know how relaxing it is without the daily “update available” and “view release notes” ritual? There is nothing I dread more than release notes. […]</description>
  <link>https://dbushell.com/2026/08/07/sublime-text/</link>
  <guid isPermaLink="true">https://dbushell.com/2026/08/07/sublime-text/</guid>
  <pubDate>Fri, 07 Aug 2026 15:00:00 GMT</pubDate>
  <content:encoded><![CDATA[<p>After a multi-year detour wading through the quagmire of bloatware that is <a href="https://dbushell.com/2026/07/02/the-modern-app/">modern software</a> I’m back to coding in <a href="https://www.sublimetext.com/" rel="noopener noreferrer" target="_blank">Sublime Text</a>.</p><p>I am finally at peace! Do you know how relaxing it is without the daily <em>“update available”</em> and <em>“view release notes”</em> ritual? There is nothing I dread more than release notes. Between VS Code and Zed, I must have glanced at a million lines of sloppy commit summaries. Can I remember seeing anything of value? Nothing comes to mind…</p><p>Modern software sucks. It’s built by self-proclaimed “engineers” who make their chat box addiction your problem and still use <em>Twitter.</em></p><p>When I mentioned Sublime Text on the socials people went all nostalgic on me.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/ben-kenobi.avif" alt="Obi-wan Kenobi: &#39;Now that’s a name I’ve not heard in a long time.&#39; - Star Wars: Episode IV - A New Hope" width="1840" height="782" decoding="async" fetchpriority="low" loading="lazy" id="--img-9f0758ab"/><figcaption>Yes, I captioned a screenshot from a 4K scan of the original 1977 35mm Technicolor release print and then <a href="https://squoosh.app/" rel="noopener noreferrer" target="_blank">squooshed</a> it into a 35KB lossy AVIF, so what?</figcaption></figure><p>Sublime Text is still around. The last <a href="https://www.sublimetext.com/download#changelog" rel="noopener noreferrer" target="_blank">stable build</a> was released May 2025. There are <a href="https://www.sublimetext.com/dev" rel="noopener noreferrer" target="_blank">dev builds</a> as recent as July this year. I don’t know who develops it and I don’t care. All I know is that I can place my text cursor and read the surrounding code without a bombardment of popovers, pop-unders, pop-left-and-rights, pop-inlines, pop-in-and-out-too-fast-to-sees.</p><p>It’s been a few weeks since I returned to Sublime Text. It does everything I need. There is not a single “feature” I’ve missed from VS Code or Zed. Many I’m glad to see the back of.</p><p>The perfect dev stack is a collection of software that each does one job and doesn’t suffer main character syndrome. I want to code, I’m not looking to make lifestyle choices. I don’t want a bloated everything app. Don’t get me started on the “unified toolchain” plague! Show me the latest VC-backed build tool and I’ll show you ten lines of PHP that does a better job.</p><p>If you’re fed up of the absolute state of things, Sublime Text still works.</p>
<hr>
<p>
Thanks for reading! Follow me on <a href="https://dbushell.com/mastodon/">Mastodon</a> and <a href="https://dbushell.com/bluesky/">Bluesky</a>.
Subscribe to my <a href="https://dbushell.com/rss.xml">Blog</a> and <a href="https://dbushell.com/notes/rss.xml">Notes</a> or <a href="https://dbushell.com/merge/rss.xml">Combined</a> feeds.
</p>
]]></content:encoded>
</item>
<item>
  <title>End of the contact form saga</title>
  <description>I can’t take it anymore! If you want to speak to me, send an email. My contact form is out of service indefinitely. This is actually in lieu of moving my professional services to a yet to be announced limited company. But I can’t let opportunity for a dramatic blog post go to waste. […]</description>
  <link>https://dbushell.com/2026/07/31/contact-form-saga/</link>
  <guid isPermaLink="true">https://dbushell.com/2026/07/31/contact-form-saga/</guid>
  <pubDate>Fri, 31 Jul 2026 15:00:00 GMT</pubDate>
  <content:encoded><![CDATA[<p>I can’t take it anymore!</p><p>If you want to speak to me, <strong>send an email.</strong> My contact form is out of service <em>indefinitely.</em></p><figure class="Image Image--basic"><img src="https://dbushell.com/images/blog/2026/contact-form-out-of-service.avif" alt="My old contact form in a disabled state with yellow &#39;out of service&#39; tape wrapped across it." width="840" height="600" decoding="async" fetchpriority="low" loading="lazy" id="--img-1edb5fcf"/></figure><p>This is actually in lieu of moving my professional services to a <a href="https://dbushell.com/2026/07/24/businessing/">yet to be announced</a> limited company. But I can’t let opportunity for a dramatic blog post go to waste.</p><p>Also, I’ll probably skip the contact form on my company website. Is that a bad idea? I always got <a href="https://dbushell.com/notes/2025-10-11T16:04Z/">more spam via the form</a> than the publicly visible address.</p><p>My contact form has been through a lot.</p><p>Previous entries in the saga:</p><ul><li><a href="https://dbushell.com/2026/03/17/smtp-on-the-edge/">SMTP on the edge</a></li><li><a href="https://dbushell.com/2025/10/07/email-the-final-form/">Email: the final form</a></li><li><a href="https://dbushell.com/2025/09/12/cloudflare-email-smtp-server/">I shut the emails out</a></li><li><a href="https://dbushell.com/2025/09/05/typescript-email-smtp-server/">I let the emails in</a></li><li><a href="https://dbushell.com/2025/05/02/progressive-dehancement/">Progressive dehancement</a></li><li><a href="https://dbushell.com/2023/07/14/pgp-email-encryption-aws-cloudflare-worker/">PGP encrypted contact form</a></li></ul><p>I quite enjoyed the week in September when I opened a port to a self-hosted SMTP server I coded in 100 lines of TypeScript. The final iteration of my form included true end-to-end encryption. Through trial and error heuristics, I successfully eliminated all spam. (How many false positives I rejected remains unknown…)</p><p>My <a href="https://dbushell.com/privacy/">privacy policy</a> which was already simple is now entirely pointless.</p><p>Are contact forms just outdated in general? Everyone seems to embed a <em>Calendly</em> widget these days. That’s not my style. I like the tiny bit of additional friction required to send an email. If someone can’t be bothered their message probably wasn’t serious. I’m not looking to maximise meaningless engagement.</p><p>I look forward to moving business email to a separate domain. Biggest mistake I ever made was using <code>@dbushell.com</code> for personal and business. Nothing worse than seeing an “urgent” request only to find out on Monday it didn’t matter.</p><p>So long old contact form, it was fun!</p>
<hr>
<p>
Thanks for reading! Follow me on <a href="https://dbushell.com/mastodon/">Mastodon</a> and <a href="https://dbushell.com/bluesky/">Bluesky</a>.
Subscribe to my <a href="https://dbushell.com/rss.xml">Blog</a> and <a href="https://dbushell.com/notes/rss.xml">Notes</a> or <a href="https://dbushell.com/merge/rss.xml">Combined</a> feeds.
</p>
]]></content:encoded>
</item>
<item>
  <title>Businessing 101</title>
  <description>Back when I began freelancing I figured I’d set up a limited company eventually. I guess thirteen years later is eventually. I’ve finally got a local accountant working on company registration. Exciting times! The final push was this Making Tax Digital thing from GOV.UK. […]</description>
  <link>https://dbushell.com/2026/07/24/businessing/</link>
  <guid isPermaLink="true">https://dbushell.com/2026/07/24/businessing/</guid>
  <pubDate>Fri, 24 Jul 2026 15:00:00 GMT</pubDate>
  <content:encoded><![CDATA[<p>Back when I <a href="https://dbushell.com/2013/02/04/a-new-home/">began freelancing</a> I figured I’d set up a limited company eventually. I guess thirteen years later is eventually. I’ve <em>finally</em> got a local accountant working on company registration. Exciting times!</p><p>The final push was this <a href="https://www.gov.uk/government/collections/making-tax-digital-for-income-tax" rel="noopener noreferrer" target="_blank">Making Tax Digital</a> thing from GOV.UK. It’s probably not complicated if I cared to look but I’m <a href="https://dbushell.com/2025/03/28/vibe-free-sveltekit-for-fun-and-profit/">crawling back to FreeAgent</a> anyway. My home-cooked accounting app served one whole tax year! I will have an accountant do everything now.</p><p>Another big reason to become <em>Ltd</em> is to face <a href="https://dbushell.com/2026/06/01/challenge-and-opportunity/">challenge and opportunity</a> head on. A loud contingent of the web industry are giving themselves up to the borg. Mandated token servitude and knee-bending to <a href="https://dbushell.com/2026/05/20/google-just-spat-in-my-face/">grifters like Google</a> is sending web dev back to the stone age.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/toy-story-5-lilypad.avif" alt="Lilypad from Toy Story 5; a cute wide-eyed frog themed tablet with &#39;Hi! Let&#39;s play!&#39; on the screen." width="840" height="453" decoding="async" fetchpriority="low" loading="lazy" id="--img-484e7f3d"/><figcaption>What are we building today?</figcaption></figure><p>I still care about making meaningful websites for <strong>real people.</strong> I have no desire to dump dead websites on the <a href="https://en.wikipedia.org/wiki/Dead_Internet_theory" rel="noopener noreferrer" target="_blank">dead internet</a>. I want to champion and preserve the knowledge and expertise being discarded at astonishing rates. This is not an “anti-AI” movement per se; I simply don’t compete with chat-box-driven development.</p><p>Trading under a limited company allows more opportunity to collaborate with other creative professionals. As a freelancer I’m hired personally. As a company I can offer the same services and assurances whilst expanding the team if specialists are needed. Who knows, maybe one day I’ll be in a position to hire full-time.</p><p>This does not mean I’m going back to LinkedIn. I deleted that account like ten years ago. Please don’t make me go back!</p><p>My income is modest. My freelance years have ranged from ~£20–60,000 annually. I work a four-day week with sensible hours and avoid overlapping projects. Working hard and working long hours are not the same thing. I expect my new business will remain shy of the <a href="https://www.gov.uk/how-vat-works/vat-thresholds" rel="noopener noreferrer" target="_blank">VAT threshold</a> but I’ll see what my accountant advises.</p><p>I’m not sure my rates have kept up with “inflation” and cost of living. According to the <a href="https://www.bankofengland.co.uk/monetary-policy/inflation/inflation-calculator" rel="noopener noreferrer" target="_blank">Bank of England inflation calculator</a>:</p><blockquote><p>What cost £1.00 in 2013 would cost £1.44 in June 2026.</p></blockquote><p>Hmm, feels like I’m paying a lot more… probably the <a href="https://en.wikipedia.org/wiki/Shrinkflation" rel="noopener noreferrer" target="_blank">shrinkflation</a>. One things for sure, the quality of my services will not shrink.</p><p>I’ve got a lovely new brand and website ready. That’s been in the works all year. Once the red tape is completed I can go live. August or September, maybe?</p>
<hr>
<p>
Thanks for reading! Follow me on <a href="https://dbushell.com/mastodon/">Mastodon</a> and <a href="https://dbushell.com/bluesky/">Bluesky</a>.
Subscribe to my <a href="https://dbushell.com/rss.xml">Blog</a> and <a href="https://dbushell.com/notes/rss.xml">Notes</a> or <a href="https://dbushell.com/merge/rss.xml">Combined</a> feeds.
</p>
]]></content:encoded>
</item>
<item>
  <title>Choose your own dark mode</title>
  <description>When I redesigned my website earlier this year I removed dark mode. I never liked the colours, and the light switch toggle was so 2010’s. Personally I prefer reading with a dark theme for long-form content. Dark is not my brand though and I don’t believe every website needs to support colour scheme […]</description>
  <link>https://dbushell.com/2026/07/16/choose-your-own-dark-mode/</link>
  <guid isPermaLink="true">https://dbushell.com/2026/07/16/choose-your-own-dark-mode/</guid>
  <pubDate>Thu, 16 Jul 2026 15:00:00 GMT</pubDate>
  <content:encoded><![CDATA[
<p>
<strong>Hello RSS reader!</strong>
This post contains an interactive feature.
Please visit the canonical web page for an optimal viewing experience :)
</p>
<hr>
<p>When I <a href="https://dbushell.com/2026/02/09/big-design-and-bold-ideas/">redesigned my website</a> earlier this year I removed <a href="https://dbushell.com/2020/08/05/i-have-only-gone-and-redesigned-my-website-again/#dark-mode">dark mode</a>. I never liked the colours, and the light switch toggle was <em>so 2010’s</em>.</p><p>Personally I prefer reading with a dark theme for long-form content. Dark is not my brand though and I don’t believe every website needs to support <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@media/prefers-color-scheme" rel="noopener noreferrer" target="_blank">colour scheme preference</a> automatically. A good browser has reader mode, I use that all the time.</p><h2 id="an-experiment">An experiment</h2><p>But what if I let my readers decide on a dark colour scheme?</p><p>Below is a colour picker doohickey that should let you experience dark mode (on this page only). I’m testing in production (for reasons) so if it’s broken come back in an hour, or update your browser. It uses the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/color" rel="noopener noreferrer" target="_blank">native colour input</a> which sucks in every browser.</p><dbushell-theme-color>  <div class="Box">    <label for="theme-color">Theme colour:</label>    <input id="theme-color" type="color" value="#00325a"/>    <button class="Button" type="button">      Toggle theme    </button>  </div></dbushell-theme-color><div class="Alert"><p>⚠️ <strong>Warning:</strong> expect a sudden and dramatic colour shift. Try not to flashbang yourself.</p></div><p>This is just an experiment so your colour choice will not persist. If you want to keep it, like and subscribe and @ me on the socials. Use your preferred hex code as a hashtag.</p><p>Here’s how my homepage looks with a dark blue scheme.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/theme-color-homepage.png" alt="dbushell.com homepage with a white text on dark blue colour scheme." width="1200" height="590" decoding="async" fetchpriority="low" loading="lazy" id="--img-a95017c6"/></figure><p>I reckon the duotone effect works much better than trying to invert my brand colours.</p>
<hr>
<p>
Thanks for reading! Follow me on <a href="https://dbushell.com/mastodon/">Mastodon</a> and <a href="https://dbushell.com/bluesky/">Bluesky</a>.
Subscribe to my <a href="https://dbushell.com/rss.xml">Blog</a> and <a href="https://dbushell.com/notes/rss.xml">Notes</a> or <a href="https://dbushell.com/merge/rss.xml">Combined</a> feeds.
</p>
]]></content:encoded>
</item>
<item>
  <title>Astro is fine I guess</title>
  <description>When I’m not fighting WordPress I deliver static HTML or the occasional JavaScript framework integration. For personal projects I have ‘fun’ with my own static site generator. This week was a side quest (soon to be main quest) to build my new company website. […]</description>
  <link>https://dbushell.com/2026/07/10/astro-is-fine/</link>
  <guid isPermaLink="true">https://dbushell.com/2026/07/10/astro-is-fine/</guid>
  <pubDate>Fri, 10 Jul 2026 15:00:00 GMT</pubDate>
  <content:encoded><![CDATA[<p>When I’m not fighting WordPress I deliver static HTML or the occasional JavaScript framework integration. For personal projects I have ‘fun’ with my own <a href="https://dbushell.com/2025/05/11/the-static-site-churns/">static site generator</a>.</p><p>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.</p><p>I asked the socials, “<a href="https://www.11ty.dev/" rel="noopener noreferrer" target="_blank">11ty</a> or <a href="https://astro.build/" rel="noopener noreferrer" target="_blank">Astro</a>?” Both are popular but Astro had the edge. I gave Astro an early spin back in 2022 and <a href="https://dbushell.com/2022/07/27/is-fresh-fresh-and-astro-and-bun/#astro">found it slow</a>. Maybe it’s good now?</p><h2 id="the-install">The install</h2><p>I ran <code>pnpm create</code> with <a href="https://pnpm.io/blog/releases/10.16" rel="noopener noreferrer" target="_blank">minimum release age</a> to avoid immediately getting <a href="https://digital.nhs.uk/cyber-alerts/2026/cc-4781" rel="noopener noreferrer" target="_blank">pwned</a>.</p><p>I selected Astro’s <em>“Use minimal (empty) template”</em> option and it generated both an <code>AGENTS.md</code> and <code>CLAUDE.md</code> file — <em>are you f</em> — deep breaths, don’t fall for the rage bait.</p><p>I code in a <a href="https://dbushell.com/2026/07/02/the-modern-app/">modern editor</a> so I installed the recommended Astro extension. At first I struggled with <a href="https://zed.dev/" rel="noopener noreferrer" target="_blank">Zed</a> recognising HTML.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/zed-error.avif" alt="Zed editor error confusing HTML elements with JSX. The error says: `JSX element implicitly has type &#39;any&#39; because no interface &#39;JSX.IntrinsicElements&#39; exists. (ts 7026)`" width="465" height="135" decoding="async" fetchpriority="low" loading="lazy" id="--img-8d95ce23"/></figure><p>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.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/zed-astro-lsp.avif" alt="Zed editor error: &#39;Failed to run astro-language-server.&#39;" width="380" height="140" decoding="async" fetchpriority="low" loading="lazy" id="--img-d224ac56"/></figure><p>No modern comforts for me then. At least I can look at HTML without the red squigglies.</p><p>I know what you’re going to say, <em>“Dave bro, you’re inflicting this pain upon yourself! Just write HTML!”</em> And I should. I just want native no-framework <a href="https://css-tricks.com/the-simplest-ways-to-handle-html-includes/" rel="noopener noreferrer" target="_blank">HTML includes</a>, you know? Can you imagine the civilisation we’d live in if that could happen?</p><h2 id="the-docs-are-nice">The docs are nice</h2><p>I persevered and got my templates built with minimal fuss. I added a <a href="https://docs.astro.build/en/guides/content-collections/" rel="noopener noreferrer" target="_blank">markdown collection</a> and got the blog part blogging. It’s obvious that people use Astro to <a href="https://set.studio/blog/astro-is-our-preferred-front-end-platform/" rel="noopener noreferrer" target="_blank">build real websites</a> because all my “how do I” questions had an answer in the documentation.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/astro-jsx-meme.avif" alt="Fred from Scooby Doo unmasks a ghost hooded villian captioned &#39;.ASTRO&#39; saying &#39;Let&#39;s see who you really are!&#39; to reveal the React logo and &#39;.JSX&#39; underneath." width="500" height="706" decoding="async" fetchpriority="low" loading="lazy" id="--img-0a7882f3"/></figure><p>I’ve been forced to deploy way too many <a href="https://dbushell.com/notes/2026-04-16T07:30Z/">“React spaces”</a> in my templates because Astro’s whitespace treatment is a mystery. I don’t need many components so I haven’t gone deep on <a href="https://docs.astro.build/en/reference/astro-syntax/#differences-between-astro-and-jsx" rel="noopener noreferrer" target="_blank">Astro vs JSX</a>. My site has zero JavaScript on the front-end. I plan to keep it that way.</p><div class="Box"><p><strong>Edit:</strong> <a href="https://indieweb.social/@websident/116895099447927135" rel="noopener noreferrer" target="_blank">Christian Niklas on Mastodon</a> shared a link to a <a href="https://docs.astro.build/en/guides/upgrade-to/v7/#new-default-whitespace-handling-compresshtml-jsx" rel="noopener noreferrer" target="_blank">recent Astro update</a> where they added a <code>compressHTML: &quot;jsx&quot;</code> option that defaults to no longer “following HTML rules.” Umm… okay. Set this to <code>true</code> or <code>false</code> if you’re building a website? I set it to <code>false</code>. Minifying whitespace is over-optimisation.</p></div><h2 id="ill-keep-it-around">I’ll keep it around</h2><p>Astro has got the job done, despite the <smart-arse>developer experience</smart-arse> 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.</p><p>Final conclusion: Astro is fine I guess. I’m not convinced <a href="https://blog.cloudflare.com/astro-joins-cloudflare/" rel="noopener noreferrer" target="_blank">Cloudflare’s acquisition</a> 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.</p><p>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 <code>localhost</code> though.</p>
<hr>
<p>
Thanks for reading! Follow me on <a href="https://dbushell.com/mastodon/">Mastodon</a> and <a href="https://dbushell.com/bluesky/">Bluesky</a>.
Subscribe to my <a href="https://dbushell.com/rss.xml">Blog</a> and <a href="https://dbushell.com/notes/rss.xml">Notes</a> or <a href="https://dbushell.com/merge/rss.xml">Combined</a> feeds.
</p>
]]></content:encoded>
</item>
<item>
  <title>Select your starter class</title>
  <description>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 […]</description>
  <link>https://dbushell.com/2026/07/08/select-your-starter-class/</link>
  <guid isPermaLink="true">https://dbushell.com/2026/07/08/select-your-starter-class/</guid>
  <pubDate>Wed, 08 Jul 2026 15:00:00 GMT</pubDate>
  <content:encoded><![CDATA[
<p>
<strong>Hello RSS reader!</strong>
This post contains an interactive feature.
Please visit the canonical web page for an optimal viewing experience :)
</p>
<hr>
<p>At the risk of <a href="https://shkspr.mobi/blog/2026/07/im-just-so-bored-of-ai/" rel="noopener noreferrer" target="_blank">pissing on people’s chips</a> I figured it’d be helpful to illustrate the three classes of AI user I’ve identified in the slopageddon. You might be thinking: <em>“Hey, those personas are all negative!”</em> — and you’re absolutely right!</p><p>Believe me, I’d love nothing more than to shut up about “AI”.</p><p>The thing is, not a week goes by without one of my peers crying out in abject despair. Until the grifters cease <a href="https://dbushell.com/2026/05/20/google-just-spat-in-my-face/">spitting in my face</a> and threatening my career, please allow me to extend a middle finger their way.</p><p>I’m working on <a href="https://dbushell.com/2026/06/01/challenge-and-opportunity/#an-opportunity">more positive plans</a> 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.</p><hr/><p><small>Images used with modifications:</small></p><p><small>Chalk Outline by Simon Child from <a href="https://thenounproject.com/browse/icons/term/chalk-outline/" target="_blank" title="Chalk Outline Icons" rel="noopener noreferrer">Noun Project</a> (CC BY 3.0)</small></p><p><small>Hand by Elisa Pintonello from <a href="https://thenounproject.com/browse/icons/term/hand/" target="_blank" title="Hand Icons" rel="noopener noreferrer">Noun Project</a> (CC BY 3.0)</small></p><p><small>Zombie by Hamstring from <a href="https://thenounproject.com/browse/icons/term/zombie/" target="_blank" title="Zombie Icons" rel="noopener noreferrer">Noun Project</a> (CC BY 3.0)</small></p><character-select data-speech-synth="none">  <ul class="cs-tabs"><li><a class="Button" href="#the-victim">The Victim</a></li><li><a class="Button" href="#the-zombie">The Zombie</a></li><li><a class="Button" href="#the-grifter">The Grifter</a></li></ul>  <section class="cs-item" id="the-victim" data-index="1"><div class="cs-main"><div class="Prose"><h2 id="the-victim">The Victim</h2><ul><li>Dabbles with free chatbots</li><li>Chuckles at social media slop</li><li>Forced to endure a work mandate</li><li>Never consented to any of this</li><li>Helpless to the human toll</li></ul><dl>          <div><dt>Constitution</dt><dd>-4</dd></div>          <div><dt>Salary</dt><dd>-6</dd></div>        </dl></div><svg width="400" height="400" viewbox="0 0 400 400">        <path d="M195.191 397.467a4.4 4.4 0 0 1-2.335-.348l-58.714-26.111c-1.148-.507-2.06-1.486-2.528-2.705a5.05 5.05 0 0 1 .062-3.766l42.184-99.664-9.336-65.434-76.949-4.377-6.425 93.964c-.182 2.651-2.327 4.609-4.832 4.45l-63.186-4.153c-1.291-.081-2.497-.728-3.321-1.8a5.05 5.05 0 0 1-1.017-3.766l2.223-16.896c.294-2.202 1.972-3.889 4.071-4.106l30.996-3.162 5.145-99.741c.124-2.469 2.01-4.423 4.353-4.52l97.117-4.369 27.919-50.221-34.858-30.875-40.417 3.289 1.438 11.064q.052.232.081.476c.321 2.663-1.465 5.07-3.997 5.375h-.015l-.077.008-10.391 1.084c-1.577.166-3.139-.538-4.125-1.861l-6.069-8.131-11.767 8.44c-1.894 1.362-4.469 1.033-6.031-.778L52.719 75.369c-1.581-1.827-1.628-4.594-.101-6.44l19.314-23.433c.769-.933 1.852-1.525 3.019-1.633l80.068-7.841a4.45 4.45 0 0 1 2.656.58l66.832 38.39.669-3.429c.043-.178.085-.352.139-.522l4.175-13.363a4.9 4.9 0 0 1 1.368-2.136l11.508-10.337c.376-.343.81-.618 1.28-.813l19.515-8.1a4.37 4.37 0 0 1 3-.132l22.093 6.912c1.542.48 2.741 1.769 3.182 3.398l5.88 22.272a5.06 5.06 0 0 1-.232 3.274l-8.045 18.866a4.67 4.67 0 0 1-1.921 2.21l-7.337 4.334 43.328 5.495 20.187-47.578-9.46-15.933c-1.14-1.92-.885-4.392.619-5.979l8.203-8.626c1.635-1.73 4.26-1.881 6.104-.356l9.904 8.177 14.404-9.408c1.999-1.3 4.616-.805 6.081 1.153l11.103 14.772c1.396 1.865 1.322 4.516-.178 6.258l-17.269 20.004-17.864 72.566c-.541 2.21-2.474 3.696-4.647 3.58l-82.094-4.35-50.151 64.165 4.968 75.318a4.83 4.83 0 0 1-.638 2.821L180.8 351.831l25.367 24.273c1.724 1.641 2.03 4.354.731 6.347l-8.47 12.972a4.52 4.52 0 0 1-3.236 2.039z"/>      </svg></div><p class="cs-nav">      <a href="#the-zombie" data-action="next">        <span class="visually-hidden">Next</span>      </a>    </p></section>  <section class="cs-item" id="the-zombie" data-index="2"><div class="cs-main"><div class="Prose"><h2 id="the-zombie">The Zombie</h2><ul><li>Bends the knee to <em>Big Tech</em></li><li>Lives by “AI is inevitable” mantra</li><li>Anthropomorphises their chat box</li><li>Ignores self-inflicted deskilling</li><li>Gambles with house money</li></ul><dl>          <div><dt>Free will</dt><dd>-9</dd></div>          <div><dt>Cognition</dt><dd>-13</dd></div>        </dl></div><svg width="400" height="400" viewbox="0 0 400 400">        <path d="M141.978 393.691c30.89 8.752 63.405 8.064 93.585 0v-12.91a22.2 22.2 0 0 0-8.405-4.482c-.657-22.151-1.66-73.931 3.373-102.776a41.7 41.7 0 0 1 4.981 17.548c0 4.932-1.159 11.075 1.764 11.075 2.94 0 1.764-6.368 1.608-10.522a46.8 46.8 0 0 1 2.162-13.896c1.28-8.133 2.439-14.502 3.044-17.219 2.11-8.635 10.689-11.404 14.84-19.002 4.151-7.58 27.673-38.764 29.61-42.364s2.11-11.733 4.479-18.275c2.041-5.538 10.066-17.946 14.009-25.422l-.017.017a8.63 8.63 0 0 0 .675-6.317 106 106 0 0 1-2.992-16.613c-1.833-16.233-1.055-25.525-7.143-25.145-14.442.883-12.729 27.689-13.387 37.657-.657 9.968-21.083 26.754-25.909 25.024-4.808-1.713-7.921-30.838-9.132-40.806a30 30 0 0 1 0-6.368c.657-6.472 2.162-21.494 3.546-30.735a7.2 7.2 0 0 0 0-2.111 109.9 109.9 0 0 1 .329-36.549c2.491-13.516 6.693-26.252-.657-30.458-3.113-1.869-9.305-3.703-10.135-1.159a250 250 0 0 1-11.623 29.073 7.1 7.1 0 0 0-.657 2.613 125.8 125.8 0 0 1-6.261 31.011 6 6 0 0 0-.329 2.215c.45 10.072-1.28 22.532-1.332 33.226 0 1.18-.489 2.308-1.349 3.115a4.3 4.3 0 0 1-3.182 1.142c-1.557 0-2.491-4.049-2.94-5.538a99.8 99.8 0 0 1-1.833-36.099q.129-1.168 0-2.336a144 144 0 0 1 0-40.979c2.214-13.948 16.604-36.376 3.044-38.764-2.871-.45-6.866-1.436-7.852 1.159-2.11 5.261-11.449 22.151-16.932 33.953a5.95 5.95 0 0 0-.605 2.821 224.3 224.3 0 0 1-4.549 41.758 9.6 9.6 0 0 0 0 4.101c2.11 10.02-.934 27.308 0 35.165 0 1.609-.381 4.655-1.989 4.984-1.764.381-3.425-2.873-3.701-4.707-1.055-7.649-7.299-21.217-6.641-31.34a7.3 7.3 0 0 0-.346-2.665 54.55 54.55 0 0 1-2.041-35.667v-2.319c-.882-13.342 6.468-31.617-2.11-35.268-5.535-2.388-12.505 1.056-12.349 3.426h.017a89.9 89.9 0 0 1-5.535 34.715 5.16 5.16 0 0 0-.398 2.388 147.7 147.7 0 0 1-1.764 39.82 5.1 5.1 0 0 0 0 3.046 271 271 0 0 1 7.645 34.94c0 1.436.502 6.317-.778 7.026h-.329a4.55 4.55 0 0 1-4.168.225 4.55 4.55 0 0 1-2.594-3.271c-1.487-7.649-4.653-14.398-6.036-21.217v.017a9.6 9.6 0 0 0-1.263-3.046 58.25 58.25 0 0 1-9.737-26.201c-3.096-11.075-.502-25.197-7.091-27.689-2.214-.831-9.236.381-9.305 2.596 0 7.753-2.715 22.151-3.217 29.679l.017.017a7.1 7.1 0 0 0 0 2.267 225 225 0 0 1 9.184 31.565c2.767 11.075 5.535 32.725 5.535 32.725s1.989 11.075 4.376 24.141a3.66 3.66 0 0 0 3.476 2.942 4.13 4.13 0 0 1 3.822 2.492c2.11 5.036 5.984 8.307 6.866 11.577 1.28 4.482-4.255 10.297-3.926 14.502a10 10 0 0 1-.778 5.538 7.68 7.68 0 0 0-.45 5.538c5.206 17.444 13.283 37.83 15.497 48.679 2.715 13.793-6.59 53.769-8.959 70.276-1.885 12.737-3.926 41.364-4.756 52.438zm63.471-75.313c0 9.743-.83 20.992-1.885 31.565a25.37 25.37 0 0 1-11.83-17.548c-2.266-14.018-9.962-20.593-8.907-26.91.605-3.773 3.978-4.378 7.195-4.984l-.017-.017c.45-.104.917-.035 1.297.225.381.26.64.658.709 1.108.298 1.289.46 2.605.484 3.928 0 3.6-.882 7.926 1.28 7.926s1.332-4.655 1.159-7.753a21 21 0 0 1 0-2.544 26.3 26.3 0 0 1 2.767-9.085c3.044-6.265 1.487-11.526 5.863-16.994a5.9 5.9 0 0 1 1.833-1.557z"/>      </svg></div><p class="cs-nav">      <a href="#the-victim" data-action="previous">        <span class="visually-hidden">Previous</span>      </a>      <a href="#the-grifter" data-action="next">        <span class="visually-hidden">Next</span>      </a>    </p></section>  <section class="cs-item" id="the-grifter" data-index="3"><div class="cs-main"><div class="Prose"><h2 id="the-grifter">The Grifter</h2><ul><li>Flogs AI and AI paraphernalia</li><li>Will not take “no” for an answer</li><li>Dehumanises the effect of AI</li><li>Idolises the techno-fascists</li><li>Revels in gaslighting</li></ul><dl>          <div><dt>Morality</dt><dd>-99</dd></div>          <div><dt>Corruption</dt><dd>+99</dd></div>        </dl></div><svg width="400" height="400" viewbox="0 0 400 400">        <path d="M113.311 90.094c1.785 0 .357 58.455 1.07 66.958.357 7.085 14.99 52.079 17.131 54.559 2.855 3.897 11.777 15.234 13.562 16.296 3.212 1.417 6.782.708 7.138-1.417.357-1.772 1.07-21.611 2.142-30.468 1.07-8.503-5.71-28.696-4.283-32.594 1.428-3.897 4.997-18.776 4.997-21.965s-9.637-59.164-8.922-64.478c.357-3.897 1.785.355 1.785.355s10.35 64.832 11.064 76.17c.714 11.337-6.782 83.963-5.71 90.695 1.07 6.731 7.852 16.296 13.205 16.296 5.354 0 17.488-3.188 18.916-16.651s7.138-55.622 8.922-64.124c2.142-9.211-2.855-70.147-3.569-76.523-.357-4.96.714-3.188 1.428-1.772.357.355.357 1.772.714 2.48.357 4.251 1.785 22.319 1.785 22.319s7.495.708 10.35 1.772c1.785.708 13.919 6.023 15.704 10.628 2.855 6.731.357 41.451-3.212 55.622s8.565 20.194 17.488 18.423 11.777-9.211 14.632-14.171 10.35-15.588 10.35-25.154c0-9.565.357-40.034.357-46.764 0-2.835-.714-10.274-2.498-12.754-2.142-2.48-28.195-29.759-26.768-32.594 1.07-2.125 4.283 3.543 6.424 6.023 2.142 2.125 21.414 24.445 22.841 25.863 1.07 1.417 3.569 15.943 2.498 30.822-.357 6.023 24.269 15.234 32.835 17.36 8.565 2.48 39.616 2.48 44.612-6.377 4.64-8.857 4.997-10.983 4.283-14.88s-5.71-8.503-14.276-9.565c-8.565-1.063-29.623-3.188-34.976-7.44-5.354-4.252-56.747-68.73-64.242-83.255-7.852-15.234-14.99-30.468-20.701-35.782-6.782-6.731-54.249-6.377-81.016 12.045 0 0-18.559 16.651-32.121 48.89s-36.403 38.971-37.831 47.119c-3.569 10.983-4.283 35.428-4.283 43.576 0 1.772.714 3.543 1.785 4.96 5.354 6.731 21.771 26.925 28.195 27.634 4.997.708 10.35.355 12.849-2.48 2.498-3.188 4.283-12.045.714-16.651-4.64-6.377-13.205-14.525-15.704-17.36-1.785-2.125 1.785-19.485 3.212-23.028 1.428-4.251 21.771-7.795 26.411-7.795-.357-7.44.357-26.216 0-28.342 0 0-.357-2.48.714-2.48h.002Z"/>        <path d="M84.718 184.956a3.51 3.51 0 0 1 3.48-3.474 3.51 3.51 0 0 1 3.48 3.474v139.498a3.51 3.51 0 0 1-3.48 3.474 3.51 3.51 0 0 1-3.48-3.474zm56.555 37.338a3.51 3.51 0 0 1 3.48-3.474 3.51 3.51 0 0 1 3.48 3.474v144.708a3.51 3.51 0 0 1-3.48 3.474 3.51 3.51 0 0 1-3.48-3.474zm22.622 30.392a3.51 3.51 0 0 1 3.48-3.474 3.51 3.51 0 0 1 3.48 3.474v143.84a3.51 3.51 0 0 1-3.48 3.474 3.51 3.51 0 0 1-3.48-3.474zm62.644-45.153a3.51 3.51 0 0 1 3.48-3.474 3.51 3.51 0 0 1 3.48 3.474v138.63a3.51 3.51 0 0 1-3.48 3.474 3.51 3.51 0 0 1-3.48-3.474zm97.446-52.969a3.51 3.51 0 0 1 3.48-3.474 3.51 3.51 0 0 1 3.48 3.474v159.47a3.51 3.51 0 0 1-3.48 3.474 3.51 3.51 0 0 1-3.48-3.474z"/>      </svg></div><p class="cs-nav">      <a href="#the-zombie" data-action="previous">        <span class="visually-hidden">Previous</span>      </a>    </p></section></character-select>
<hr>
<p>
Thanks for reading! Follow me on <a href="https://dbushell.com/mastodon/">Mastodon</a> and <a href="https://dbushell.com/bluesky/">Bluesky</a>.
Subscribe to my <a href="https://dbushell.com/rss.xml">Blog</a> and <a href="https://dbushell.com/notes/rss.xml">Notes</a> or <a href="https://dbushell.com/merge/rss.xml">Combined</a> feeds.
</p>
]]></content:encoded>
</item>
<item>
  <title>Behold the perfect algorithm!</title>
  <description>1984, Minority Report, Black Mirror — bedtime stories compared to the horrors the UK Government publish, am I right? 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 […]</description>
  <link>https://dbushell.com/2026/07/06/behold-the-perfect-algorithm/</link>
  <guid isPermaLink="true">https://dbushell.com/2026/07/06/behold-the-perfect-algorithm/</guid>
  <pubDate>Mon, 06 Jul 2026 15:00:00 GMT</pubDate>
  <content:encoded><![CDATA[<p>1984, Minority Report, Black Mirror — bedtime stories compared to the horrors the UK Government publish, am I right?</p><p>I’m led to believe <a href="https://www.gov.uk/government/consultations/watch-this-space-a-new-strategic-direction-for-uk-media-green-paper-and-public-consultation/watch-this-space-a-new-strategic-direction-for-uk-media-green-paper-and-public-consultation" rel="noopener noreferrer" target="_blank">“Watch this space”</a> is the latest propaganda piece from <em>His Majesty’s Nanny State</em>. 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.</p><blockquote><p>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.</p><p><cite><a href="https://www.dexerto.com/entertainment/youtube-urges-creators-to-fight-proposed-uk-algorithm-changes-3383111/" rel="noopener noreferrer" target="_blank">YouTube urges creators to fight proposed UK algorithm changes</a> - Matthew Benson, Dexerto</cite></p></blockquote><p>I glossed over the Dexerto article too. This whole thing is something about kids being hooked on <em>Skibidi</em> and not paying their <a href="https://www.bbctvlicence.com/" rel="noopener noreferrer" target="_blank"><del>racketeering</del> license fee</a>. <em>Minecraft Let’s Plays</em> will be spliced with a BBC impartiality report on what some <a href="https://www.bbc.co.uk/search?q=farage" rel="noopener noreferrer" target="_blank">fascist gammon</a> thinks. Should the proposal become law, of course.</p><p>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 <em>Big Tech</em>. The thought of Google et al being ruffled warms my heart like a hot cup of tea on the summer solstice.</p><hr/><p>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 <em>Big Tech</em> has tried to suppress. The one true algorithm, which ironically might be their saviour.</p><figure><pre data-lang="sql" tabindex="0" translate="no" id="pre-3d65864c"><code><span class="line"><span class="syntax-1656d967">SELECT</span><span class="space"> </span><span class="syntax-26f6a8db">p.</span><span class="syntax-1656d967">*</span><span class="space"> </span><span class="syntax-1656d967">FROM</span><span class="space"> </span><span class="syntax-26f6a8db">posts</span><span class="space"> </span><span class="syntax-26f6a8db">p</span></span>
<span class="line"><span class="syntax-1656d967">JOIN</span><span class="space"> </span><span class="syntax-26f6a8db">follows</span><span class="space"> </span><span class="syntax-26f6a8db">f</span><span class="space"> </span><span class="syntax-1656d967">ON</span><span class="space"> </span><span class="syntax-765b360f">p</span><span class="syntax-26f6a8db">.</span><span class="syntax-765b360f">user_id</span><span class="space"> </span><span class="syntax-1656d967">=</span><span class="space"> </span><span class="syntax-765b360f">f</span><span class="syntax-26f6a8db">.</span><span class="syntax-765b360f">following_id</span></span>
<span class="line"><span class="syntax-1656d967">WHERE</span><span class="space"> </span><span class="syntax-765b360f">f</span><span class="syntax-26f6a8db">.</span><span class="syntax-765b360f">follower_id</span><span class="space"> </span><span class="syntax-1656d967">=</span><span class="space"> </span><span class="syntax-26f6a8db">?</span></span>
<span class="line"><span class="syntax-1656d967">ORDER</span><span class="space"> </span><span class="syntax-1656d967">BY</span><span class="space"> </span><span class="syntax-765b360f">p</span><span class="syntax-26f6a8db">.</span><span class="syntax-765b360f">created_at</span><span class="space"> </span><span class="syntax-1656d967">DESC</span><span class="syntax-26f6a8db">;</span></span></code></pre><figcaption>This is nerd bait. <sup>†</sup></figcaption></figure><p>Only one parameter is required in the perfect algorithm: <strong>who I choose to follow.</strong></p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/obi-wan-follow.avif" alt="&#39;That&#39;s... why I follow them.&#39; says a slightly puzzled Obi-Wan Kenobi, from Star Wars: Episode II – Attack of the Clones" width="606" height="412" decoding="async" fetchpriority="low" loading="lazy" id="--img-a938bb20"/></figure><p>I’m literally providing the exact data needed to curate my feed.</p><p>I know what defenders of the deceptive arts are thinking: <smart-arse>but algorithms are proven to increase engagement!</smart-arse> — I know, Sherlock. Do you enjoy your doomscrolling misery? Not every metric needs to be min-maxed at the expense of human health.</p><p><a href="https://dbushell.com/2026/07/02/the-modern-app/">Modern apps sucks.</a> Modern media sucks. Stick your “algorithm”.</p><hr/><p><small><sup>†</sup> It’s been decades since I studied SQL and database normalisation so please have mercy.</small></p>
<hr>
<p>
Thanks for reading! Follow me on <a href="https://dbushell.com/mastodon/">Mastodon</a> and <a href="https://dbushell.com/bluesky/">Bluesky</a>.
Subscribe to my <a href="https://dbushell.com/rss.xml">Blog</a> and <a href="https://dbushell.com/notes/rss.xml">Notes</a> or <a href="https://dbushell.com/merge/rss.xml">Combined</a> feeds.
</p>
]]></content:encoded>
</item>
<item>
  <title>Fixing full-bleed CSS</title>
  <description>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. […]</description>
  <link>https://dbushell.com/2026/07/03/fixing-full-bleed-css/</link>
  <guid isPermaLink="true">https://dbushell.com/2026/07/03/fixing-full-bleed-css/</guid>
  <pubDate>Fri, 03 Jul 2026 15:00:00 GMT</pubDate>
  <content:encoded><![CDATA[<div class="Alert"><p>I’m a front-end developer not a medical practitioner. If you’re bleeding IRL visit the hospital and stop googling medical issues!</p></div><p>The <a href="https://www.joshwcomeau.com/css/full-bleed/" rel="noopener noreferrer" target="_blank">full-bleed layout</a> — as described there by Josh Comeau — can be done with CSS grid (<a href="https://dbushell.com/2026/04/02/css-subgrid-is-super-good/">and subgrid</a>). Sometimes you can’t grid the entire page.</p><p>That’s where <a href="https://piccalil.li/blog/creating-a-full-bleed-css-utility/" rel="noopener noreferrer" target="_blank">Andy Bell’s utility class</a> is useful.</p><pre data-lang="css" tabindex="0" translate="no" id="pre-c770d7de"><code><span class="line"><span class="syntax-4ddd3d58">.full-bleed</span><span class="space"> </span><span class="syntax-26f6a8db">{</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">width</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-765b360f">100</span><span class="syntax-1656d967">vw</span><span class="syntax-26f6a8db">;</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">margin-left</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-3eeadcf9">calc</span><span class="syntax-26f6a8db">(</span><span class="syntax-765b360f">50</span><span class="syntax-1656d967">%</span><span class="space"> </span><span class="syntax-1656d967">-</span><span class="space"> </span><span class="syntax-765b360f">50</span><span class="syntax-1656d967">vw</span><span class="syntax-26f6a8db">);</span></span>
<span class="line"><span class="syntax-26f6a8db">}</span></span></code></pre><p>But it ain’t perfect. The issue is that viewport units don’t solve the <a href="https://www.smashingmagazine.com/2023/12/new-css-viewport-units-not-solve-classic-scrollbar-problem/" rel="noopener noreferrer" target="_blank">classic scrollbar problem</a>. If you’re on macOS or a fancy OS that has fancy scrollbars, test on Windows! <code>100vw</code> can be wider than the viewport. Because why would browsers do anything sensible?</p><p>It’s hard to see in <a href="https://codepen.io/piccalilli/pen/vYOJjNw" rel="noopener noreferrer" target="_blank">Andy’s CodePen</a> but a few pixels can be cropped either side. Add something like a border or shadow and it’s easier to see.</p><pre data-lang="css" tabindex="0" translate="no" id="pre-926afc7e"><code><span class="line"><span class="syntax-4ddd3d58">.full-bleed</span><span class="space"> </span><span class="syntax-26f6a8db">{</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">box-shadow</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-765b360f">inset</span><span class="space"> </span><span class="syntax-765b360f">0</span><span class="space"> </span><span class="syntax-765b360f">0</span><span class="space"> </span><span class="syntax-765b360f">0</span><span class="space"> </span><span class="syntax-765b360f">10</span><span class="syntax-1656d967">px</span><span class="space"> </span><span class="syntax-765b360f">yellow</span><span class="syntax-26f6a8db">;</span></span>
<span class="line"><span class="syntax-26f6a8db">}</span></span></code></pre><figure class="Image"><img src="https://dbushell.com/images/blog/2026/full-bleed-crop.avif" alt="Yellow border is slightly clipped either side." width="375" height="150" decoding="async" fetchpriority="low" loading="lazy" id="--img-f718a368"/><figcaption>Ignore the pink left border that’s my blog style.</figcaption></figure><p>This is not always a problem but it can lead to subtle alignment issues. By the way, macOS has a scrollbar setting <em>“Show scroll bars &gt; Always”</em> that’ll let you test the issue.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/macos-scrollbar-preferences.avif" alt="macOS scrollbar settings on the appearance tab." width="540" height="118" decoding="async" fetchpriority="low" loading="lazy" id="--img-fec9c3ac"/></figure><p>Andy solves this partially by hiding horizontal overflow on the <code>&lt;body&gt;</code> element.</p><pre data-lang="css" tabindex="0" translate="no" id="pre-194af6f5"><code><span class="line"><span class="syntax-1656d967">body</span><span class="space"> </span><span class="syntax-26f6a8db">{</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">overflow-x</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-765b360f">hidden</span><span class="syntax-26f6a8db">;</span></span>
<span class="line"><span class="syntax-26f6a8db">}</span></span></code></pre><p>An alternative fix is to always reserve space for the classic scrollbar.</p><pre data-lang="css" tabindex="0" translate="no" id="pre-5ae2ebc6"><code><span class="line"><span class="syntax-1656d967">html</span><span class="space"> </span><span class="syntax-26f6a8db">{</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">scrollbar-gutter</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-26f6a8db">stable;</span></span>
<span class="line"><span class="syntax-26f6a8db">}</span></span></code></pre><p>That can look weird if there is no vertical scroll necessary.</p><h2 id="modern-solution">Modern solution</h2><p>The “modern” approach is to use <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Guides/Containment" rel="noopener noreferrer" target="_blank">CSS containment</a>. Turn the <code>&lt;body&gt;</code> element (or any 100% width child) into a container. Then replace the viewport units with container units.</p><pre data-lang="css" tabindex="0" translate="no" id="pre-f8beed2c"><code><span class="line"><span class="syntax-1656d967">body</span><span class="space"> </span><span class="syntax-26f6a8db">{</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">container</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-26f6a8db">body</span><span class="space"> </span><span class="syntax-26f6a8db">/</span><span class="space"> </span><span class="syntax-26f6a8db">inline-size;</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">overflow-x</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-765b360f">clip</span><span class="syntax-26f6a8db">;</span></span>
<span class="line"><span class="syntax-26f6a8db">}</span></span>
<span class="line"></span>
<span class="line"><span class="syntax-4ddd3d58">.full-bleed</span><span class="space"> </span><span class="syntax-26f6a8db">{</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">inline-size</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-765b360f">100</span><span class="syntax-1656d967">cqi</span><span class="syntax-26f6a8db">;</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">margin-inline-start</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-3eeadcf9">calc</span><span class="syntax-26f6a8db">(</span><span class="syntax-765b360f">50</span><span class="syntax-1656d967">%</span><span class="space"> </span><span class="syntax-1656d967">-</span><span class="space"> </span><span class="syntax-765b360f">50</span><span class="syntax-1656d967">cqi</span><span class="syntax-26f6a8db">);</span></span>
<span class="line"><span class="syntax-26f6a8db">}</span></span></code></pre><p>Now hiding overflow is not strictly necessary. I prefer <code>clip</code> — see <a href="https://ishadeed.com/article/overflow-clip/" rel="noopener noreferrer" target="_blank">Overflow Clip guide</a> by Ahmad Shadeed. I clip out of caution because <a href="https://dbushell.com/2026/07/02/the-modern-app/">I make dumb things.</a> I also use <a href="https://dbushell.com/2021/02/02/changing-css-for-good-logical-properties-and-values/">logical properties and values</a> to support right-to-left (RTL) text direction. Ahmad has an excellent <a href="https://rtlstyling.com/" rel="noopener noreferrer" target="_blank">RTL Styling 101</a> too.</p><p>But wait!</p><p>Using <code>cqi</code> units assumes <code>body</code> is the parent container of the <code>.full-bleed</code> element. What if we have nested containers? Check this out. <a href="https://codepen.io/dbushell/pen/rajYvPj" rel="noopener noreferrer" target="_blank">I’ve forked Andy’s CodePen</a> to add another <code>.inside</code> container that is <strong>not</strong> the full viewport width.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/full-bleed-inside.avif" alt="Inspecting CSS container layout using Chromium dev tools to show that the inside container is smaller." width="1084" height="654" decoding="async" fetchpriority="low" loading="lazy" id="--img-6b856c86"/></figure><p>This alone would usually break the new <code>.full-bleed</code> class and ruin the fun.</p><p>But we can fix that!</p><pre data-lang="css" tabindex="0" translate="no" id="pre-011df034"><code><span class="line"><span class="syntax-1656d967">@property</span><span class="space"> </span><span class="syntax-26f6a8db">--body-size</span><span class="space"> </span><span class="syntax-26f6a8db">{</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-1656d967">syntax:</span><span class="space"> </span><span class="syntax-1656d967">"&#x3C;length></span><span class="space"> </span><span class="syntax-1656d967">|</span><span class="space"> </span><span class="syntax-1656d967">&#x3C;percentage>";</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-1656d967">inherits:</span><span class="space"> </span><span class="syntax-1656d967">true;</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-1656d967">initial-value:</span><span class="space"> </span><span class="syntax-1656d967">100%;</span></span>
<span class="line"><span class="syntax-1656d967">}</span></span>
<span class="line"></span>
<span class="line"><span class="syntax-1656d967">body</span><span class="space"> </span><span class="syntax-26f6a8db">{</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">container</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-26f6a8db">body</span><span class="space"> </span><span class="syntax-26f6a8db">/</span><span class="space"> </span><span class="syntax-26f6a8db">inline-size;</span></span>
<span class="line"><span class="syntax-26f6a8db">}</span></span>
<span class="line"></span>
<span class="line"><span class="syntax-4ddd3d58">.inside</span><span class="space"> </span><span class="syntax-26f6a8db">{</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-26f6a8db">--body-size</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-765b360f">100</span><span class="syntax-1656d967">cqi</span><span class="syntax-26f6a8db">;</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">container</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-765b360f">inside</span><span class="space"> </span><span class="syntax-26f6a8db">/</span><span class="space"> </span><span class="syntax-26f6a8db">inline-size;</span></span>
<span class="line"><span class="syntax-26f6a8db">}</span></span>
<span class="line"></span>
<span class="line"><span class="syntax-4ddd3d58">.full-bleed</span><span class="space"> </span><span class="syntax-26f6a8db">{</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">inline-size</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-3eeadcf9">var</span><span class="syntax-26f6a8db">(--body-size);</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">margin-inline-start</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-3eeadcf9">calc</span><span class="syntax-26f6a8db">(</span><span class="syntax-765b360f">50</span><span class="syntax-1656d967">%</span><span class="space"> </span><span class="syntax-1656d967">-</span><span class="space"> </span><span class="syntax-26f6a8db">(</span><span class="syntax-765b360f">0.5</span><span class="space"> </span><span class="syntax-1656d967">*</span><span class="space"> </span><span class="syntax-3eeadcf9">var</span><span class="syntax-26f6a8db">(--body-size)));</span><span class="space"> </span><span class="syntax-7b4433fd">/*</span><span class="space"> </span><span class="syntax-7b4433fd">†</span><span class="space"> </span><span class="syntax-7b4433fd">*/</span></span>
<span class="line"><span class="syntax-26f6a8db">}</span></span></code></pre><p>What is that <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@property" rel="noopener noreferrer" target="_blank"><code>@property</code> magic?</a></p><p>To be honest I struggle to wrap my smooth brain around this!</p><p>Let me try to explain it to myself. Without the at-rule the value of <code>--body-size</code> is calculated at the time of use, i.e. within <code>.full-bleed</code> and therefore relative to the <code>inside</code> container. By explicitly defining a <code>@property</code> the value is now calculated when it’s set within <code>.inside</code>. There <code>100cqi</code> refers to the parent <code>body</code> container and <code>.full-bleed</code> inherits that value.</p><p>But what if you have more containers?</p><p role="img" aria-label="ASCII art of an incensed person flipping a table.">(╯°□°)╯︵ ┻━┻</p><p><em>Gosh!</em> Stop being so difficult!</p><p>I would have a direct child of <code>&lt;body&gt;</code> like <code>&lt;main&gt;</code> set the <code>--body-size</code> value.</p><pre data-lang="html" tabindex="0" translate="no" id="pre-b14b429b"><code><span class="line"><span class="syntax-26f6a8db">&#x3C;</span><span class="syntax-1656d967">body</span><span class="syntax-26f6a8db">></span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-26f6a8db">&#x3C;</span><span class="syntax-1656d967">main</span><span class="syntax-26f6a8db">></span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="space"> </span><span class="space"> </span><span class="syntax-7b4433fd">&#x3C;!--</span><span class="space"> </span><span class="syntax-7b4433fd">blah</span><span class="space"> </span><span class="syntax-7b4433fd">--></span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-26f6a8db">&#x3C;/</span><span class="syntax-1656d967">main</span><span class="syntax-26f6a8db">></span></span>
<span class="line"><span class="syntax-26f6a8db">&#x3C;/</span><span class="syntax-1656d967">body</span><span class="syntax-26f6a8db">></span></span></code></pre><p><small><sup>†</sup> I’m multiplying by 0.5 because division is for chumps.</small></p><h2 id="next-gen-solution">Next-gen solution</h2><p>What CSS needs is a way to reference a container when using container units.</p><p><a href="https://github.com/w3c/csswg-drafts/issues/7858" rel="noopener noreferrer" target="_blank">Ideas have been proposed</a> for example:</p><pre data-lang="css" tabindex="0" translate="no" id="pre-de80f5a5"><code><span class="line"><span class="syntax-4ddd3d58">.full-bleed</span><span class="space"> </span><span class="syntax-26f6a8db">{</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">inline-size</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-765b360f">100</span><span class="syntax-1656d967">cqi</span><span class="syntax-26f6a8db">(body);</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">inline-size</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-3eeadcf9">calc</span><span class="syntax-26f6a8db">(</span><span class="syntax-765b360f">100</span><span class="space"> </span><span class="syntax-1656d967">*</span><span class="space"> </span><span class="syntax-26f6a8db">cqi(body));</span></span>
<span class="line"><span class="space"> </span><span class="space"> </span><span class="syntax-3eeadcf9">inline-size</span><span class="syntax-1656d967">:</span><span class="space"> </span><span class="syntax-3eeadcf9">calc</span><span class="syntax-26f6a8db">(</span><span class="syntax-765b360f">100</span><span class="space"> </span><span class="syntax-1656d967">*</span><span class="space"> </span><span class="syntax-26f6a8db">container(cqi,</span><span class="space"> </span><span class="syntax-26f6a8db">body));</span></span>
<span class="line"><span class="syntax-26f6a8db">}</span></span></code></pre><p>Cancel <a href="https://wpt.fyi/interop-2026" rel="noopener noreferrer" target="_blank">Interop 2026</a> and make this happen!</p>
<hr>
<p>
Thanks for reading! Follow me on <a href="https://dbushell.com/mastodon/">Mastodon</a> and <a href="https://dbushell.com/bluesky/">Bluesky</a>.
Subscribe to my <a href="https://dbushell.com/rss.xml">Blog</a> and <a href="https://dbushell.com/notes/rss.xml">Notes</a> or <a href="https://dbushell.com/merge/rss.xml">Combined</a> feeds.
</p>
]]></content:encoded>
</item>
<item>
  <title>RSS Club #008: Duck duck, swan?</title>
  <description>This is an RSS-only post, thank you for subscribing :) If you’re only here for web and tech talk you can skip this one! 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 […]</description>
  <link>https://dbushell.com/2026/06/13/RSS008/</link>
  <guid isPermaLink="true">https://dbushell.com/2026/06/13/RSS008/</guid>
  <pubDate>Sat, 13 Jun 2026 15:00:00 GMT</pubDate>
  <content:encoded><![CDATA[<p>This is an RSS-only post, thank you for subscribing :) If you’re only here for web and tech talk you can skip this one!</p><p>I rescued an animal today! Probably…</p><p>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.</p><p>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.</p><p>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.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/RSS008-1.avif" alt="Mute swan nest with both parents and cygnets in the reeds behind the canal water." width="750" height="405" decoding="async" fetchpriority="low" loading="lazy" id="--img-d13b9297"/><figcaption>Sorry for the bad iPhone 12 photography.</figcaption></figure><p>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.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/RSS008-2.avif" alt="Canal overflow trench below the water level." width="750" height="412" decoding="async" fetchpriority="low" loading="lazy" id="--img-429f0cc0"/><figcaption>Scene of the drama. It’s a little deeper than it looks.</figcaption></figure><p>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.</p><p>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.</p><p>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.</p><p>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.</p><p>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 <a href="https://www.rspca.org.uk/" rel="noopener noreferrer" target="_blank">RSPCA</a> who can rescue wildlife (<a href="https://www.rspb.org.uk/" rel="noopener noreferrer" target="_blank">RSPB</a> don’t; common misconception).</p><p>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.</p><figure class="Image"><img src="https://dbushell.com/images/blog/2026/RSS008-3.avif" alt="Canada goose parents with two goslings on the grass aside the canal." width="750" height="375" decoding="async" fetchpriority="low" loading="lazy" id="--img-3b0e8f75"/><figcaption>Was it one of you two?</figcaption></figure><p>It’s funny, despite being so common I’ve never once seen an actual goose nest. I’ve no idea where they hide them.</p>
<hr>
<p>
Thanks for reading! Follow me on <a href="https://dbushell.com/mastodon/">Mastodon</a> and <a href="https://dbushell.com/bluesky/">Bluesky</a>.
Subscribe to my <a href="https://dbushell.com/rss.xml">Blog</a> and <a href="https://dbushell.com/notes/rss.xml">Notes</a> or <a href="https://dbushell.com/merge/rss.xml">Combined</a> feeds.
</p>
]]></content:encoded>
</item>
</channel>
</rss>
