A wonderful (and wistful) treatise to the personal web. Takes a design-oriented approach, but the words are just as applicable to any discipline (even non-digital ones). More importantly, Simon's words inspire me to think about my own site in new ways and see new opportunities that it can fulfil.

I know that social media deprived the personal site of oxygen, but you are not your Twitter profile, nor are you your LinkedIn profile. You are not your Medium page. You are not your tiny presence on the company’s About page. If you are, then you look just like everyone else, and that’s not you at all. Right?

If I push a big ol’ bundle of JavaScript down the pipe to a low-powered device and/or a slow connection, the chances are that content will not make it, or if it does, it will likely fail to parse. That alienates a lot of people which breaks red lines for me. Sure, building the site with this technology would keep it simple for me, as I wrote it, but utilizing the platform keeps it simple for everyone — especially me, when I need to maintain it.

I'm not sure I fully understand Andy's clever Service Worker setup here for authenticated content, but it certainly sounds like a nifty pattern and I can't agree more with his main takeaway.

It’s particularly galling when it comes to iPads. Those are exactly the kind of casual-use devices that shouldn’t need to be caught in the wasteful cycle of being used for a while before getting thrown away.

My personal fight with Apple's software lockouts on iPad continues, so this comment (and most of Jeremy's surrounding thoughts) really resonated 😤

When we remove the pre (finding the pen, the paper, the notebook, the software) and the post (finding a way to publish it), it turns out that we write more often, and writing more often leads to writing better.

It doesn’t have to be perfect, it can simply be the next thing you do.

The patterns matter. Streaks work.

All part of your practice.

Something something Micropub and posting from my phone...😩

A quick tool to check how much page weight could be saved if you removed all legacy JavaScript from a webpage, in favour of modern techniques/functionality.

Cool (and free) service for quickly creating Twitter threads from a single writing panel. Definitely could be useful for live-tweeting.

A wonderful collection of hand-illustrated one-star reviews for some of the most beautiful wilderness areas on the planet. Originally covered the great US National Parks, but has recently begun branching out into other areas of the world:

Originally via BoredPanda.

A clever UX idea discovered on Pink News: each paragraph of text has a different highlight colour, so as you select parts of an article to copy elsewhere it reveals the LGBTQA+ flag. They're using a simple CSS pattern with several similar selectors along the lines of:

p:nth-child(6n+1)::selection {
   background-color: rgba(157,236,255,0.25);
}

Extremely effective 👏

Rebus writing substitutes pictures or symbols for words, but not in the same way that pictograms do. With pictograms, a picture of, for example, a bee simply represents the insect. But in rebus writing, a picture of a bee is used to substitute for the letter b or its sound... a picture of an eye represents the letter i, and so on.

In other words, text speech or a variant on modern emoji speech. Cool/❄ 😄

You have buttons on your website. These can be on a light background, or a dark background, and have active and non-active states, but should be highly visible in any variation. You might think that means you need four CSS rules, but James does a great job of showing some tricks that mean you can achieve all of that with just one (plus a couple of custom properties). Simple tools, like inherit, are used to great effect. I mean I rarely use that attribute, yet James make it look like an indispensable superpower! 😅 Very clever indeed and a strong argument for why using the cascade to your advantage is often more beneficial than completely destructuring it with systems like BEM.

Remember, every time you set a property in CSS you are in fact overriding something (even if it’s just the default user agent styles). In other words, CSS code is mostly expressing exceptions to a default design. The more you do so, the more your UI components become sealed-off blocks of UI that don’t necessarily blend into or adapt to their surroundings.

So you have a non-page-based navigation: tabs, carousels, accordions, multi-level menus, route changes... we deal with these a lot in modern frontends. Is your "trigger" (the thing you press to make the navigation happen) a link or a button? I tend to side with link (it's taking you to a part of the document, just a hidden one right now). Jeremy has a slightly more considered approach that thinks less about semantics (without ignoring them) and more about actual user experience:

• Is the target of the trigger close by, or directly adjacent to, the trigger in the DOM? Use a button, because you don't need to worry about a focus change.
• Otherwise, use a link with a fragment identifier (y'know, href='#target').

As he points out, that means you may end up using a link even where a button is sort of semantically cleaner, such as a login modal. In my head, a modal is always a button: it doesn't take me to a part of the document or another page, it opens a new form entirely (Jeremy sees this differently anyway, and I can understand his reasoning). But using a link means your focus state gets switched to the modal immediately, no extra code required, plus if JS fails the link may still work.

This mental model only gets you so far, but Jeremy also highlights some useful ARIA roles that can be sprinkled on top to further increase the accessibility. I'll try to keep it all in mind 😄

A Firefox extension that keeps Terry Pratchett alive through a website-to-website digital "clacks" analogue that is just beautiful in its concept 😢