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
Author Archives: Bramus!
Reducing motion with the
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 […]
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 […]
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: […]
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 […]
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 […]
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 […]
Creating Pixel Art with CSS
Using box-shadow, it’s possible to create a pixels on screen: See the Pen Pixel Art 3: Side-by-Side Box-Shadow by Jacque (@jschrag) on CodePen. As you can define multiple box-shadow entries – comma-separated – it’s possible to draw multiple pixels on screen … Creating Pixel Art with CSS →
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 […]
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 […]