I really like the concept of practical elegance that Seth argues for. It's effectively an argument for true UX: optimising the user's experience to make it as useful and memorable as possible. As he puts it:

Creating delight before it’s expected.

That's a lovely way to think about designing anything.

Practical elegance is something that is available to all of us. If we choose, it can become the cornerstone of our work.

On failing elegantly (graceful degradation, anyone 😉):

Practical elegance doesn’t mean that the canoe will never capsize. It means that the thing we built was worth building, and it left the user feeling better, not worse, about their choice.

Jeremy is a great writer. I therefore shouldn't be surprised that his advice on content editing is incredibly astute.

Still, for just over two years, my main job was to write. Before that, I worked at a variety of jobs where I was the primary writer and/or editor. And throughout that time, I've been writing for myself on a variety of platforms, including this website. I thought I was doing okay at this whole writing schtick. Now I can see I have a lot to improve 😂

On long sentences:

Not all long sentences are bad, but the longer a sentence gets, the more it runs the risk of overwhelming the reader.

On contractions:

Avoiding contractions seems to be more professional, but actually it makes the writing a bit too formal. There’s a danger of sounding like a legal contract. Or a Vulcan.

On cognitive load (this was the big 🤯 moment for me):

Sometimes a long sentence can’t be broken down into shorter sentences. In that case, I watch out for how much cognitive load the sentence is doling out to the reader.

On authorial voice (and why I'm giving myself a "get out of jail free card" for my lengthy sentences; that's just how I talk 😁):

But there’s one piece I’ve given to others that I try to stick to: write like you speak.

🤯 An absolutely brilliant tool for linking CSS filters with SVG colour matrices to create Instagram-like image overlays and adjustments.

I'm currently in the process of trying to get away from Instagram (eurgh, that new UI is atrocious) and the big missing piece is quick image filters. FEColorMatrix looks like a perfect fit, I just need to work out how to actually add it to a workflow 🤔

Squoosh looks like a great image compression tool. Either drag'n'drop or link into their CLI.

NFTs continue to get a lot of publicity and debate. Seth has some useful insight into the potential "bubble" of value they create:

It’s an unregulated, non-transparent hustle with ‘bubble’ written all over it.

On the environmental impact:

It’s an ongoing waste that creates little in ongoing value and gets less efficient and more expensive as time goes on. For most technological innovations the opposite is true.

Vasilis puts together an interesting argument for getting rid of skip links, and instead architecting content so that navigation blocks are below the main text.

On the experience of an elderly screenreader user:

He never understood why every page he deliberately visits always starts with links to other webpages! Of course! It doesn’t make any sense. Why did we ever conclude that this is somehow a good idea?

After all, can you imagine trying to pitch this to a PO today:

"Hey, I'd like to start our page with a bunch of ways to leave the page, sound good?"

It's a really interesting point! 🤔

System fonts are often overlooked, but they come with a massive list of advantages: environmental, performance, data cost.

using system fonts like Arial and Times New Roman instead of web fonts cuts down on HTTP requests, reducing the amount of data transferred and ultimately reducing CO₂ emissions.

Byte-for-byte, JavaScript is more expensive for the browser to process than the equivalently sized web font

The top 5 fonts given by Iain are: Georgia, Charter, Palatino, Hoefler Text (Apple only), and Segoe UI/Roboto/"system" i.e. the main UI fonts for each OS:

font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji;
/* Only supported on Chromium-based browsers and Safari */
font-family: system-ui;

A depressing deep-dive into the world of NFTs (non-fungible tokens), cryptoart, and why crypto-anything is an ecological and social disaster.

Also contains some really interesting, ELI5 descriptions of the blockchain, Proof of Work (PoW), Proof of Stake (PoS), and other terminology.

I vaguely understood that PoW requires you to solve harder and harder math problems in order to "mine" coins, but hadn't realised that PoS was effectively a lottery tied to existing wealth. Everest touches on it, but what a horrifyingly elitist system.

I also hadn't been aware that Bitcoin directly ties the difficulty of each "solution" (i.e. coin) to the market price. In other words, the higher the value of Bitcoin gets, the more expensive each new coin is in terms of electricity and environmental impact. Good Lord, how is this a thing?

On how Proof of Work systems are intentionally designed to consume more energy as they age, thus driving up profit by creating a guaranteed futures market:

