913: NEWS: Remix drops React, Safari 26 CSS + mega fast Vite and TypeSCript

Wes and CJ break down the latest web dev news, including big changes in Safari 26, TypeScript Native Previews, and Remix dropping React. They also chat about new proposals from TC39, Vite 7 beta, and a surprise project from the Astro team. Show Notes 00:00 Welcome to Syntax! 00:41 Safari WWDC. 01:05 SVG Favicons. 02:01 Every site can be a web app on iOS and iPadOS. 03:08 WebGPU in Safari. 08:02 Lots of CSS goodies. @Una Tweet. 10:19 Remix 3 dropping React. Wake Up Remix. @mjackson Tweet. 17:40 Typescript Native Preview. @drosenwasser Tweet. Microsoft Blog: Announcing TypeScript Native Previews. 20:53 Cursor 1.0. 29:12 TC39 Advances Several Proposals to Stage 4. 29:51 Array.fromAsync. 31:15 Error.isError. 32:14 Explicit Resource Management: using. 36:53 Astro Creators working on an email client. @FredKSchott Tweet. 39:23 Announcing Rolldown-Vite. Voidzero. Compatibility. 44:43 Vite 7 in Beta. 46:04 Angular v20 Released. 47:30 Take the State of CSS Survey! 48:40 Brought to you by Sentry.io. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Wes Bos?

  Welcome to Syntax. Today, we got a episode on news that's going on in the web development. Crazy amount of news has dropped in the last week or two, and we're here to round it up for you. My name is Wes and with me, Scott's out today. We got CJ. How's it going CJ?

• 0:15Speaker 01

  It's good. Hello. Glad to be here. Glad to go over all this stuff. There's a lot going on. So yeah, it's exciting.

• 0:20Wes Bos?

  Yeah, it's funny. Scott and I were saying like, I don't know, maybe like two weeks ago, like, oh, things were kind of a little bit sluggish in the news front. And then all of a sudden, I feel like in the last two weeks, there's so much has has sort of hit us. So let's get on into it.

• 0:41Wes Bos?

  First thing we have here is WWDC announced that Safari 26. So this is a little bit odd, but they're Apple's renaming everything to correspond with the year. And now Safari 20, we're on what 17 or 18 right now, jumping to 26. But with that comes a whole bunch of new APIs, which is actually pretty exciting. So first one is SVG Fab Icons. I'm really excited about this. So I run this little website called fab.farm, which just gives you a quick little emoji fab icon if you're just doing a demo. Because I hate that stupid little cannot find fabicon.io message in my terminal.

• 1:25Wes Bos?

  And I hate having to like, find an image every single time. So there's this little hack you can do with the inline SVG. And I've just made a little web service to serve them up. However, Safari has not supported SVG. So I've always had to like, run a something that converts it to PNG on the server. And then finally, I'm able to not deprecate that, but I'm now able to serve up SVGs to all of my Safari users.

• 1:50Speaker 01

  Yeah, that's great. I've been using that trick. Like, I didn't know you had this site, but I know that you can like embed the data URL for SVG, but I had no idea that Safari didn't support it. So yeah, that's awesome that.

• 2:01Wes Bos?

  And it's actually kind of important because they, along with that, they also announced that a bunch of the like, any site, this one, any site can be a web app now. So Safari has long been not a supporter of progressive web apps. But you are now able to basically install any app to your home screen, whether they have the meta tag or not. And the Safari desktop also does something similar to this as well. And it's actually kind of nice to be able to have apps put on your dock or on your iPhone home screen.

• 2:33Speaker 01

  Definitely. Yeah, I've used that just like on my phone, just like launching sites. Like if I want to get to the weather, but I don't want to use a weather app, I'll install it as an app. So I'm sure that's just as useful with Safari, but I don't use Safari. So all of this stuff is new to me.

• 2:47Wes Bos?

  Oh, yeah. Yeah, it's it's super handy, especially like my kids have like iPads and they've we've got like so many stupid apps on there. And like deleting them alone takes like like 30 seconds per app. It's so slow and I just I want to nuke them all. And I was like, I just wish that this was a webpage that I could bookmark. So now now we can.

• 3:08Speaker 01

  Nice.

• 3:10Wes Bos?

  Web GPU has landed in Safari 26. So this is really exciting because Web GPU is, they say here, the successor to WebGL. So WebGL is the ability to run lower level graphics and shaders and things like that in the browser. But with Web GPU, you get a little bit more access to like the bare, the lower level metal. And this is both really good for for graphics and games and stuff like that. But it's also very good for doing things that are computationally expensive, like running local AI models. So Transformers JS is a package that you can run local AI models in JavaScript. So in the browser and Node and Dino, whatever.

• 3:55Wes Bos?

  And Web GPU speeds them up like significantly. I think I had a couple of examples where I was generating alt text. You give it an image, it generates alt text for an image. And it was taking about 11 seconds for an image, which is like cool demo. But like, that's not real world, right?

• 4:12Speaker 01

  Yeah.

• 4:12Wes Bos?

  And it brought it down to like something like 300 milliseconds or 600 milliseconds for generating alt text for an image, which starts to get inside of the like, hmm, that's actually pretty fast. And if I were to resize it, make a little smaller, you probably could get that within 150 milliseconds.

• 4:31Speaker 01

  Nice. So I hadn't heard of WebGPU. Like, I'm familiar with WebGL. Like, I know that's what like 3JS is built off of and stuff like that. But is WebGPU a standard? Like, are other browsers implementing it as well?

• 4:42Wes Bos?

  Yes. Yeah, WebGPU is a new web standard that's sort of the successor to WebGL.

• 4:49Speaker 01

  Okay.

