With the upcoming exit of FID and arrival of INP, Brian Ramirez helps us debug our INP (video). Good points related to which browsers provide reporting (so we know what our stats mean), tools to help you find “slugs”, debug where the hangup is happening, and simple solutions to simple problems.
Any web developer spends a LOT of their day within their DevTools panel. Regardless of your browser choice, this is where you do your digging and testing. Patrick Brosset has worked feverishly to keep us all informed of tips & tricks that we can use in his DevTools Tips website. He also wrote a “top 15” article for Smashing Magazine.
Stephanie Eckles demonstrates how CSS animation can be used to replace JS for newly-added elements. Elegant!
Alex MacArthur takes us on a wonderful journey into the wonderful world of page-exit HTTP requests… TL;DR: Options that work:
fetchwith akeepaliveflag,- Navigator’s
sendBeacon(), but you cannot send custom headers, so you might need to convert your data to aBlobfirst, and - ping attribute, though this only works on links (no buttons or form submits), and browser support is not great.
But note that, of course, there are trade-offs for each option…
For anyone that has perhaps let their JS knowledge… slip… a little, Sandro Turriate wrote an excellent article titled Modern Javascript: Everything you missed over the last 10 years. A lot of items in the list even have a little sandbox where you can play…
You might also want to check Sandro’s list against these lists from Maxwell:
- Must-know knowledge of JavaScript I
- Must-know knowledge of JavaScript
- 12 Useful JavaScript Interview Tips
This is a bit old by now, but Louis Lazaris wrote a fun article listing several HTML attributes you never use. As usual with such lists, there are some items that I do use, and most I am at least familiar with, but usually there are least a couple that I have never even heard of… To me, these types of articles are nearly always worth at least a scroll!
I would hope that your sites are making use of Resource Hints. If so, make sure what you are using is needed and is working correctly. Would be nice if it also offered suggestions for “You might want to consider adding a [_____] hint for this domain”, but either it doesn’t, or all of my sites are freaking awesome, which I find unlikely…
If you’ve ever been to the Rijksmuseum in Amsterdam, you know it is a moving, sensory experience. If you can’t get to the real place, their website does an amazing job of helping to transport you. And part of the transportation is the amazing fullscreen images they use. And that is no small feat. Learn how these fullscreen, responsive images were implemented, including some background, limitations & requirements, as well as the final winning solution.
It is likely that you are already familiar with the new(-ish) Media Query Range Syntax. It allows us to switch from writing something like this:
@media (min-width: 600px) { ... }
To writing something like this:
@media (width >= 600px) { ... }
Or from something like this:
@media (min-width: 400px) and (max-width: 1000px) { ... }
To something like this:
@media (400px <= width <= 1000px) { ... }
In both cases, the latter is certainly more concise, and maybe this is just my old-man-eyes, but in both cases the former feels more explicit to me...
The View Transitions API is, I think, one of the most powerful visual updates to the web in a long, long time. Once fully adopted by browsers, this will really give the web a powerful visual punch! There are already some amazing demos out there!
Marvin Hagemeister offers a very deep article on Speeding up the JavaScript ecosystem - one library at a time, tackling such common libraries as PostCSS, SVGO and more! Of course, since these are libraries, the challenge is "How do I get these changes in my live site?". Well, Marvin simply creates PRs for his changes... Love that kind of community mentality!
And finally, Writing for Engineers, by Heinrich Hartmann, seems an apro-pos article to reference in this tech blog... Discussing how vital it is that engineers can write (and not in code; like, in your speaking language). Heinrich offers some great tips, going to have to dig through them slowly and patiently...
Happy reading,
Atg