Together with  Hookdeck
🚀 Frontend Focus

#​632 — February 28, 2024 | Read on the web

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.

Ahmad Shadeed

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.

Hermina Condei (MozDevNet)

Serverless Infrastructure for Asynchronous Messaging — Use Hookdeck’s reliable Event Gateway to receive, authenticate, send, transform, filter, and route events between third-party services (Stripe, Shopify, Twilio, etc.) and serverless functions in your event-driven applications. Learn more.

Hookdeck sponsor

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.

Open Web Advocacy

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

Alex Russell opinion

Ionic: A Note on iOS 17.4 and PWAs — What the recent iOS changes mean for users of Ionic Apps.
Mike Hartington

So, What Exactly Did Apple Break in the EU?
Thomas Steiner

Apple’s Decision to Drop iPhone Web Apps Comes Under Scrutiny
Emma Roth (The Verge)

⚡️ Quick Links

📙 Tutorials, Articles & Opinion

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.

Jake Archibald

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.

Kate Kalcevich

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

StackBlitz sponsor

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.

Brecht De Ruyte

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.

Jan Nikka A. Estefani

The Linear Look — An overview of a particularly dominant web design trend in the SaaS/tech space.

Alex Trost

How to Use Server Timing to Get Backend Transparency From Your CDN
Cliff Crocker (SpeedCurve)

Building Dynamic Progress Bars Using Only CSS
Amit Merchant

A Manifesto for Small, Static, Web Apps
Ross Wintle

Why I Use Firefox
Šime Vidas

🧑‍💻 JOBS

Frontend Developer 🔝 (Fully Remote 🌐 or Our Office in Stockholm, Sweden 🇸🇪) — Do you get excited when you hear Next.js, Supabase, GraphQL? Let’s talk.
ZCO Stockholm

🔧 Code, Tools & Resources

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.

Alex Yakir et al.

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.

Mojo CSS

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

Joan León

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

Userfront sponsor

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.

Cory LaViska

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.

Lucas Larroche

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.

Chris Henrick

tabgod: A Chrome Extension to Execute Any JavaScript on Any Open Tab
David Wolf

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