Front-End Fire TJ VanToll, Paige Niedringhaus, Jack Herrington

There’s rarely a dull moment in the web development world and this week is no exception to that rule. 
The episode kicks off with an update on Shopify’s meta framework Hydrogen, which is now built on top of the open source framework, Remix, which Shopify acquired back in October of 2022. Hydrogen now has full Vite support and integration with the Vite plugins ecosystem, an overhaul of its SEO (now powered by Remix), full page caching, and a decrease in the CLI bundle size of 60%. Listeners may wonder why Shopify continues to develop both Hydrogen and Remix, and the general thought is that Hydrogen is targeted specifically to bigger ecommerce companies that need modern routing, data fetching, SSR, and easy to work with Shopify APIs.
Node.js also released its latest version this month, and we’ve already reached v22. Amongst the improvements this version boasts, the most exciting one is probably the support for ESM through an experimental flag,which will eventually become the default. Long live ESM.
In a surprising reversal of course, Vercel announced it’s reverting all edge rendering back to Node.js. Vercel first acknowledges it had too many different “Edge” products, which made it hard for developers to keep straight, but then also it became apparent that even when running a site itself “on the edge”, if the site needed to access a database, it most likely had to go back to a region farther away to fetch the data. Turns out, using Vercel’s original Node.js runtime resulted in faster startups, cheaper costs, and better security than edge functions. Who knew?? 
Today’s episode winds down with a few extra interesting bits of news: the FTC has announced a new rule to ban non compete agreements in the US, and a new feature from the popular React component collection shadcn called “Lift Mode”. “Lift Mode” essentially lets users pick and choose what code to copy from one of shadcn’s “blocks” (pre-made collections of components) for use in their own project. Pretty cool!
News:
Paige - Shopify’s Hydrogen gets Remix(ed)Jack - Vercel moves away from Edge computingTJ - Node.js 22Bonus News:
Lift Mode in shadcnFTC announced a new rule that bans noncompete agreementsWhat Makes Us Happy this Week:
Paige - Shogun TV miniseriesJack - 3 in 1 charging stand for Apple iPhone, watch, and AirPodsTJ - Interview with a Senior JS Dev on YTThanks as always to our sponsor, the Blue Collar Coder channel on YouTube. You can join us in our Discord channel, explore our website and reach us via email, or Tweet us on X @front_end_fire.
Front-end Fire websiteBlue Collar Coder on YouTubeBlue Collar Coder on DiscordReach out via emailTweet at us on X @front_end_fire

The episode starts off with news about Figma’s new Code Connect feature. Code Connect is the bridge between a design system’s component code and Figma, so when viewing components in Figma’s Dev Mode, they’ll have the same real world code that the design system relies on, and Code Connect can also map properties from code to Figma, enabling dynamic and correct snippets. The catch? This sweet new feature is only available to users who are on Figma’s Organization and Enterprise plans.
We continue the news with the release of Next.js 14.2, which has moved Next’s Turbopack (the speedier successor to Webpack) into the release candidate stage with 99.8% of integration tests passing, and all Next.js examples working with it. Other improvements include tree-shaking, optimized CSS, better caching, and improved readability of error messages and stack traces in local development.
The Google Chrome team is back with new updates packed into Chrome v124. There’s two new APIs for handling HTML when a declarative shadow DOM is included in the(primarily used for encapsulation and component-based development). A new websocket stream API designed to make it easier for web sockets to handle a large volume of incoming messages without getting overwhelmed. And the view transitions API gets two new helper functions as well: view transition momentum and document render blocking. After its breakout year last year, the view transitions API seems to have some unstoppable forward momentum.
And to wrap it up, we have another newcomer to the JavaScript package management games: VLT. There’s not a lot to share about VLT so far (there’s a waitlist sign up now for early access), but it’s helmed by some folks who played key roles in the creation of npm, Node.js and the GitHub CLI, and backed by some very big names in the JS world. It’s early days yet, but we’ll keep you posted as more details around VLT emerge. 
News:
Paige - Chrome 124 updatesJack - Figma releases Code ConnectTJ -  Next.js 14.2Bonus News:
VLT enters the JS package management frayWhat Makes Us Happy this Week:
Paige - Hamilton Beach crock potJack - Civil War movie and Fallout TV seriesTJ - Spring weather and Blues StarnoteThanks 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.
Blue Collar Coder on YouTubeBlue Collar Coder on DiscordReach out via emailTweet at us on X @front_end_fire

