Together with  Userfront
🚀 Frontend Focus

#​628 — January 31, 2024 | Read on the web

Apple's Big Changes to iOS, Safari, and the App Store in the European Union — Sweeping changes are on the way for users of iOS, Safari, and the App Store in the EU, though developers worldwide will need to be aware of the changes too. Of particular note to frontend developers will be the introduction of alternative browser engines (i.e. non-WebKit powered browsers) starting with iOS 17.4. However, it isn't all going to be plain sailing...

Apple

Mozilla Says Apple’s New Browser Rules are “As Painful as Possible” for Firefox
Emma Roth (The Verge)

✨ This is still a developing story, but Jason Grigsby has a roundup of what you need to know about the alternative browser engine support. Dave Rupert has also shared his initial thoughts.

Auth Without Complexity — Auth In a Straightforward Platform — Userfront streamlines authentication & access control so engineers can focus on their core business. Create signup and login forms, generate magic links, add SSO with Google, and more — all from a streamlined dashboard. Read the docs now.

Userfront sponsor

Web Components in Earnest — A great walk through the journey behind building an app using Web Components and JavaScript — the author really shows off the realities of going all in with Web Components. The example app is simple, but complete all the same.

David Bryant Copeland

Highlight Text When a User Scrolls Down to That Piece of Text — Here’s how to create a neat animated text highlight effect that triggers based on a scroll-driven CSS class. No JavaScript required.

Chris Coyier

⚡️ Quick Links

đź“™ Tutorials, Articles & Opinion

CSS Blurry Shimmer Effect — Yair shares a step-by-step explanation of how this curious blurry shadow effect comes together, using a combo of masks, gradients, and the backdrop-filter property. CodePen demo.

Yair Even Or

Going Beyond Pixels and (r)ems in CSS - Relative Length Units Based on Font — Brecht invites us to take a little journey with him in to “the wonderful world of <length> units in CSS".

Brecht De Ruyte

Improving Enterprise Design Systems — Live stream for design system builders and users: How can we make working with design systems more seamless?

StackBlitz sponsor

A Configurable Switch using Modern CSS Techniques — Leaning on techniques such as :has(), container queries, logical properties and custom properties.

Andy Bell

▶  Debugging Fetch Priority — A quick talk about the Large Contentful Paint metric, and how to improve it with the Fetch Priority API.

Chrome for Developers

▶  The Evolution of Page Speed — A ~20-minute look at what Page Speed is, how we manage and optimize it, how it has changed over time, and what 2024 may have in store.

Matt Zeunert (DebugBear)

The Coding Train — Eric Meyer recently put this on my radar — it’s an ongoing, delightful beginner-friendly learning resource, covering things like WebGL, JavaScript, ML, APIs, and more. Plenty of challenges to take on, and great videos to follow along with. (Sidebar: how fun is the branding here?)

Daniel Shiffman

'Please, Don’t Force Me to Log In' — “The current accelerating trend of requiring accounts and logins for everything has to stop”.

Juha-Matti Santala

The Web Accessibility Framework for Organizations — A resource explaining this new Web Accessibility Framework and how you can go about using it to help improve the approachability and availability of projects at an organizational level. There’s a good related read here from Jay Pope explaining why it was created.

Whitney Lewis

Most Accessibility Issues Originate in Design (Plus How to Fix That)
Bogdan Cerovac

Nicer Text Wrapping with CSS text-wrap
Will Boyd

🔧 Code, Tools & Resources

🅰 Find and Try Variable Fonts — This site isn’t new, but continues to be a handy resource for both finding and trying out a growing collection of variable fonts, now supported by nearly all modern browsers. There's over 350 fonts on display now.

Nick Sherman

unlazy: A Universal Lazy Loading Library for Placeholder Images — It's framework-agnostic and intended to be used alongside loading="lazy" to provide temporary placeholder images as a page loads.

Johann Schopplich

Autosize Textarea: A Web Component for Auto-Resizing textarea Elements — This is one way to do this, but you could also opt for this pure CSS solution from a few years back.

andrico karoulla

WebGPU-Kit — This is a minimal webGPU toolkit bringing together a collection of libraries that “make it easy to build high-performance, cross-platform, web-based graphics applications”. GitHub repo.

John Beresford

Palettify: An Interactive Playground to Customize and Preview UI Themes — Currently supports MUI and shadcn-ui for the components and you can customize primary/secondary colors, accents, borders, cards, popovers, and others, before exporting as CSS variables.

Mehdi Ben Hadj Ali

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

🍿 ...and finally

ASCII Theater: Stream Text-Based Movies in Your Terminal — Putting copyright angles aside briefly, this is a neat experiment. Movies meet ASCII art in a bit of terminal fun. Want to give it a go? Grab the popcorn and run this at your terminal: ssh -o StrictHostKeyChecking=no watch.ascii.theater .. then q to quit. (Note: We've had issues with it timing out, but the site and its aesthetic are worth experiencing nonetheless.)

MSCHF

Ipx.