~frontendfocus | Issue 628 - Apple's “painful” new alternative browser rules (18)

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

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.

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.

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.

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

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

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

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

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

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?)

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

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.

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

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.

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.

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.

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.

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