--- title: "Browsers buddy up to bring the speed" publication: "Frontend Focus" issue: 634 published_at: "2024-03-13" canonical_url: "https://frontendfoc.us/issues/634" --- Plus INP is now an official Core Web Vital. | ✍️ Hello! After a week away in Paris I'm back at my desk with the latest frontend links for you to peruse. Let's get to it. __ _Your editor, Chris Brandrick (a little grayer)_ Together with [![Imagekit\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_290,h_100/e_make_transparent/co_white,e_outline:7/srf0buoihyfdsnjkebof.png)](https://imagekit.io/use-cases/video-api/?utm_source=Cooperpress&utm_medium=email&utm_campaign=VideoAPI_Newsletter_Q423&utm_term=FrontEndFocus&utm_content=Primary_listing) πŸš€ **Frontend** Focus #​634 β€” March 13, 2024 | [Read on the web](https://frontendfoc.us/issues/634) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1710327708/n594ptv7ycltmtq8pw1x.png)](https://browserbench.org/announcements/speedometer3/) [Announcing Speedometer 3.0: A Shared Browser Benchmark for Web Application Responsiveness](https://browserbench.org/announcements/speedometer3/) β€” Speedometer has been around since 2014, but this new 3.0 release is the first with a new cross-industry collaborative approach that's supported by each major browser engine (Blink, Gecko, WebKit). [Version 3](https://www.browserbench.org/Speedometer3.0/about.html) adds many new tests, performance wins, and improvements. The [WebKit team call it](https://webkit.org/blog/15131/speedometer-3-0-the-best-way-yet-to-measure-browser-performance/) the β€œ_best way yet to measure browser performance_”. Apple, Google, Microsoft, and Mozilla [![\](https://copm.s3.amazonaws.com/2452994c.png)](https://imagekit.io/use-cases/video-api/?utm_source=Cooperpress&utm_medium=email&utm_campaign=VideoAPI_Newsletter_Q423&utm_term=FrontEndFocus&utm_content=Primary_listing) [Handling Videos? Here's the Only Video API You'll Ever Need](https://imagekit.io/use-cases/video-api/?utm_source=Cooperpress&utm_medium=email&utm_campaign=VideoAPI_Newsletter_Q423&utm_term=FrontEndFocus&utm_content=Primary_listing) β€” Transform videos in real-time with URL-based parameters, leverage adaptive bitrate streaming, and deliver optimized videos across the globe. Effortlessly personalize the visual experience for your users; don't take our word; [Try ImageKit Today](https://imagekit.io/use-cases/video-api/?utm_source=Cooperpress&utm_medium=email&utm_campaign=VideoAPI_Newsletter_Q423&utm_term=FrontEndFocus&utm_content=Primary_listing). ImageKit.io sponsor [Interaction to Next Paint is Now Officially a Core Web Vital](https://web.dev/blog/inp-cwv-launch) β€” It has now replaced First Input Delay. Here’s a quick recap of what’s now changed along with some resources to help you find and fix INP issues. Rick Viscomi (Google) [The Quiet, Pervasive Devaluation of Frontend](https://joshcollinsworth.com/blog/devaluing-frontend) β€” Considered introspection here on the discernment of the frontend trade as a whole: β€œ_I feel like I’m seeing a widespread diminishment of the practice of frontend. [..] I notice its importance minimized, and its challenges trivialized_.” Josh Collinsworth ⚑️ Quick Links - 🦁 The Brave browser has [enjoyed hockey stick install growth](https://twitter.com/brave/status/1767643225773215918) following browser choice screens being added to iOS in the EU. - πŸ‡ͺπŸ‡Ί Yet more EU/Apple tinkering: [certain devs in the EU will be able to distribute apps directly from webpages](https://www.macrumors.com/2024/03/12/apple-announces-app-downloads-from-websites/), although it's [a tad drawn out](https://news.ycombinator.com/item?id=39689627). - 🌐 35 years ago, in March 1989 Sir Tim Berners-Lee wrote β€œ[Information Management: A Proposal](https://www.w3.org/History/1989/proposal.html)” outlining the World Wide Web. - πŸ–ΌοΈ You probably [don't want to use "double quotes"](https://cdpn.io/pen/debug/XWQWgrj) in `alt` attribute text. πŸ“™ **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1710326631/yinbxxs1hu1ayabtmwvg.png)](https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/) [Creating Color Palettes with the CSS `color-mix()` Function](https://developer.mozilla.org/en-US/blog/color-palettes-css-color-mix/) β€” This article serves as a thorough explainer on how best to use new CSS `color-mix()` functions to create variations in color palettes. Michelle Barker [Streaming HTML Out of Order _Without_ JavaScript](https://lamplightdev.com/blog/2024/01/10/streaming-html-out-of-order-without-javascript/) β€” An interesting, yet short and sweet, demo of a browser feature that enables a technique you may not have imagined possible without JavaScript, though [support](https://caniuse.com/declarative-shadow-dom) is still _very_ fresh in Firefox. Chris Haynes [CSS Variable Groups](https://lea.verou.me/docs/var-groups/) β€” A proposed way to define multiple properties under the same namespace and pass the entire group around, addressing several pain points around design tokens, design systems, and integrating third-party components. Lea notes that it has been shared with the CSS Working Group. Lea Verou [Best Practices For OAuth In Mobile Apps](https://fusionauth.io/blog/best-practices-for-oauth-in-mobile-apps?utm_medium=newsletter&utm_source=frontend_focus&utm_campaign=mar24_newsletter) β€” Master the art of secure logins: Where OAuth meets native apps, simplicity shakes hands with security. FusionAuth sponsor β–Ά[The Importance of Web Performance to Information Equity](https://fosdem.org/2024/schedule/event/fosdem-2024-2411-the-importance-of-web-performance-to-information-equity/) β€” A 20-minute talk on the vital role of ensuring equal access to web information and services for those with expensive data, slower devices, or both. Bas Schouten [Improvements to the _Speculation Rules API_](https://developer.chrome.com/blog/speculation-rules-improvements) β€” A look over the latest updates to the experimental [Speculation Rules API](https://developer.mozilla.org/en-US/docs/Web/API/Speculation_Rules_API) β€” designed to improve performance for future navigations. These include document rules, eagerness setting, limits, and platform support. Barry Pollard (Chrome for Developers) ['Jakob Has Jumped the Shark'?](https://adrianroselli.com/2024/03/jakob-has-jumped-the-shark.html) β€” It’s fair to say Jakob Nielsen’s latest rumination on generative UI has caused plenty of chatter, as this collection of responses shows. Adrian Roselli [A Practical Guide To Designing for Colorblind People](https://www.smashingmagazine.com/2024/02/designing-for-colorblindness/) β€” Some practical accessibility guidelines and resources to ensure more inclusive design for those with color vision deficiency. Vitaly Friedman [Using Web Bluetooth To Read BBQ Temperature Sensor Data](https://pqina.nl/blog/web-bluetooth-api-read-bbq-temperature-sensor-data/) Rik Schennink β–Ά[How to Create an Animated, Circular Progress Bar](https://www.youtube.com/watch?v=MXWP56LUI3g) Kevin Powell [On Building Websites and Building Websites Well](https://meiert.com/en/blog/building-and-building-well/) Jens Oliver Meiert πŸ§‘β€πŸ’» JOBS [Tired of Manually Refreshing Job Sites?](https://first2apply.com/) β€” Automatically monitor most popular job platforms and get instant notifications for new listings. Try it now for free. First 2 Apply πŸ”§ **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/imkrmtnjmmc6t2czlhaq.jpg)](https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/) [Capo.js: A Five Minute Web Performance Boost?](https://frontendmasters.com/blog/capo-js-a-five-minute-web-performance-boost/) β€” Dave quips that this tool can offer a five minute web performance win that’s β€œ_sure to get you a promotion_” πŸ˜‰. The tool in question? It’s [Capo.js](https://rviscomi.github.io/capo.js/) β€” designed to help you get the elements in your in order, hopefully resulting in perf gains. Dave Rupert [This is WCAG: A Free Resource to Help You Build Inclusive Web Experiences](https://thisiswcag.com/) β€” Includes 80+ tests that you can filter by conformance level and different accessibility categories. Also offers brief explanations so you can better understand the meaning of each accessibility criterion. canaxess [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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1710337573/uybwpkckp5pi6wziotn2.png)](https://expressive-code.com/) [Expressive Code: An Engine for Presenting Source Code on the Web](https://expressive-code.com/) β€” Sort of like a syntax highlighter on steroids, this gives you some extra flexibility, allowing customizations like editor/terminal frames, text/line markers, collapsible sections, and more. Expressive Code [Finder 3.2: CSS Selector Generator](https://github.com/antonmedv/finder) β€” Given an element, it produces the shortest possible selector that reaches (solely) that element. Anton Medvedev πŸ“¬ **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/634/*|UID|*?ipx=t)