The group dives into the week’s news right away, starting off with a new open source project from Google called Jpegli. Jpepgli is a new JPEG coding library, which claims to compress images up to 35% smaller while also being able to deliver JPEGs in even higher quality than what is currently available today. The GitHub repo the article links to still looks to be in the early stages of development, but this could be a new solution for JPEGs, which traditionally can take quite a bit to load in the browser depending on their size and resolution.
The next topic for discussion is a company called Val Town that’s raised $5.5M in funding. The premise is that users can write small snippets of code in Val Town’s online platform and Val Town will run them in serverless functions and do things like send HTTP requests, run scheduled cron jobs, send emails, and users of the platform can see the “vals” and comment on them, like them, etc. It remains to be seen how much traction this will generate in the web development world, but it seems like an interesting concept lowering the barrier to entry for folks who aren’t coding professionals.
Jack shares his new declarative routing library for Next.js as another interesting bit of news for the week. Type safe routing in packages like React Router and Tanstack Router are becoming the preferred method of writing routes, but it’s still a very manual process without a lot of autocompletion and input validation that we’ve come to expect in TypeScript code today, and the Declarative Routing library aims to bring that same level of comfort and coding niceties to routes in Next.js. It’s also OSS, so if you’re interested in contributing to open source, check it out!
Finally, Cloudflare made the announcement that they’ve acquired OSS platform PartyKit. PartyKit, started by former Cloudflare employee Sunil Pai, is focused on making real-time, collaborative, multiplayer functionality within apps easy. It handles that aspect through the use of Cloudflare Durable Objects and Cloudflare Workers, so that developers can focus on the logic that makes their apps unique, and it seems like a well-made match to bring PartyKit under the official Cloudflare umbrella. The future roadmap is focused on integrations with popular frameworks like React, Vue, and Angular, so expect to hear more about this in the future.
News:
Paige - Google introduces Jpegli, a new JPEG coding libraryJack - Jack Herrington’s declarative routing libraryTJ - Val Town Raises $5.5M Bonus News:
Cloudflare acquires PartyKitWhat Makes Us Happy this Week:
Paige - Fallout TV seriesJack - PhotographyTJ - The Guest ListThanks 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.
Blue Collar Coder on YouTubeBlue Collar Coder on DiscordReach out via emailTweet at us on X @front_end_fire

Signals have been around in the JavaScript world as early as 2010 when Knockout.js first introduced them, but the past few years they’ve been picking up steam among JS frameworks as a way to effectively manage application state so that developers can focus on the business logic parts of their apps. Now there’s a proposal to make Signals part of the native JavaScript ecosystem, and it’s being backed by some well-known frameworks like Angular, Svelte, Vue, and more. 
Storybook 8 has introduced experimental support for React Server Components. It is noted that server side actions are still only available in Next.js, but it’s great to see RSCs continuing to gain more traction in the world. 
Bun reached v1.1 recently, and while this isn’t usually a big milestone, for Bun it is, because it now supports Windows (and boasts impressive speeds for performance test metrics we’ve come to expect from JS runtimes) and offers a slew of improved Node.js compatibilities. As Bun says itself, it aims to be a drop-in replacement for Node, and if it keeps adding features, support, and speed gains like this, it very well might win that battle. 
Finally, the discussion wraps up with some smaller news stories like Angular and Wiz officially announcing they’ll become one, a lesser known Redux hook that can stand in for complicated useEffect calls, and a crazy, years-long Linux hack that almost made it into the major Linux distributions before it was caught.
News:
Paige - Proposed signals in JSJack - RSC support in Storybook 8TJ - Bun 1.1Bonus News:
Redux createListenerMiddleware avoids using useEffectIt’s official: Angular and Wiz uniteThe crazy XZ hackWhat Makes Us Happy this Week:
Paige - Daylight Uno Table LampJack - Govee Warm White LED Strip LightsTJ - Open source! And Paige’s asset tracker repo.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.
Blue Collar Coder on YouTubeBlue Collar Coder on DiscordReach out via emailTweet at us on X @front_end_fire

It turns out we had a lot of news to cover in this week’s episode. We kicked it off discussing how RedwoodJS is the latest framework to support React Server Components, and has some pretty nice illustrated docs to help devs get started. Then, there was a rapid fire of interesting topics including a great new article about modern CSS from Mr. CSS Tricks himself, Chris Coyier, a new documentary film on the origin story of Node.js from the team that created the React and Ruby on Rails documentaries as well, and a footnote about a new antitrust case the US Department of Justice has leveraged against Apple. At NG Conf earlier in the week, it was announced Google’s internal framework Wiz might be combining with Angular after the two teams successfully worked together to launch Angular signals primitives for 100% of YouTube’s mobile web traffic to great effect. We can only hope the resulting combined framework is renamed to Wangular. And to round it all out, yet another CSS framework has popped up claiming to have all the answers to the ever pervasive feeling that CSS is hard. Will Nue CSS have the good to back up its claim? We’ll have to wait and see, and give the new Promise.withResolvers a spin in the meantime.
News:
Paige - Wiz and Angular combine forcesJack - RedwoodJS supports RSCsTJ - What You Need to Know About Modern CSS, DOJ antitrust case against Apple, and Node.js: The Documentary | An origin storyBonus News:
Nue CSSPromise.withResolvers() MDN Docs and a helpful explainer tweet from Wes BosWhat Makes Us Happy this Week:
Paige - Masters of the Air TV seriesJack - Learning stuff! Like vector DBsTJ - Booking tours of the U.S. Capitol and White House through local repsThanks 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.
Blue Collar Coder on YouTubeBlue Collar Coder on DiscordReach out via emailTweet at us on X @front_end_fire

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 TwoJack - 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.
Blue Collar Coder on YouTubeBlue Collar Coder on DiscordReach out via emailTweet at us on X @front_end_fire