#​556 — August 24, 2022 | Read on the web

Using :has() as a CSS Parent Selector (and much more.)

Everyone seems to be tinkering with the new :has() pseudo-class and sharing the neat possibilities it unlocks. This post from Jen Simmons covers the basics of how to use it as a parent selector, and highlights some great examples of what powerful things you can do with it.

This feels like a revolution in how we will write CSS selectors, opening up a world of possibilities previously either impossible or often not worth the effort.

→  webkit.org/blog/13096/css-has-pseudo-class

JEN SIMMONS

Render Notification Tests Across All Channels [Sandbox] — Too many engineering resources are wasted on notification template building and routing rules. Pass this on to Product, Support, and Security. Heck, even if the engineers want to quickly assemble templates: use our UI or JSON based syntax, Elemental.

Courier.com sponsor

Can Browsers Optimize the Loading of Third-Party Resources? — Highlights the impact of third party resources, and the proposed approach the Chrome team is hoping to take at the browser level to protect the user experience from their potentially detrimental impact, “without reducing their business value to site owners”.

Addy Osmani (Chrome Developers)

What Makes a Great Toggle Button? — The first in a two-part case-study analyzing the characteristics of effective toggle buttons, what makes them error-proof, and how to use them whilst preventing confusion for users.

Eduard Kuric

⚡️ IN BRIEF

📙 Tutorials, Articles & Opinion

Meet the Top Layer: A Solution to z-index:10000 — With new built-in components and APIs coming to the web platform, what is this “top layer” that they enable us to use?

Jhey Tompkins (Chrome Developers)

An Introduction to Constraint Based Design Systems“Constructed and maintained with a foundation of proactive and informed communication, design systems become an incredibly powerful organizational asset.”

Cole Peters

▶  Ben Callahan on the Value of a Design System — A ~50-minute discussion exploring how to go about proving the value of a Design System and how you can pitch it effectively to stakeholders.

Smashing Magazine podcast

Build Real-Time Chat Messaging in Less Time — Explore Stream’s Chat API, SDKs, and UI by activating your free account.

Stream sponsor

How to Skew Benchmarks in Your Favor — Looks at how accidental bias are often introduced into framework benchmarks. “Always double check that you’re measuring what you think you are measuring.

Marvin Hagemeister

Inclusive User Research: Recruiting Participants — Some advice on when and how to recruit folks with disabilities for your usability tests.

Ela Gorla

When Do You Use CSS Columns? — Geoff points out that this isn’t a rhetorical question. What are some great real-world use cases for CSS multi-column layouts?

Geoff Graham

▶  How to Lower the Opacity of a Background Image with CSS
Kevin Powell

Creating Custom SVG Cursors with an Interactive Emitter Effect
Marlène Bruhat

JOBS

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

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

🔧 Code, Tools & Resources

Heroicons: Beautiful Hand-Crafted SVG Icons by the Makers of Tailwind CSS — Yup, we’ve shared this great icon set with you before, but the collection has just hit 2.0, now sporting a fresh look, a thinner stroke option, and a new 24px solid set.

Heroicons

Tota11y! — A browser utility to visualize the most common web accessibility errors on a site in a clear, understandable way. (This builds upon the original toolkit from Khan Academy)

Babylon Health

InAppBrowser: See What JavaScript Commands Get Injected Through an In-App Browser — Read the explainer here, which also has instructions on how to use the tool.

Felix Krause

With Retool, Ship Apps Fast with 90+ Production-Ready UI Components

Retool sponsor

Gradientify: A Web Based All-in-One Gradient Editor — Includes a gallery of 100+ hand-crafted gradients that you can customize or use for inspiration. Lets you save gradients in the web app, copy the CSS, or download as PNG.

Nitin Singh and Friends

Tailwindhelper: A Tool for Visualizing Tailwind Classes, Converting Units, and Finding Colors — This can be used as a reference but seems to be more useful for those just getting started with Tailwind and want to convert regular CSS to Tailwind’s utility classes.

Sebastien Graf

Puppertino: A CSS Framework Based on Human Guidelines from Apple — Compatible with most other CSS frameworks, and you can view the very Apple-like examples here. It doesn't feel quite right to us yet, but a good start.

Edgar Pérez

Ipx.