About The Author

Anselm is a freelance front-end developer who cares about sustainable front-end experiences and ethical choices in life. He writes the WDRL, and is co-founder … More about Anselm…

Web Development Reading List #138: Accessible Web Components And CSS And Sass Precision

Quick Summary

From time to time you need to recalibrate your brain by experimenting with new technologies, by tracing down the performance of a certain feature or by reconsidering the environment of your project. While I’m generally not a proponent of inlined CSS, we now will use it for a third-party script we are providing to avoid style leakages. The point here is that this decision won’t harm performance as it’s an asynchronously loaded script. The other thing I always assumed but never got confirmed was that CSS filters slow down the rendering of a page massively. But as it turns out, when you research this properly, there’s only a barely noticeable difference to unfiltered images. Don’t hesitate to try out new things, only make sure that it’s the best solution when you put it to production.

Table of Contents
Membership counter

Members support Smashing

Wonderful, friendly people who keep this lil' site alive — and get smarter every day.

Are you smashing, too? →

From time to time you need to recalibrate your brain by experimenting with new technologies, by tracing down the performance of a certain feature or by reconsidering the environment of your project. While I’m generally not a proponent of inlined CSS, we now will use it for a third-party script we are providing to avoid style leakages. The point here is that this decision won’t harm performance as it’s an asynchronously loaded script.

The other thing I always assumed but never got confirmed was that CSS filters slow down the rendering of a page massively. But as it turns out, when you research this properly, there’s only a barely noticeable difference to unfiltered images. Don’t hesitate to try out new things, only make sure that it’s the best solution when you put it to production.

Further Reading on SmashingMag:

General

  • Have an open-source project that needs to figure out a user’s country by IP? Here’s a free, simple geolocation API to do the job.

Privacy

Web Performance

Accessibility

  • When we talk about accessibility, we usually think about users with well-known disabilities and diseases. However, there’s much more to it than we usually think and this article covers how to design a dementia-friendly website, a topic I haven’t thought about before.
  • Web components received a lot of negative feedback in the past. One major point is that developers need to implement accessibility features completely on their own. Now Artem Tabalin shares how to make accessible web components using a multi-select field as an example.
Accessibility is vital. To make your web components accessible, too, Artem Tabalin wrote up a brief guide on how to do so.
Accessibility is vital. To make your web components accessible, too, Artem Tabalin wrote up a brief guide on how to do so. (Image credit: Artem Tabalin)

JavaScript

  • When working with complex animations, doing this entirely in CSS can be quite challenging and messy. “Getting started with the Web Animations API” is a great article introducing an alternative to the CSS-driven approach that you can soon use cross-browser or already now with a polyfill.
  • There are a couple of JavaScript video players out there already. But Plyr is a simple, lightweight and accessible media player that you can use for most projects to embed YouTube, Vimeo or self-hosted videos.
  • For React, there are two modules worth mentioning that help you build more accessible applications: The first one is react-a11y and the second one a linting config for eslint from the AirBNB React Coding Guidelines.
  • react-boilerplate v3 is finally out, and if you think about a new React project, I highly recommend to consider using it. It has Service Worker support, a great developer experience and routing included.
  • If you have ever wondered when to use the === or == comparison operator in JavaScript, this article will explain it.

CSS/Sass

  • What does a browser do when you let it calculate values like 1/3? In the end, it needs to map it to pixels, and that can sometimes result in small glitches in the design due to sub-pixel interpolation. Learn what you can do in CSS and how to set up Sass to get better results.
  • Una Kravets researched what impact CSS filters, SVG filters, and canvas filters have on images compared to pre-edited images. The result is quite interesting as it shows canvas being slowest and SVG and CSS not being notably slower than the no-filter image.

Using percentages in CSS can sometimes result in small glitches. Hugo Giraudel tells a tale of CSS and Sass precision and what you can do to get better results.
Using percentages in CSS can sometimes result in small glitches in the design. Hugo Giraudel tells a tale of CSS and Sass precision and what you can do to get better results.

And with that, I’ll close for this week. If you like what I write each week, please support me with a donation or share this resource with other people. You can learn more about the costs of the project here. It’s available via email, RSS and online.

Thanks and all the best, Anselm