Web Push for Web Apps on iOS and iPadOS — iOS and iPadOS 16.4 beta 1 comes with support for Web Push for home screen web apps, the badging API, screen wake lock API, and more. It’s now possible for a web app to send home screen push notifications to users with the Push API, Notifications API, and Service Workers all working together.

Eidson and Simmons (WebKit)

React Authentication, Simplified — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications.

Userfront sponsor

Do We Need CSS flex-wrap Detection? — A considered explainer as to why flex wrapping detection in CSS would be handy, along with some use-cases highlighting the potential benefit.

Ahmad Shadeed

Last Baseline Alignment — Alignment using the first and last keywords is now available in all major engines. This means that we can use last baseline alignment as another option when aligning groups of flex or grid items.

Rachel Andrew

A Step-By-Step Guide to Building Accessible Carousels — Most carousels come with some usability and accessibility issues. This article addresses such problems with step-by-step design considerations as well as semantic requirements for carousels to be accessible.

Sonja Weckenmann

How To Optimize Resource Loading With Priority Hints — Speed up your website by assigning a priority to your requests, for example to load a hero image earlier.

DebugBear sponsor

The User Activation API — As a web developer, you’ve probably noticed that certain APIs only work if an end-user clicks or taps on an HTML element. Well, the UserActivation API can help determine if it’s OK to call a function that depends on user activation, as explained here.

Marcos Caceres (WebKit)

Using Focal Points, Aspect Ratio & Object-Fit to Crop Images Correctly — A look at using CSS to crop images whilst ensuring the focal point stays in place.

Henry Desroches

(255,255,255) is the Highest Specificity — An exploration of how browser engines store specificity and what, if any, its limits are. This is not something you’ll likely run up against in practice, and if you do the author urges you “to stop writing bad CSS selectors like that”.

Bramus Van Damme

Use a MutationObserver to Handle DOM Nodes that Don’t Exist Yet — Comparing the effectiveness of the MutationObserver API with the conventional method of constantly checking for the creation of nodes.

Alex MacArthur

CSS Doodle: A Web Component for Drawing Patterns with CSS — A Custom Elements-based component that builds an internal grid of DIV elements and then populates them using CSS to create patterns. GitHub repo.

Yuan Chuan

ScrollTrigger: Let Your Page React to Scroll Changes — Triggers classes based on the current scroll position. So, for example, when an element enters the viewport you can fade it in.

Erik Terwan

No SVG, No Image, CSS-Only Fluid Slider with input[type=range] — This is an impressive CSS demo, showcasing an animated, color-changing slider. Browser support for certain features used (such as color-mix) is limited.

Ana Tudor Codepen

Kobalte: A UI Toolkit for Building Accessible Web Apps and Design Systems with SolidJS — The components are unstyled and follow WAI-ARIA authoring practices. You also have granular access to each component part, allowing you to add event listeners, props, etc.

Kobalte

Unicopy: Copy Unicode Characters and Symbols — There are lots of these types of sites but you might like this one because it has only the basics, divided into five categories.

Magnus Hvidtfeldt