Netlify's microsite celebrating their millionth user is a brilliant experiment, so it's great to see them immediately posting a "making of" article on CSS Tricks. It's a beautifully rendered SVG illustration showing the service's history, popping in key milestones as you scroll. There are also some really nice-to-see features, such as the prominent animation toggle that is always visible, for those who may not enjoy the various movement effects.

Sarah covers all the various technologies that they used. I was surprised to see the entire site is a VueJS app comprised almost entirely of a single SVG element, with animations handled with GreenScok. Cool! Better yet, the article has a ton of advice on making SVGs as accessible as possible, including a video showing what it's like to browse with a screen reader. Really interesting to see their use of role="presentation" in particular.

I'm number 496,180 by the way. Quite surprised to be in the top 500,000!

... if racial discrimination is defined as treating, considering, or making a distinction in favor or against an individual based on that person’s race, then racial discrimination is not inherently racist. The defining question is whether the discrimination is creating equity or inequity. If discrimination is creating equity, then it is antiracist. If discrimination is creating inequity, then it is racist.

Someone reproducing inequity through permanently assisting an overrepresented racial group into wealth and power is entirely different than someone challenging that inequity by temporarily assisting an underrepresented racial group into relative wealth and power until equity is reached. The only remedy to racist discrimination is antiracist discrimination. The only remedy to past discrimination is present discrimination. The only remedy to present discrimination is future discrimination.

As President Lyndon B. Johnson said in 1965, “You do not take a person who, for years, has been hobbled by chains and liberate him, bring him up to the starting line of a race and then say, ‘You are free to compete with all the others,’ and still justly believe that you have been completely fair.” As U.S. Supreme Court Justice Harry Blackmun wrote in 1978, “In order to get beyond racism, we must first take account of race. There is no other way. And in order to treat some persons equally, we must treat them differently.”

An excerpt from How to be an Antiracist by Ibram X. Kendi, which I really need to pick up.

A neat trick (now third hand) for storing the scroll position of a sidebar or other element in local storage, allowing you to keep it constant across pages without the user seeing it flash into place:

let sidebar = document.querySelector(".sidebar");

let top = localStorage.getItem("sidebar-scroll");
if (top !== null) {
  sidebar.scrollTop = parseInt(top, 10);
}

window.addEventListener("beforeunload", () => {
  localStorage.setItem("sidebar-scroll", sidebar.scrollTop);
});

I'm a huge fan of Dougal Dixon's After Man and even managed to attend the 2018 (re)-launch party for the reprint of the book. That means I was lucky enough to see the original pitch document for the book, but only briefly (there were a lot of people and I was more interested in meeting Dougal himself, getting books signed, etc.). Luckily, Darren has done a great job writing up the pitch document, including scanning a number of the pages. Very cool and I agree that the biome dioramas being cut was a real shame 😮

What a cool idea 😎 A set of line illustrations (SVG etc. goodness) that you can mix'n'match to create avatars, all fully modular. Currently it's an open-source graphics resource, but I could totally see this becoming an API that you can query for a pseudo-random avatar generator.

Can you use progressive enhancement when building a web app (whatever that is)? Of course you can, HEY have proven so (not that it should have needed proving).

It’s not either resilient or modern—it’s resilient and modern. Have your cake and eat it.

They’ve taken a human-centric approach to their product and a human-centric approach to web development …because ultimately, that’s what progressive enhancement is.

I've been getting a lot of hands-on time with React Testing Library recently and, for the most part, I really like it. Still, I get caught out from time-to-time, and this article has a lot of great advice on best practices. In particular (as I tweeted this week) I've found that following this guidance doesn't just make writing tests easier, it also gives you accessibility coverage for free, which is just awesome 😎

Carousels are the devil's work, but they remain incredibly useful and popular UI elements 😑 Having a solid implementation that will work without JavaScript, making it more lightweight and accessible, is therefore very useful and I've yet to find better examples than the options here, though I still can't quite get what I want with it. In particular, having the current slide visible on a tab menu (y'know, the bunch of dots that are often at the bottom of a carousel or numbers across the top) that works with both touch and scroll input appears to be one holy grail technique too far. At least, a week of attempting it at work never produced a solution... 😭

I mean damn the latest Nike video is astonishingly well edited:

I'd never really considered the use of "race" as a term for species within fantasy settings (e.g. Dwarves, Elves etc.). Darrell has some interesting thoughts, written through the lens of his take on Eugene Marshall's Ancestry and Culture D&D supplement, which explicitly seeks to remove "race" from that game world, providing an alternative structure. The idea is that a character should have traits derived from their cultural upbringing (skills) and their ancestral lineage (physical properties/abilities, including stuff like propensity to magic or ability to see in low light). It's a cool idea and sounds like it does a solid enough job of expanding the world-building potential in and of itself to be adopted without further context.

But, the realisation that "race" is likely problematic is worthy of discussion and thought by itself. My immediate reaction was that it's incorrectly applied at a species level anyway; on Earth, we use race to differentiate within a species. But, as Darrell argues, that distinction for humans is largely invented and has a long, storied history bound to oppression, enslavement, genocide, and a whole host of other depressing and awful concepts/actions/deeds etc. In other words, even where used correctly, it may be better to rethink it. And that's before you consider that many fantasy "races" are just racist stereotypes dressed up in different, non-human skin tones. Lots to think about.

A very neat little trick. Embedding @keyframes within your SVG <style> element makes it animate when it loads, whether rendered as an image or a background (or, I assume, inlined). It can even be used in favicons on Firefox 🤩 Example with corresponding <img>:

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <style>
    circle {
      animation: bounce 2s infinite ease-in-out alternate;
      transform-origin: 50px 50px;
    }
    @keyframes bounce {
      to {
        transform: scale(0);
      }
    }
  </style>
  <circle cx="50" cy="50" r="25" />
</svg>

<img src="https://viewbox.club/tips/assets/img/CSS_Keyframes.svg" alt="">

The Markup have recently been doing a great job of analysing some of the big names in the tech world and highlighting some less-than-stellar behaviour or situations. However, what's really caught my eye is their article design; it's beautiful 😍 I wanted to grab a few screenshots of one of their most recent articles (though these styles are used across the site):

As an FYI it looks like the layout is largely being done via absolute positioning. Arrows are ::before and ::after elements. I still find it a real shame that CSS Grid has yet to catch up to these layouts, but there are some interesting specs on the horizon. 🤞