State of JS 2022 and Core Web Vitals 2023 Recommendations

State of JS 2022 and Core Web Vitals 2023 Recommendations

Newsletter

Tune In This Wednesday

Tune in this Wednesday at 12pm PT on Twitter Spaces for another open mic conversation driven by you. We’ll discuss the JavaScript news from the week discussed in the articles below along with any other topics on your mind related to web development.

Last week we discussed the State of JS survey results and Sami Jaber joined to talk about Mitosis and how Github Copilot changed his workflow:

“Everyone should be using [Github] Copilot all the time. It is the future…It’s fascinating how it reshapes your mind and how you should be coding.”

Sami Jaber (Builder.io/Mitosis)

Articles of the Week

The State of JS 2022

The State of JavaScript 2022 results have been released and were discussed at length on last week’s JavaScript Jam Live. A common theme was interest in newer front-end frameworks like Solid and Qwik along with continued support for server-side focused frameworks like Next.js, SvelteKit, and Astro. For more reactions you can read takes from Fred K. Schott and Ryan Carniato or watch Theo's video rundown.

Our top Core Web Vitals recommendations for 2023

The Chrome DevRel team published a collection of best practices for improving Core Web Vitals. They emphasize recommendations that focus on the largest real-world impact, are relevant and applicable to most sites, and are realistic for most developers to implement. Some of the high level recommendations include:

  • Ensuring the LCP resource is prioritized and discoverable from the HTML source
  • Using a CDN to optimize document and resource TTFB
  • Setting explicit sizes on any content loaded from the page
  • Ensuring pages are eligible for bfcache
  • Avoiding unnecessary JavaScript and animations/transitions that use layout-inducing CSS properties
  • Avoiding or breaking up long tasks and large rendering updates

Data Binding in React

In this article, Josh Comeau (well known from his comprehensive web dev tutorials) explains data binding in React. He gives tips on how to avoid gotchas for text inputs, buttons, checkboxes, and selects.

Type-safe React Query

Type safety has become an increasingly requested feature of modern full stack projects due to the influence of GraphQL and more recently tRPC. In this article, React Query maintainer TkDodo explains how to build type safety into React Query projects.

HTML with Superpowers: The Guidebook

Longtime Web Component advocate and Shoptalk co-host Dave Rupert has released a free guidebook for getting started with Web Components. In particular, he focuses on teaching the Shadow DOM, a famously confusing part of the web component specification. To achieve this, he builds out layer-by-layer from HTML to CSS to JavaScript.

Podcasts of the Week

JavaScript Jam on the Web

Find us online at the following links: