Hey,
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 3rd party script we are providing to avoid style leakages. The point here is that this decision will do no harm to its 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, it’s a barely noticeable difference to unfiltered images. Don’t hesitate to try out new things, only make sure that this is the best solution when you put it to production.
Generic
- Have an open-source project that needs to figure out a user’s country by IP? Here’s a free, simple Geolocation API that lets you do this.
Privacy
- Privacy International published a Privacy 101 collection that’s interesting to read on various topics.
- This guide explains
how websites and apps can comply with the Do-Not-Track settings(newer link: DNT Guide) of users and how to use the Consent API to let people opt-out of tracking. I would love to see every website that tracks something providing it.
Web Performance
Accessibility
- When we talk about accessibility we usually think of users with well-known disabilities and diseases. However, there’s much more than we usually think about it and this article covers how to design a dementia-friendly website, a topic I hadn’t given any thought on 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 example.
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 even now using 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 to build more accessible applications: The first one is react-a11y, and the second one is 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 ever wondered when to use
===or==comparison operator in JavaScript, this article will explain it.
CSS
- 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 setup Sass to get better results. - Una Kravets researched what impact using CSS filters, SVG filters, Canvas filters on images has compared to preedited images. The result is quite interesting as it shows Canvas being slowest, and SVG and CSS not being noticeably slower than the unfiltered image.
Anselm