After a decade+ of a growing cryptocurrency market, what we’ve been left with is a financial network that uses more energy than Argentina, with no regulatory structure or federal oversight whatsoever.

On why Proof of Stake and other schemas are never a true saviour (aka oh good, Bitcoin/blockchain is both an environmental and societal disaster):

I’m sure you’re seeing the problem here- there is not a schema that doesn’t reward those who already are already wealthy, who are already bought in, who already have excess capital or access to outsized computational power. Almost universally they grant power to the already powerful.

This is also a climate issue. Climate justice is social justice.

On why cryptocurrencies are always a pyramid scheme (albeit a more stable one than a Ponzi scheme) and how incredibly bad that is for PoW coins:

Because PoW coins ask the investors of tomorrow to buy in at ever increasing computational power, we have ended up in a horrific spiraling excess of energy usage and ecological devastation.

On why the argument that crypto's carbon footprint isn't debatable if you own a car, or eat meat, or do anything ever:

First, it is not a gotcha that there are worse things in the world than the thing you are currently talking about. I am capable of hating cryptocurrency AND capitalism AND art fairs. I contain multitudes.

On why NFTs will not fundamentally change the art world, but instead will bolster its worst excesses:

Much like the world of blue chip, some NFTs may be bought and sold simply as artworks, intended for personal collections and acquired for aesthetic, conceptual, or personal reasons. However, every single one is made from the outset to be liquidated- an asset first, artwork second. They are images attached to dollar figures, not the other way around.

On the false saviour of green energy:

Green energy is incredibly important for the continued future of society, but it isn’t free energy. Cost of production for solar cells, wind turbines, hydroelectric dams and thermal capture are still sunk ecological costs in mining, fabrication, and construction. Per usual, they are better but not best. Best is simply to reduce consumption as much as possible.

On why a "greener NFT" is still a problem, just maybe a smaller one:

Fundamentally, cryptocurrency AND cryptoart are valuable because they burn energy. Because they turn sunk energy cost into futures.

On why we should reject the very concept of NFTs:

The only viable option is total moral rejection. Anything less (selling, collecting, posting links to artists selling NFTs, yes even trying to find a less ecologically devastating model) holds up the power of the worst parts of this platform.

Man, I wish I'd been able to put something together like this back when I was managing a content team. The ability to just type directly into an image and have the background generatively populate so that it doesn't overlap the text is just 👨‍🍳🤏

Discovered via the excellent viewBox newsletter.

Very useful tool for checking whether an area contains locations relevant to Pokémon Go i.e. Pokéstops, Gyms, and Nests. Looks like it's built on OpenStreetMap, and therefore open for community editing.

I've been trying to get this working since the Beta of Netlify plugins, and along comes Mark with a fully working example 😂 Definitely want to look into the source code (GitHub) and see if I can get this running here. Also, clever way of doing a quick feed comparison (I think I might try to identify updated database entries somehow, but then I am running a server, just not using it 😁):

I wrote build plugin inside the repo for this site which makes a request for the atom feed of my site before the build is run, and compares it to the generated atom feed after.

Excellent write-up by Amber on making accessible anchor links (those little floating chains/hash symbols next to headlines).

Relatedly, Stephanie Eckles has recently published a SmolCSS tutorial on the same pattern with some interesting variations (CodePen).

On the preferred HTML order for anchor links, specifically to prevent screen reader confusion:

I realised the <a> element should exist as a sibling of the heading element, rather than a child of it.

On providing some kind of text label with a link:

When there is no information about a link available, the screen reader falls back to the href value (e.g. https://example.com/blog/nice-post/). This makes the purpose of the link hard to decipher.

On the problematic use of aria-label and hiding purely aesthetic/visual text with aria-hidden:

First, aria-label is not actually brilliant for accessibility, as some translation services can have trouble accessing its value. So, it's best to add text content to the <a> element, and make sure to visually hide it.

Second, the # can be left in and hidden from screen readers using aria-hidden, while still being visible on the page.

Code snippet for the final solution:

<h2 id="introduction">Introduction</h2>
<a href="#introduction">
  <span aria-hidden="true">#</span>
  <span class="hidden">Section titled introduction</span>
</a>

Code snippet for an accessible header link (can use ::before to add icons or #):

<h2 id="introduction">
  <a href="#introduction">
    Introduction
  </a>
</h2>