~frontendfocus | Issue 629 - Browsers buddy up for Interop 2024 (18)

The Web Just Gets Better with Interop 2024 — Jen runs through the focus areas for the collective Interop project for this year, which include accessibility improvements, custom properties, scrollbar styling, and ironing out differences with CSS Nesting. Here's Mozilla's post on the 2024 plans, and the same from Google and Microsoft. The Web's better when we all work together...

WorkOS, the modern identity platform for B2B SaaS — WorkOS provides easy-to-use APIs for authentication, user identity, and complex enterprise features like SSO and SCIM provisioning. It's a drop-in replacement for Auth0 and supports up to 1 million monthly active users for free.

'Interaction to Next Paint' Becomes a Core Web Vital on March 12 — INP, described as a "better way to measure interaction responsiveness", will replace First Input Delay (FID) next month. Here the Chrome team shares how to prepare for this metric change, and what to expect once the change takes effect.

Getting Into Web Components: An Intro — 2024 looks like it might be a big one for web components. So, if you want to gain a deeper understanding of things this is a good place to start, as Brecht outlines some of the basics and lingo you’ll need to know.

💰 What Happened with the Web Monetization API? — This neat idea had a brief moment, but then seemed to wither away — though efforts to revive it could be on the way..

The Color Input and Color Picker — HTML has a color input that is supported across the board, but browsers can and do have different approaches to what happens when the input is used. Chris takes a look at the differences.

Intro to FrontEnd Error and Performance Monitoring with Sentry — Track, trace, debug and resolve FrontEnd errors across platforms. Are your releases that easy? Join us live.

Doing What’s Required: Indicating Mandatory Fields in An Accessible Way — Curious as to the best and most accessible method to indicate required fields? This article explains what’s required in a compliant way.

🧊 How to Embed 3D Models on the Web — How do you embed 3D models on pages without things slowing down? Jason looks at the file formats, model viewers, UX, optimizations, and proposed standards in the space.

The Psychology of Site Speed and Human Happiness — If you don’t consider time a crucial usability factor, you’re missing a fundamental aspect of the user experience, says Tammy.

Big, Beautiful, Beefy Focus States with :focus-visible — :focus-visible solves the “I want keyboard focus but not click focus” problem by treating keyboards and pointers separate.

Jakob Nielsen's 41 Years in UX: A Career Retrospective — A detailed look back from usability guru Jakob Nielsen: “my mission has remained absolutely constant for all of my 41 years in UX: make computers suitable for normal humans instead of forcing users to adapt to the technology”.

Product for Engineers: A Newsletter Helping Flex Your Product Muscle — Subscribe for free to get curated advice on building great products and best practices of top startups from PostHog.

🅇 In Loving Memory of the Square Checkbox — A brief history of checkboxes and radio buttons in user interfaces.

CSSformalize: A CSS Framework for Effortless Customization of Native HTML Forms — Offers an interactive UI to allow you to set your CSS custom properties for just about every aspect of your form, with live preview of the form elements, and optional predesigned themes.

📅 Calendar.js: A Calendar Control with Drag and Drop — A no-dependencies responsive calendar with full drag and drop support, plus lots of ways to manage events with recurring entries, exporting, holidays, and more.

Baklava: A Component Design System Based on Native Web Components — This is more of a front-end framework than a design system and all the components are using native web components, so they can easily be integrated with your existing framework.

Svelte Stepper: Build Animated Stepped Flows with Svelte — You can add and customize props on the component to easily adjust the number of steps and transition duration, among other features. Simple demo here.