#​552 — July 27, 2022 | Read on the web

 Help Pick a Syntax for CSS Nesting — If you’ve used SCSS or Less then you’ll be familiar with the benefits of nesting CSS selectors. An official version of this idea is now being strongly considered, but there’s a split in preference between two competing approaches. Can you help determine which should be championed through to a specification candidate?

Adam Argyle & Miriam Suzanne (Google)

<article> and <section>: How To Choose the Right One — Looks at how grouping content affects accessibility and shares a mental model to help you decide between the <article> and <section> elements when writing documents.

Olushuyi Olutimilehin

Want to Dive Deeper into Stories of the Software Industry? — The Stack Overflow Podcast hosts conversations with fascinating guests about how technology is made and where it’s headed. It’s the best place to learn about what’s happening in the world of software development today.

Stack Overflow sponsor

'I Regret My $46k Website Redesign' — An engaging story walking through the unfortunate mistakes made when working with a design agency, plus some takeaway lessons to avoid making such missteps again. (Although, curiously, he thinks the redesign did improve sales.)

Michael Lynch

Hello: A Search Engine for Developers — An impressive new search engine that uses AI to solve challenging technical queries, with results sourced from various developer resources. It can even try and generate a code snippet ‘answer’ for you on-the-fly.

Hello Cognition


📙 Tutorials, Articles & Opinion

▶  Understanding CSS :has() — An 11-minute explainer video from Eric on the :has() pseudo class, showing its variety of uses and techniques. He quipped on Twitter that “I didn’t even scratch the paint on the surface of what’s possible. There is so much awesomeness ahead of us!”

Eric Meyer

Priority Hints - What Your Browser Doesn’t Know (Yet) — Currently available in both Chrome and Edge, Priority Hints are a recent browser feature that give devs the option of signaling relative load-time priorities of significant page resources. Here’s a look at how online giant Etsy has gotten on with implementing the feature (including a 4% decrease in Largest Contentful Paint).

David Ross (Etsy)

How to Make Your Multilingual Website Suitable for RTL with only HTML and CSS — Making a multilingual website? Here are four knowledgeable things to make your website suitable for RTL and LTR languages with just HTML and CSS.

Declan Rek

With :focus-visible, You Can Have Focus Styles When It Makes Sense — On why :focus-visible is more than a way to target keyboard users only.

Hidde de Vries

The Frontend to Your Professional Network

Polywork sponsor

How to Build Seamless Masonry Layouts with CSS Grid and object-fit:cover
George Martsoukos

Faster WordPress Rendering with Three Lines of Configuration
Stoyan Stefanov


Sr Frontend Developer For a VA.gov Team (Remote) — Use React to improve Veterans’ access to healthcare & benefits at VA.gov. We work on meaningful problems with productive stacks.

Find Frontend Engineering Jobs with Hired — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers.

🔧 Code, Tools & Resources

Flexbox Playground: Interactively Explore Flexbox — Sometimes these kinds of learning tools are a bit complex to figure out, but this one has a simple UI for editing the various properties to help you either brush up on your flexbox skills or figure out an approach for your next design.

two beards

Impress.js 2.0: Create Presentations with CSS and HTML — This popular ‘Prezi-like’ presentation framework makes clever use CSS transforms and transitions — and it just hit version 2.0.


Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut — The best issue tracking software is one that software developers are actually happy to use.

Shortcut (formerly Clubhouse.io) sponsor

Resource Hint Validator: A Tool To Check if Resource Hints Are Working Correctly — This refers to HTML features like dns-prefetch, preconnect, prefetch, and so on.


🎆 Fireworks.js 2.0: It's Literally Fireworks for Your Web Page — In a visual sense at least! The homepage has a neat demo where you can dynamically play around with all of the library’s parameters.

Vitalij Ryndin

TanStack Table v8: Headless UI for Building Tables and Datagrids — Handles the hard work of managing table/data grid elements, but lets you keep 100% control over markup and styles.

Tanner Linsley

Atropos: Create Touch-Friendly 3D Parallax Hover Effects — Use with plain JS, React, or Vue and it’s easy to configure with no dependencies. The home page includes some quite striking examples that aren’t as over the top as you’d expect.

Vladimir Kharlampidi


react-simple-maps 3.0 – Beautiful React SVG maps.
hls.js 1.2 – HTTP Live Streaming with support for MSE.
PixiJS 6.5.1 – Fast 2D graphics with WebGL.
CSS Doodle 0.29 – Web component for drawing patterns with CSS.
Sakura 1.4.1 – Minimal classless css framework/theme.
Chart.js 3.8.2 – Simple Canvas-based charting.
Font-Awesome 6.1.2 – The iconic SVG, font, and CSS toolkit.