~frontendfocus | Issue 637 - Getting to grips with container queries (18)

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.

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.

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.

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.

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.

'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”.

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.

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

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

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.

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

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.

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.

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

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.

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

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.