--- title: "'Sabotaging Web Apps is Indefensible'" publication: "Frontend Focus" issue: 632 published_at: "2024-02-28" canonical_url: "https://frontendfoc.us/issues/632" --- Plus an amazing interactive guide to CSS :has(). | Together with [![Hookdeck\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_1417,h_228/e_make_transparent/co_white,e_outline:15/inbujhb9yc9paku133a6.png)](https://hookdeck.com?ref=frontend-focus-632) πŸš€ **Frontend** Focus #​632 β€” February 28, 2024 | [Read on the web](https://frontendfoc.us/issues/632) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1709129197/oeggxl841jikwsxsdcbj.png)](https://ishadeed.com/article/css-has-guide/) [An Interactive Guide to CSS `:has()`](https://ishadeed.com/article/css-has-guide/) β€” 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](https://developer.mozilla.org/en-US/blog/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](https://developer.mozilla.org/en-US/curriculum/). Hermina Condei (MozDevNet) [![\](https://copm.s3.amazonaws.com/c9e66a7f.png)](https://hookdeck.com?ref=frontend-focus-632) [Serverless Infrastructure for Asynchronous Messaging](https://hookdeck.com?ref=frontend-focus-632) β€” 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](https://hookdeck.com?ref=frontend-focus-632). Hookdeck sponsor [Open Letter to Tim Cook: Sabotaging Web Apps is Indefensible](https://letter.open-web-advocacy.org/) β€” 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](https://infrequently.org/2024/02/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](https://ionic.io/blog/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?](https://blog.tomayac.com/2024/02/28/so-what-exactly-did-apple-break-in-the-eu/) Thomas Steiner [Apple’s Decision to Drop iPhone Web Apps Comes Under Scrutiny](https://www.theverge.com/2024/2/26/24083511/apple-eu-investigation-web-app-support) Emma Roth (The Verge) ⚑️ Quick Links - πŸŽ‰ [Popover support](https://twitter.com/Una/status/1762451966389575720) is coming to Firefox 125. - 🌐 Version 18 of developer browser Polypane has a new feature, _Polypane Portal_, which [makes your localhost available to your network](https://polypane.app/blog/polypane-18-introducing-polypane-portal/) and beyond. - πŸ“„ _Dead Simple Sites_ is a [collection of the most (visually) minimal sites on the web](https://deadsimplesites.com/), all in one place. - πŸ˜… Erm, Apple is said to have [rejected Bing](https://www.theregister.com/2024/02/26/google_antitrust_defense_apple_bing/) in part due to "wrong answers about Annie Lennox". No more _"I love you"_s, then. - 😱 Following a DDOS attack [this Netlify user](https://old.reddit.com/r/webdev/comments/1b14bty/netlify_just_sent_me_a_104k_bill_for_a_simple/) allegedly received a _$104k_ bill (which has, thankfully, been waived). πŸ“™ **Tutorials, Articles & Opinion** [View Transitions: Handling Aspect Ratio Changes](https://jakearchibald.com/2024/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](https://www.smashingmagazine.com/2024/02/mobile-accessibility-barriers-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](https://blog.stackblitz.com/posts/eval-shirt/?utm_source=fe-focus&utm_medium=secondary) β€” 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](https://techhub.iodigital.com/articles/going-beyond-pixels-and-rems-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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1709119982/uoi1i1ht0g2sbvfbmalf.png)](https://raw.studio/blog/designing-with-integrity-the-ethical-designers-handbook-on-dark-patterns/) [Designing with Integrity: The Ethical Designer's Handbook on Dark Patterns](https://raw.studio/blog/designing-with-integrity-the-ethical-designers-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](https://frontend.horse/articles/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](https://www.speedcurve.com/blog/server-timing-time-to-first-byte/) Cliff Crocker (SpeedCurve) [Building Dynamic Progress Bars Using Only CSS](https://www.amitmerchant.com/dynamic-progress-bars-using-css/) Amit Merchant [A Manifesto for Small, Static, Web Apps](https://rosswintle.uk/2024/02/a-manifesto-for-small-static-web-apps/) Ross Wintle [Why I Use Firefox](https://xn--ime-zza.eu/3) Ε ime Vidas πŸ§‘β€πŸ’» JOBS [Frontend Developer πŸ” (Fully Remote 🌐 or Our Office in Stockholm, Sweden πŸ‡ΈπŸ‡ͺ)](https://www.zco.se/hire/frontend-developer) β€” Do you get excited when you hear Next.js, Supabase, GraphQL? Let’s talk. ZCO Stockholm πŸ”§ **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/bdjo0tg0iqrcuf0kk1xd.jpg)](https://functional-ui-kit.com/) [Functional UI Kit: A Unified Figma and React UI Component Kit](https://functional-ui-kit.com/) β€” 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.](https://www.figma.com/community-creators/) Alex Yakir et al. [Mojo CSS: An Atomic CSS Framework with Near-Zero Runtime](https://mojocss.com/) β€” 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](https://webperf-snippets.nucliweb.net/) β€” 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](https://userfront.com/?&utm_source=frontendfoc.us&utm_medium=newsletter&utm_campaign=sponsored_link&utm_content=transformational) β€” 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'](https://shoelace.style/) β€” 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](https://picocss.com/) β€” 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](https://github.com/clhenrick/color-legend-element) β€” Built with Lit/Lit-Element and D3.js. You can see various examples [here](https://clhenrick.github.io/color-legend-element/). It’s legen.. wait for it.. dary. Chris Henrick [tabgod: A Chrome Extension to Execute Any JavaScript on Any Open Tab](https://github.com/devidw/tabgod) David Wolf πŸ•°οΈ ICYMI (_Older links, still worth checking out_) - Here's a [web performance audit of LEGO's site](https://www.speedcurve.com/blog/web-performance-audit-lego/) β€” maybe you can build upon some of the takeaways here? - Did you know there are [nine HTML elements that have an attribute with the same name (as the element)](https://meiert.com/en/blog/same-name/)? - An interesting study in [how a blur effect can appear widely different](https://bjango.com/articles/blurradiuscomparison/) depending on the environment in which it's being rendered. πŸ“¬ **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/632/*|UID|*?ipx=t)