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> 

I find the whole Australian link tax to be silly and a rare instance where I'm very much on the side of Big Tech, but Thomas has done a much better job of explaining why it's all a farce than I ever could.

It's particularly fascinating given that he's an "insider" in the industry, but one whose business would be hurt by the proposed laws. Link taxes help old media, but hurt their new competition. They also reward old media for having an incompetent digital model and for failing to invest in their own services.

As Jonathan notes, newspapers have never been analogous to search engines. You don't open a broadsheet to find where you can buy a car or to locate extremely specific information. Any traffic directed from these kinds of searches is therefore new.

The newspapers did not help this car dealer sell any cars. You provided no leads, no sale, no nothing. Why should you get a cut of the money brands are paying to Google?

On why Google is not stealing traffic, but providing it (in most cases):

And then the newspapers have the audacity to tell the politicians that "Google is stealing our traffic and our links". No they are not. This traffic wouldn't even exist if it wasn't for Google. This is new traffic that Google makes possible for us.

On the traditional advertising model used by magazines and publishers; get people to consume as many adverts as possible on their way to the content:

For instance, many years ago, I did a study about what was actually in a print magazine, and here is what Vogue Magazine looked like in 2009:

On the benefits of amplification, which would be impossible without freely shareable links:

Amplification is good because it drives extra traffic that you would otherwise not get if Facebook didn't exist.

On why publishers are cutting their nose off to spite their face when targeting Facebook:

If you force Facebook to pay you, as a publisher you are even more incentivized to push things to Facebook, while Facebook is incentivized to reduce your amplification rate. This is the opposite of what you want.

Why would you ever do that?

As a newspaper, you should be incentivized to create a direct relationship with your audience, while Facebook should be incentivized to give you as much extra traffic as possible. Paying for links does not do that!

On why it isn't as simple as forcing companies to pay taxes in every country they operate in (hint: you're getting them to pay taxes multiple times for the same service, and you're potentially taking taxes without having any citizens involved):

So this is far more complicated than the media makes it out to be, and the suggestions I have seen from the media are all nationalistic. They punish companies for being global

So the way publishers talk about taxing Google is basically saying Google should be taxed twice.

But you are still suggesting a model that doesn't work and that punishes companies for reaching people across the world.

This is nationalism. It has no place in a connected world.

On why traditional analytics models are simply not fit for purpose; the models that publishers want no longer fit the world they have:

So, let me ask you a question. Imagine if someone visits your newspaper and reads three pages (including the front page). And then imagine that someone visits you via Facebook, only sees one page per visit, but comes back four times.

Which one is better?

On the fact that link taxes hurt small publishers, digital media, and independent journalists by starving them of amplification and audience:

One thing that many people in traditional media don't seem to understand is that the link is the single most important thing that we have, and
this is especially true for smaller independent publishers (like me

It's not Facebook who is undermining democracy. It's Murdoch and every single newspaper who has joined his destruction of linking.

Once again, Josh has put together an excellent introductory tutorial to a subject that is still packed with useful tips for even the most advanced user; in this case, CSS transitions.

On the will-change CSS property and how it allows developers to specify that an element should use the GPU (hardware acceleration):

will-change is a property that allows us to hint to the browser that we're going to animate the selected element, and that it should optimize for this case.

In practice, what this means is that the browser will let the GPU handle this element all the time. No more handing-off between CPU and GPU, no more telltale “snapping into place”.

👆 Helps to prevent rendering discontinuities as an element is passed between CPU and GPU.

On thinking about animations in a more organic, user-oriented way:

I believe most developers think in terms of states: for example, you might look at this situation and say that we have a “hover” state and a default state. Instead, what if we thought in terms of actions? We animate based on what the user is doing, thinking in terms of events, not states. We have a mouse-enter animation and a mouse-leave animation.

Excellent tip: use transition-delay to prevent things like dropdown menus from collapsing if the user accidentally moves out of them. It provides a little leeway in the UX.

On benefits of using transform over other attribute changes:

There's another benefit to hardware acceleration: we can take advantage of sub-pixel rendering.

Another useful tip: use wrapping elements to remove the "doom flicker", that moment where hovering an element moves it out of the cursor's hitbox, and it just bounces between :hover states rapidly. Example:

<button class="btn">
  <span class="background">Hello World</span>
</button>

<style>
  .background {    
    will-change: transform;
    transition: transform 450ms;
  }

  .btn:hover .background {
    transition: transform 150ms;
    transform: translateY(-10px);
  }
</style>

Ben has crafted an incredibly thoughtful, powerful, and quotable article on just about everything, but particularly life online and how people in the web community might be able to go about improving it.

On blogging for connection as opposed to crafting a personal brand:

That's not what I'm doing. I'm putting myself out there for connection: as one human looking for like-minded humans. That's what the promise of the internet and social media always was for me. It's not a way to sell; it's a way to build community. We have an incredible network that links the majority of people on the planet together so they can learn from each other. Using that to make a buck, while certainly possible, seems like squandering its potential. We all have to make a buck, or most of us do. But there's so much more.

There's a gaping chasm between "here's what I'm thinking about" and "I! Am! A! Thought! Leader!", and I don't want to intentionally be in the second camp.

On Locard's exchange principle and the epigraph from Octavia Butler's Parable of the Sower:

That's the promise of the internet for me: every contact leaves a trace. All that you touch, you change. The internet is people, the internet is community, the internet is change itself.

On conservative ideologies and the sinister side of information control:

Our little forum was on one of the 1,000 most popular sites on the internet, after all. I still quietly think some organization wanted to seed a particular ideology through internet communities, although I have no way to prove it.

All that you touch, you change. All that you change, changes you. Every contact leaves a trace.

What if someone intentionally designs the contact and the trace?

On the dangers of overly reactive or entrenched censorship development from a desire to reduce disinformation:

Words are dangerous: they can change the world. There will always be people who want to change the world for the worse. And there will always be people who want to prevent us from hearing other peoples' words because they would change the world for the better.

On the colonialist nature of design-thinking; specifically how a group of people (likely with privilege) try to go about building a solution to a problem they don't have by attempting to engage with that community that does:

The idea inherently diminishes their own agency and intelligence, but more than that, it strip mines the communities you're helping of value.

On Clubhouse:

And I'm dismayed by the exclusionary discourse on platforms like Clubhouse that are implicitly set up as safe spaces for the oppressive mainstream.

I stumbled onto Tyler's site while trying to find some examples of SVG manipulation and all I can say is wow 🤯 I've been a fan (and proponent) of generative art for many years, but Tyler's work is some of the best I've ever seen. My favourite on his current homepage has to be this wonderful pattern called Ectogenesis. Truly beautiful:

A fantastic overview of the feTurbulence SVG filter, including interactive examples of all the relevant attributes, how they can be combined, and some of the cool things you can (glitch buttons, squiggly text animations, and dynamically generating extremely impressive paper textures).

In other words, the feTurbulence filter primitive generates and renders Perlin noise. This kind of noise is useful in simulating several natural phenomena like clouds, fire and smoke, and in generating complex texture like marble or granite.