A fascinating look at how modern front-end architecture and practices can help solve some of the communities issues; even the ones they initially created! Really neat to see how Brad has been using tools like Storybook and React to drive a clearer delineation of front-of-the-frontend and back-of-the-frontend work. Also helps make design systems seem incredibly powerful in that tech stack.

The gist is that "consumable UI components" create a bridge: front-of-the-frontend devs get to create reusable, beautiful, accessible but dumb components; then back-of-the-frontend devs import them, hook up the business logic, and pass through any dynamic or API-driven or server-determined (etc.) content using simple APIs (in React-land, those APIs are props).

As I see it, directly consumable UI components serve as a bridge between The Great Divide. It creates a healthy handshake between the front of the frontend and the back of the frontend.

They take these presentational UI components and wrap them in a layer of
smarts that handles business logic, data manipulation, and whatever
else they need to successfully implement the alert component in the real
application.

The workflow for this is fascinating:

• Use Storybook as a front-end source of truth (as he puts it: a "front-end workshop environment"). All components and primitives get built and tested here. Brad also builds out whole page compositions in Storybook so you can see components in context and demonstrate dynamic front-end states more easily;
• Components are built with small APIs that allow dynamic data and business logic to be injected. Sometimes these are very open (allowing whole components or objects, for example) or very strict. They're also used to enforce best practice e.g. restricting colours to pre-approved, WCAG considered combinations or preventing a component with an image from being used without alt text. Sometimes, a11y or UX is even hard-baked, such as autogenerating form element for and id value pairs;
• Package the whole design system as a distributable on npm;
• Let back-of-front devs npm install and use the components they need!
  

There's a lot going on in this analysis of trust (or lack of it) online. Some parts I agree with, some I don't. It's interesting thinking about the early web in the context of naive communities with integral trust:

Because each of [the groups that built the internet] were high-trust communities, it was easy to conclude that the people they’d be engaging online would be too. And so, as the tools of the internet and then the web were built out, they forgot to build a trust layer.

Also interesting to look at why trust models aren't baked into services online, either:

When a site decides to get big fast, they usually do it by creating a
very easy way to join, and they create few barriers to a drive-by
anonymous experience. And when they make a profit from this behavior,
they do it more. In fact, they amplify it.

And the negative impact that has on numbers versus community:

Because a collection of angry people talking past each other isn’t a community.

But for all I like about Seth's thoughts, I'm not sure I agree with the sentiment here:

...if someone goes into a bank wearing a mask (current pandemic aside) we can assume that they’re not there to make a deposit.

Anonymity still feels like an important aspect of the web, something worth preserving and fighting for. Does it have some issues? Sure, but I don't think it's the root issue that a lot of people portray it as, and it also has a lot of beneficial side effects as well. Seth's focus on community is more meaningful to me; a strong community, a strong sense of place and shared goals, that helps modulate behaviour far more than anonymity ever will (just look at Facebook 😬).

A brilliant overview of all the weird edge-cases that exist with the CSS margin attribute. Honestly, having used CSS for over a decade I'm not sure I've run into any of them before (maybe parent inheritance a couple of times?) so I'm still unconvinced by the call to abandon margin in favour of spacer components but I do agree that gap is a generally more useful attribute to reach for.

When ilt recommends a font, I listen. When they recommend a whole batch, I bookmark it for future reference 😉 Particular favourites from a first read-through:

• Signifier (a modern, newspaper-esque, bold headline font);
  
• Liebeheide (a beautifully realistic handwriting font with some very clever OpenType tech);
• and Antica (a headline font with a touch of whimsy, easily my favourite of the bunch).
  

What a clever idea: a video editor that works by transcribing your content and then syncing the waveform with the text. Edit one, edit both. I haven't given it a whirl (no relevant need right now) but the pricing model looks fair, it's a recommendation from a trusted source, and (best of all) it's a useful media tool that isn't locked behind the Apple-tax paywall! 👍

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 ☹