Front-End Fire

News: Google’s New Web Vitals, AnalogJS Reaches 1.0, and is CSS-from-JS a Thing?

Mar 25, 2024

This podcast discusses the new trend of writing CSS-only React components, AnalogJS reaching 1.0 with Vite integration, Chrome's update to web vital metrics, and a fun API called Emojispolsion. It explores the challenges and benefits of MistCSS and Stylin, compares AnalogJS with other meta frameworks, and showcases an entertaining demo site with animated emoji explosions.

37:29

AI Summary

AI Chapters

Episode notes

Podcast summary created with Snipd AI

Quick takeaways

New trend in using CSS as the source of truth for JavaScript with Mist CSS facing integration issues and promises not fulfilled.

Google's shift from first input delay to interaction to next paint aims to evaluate websites' performance consistently over time.

Deep dives

New Trend in CSS and JavaScript Relationship - Mist CSS Library

A new trend in using CSS as the source of truth for JavaScript is discussed, focusing on the Mist CSS library. This approach involves creating a .mist.css file to generate a .tss file for component rendering. While Mist CSS generated hype, it faced issues with promises not being fulfilled and lack of integration with the development model.

Introduction

4min

Exploring Styling Tool for Evolved CSS Manipulation

4min

Discussion on the Release of AnalogJS 1.0 and its Features for Angular Developers

5min

Google's Shift in Core Web Vitals Measurement

8min

Exploring Emoji Explosions and Code Showcases

12min

Safety Concerns at United Airlines and NCAA Tournament Excitement

4min

CSS-in-JS has been around for years now, but have you tried JS-from-CSS? This week we talk about the new alternative trend sweeping through the web development community: writing only CSS to create a fully styled and typed React component. Two early frontrunners in this race are MistCSS and Stylin, and we’ll keep an eye out for if this new twist on writing JSX components catches on. AnalogJS, the meta-framework for Angular we covered several months ago, announces release 1.0 with all the bells and whistles we’ve come to expect from other meta frameworks: Vite integration, filesystem routing, SSR/SSG, server routes, tRPC support, etc. and plans for future integrations with libraries like Astro, Nx, Vitest and Storybook. Chrome officially replaces the First Input Delay (FID) web vital metric with Interaction to Next Paint (INP) to try to do a better job of evaluating a webpage’s performance beyond just the first user interaction. And to round the episode out, an API that is pure fun to play with on the demo site: Emojispolsion. It’s worth a look just to see how creative the demos get (hint: the very last one is extra far out).

News:

Paige - AnalogJS 1.0
Jack - MistCSS and Stylin
TJ - Interaction to Next Paint (INP) is a Core Web Vital (check your own site at pagespeed.web.dev) and Chrome Perf Tooling in 2024

Bonus News:

Emojispolsion API demo site

What Makes Us Happy this Week:

Paige - iPhone 15 Pro and Dune: Part Two
Jack - Downfall: The Case Against Boeing documentary and https://www.ismyplanea737max.com/
TJ - NCAA tournament

Thanks as always to our sponsor, the Blue Collar Coder channel on YouTube. You can join us in our Discord channel, reach out to us via email or Tweet us on X @front_end_fire.

Remember Everything You Learn from Podcasts

Save insights instantly, chat with episodes, and build lasting knowledge - all powered by AI.

Front-End Fire

News: Google’s New Web Vitals, AnalogJS Reaches 1.0, and is CSS-from-JS a Thing?

Podcast summary created with Snipd AI

Quick takeaways

Deep dives

New Trend in CSS and JavaScript Relationship - Mist CSS Library

An Alternative to Mist CSS - Styling Library

Google Search Core Web Vitals Update

Chrome's Integration of Lighthouse Tests

Remember Everything You Learn from Podcasts