• 4:49Wes Bos?

  And like 3JS can use it, BabylonJS, like all these 3D libraries, but then as well as Transformers JS and Onyx Runtime. Those are the two like machine learning AI model runtimes.

• 5:03Speaker 01

  Yeah.

• 5:04Wes Bos?

  And and they can then use that. So now it's supported in Safari. It's in Chrome already. And of course, not in Safari just yet. Or hopefully, hopefully, it will come very soon, which kills me.

• 5:18Wes Bos?

  Yeah. Or sorry, what did I say?

• 5:20Speaker 01

  You said not in Safari.

• 5:21Wes Bos?

  Oh, obviously, it's in Safari. This is what we're talking about. Firefox, yeah.

• 5:24Speaker 01

  It's not in Firefox. Okay, okay.

• 5:26Wes Bos?

  Yeah, it kills me because I saw Brendan, like probably 12, 13, 15 years ago, I saw Brendan Icke at a conference and he was demoing WebGL. And he was showing like Doom in the browser. And he's like, this is the future, man. And Firefox has strayed from those those origins.

• 5:46Speaker 01

  Yeah, hopefully, they come around to it. I guess this this also is aligned with like, maybe it was like maybe a year ago or two years ago that Chrome released Window.ai. Like the actual like LLM inside the browser, but with WebGPU, it's only going to get better because the LLMs run much better on directly on GPU. It's faster.

• 6:10Wes Bos?

  Yeah, like significantly faster, even things like being able to calculate embeddings in the client. So if you want to be able to like find something that is similar, this is how a lot of like code agents work. Or if you want to, if we wanted to embed every single syntax show and then find like similar episodes or group them together via tags, you'd have to convert them all to embeddings first, right? And now that it's fast enough, you're you can start doing a lot of that computing in the browser. Not necessarily, you could do all the episodes in the browser. You probably don't want to. You probably want to put that in a database. But what somebody types or as they're typing it, you can just convert those to embeddings on every keystroke now and then show them the results.

• 6:55Wes Bos?

  Pretty quickly.

• 6:57Speaker 01

  Yeah, that's huge. I think especially it's going to enable some architectures where you're not as dependent on a server for AI or for embeddings like that. So pages are going to be faster. So yeah, that's cool.

• 7:06Wes Bos?

  Firefox has got it behind a flag and they have for five, six, seven years.

• 7:14Speaker 01

  So yeah, it's not stable yet, but.

• 7:17Wes Bos?

  Yeah, hopefully soon, hopefully soon.

• 7:19Speaker 01

  And I guess the, so we're on Can I use and it's listing Safari as technical preview, but I guess with version 26, does that bring it in to stable? Or is it still technical preview?

• 7:29Wes Bos?

  Once Safari 26 is released, then it will be stable, which is exciting because like technology preview is, yeah, we're playing with it, whatever. They've had it in technology preview for a long time and it was behind a flag for a while. And then they took it off of a flag last month, but like you don't, you never know when it's actually going to be released to the masses. But it's huge, especially because like that means it's on the iPhone and that means that you can have access to the iPhone metal via the browser.

• 8:01Speaker 01

  Right. That's great.

• 8:02Wes Bos?

  A bunch of CSS goodies. So Una Kravitz had a really good thread of all the things that are now landing in Safari. So anchor positioning, being able to position items based on another item. So they don't have to be in the same container. They don't have to be relative to each other. You can simply just like place this thing at the top right-hand corner over and up 20 pixels based on this other element. And that's, that's amazing for tooltips and for pop over and things like that. She did just tweet a bunch of stuff around the implementation is not 100% to spec, which is just like Safari.

• 8:43Wes Bos?

  Come on. So hopefully that changes before launch, but it's kind of disappointing to see.

• 8:48Speaker 01

  Okay.

• 8:49Wes Bos?

  But scroll-driven animations, have you dipped into that at all?

• 8:52Speaker 01

  I have not. No, what's going on there?

• 8:54Wes Bos?

  Yeah, scroll-driven animations is the ability to scrub a keyframe. So you have a keyframe that goes from 0 to 100%. And normally, you use time to scrub that keyframe, maybe over 10 seconds. Scroll-driven animations allows you to scrub that keyframe via where you are scrolled in the DOM. So you can say, "Start when this element pops into the viewport, and then stop when it is 50% out of the viewport." It's really cool. I'm really excited about it. I have it. There's a JavaScript API and there's a CSS API. So I've used the JavaScript API with a polyfill in an upcoming site for one of my courses, and it looks really cool.

• 9:39Speaker 01

  Nice.

• 9:40Wes Bos?

  Text wrap, pretty, progress function, margin trim, contrast color, a whole bunch of just little things that we've been sort of waiting on. And they're all landing all at once in Safari, which I'm excited about.

• 9:53Speaker 01

  Yeah, it's a huge release for Safari. All this stuff, we've been talking about Apple lagging along for the longest time.

• 9:59Wes Bos?

  Yeah.

• 10:00Speaker 01

  All of a sudden, they just give us everything.

• 10:02Wes Bos?

  Yeah, yeah, they've been pretty good at, in the last couple of years. Like, there's still a lot of negative. People get pissed every time I talk anything positive about Safari. But they've been doing well. A lot of the CSS stuff has been coming out. In React news, I guess you can say it. Remix has announced that Remix is no longer going to be React-based. So it's kind of a very confusing thing. Because in the very early days, we had React Router. And we had a couple of versions of that. And then it got turned into, or they had another thing called Reach Router. And then that got merged back into React Router. And then out of React Router came Remix,

• 10:46Wes Bos?

  which is like the full stack application, meaning that you can do loaders and server-side rendering and all of that stuff. And then React Router 7...

