|
|
|
|
You Can Try Out Native CSS Nesting Today — Back in December, the WebKit team shared an article and poll detailing three different potential options for CSS Nesting — option three won. Now, with Safari and Chrome have implemented it, meaning you can give native nesting a try in Safari Technology Preview 162 and Chrome 112 (or current Dev builds). Bryce Wray decided to give it a go, and you can read the results of his experimentation here. Jen Simmons (WebKit) |
Set up Core Web Vitals Tracking in Minutes — As a Google search ranking factor for site speed and UX, Web Vitals are key metrics for you to track. Measure Vitals on your site. Quickly see what you need to fix. Set up continuous monitoring and alerts so you can track regressions and stay fast. SpeedCurve sponsor |
|
The Modern Web’s Underrated Powerhouse — CSS has come a long way (especially in recent years), but Klint notes that it still doesn’t get the attention that JavaScript does, despite being one of the most important building blocks of the internet. Klint Finley |
|
What's New in Lighthouse 10 — Lighthouse, Chrome’s website auditing tool, has just reached version 10, introducing changes to the way in which things are scored, and new audits. Brendan Kenny (Chrome Developers) |
|
📙 Tutorials, Articles & Opinion |
|
|
Container Queries Land in Stable Browsers — Support for container queries and container query units are now in all three major browser engines. They’re particularly useful for responsive design and reusable components. This post shows a quick demo of how to use them. |
💬 “With container queries you can query the styling information of a parent element, such as its inline-size. With media queries, you could query the size of the viewport, container queries enable components that can change based on where they are in the UI.” — Una Kravets |
|
How to Inspect Interactions in the Browser — Trying to debug elements that have popovers? Inspection can be tricky. This post shows two ways to overcome this annoyance and properly inspect interactions in your browser. Sami Jaber |
|
Dynaboard: A Visual Web App IDE Made for Developers — Build high performance public and private web applications in a collaborative — full-stack — development environment. Dynaboard sponsor |
|
Introducing Historical Web Performance Data via the CrUX History API — Learn about the new Chrome UX Report (CrUX) History API and how to use it to track user experience trends. Henkel, Yan, Pollard (Chrome Developers) |
|
▶ 'My Talk On CSS Runtime Performance' — Following a ton of research on how browsers actually work under the hood Nolan delivered this thorough, hour-long presentation on “all the heroic work that browser vendors have done over the years to make CSS so performant”. Nolan Lawson |
|
An Animated Flythrough with Theatre.js and React Three Fiber — How to fly through a 3D scene using the Theatre.js JavaScript animation library and the React Three Fiber 3D renderer. Andrew Prifer (Codrops) |
|
Using Playwright to Monitor Third-Party Resources That Could Impact User Experience — While implementing third-party resources has downsides for performance and you should self-host your assets when possible, sometimes relying on external files is unavoidable. This post looks at how to evaluate and monitor such resources using Playwright. Stefan Judis |
|
Five Beginner Website Speed Optimizations and How to Do Them Right — Some beginner-friendly strategies for improving your site performance. Ben Schwarz beginner |
|
"You Kinda Want An Orange Favicon" — On the woes of finding a nice favicon which works across both dark and light modes equally… Chris Coyier |
|
Change Tab Bar Color Dynamically using JavaScript
|
|
Different Ways to Get CSS Gradient Shadows
|
|
Why I'm Not The Biggest Fan of Single Page Applications
|
🔧 Code, Tools & Resources |
|
|
Tailwind Elements: 500+ Bootstrap Components Recreated with Tailwind CSS — A pretty ambitious project! It claims to offer better design and more functionality compared to Bootstrap. You can judge for yourself but the design is very “Bootstrap-esque”. Tailwind Elements |
|
Build Business Software 10x Faster with Retool Retool sponsor |
|
Bookmarklet Editor: Easily Work on JavaScript Bookmarklets — Useful because who can remember the exact syntax for a bookmarklet? 🤔 This also can instantly convert code to and from bookmarklet form and includes some examples in the help section (click the big ? to get all the details). Marek Gibney |
Unicorn Icons: 100+ Animated Icons in SVG and JSON Formats — Lots of nice unique examples here and they’re free for commercial projects, but note that the license does require attribution. Unicorn Icons |
|
Font Library: An Open Source Project to Tag and Organize Google Fonts — This offers many of the same features as the Google Fonts platform, but also includes the ability to select subsets, variants, and sort by community-curated tags that you can contribute to. katy decorah |
|
🫵 It's pointing at you... |
|
|
Pointer Pointer — Ok, so this one isn’t new and has been around for a few years, but it’s a fun little thing that seems to have resurfaced this past week on social. Point your mouse cursor anywhere, and the site finds a picture that points at your pointer. 😅 |