Explore My Notes

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!

📆 05 Jul 2020  | 🔗

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

📆 02 Jul 2020  | 🔗

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

Climate strike software | CSL

The Climate Strike License is an attempt to block companies that profit from climate change using open-source software. It's certainly an interesting approach, though I've no idea how enforceable it would be (and I don't know if you could retroactively apply this license to existing OSS).

Websites that spark joy | The Whimsical Web

I've watched the Whimsical Web slowly grow over the last few days and it's been excellent. There's a lot of sites (and developers/designers) that I already know on the list but plenty more I would never have come across. From the brilliant connect-the-dots on Timo Becker's site, to the utter madness of Luke Towers' chaos button, it's great fun.

Simple state management with Recoil | LogRocket

Recoil is a new state management library from Facebook (though note this isn't an official React project). Doesn't seem to do anything too fancy, but does use a similar mental model to hooks and feels particularly easy to grok. Nice writeup with examples.

📆 30 Jun 2020  | 🔗

  • JavaScript
  • React
  • state management
  • Recoil
  • library
  • Facebook
  • global state 

Annotate the web | Hypothes.is

A neat little tool that can allow you to annotate a web page, comment on annotations, and then save/share/export that information. Spotted in an IndieWebCamp show-off session where one user has combined it with IFTTT and Micropub to push annotations directly to a notes section on their site. Unclear how well supported it is.

Object.is() vs === | Dmitri Pavlutin

The Object.is() function is pretty much identical to the old "strict equality operator" (===), with two notable differences:

  1. NaN = NaN resolves to true (i.e. Object.is(NaN, NaN) // true);
  2. Negative zero = positive zero resolves to false (i.e. Object.is(-0, +0) // false).

Personally, I agree with 1) and not 2), so guess there still isn't an equality check which is intuitive to me 😂 Getting close though!

📆 30 Jun 2020  | 🔗

  • JavaScript
  • Object.is()
  • equality operator
  • strict
  • comparison 

In-depth guide to React testing | Johannes Kettmann

Very informative beginner's guide to testing React websites using Jest and the React Testing Library.

📆 30 Jun 2020  | 🔗

  • JavaScript
  • Jest
  • testing
  • unit test
  • integration test
  • React
  • debug
  • API
  • tutorial
  • guide
  • Testing Library
  • Reddit 

Opening a restaurant to share our cooking | Jacky Alcine

A great talk from Jackie about the potential future evolution for the IndieWeb, with some exceptional quotes. Feels like it hit on my own worries/interests around the movement, in particular with the idea of lowering the barrier of entry for being part of it.

Our mission isn't necessarily to replace social media, but to acknowledge that the web is the initial social network and that we should be complementing and extending it versus closing it off.
There's a way to speak to your plumber and a way to speak with the person who needs to live in the house with the plumbing.

Also, damn this is a great slogan for the IndieWeb movement:

We build for ourselves so we can interact with one another.

In defense of a fussy website | Sarah Drasner

Sarah has put into words some feelings I've had recently about the web (and uses two sites as examples that I keep returning to as well: Josh W Comeau and Cassie Codes) :

The small delights and touches, the little a-ha moments, make me STAY. I wander around the site, exploring, learning, feeling actually more connected to each of these humans rather than as if I’m glancing at a PDF of their resume.

Basically, the web should be joyous. It's a space unlike any other, where creativity can take multiple forms, yet it increasingly feels like a collection of corporate cookie cutters. It's not just about personal impact, either. Sites that make you enjoy using them keep you coming back. They increase engagement. They decrease bounce rates. It's win-win. Plus, you can start small, as Sarah says, by just introducing little easter eggs or moments of flair.

If something is meaningful to you, the audience you’ll gather will likely be the folks that find it meaningful, too.

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.