Reducing motion with the <picture> element

Great trick by Brad Frost, in which he combines prefers-reduced-motion? with the <picture> element

<picture>
  <source srcset="no-motion.jpg" media="(prefers-reduced-motion: reduce)"></source> 
  <img src="animated.gif alt="brick wall" />
</picture>

Yes, that actually works!

Reducing motion with the <picture> element →

💫 When taking prefers-reduced-motion into account in your CSS code, it becomes really powerful when combined with CSS Variables

Ungoogled Chromium is Google Chrome, but without Google

If you’re not too fond of Google but do want a Chromium-based browser that is as close to Google Chrome as it can be (along with some extras), be sure to check out Ungoogled Chromium:

ungoogled-chromium is Google Chromium, sans dependency on Google web services. It also features some tweaks to enhance privacy, control, and transparency (almost all of which require manual activation or enabling).

ungoogled-chromium retains the default Chromium experience as closely as possible. Unlike other Chromium forks that have their own visions of a web browser, ungoogled-chromium is essentially a drop-in replacement for Chromium.

Ungoogled Chromium Source (GitHub) →
Ungoogle Chromium Binaries →

spatie/test-time – A PHP package to control the flow of time

Freek has created spatie/test-time, a package to easily freeze/rewind/advance time in PHP.

Imagine you’re building that your app can notify your user, but you don’t want to send more than one notification in a timeframe of five seconds. How are you going to test the time aspect? Do you have to create a test that takes five minutes?

Luckily the answer is “no”. If you’re using the popular Carbon library, you can set the value that the library considers “now”

The package provides a few convenience methods around Carbon’s setTestNow method:

// time will not progress anymore
TestTime::freeze();

// Advance one minute
TestTime::addMinute();

// Rewind 5 hours
TestTime::subHours(5);

💁‍♂️ If you are not using Carbon you can reside to the php-timecop PHP extension that does the job (and affects \DateTime).

A PHP package to control the flow of time →
spatie/test-time (GitHub) →

Resilient Management, an excerpt

On A List Apart you can read an excerpt from the book Resilient Management by Lara Hogan. It’s from chapter 2, entitled “Grow your teammates”:

To spur this course-correction and growth in your teammates, you’ll end up wearing four different hats:

  • Mentoring: lending advice and helping to problem solve based on your own experience.
  • Coaching: asking open questions to help your teammate reflect and introspect, rather than sharing your own opinions or quickly problem solving.
  • Sponsoring: finding opportunities for your teammate to level up, take on new leadership roles, and get promoted.
  • Delivering feedback: observing behavior that is or isn’t aligned to what the team needs to be doing and sharing those observations, along with praise or suggestions.

Let’s dive in to how to choose, and when to use, each of these skills as you grow your teammates, and then talk about what it looks like when teammates support the overarching direction of the team.

/me orders book.

Resilient Management, an excerpt →

Indicating focus to improve accessibility

Great article by Hidde. It totally rhymes with my Building Better Forms™ by not taking away affordances post.

It’s a common, but fairly easy-to-fix accessibility issue: lack of indicating focus. In this post I will explain what we mean by focus and show you how focus outlines make your site easier to use.

Indicating focus to improve accessibility →

An introduction to the JAMstack

This introduction to JAMstack – or is it SHAMstack? – is quite complete:

Traditional websites or CMS sites (e.g WordPress, Drupal, etc.) rely heavily on servers, plugins and databases. But the JAMstack can load some JavaScript that receives data from an API, serving files from a CDN and markup generated using a static site generator during deploy time.

Maggie Appleton – from the aforementioned illustrated.dev – also created this ace drawing:

☝️ Yes, that should be markup instead of markdown, I already notified Maggie about it 😉

And oh, I follow Chris here, whether <body><script src="react-bundle.js"></script></body> falls under the JAMstack label or not:

An introduction to the JAMstack: the architecture of the modern web →

Accessible Icon Buttons

Sara Soueidan:

An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text.

Putting aside the UX side of the coin and whether or not an icon alone is enough to convey meaning and functionality to users, many implementations of these buttons today lack the proper accessibility that makes them meaningful to users of assistive technologies.

Sara gives us 5 techniques to solving this.

Accessible Icon Buttons →

Why the Soviets doctored this iconic photo

With the recent 75 year remembrance of the Normandy Landings (D-Day), I was reminded of this video by Vox, from the Vox Darkroom series:

“Raising the Flag on Iwo Jima” and “Raising a Flag over the Reichstag” are similarly iconic photos from World War II. They’re both beloved images of victory, and they’re both taken after the fighting ended in significant battles. But the Russian Soviet one is different, because parts of it are altered.

Internal classes in PHP

As a (PHP) package developer, you sometimes have classes that are meant for internal use – inside the package itself – only. PHP has no built-in solution for this, but using a DocBlock Tag one can indicate its intended use. As Nuno Maduro explains:

Maybe in the future, the PHP language will have the internal class access modifier, it would prevent people from using internal classes from your library. Meanwhile, the PHP @internal tag can be used to denote that the associated class/method is internal to the library. It’s supported by PHPStorm and it warns people that those classes/methods are not meant to be used

Internal classes in PHP →

Via Freek (who recently redesigned his blog by the way)