Together with  Frontend Masters logo
🚀 Frontend Focus

#​637 — April 3, 2024 | Read on the web

An Interactive Guide to CSS Container Queries — This is a detailed explainer on CSS container queries, exploring the problems they solve, how they work, and how we can use them in our workflows. Lots of code and visuals to help things along too. Well worth bookmarking.

Ahmad Shadeed

Tailwind CSS: Write Efficient, Utility-First CSS — Join Steve Kinney for this detailed video course exploring Tailwind CSS. You'll build real-world components like modals, forms, and page layouts — becoming proficient in creating stunning, responsive, and maintainable UI.

Frontend Masters sponsor

Introducing Babylon.js 7.0 — This new version of the popular 3D web rendering engine is now here, adding Apple Vision Pro support, improved WebXR support, improved ragdoll physics, procedural geometry, and more.

Babylon.js

A Web Designer’s Accessibility Advocacy Toolkit — A collection of strategies and selling points to help you encourage and advocate for accessibility in your work, including useful scripts you can use as starting points.

Yichan Wang

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

Infinite-Scrolling Logos in Flat HTML and Pure CSS — Remember the long-deprecated HTML <marquee> element? If you need a horizontal auto-scrolling solution nowadays, you’ll no doubt turn to CSS. This post demonstrates one technique that uses as little HTML as possible.

Sylvester Bistrović

'In-App Browsers are Still a Privacy, Security, and Choice Problem' — The Open Web Advocacy (OWA) group wants to prevent in-app browsers from being used to “thwart competition and flout user choice”.

Thomas Claburn

Learn Modern UI Engineering with Web Components and Web Standards — 13 modules, 170+ videos, and an interactive learning app guide you from novice to expert with the latest web standards.

Blue Spire sponsor

How to Kill the Cascade — “We’ve always needed local resets. And now, with the magic of @scope and all: revert-layer;, we finally have them.

Robin Rendle

▶  Keyboard Interactions — Here's a roughly 15-minute talk covering the technical aspects of measuring keyboard interactions in Chromium and how they affect the Interaction to Next Paint metric.

Patricija Cerkaite

The Curious Case of the CSS Monochrome Media Query — This is a little known media-query feature designed to target e-ink devices (such as e-readers), but it seems a tad unloved right now in terms of real-world utilization.

Stephanie Stimac

Why I Care Deeply About Web Accessibility And You Should Too — A web accessibility evangelist makes the case.

Schalk Neethling

The Power of :has() in CSS
Chris DeMars

How to Optimize Cumulative Layout Shift (CLS) on Shopify Sites
Sia Karamalegos

Everything You Need to Know About Captioned Videos
Sumner Davenport

🔧 Code, Tools & Resources

Cally: Small, Feature-Rich Calendar Components — A collection of open-source calendar components for selecting single dates or date ranges. Framework-agnostic, themeable, localizable, and accessible. Repo here.

Nick Williams

Atlassian's Pragmatic Drag and Drop Framework — A performance-focused drag and drop library that can be used to power experiences on any frontend stack. There’s a live demo on the page along with ▶️ a recording of a talk by Alex Reardon walking through the motivations for creating it and how it works.

Atlassian

🎹 Fast, Reliable, Multi-Format Barcode Scanning for Web Apps with STRICH — Reliably scan barcodes in your web app! Easy integration, free demo app and free 30-day trial.

STRICH sponsor

Journey.js: A Zero-dependency Library to Create Interactive & Accessible Guided Tours — The live examples are fairly rudimentary, but the focus on accessibility and built-in support for 51 languages are pluses.

William Troup

DOM3D.js: A 3D DOM Viewer in a GitHub Gist — Some code you can copy and paste into your browser console to get a 3D view of the DOM – sort of (move your pointer to navigate the monstrosity it creates). The effect is very odd at first, but it’s fun to try.

Orion Reed

<relative-time> 4.4: Format Timestamps as a Localized Relative Time — Supply this web component with a standard formatted date and time and it’ll render the right text to suit.

GitHub

magick.css: A Minimalistic, Mostly Classless CSS Framework — See it in action on the author’s website here. It has a ‘brutalist’ look (helped by the font choice) and is inspired by similar ‘classless’ frameworks you may have seen in recent years.

Julius Kawatziklis

Ipx.