A few very interesting discussions on Twitter have led me to understand that some folks are talking about Lighthouse scores in a way that is—in my opinion—not as forthright as it could be (intentionally or not). Let’s level set a bit and talk a bit about the different flavors of wiggle room.
Getting a 100 on Lighthouse is definitely a very good sign, but it doesn’t guarantee that your site will be totally free of any performance issues in the real world. Case in point: Almost half of all pages that scored 100 on Lighthouse didn’t meet the recommended Core Web Vitals thresholds.
My preferred solution is what I call pseudo-private custom properties. You use a different property internally than the one you expose, which is set to the one you expose plus the fallback:
As someone just sittin’ back watching CSS evolve, it feels like we’re at one of the hottest moments of innovation in CSS history. It was really something when we got flexbox across all browsers, and not terribly long after, grid. They changed the game from CSS feeling like an awkward collection of tricks to something more sensible and of the times.
That feeling keeps getting more and more true all the time. Just in the last short while, here’s a list of things happening.
Should some links look like buttons, or should some buttons look like links? Twitter was all up in arms about this issue this week. Let’s take a look to see what these two UI elements are and what they do, and then, how they can look.
The last couple years have been pretty transformative for CSS, and the pace of innovation shows no sign of slowing. So I’m pretty excited for this year’s State of CSS survey, which you can take right now! And not to be outdone by CSS, the survey itself has evolved as well. Let’s see what’s new!
Rich Harris, creator of SveltJS, presents a new framework for thinking about how we can get the best of both the Multi-Page-App and Single-Page-App worlds: transitional apps.
What’s a transitional app? Transitional apps samples elements from both traditional and modern architecture. Transitional apps are, like multi-page apps, server-side rendered for fast initial loads, resilient since they work without JS by default, and provide a consistent experience with accessibility features built in. But like a single-page application, they also have a single codebase, fast navigation, persistent elements, and client-side state management.
Learn more about transitional apps, and how to get the best of both worlds in Rich’s talk.
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.
Tweet
Share