Explore My Notes

Deceptive dark patterns | adactio

"Dark pattern" is one of those phrases that could be problematic,  or could just be evocative (there are some obvious race-related issues with equating dark/darker with bad/worse, but there's also a legitimate cultural attachment to light/dark as in day/night). As Jeremy puts it:

The phrase “dark pattern” is …problematic. We really don’t need to be associating darkness with negativity any more than we already do in our language and culture.

But, it's also one of those terms which don't make a huge amount of sense if you step back and look at it with fresh eyes. For both reasons, I like Jeremy's suggestion of moving towards "deceptive pattern", which is more on-the-nose as to what it's trying to convey, and avoids any lingering sense of problematic language. Good, I think I'll adopt it 👍

(I wish there was some way to pseudonym tags in Craft...)

Time to update your theme-color meta tag | Stuff & Nonsense

I have mixed feelings about the inclusion of Safari's new editable browser chrome, but love it or hate it, more and more iOS and OSX users will end up seeing it. Andy hasn't touched on any of the controversies around the tag, but their article does a solid job of outlining what's changed, why, and how to make the most of it.

For example, I hadn't realised that theme-color was already used by PWAs installed from Chrome; nor did I know that Safari had enabled media queries on the tag, meaning that you can do things like this (code is Andy's example):

<!-- Dark mode theme: blue -->
<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0e4359">

<!-- Light mode theme or no preference: red -->
<meta name="theme-color" content="#a62339"> 

Also, good to have confirmed that this will be a user preference:

Safari users can turn off coloured toolbars with “Preferences > Advanced > Never Use Background color in toolbar” but I suspect most people will leave the default turned on.

📆 29 Jul 2021  | 🔗

  • HTML & CSS
  • theme-color
  • meta tag
  • PWA
  • Chrome
  • Safari browser
  • theme
  • dark mode
  • a11y
  • media query
  • example 

Fully repairable laptops | Framework

A fully repairable laptop design, as thin as a standard ultrabook and with high-end Intel parts, up to 64GB RAM, and up to 1TB of hard drive space. I/O is hot-swappable, so you can configure the four ports to what you most need and modify in the future if those needs change (or on the fly, if they change a lot).

Right now, the downsides I see are a non-touch monitor (though colour reproduction looks great) and the fact it's only available in the US and Canada as pre-orders. Hopefully they thrive, though, because the machine looks great, the ethos is extremely welcome, and the innovation in aspects like the I/O modules and the BIOS battery switch (so cool!) means this feels like a genuine competitor out the gates, rather than an enthusiast/hacker hope'n'see.

📆 28 Jul 2021  | 🔗

  • Technology
  • laptop
  • right to repair
  • modular
  • innovation
  • eWaste 

A dictionary of problematic terms | Self Defined

A community-led, open-source project attempting to define problematic language (in English) and suggest better replacement terms. Unfortunately, not all listed phrases or words have detailed breakdowns, but those that have do a great job of outlining the historical or cultural contexts that gave rise to the language in the first place, and why the modern usage is less than ideal (or not; some terms are deliberately listed for being positive), including sources or further reading.

Terms are also marked up with at-a-glance categorisation, such as cultural appropriationracist language, or slur. Even if I don't 100% agree with some of the arguments presented (it skews American and therefore can lose or ignore some localised context), it's a brilliant resource for fact-checking, finding more inclusive language options, or just increasing awareness of the nuances involved.

Guide to React plus TypeScript | GitHub

I find navigating the type options in React (and decoding what they actually do/mean) really difficult. It's layers of abstractions on top of layers of more abstractions 😄 Luckily, this guide provides a lot of useful context and some well-reasoned defaults (though I don't agree with them all).

The variations of the commonplace book | Chris Aldrich

An interesting overview of the history of note-taking, specifically as it relates to the concept of a commonplace book and the myriad related forms, including the most recent idea of a digital garden.

It also serves as a reminder of all the things I want to achieve in this space, but have yet to find the time...

On the general lack of understanding behind note-taking:

People are “taught” (maybe told is the better verb) to take notes in school, but they’re never told why, what to do with them, or how to leverage them for maximum efficiency.

On the historical impact and use of commonplace books (I really like this sentiment):

... [commonplace books are] somewhat like a portable Google search engine for their day, but honed to [the author's] particular interests.

On florilegia, a term I've not come across before:

Florilegia are a subcategory of commonplace book starting around 900 CE but flourishing in the 12th and 13th centuries and primarily kept by theologians and preachers.

On wikis, and the discovery that I share my birthday with both the ending of the Third Age of Middle-Earth and their creation – sweet 😄:

Inspired, in part, by Apple’s HyperCard, Ward Cunningham created the first public wiki on his website on March 25, 1995

(Mildly related, but this does strike me as a good idea for a microsite, perhaps bday.theadhocracy.co.uk 😁)

On the (less than ideal) history of the term "second brain" (and why other terms should probably be preferred):

Second brain is a marketing term which stands in for the idea of the original commonplace book.

Container queries in web components | Max Böck

Max has put together one of the best examples of how container queries will fundamentally change the way front-end development works. Better still, they provide extremely clear explanations of container queries, web components, and how they combine to unlock true intrinsic design.

Container Queries are one of the last few missing puzzle pieces in component-driven design. They enable us to give components intrinsic styles, meaning they can adapt themselves to whatever surroundings they are placed in.

I also really love the way they think about separating CSS in layout versus content; that feels like something worth co-opting now:

It’s generally a good idea in CSS to separate “layout” from “content” components and let each handle their own specific areas of responsibility. I like to think of Japanese bento boxes as a metaphor for this: a container divided into specific sections that can be filled with anything.

On how this enables reusable page-level templates, such as grid layouts:

[These] parts of the layout are only concerned with the alignment and dimensions of boxes. They have no effect whatsoever on their children other than giving them a certain amount of space to fill.

📆 24 Jun 2021  | 🔗

  • HTML & CSS
  • CSS
  • container queries
  • component
  • intrinsic design
  • layout
  • grid
  • web component
  • best practice 

A defence of alphabetical CSS | Eric Bailey

I am not a fan of alphabetical CSS, but Eric does a really solid job of arguing why, right now, it may be the best option. The short version is that CSS remains so woefully underutilised and misunderstood across the industry that anything other than alphabetical – a system that requires no domain-specific knowledge – is bound to fail. It's a depressing but well-reasoned argument.

Alphabetical is easy enough to pick up and have an organization repeat as a convention without having to invest too much time on upskilling an entire team on CSS theory.

On why pushing more "correct" solutions can be damaging to the client/team you're trying to help:

I think this is an important thing a lot of people get wrong. You want to set up something sustainable, but also not pour your own energy into making the right thing in the wrong way just to satisfy your own personal desires.

I just really love this definition of CSS:

The reality is that [CSS] is the programming language used to give ideas shape.

📆 22 Jun 2021  | 🔗

  • HTML & CSS
  • CSS
  • order
  • alphabetical
  • sort
  • team
  • web development
  • definition 

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.

Made By Me, But Made Possible By:

CMS:

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.