It's easy as I-N-P
Today’s issue: How TypeScript cured my sleep apnea, new hope for Angular devs, and a MooTools comeback that’s long overdue.
Welcome to #272.
The Main Thing
Developers optimizing their sites for Google search ranking (colorized)
It’s easy as I-N-P
While everyone was panicking last week about Devin coming for our jobs, you might’ve missed a big announcement from the Chrome team — INP is replacing FID as a CWV.
And if you’re not fluent in web platform shorthand, here’s a translation: Google just launched a new Core Web Vital metric called Interaction to Next Paint, which will replace First Input Delay as a key measure of site responsiveness.
This could have a meaningful impact on how Google ranks your site in search results, so let’s break it down.
Why are they doing this? Originally, First Input Delay (FID) only measured the input delay of a user’s first interaction on a page (name checks out). This was an OK measure of a site’s initial speed and load responsiveness, but a bad measure of overall responsiveness, since 90% of user time on a webpage is spent after the initial load.
Replacing FID with Interaction to Next Paint (INP) lets Google consider the responsiveness of all page interactions — which it calculates as the longest time observed between the user performing any action (tap, click, keypress, etc.) and the next update to the screen.
That all makes sense, but how can we game the system effectively optimize our sites to get a good INP score?
As you might guess, there are lots of nuanced and contextual answers to that question — but here’s a few tips to consider:
-
Optimize event callbacks by yielding to the main thread when possible, and break up tasks with the
setTimeout()function. -
Use a cross-browser JavaScript task scheduler like main-thread-scheduling.
-
Use the CSS
content-visibilityproperty to lazily render off-screen elements as they approach the viewport.
Bottom Line: It might not be the sexiest thing in the world, but optimizing for SEO is still a key part of our job — at least for the next 6 months until AI makes the idea of “trying to rank highly in a list of blue Google links” sound like the idea of trying to become the fastest butter churner in Williamsburg.
    |
Our Friends
(With Benefits)
When you see T-Pain across the dance floor at POST/CON
POST/CON is just over a month away…
But there’s still time to grab your ticket to the biggest API conference (and best after-party) of the year.
Network with tech leaders, learn new skills from some of the best engineers in the world, and see T-Pain perform live at the after-party in downtown San Francisco.
Check out this speaker lineup:
- Engineering leaders like Ojus Save (Lead Developer Advocate at Zoom) and Suresh Muthu (Principal Engineer at Intuit)
- Tech executives like Gail Frederick (CTO of Heroku), Ankit Sobti (Co-founder and CTO of Postman), and Lauren Long (Co-founder and CTO of Ampersand)
- First-class educators like James Quick (200k+ YouTube subscribers) and Sid Maestre (VP of Developer Relations at APIMatic)
Get 30% off your ticket if you register before March 26th, and save yourself from the FOMO.
Pop Quiz
Sponsored by Knock
They let you manage all of your notification channels from a single API, including email, in-app, SMS, and push. And their pre-built UI components make it easy to build the whole experience in a day.
What gets logged to the console?
const res = ["👨", "", "👩", "", "👧", "", "👦"].join('')
console.log(res)
Cool Bits
-
Brandon Roberts and friends just released Analog.js 1.0, the Vite-powered Angular meta-framework that brings file-based routing, API routes, and new hope to Angular developers everywhere.
-
Coherence created a Platform-as-a-Service with ephemeral environments and automated IaC that lets you easily deploy and scale your cloud infrastructure using AWS or GCP. It gives you a similar experience to platforms like Vercel and Heroku, but much more flexible and with no vendor lock-in. [sponsored]
-
State of the Terminal is a well-written article by Gregory Anders about the past and future of terminal technologies — not the name of another developer survey 🙏.
-
Remi from Frontend Mastery wrote about Navigating the future of frontend. I was surprised to see no mention of a MooTools comeback, but I’ll still never doubt the Moo.
-
We made this interactive deep dive on Why, When, and How React renders. If this doesn’t help you understand React rendering, nothing will.
-
Stream makes it easy to build enterprise-ready video and audio experiences into any application in days instead of months. Their SDKs and managed infra give you everything you need to add features like Zoom video calls, Twitch livestreaming, and Twitter Spaces audio rooms. [sponsored]
-
MistCSS is a JS-from-CSS tool (I guess that’s a thing now) for writing atomic React components using only CSS.
-
Convex just open-sourced their entire backend platform, which includes 200k lines of code written in Rust with “a healthy dose of TypeScript” supporting the server-side function environment. Coincidentally, “a healthy dose of TypeScript” is what finally cured my sleep apnea. [sponsored]
-
If you want to dive even deeper on INP, check out What is INP and why you should care by Salma Alam-Naylor.
-
In addition to the big DB launch, Astro also released v4.5 and celebrated its 3rd birthday last week. So next time you see Fred K Schott or Ben Holmes, make sure you tell them that they still need to come over to my house and crawl through the spanking machine.
What gets logged to the console?
const res = ["👨", "", "👩", "", "👧", "", "👦"].join('')
console.log(res) // 👨👩👧👦
It’s the ”👨👩👧👦” emoji.
This works because the Unicode standard supports mapping individual emojis with zero-width joiners to create new emojis. In our case, taking individual emojis and joining them to get a family emoji. Wow, programming.