A simple anecdote: window panes exist because it used to be too expensive to make larger sheets of glass. Over time that cost has decreased, to the point that it now costs less to create one large sheet than four small panels. But that's not how windows should look, so people pay extra to have dividing struts added to the single piece of glass. Or, as Seth puts it:

We’re overpaying to reproduce the effect that we originally put into place to save money.

It's skeuomorphism gone mad 😂

An interesting overview of some new research out of Durham University (woo! 😁) that attempts to predict the realistic ranges of various British bird species. Unsurprisingly, the findings are that most bird species would have larger ranges with healthier populations if human activity was removed from the ecosystem; notably, endangered species like Capercaillie and Golden eagle should have much wider ranges throughout most of Scotland, Wales, and northern England. On the other hand, quite a few species have much larger ranges than they would naturally, mainly those that benefit from agricultural practices and open grassland (though even here, numbers are declining below expected rates in many species).

Also interesting to see which species they predict would have colonised Britain that are currently absent, particularly the previously resident Kentish plover, which I'd never heard of (but, apparently, should be common across the South and South East of Britain). Overall, a bleak picture, but one which should hopefully help guide more realistic conservation policies moving forward 🤞

Great overview on when/when not to use the tabindex attribute. Most of it feels like common sense, but the recommendation for overflow content is an interesting one I'd not come across before:

tabindex="0" should be applied to any non-interactive element that has had CSS’ overflow property applied to it. This will allow people using a keyboard to navigate to, and scroll around the overflowed content.

Though don't forget other accessibility requirements, like labels.

I'm always interested to see how other people utilise styled-components and the tips Josh shares offer exactly that kind of insight. I fundamentally disagree with his take on descendent selectors (👀) but really love his use of CSS variables as a passthrough technique. Prop passthrough to CSS is something that I always have to think about with styled-components, but this feels like a very performant and useful mental model:

function Backdrop({ opacity, color, children }) {
  return (
    <Wrapper
      style={{
        '--color': color,
        '--opacity': opacity,
      }}
    >
      {children}
    </Wrapper>
  )
}

const Wrapper = styled.div`
  opacity: var(--opacity);
  background-color: var(--color);
`;

It feels like this method fits the spirit of both CSS and styled-components much better than techniques I've used in the past 👍

Still, even Josh doesn't have any tips on how to get rid of styled-components most opinionated (and, imo, most annoying) feature: class-name hashes. He does mention the excellent method of at least prepending the meaningless gibberish with a useful, human-readable token, but I still wish you could go a step further and just define the class name yourself. One of these days...

An ideal anecdote for why HTML should remain the prioritised foundation of any website and how progressive enhancement is an absolute necessity if you're working on critical digital infrastructure (such as governmental websites).

Go sit in an uncomfortable chair, in an uncomfortable location, and
stare at an uncomfortably small screen with an uncomfortably outdated
web browser. How easy is it to use the websites you’ve created?

I only know two things about Bitcoin: it's an environmental nightmare and I don't know anywhere near enough about it to get involved, financially or technically. So I'm adding a pinch of salt to this article about the recent price spike in the crypto markets, but if it's even 50% accurate, well... oof!

The tl;dr is that a company (Tether) have effectively inserted themselves into the crypto market as a middleman, by inventing a supposedly asset-backed go-between for cryptocurrencies called (predictably) Tethers. Except, there is scant evidence that the claims Tether Ltd makes about Tethers being physically-backed are true, and the rate at which Tethers are "minted" appears to be escalating the closer that investigative forces in the US get to actually understanding how Tether Ltd works. In other words: it looks like the whole thing is a scam.

Specifically, a scam for people to legitimately buy Bitcoin and other cryptocurrencies with USD on legitimate exchanges, transfer to unregulated ones where they are converted into Tether-backed equivalents (i.e. sold to Tether for a nominal fee), then transferred by Tether back to USD. The market looks like Bitcoin trading is on the up, but all the real wealth is pumped out and replaced by meaningless tokens. If that's true, the whole pyramid may be about to topple...

Clever tool for performing a11y audits on the web. Has an automated (though manually triggered) fast run that highlights WCAG breaches on any page, as well as a more detailed full audit suite that can walk the user through various testing requirements to determine current WCAG compliance. Looks really useful and well thought through, but unfortunately only available for Chrome (and, technically, Edge), which is a massive shame. It looks like Firefox support has been considered several times, but the team have concluded it isn't a priority. For a tool based on accessibility that definitely feels like mixed priorities, but it is understandable ☹

It's fun to see which technical decisions the CSS working group officially consider "mistakes" 😂 I agree with most, though not sure how I feel about the counter-clockwise directional shorthand 🤔 I'd also never considered the cross-language implication of !important meaning the opposite in most languages!

Table layout should be sane.

This is also a small slice of history:

Not quite a mistake, because it was a reasonable default for the 90s,
but it would be more helpful since then if background-repeat defaulted
to no-repeat.

A succinct and to-the-point teardown of why 2FA (two-factor authentication) is beneficial for user verification by businesses, but terrible for preventing things like phishing attacks (because the fake site can simply make the valid requests on your behalf). In other words:

There is almost nothing you can do to authenticate that a site is legitimate.

Though, Terence does give one interesting suggestion: password managers. Already pretty much an industry-standard best practice for account protection, they make a valid point here that it also works as a filter for "approved" URLs. If your password manager only suggests auto-fill based on URL, it works as a sanity check for phishing sites too.

“My father was not really keen on this portrayal, because he was already very aware that [hominin] evolution was more likely akin to the branching of a tree rather than a straight, linear march, so he resisted this depiction. The editor won out, however, and the iconic image was born.”

A fascinating quote about Rudolph Zallinger's iconic (and problematic) March of Progress representation of hominin evolution. Once again, it feels like ignoring the experts has caused decades of issues and (slightly ironically, given the infamous title) set back human progress in subtle ways. As the article puts it:

This one decision has created perhaps the biggest, most dangerous,
misunderstanding of evolution that has ever existed. In all its
simplicity, it shows progress. An improvement from what came before. The
idea that animals get better as they evolve is wrong. Every animal and
plant alive today is just as evolved as each other. None is more ‘primitive’. None is ‘simple’. And certainly none are inferior to others.

All that, just to give a scientific book a little more va va voom 🤦‍♂️

I love coming across some of the more niche or esoteric uses of the web; the internet's marginalia, if you will. I feel like Jeremy's post very much fits that category, with an excellent overview of the fascinating ABC music-encoding language (I guess language is the right word?) and the MIDI format (where I date myself by not realising this was in any way no longer that relevant 😬). The post mainly focuses on his work converting ABC notation into sound files using the Web Audio API, which includes this absolute gem:

Not only is there a separate short mp3 file for each note in seven
octaves, but if you want the sound of a different instrument, you need
samples for all seven octaves in that instrument. They’re called
soundfonts.

Soundfonts. I love it 😍

A brilliant tool for determining where in London you get to within a certain time from a given location. In other words: if I live at X, where can I commute to within Y minutes ❤