Together with  Fusion Auth
🚀 Frontend Focus

#​639 — April 17, 2024 | Read on the web

Anchor Position Tool — CSS anchor positioning is on the way, and one rather neat layout mechanism that’s part of the spec is inset-area. This (Chrome Canary only) demo from Una demonstrates how it works. It’s super early days for this (you can see the draft spec here) but it should prove rather powerful once widely available.

Una Kravets

iOS404 — An overview of all of the missing web features in iOS. There’s over 60, and some of the missing features may surprise you (many are over a decade old).

Shalanah Dawson

Auth for Every App — The best frontend developers deserve the best auth service. Add MFA, SSO, biometrics and advanced threat detection with just a few clicks. Find out for yourself using our easy quickstart guides (there may even be a t-shirt to sweeten the deal).

FusionAuth sponsor

Modern CSS Patterns in Campfire — Advancements in CSS, such as :has(), oklch(), and others allow developers to replace client- and server-side code with CSS properties, enabling behavior that was previously difficult to impossible, all without a framework.

Jason Zimdars (37signals)

Optimizing WebKit & Safari for Speedometer 3.0 — Speedometer 3.0 was introduced back in March, and now this post looks at what positive results the optimizations have bought about for Safari.

WebKit

⚡️ Quick Links

▶  New in Chrome 124: setHTMLUnsafe, Streams in WebSockets, & More — Plus here's a run down of what's new in DevTools for Chrome 124 too.

Pete LePage (Chrome for Developers)

🗓️ Building Interactive Docs with the WebContainer API and StackBlitz SDK — Join StackBlitz's live stream later today on building interactive developer documentation.

StackBlitz sponsor

📙 Tutorials, Articles & Opinion

CSS in React Server Components — An exploration of compatibility issues between React Server Components and CSS-in-JS libraries like styled-components, including what some of your options are and what’s coming in future.

Josh W Comeau

Gap is the New Margin — Chris highlights how the use of the margin property is now on the decline, slowly.

Chris Coyier

What if You Had Real Control Over Light Mode / Dark Mode on a Per-Site Basis? — Bramus thinks that a dark mode toggle should be a browser-level feature, and notes that thanks to the Web Preferences API, that might become a reality someday.

Bramus Van Damme

Learn Modern UI Engineering with Web Components and Web Standards — 13 modules, 170+ videos, and an interactive learning app guide you from novice to expert with the latest web standards.

Blue Spire sponsor

Displaying HTML Web Components — A brief look at using display: contents to work around the issues with support for the is attribute in HTML.

Jeremy Keith

Things That Can Break aspect-ratio in CSS — Three things that may break, or cause unexpected results, when using the aspect-ratio property.

Chris Coyier

CSS Text Fragment Selector (Please) — What could syntax for a CSS selector to jump to and highlight a block (or more) of text look like?

Remy Sharp

Some DevTools Tips and Tricks — Most devs barely scratch the surface of what DevTools can accomplish, says the author, who shares ten tips here.

Pankaj Parashar

My Favorite Animation Trick: Exponential Smoothing — Something as small as tweaking the acceleration curve of a UI element’s animations or scrolling can have a striking end result.

Nikita Lisitsa

5 Ways Cookie Consent Managers Hurt Web Performance (& How to Fix Them)
Cliff Crocker

How to Think About HTML Responsive Images
Dan Cătălin Burzo

🔧 Code, Tools & Resources

Classnames: Find Inspiration for Naming HTML Classes, CSS Properties, or JS Functions — This little resource is ostensibly to help with the common ‘naming things is hard’ problem in programming, offering thematically grouped lists of words with direct links to their meanings.

Paul Robert Lloyd

SVG Encoder: A Simple Tool to Convert SVG Into Different Formats, Ready for Use in CSS and HTML — The formats are things like URL encoded, Base64 encoded, optimized as a one-liner, no transforms, and other variations of those.

Andy Pearson

CSS Gradients: A Gallery of 275 'Click-to-Copy' CSS Gradients — Includes quite a few unique examples (i.e. not just two-color gradients) that you might find useful or simply for inspiration.

CSS Pro

Layer Cake: A Graphics Framework for Svelte — This library gives you a baseline for creating responsive web graphics via common elements (e.g. a coordinate system and scales). See numerous example components here.

Layer Cake

component-template: A Starter Project for Kicking Off a New Web Component
David Darnes

SaaSKits: A SaaS Boilerplate Built with Remix, Stripe, Prisma and Resend
SaaSKits

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

Ipx.