Explore My Notes

Avian vector encyclopedia | Scott Partridge

A selection of illustrated quails, including the California Quail and spiral-faced Montezuma Quail
Who doesn't love quails? Particularly when they're this adorably designed 😍

TheΒ Avian Vector Encyclopedia (or AVE) is a beautiful and fascinating project at the juncture of graphic design, art, and natural history. Scott is attempting to illustrate every species of living bird in a specific "flat", vector-based style. The results are beautiful and fascinating in equal measure.

Types of type | I Love Typography

Apparently, the type design world has recently thrown out its formal classification system and has yet to decide on a replacement. ILT (as ever)Β does a great job of summarising the current situation, the historical context, and the possible paths forward.

In particular, I found the highlighting of colonial creep within type classification fascinating, in terms of how fonts are often regarded as Latin or simply non-Latin, which is, well, yeesh 😬:

Imagine referring to billions of people as non-White or non-Caucasian while claiming impartiality. And although Latin is globally the majority script, let’s not forget how it got there.

Ancestors and descendants | Eric Meyer

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.

Weighing up UX | adactio

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

Beer flavour wheel | Beerwulf

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.

Creative Google fonts | Do-Hee Kim

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 πŸ‘

The component gallery | Iain Bean

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.

A11y style guide | Scott O'Hara

A great resource for finding accessible patterns for common UI requirements, as well as including stacks of accessibility best practices πŸ”₯β™Ώ

Partial hydration with 11ty and Preact | Markus Oberlehner

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.

Wipe Git history from a repository | Freek Van der Herten

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.

The mobile performance inequality gap 2021 | Alex Russell

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.

πŸ“† 28 May 2021  |  πŸ”—

  • Frontend, 
  • mobile, 
  • web, 
  • web performance, 
  • report, 
  • inequality, 
  • Android, 
  • benchmark, 
  • JavaScript, 
  • SPA, 
  • DX, 
  • 4G, 
  • India, 
  • phone