Eric has written an often brilliantly funny canned history of the way CSS worked (or, more specifically, didn't) in the early days of the Web. It's worth a read just to see how good we have it today, a sentiment they sum up in such excellent fashion that I had to save it:

I know it’s still fashionable to complain about how CSS is all janky and weird and unapproachable, but child, the wrinkles of today are a sunny park stroll compared to the jagged icebound cliff we faced at the dawn of CSS.

There's a lot of interesting thoughts packed into this overview of UX Fest 2021, but the bits that really hit home were Jeremy's musings on A/B testing and dark patterns, particularly how one can feed into the other.

Using A/B tests alone is like using a loaded weapon without supervision. They only tell you what people do. And again, the solution is to make sure you’re also doing qualitative research—that’s how you find out why people are doing what they do.

Now, I suspect that if you were to A/B test a deceptive dark pattern, the test would validate its use (at least in the short term).

An interesting diagram of beer tasting notes. As someone who has been tracking beer flavours for a few years, I'd like to compare my own word grid at some point; plus, this gives me some ideas for that eventual microsite 😅

The original version was apparently from the book Craft Beer World by Mark Dredge.

100 separate typographic designs, all using free Google fonts, with some absolutely stunning results. What Do-Hee has put together is one of the best showcases for Google's font library, as well as an excellent source of inspiration. Top stuff 👏

Building a tooltip? A carousel? A password input? I can strongly recommend checking if the Component Gallery has a page on whatever UI pattern you're working on.

Each entry collates examples from design systems and pattern libraries all over the web, so you can quickly compare how everyone from Google and Salesforce to Brighton & Hove City Council have solved your problem.

It's been invaluable for the design system project I've been working on, as much for uncovering best practices as simply dissecting the sometimes opaque terminology that has evolved around certain UI patterns.

A great resource for finding accessible patterns for common UI requirements, as well as including stacks of accessibility best practices 🔥♿

A great rundown of how to build a site using Preact and Eleventy that gives you the best of SPA-lite hydration and the speed/resilience of SSGs, all with the power of progressive enhancement.

Markus uses some very clever techniques, including "lazy" hydration (only run hydration when components are within/just outside the viewport) and a
component explicitly designed to bring hydration to 11ty/Preact in the first place.

Also, this perfectly sums up why I prefer working with tools like NextJS or Gatsby (or 11ty):

Component-based workflows make frontend development fun again, and it is a lot easier to do with modern frontend frameworks than with using templating languages like Nunjucks or Handlebars.

A short guide to removing Git history entirely. Particularly useful when you're forking an existing project as a base for something new.

1. Delete the .git folder entirely
2. Run git init to create a new one
3. Add all files and create your new first commit

Not tricky, but surprised me that there wasn't a solution within Git itself.

This looks like a very interesting world-building tool. Create maps, family histories, write stories, track campaigns, all from a single profile. Neat 💪

A frankly depressing look at the state of the mobile web in 2021. From lacklustre technological advancement in the past decade, to increasing device saturation, and the overuse of JavaScript, here's the main conclusion:

1. The global performance baseline provides ~100KiB (gzipped) of HTML/CSS/fonts and 300-350KiB of JavaScript (compressed and assuming minimal HTTP requests);
2. The web is losing to native because performance genuinely matters, and it shouldn't be.
   

On how one poorly performing site can lead users away from the web and towards apps:

Bad individual experiences can colour expectations of the entire ecosystem.

Plenty of native apps are happy to aggregate content and serve it up in a reliably fast package, given half a chance. The consistency of those walled gardens is a large part of what the mobile web is up against — and losing to.

CPUs are not improving fast enough to cope with frontend engineers' rosy resource assumptions

---

On how a single disruptive carrier forced India's mobile market to embrace 4G, significantly improve cost (as much as 95% reduction in some areas), and brought an entire country online with stable, fast connections:

In 2016, Jio swept over the subcontinent like a monsoon dropping a torrent of 4G infrastructure and free data rather than rain.

Interesting that slow 4G is now considered a global baseline speed. That's impressive, given that 5 years ago slow 2G was the baseline 😬

---

On global smartphone purchase trends:

The worldwide device replacement average is now 33 months. In markets near smartphone saturation, that means we can expect the median device to be nearly 18 months old.

As of 2021, the average smartphone looks a lot like a Moto G7: Android, mid-tier, about 2-3 years old, running Chrome.

But average is only half the market. A better baseline would be the Moto E6 (or even Moto G4): still Android and Chrome, quad-core, 2GB RAM.

---

On how those same trends are creating a significant inequality gap:

As high-end phone performance accelerates away from mass-market devices (still largely with the same performance as 2012) we're creating a high inequality gap:

When we construct a digital world to the limits of the best devices, the worse an experience we build, on average, for those who cannot afford iPhones or $800 Samsung flagships.

---

On the folly (and privilege) of making choices based on DX instead of UX:

But we must never forget that measurable improvement for users is the yardstick.

Trickle-down user experience from developer-experience is, in 2021, as fully falsified as the Laffer Curve. There's no durable substitute for compassion.

---

On what comes next:

But there's light at the end of the tunnel: if we can just hold back the growth of JS payloads for another year or two — or reverse the trend slightly — we might achieve a usable web for the majority of the world's users by the middle of the decade.

Often, when people with goodwill and shared values end up disagreeing, it’s because they didn’t understand the code words that were being used.

(I often wonder how much the Left's ever-changing vocabulary hurts its ability to work cohesively, for example)

The best overview of z-index and stacking contexts that I've come across, plus it keeps getting better as Josh extends the useful tools section 👏👏

Top of the tips is isolation: isolate, a very useful CSS function that I never remember; it effectively resets the stacking context, which means it's particularly useful for component-based UI structures.

Also a worthy shout-out to the CSS Stacking Context Inspector plugin (also available for Chrome). It's already helped me locate a rogue stacking context being created by a global opacity attribute (of all things 😂).