When CSS Isn’t Enough: JavaScript Requirements For Accessible Components — Stephanie Eckles looks at how components such as tooltips, modals, tabs, carousels, and dropdown menus often require more than just CSS (even when ‘pure CSS’ solutions are technically possible), especially to ensure accessibility.

Smashing Magazine

Serving Sharp Images to High Density Screens — A majority of displays now have device to pixel ratios (DPR) higher than 1 (e.g. ‘Retina’ screens) — so what’s the best way to handle images in such high-density situations? Here’s a solid look at how to do just that (covering compression, delivery, etc.)

Jake Archibald

New & Updated Course: Complete Intro to React v6 with Brian Holt — Learn to build real-world applications using modern React. Much more than an intro, you’ll start from the ground up, getting to using the latest features in React, including hooks, effects, context, and portals, plus piecing together tools from the entire React ecosystem.

Frontend Masters sponsor

?  Design for Safari 15 — Apple has shared a half hour video, along with related resources, where Jen Simmons and Myles Maxfield covered all the upcoming Safari changes we saw in last week’s WWDC keynote in more detail. Worth a watch.

Apple

Introducing Aurora: A Collaboration Between Chrome and Open-Source Web Frameworks & Tools — A new initiative that aims to “deliver the best user experience possible for production apps regardless of the browser you’re rendering in”. Early days, but this post outlines the overall goals.

Panicker, Osmani, Djirdeh (Google)

? Tutorials, Articles & Opinion

Web Design Done Well: Making Use Of Audio — Audio on the web can often be a tricky thing to get right. Here’s a showcase of sites that get it right, nailing the user experience.

Frederick O’Brien

Google Chrome Ends Its War On Address Bar URLs—for Now, At Least — Yep, it appears as though Google is abandoning plans to display a ‘simplified’ domain in the Omnibox.

Ron Amadeo

CSS System Colors — It’s not got universal support, but did you know you can use a range of keywords in CSS to set color values that are dependent on your system preferences. Jim digs in.

Jim Nielsen

An Angular Data Grid That Makes Life Easy Does Exist! Give It a Try — Get the performance, features, and UI users demand in a super customizable grid component — and enjoy the experience.

Progress Kendo UI for Angular sponsor

Three Frontend Auditing Tools I Discovered Recently — Some lesser-known tools to help you achieve a faster website.

Stefan Judis

Thumbnail Hover Effect with SVG Filters — A simple thumbnail hover effect with a caption slide out animation and an SVG filter distortion on the image.

Mary Lou

Improving Contrast in Microsoft Edge DevTools: A Bugfix Case Study

Microsoft Edge Team

Making Tables With Sticky Header and Footers Got a Bit Easier

Chris Coyier

? Code, Tools and Resources

HTTP/3 Check: See If A Server Supports HTTP/3 — Online tool to check if a server supports HTTP/3, based on the QUIC protocol, which you can read about here.

LiteSpeed

DOOM Captcha: Captchas Don’t Have to Be Boring — Just a bit of fun – even John Carmack himself liked it. Take out a few classic DOOM enemies to complete the Captcha.

Miquel Camps Orteza

Uniform CSS — A fully customizable utility-first CSS framework built in Sass.

Jin Su Park

Market: A Collection of Nearly 400 ‘CC0’ 3D Assets — …for React Three Fiber or Three.js.

Poimandres

Easy, Fast and Seamless UAT and User Feedback with Bugherd

BugHerd sponsor

Loopple: A Drag-and-Drop Tool to Create Bootstrap-Based Dashboards

Loopple

Tailwindo: Convert Your Bootstrap CSS to Tailwind CSS

Awssat

Directionally Aware CSS Buttons with React

Jhey Tompkins codepen