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.

Devographics

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

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

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.

Microsoft

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