Together with  Userfront

#​598 — June 21, 2023 | Read on the web

Modern CSS in Real Life — Chris (of CodePen fame) runs through five modern CSS concepts that “really matter to real-world development”, including logical properties, container queries, color spaces, and more. This is a real deep-dive highlighting the fast-paced changes we are seeing in CSS, with plenty of code, examples, and visuals to help things along.

Chris Coyier

The 'State of CSS 2023' Survey is Now Open — With a ton of new CSS features like :has(), subgrid, and container queries quickly gaining adoption the annual CSS survey from Devographics returns a bit earlier than usual. Here’s the announcement post explaining why you should fill it out, and some background from this year's lead survey designer, Chen Hui Jing. As always, we recommend filling it out, and we'll be sure to go through the results once live.


React Authentication — Without Complexity — Userfront streamlines authentication & access control so engineers can focus on their core business. Create signup and login forms, reset passwords, generate magic links, add SSO with Google, and more. Read the docs now.

Userfront sponsor

Cyclic Dependency CSS Variable Toggles — Paweł Grzybek calls this “one of the most mind-bending CSS articles I have read in a while” – we agree. It's well explained but CSS custom properties are twisted – nay, broken up – into new shapes that it might take a little head scratching to figure out.

Roman Komarov


📙 Tutorials, Articles & Opinion

Positioning Anchored Popovers — Popovers are commonly positioned relative to their invoker — but when using the new popover attribute, anchoring can be tricky as these popovers are placed in the top layer, away from the context of their invoker. Hidde looks at what options we have to resolve this.

Hidde de Vries

Thoughts from “Meet Safari for Spatial Computing” — The key takeaway being that when it comes to visionOS you can continue doing “what responsive web design and accessibility experts have advocated for years”, and for the most part things will ‘just work’ on this new platform.

Jim Nielsen

The New CSS — How recent tooling changes and new capabilities represent a “fundamental shift” for CSS, making it “now the most powerful design tool for the Web”.

Matthias Ott

A New Comprehensive Project Management Tool from Notion — Execute plans with speed and clarity with Notion's powerful new project management tools - the first with AI assist.

Notion sponsor

Fit-to-Width Text — An active look at how scroll-driven animations will hopefully solve the ‘fit-to-width’ text problem with just pure CSS. (See also: This collection of related demos from Bramus Van Damme.)

Roman Komarov

▶  Going Beyond Color Contrast — A quick introduction to tools that will help you automate the identification of accessibility issues beyond color contrast. There’s an accompanying blog post too.

Schalk Neethling

▶  Improving Performance for Three Million Sites — An interesting dig into how Shopify approaches performance challenges at scale.

Michael Gooding

The :has() psuedo-class selector

The :has() CSS pseudo-class now enjoys widespread browser support, and can be used across Chrome, Safari, Edge, Opera, and others (Firefox has it behind a flag for now). It lets you style an element that contains a specific descendant, defined by a selector argument, and can be used in a variety of interesting, creative ways.

📑 — Related W3C spec and MDN documentation.

❓ — :has() Can I use... stats

An Introduction to :has() — Shares how the :has() pseudo-class has far greater range than just styling an element’s ancestor.
Stephanie Eckles

Using :has() as a CSS 'Parent Selector' and More — Jen runs through the basics of how to use :has() as a parent selector with some practical examples. “This feels like a revolution in how we will write CSS selectors...
Jen Simmons (WebKit)

The Advanced Guide to the CSS :has() Selector — Rahul looks at some advanced implementations and use cases for has, including checking for multiple children, conditional decorations, and styling empty states.
Rahul Chhodde

Style Your RSS Feed — How to make your RSS feed look nice (thanks to XSLT) and provide useful information at the same time.
Darek Kay

How to Watch Transitions in Slow Motion in Chrome’s DevTools
Jim Nielsen

Six Quick Tests You Can Do to Test Your Forms for Accessibility
Karl Groves

🔧 Code, Tools & Resources

Frosted Glass — A lovely looking depth-based blur effect created with CSS. Here’s how it works, and some other examples.

Shu Ding

Motion Canvas: A TypeScript Library and Real-Time Preview Editor to Program Animations — Uses generator functions to procedurally define your animations, and you can try out the web-based editor that allows you to work with the animations visually.

Motion Canvas

SVG.js v3.2: SVG Manipulation and Animation Library — A lightweight approach without dependencies. There’s a demo on JSFiddle you can play with. GitHub repo.

Various Authors

Code Together Before You Work Together. Interview Devs in a Real IDE — Skip algorithm interviews & use CoderPad to run coding interviews that are trusted by both candidates and interviewers.

CoderPad sponsor

daisyUI: A Library of Tailwind CSS Components in Multiple Themes — Includes dozens of ready-made components that you can try out using about 20 different themes, all of which are testable live in the docs.

Redfern Dev

Threlte: A Three.js Scene Renderer and Component Library for Svelte — react-three-fiber is great, but if you prefer Svelte, this is the alternative for you. It appears to be under very active development too with a whole new version on the way soon. GitHub repo.

Grischa Erbe

Microsoft Clarity: Free Heatmaps & Session Recordings — A new, free user behavior analytics tool, that claims to be both GDPR & CCPA compliant — it helps visualize how users are interacting with your site through session replays and heatmaps. Why is it free? Curiously, MS is upfront about that.


Novel: A Notion-Style WYSIWYG Editor with AI-Powered Autocompletions — Built with Next.js, Tiptap, OpenAI (for autocomplete), and Tailwind. Try it live here.

Steven Tey

🧑‍💻 JOBS

Find Frontend Engineering Jobs with Hired — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now.