Frontend Focus

#​490 — May 12, 2021 | Read on the web

Bootstrap 5 Released — This is a big release for the ever popular CSS framework with plenty of notable changes, including new components, updated forms, RTL support, and the removal of jQuery.

Mark Otto

Can I Email..? Support Tables for HTML and CSS in Emails — It’s like Can I Use but for email clients and their varying levels of HTML and CSS support. We first linked this about 18 months ago but it’s had a bunch of updates recently.

HTeuMeuLeu

Modern Dropdowns in Angular Made Easy - A Quick Tutorial — While a vanilla dropdown is a simple HTML element, more advanced features can get tricky. In 13 minutes, you will learn how to bind data, implement autocomplete, and more using Kendo UI for Angular. No purchase required, so give it a try.

Kendo UI for Angular sponsor

A Primer on CSS Container Queries — A prototype of the long-awaited CSS container queries has now landed in Chrome Canary and is available for experimentation. Stephanie Eckles looks at how container queries work, and how they compare with and complement existing CSS features for layout.

Smashing Magazine

Next Gen CSS: @container — As above, Una takes a look at what this CSS Working Group Containment Level 3 spec property hopes to bring to the table: styling elements based on the size of their parent container. Some demos worth checking out here.

Una Kravets

⚡️ Quick bits:

📙 Tutorials, Articles & Opinion

Optimizing Web Vitals using Lighthouse — Looks at new tooling features in Google’s Lighthouse, PageSpeed and DevTools that can help identify how your site can improve on the Web Vitals.

Addy Osmani

How Web Components are Used at GitHub — GitHub has long been a proponent of Web Components with over 17 open-source components available for all to use. Here’s their story of why they use them and how they build them.

Kristján Oddsson

Counting Faces with OpenCV, Python and InfluxDB — A step-by-step guide on building a crowd control app powered with time series data. Project code available for use.

InfluxData sponsor

Web Accessibility for Newbies — Introductory information and advice on how to think about and approach web accessibility.

Karina Chow beginner

What I Learned by Relearning HTML — Thoughts on how going back to the basics can help discover ‘unknown unknowns’.

Danny Guo

Practical Use Cases For CSS Variables — Walks you through use-cases where CSS variables shine.

Ahmad Shadeed

How to Use the Vibration API on Your Site
Bibek Kakati

Auditing Design Systems for Accessibility
Anna E. Cook

Criticism Pushes The Web Forward
Hidde de Vries

How We Sped Up Chrome DevTools Stack Traces by 10x
Chrome Developers

🔧 Code, Tools and Resources

Using 'Computer Modern' on the Web — If you’ve ever read or even written an academic paper, you may have encountered the TeX typesetting system and its distinctive associated fonts. Here they’ve been packaged up in a form that you can easily use them on the Web.

Christian Perfect

Bootstarters: A Free Set of Bootstrap 5 Templates — As mentioned above, Bootstrap 5 is out now, as such here are some MIT-licensed templates. There's about 18 templates here, styled in accordance with Material Design 2.0 guidelines and built with the latest version of Bootstrap.

mdb

Need Developers? Revelo Helps You Hire Pre-Vetted Remote Devs

Revelo sponsor

Hammer: An esbuild-Powered Build Tool for HTML Applications — The idea is to a TypeScript-centric “ultra lightweight alternative to Parcel.”

Haydn Paterson

Awesome Landing Page: A Collection of Beautiful and Practical Landing Page Templates

Nordic Giant