• 10:57Wes Bos?

  Remix went back into it and then Remix was just dead. And now they've announced that Remix 3 is going to be its own thing. It's going to be, it's, it's, it's a fork of Preact, so it's not going to be React at all. It's going to be minimal dependencies, no build tool, totally built on web APIs. So I've been, I've been watching Michael Jackson, who's the, one of the maintainers of React Router and Remix on, on his GitHub. And he's been posting all of these packages that are all built around web standards, you know? Streaming, file upload, all of these web APIs.

• 11:41Wes Bos?

  And I was like, they're working on something there. And then they recently announced that like React Router is going to be its own thing, but Remix now is going to be a totally new framework.

• 11:54Wes Bos?

  From scratch, that's going to be very simple and no build tools, all standard, which is, is kind of crazy if you think about it. I'm not sure what you think about it.

• 12:04Speaker 01

  Yeah, it's really, I think, I mean, I think it's cool. I think there's potentially always room for a new framework, especially the people that have been on the ground floor, like working on these things. And they have ideas about how to do it better. So kind of starting, starting from scratch makes it a whole lot easier because you don't have all the baggage of the, the previous stuff. The only issue I have is it's so confusing because people are going to hear Remix and not know which one people are talking about. Like, I think the easiest way to think about it right now is it's a brand new framework, right? It could technically, it could have a different name. And that's exciting. Their ideas around how it can be web standards based. And it's actually based on, I don't know if you mentioned it, but it's based on Preact. It's not React.

• 12:46Speaker 01

  And so that has a whole other rabbit hole of like potential compatibility issues of like, maybe you're used to all these React libraries, but maybe they're not directly compatible with Preact. So that's, there's an issue there.

• 12:59Wes Bos?

  They're forking Preact as well. It's not even going to be based on it. So like, I'm wondering what that will look like and will it use JSX? And, and how do you use JSX if you can't? You don't have a build tool, right? Like, is it going to be entirely a runtime thing? Maybe. That's like, they've been talking a lot about like, the old days of PHP. You just upload a file, you visit that URL and the thing runs. So maybe they'll throw some sort of templating engine as part of the request that renders it out on the server. Like, we've been there, right? We have lots of server rendered template languages that work like that.

• 13:39Speaker 01

  And maybe that's, I mean, and I haven't dug into the announcement too much, but maybe that is kind of where they're leaning is like more on the server in that like it's basic, basically if you do write JSX, it would be transpiled on request versus like needing a build tool to transpile it ahead of time.

• 13:55Wes Bos?

  Yeah, so that might be it, actually. It's just like, like PHP templates and then there's going to be no, no hot reloading. They did say you can add VEIT if, if you want to. So Evan Yu, who's a creator of VEIT, was like, hmm, interesting, interesting move. So no HMR, which is hot module reloading. That's like when you make a change in your editor, you just, you save it and your updates are immediately in the browser. Just fast reloads, minimal tooling, zero, zero critical depths. So just trying to make it as fast as possible. But like, I love hot module reloading, you know?

• 14:32Speaker 01

  I think you need it for stateful applications too. Like if you're work, you're deep in a deeply nested component, you've changed the state a lot. If the page reloads, you lose that state potentially if you don't have HMR. So I'm curious what they're going to do there.

• 14:44Wes Bos?

  Remix also didn't have HMR for the longest time and then they did add it. So I don't know if I, if I buy that. Cause like, I don't want to have to tab and refresh every single time that it's changed. But maybe, one angle I haven't really thought of is maybe they're getting really dialed in with the Chrome DevTools. Like maybe there's, you know how like Chrome DevTools has like workspaces? And they have all these tools for mapping to your local file system. Like, nobody really uses those tools. I've, I've used them a few times here and there, but. Maybe that's what they're they're sort of betting on. We're gonna have Michael Jackson on the podcast when in a couple of months, once they're they're a little closer and I

• 15:26Wes Bos?

  have tickets to Remix Koff coming up. So I'm curious to see what what's all going down here. One thing we didn't even say was they're making it LLM first, or like model friendly, meaning that this type of code should be easy to generate with an LLM. And it it just has me thinking. So the Remix folks were acquired by Shopify a while ago. Shopify has been trying to do their like headless storefront several times now, and it hasn't really caught on in the mainstream as big as like liquid templating is in Shopify world.

• 16:05Wes Bos?

  So it just has me thinking like they're probably looking at people just chat typing these apps into like V zero and lovable and Bolt. And Shopify is probably saying, we need something like that for Shopify stores. Otherwise, somebody's going to come eat our lunch. Someone's gonna launch the like Shopify, but you just type what you want into the box and it creates a store. Yeah, so we need something that does that. And we need something that does server rendering, it does logic, it does all of that stuff. So if they can build a framework that is so dead nut simple that you can just type what you want and it generates it. Maybe that's the the move here that they're they're not talking about.

• 16:49Speaker 01

  I think you're dead on there. Because yeah, that's, that's, I think, especially being able to start from the ground up, like not having all the baggage of next JS and the baggage of like even some of like the React world. So yeah, I think you're dead on there. It's, it's, if they could do this and they do it right. Yeah, it's gonna make it really easy to just instantly generate apps, especially for stores, especially because it's yeah, it's from from the Shopify folks. Yeah.

• 17:12Wes Bos?

  Yeah, like the e commerce thing is not really something that I've seen. It's, it's all been like this AI generated apps, you know, but I haven't seen a ton of and like, granted, I'm not in the like Shopify space as much as other people are, but I haven't seen the like just boop, boop, boop type and make a storefront that you want.

• 17:33Speaker 01

  Yeah.

