JS Party: JavaScript, CSS, Web Development

Getting a pulse on your Core Web Vitals 🩺

This week, Amal and Nick are joined by Rick Viscomi and Annie Sullivan from the Chrome team to dive into Core Web Vitals, a set of performance metrics geared towards helping developers surface web page quality signals that are key to delivering great user experiences. We deconstruct the different vitals and learn how they are helpful, as well as introduce the newest vital to hit the scene, Interaction to Next Paint (INP). Join us for a fun and nerdtastic discussion as we dive into the humbling universe of web performance! Leave us a comment Changelog++ members save 3 minutes on this episode because they made the ads disappear. Join today! Sponsors: PowerSync – Build local-first web apps — Give users instantly reactive UX with an in-browser database that keeps itself in sync with any backend Postgres. No need to wait for network requests, code complicated caching logic or to maintain in-memory state. Set up is easy, removal too. Try on a generous free plan. Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Typesense – Lightning fast, globally distributed Search-as-a-Service that runs in memory. You literally can’t get any faster! Sentry – Launch week! New features and products all week long (so get comfy)! Tune in to Sentry’s YouTube and Discord daily at 9am PT to hear the latest scoop. Too busy? No problem - enter your email address to receive all the announcements (and win swag along the way). Use the code CHANGELOG when you sign up to get $100 OFF the team plan. Featuring: Rick Viscomi – WebsiteAnnie Sullivan – Mastodon, Twitter, WebsiteAmal Hussein – Twitter, GitHubNick Nisi – Twitter, GitHub, Website Show Notes: Web performance resources Why speed matters Core Web Vitals docs Interaction to Next Paint (INP) Largest Contentful Paint (LCP) Cumulative Layout Shift (CLS) Measuring Core Web Vitals in the field web-vitals.js library Web Vitals Chrome extension PageSpeed Insights Chrome UX Report Core Web Vitals Tech Report In The Loop by Jake Archibald (🔥🔥🔥 Event Loop Talk referenced on show) Scheduler API Polyfill Scheduler.yield API Origin Trial Speedcurve - Web performance monitoring WebPageTest - Website performance and optimization test WPO stats - Case studies and experiments demonstrating the impact of web performance optimization (WPO) Partytown - Run 3rd Party Scripts from a Web Worker Something missing or broken? PRs welcome!

Take a look, it's in a book

Nick delves into the intricacies of technical book writing with authors Adrienne Braganza Tacke and Dylan Hildenbrand. We talk about the process of working with a publisher, coming up with an outline, actually writing the book, and everything that comes after the book is finished. Leave us a comment Changelog++ members save 2 minutes on this episode because they made the ads disappear. Join today! Sponsors: Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Changelog News – A podcast+newsletter combo that’s brief, entertaining & always on-point. Subscribe today. Featuring: Adrienne Braganza Tacke – Twitter, GitHub, LinkedInDylan Hildenbrand – Mastodon, GitHub, LinkedIn, WebsiteNick Nisi – Twitter, GitHub, Website Show Notes: Adrienne’s books Looks Good to Me: Constructive Code Reviews Coding for Kids: Python: Learn to Code with 50 Awesome Games and Activities Dylan’s book SvelteKit Up and Running Something missing or broken? PRs welcome!

Who's that girl? It's Jess!

Apple kills EU web apps, Amazon launches a JS runtime optimized for serverless workloads & we play a game of 20 (15) questions to welcome Jessica Sachs to the party! Leave us a comment Changelog++ members get a bonus 4 minutes at the end of this episode and zero ads. Join today! Sponsors: Vercel – Zero configuration for over 35 frameworks Vercel is the Frontend Cloud makes it easy for any team to deploy their apps. Today, you can get a 14-day free trial of Vercel Pro, or get a customized Enterprise demo from their team. Visit vercel.com/changelogpod to get started. PowerSync – Don’t build your own sync layer! PowerSync enables an offline-first architecture to make your application real-time and reactive. PowerSync is framework agnostic with open source client SDKs and plugs into your existing database, backend, and application to give you an offline-first/local-first architecture without having to build your own sync layer. Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Featuring: Jerod Santo – Mastodon, Twitter, GitHub, LinkedInAmal Hussein – Twitter, GitHubChristopher Hiller – Mastodon, Twitter, GitHub, WebsiteJessica Sachs – Twitter, GitHub, Website Show Notes: Take the OWA survey ASAP! It’s Official, Apple Kills Web Apps in the EU Arc from The Browser Company LLRT: Amazon’s new JS runtime QuickJS Introducing Tempo • A new date library for JS/TS Something missing or broken? PRs welcome!

Angular moves fast without breaking things

KBall & Amal dive deep with the “Dazzle of Zebras” (possible future band name), Angular team members Jessica Janiuk & Mark “Techson” Thompson. Along with an absolute riot of puns, they cover topics such as Angular’s new deferrable views feature, how the Angular core team handles change, and lessons learned from the AngularJS-Angular 2 debacle that allow Angular to now move fast without breaking things. Leave us a comment Changelog++ members get a bonus 5 minutes at the end of this episode and zero ads. Join today! Sponsors: Vercel – Zero configuration for over 35 frameworks Vercel is the Frontend Cloud makes it easy for any team to deploy their apps. Today, you can get a 14-day free trial of Vercel Pro, or get a customized Enterprise demo from their team. Visit vercel.com/changelogpod to get started. PowerSync – Don’t build your own sync layer! PowerSync enables an offline-first architecture to make your application real-time and reactive. PowerSync is framework agnostic with open source client SDKs and plugs into your existing database, backend, and application to give you an offline-first/local-first architecture without having to build your own sync layer. Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Featuring: Jessica Janiuk – Mark Thompson – Kevin Ball – Twitter, GitHub, LinkedIn, WebsiteAmal Hussein – Twitter, GitHub Show Notes: Changelog Beats! Dance Party angular.dev Deferrable views Angular SSR Angular tutorial Something missing or broken? PRs welcome!

React Server Components 🧐

The week Amal & guest panelist Eric are joined by Dan Abramov as we dig into React Server Components. We learn about why they were created, what problems they solve & how they work to improve application performance. We also dive into the rollout and current support status, the origin story, the community response & walk through the 10+ years of React history which have forever shifted the world of web development. Leave us a comment Changelog++ members save 6 minutes on this episode because they made the ads disappear. Join today! Sponsors: Vercel – Zero configuration for over 35 frameworks Vercel is the Frontend Cloud makes it easy for any team to deploy their apps. Today, you can get a 14-day free trial of Vercel Pro, or get a customized Enterprise demo from their team. Visit vercel.com/changelogpod to get started. PowerSync – Don’t build your own sync layer! PowerSync enables an offline-first architecture to make your application real-time and reactive. PowerSync is framework agnostic with open source client SDKs and plugs into your existing database, backend, and application to give you an offline-first/local-first architecture without having to build your own sync layer. Fly.io – The home of Changelog.com — Deploy your apps and databases close to your users. In minutes you can run your Ruby, Go, Node, Deno, Python, or Elixir app (and databases!) all over the world. No ops required. Learn more at fly.io/changelog and check out the speedrun in their docs. Featuring: Dan Abramov – Twitter, GitHub, WebsiteAmal Hussein – Twitter, GitHubEric Clemmons – Twitter, GitHub Show Notes: React Server Components: No Framework Required! (Dan’s favorite write-up on RSCs) Introduction to React Server Components (YouTube) Data Fetching with React Server Components RFC: React Server Components (Github) Next.js 13: Server Components Data Fetching with React Server Components (YouTube) JavaScript Fatigue Something missing or broken? PRs welcome!