Explore My Notes

Turn music into visual magic | Astrofox

Astrofox looks like a really clever video editor, developed specifically with the aim of creating videos for music playlists and personal tracks. Nothing too fancy, but lots of options to animate elements in time with the music tempo, and some surprisingly nuanced creative controls mean this looks really excellent. Definitely want to give it a whirl at some point.

Array functions and the rule of least power | Jesse Duffield

The various array methods in JavaScript can be thought of on a scale of power, or really flexibility. At the top end you've got the for loop, at the bottom the highly-specific functions .every and .some. Jesse makes the argument that you should always choose the least powerful option and I agree. The article is also just a generally excellent overview of array manipulation in JavaScript.

Circle chart showing how each array function can effectively be nested in those more powerful, with the for loop around them all, then "for each", reduce, both map and filter at the same level, and within filter find, then every and same together.
An incredibly useful reference guide to array functions.

πŸ“†  |  πŸ”—

  • JavaScript, 
  • array, 
  • function, 
  • map, 
  • reduce, 
  • filter, 
  • find, 
  • forEach, 
  • for loop, 
  • JavaScript 

Digital garden seedlings | Maggie Appleton

Whilst falling down the rabbit-hole of digital gardening I found some of Maggie's tweets incredibly insightful and useful, yet somehow totally missed her own digital garden (and her entire related repo of topics/content/examples) πŸ€¦β€β™‚οΈ I love the layout (not just here, but across her whole site too) but the part that really captured my imagination was her use of emoji-tags to differentiate topics into one of seedling, budding, or evergreen. It's just a neat metaphor for a topic in the garden literally growing through tending and care: 🌱 -> 🌿 -> 🌳 (though I feel slightly miffed that she chose not to use an actual evergreen for that category: 🌲 πŸ˜‚).

Selfauth | GitHub

A self-hosted, open-source IndieAuth authorisation endpoint. I still find myself running in circles as to whether IndieAuth worries me or excites me, but I find this project a really neat piece of work by Zegnat πŸ‘

πŸ“†  |  πŸ”—

  • Frontend, 
  • tool, 
  • IndieAuth, 
  • IndieWeb, 
  • self hosted, 
  • repository, 
  • open source 

Designing teamwork | Slack

Some really nice thoughts and a generally solid write up of the latest Slack redesign, which has been trialled/prototyped by a diverse "working group" of customers. Great to see a tech company realising that they've grown beyond the tech sector, too.

Though, what is up with this duck in their footer πŸ€”

Bottom corner of the Slack Design website where, after a second or two, a duck in sunglasses pops up, disappears, and then a second duck wearing a trenchcoat, hat, and sunglasses appears with the text "design is my passion".
I've tried searching but... πŸ¦†

How knot to hang a painting | Tom Scott / Up & Atom

How to hang a painting from two points, where removing either point causes the hanging to fail. Weird puzzle, excellent explanation of the fundamentals of knot theory in mathematics.

Feeds and blogrolls | adactio

I'm still intending to add a /feeds page to this site at some point (see Making RSS more visible with slash feeds) and now Jeremy has put together an implementation I really like. Jeremy's idea of adding a blog roll of the feeds he subscribes to is a neat touch too, and the functionality to subscribe to individual tags is * chef's kiss * I'm not sure how Gatsby would cope though...

Building the woke web | A List Apart

At this point, surely access to the internet is at least a utility, if not a human right. Olu has put together a brilliantly reasoned argument for just that, and how to go about building for a world where not everyone has access to digital resources equally.

Not having access to the internet is expensive, locking you out of essential services and a surfeit of helpful information.

It's far from being a "developing nations issue" either (though, to be clear, it is a huge issue in a lot of developing countries). In the UK, 10% of adults were considered to be "digitally excluded" in 2018; and yes, this is an issue which disproportionately affects women, people of colour, and people living with disabilities, whilst richer households are more likely to benefit from the web.

Marginalized people with insights to share aren’t hard to find when you start listening. They are your next users, your future developers, your fledgling marketing team. Excluding them reduces your options, your appeal, and your breadth of ideas.

Seek a broad range of opinions; hire inclusively; be proactive about improving and advocating for diversity; test your tools with a diverse audience in mind (screen readers, Pa11y, axe, Lighthouse, etc.); where possible, provide non-digital avenues to your services as well.

Web accessibility is not an optional extra. What inclusion looks like in practice will depend on your products, your users, and what you intend to achieve, but for it to be real and meaningful in any context, it cannot be an afterthought.
The fact that this kind of engineering is commonplace on the internet doesn’t make it OK. It just highlights that the way we have built the web is fundamentally broken.

The design systems between us | Ethan Marcotte

Put another way: what kind of decisions does your technical stack make about who’s allowed to contribute to the front-end?

Have design systems helped bridge the gap between designers and developers? Probably not. Is part of that potentially the increasing complexity of frontend build tooling? Possibly. Design and development tooling does impact workflows on both sides of that (probably problematic) divide.

Accessible animations in React | Josh W Comeau

I've long wondered whether there were any particular gotchas with React when it came to using the prefers-reduced-motion flag. Well, Josh has written up the answer (and, as usual, extremely well). The short is: yes, probably. It's best to assume no animations (which I think is a solid position regardless of tech stack), which means legacy browsers are catered for as well. He also points out that global overrides in CSS can cause issues with JS libraries like React Spring, which is worth knowing.

To determine the flag in JS you can use the window.matchMedia(prefers-reduced-motion: no-preference) (Josh has a full example of the code involved, including with event listeners to catch a user that alters the OS accessibility settings after already landing on your site, a very nice touch). He's even converted that logic into a hook 🀩 plus outlines how it might differ for SSR frameworks like Gatsby, which highlights that hydration can be tricky here (possibly another argument for removing React from the client-side if possible).

It's also interesting to see that Apple came up with the prefers-reduced-motion flag and that it's now supported pretty much everywhere, which is fantastic news.

For some folks, motion can trigger physical symptoms like nausea, dizziness, and malaise. I very much don't want to cause any of those symptoms!

πŸ“†  |  πŸ”—

  • Inclusion, 
  • Animation, 
  • accessibility, 
  • a11y, 
  • React, 
  • Gatsby, 
  • server-side rendering, 
  • prefers reduced motion, 
  • animation, 
  • flag, 
  • JavaScript, 
  • React hook, 
  • Apple 

De-escalating social media | Nick Punt

A quite frankly brilliant concept design for a "Mea Culpa feature" on Twitter. The idea: let users add a flag to their own tweets admitting mistake:

Mockup for an "I made a mistake" option on Twitter that shows a flag no the original tweet reading "@user has indicated they made a mistake in this tweet".
Nick goes into more detail about the exact reasoning behind the language used here, but I think it's pretty spot on.

Adding a "mistake" notice would trigger the tweet to reappear in people's timelines that already saw it, helping the "retraction" gain ground, and stop new users from liking or commenting, de-amplifying the message. Nick also puts forward a suggestion for a "forgive" interaction that would appear under tweets with Mea Culpa notes applied, so that users can receive positive reinforcement as well. I think it's all great and a fantastic idea for humanising social media, building a UX that drives more positive discourse and more civil interactions.

My family saw an NYPD police car hit a kid on Halloween. | ProPublica

A frankly damning look inside the systems meant to hold the NYPD to account, centred around a horrific tale of racial profiling within Brooklyn on Halloween. How this system exists in the 21st Century is beyond belief. The school ID with a "know your rights" checklist on the back is just...😑 

πŸ“†  |  πŸ”—

  • Anthropocenic View, 
  • black lives matter, 
  • NYPD, 
  • police, 
  • defund, 
  • accountability, 
  • racial profiling, 
  • Halloween, 
  • children, 
  • school