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.

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

Front-End Fire