• 17:34Wes Bos?

  So, well, we'll see. I'm pretty, pretty interested in how all of that works as well.

• 17:40Speaker 01

  Yeah. Next up, Microsoft announced the TypeScript native previews. So we actually had Andrus Halsberg and Daniel Rosenwasser on the podcast with Wes and Scott to announce the fact that the TypeScript compiler was going to be written in Go. And they have announced that they now have a preview available that you can try in your apps. So npm install dash capital D at TypeScript slash native dash preview. And in their blog post, they give you some instructions on how you can start using this native TypeScript compiler instead of the one that's written in TypeScript. And so far, people are reporting really, really big speed up. So there's a tweet from Daniel Rosenwasser that shows running the native

• 18:21Speaker 01

  preview against the Blue Sky Social app had a 6.5x speed up in compile time. And that's huge.

• 18:30Wes Bos?

  That's a really big, like, it's a React Native and a React desktop application. That's rather large, a big part of it written by Dan Abramov. So that's, that's big, man. They, and I've been seeing these like here and there, all of these different speed up improvements. And I've seen them anywhere from like 4x up to like, I think I saw a couple that were eight, eight and a half X. And, and that's just the preview, right? They've, they said when they came on, they're hoping to see 10x improvement, which is absolutely wild. And it's also really neat to like, see how long these like big apps actually take, you know, like, like my apps like maybe take seconds to compile, you know, but like

• 19:15Wes Bos?

  some of these big apps where it's significant time, like a minute, some of these are minutes to compile simply just to make it from TypeScript to JavaScript. And that's a huge speed up. But also, like, one crazy thing we talked about on the, when we had them on the podcast was it's not just like build time, it's also faster inference. It's also that the VS Code extension will be much faster. So if it can just like infer your entire code base in

• 19:45Wes Bos?

  Like a split second, that's going to be absolutely huge for both for your auto completions, but also now AI is able to figure out what are the types in this entire like you can pretty much get a skeleton of what your entire application looks like by ripping through and grabbing all of the types of your application. So being able to give that context to the AI is is absolutely huge for getting better AI results. And I think that that's going to be really big, especially as like we're starting to move into this space where people are not just like building smaller stuff with AI, but they're just like, build this entire feature that takes 40 minutes. This AI

• 20:30Wes Bos?

  agent goes off in the background and does it and then comes back. So pretty excited about this as well.

• 20:36Speaker 01

  Yeah, exciting stuff. I mean, I'm just glad to see a preview already.

• 20:40Wes Bos?

  Yeah, it seems like fast.

• 20:42Speaker 01

  Yeah, they announced it, but now we're already seeing these gains. And I mean, the fact that you can run it on a production code base like Blue Sky and it works and it's faster. That's awesome.

• 20:51Wes Bos?

  Yeah, that's, that's great. Cursor launched a 1.0, which is pretty cool. They have a bunch of features in there. The background agents is probably the most interesting to me. So the idea with the background agent is that you can give it a task and it actually runs it in the Cursor Cloud, which has privacy concerns, right? So now you're taking your code base, you're running it on Cursor's cloud. And then what it does, it will go off and just continually run items for it. So we, I got access to it as part of Sentry is like an enterprise customer for Cursor. So we got access to that as well as the Slack bot.

• 21:37Wes Bos?

  And I think the idea with these like background agents is that you can give it like a document with all of your different things that need to happen. Like, like I gave it a feature where I'm like, please build a related episodes. You gotta be able to embed them all, then put them in the database, then add the tags, run a cron job that does it every day or so. And, and then I just set it off. And I think maybe, I don't know, half an hour, 45 minutes later, it came back and it just like built the entire feature. Obviously wasn't perfect, but I think that's the next step that a lot of people are taking with these agents where they're simply just not, you're not just typing what you want, sitting there

• 22:20Wes Bos?

  and waiting for it to happen. You're just saying, go build this feature. And then you're running multiple of them in parallel where you're saying like, I got nine features I need to build. You can run nine of these all at once and they'll go off in the background and do it. And it's kind of cool because like, there's a lot of players in this like background agent space right now, right? There's OpenAI has, has Codex or Codex CLI. Claude has Claude, Claude Code, or I think it's called, yeah, Claude Code. I was playing with that yesterday as well. There's obviously Devon, GitHub Copilot has their agents thing that runs on GitHub. So there's a lot of people working in this space of give it

• 23:02Wes Bos?

  a whole bunch of tasks to do, or a task that is broken down into many things, go off and do it. But I really like this because you're able to go into Cursor and like kind of peek in it, peek in at any time and you get the whole cursor experience. You can, it's essentially just a streaming in an entire VS Code instance. So you can see the whole chat, you can see all the diffs, you can roll things back. And to me, it's, it's kind of a best of both worlds where you get, you still get the VS Code UI if you need to be able to jump into it.

• 23:35Speaker 01

  That's great. I will say though, like the Slack channel was full of messages yesterday.

• 23:42Speaker 01

  But it was, it was fun to see like eventually the bot came back and I was like, oh, here's, here's your feature. Can you speak to that a little bit? Like you mentioned, like you can, is there like a web dashboard you log into and you can see what this agent has been doing? Is that what you're saying? Or is it locally that you pull it down? Okay.

• 23:57Wes Bos?

  It's not a web dashboard. It's in your cursor settings. So you go into your cursor setting. Here, maybe I can, can even show it. One sec. Um, yeah. So here's an example of of what I did. So in the Slack channel, this is not in here. In the Slack channel, I just pinged it. And I think the idea is that you ping it in the Slack channel. It's part of your like linear. You could tag it in a GitHub issue. Say hit cursor. Can you take this one on? Or GitHub Copilot? Can you take this project on? And it will sort of take the issue and go off and do it. So I just said, can you take on this feature? And then I linked off to the feature and I'll show you what the document actually was as well.

