--- title: "What you need to know from Google I/O" publication: "Frontend Focus" issue: 593 published_at: "2023-05-17" canonical_url: "https://frontendfoc.us/issues/593" --- Plus condtional CSS with :has and :nth-last-child. | Together with [![Progress Kendo UI for Angular\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,w_480,h_50/e_make_transparent/co_white,e_outline:7/unqewzs6uvnqy4ehhxfi.png)](https://www.telerik.com/blogs/dynamically-filtering-kendo-angular-grid-code?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-hdibt-content-exposure&utm_content=filtering-kendo-angular-grid-code) #​593 — May 17, 2023 | [Read on the web](https://frontendfoc.us/issues/593) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1684325357/mqe9a8sc6wfze9sjc1na.png)](https://ishadeed.com/article/conditional-css-has-nth-last-child/) [Conditional CSS with `:has` and `:nth-last-child`](https://ishadeed.com/article/conditional-css-has-nth-last-child/) — Highlights a few practical examples of combining the CSS selector `:nth-last-child` with `:has` to create dynamic components and layout states. Lots of great visuals and code examples here to help things along. Ahmad Shadeed [A Complete Guide to Performance Budgets](https://www.speedcurve.com/blog/performance-budgets/) — If you’ve invested a lot of time to make sure that your site is as fast as it can be, you’ll benefit from having some things in place to prevent regressions. Tammy Everts walks through the idea of a ‘performance budget’, which metrics to track, and how to focus on the things that truly matter. Tammy Everts (Speedcurve) [![\](https://copm.s3.amazonaws.com/b1389f46.png)](https://www.telerik.com/blogs/dynamically-filtering-kendo-angular-grid-code?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-hdibt-content-exposure&utm_content=filtering-kendo-angular-grid-code) [How to Dynamically Filter Angular Grid From Code](https://www.telerik.com/blogs/dynamically-filtering-kendo-angular-grid-code?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-hdibt-content-exposure&utm_content=filtering-kendo-angular-grid-code) — While the Kendo UI for Angular Grid comes with built-in filtering functionality, sometimes you need to allow users to control what the filters show. We can do that too. [Let’s take a look](https://www.telerik.com/blogs/dynamically-filtering-kendo-angular-grid-code?utm_medium=cpm&utm_source=fefocus&utm_campaign=kendo-ui-angular-awareness-hdibt-content-exposure&utm_content=filtering-kendo-angular-grid-code). Progress Kendo UI for Angular sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/iic37l0aghsfubv4wcyh.jpg)](https://web.dev/introducing-baseline/) [Introducing Baseline](https://web.dev/introducing-baseline/) — A new initiative (announced at Google I/O) to help you quickly see whether a feature or API is safe to use in your site or web apps. This post shares details on the ideas that led to the concept, and how it will help. Here's another post on [how you can use Baseline today](https://web.dev/baseline-features/). Rachel Andrew (Chrome Developers) Zoran Jambor has done a quick [▶️ six-minute video](https://www.youtube.com/watch?v=wTT0jRpE-Q8) sharing what you need to know about Baseline, caling it "_a new way to think about browser support_". [🔑 Spotlight On.. Passkeys](https://developer.apple.com/news/?id=mgdnfp8w) — Three early adopters (from Kayak, Robinhood, and Instacart) share their thoughts on this new security technology, having rolled it out on their platforms. ▶️ Also, there was a roughly 20-minute talk at Google I/O last week in which Eiji Kitamura showed us [how you can make use of this new security feature](https://www.youtube.com/watch?v=_qSCYiU_Yr4). (🤔 _Still_ trying to make sense of Passkeys? [This recent post from Michał Sapka may help](https://michal.sapka.me/2023/passkeys/).) Apple Developer **⚡️ IN BRIEF** - 💡 [DevTools Tips](https://devtoolstips.org) is a handy site filled with a growing collection of bitesize browser dev tool tutorials. - [▶️ Here's Una Kravets with a quick web-focused round-up](https://www.youtube.com/watch?v=gkAYHomO5Hg) of what was announced at Google I/O last week, including WebGPU, new CSS features, and privacy changes. - In an effort to improve UX, there's an [intial proposal for shared-autofill across iframes](https://developer.chrome.com/blog/shared-autofill/). - WebGPU support [now sits at over 40%](https://web3dsurvey.com/webgpu), mostly thanks to Chrome's rapid rollout. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1684327094/h0yy8aiudkcwoh4ucysq.png)](https://developer.chrome.com/blog/whats-new-css-ui-2023/) [What's New in CSS and UI: I/O 2023 Edition](https://developer.chrome.com/blog/whats-new-css-ui-2023/) — Yes, more from I/O. This time it's the top 20 CSS and UI features highlighted at the show that you “_don’t want to miss_” — including, nesting, scoped CSS (see below), popover, scroll-driven animations, and more. This post is packed with stuff. Chrome Developers [Scoped CSS is Back](https://keithjgrant.com/posts/2023/04/scoped-css-is-back/) — Back, and better than before, the W3C spec is stable, and you can now test things under a flag in Chrome. What is it? Well, scope is “_a game changer_” that brings more control over which selectors target which elements, and the ability for one set of styles to override another based on proximity in the DOM. Keith J. Grant ▶[What’s New in Web Animations](https://www.bram.us/2023/05/16/whats-new-in-web-animations/) — A talk from the recent Google I/O conference covering view transition, scroll-driven animations, easing curves, and individual transform properties (_17-minutes_). Bramus Van Damme [React Authentication, Simplified](https://userfront.com/tutorials/react-authentication?utm_source=frontendfocus&utm_medium=newsletter&utm_campaign=primary&utm_content=react_authentication) — In this article, we lay out a new approach to authentication (plus access control & SSO) in React applications. Userfront sponsor [Advancing Interaction to Next Paint (INP)](https://web.dev/inp-cwv/) — The Chrome team has announced that [INP is no longer experimental](https://developers.google.com/search/blog/2023/05/introducing-inp) and will replace First Input Delay (FID) as a Core Web Vital in 2024. Viscomi & Sullivan [Semantics and the `popover` Attribute: What to Use When?](https://hidde.blog/popover-semantics/) — The experimental `popover` HTML attribute adds behavior, not semantics. Hidde asks which semantics should you use in combination with this attribute? Hidde de Vries [How We Built the Storybook Day 3D Animation](https://varun.ca/storybook-day/) — Have you ever seen an impressive animation and wondered ‘so how’d they actually do that?’ This tutorial takes the [Storybook Day](https://storybook.js.org/day) animation and breaks it down step-by-step, each with sample code. Varun Vachhar [How Google Tried to Fix the Web — By Taking It Over?](https://www.theverge.com/23711172/google-amp-accelerated-mobile-pages-search-publishers-lawsuit) — An interesting look at the development, and eventual failure, of AMP (Accelerated Mobile Pages) and how it affected Google's relationship with publishers. David Pierce (The Verge) [How Large DOM Sizes Affect Interactivity, and What You Can Do About It](https://web.dev/dom-size-and-interactivity/) Jeremy Wagner [Five Best Practices to Sustainably Improve Core Web Vitals](https://calibreapp.com/blog/improve-core-web-vitals) Ben Schwarz 🧑‍💻 JOBS [Team Lead Web Development](https://www.komoot.com/jobs/9C5B6E4C0B/team-lead-web-development) — Experienced with Node, React, and TS? Join us and lead a motivated team of devs and help grow and shape the future of our web app focused on helping millions explore the outdoors. Komoot [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Hired makes job hunting easy-instead of chasing recruiters, companies approach you with salary details up front. Create a free profile now. Hired 🔧 **Code, Tools & Resources** [headless-qr: A Simple, Modern QR Code Library](https://github.com/Rich-Harris/headless-qr) — A slimmer adaptation of an older project without the extra code that wouldn’t be necessary today. Rich Harris [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1684320384/awucd34kstbpzprcydhq.png)](https://peepslab.com/) [PeepsLab: Create Your Own "Peep" (i.e. "People") Avatars](https://peepslab.com/) — You can randomize just about any part of the avatar, or generate a completely random one, before downloading as PNG. shayan [CSS HD Gradients: Interactively Build and Customize Gradients](https://gradient.style/) — The gradients are built using modern color formats (oklch, hsl, lab, srgb, etc.) and the tool supports linear, radial, and conic gradients. CSS HD Gradient [Shaper: A Generative Design Tool for UI Interfaces](https://shaper.design/) — An interactive tool to explore design variations using a simple UI. You can adjust typography settings, spacing, colors, and more, before exporting your design tokens as CSS Variables. _Sign-in required_. hayk an **✉️ ICYMI** Missed [last week's issue](https://frontendfoc.us/issues/592)? These were the top three links shared in[issue 592](https://frontendfoc.us/issues/592): - Christian Heilmann [shares his defence](https://christianheilmann.com/2023/05/09/the-ongoing-defence-of-frontend-as-a-full-time-job/) of frontend as a full time job. - After eight years, Adam Elmore explains why [he is done with React](https://www.youtube.com/watch?v=Zt8mO_Aqzw8). - The Chrome Web Vitals extension [now shows more debugging information](https://web.dev/debug-cwvs-with-web-vitals-extension/) to help you identify the root causes of Core Web Vitals issues. 📬 **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/593/*|UID|*?ipx=t)