~frontendfocus | Issue 632 - 'Sabotaging Web Apps is Indefensible' (17)

An Interactive Guide to CSS :has() — A superb, extensive guide to everything that you practically need to know about the versatile :has() selector. It's packed with loads of code examples and interactive elements, and will no doubt help unlock some thoughts on how you can use this powerful selector in your own projects.

Lift-Off: The MDN Curriculum Launch — The MDN Curriculum is a new resource on the excellent MDN, providing a structured guide to essential frontend skills and best practices for industry newcomers. You can find it here.

Open Letter to Tim Cook: Sabotaging Web Apps is Indefensible — This seeks to halt upcoming changes to PWAs in iOS and Safari for users in the European Union. You can sign it too.

Home Screen Advantage — Alex shares that Apple’s efforts to “maintain its home screen advantage” with these upcoming PWA changes is “a shocking attempt to keep the web from ever emerging as a true threat to the App Store”.

View Transitions: Handling Aspect Ratio Changes — If your view transition animations don’t look quite right, Jake notes how it’s typically due to the content changing aspect ratio, and then shares how to fix it.

Mobile Accessibility Barriers for Assistive Technology Users — A collection of lessons learned from assistive technology users, highlighting the challenges and barriers they encounter on mobile devices.

How StackBlitz Built a T-Shirt That Renders Itself — How we designed a t-shirt using valid JavaScript that is also the source code of the image itself (and how you can get one).

Going Beyond Pixels and (r)ems in CSS: Container Query Length Units — A look at container query length units, and how these units are increasingly essential in modern CSS development.

Designing with Integrity: The Ethical Designer's Handbook on Dark Patterns — A detailed look at the deceptive design tactics of dark patterns, how they attempt to manipulate users into unintended actions, and generally pose an ethical dilemma in the design realm.

Functional UI Kit: A Unified Figma and React UI Component Kit — It hasn’t felt like anyone perfected the Figma - React connection yet, but this is a great attempt to bridge the design/code gap, funded by Figma’s Community Creators Fund.

Mojo CSS: An Atomic CSS Framework with Near-Zero Runtime — Another player in the atomic CSS game, with some features you might not find in more popular solutions, including color tinting, component abstraction, reverse breakpoints, among others.

WebPerf Snippets — A curated list of snippets to get Web Performance metrics to use in the browser console or as snippets on Chrome DevTools.

Transformational Auth & Identity | Userfront — Userfront is an auth & identity platform that transforms your business to serve free, freemium and enterprise customers.

Shoelace: 'A Forward-Thinking Library of Web Components' — We’ve featured this collection of well designed UI components before, but you may want to take another look now that web components are the talk of the town.

Pico.css: A Minimal CSS Framework for Semantic HTML — The focus is more on styling native HTML elements, rather than littering your HTML with classes. Includes dark and light mode themes out-of-the-box.

Color Legend Element: A Web Component Providing a Legend in Data Visualizations — Built with Lit/Lit-Element and D3.js. You can see various examples here. It’s legen.. wait for it.. dary.