• 24:37Wes Bos?

  So I basically just rambled of what I wanted a feature into ChatGPT and asked it to create a PRD, product requirement document. And then it made the whole product requirement document for me. And then I went into cursor. I said, can you take this feature on? It read it out. And then it, look at this, 62 earlier messages. So it probably ran close to 100 prompts, which I cannot fathom how any of these companies are making money, or how they plan to make money. Because this is expensive. It's super expensive. I tried Claude Code. I put five bucks in there. I burned through that five bucks in like minutes, just doing a

• 25:23Wes Bos?

  whole bunch of features. And yeah, you can, you can pay like 200 bucks to get unlimited, but they are certainly not making any money off of me.

• 25:31Speaker 01

  Yeah, I would say like, it's impressive that it can go off and do all of this. But you're, you're, I think you've hit on a crucial point there. Like, right now, they're offering it for free and preview, but eventually, you might end up paying the same amount you would pay a dev to go do this, like for the amount of time it takes to run the, run the AI models and everything.

• 25:47Wes Bos?

  Yeah, yeah, I'm curious. I, I don't know that it will ever be as expensive as a dev, but there's a lot of people who, who think 600 bucks a month for, for one of these tools is not a lot of money, which kind of kills me in that it is furthering the like divide of people being able to get into this coding. It used to be like notepad and, and like a dream. You can go build the stuff. And now it's like, well, you, you have to spend, I don't know, minimum 80 bucks a month on all of these, these different services. Otherwise, you're not going to be nearly as, as productive as, as anyone. But this is what did, this is really cool, because this, the background agent, I'm able to just like,

• 26:31Wes Bos?

  Look like tap into it and then I can I get like the the UI that I'm comfortable with, which the son of the a lot of the CLI tools I you don't necessarily get that you can't open diffs and whatnot, but I feel like this UI in ideas is better.

• 26:48Speaker 01

  Hmm. It is cool to see. Yeah. So anybody listening on the pod like basically you've got the the tree view of all the files that have changed. You've got your main area that shows you like each of the the changed files and like what needed to happen for each. And then on the right hand side is almost like your chat window and cursor that shows like each of the prompts one by one that went through and and made all of these changes. So yeah, it's I mean, if you've been using cursor, it's like a very intuitive UI to you like you know exactly what you're looking at.

• 27:17Wes Bos?

  Yeah, I I did post on on Twitter yesterday. I'm like, do people really like the CLI is better? And a lot of people were saying like, it's not that you even need the CLI like you know, or sorry, it's not that you don't even need the UI. You basically just these are just API endpoints. There's their bash scripts and you you want to be able to call it from something. You want to be able to just call it from a node process and it will go off and run it with this. They they essentially have to run like an entire VS Code instance in the cloud, I think, in order for this to work. So kind of interesting this whole whole new world of of like, not just it used to be tab, tab, tab, then it was type type

• 28:00Wes Bos?

  to the agent. And now it's simply just like, make a document and let the agent like blow through a couple oceans worth of water and generate some code for you.

• 28:14Speaker 01

  Yeah. One thing I do want to speak on those like, you're almost like able to give it like junior level, mid level tasks here. Like, like, this is kind of what maybe some companies are talking about when they're saying they're replacing junior devs or like 50% of their code is written with AI like, being able to just pass an issue to an AI and then it goes off and does a bunch of work. And then when it's ready, you come back and you review it like. I don't know, I worry about entry-level developers. Like, will they cease to exist? And then, once everyone retires, who's gonna be there to replace them?

• 28:52Wes Bos?

  Yeah.

• 28:53Speaker 01

  Because like, this is a task you would have given somebody that was like, new to the job. And like, okay, well, get familiar with like, the codebase. But no, AI can just do it instantly. Like, you don't even have to know anything, so, I don't know.

• 29:03Wes Bos?

  Yeah, I don't know the answer to that, but we'll be here to watch. We'll be live streaming the end.

• 29:11Speaker 01

  Exactly. All right, next up, we've got some new features coming to the ECMAScript standard. So, they had the 108th TC39 meeting. And there were three features that actually advanced to stage four. So, if you're not familiar with how all of this works, basically, there's different stages that a feature can be in. And each one means maybe a few browsers have implemented it. Maybe there's a few people on the committee that have championed it. But once it's reached stage four, that means it will be in the next version of ECMAScript. So, these are features that are fairly new-ish, but you're gonna be able to use them in JavaScript soon. And the first one is "array dot from async".

• 29:54Speaker 01

  And this basically allows you to take an async iterable, and then instantly turn it into an array. So, anytime you might have done like, a for, a while loop. Typically, the only way to do something like this was with a for while loop, where you iterate over each of the things asynchronously, like, push it into an array. Now, you can use "from async", pass in a function, and you'll get back an array that has all of those items from the iterable in it.

• 30:21Wes Bos?

  Yeah, that's... We talked about this as well on a, probably, an episode that comes just before this one. And it's not something I need all of the time. Because, like, a lot of people are probably saying, like, "Why not just use promise dot all", or "promise dot all settled"? And it's because, first of all, that only works with arrays. Iterables are more than just arrays. Iterables are anything that can be looped over. And also, iterables can be generators, where the amount of items is not yet known. So, you cannot simply just await something that is not yet known. A generator can continue generating things until it is done, right? There's literally a "done" property on a generator, so...

• 31:02Wes Bos?

  There's, I don't know, maybe once or twice a year, I hit little thing like, damn, this is annoying that I have to like loop over it and then push them into an array before it. This is gonna be a nice little addition.

