Now Decided: The Syntax for CSS Nesting — If you were one of the 7,590 developers who responded to a recent survey helping to direct the CSSWG in picking a syntax to go with for standard CSS nesting support, give yourself a hearty pat on the back – a decision has now been made. “Such a large split was not estimated but is relieving to the discussions.”

Adam Argyle

The Web’s Next Transition — The web is made up of technologies and architectures that got started over 25 years ago and, to a large extent, have organically grown over time. Now, Kent takes a detailed look at the transition to new and improved architectures (progressively enhanced SPAs) for building web applications, and how changes to multi-page apps are coming about.

Kent C. Dodds

11 Angular Training and Learning Resources — Angular has one of the best communities out there. So if you want to get started, it’s easy to find quality training resources. Here are 11 of the best!

Progress Kendo UI for Angular sponsor

Performance Budgets: The Easiest Way to a Faster Site — Until you set specific goals, it’s not clear what metrics you want to improve, or how you’ll do it. This post looks at just how to set performance budgets in order to meet and maintain speed goals.

Karolina Szczur

Sustainable Web Development Strategies Within an Organization — Climate change and sustainability are increasing concerns for those working in tech — this article explores some of the ways to raise awareness and effect change within an organization, to create a more positive environmental impact.

Michelle Barker

Delightful UI Animations with the Shared Element Transitions API — We shared part one of this two-parter last week. This time Adrian shows us how to create same-document page transitions for Single Page Apps and their future potential for creating cross-document transitions in Multi-Page apps.

Adrian Bece

Layout Breakouts with CSS Grid — Extending elements beyond the content area with CSS Grid and named grid lines.

Ryan Mulligan

Register for Unblock 2022 - A CI/CD Conference by Buildkite — A free 2-day virtual conference featuring industry experts from companies like Retool & Twilio who are defining the future of how we continuously deliver software.

Buildkite sponsor

New Patterns for Amazing (Web) Apps — This blog post announces a new collection of patterns for apps, including clipboard patterns, file patterns, and advanced app patterns.

Thomas Steiner

Practical Uses of the :has() Relational Pseudo Class — Demos of what you can do with the :has() pseudo class (which lets you select elements with children matching a supplied sub-selector) from grid layouts to validating forms.

Brecht De Ruyte

Dracula UI: A 'Dark Mode-First' Collection of UI Patterns and Components — The components are built for dark mode, available in HTML and React, and can be used for prototyping via a configurable design system and using VS Code snippets.

Netto Farah & Zeno Rocha

Shoelace: 'A Forward-Thinking Library of Web Components' — A collection of well designed every day UI components (buttons, drawers, inputs, menus, color pickers, and more) built in a framework agnostic way. We linked to a handy introduction to Shoelace earlier in this issue :-)

Cory LaViska

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

Shortcut (formerly Clubhouse.io) sponsor

Check HTML Links: A Fast Checker for Broken Links and References — An npm package you can run on static pages to find broken links in href, src, and srcset, and can process 500-1000 (local) documents in just a few seconds. If you already have npm installed, you could try it with npx check-html-links . from a folder of HTML files.

Modern Web

Tailwind CSS Hyphens: Plugin That Adds Support for the hyphens Property

Vivian Guillen

Typography Combination Inspirations — Here’s a large collection of the font combinations used across some of the biggest sites on the web.

Jesco Wüster