WDRL — Edition 246: Custom Elements News, React lazy Method, The `prefers-color-scheme` Media Query And Human Customer Support

Celý článek

Hey,

The web is fascinating. Just when you think there’s not much news happening right now you’re proved wrong. This week brings massive news for how we can work with Custom Elements given the very good fresh support in Firefox (along with Chrome which has support since a while already) and some nice new libraries that help us write better Custom Elements despite some browser inconsistencies. The whole Custom Elements and Shadow DOM API fascinates me as it’s a niche topic and very unknown and underused yet in the community but very powerful and could change the ways we built components drastically. I’m still a bit sad that until now I haven’t found the time to play around with it and implement a custom element in one of my projects — I already have some ideas where this would be very useful. Maybe during Winter, I’ll find some time for this. Do you have such a topic that fascinates you as well but haven’t got to play with it yet? If you want, let me know and just reply or write me a Tweet, Mastodon, or Email.

News

• Yes, Firefox 63 is there but what does it bring? First, it brings Web Components support including Custom Elements with built-in extends and Shadow DOM. Then, prefers-reduced-motion media query support is available now, and Developer Tools now have a font editor to try out and play with web typography easier and the accessibility inspector is enabled by default. The img element now has decoding attribute support which can get sync, async, or auto values to hint the preferred decoding timing to the browser. Flexbox got some improvements as well and now has support for gap (row-gap, column-gap) properties. We now also get the Media Capabilities API, Async Clipboard API, and the SecurityPolicyViolationEvent interface which allows sending of CSP violations. Wow, what a release!
• React 16.6 is out — that doesn’t sounds very big news, does it? Well, this minor update brings React.lazy(), a method you can use to do code-splitting by wrapping a dynamic import in a call to React.lazy() — a huge thing for better performance but there are also a couple of other useful new things in the release.
• The latest Safari Tech Preview 68 brings <input type="color"> support, changes the default behaviour of links that have target="_blank" which now gets the rel="noopener" as implied attribute. It includes the new prefers-color-scheme Media Query which allows developers to adapt websites to light or dark mode settings of macOS.

HTML & SVG

• Andrea Giammarchi wrote a polyfill library for Custom Elements that allows us to extend built-in elements in Safari. This is super nice as it allows us to extend native elements with our own custom features, something that works in Chrome and Firefox already and now there’s this little polyfill for other browsers as well.
• Custom elements are still very new to the web and browser support varies quite a lot. That’s why this html-parsed-element project is useful as it provided a base custom element class with a reliable parsedCallback method.

JavaScript

• Leonardo Maldonado provides a nice collection of JavaScript concepts that are very useful to know for developers. The list includes a couple of videos and useful articles around the topic so you can choose your preferred way of learning about it.

Work & Life

• Kristin Aardsma shares why it’s so valuable to rethink how customer support works and to ensure you’re providing human support and let your customers know that this is not handled by robots.

—Anselm