Together with  WorkOS
🚀 Frontend Focus

#​629 — February 7, 2024 | Read on the web

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...

Jen Simmons (WebKit)

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.

WorkOS sponsor

'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.

Wagner & Viscomi (Chrome)

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.

Brecht De Ruyte

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

💰 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..

Chris Coyier

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.

Chris Coyier

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.

Sentry sponsor

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.

David Swallow

🧊 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.

Jason Grigsby

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.

Tammy Everts (Speedcurve)

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.

Dave Rupert

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”.

Jakob Nielsen

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.

PostHog sponsor

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

Nikita Prokopov

How to Create Rounded Gradient Borders with Any Background in CSS
Ben Frain

How to Make External Links More Accessible
Whitney Lewis

A Guide To Designing for Older Adults
Vitaly Friedman

🔧 Code, Tools & Resources

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.

Pelin Oleg

📅 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.

William Troup

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.

Trendyol

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.

Jason Efstathiou

🕰️ ICYMI (Older links, still worth checking out)

🔎 ...Google plays 'Where's Waldo'

The Most Searched Playground is a fun 'Where's Waldo' (or Wally, if you're in the UK) game from Google. You have to uncover 25 of the most searched people, places, and moments from the past 25 years. There are some interesting choices on what to find, but the picks are all aggregated from global Google Trends data between 2004 and 2023.

Ipx.