frippz.se

This morning, my app of choice for reading RSS feeds; NetNewsWire, notified me of an update. This was a major version update which included a new app icon and an updated UI for Big Sur. This gave me the opportunity to grab a screenshot to compare. So I did.

It’s a bit pointless, but also interesting to compare how Big Sur affects the design of apps on the Mac. I’m also thankful I get to keep the text below the icons in the toolbar.

There’s an accessibility setting in macOS and iOS that allows users to reduce motion in the interface. On iOS, this removes animations in the OS itself and well made apps should also respect this setting. In CSS there’s a media query for it; (prefers-reduced-motion: reduce), which has for example been supported in Safari since version 10.1. If you are using animations on your website, consider adding this snippet to your stylesheet.

@media screen and (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.001ms !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

But why didn’t I remove the transition and animation durations altogether? Well, retaining the durations but changing them to something that’s imperceptible to the human eye, helps to avoid breaking anything that is tied to CSS-based animations. Make sure test your site, though. I’ve seen stuff break in the weirdest of ways with this styling, so your mileage may vary. Resetting animation-iteration-count disables infinite animations, instead of making the loop crazy fast!

Browser and OS support

Almost all of the major browsers has had support for a good while, the exception being Legacy Edge, which lacks support entirely. Check caniuse.com for more details.

Supporting browsers can read this preference from the OS of your choice. A few examples below.

Windows 10

1. Settings
2. Ease of Access
3. Display
4. Show animations in Windows.

Windows 7

1. Control Panel
2. Ease of Access
3. Make the computer easier to see
4. Turn off all unnecessary animations (when possible).

macOS

1. System Preferences
2. Accessibility
3. Display
4. Reduce motion.

iOS/iPadOS

1. Settings
2. General
3. Accessibility
4. Reduce Motion.

Android 9+

1. Settings
2. Accessibility
3. Remove animations.

Remember, respect your users. ❤️

When the first MacBook Pro with a Touch ID sensor was released, I was thoroughly excited. Rightly so. Apps like 1Password was quick to implement support for it. There was one thing that was missing though; authentication with sudo.

I’m almost ashamed that after having owned at least two MacBook Pros with Touch ID, I didn’t find out until today about this. So it’s time to write it down. Hat tip to Stanislas and his post “Using Touch ID for sudo authentication on a MacBook” for showing me the way.

Edit (as root) /etc/pam.d/sudo:

# sudo: auth account password session
auth       sufficient     pam_smartcard.so
auth       sufficient     pam_tid.so		# <= Add this line!
auth       required       pam_opendirectory.so
account    required       pam_permit.so
password   required       pam_deny.so
session    required       pam_permit.so

For clarity, the line you want to add (as seen above) is:

auth       sufficient     pam_tid.so

That’s all you need! Oh, and your finger, of course! 😉

Maybe two or three years ago, I added a section called “Labs” that didn’t actually contain anything. I kept it up for far too long and I never got around to adding the planned content. Well, no more! In a spur of inspiration and motivation, I whipped something up today so that I could finally get some content in. For starters, it’s just some of the more popular CodePens I’ve made over the years. More stuff to come.

Following yesterdays Apple event, I spent the morning perusing my RSS feed, as I do most mornings. One of the articles from developer Michael Tsai pondered the screen sizes of the new iPhone models. He compiled a list of most available models (including the older 5s/SE that’s no longer as easy to buy) and their viewport sizes in CSS pixels, or the unit he chose to describe them with; points.

The iPhone 12 Mini is the model that I believe will be the “people’s iPhone”. That is to say, it’ll most likely be the top seller. With that in mind, it’s interesting to note the width of the device. 360 CSS pixels. I’ve noticed in my day job that our designers have designed with the iPhone 8/SE 2 in mind, that is to say that they make their most narrow designs 375 CSS pixels. While that might be a problem in and of itself since there’s still plenty of devices out there that is reporting 320 CSS pixels and you should cater to these too, it’s interesting to note that our designers will at least have to shave off 15 CSS pixels in their future designs, since this will very likely be the majority for the future.

Then again, if we all just built stuff fully flexible and did not cater to a specific minimum viewport, this wouldn’t be a problem at all.