#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).


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.


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:

💻 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.


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.


➡️ 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