There’s a new IDE in town (actually, IDX). Addy Osmani gives us a nice walk-through. Based on VSCode, IDX is cloud-/browser/based, has AI baked-in, imports projects from GitHub, offers quick-starts for most modern frameworks, deploys to Firebase (helpful?), and more. Roman Nurik offers additional details.
Speaking of Addy, he also shares a deep-dive into how YouTube built a better web and improved all of their CWVs.
Domenic Denicola shows that Speculation Rules have made some strides and improvements! You can now specify URLs that you expect a user will likely continue on to, and a hover of more than 200ms will kick off any prefetch or prerender that you specify. These speculative fetches do consume resources (bandwidth, data, etc.), so use them carefully, but if you have a high confidence, this can be a big performance boost! Barry Pollard has a nice write-up, and you can also check the spec, if you fancy.
Speaking of Barry, he and Demián Renzulli update us on the imminent demise of the unload event. Rick Byers has additional details on why this is so important. This is great news for bfcache/users, bad news for devs that need to finally update their code…
Wanna test your your site’s INP? Debugbear has an automated INP tester.
Jecelyn Yeen‘s 4-part thread on the topic! Gonna be super helpful, sort of like the next level of Overrides!Ready for a couple of bleeding-edge demos?
- First, Michelle Barker demos several scroll-driven animations,
- then Jhey Tompkins shows off how to scroll an element into view with scroll-driven animations,
- and finally Yuriko Hirota digs into the performance benefits of scroll-driven animation over the old JS approach.
Stanko Tadić turns us on to CSS-only floating labels, which leverages the
input:placeholder-shownpseudo-class to determine whether aninputis empty and/or focused to toggle floating labels. Very slick!For anyone else like me that battles with thoughts like “Why does everything take so long?”, Jamie Brandon‘s Moving faster article is worth the read. But now to implement… :-/
John Allsopp writes about the UX of AI and the urgent need for UI/UX designers to get in the game!
Pruning code based is always a challenge. No one wants their name attached to the PR titled “Removed XXkb of CSS” that broke the site when it was deployed… But removing code is critical to the longevity of any project. Lars Kappert tells us all about Knip, which is An Automated Tool For Finding Unused Files, Exports, And Dependencies. Run it manually, or as part of your CI/CD.
Speaking of Git, I have no idea what your org‘s current repo review process is, but Google’s Appraise seems like a solid approach for managing distributed code reviews.
The Washington Post recently released their Web Performance and SEO Best Practices and Guidelines, which is part of their overall Design System. Love seeing stuff like this from such a large organization!
One more performance item, Jacob Groß a collection of Awesome Performance Patches. Have a look, never know what you might find, or offer to add anything you think is missing!
Okay, I lied, this is the last performance item, Sia Karamalegos writes about How layout position impacts three big web performance levers, where she discusses lazy loading images, “lazy loading” CSS, and using
fetchpriority. Good stuff, new author to me, looking forward to reading more!And finally, anyone out there ever have trouble nodding off? If so, here is a great way to lull yourself into lalaland… (Love the effect as you scroll down the page… 😴
Happy reading,
Atg