• 31:14Speaker 01

  Definitely. Now, another one that reached stage four is error dot is error. And Wes is laughing. I mean, it's pretty simple, but honestly, like the amount of hoops we jump through, like checking like instance of and like, does it have this property? And so this is a built-in method for reliably detecting error objects. And you typically would use something like this, like in a try catch. So in the catch, make sure that actually is an error object and like it has a message property, because in JavaScript, you can throw anything. And so this will be useful to kind of like narrow that down.

• 31:47Wes Bos?

  This is gonna be super handy in TypeScript as well, because the TypeScript error is always unknown. Right? And then you have to always narrow it. It's such a pain in the butt, because it's like, it's, it's fine. It's probably an error, you know? And at least I can one line it, narrow it down now.

• 32:05Speaker 01

  Yeah. And they're saying here that this is a decade in the making. They've been working on this proposal for 10 years, but finally it landed. And then the last one that made it to stage four is explicit resource management. I think you all have talked about this on the pod, but basically it's a, it gives us a using statement. I come from a .NET background, so in C sharp, we had something like this where you have basically resources that might need to be disposed after they're used. And you can essentially wrap that in a using block and then they automatically get disposed. And so

• 32:37Wes Bos?

  What, what does that mean disposed? Like memory cleanup?

• 32:41Speaker 01

  Yeah, exactly. Yeah. So like, free up your memory, remove some event listeners, disconnect from a database, any sort of like resource that you were using. In JavaScript, typically you explicitly have to disconnect from the database or remove the event listener or explicit code that does that. But this basically You would, you'd have to structure your code slightly different because you would have to create a class that kind of like wraps the usage of that resource. But if you create an instance and say using on it, the JavaScript engine will know that it needs to call the disposal method to automatically disconnect from a database or remove an event listener or different things like that.

• 33:22Speaker 01

  So it's a, it's a pattern that you'd have to adopt, but it does make it so that you don't have to explicitly do those things all the time.

• 33:29Wes Bos?

  So when a, we didn't talk about this, by the way. I'm, I'm just trying to understand it. So when a class is like garbage collected, then this, the disposal function will then run and you could put any cleanup you want in that function. Is that right?

• 33:49Speaker 01

  Um, I think it's more than, my understanding is not just garbage collection, just when it's like out of scope.

• 33:55Wes Bos?

  Oh, okay.

• 33:56Speaker 01

  So like the, it exists, it's, it's, it's used for as long as that variable is in scope. And then when it's no longer in scope, because we marked it with using, we know that we can call the disposal function. It probably is, is, is aligned with garbage collection because that's the moment when that thing would be freed up, when it's no longer in scope and no, there's no longer any references to it.

• 34:15Wes Bos?

  But that's basically- There's probably some other use cases, though.

• 34:18Speaker 01

  Yeah, but that's the signal to say, hey, we're not using this thing anymore. We can now call that dispose method that they defined and then do all of the explicit disposal that they said we should do.

• 34:27Wes Bos?

  Similar to like a use effect. If you return a function from a use effect, when that effect is no longer being used, i.e. its component has been unmounted, that cleanup function will run. And that's a good spot to remove event listeners or unsubscribe from databases or any streams that you want.

• 34:47Speaker 01

  Exactly. Yeah. So similar, similar idea, but it kind of brings it native to JavaScript and will clean up some code bases where there was like explicit management of resources.

• 34:56Wes Bos?

  Oh, man, my, my post is in this blog post.

• 34:59Speaker 01

  I just realized that. Yeah. Yeah. So beyond, beyond just stage four things, this article also talks about some of the other stuff. But yeah, Wes, you want to mention the tweet that you did?

• 35:08Wes Bos?

  Yeah, we, we talked about it in the previous episode as well, but there's a whole new random namespace with like 22 different methods for-

• 35:17Wes Bos?

  Being random. So you want to shuffle arrays, or you want to randomly pick an item from an array, but you want to weight them in different values, or you want to randomly pick a number between two numbers. These are just things that we have to do all of the time. So this is just like the Swiss Army knife. 22 different methods for working with randomness in JavaScript. As well as the ability, part of this is the ability to seed it, which means that you can have things that are consistently random, randomly the same amount every single time. And me and Scott were talking about this is like, in tests, that's sometimes very important. If you want to randomly generate someone's name, you want to make sure that you get the same name every single time.

• 36:02Wes Bos?

  So if you call a random name, you get John every single time. You call it again, you get Peter every, the second time that you call it. And that's, that's done via seeding something with randomness.

• 36:14Speaker 01

  Nice. And it says that that's stage two. So it might take a little bit longer to get to stage four, but all of this looks super useful. Like, there's actually quite a few libraries in the JavaScript ecosystem that do similar things. So it'd be great to have this directly in the random namespace.

• 36:28Wes Bos?

  Yeah, yeah, I'm much looking forward to this. And yeah, stage two is pretty early. I think there's, there's lots of feedback. People want to know if it should be cryptographically random or not. Right now it is not, meaning that you shouldn't use this for anything that is like, you need security for. If you want to generate like a random, like public key or something like that, that you should use the crypto libraries for that. So this is kind of interesting. Frederick K. Schott, we've had him on the podcast a few times. He's the creator of Astro. We even had him on the podcast before Astro. When we're talking about his Snowpack bundler. He's working on an email client, which I thought was really interesting

• 37:11Wes Bos?

  because I feel like we're due for like an AI-based email client. You know, I use Missive and I have a bunch of AI rules in there, but my email is such a wasteland of, of just garbage. Not necessarily spam, but just like automated sales tactics from, and cold outreach and all this like garbage stuff. So I'm curious. And he's building it in Astro, which makes sense. But also like, that's really cool to see what that will look like. Big app, a big email app built in Astro.

