Front-End Fire

This week we’re all about beta releases and technical previews of AI that will make us even more productive coders.Since the release of React 18, just over 2 years ago, the React team’s been hard at work, and at the end of April, React 19 beta dropped on npm. This new version brings Server Components and Server Actions out from behind the canary channel, stating they are now stable and will not break between major versions going forward. In addition to this, v19 introduces Actions: hooks for supporting asynchronous functions in transitions like form submission, designed to handle pending, error and optimistic updates in the UI automatically. There’s also a new use API, which can use Suspense to wait for promises to resolve (or contexts to be available) before rendering, and it can be done conditionally (something that hooks cannot). Additionally, React 19 offers better hydration errors, support for documentation metadata, stylesheets, asynchronous scripts, preloading resources, and custom elements. It’s a lot to take in, but there are upgrade guides and code mods to help developers itching to get started trying out this latest version of React.Not to be outdone, TypeScript also released v5.5 beta as well! Highlights for this new release include: inferred type predicates (good for when you filter null values out of an array but TypeScript yells because it doesn’t realize you have), regular expression syntax checking (it can’t tell you if your regex will actually catch what you want it to, but will tell you if your expression is invalid), and type imports in JSDoc.And GitHub expands on the capabilities of Copilot with the announcement of GitHub Copilot Workspaces: a Copilot-native development environment. Within Copilot Workspaces, developers can brainstorm, plan, build, test, and run code in natural language. Inside of a GitHub repo or issue, devs can tell Copilot agents to formulate a plan to fix the error or build a new feature, Copilot Workspaces offers a plan based on its understanding of the entire codebase, issue replies, and more, and everything from its plan to the code is entirely editable. Once a user likes the plan, they can run the code directly in Copilot Workspace and tweak until happy with the final result. It’s a lofty goal to be sure (and won’t be perfect right off the bat), but in a few years time this could be the new way we all code.News:Paige - React 19 betaJack - TypeScript 5.5 betaTJ - GitHub Copilot WorkspaceWhat Makes Us Happy this Week:Paige - Kevin Can F**k Himself TV seriesJack - Depth of Field projectTJ - Let me be lightning talk from Ryan FlorenceThanks 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

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 2024Bonus News:Emojispolsion API demo siteWhat 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 tournamentThanks 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

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

Today we discuss Vercel’s latest offering: AI SDK 3.0, which streams React components from LLMs to deliver richer user experiences than text-only chatbots. Then we dive into the world of modern styling as Tailwind CSS drops its latest gem - version 4.0, now open source for community exploration. And then finally we talk about the latest improvements in Safari 17.4. Plus, stay tuned for Elon Musk’s legal saga with OpenAI and the Indian government’s new stance on AI model updates.News:Paige - Tailwind CSS v4 goes open sourceJack - Vercel’s AI SDK 3.0 with Generative UI supportTJ - Safari 17.4 upgradesBonus News:Elon Musk Suing OpenAIIndia requiring government approval for AI model updatesWhat Makes Us Happy this Week:Paige - Springtime is comingJack - Warrior TV seriesTJ - Dune 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

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

News:Paige - Hono v4 takes aim at full-stack frameworksJack - Storybook 8TJ - An update on Apple breaking PWAs in the EUBonus News:Google cut a deal with Reddit for AI training dataNode.js unveils its new mascot Rocket TurtleWhat Makes Us Happy this Week:Paige - Learning watercolor painting and The Fourth Wing novelJack - Drive to Survive season 6TJ - Detroit Red WingsJoin Us: 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

Special Guest(s):Kelvin Omereshone, lead maintainer of Sails.js and creator of The Boring JavaScript StackMain Topic:The Boring JavaScript StackRelevant Links:The Boring Stack repoThe Boring Stack docsKelvin on TwitterKelvin on YouTubeKelvin’s websiteSailsconf keynote announcing The Boring StackWhy the nameWho is Boring for?Sails.jsSails repoInertia.jsSailscastsJoin Us: 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

News:Paige - Nx Project CrystalJack - Simple Stack StreamingTJ - Apple breaking PWAs in the EUBonus News:Mozilla downsizes as it refocuses on Firefox and AIWhat Makes Us Happy this Week:Paige - Mr. & Mrs. Smith TV seriesJack - The Murderbot Diaries book seriesTJ - Casey Neistat’s video on the Apple Vision ProJoin Us: 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

News:Paige - Vite 5.1Jack - LLRT and Million LintTJ - Interop 2024 & wpt.fyiBonus News:React Native visionOS for the Apple Vision ProjQuery 4 betaWhat Makes Us Happy this Week:Paige - A Court of Mist and Fury book (sequel to A Court of Thorns and Roses)Jack - A Libertarian Walks into a Bear bookTJ - Only Murders in the BuildingJoin Us: 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

Special Guest(s):Rachel Nabors, formerly of React at Meta known for their work on reactnative.dev and react.dev Evan Bacon, Engineering Manager at ExpoMatt Carroll, Developer Advocate React at MetaRelevant Links:The Two Reacts blog post by Dan AbramovRachel Nabors on Twitter, @rachelnaborsEvan Bacon on Twitter, @BaconbrixMatt Carroll on Twitter, @mattcarrollcodeJoin Us: 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

News:Paige - Code editor Zed goes open sourceJack - “Hey Code” in VS CodeTJ - Apple changes to iOS, Safari, and the App Store in the EUMozilla says Apple’s new browser rules are ‘as painful as possible’ for FirefoxBonus News:Open PropsWhat Makes Us Happy this Week:Paige - Kindle Paperwhite Jack - Oura smart ringTJ - One Piece on NetflixJoin Us: 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

Million.js:  https://million.devDiscord: http://million.dev/chat Aiden Bai:Website: https://aidenybai.com/Twitter: https://twitter.com/aidenybaiLinkedin: https://www.linkedin.com/in/aidenbai/Tobiloba Adedeji:Website: https://www.biodrop.io/tobySolutionsTwitter: https://twitter.com/toby_solutionsLinkedin: https://www.linkedin.com/in/tobiloba-adedeji

News:Paige - New Web Components features from the W3CJack - Code HikeTJ - Apple Vision Pro and Apple Vision Pro dramaBonus News:Bun Shell - experimental shell scripting in JSWhat Makes Us Happy this Week:Paige - ColorIt Mandalas coloring bookJack - Brothers Sun TV seriesTJ - Lugeing!Join Us: 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

News:Paige - ReScript 11.0 - a TS competitorJack - Donut componentsMatteo Frana: React, where are you going?Cassidy Williams: Kind of annoyed at ReactTJ - OpenAI launches a GPT Store & Netlify’s exampleWhat Makes Us Happy this Week:Paige - Fargo TV series and JustThe Recipe.comJack - The Marvels movieTJ - Paprika appJoin Us: 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

News:Paige - Superglue - Rails with React & Redux frameworkJack - Svelte 5 previewTJ - NY Times is Suing OpenAIBonus news:KnipWhat Makes Us Happy this Week:Paige - A Court of Thorns and Roses bookJack - What If…? season 2TJ - CES Join Us: 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