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. 🤞

I'd never heard of a "skip link" before but it's a neat idea that's clearly been around for some time. Basically, it's a link placed at the very start of the <body> that's visually hidden until focused, but which provides a direct anchor link to the main content of the page. That allows keyboard users/screen readers to skip over headers, navigation bars, etc. if they just want to get to an article. Here's a simple HTML/CSS pattern:

<a class="skip-link" href="#main">Skip to content</a>
<main id="main">Your main content...</main>

.skip-link {
    color: #fff;
    background: #000;
    padding: 0.5rem 1rem;
    display: inline-block;
    font-weight: 700;
    border-radius: 4px; 
    box-shadow: 0 0 25px rgba(0,0,0,0.2);
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
}

.skip-link:focus {
    top: 2rem;
    outline: 5px solid rgba(0,0,0,0.1);
}

The debate around the common practice of naming the primary branch in Git "master" continues, but I thought the statement from WordPress had some interesting points. They largely mirror my own views – preferring the use of "trunk" – but they also point out that the term "main" has been used as an othering statement in some Eastern cultures (specifically Japanese is mentioned). As they put it:

Language is not always easy, especially when addressing a global community, each with their own terms that are possibly discriminatory.

Adobe have put together a creative questionnaire, replete with quirky designs and animations. Not too sure about the actual style choices, but it's certainly consistent. At any rate, I'm apparently a Dreamer; I see the hidden meanings behind facts and figures, use imagination to tie disparate concepts together, and am an empathetic introvert (to oversimplify). Eh, it doesn't feel a million miles off, but it's also a bit too far onto the "creative" side in many ways. Still, there are some interesting descriptions here and you can view all of the eight profiles without taking the quiz, so it's a nice reference point to consider different viewpoints.

A quirky little tool quite similar to the Whimsical Web, only for websites that serve no purpose. A few random presses took me to a site which is just a never-ending stream of 8-bit corndogs raining down from the browser windows; another which was just a picture of a mango set against a starburst background; one which hijacked your cursor so every single click took you to a "tweet this site" widget; and one which had a cursor-controlled, semi-fluid "waving arms tube" that emitted incredibly intense flashing images if you moved your mouse too fast 😵 Useless indeed!

A partial response to Marty and yet further interesting thoughts on what the term "webmention" has come to mean, and what the technology could become.

Webmention-as-reaction is fine, but it’s very difficult to get good UX with webmention-as-comments. Reply chains are difficult to follow, especially if one of the links in the chain breaks

^ that, in particular, is something I've been thinking about a lot lately with my own implementation. I think I'm coming to the conclusion that Webmentions are fine to support, but maybe aren't a good replacement for actual native comment systems. Then again, with static sites, native comment systems create their own headaches.

Fluffy (as ever) also raises some useful points around community moderation and the potential for abuse.