• 37:44Speaker 01

  I mean, it makes sense because like he's one of the creators of Astro.

• 37:49Speaker 01

  But also like you never typically you don't think about Astro in terms of like interactive apps. I mean, you can build them, but when I think of Astro, I think of like content based websites, but technically they do have server actions. They do have server side rendering like they have added a lot of features over the years that make them behave more like a traditional meta framework. So it's not too far fetched to use Astro for something like this. But I just I didn't hear about this. So I just sent up for the waitlist. I'd be curious to see what what features they add in here because like you were saying, like being able to like, I don't know, not have to manually filter through your inbox and it can automatically handle that because it can more intelligently filter things out.

• 38:30Wes Bos?

  Yeah, or search too, man, like I've been using the Grok search on Twitter quite a bit lately, or I've been using Grok as a search tool because I often, you know, like you're like, ah, what was that email? And you're just like entering random words that you hope match in a certain way. And like what I would love to do is that like a couple of years ago, I felt like I talked to somebody about doing something with JavaScript on hardware. And then it will like, and then find me, find me those email addresses, you know, I'm not trying to match the word hardware in JavaScript in an email. I want to be able to just naturally ask it what I want. And the I find I have that issue

• 39:15Wes Bos?

  with finding old tweets as well. And the using Grok to find old tweets has been been pretty helpful.

• 39:22Speaker 01

  Nice. Yep. So next up in the news, Roll Down Veet was announced. And so if you hadn't heard, Evan Yu had actually got funding and started his own company called, was it Void?

• 39:37Wes Bos?

  Void Zero.

• 39:38Speaker 01

  Void Zero.

• 39:39Wes Bos?

  Not V zero, not.

• 39:40Speaker 01

  Not V zero. That's why I was like, what is it? Yeah.

• 39:46Speaker 01

  Void, Void Zero, with the idea that the all of the web ecosystem, like a lot of it has kind of standardized on using Veet. As their build tooling and this company was basically going to now have actual funding to twerk on these kinds of things. And one of those products is RollDown Veet. And so Veet was actually based on top of RollUp JS and ES Build, but RollDown is a complete native implementation and API compatible implementation of RollUp and is now a drop-in replacement for Veet. So we talked about the native port of TypeScript earlier. This is similar in that you can now just instantly drop it in and just get speedups.

• 40:27Speaker 01

  And basically, you can take any app that uses Veet, instead pull in RollDown Veet. And in their article, they talk about there have been production build time reductions from 3X to 16X and memory usage cut by up to 100X. In the article, they also showed that they ran RollDown Veet against some big production codebases like GitLab, where their build time went down from 2.5 minutes to just 40 seconds. Excalidraw, their build time dropped from 22 seconds to just 1.4 seconds. And then a few others. So this is really exciting. And the blog talks about how you can do this. Basically, you just replace Veet with RollDown Veet,

• 41:12Speaker 01

  and now you instantly get some, you get speedups.

• 41:15Wes Bos?

  I can't believe how quickly they shipped this, though, because it feels like they just talked about it like six months ago. And they're like, yeah, we're rewriting RollUp in Rust, and we're going to call it RollDown. And I'm just like, oh, it's here already? You know, like both the TypeScript thing and this thing is like, wow, that was fast.

• 41:36Speaker 01

  It's happening.

• 41:37Wes Bos?

  Yeah, that's crazy. 22 seconds to 1.4 seconds, man. I wonder if this is even using the TypeScript Go stuff as well, right? Because a lot of that has to...

• 41:51Speaker 01

  Yeah, I would think that maybe just to like, make sure that they have good metrics, it's not. But imagine combining both, right? Because anytime you have a build process, that has to run through the TypeScript compiler as well. Does the article say anything about TypeScript?

• 42:02Wes Bos?

  Oh, you know what? No, they use, they have OXC, which is their...

• 42:08Wes Bos?

  Oh, that's their stripper. Yeah, so they don't, VeeT does not type check. It types strips, meaning that it simply just takes the types out of the JavaScript and replaces them with spaces. And then, once the types are gone, it's, it's just JavaScript at that point, right? But the type checker is, is what type, the new TypeScript thing is, right? And that does, it obviously will transpile it as well, but part of the big ask in the TypeScript type checker is actually saying like, what are the types? Is this is inferred? Are there any type issues? That's what's really slow.

• 42:45Speaker 01

  Yeah.

• 42:45Wes Bos?

  Or now is fast.

• 42:47Speaker 01

  And so I guess in the, in a world where all of these things are fully compatible with everything, you probably, you'd run them in parallel. So like TypeScript would run to make sure that all the types are correct, but VeeT would be running in the background just to build everything after the types are stripped. But I mean, I am, yeah, I think imagining the, the speed up of both of these, like we're, uh, it's, it's a good time to be alive, I think.

• 43:08Wes Bos?

  Yeah. I, this build times are getting, are getting really fast. I was talking to, at the meetup, some of the folks from, I work on Turbo Repo. And I was like, what's the fastest build you've ever seen? And like, from like, like commit to being live? And he said at Versale, they, they provisioned some like crazy 32 CPU servers. And he said that they, they had a site go, I think it was their, their like shipped conference website. I think they said, he said 15 seconds or something crazy like that.

• 43:42Speaker 01

  Yeah.

