Frontend Focus

#​532 — March 9, 2022 | Read on the web

Browser Vendors 'Working Together on Interop 2022' — A new collaboration from Apple, Bocoup, Google, Microsoft, Mozilla and others to improve interoperability of (mostly visual) web technologies. There’s a dashboard here showing how various browser engines are doing across all focus areas.

Jen Simmons (WebKit)

Say Hello to <selectmenu>, a Fully Style-able select Element — An introduction to this new, experimental form control called selectmenu, including how much easier it is to style than a traditional element.

Patrick Brosset

Filestack File Uploader & File Upload API — Advanced features include OCR, virus scanning & more. Get started with a free account.

Filestack sponsor

Taming CSS Variables with Web Inspector — CSS Custom Properties, better known as CSS variables, have been widely adopted by web designers to build reusable and configurable design systems. This post looks at how features in Safari’s Web Inspector helps you work with them.

Razvan Caliman

A New Speed Milestone for Chrome — How the ‘M99’ release of Chrome saw substantial increases to the speed of Chrome across all major platforms. "Overall, since launching Chrome on M1-based Macs in late 2020, Chrome is now 43% faster than it was just 17 months ago!"

Max Christoff (Google)

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Building Web Layouts for Dual-Screen and Foldable Devices — Explores how dual screens provide an opportunity to get ‘even more creative on the web’, and what APIs are available to make such support a reality.

Stephanie Stimac

Five Web Things You Don't Need JavaScript For — We love JS, but CSS and SVG have progressed enough to replace some traditional JS use cases.

Steven Waterman

▶  Is HTML a Programming Language? — A six-minute video that very much answers: yes, yes it is, in spite of being a perennial debating point amongst developers.

Webbed Briefs

Dynamic Charts Based on Data Selection in Angular — Users want to generate their own charts? See how easy it can be with Kendo UI for Angular.

Kendo UI for Angular sponsor

Enhancements to the Ubiquitous 2D HTML Canvas — Canvas is heavily used around the web in its Canvas2D guise (said to be up to 40% of pages, apparently?) and this post looks at some of the newer features and enhancements being made to it.

Aaron Krajeski (Google)

How to Build a File Upload Service with Vanilla JavaScript — Building a file upload service with vanilla JavaScript, from scratch, with a method that requires no npm packages and no dependencies.

Pankaj Tanwar

Creating Native Web Components — Looks at how to create native web components using the Minze JavaScript framework.

Sergej Samsonenko

An Auto-Filling CSS Grid with Max Columns of a Minimum Size
Mike Herchel

Seven Ways to Achieve a Faster Core Web Vitals Score
John Lewis

How to Make a “Raise the Curtains” Effect in CSS
Silvestar Bistrović

Jobs

Frontend Developer at X-Team (Remote) — Join the most energizing community for developers and work on long-term projects for Riot Games, FOX, Sony, Coinbase, and more.
X-Team

Senior React Engineer @ Nebulab (Remote) — Join our distributed team and build high-volume eCommerce applications in a workplace made by developers for developers.
Nebulab

Work Remotely Forever — When you join Toptal, you get the freedom of freelance with the security of full-time. Take control of your career today.
Toptal

🔧 Code, Tools & Resources

A11yAutomation: A More Thorough Way to Track Potential Accessibility Violations — Not exactly a single tool, but more of a one-stop guide where you can look up specific accessibility errors on your pages, along with a small list of testing tools.

Melanie Sumner

loading-attribute-polyfill: A Lightweight Polyfill for Native Lazy Loading — Support for loading="lazy" is decent for use on regular images, but this will fill the gaps on srcset, picture, and iframe elements.

Maximilian Franzke

Reveal.js 4.3: An HTML Presentation Framework — Brings elegant presentations to anyone with a Web browser. v4.3 just came out with a few tweaks.

Hakim El Hattab

Project Management for Today's (And Tomorrow's) Software Team

Shortcut (formerly Clubhouse.io) sponsor

UI Colors: A Tailwind CSS Color Shades Generator & Editor — Pick a color or generate one randomly and this tool will allow you to export a palette derived from the selected color in various formats you can use in Tailwind projects.

Erik Vries

gsap-video-export: Export GreenSock (GSAP) Animation to Video
Chris Johnson