WDRL — Edition 235: Colorblind, Grid in IE, Service Worker Quota and Extending Native DOM Elements

Celý článek

Hey,

The web continues to amaze me. With all its variety and different changes to the platform it’s hard to see a straight pattern, if there’s even (just) one. But it’s wonderful to see what is being changed, which features are added to the platform, which ones get deprecated, and how browsers implement more and more technology to protect the user from malicious website attacks. It’s interesting to see that these security features nowadays are getting as much attention as a feature for developers which shows the importance of privacy and security and how unstable and insecure the web was in the past.

But the best thing about all this is, that it shows how important it is to stick to the things that people give us. Instead of implementing our own solutions for everything, it’s often way better to re-use an existing system. Not only is it safer to rely on, but also less work while more inclusive to extend a native DOM element with a custom element instead of writing our own custom element from scratch. If we think about whether we should build our own version of SSL or use an existing software for this, why would we build a clickable element based on nothing instead of altering the behaviour of an a or button element? And why would we check for resource host validation on our own, if the browser gives us an API for that? This week’s articles are all around these topics.

News

• Site Isolation effectively makes it harder for untrusted websites to access or steal information from your accounts on other websites. Chrome 67 is now shipping with it and Cross-Origin Read Blocking (CORB) will no longer load e.g. a JSON file as image. But even further, these changes mean that full-page layout is no longer guaranteed to be synchronous. This new feature affects you if you read out calculated sizes from an element in JavaScript or use unload event listeners. Ensure that you know about this and check if your sites still work as expected.

Accessibility

• Microsoft’s developer team shares a video playlist about practical accessibility, including how to optimize presentations or language for inclusion or how to build a proper “skip navigation” functionality on your website.
• Sara Novak shares how she managed to show empathy by experimenting with going colorblind to understand how other people experience the world differently.

JavaScript

• Leon Revill show us how we can extend existing native DOM elements with Web Components. This is extremely helpful and useful as we can not only save a lot of time by using prebuilt templates for custom elements but also get all the optimizations and defaults (semantics, accessibility, browser functionality) for free and still can build our own behaviour on top of it. At least, if we can use Custom Elements at all but that’s a different story.
• Gerardo Rodriguez shows how we can easily fail to optimize websites for performance with Service Workers and the Fetch API and how this can result in a quota exception in browsers. Luckily, he found out the reason of this and by setting the proper CORS headers, Gerardo finally solved the mystery of single cached opaque responses and tells us how to avoid the issues.

CSS

• Last week I already shared two articles about how we can use CSS Grid in IE. Now there’s the third part of the article series that covers how we can fake an auto-placement grid with gaps in Internet Explorer.

—Anselm