CSS Style Queries — Ahmad closes out his “best year ever for CSS” with a detailed look at the proposed CSS container style queries spec (currently behing a flag in Chrome Canary) — they’ll let us query the style of a container, rather than the size only. A deep dive into a new feature like this is always welcome.

Ahmad Shadeed

Help Choose the Syntax for CSS Nesting, Again — The CSS Working Group is continuing a debate (which we touched upon earlier this summer) over the best way to define nesting in CSS, with two more options now proposed. You can see what's being put forward here, and then vote for which you feel is best.

Jen Simmons (WebKit)

The Developer’s Guide to Notification Management Systems — So your CTO has just handed you a project to revamp your product’s notification system adding new channels and sophistication. What are the best practices?

courier.com sponsor

Apple, Google, and Mozilla Teaming Up to Make a Next-Gen Browser Benchmark — Called Speedometer 3, this benchmark will measure how browsers perform with the latest web tech that our sites may be using.

Mitchell Clark (The Verge)

Interop 2022: An End of Year Update — A review of the progress made by browsers this year, and a look over some of the headline features that have become interoperable during 2022.

Rachel Andrew

Four Ways CSS :has() Can Make Your HTML Forms Even Better — Shares a look at how the :has() pseudo-class can improve HTML forms through validation hints, conditional content, fancier designs, and more.

Austin Gil

Professional Scheduling Components for React, Vue, Angular Apps — Schedule doctors, machines or your next trip to Mars. Easily done with the Scheduler Pro widget. Free 45-day trial.

Bryntum Scheduler sponsor

Pixel Accurate Atkinson Dithering for Images in HTML — This is quite the throwback admittedly, but if you liked the look of images processed with Atkinson-style dithering (that’s the algorithm used on the original Apple Macintosh) then here’s a way to recreate it.

Andrew Stephens

A :nth-child(An+B [of S]?) Polyfill Thanks to CSS :has() and :not() — Bramus shows us that the :has() selector is way more than just a “parent selector” with this interesting bit of experimentation.

Bramus Van Damme

Logical Border Radius — Do you struggle to remember the shorthand for border-radius? You’re not alone.

Michelle Barker

Storybook 7.0 Enters Beta — This is the first major version of this popular frontend UI development tool in nearly two years (so expect breaking changes here). Plenty of new, including a performance overhaul, interaction testing, and much more — see the full changelog here. You can try the beta now, with a migration guide here too.

Storybook

neodrag: Lightweight Multi-Framework Libraries for Draggability on the Web — This drag-and-drop solution includes packages for React, Svelte, Vue, Solid and vanilla JavaScript.

Puru Vijay

🕑 ClockFace: An Icon Font for Displaying the Time — The icons display different times at 5-minute intervals on a 12-hour clock face in 12 different icon styles.

Jason Milkins

Don’t Let Your Issue Tracker Be a Four-Letter Word. Use Shortcut

Shortcut (formerly Clubhouse.io) sponsor

Spruce CSS: A Minimal, Modern CSS Framework Built with Sass — Somewhat opinionated in its style guide and practices, and includes a modest set of components for typography, tables, buttons, forms, and media.

cone development

octaValidate: Tiny Script Helps to Validate Your HTML Forms — The functionality is based on validation rules, some sophisticated regular expressions, and form input attributes.

Simon Ugorji

Remix Page Blocks: A Block Editor for Components Built with Remix and Tailwind — Try the editor here and there’s instructions to install and run it locally.

Alexandro Martínez

👀 watching-you: A JavaScript Library for Building Animations That "Watch" Anything in The DOM — In other words, you can create an effect where an element on the page (like a set of eyes) follows the mouse around, or an element can “watch” another animated element on the page. See examples here.

Ryan Chu

🔎 PixelZoomer: A Chrome Extension That Provides Tools for Pixel Analysis on a Page — Takes a screenshot of the current page, allowing you to zoom in up to 3200%, measure things on the page, use an eye dropper to grab colors, and more.

Matthias Schuetz

flatuicolorpicker: Color Tools and Palettes for Inspiration — This tool lets you generate palettes in different categories: By color, color model, mood, and “industry”, which shows you colors associated with specific business types (banking, beauty, etc).

Vasilis Baimas

Box Shadows: 20+ Beautiful Box Shadows for Tailwind CSS

Manu Arora