• 43:44Wes Bos?

  Oh, that's, that's nuts. Like my own course platform, I can go from commit to like being live in about, I don't know, three or four minutes with, with heavy caching. Um, and that's not using any of the new VeeT or. Like I'm using V, but not the new, the new roll down stuff. And it's not using the new TypeScript stuff as well. So I'm curious how much that will improve it. My biggest, my biggest weight right now is simply just uploading the changed files as part of the CI.

• 44:17Speaker 01

  Yeah, we definitely need to try it on the syntax FM website too. Cause it has build, build times of a couple of minutes as well.

• 44:23Wes Bos?

  It would be nice to get that down to like 10 seconds. And then like, I guess like the GitHub actions start slowing you down at that point. But I think some of our GitHub actions will, will use this as well. So if we can speed those things up as well, it would be so nice to get it down to like one minute or something like that.

• 44:42Speaker 01

  Yeah, definitely.

• 44:44Wes Bos?

  Alongside this V news is V7 is in beta. And part of that is using the roll down. I, is it by default? Are you, do you know?

• 44:55Speaker 01

  I think so. I think that's the major, the major bump is they're now going to be switching from roll up to roll down. Yeah.

• 45:02Wes Bos?

  But it doesn't look like any like breaking changes. That's when we went from V4 to 5 and 5 to 6, it was just kind of like, cool. You know, like it just keeps working. It just, it's great. It's, some bugs were fixed or whatever. And there may be a couple of new features, but it's not like, holy smokes. There's all these new things I get to try and it, it just works well. So that's exciting.

• 45:26Speaker 01

  Definitely. I mean, I think if you imagine the, like the webpack days, like any, any new time aversion was released, there's a lot of breaking changes or like just a lot of config changes that needed to happen. I've had that same experience with V, where you just upgrade and as long as you weren't doing anything crazy, it just works.

• 45:40Wes Bos?

  Yeah. Yeah, I, I do some crazy stuff. My V config is like, like 180 lines or something wild like that. Because I have like a bunch of legacy node stuff with pug templates. And I have like, like, I don't know, something like 20 different inputs. Cause there's 20 different sites, you know, like all kinds of crazy stuff I'm doing. And it's, it all just works. Nice. Angular 20 has been released.

• 46:07Speaker 01

  Yeah, the all the Angular folks usually chime in that we don't mention Angular enough, but version 20 was released. Yeah, here you go. But also, I've been so far out of the loop that version 20, like, that's that's a very big number.

• 46:20Wes Bos?

  Yeah, I'm still reeling from 2.0.

• 46:23Speaker 01

  Exactly. But they mentioned that they stabilized some APIs like affect link signal to signals. So it seems like the we had heard about Angular adopting this idea of signals. And so a lot of that has been stabilized. You've got improved debugging and dev tools, better developer experience. So good stuff's happening in the world of Angular.

• 46:41Wes Bos?

  What's cool to see is that their signals implementation is based on standards, or maybe the other way around. The TC 39 signals proposal is going to be very much in line with the signals implementation. We've also heard that from Svelte as well. So I'm I we got to get signals in the language, man. And it's great to see all of these frameworks, like, thinking ahead of if the API is going to look like this, let's shape ours around that.

• 47:11Speaker 01

  Definitely.

• 47:12Wes Bos?

  Just need them in React. I guess that's probably going back to the first thing. Remix is probably mad that React doesn't have signals. So they're probably that's that's one big feature that React has over React is that you can use signals in there.

• 47:29Speaker 01

  Definitely. One last call out is if you haven't yet, you should take the state of CSS survey. So this is up right now. This surveys developers that use CSS about what features are you using? What frameworks are you using? And we typically like to react to the results. So it'd be good to have.

• 47:46Wes Bos?

  What podcasts are you listening to? Who is your favorite content creator? Please juice this up. Somebody write a bot or something so we'll be number one.

• 47:56Speaker 01

  Yeah.

• 47:57Wes Bos?

  Yeah, certainly check it out. You can get that. What is the? State of CSS survey, I think you could just Google it. The URL is kind of funny. Survey.devographics.com.

• 48:10Speaker 01

  Link in the show notes for sure.

• 48:11Wes Bos?

  Sick. All right, that's crazy amount of news in the last couple of weeks. Hopefully you enjoyed that. Let us know if we missed anything or if there is anything that pops up that you want us to cover. Ping us in any way possible. Blue sky, skeet us, tweet us, DM us, email us. Send us a piece of mail. We actually have a syntax P O box now.

• 48:33Speaker 01

  Really?

• 48:34Wes Bos?

  Okay. You can send us a letter if you really want us to, so.

• 48:39Speaker 01

  Awesome.

• 48:40Wes Bos?

  Cool. All right, last thing we want to talk about is Sentry. This podcast is presented by Sentry. You're going to want to check it out. They now have logs. We have now logs. I'm stoked about this because having logs is one thing for figuring out what's gone wrong. But having logs connected to all of the other pieces of all your other traces. Like when something goes wrong on your website, there's all these little bits of information, right? There's replay. What did the user click in order to do? They navigate to a page, they hover over top of something, you get a full video replay, right? There's all the information about the actual issue that happened. You know, what browsers were being used and what runtimes? And when did it happen? What countries did it happen in? But then there's also like, like logs on your server as well.

• 49:25Wes Bos?

  And having all of those connected gives you like the some sort of superpower in this amazing. You know, like that, like that meme with the red. You put everything on a, on a wall and you have all the red pieces of yarn connecting everything. Sentry is going to do that for you and you're going to want to put it in your application if you haven't yet already. Go to Sentry.io forward slash syntax. You're going to get two months of the team package for free. All right, that's it. Thank you for, for filling in CJ. Thank you for all your insights on the news and we'll catch you later.

• 50:00Speaker 01

  Peace.

• 50:00Wes Bos?

  Peace.