Explore My Notes

I've followed the news over the new species Oculudentavis with interest. The initial find was stunning; the follow up discussion around whether or not this is a basal therepod, a stem bird, or (quite possibly, it seems) a lizard was a fascinating insight into modern palaeontology. But the debate around the ethics of its provenance in Myanmar amber has eclipsed all of that. Mark Witton has a great argument here for why a boycott on amber from the region should be considered, but I can't help but worry about the knowledge that could be lost if legitimate scientific channels withdraw. It's a tricky situation.

An excellent collection of articles, tutorials, and advice on modern web development challenges. From PWAs to accessibility to caching, there's a lot of information here.

An interestingly regressive technique for expanding the size of a rectangle with rounded corners in CSS that protects the corners themselves from deforming, all by using transform.

Let’s apply this to our square. It will mean we need one container and three child elements to represent the square left (1), center (2), and right (3) parts.

...when the web was young, the free market in ideas was open to anyone with access to a library’s internet connection.

But the web rewards network effects and network effects have led to monopolies. Google doesn’t really want a free market in ideas (they hate blogs), instead, they want a market in which they’re the landlord. Facebook enabled a huge outpouring of voices from people who didn’t previously have a microphone, but their algorithms and focus on clicks led toward incentives for outrage as the voices corroded so many elements of our culture.

A service worker can request just the bare minimum of data it needs from the server... and then it can programmatically transform that data into a full HTML document.

{...}

By only requesting the contents of a page, the networks payloads become substantially smaller, and the pages can load quite a bit faster.

A great overview of why a custom select component can be problematic:

1. Windows and macOS both treat native equivalents differently, meaning you have different expected behaviour for screen readers and other accessibility software straight away (Android and iOS are same as macOS);
   1. And this gets even more confusing when you include <select multiple>, which is standardised across OSes but has very poor success rates in UX tests;
   2. And even-more even more confusing when you include autocomplete or filtering capabilities, which require use of an underlying combobox.
2. ARIA already has three separate patterns (one still in discussion) so even the standards are confused;
3. Different browsers (including different OS versions of the same browser) use different default keyboard configurations, and some are not "obvious" but are expected e.g. Enter should not trigger a form submission but most users may expect it to, making it hard to utilise in an accessible way (see second article as well for how confusing this can be).

In the followup article, user testing (albeit with a small sample size) showed that - to the surprise of none - the native select element is consistently the easiest to use across platforms for basic form requirements. However, <select multiple> was comfortably the worst user experience for multiselect. 🤔

But, when male brand mascots outnumber female mascots two-to-one, is there still a place for this approach in today’s society?

I'm a particular fan of the Green Giant:

Originally discovered via The Logo Smith.

Information wants to be free or it wants to be expensive.

Both are true. It either benefits from everyone knowing it, or it becomes worthwhile because it is scarce.

I don't think I've come across a clearer explanation of the full cascade before, nor one so beautifully crafted. An excellent resource and inspiration.

A great explanation of why two-pass rendering is a useful mental model to consider when working with server-side rendering/SSGs like Gatsby and JavaScript frameworks. The main point? Rehydration ≠ rendering, so don't load dynamic content until rehydration is finished if you want to avoid weird layout bugs and jankiness; use hooks or "Client-only" component abstractions instead.

Critically, rehydration is not the same thing as a render. In a typical render, when props or state change, React is prepared to reconcile any differences and update the DOM. In a rehydration, React assumes that the DOM won't change. It's just trying to adopt the existing DOM.

An excellent overview of (most of) the unit options you can use in CSS Grid columns and rows, with examples. (No RSS)

A neat little project that highlights potentially insensitive language used within the provided copy (for English, at least).