Front-End Fire

React 19 beta introduces stable Server Components and Actions for async functions. TypeScript 5.5 beta includes inferred type predicates and reg X support. Discussion on GitHub Co-Pilot workspace AI tool for generating code solutions. Podcast also dives into camera configurations, TV series critique, and coding practices debate.

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

Proposed signals in JS gaining traction among frameworks like Angular, Vue, and Svelte. Storybook 8 introduces support for React Server Components. Bun v1.1 now supports Windows and offers improved Node.js compatibilities. Also, news on Angular and Wiz merging, Redux hooks, and a Linux hack story.

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

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.

In this episode, we explore the latest in web development with Astro unveiling Astro DB, a fully managed, blazing fast SQL-based database that is “ridiculously easy to use.” Next, you may not know the name, but Speedometer just released version 3.0, which further solidifies its status as the browser benchmark for web app responsiveness. Next up is Pigment CSS, a zero-runtime CSS-in-JS solution from the makers of the Material UI component library that works with Next.js’ app router and React Server Components. And to cap it all off, we’ve got new details about Rolldown, the Rust-based version of Rollup, and Chris Coyier’s honest thoughts about what happened to his CSS Tricks site after it was acquired.News:Paige - Astro DBJack - Pigment CSSTJ - Speedometer 3.0 announcement. Run the test yourself.Bonus News:Rolldown - the Rust-based JS bundler is in betaChris Coyier’s take on CSS TricksWhat Makes Us Happy this Week:Paige - Elgato PrompterJack - Big Shark movieTJ - Dune 2 movieThanks 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 podcast discusses Vercel's AI SDK 3.0 for React components, Tailwind CSS going open source, and Safari 17.4 updates. They also mention Elon Musk's legal issues with OpenAI and India's regulations on AI model updates. Plus, the hosts share what makes them happy this week, from the Warrior TV series to the upcoming Dune movie.

We discuss JSR, the new package registry from Deno, and whether it can compete with npm. Next, we talk about Parcel’s new support for macros, which is a handy way to embed build-time logic into your code. After that we some get into some BrowserStack legal drama, and wrap up with some BREAKING NEWS about Apple, PWAs, and the EU. Drama!News:Paige - JSR - Deno’s New JavaScript Package RegistryJack - Parcel v2.12 supports macrosTJ - Deque Systems Sues BrowserStack for Intellectual Property TheftJack - React 19’s useOptimistic hookTJ - So what exactly did Apple break in the EU?BREAKING NEWS: Apple says iOS 17.4 won’t remove Home Screen web apps in the EU after all What Makes Us Happy this Week:Paige - House of Ninjas series on NetflixJack - Dune 2 and Avatar The Last Airbender on NetflixTJ - Product launch at work Notecard LoRaWhite House urges developers to dump C and C++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