Front-End Fire

We’ve got an exciting episode with our co-host Jack Herrington fresh from his trip to React Conf where the React core team and close collaborators unveiled all the cool things they’ve been working on, including the much anticipated React Compiler and some exciting new features for React Native Expo.

React Compiler is a new Babel-enabled plugin that will allow React apps to handle the memoization and re-rendering of components in an application so that developers won’t have to use the useMemo() and useCallback() hooks themselves. It will essentially save devs from having to think about it (and save them from the foot guns of implementing it incorrectly), and it is completely optional (not built in to React 19) and can be done via incremental adoption across an already existing application.

In related news, Vercel (the creators of Next.js, the most popular React framework in the world) announced they had raised $250m in funding, and the company is currently valued at $3.25b. Just wow! While we can only assume some of that funding will go towards continuing to improve Next.js and their core business of web hosting, they also said they’ll continue to invest heavily in their v0 generative UI system, which currently generates copy-and-paste friendly React code using shadcn/ui and Tailwind CSS that people can use in their projects.

Another popular JavaScript framework, Astro, made a splash as well with its release of Astro 4.8. In addition to the usual performance enhancements and bug fixes, it added experimental support for Astro Actions with niceties like full type-safety, a single global action file that any client component can access, automatically parsing form request objects using a Zod schema, and progressive enhancement on forms.

Finally, the news wraps up with some new features that came out in the Safari 17.5 release.

News:

• Paige - Astro Actions in v4.8
• Jack - React Compiler, React Compiler Playground, Jack’s in-depth video of React Compiler
• TJ - Vercel raises $250m; valued at $3.25b

Bonus News:

• TJ - Safari 17.5

What Makes Us Happy this Week:

• Paige - Parks and Recreation TV series
• Jack - How to ADHD book
• TJ - NYT games

Thanks 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 website
• Blue Collar Coder on YouTube
• Blue Collar Coder on Discord
• Reach out via email
• Tweet at us on X @front_end_fire

On this episode of Front-End Fire we welcomed special guest Jason Lengstorf to chat about the news with us. We opened with a follow-up discussion of the let versus const debate from last week. Jack made a video (see below for link), and we had a bit of fun talking about the controversy.

After that we introduced Effect, a library that dubs itself the missing standard library for TypeScript. Effect just had its first stable release, so we discussed what the library does, what sort of apps it works well in, and how in the world they raised over 2 million dollars in VC money.

Finally, Jason walked us through his latest creative venture: 4 Web Devs 1 App. The concept, as the name implies, is getting four web developers together to build apps using the same technology. The behind the scenes though involves a full production team, over four terrabytes of files per video, and a ton of logistics.

News:

• Jack - const vs. let
• TJ - Effect 3.0
• Jason - 4 Web Devs 1 App

Special Guest: Jason Lengstorf host of Learn with Jason and developer-focused media consultant.

• Jason’s X profile @jlengstorf
• Jason’s YouTube channel
• Learn with Jason site
• Jason’s link tree (jason.energy/links)

What Makes Us Happy this Week:

• Jack - Lightroom
• TJ - Firefox power user kept 7,500 tabs open for two years
• Jason - Node.js

Thanks 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 website
• Blue Collar Coder on YouTube
• Blue Collar Coder on Discord
• Reach out via email
• Tweet at us on X @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 beta
• Jack - TypeScript 5.5 beta
• TJ - GitHub Copilot Workspace

What Makes Us Happy this Week:

• Paige - Kevin Can F**k Himself TV series
• Jack - Depth of Field project
• TJ - Let me be lightning talk from Ryan Florence

Thanks 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 website
• Blue Collar Coder on YouTube
• Blue Collar Coder on Discord
• Reach out via email
• Tweet 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 computing
• TJ - Node.js 22

Bonus News:

• Lift Mode in shadcn
• FTC announced a new rule that bans noncompete agreements

What Makes Us Happy this Week:

• Paige - Shogun TV miniseries
• Jack - 3 in 1 charging stand for Apple iPhone, watch, and AirPods
• TJ - Interview with a Senior JS Dev on YT

Thanks 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 website
• Blue Collar Coder on YouTube
• Blue Collar Coder on Discord
• Reach out via email
• Tweet 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 updates
• Jack - Figma releases Code Connect
• TJ -  Next.js 14.2

Bonus News:

• VLT enters the JS package management fray

What Makes Us Happy this Week:

• Paige - Hamilton Beach crock pot
• Jack - Civil War movie and Fallout TV series
• TJ - Spring weather and Blues Starnote

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 YouTube
• Blue Collar Coder on Discord
• Reach out via email
• Tweet 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 library
• Jack - Jack Herrington’s declarative routing library
• TJ - Val Town Raises $5.5M 

Bonus News:

• Cloudflare acquires PartyKit

What Makes Us Happy this Week:

• Paige - Fallout TV series
• Jack - Photography
• TJ - The Guest List

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 YouTube
• Blue Collar Coder on Discord
• Reach out via email
• Tweet 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 JS
• Jack - RSC support in Storybook 8
• TJ - Bun 1.1

Bonus News:

• Redux createListenerMiddleware avoids using useEffect
• It’s official: Angular and Wiz unite
• The crazy XZ hack

What Makes Us Happy this Week:

• Paige - Daylight Uno Table Lamp
• Jack - Govee Warm White LED Strip Lights
• TJ - 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 YouTube
• Blue Collar Coder on Discord
• Reach out via email
• Tweet 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 forces
• Jack - RedwoodJS supports RSCs
• TJ - What You Need to Know About Modern CSS, DOJ antitrust case against Apple, and Node.js: The Documentary | An origin story

Bonus News:

• Nue CSS
• Promise.withResolvers() MDN Docs and a helpful explainer tweet from Wes Bos

What Makes Us Happy this Week:

• Paige - Masters of the Air TV series
• Jack - Learning stuff! Like vector DBs
• TJ - Booking tours of the U.S. Capitol and White House through local reps

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 YouTube
• Blue Collar Coder on Discord
• Reach out via email
• Tweet 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 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.

• Blue Collar Coder on YouTube
• Blue Collar Coder on Discord
• Reach out via email
• Tweet 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 DB
• Jack - Pigment CSS
• TJ - Speedometer 3.0 announcement. Run the test yourself.

Bonus News:

• Rolldown - the Rust-based JS bundler is in beta
• Chris Coyier’s take on CSS Tricks

What Makes Us Happy this Week:

• Paige - Elgato Prompter
• Jack - Big Shark movie
• TJ - Dune 2 movie

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 YouTube
• Blue Collar Coder on Discord
• Reach out via email
• Tweet at us on X @front_end_fire