Explore My Notes

The front-end developer handbook 2019 | Frontend Masters

It's not so much a resource as a resource of resources; a meta resource. Providing high-level overviews of complex topics and then linking out to more detailed deep dives or explanations (not all free, but all vetted). Fair to say if you're looking to understand a given topic about front-end development, this is a good place to start.

Your eco companion | Pawprint

Mike Berners-Lee (yes, brother to that Berners-Lee) has carved out a real niche for himself as something of an authority on the complexities of the modern environmental movement, particularly when it comes to carbon footprint calculations. That's why it's exciting to see his name behind this new service. Pawprints will be a PWA (yep, they're going web-native - I wonder if his brother's influence 😁) and resource that helps people both track and understand their environmental impact. I'm still a little dubious as to how well this might work, but I'm also intrigued enough to have signed up to their waiting list.

Adding webmentions to your website | CSS Tricks

Very high level guide to getting webmentions on your website, tracking them, and automatically pinging linked sites when you post.

The ugly truth behind Oculudentavis | Mark Witton

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.

📆 16 Mar 2020  | 🔗

  • Natural World
  • dinosaurs
  • amber
  • oculudentavis
  • birds
  • theropods
  • ethics
  • Mark Witton
  • Myanmar 

Animating CSS width without the squish | Rik Schennink

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.

The free market is elusive | Seth Godin

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

Smaller HTML payloads with Service Workers | Philip Walton

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.

📆 11 Mar 2020  | 🔗

Select your poison | Sarah Higley

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

Information wants to be free | Seth Godin

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.

Made By Me, But Made Possible By:


Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.