What are the web's pain points?

#459 — September 23, 2020 Web Version Frontend Focus PDF: The MDN Browser Compatibility Report — This detailed write-up dives into what the current pain points are when it comes to browser support, testing, and compatibility, and what can done to improve things (no surprise to see having to support IE 11 on top here). Mozilla Accessible Web Animation: The WCAG on Animation Explained — Based on the recommendations of the Web Content Accessibility Guidelines, Val Head outlines both the strategic and tactical things we can do to create accessible animated content and interactions. CSS-Tricks Virtual Square UnBoxed 2020 — Learn how Square developers and partners are helping today’s business owners adapt. See how the Square platform is being used for stability and survival, and get inspired by innovative solutions to this year’s unprecedented challenges. Square sponsor Finding The Root Cause of a CSS Bug — Highlights the importance of finding the source of a bug, with plenty of examples and how to solve them from the ground up. Ahmad Shadeed Vital Web Performance — “with so many asynchronous patterns in use today, how do we even define what ‘slow’ is”... Well, various new ‘Web Vitals’ metrics are meant to define just that. Here’s an explainer, covering the various implementations and requirements for each. Todd Gardner ⚡️ Quick bits: Cloudflare is now working with the Internet Archive to automatically archive certain content to the Wayback Machine. Firefox is currently working on a tabbing order accessibility feature. Feedback wanted. Microsoft's Erica Draud runs through the latest developer tool improvements you can expect in Edge. Version 81 of Firefox landed yesterday, not much to speak of in way of notable developer changes. But the consumer-facing release notes include details on new Credit Card saving and PDF filling features. Working with PWAs? This Service Worker Detector browser extension for Safari may prove handy. The Microsoft Edge team have introduced new APIs for dual screen and foldable devices. Version 10 of the Tor Browser is out now. Catchpoint have acquired performance monitoring tool Webpagetest. 💻 Jobs Stream Provides APIs for Building Activity Feeds and Chat — Stream is looking for a highly motivated Django/Python developer to seamlessly connect various API-driven platforms with the Stream ecosystem. Stream Find a Job Through Vettery — Create a profile on Vettery to connect with hiring managers at startups and Fortune 500 companies. It's free for job-seekers. Vettery ➡️ Looking to share your job listing in Frontend Focus? More info here. 📙 Tutorials, Articles & Opinion Web Design and Carbon Impact — Ponders how we, as web professionals, can help to make the web more energy efficient, and offers some high-level solutions. Carl MH Barenbrug Goodbye Comments, Welcome Webmentions — Webmentions are an open standard, currently a W3C recommendation, for showing ‘reactions’ to things on the web — kinda like pingbacks. Here’s how they work, and how to use them. Chris Bongers 13 Ways to Improve Front End Security and Not Get Hacked — We interviewed seven security experts to find out about the most common front end vulnerabilities. Shopify Partners sponsor An Overview of Content Delivery Networks (CDNs) — Explains how to choose, configure, and optimize a CDN setup in order to improve site performance. Katie Hempenius Tools Should Not Only Be for Experts – They Should Turn Us Into Them — “I think it is high time we moved away from the concept of ‘tools for experts’ towards one of ‘using this tool over time makes you an expert’.” Christian Heilmann Learning About CSS 3D Transforms and Perspective — A couple of demos and resources to help you pick up working with 3D in CSS. Michelle Barker ▶  Writing Even More CSS with Accessibility in Mind Manuel Matuzović Changing Emoji Skin Tones Programmatically Adam Davis 🔧 Code, Tools and Resources ComicA11y: An All Inclusive Online Comic Experiment — An experimental project exploring how to add a slew of accessible options to the typical web comic reading experience, including translations, high contrast, captions, and more. Paul Spencer filters.css: A CSS Library to Apply Color Filters — Just drop in the stylesheet the appropriate class (e.g. “opacity-5” to an image to achieve a variety of effects (blur, grayscale, contrast, invert, saturate, and more). Jiten Bansal Vime: A Customizable Media Player Built with Web Components — If you need to put together a standards compliant media player and just want a single API to worry about while supporting numerous video providers, this is for you. Frameworks like React, Vue, Angular and Svelte have also been thought about and it integrates with them too. Rahim Alwer player.html: A One-File Drop-in Video Player Web App — This is interesting. Just drop the HTML file in a directory with MP4 files and directory listing (i.e. “Index of…”) will use the the drop-in video player to play the files. Paul Ellis Blacklight: A Real-Time Website Privacy Inspector — Given a URL, Blacklight scans for and reveals specific user-tracking technologies on the site and who’s getting that data. Surya Mattu Spectre.css: A Lightweight, Responsive and Modern CSS Framework — Includes a slew of attractive components along with some features for typography and flexbox-based layouts. Yan Zhu CSS Xbox Series S — Shh, the new Xbox is sleeping. Tap the console to wake it in this fun little animated Codepen demo, complete with a start up sound effect. Jhey Tompkins codepen

by via Frontend Focus