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

Welcome to Syntax. Today, we got a episode on news that's going on in the web development.

A 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? 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. Yeah. It's it's funny. Scott and I were saying, like, I don't know, maybe, like, two weeks ago, like, oh, things were kinda a little bit sluggish in the the news front. And then all of a sudden, I feel like in the last two weeks, there's so much has has Scott hit us. So let's get on into it.

First thing we have here is, WWDC announced that Safari '26 so this is a little bit odd, but their Apple's renaming everything to correspond with the year.

And now Safari '20 we're we're on, what, '17 or '18 right now, jumping to '26.

But with that comes a whole bunch of new APIs, which is is actually pretty exciting.

So first one is SVG fav Scott. I'm really excited about this. So I run this little, website called fab.farm, which just gives you a quick little emoji fav Scott if you're just doing a Deno, because I hate that stupid little cannot find fav Scott .ic0 message in my terminal, 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 something that converts it to PNG on the server. And then finally, I I'm able to not deprecate that, but I'm now able to serve up SVGs to all of my Safari use users.

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

And it 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 Okay. The Safari desktop also does something similar to this as Wes. And it's it's actually kinda nice to be able to have apps put in your dock or on your iPhone home screen.

Definitely. Yeah. I've I've used that just, like, on my phone just, like, launching sites.

Like, if I wanna get to the weather, but I don't wanna use a weather app, I'll install it as an app. So I'm sure that's just as useful, but with Safari. But I don't use Safari, so all of this stuff is is new to me. Oh, yeah. Yeah. It's it's super Sanity, 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, thirty seconds per app. It's so slow. And I just I wanna Node them all. And I Wes like, I just wish that this was, a Wes page that I could bookmark. And so now now we can.

Nice.

WebGPU has landed in Safari 26. So this is really exciting because, WebGPU 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 WebGPU, 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 Yeah. Transformers JS is a package that you can run local AI models in JavaScript, so in the browser, in Node, in Deno, whatever.

And WebGPU speeds them up, like, significantly. I think I had a couple examples where I was generating alt text. You give it an image. It generates alt text for an image, and it was taking about eleven seconds for an image, which is, like, cool demo, but, like, that's not real world. Right? Yeah. And it brought it down to, like, something like three hundred milliseconds or or six hundred milliseconds for generating alt text for an image, which starts to get inside of the, like, that's actually pretty fast. And if I were to resize it, make a little smaller, you probably could get that within, a hundred and fifty milliseconds.

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

is a new web standard that's sort of the successor to to WebGL.

Okay. And, like, three JS can use it, Babylon JS. Like, all these three d libraries, but then as well as transformers JS and ONNX runtime, those are, the two, like, machine learning AI model runtimes.

Yeah. And and they can then use that. So now it's supported in Safari. It's it's in Chrome already.

And, like, of course, not in Safari just yet or, hopefully, hopefully, it will come very soon, which In kill, folks.

Yeah. Or sorry. What did I say? You said not in Safari. Oh, obviously, it's in Safari. This is what we're talking about. Firefox. Yeah. It's not in Firefox. Okay. Okay.

Yeah. Yeah. It kills me because I saw, Brendan like, probably twelve, thirteen, fifteen years ago, I saw Brendan Ike 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.

Yeah. Hopefully, they come around to it.

I guess this this also is aligned with, like, maybe a it was, like, maybe a year ago or two years ago that Chrome released window dot ai, like, the actual, like, LLM inside the browser.

But with Wes GPU, it's only gonna get better because, the LLMs run much better on directly on GPU.

It's faster. Yeah. Like Yeah. Significantly faster. Even things like, being able to calculate embeddings in the client. So if you wanna be able to, like, find something that is similar, this is how a lot of, like, code agents work or if you wanna 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 TypeScript as they're typing it, you can just convert those two embeddings on every keystroke now and then show them the results

pretty quickly. Yeah. That's huge. I think, especially, it's gonna enable some architectures where you you're not as dependent on a server for AI or for embeddings like that. So pages are gonna be faster. So yeah. That's cool. Firefox has got it behind a flag, and they have for,

what, five, six, seven years.

So, yeah, it's not stable yet. But Oh. Okay.

Yeah. Hopefully soon. Hopefully soon. But 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? Once

Safari 26 is released, then it will be stable, which is exciting because, like, techno 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 Right. 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.

Right. That's great. 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 tool tips and for popover 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.

Come on.

Why? So, hopefully, that changes before launch, but it's kinda disappointing to see. Okay.

But scroll driven animations, have you dipped into that at all? I have not. Node. What's what's going on there? Yeah. Scroll driven animations is the ability to scrub a key frame. So you have a key frame that goes from zero to a 100%, and, normally, you you use time to to scrub that key frame, right, over ten seconds.

Scroll driven animations allows you to scrub that key frame via where you are scrolled in the DOM. So you can say Scott when this element pops into the viewport and then stop when it is 50% out of the viewport.

Okay. It's really cool. I'm really excited about it. I've I have it there there's a JavaScript API and there's a CSS API. Mhmm. So I've used the JavaScript API with a polyfill in an upcoming site for one of my courses, and it it looks really cool.

Nice.

Text wrap pretty, progress function, margin trim, contrast color, a whole bunch of just little, like, things that we've been sort of waiting on.

And they're they're all landing all at once in Safari, which I'm excited about. Yes. It's a huge release for for Safari. All this stuff we've been like, we've been talking about Apple lagging along for the longest time. They're Yeah. All of a sudden, they just give us everything. Yeah. Yeah. They've been been pretty good at in the last, like, couple Yarn. Like, there's still a lot of negative. People get pissed every time I talk any anything positive about Safari, but Yeah. They've been they've been doing Wes.

A lot of the CSS stuff has been coming out.

In, like, React news, I Wes, you could you can say it.

Remix has announced that Remix is no longer going to be, like, 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 Vercel of that, and then it got turned into or they had another thing called the Reach Router, and then that got merged back into React Router.

And then out of React Router came Remix, which is like the full stack application, meaning that you can you can do loaders and server side rendering and all of that stuff. And then React Router seven, Remix went back into it, and then Remix was just dead.

Right? Now they've announced that Remix three 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 and 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. And I was like, he they're working on something there. And then they recently announced that, like, React Router JS going to be its own thing, but Remix now is going to be a totally new framework, like, from scratch that's going to be very simple and no build tools, all standard, which is is kinda crazy if you think about it. I'm not sure what you think about it. Yeah. It's really I 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 the baggage of the the previous stuff. The only issue I have is it's so confusing because people are gonna hear Remix and not know which one people are talking about. Like, this if 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. There are ideas around, how it could 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.

And so that has a whole other Sanity 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 issues there. 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 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 and the thing runs. So maybe they'll 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 templating languages that that work like that.

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.

Yeah. Me So That might be it, actually. It's just Yeah. Like like Pnpm templates, and then there's gonna be no no hot reloading.

They did say you can add Vite if if you want to. So Evan Yu JS a creator of Vite. It was like, interesting interesting move.

So no HMR, which 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? I think you need it for stateful applications too. Like, you're work you're 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 gonna do there. 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. Because, like, I don't wanna have to tab and refresh every single time that it's changed. But may Node angle I haven't really thought of is maybe they're getting really dialed in with the the Chrome dev tools. Like, maybe there's you know how, like, Chrome dev tools 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 months once they're they're a little closer, and I have tickets to remix Scott 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. 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 Bos, 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 Scott 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. I think you're dead on there because, yeah, that's that's that's I think and 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 the, 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. Yeah. Like like, the ecommerce 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 as much as other people are, but I haven't seen the, like, just type and make a storefront that you want.

Yeah. So well, we'll see. I'm I'm I'm pretty pretty interested in how all of that works as well. Yeah. Next up, Microsoft announced the TypeScript native previews. So we actually had, Anders Halsberg

and Daniel Rosenwasser on the podcast with Wes and Scott to announce the fact that the TypeScript compiler was gonna 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 ups. So there JS a tweet from Daniel Rassenwasser that shows running the native preview against the Blue Sky Social app had a 6.5 x speed up in compile time, and that's huge. That's a that's a really big

like, it's a React Native and a React Desktop application.

Yeah. 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, four x up to, like I think I saw a couple that were eight, eight and a half x. Mhmm. And and that's just the preview. Right? They've they said when they came on, they're hoping to see 10 x 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 to compile. You know? But, like, some of these big apps where it's 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 Versus Node extension will be much faster.

So if it can just, like, infer your entire code Bos in, 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 the space where people are not just, like, building smaller stuff with AI, but they're just like, build this entire feature that takes forty minutes. This AI agent goes off in the background and does it and then comes back.

So

pretty excited about this as well. Yeah. Exciting stuff. I mean, I'm just glad to see a preview already.

Yeah. It seems, like, fast. Yeah. They 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. Yeah. That's that's great.

Cursor launched a one point o, 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 Bos. You're running it on Cursor's cloud.

Mhmm. And 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 Sanity is like an enterprise customer for Cursor, so we Scott access to that as well as the Slack 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, forty five minutes later, it came back, and it just, like, built the entire feature. Obviously, it wasn't perfect, but I think that's the next step that a lot of people are taking with these agents Wes they're simply just not you're not just typing what you want sitting there 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 and they'll go off in the background and do it. And it's kinda 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 Node or I think it's called. Yeah. Claude Code.

I was playing with that yesterday as well. There's obviously Devin.

GitHub Copilot has their agents thing that runs on GitHub.

So there's a lot of people working in this space of give it a 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, kinda 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 Versus Node instance. So you can see the whole chat. You can see all the diffs. You can roll things back. And and to me, it's it's kind of a Wes of both worlds Wes

you you get you still get the Versus Code UI if you need to be able to jump into it. That's great. I I will say, though, like, the the Slack channel was full of messages yesterday. But it was but it was it was fun to see. Like, eventually, the bot came back and was like, oh, here's here's your feature.

Can you speak to that a little bit? Like, you mentioned, like, you can ESLint is there, like, a web dashboard you log in to 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.

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. Sure.

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, hey, cursor. Can you take this one on? Or 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. So I basically just rambled of what I wanted a feature into chat GPT 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 a 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 Cloud Code. I put $5 in there. I burned through that $5 in, like, minutes just doing a whole bunch of features. And Yeah. You can you can pay, like, $200 to get unlimited, but

they are certainly not making any money off of me. Yeah. I would say, like, it's impressive that it can go off and do all of this, but you're yeah. You you're I think you've you've hit on a crucial point there. Like, right now, they're offering it for free in 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. Yeah. They're not. 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 a month for for one of these tools is not a lot of money, which kinda 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 a month on all of these these different services. Otherwise, you're not gonna be nearly as as productive as as anyone.

But this is what I did. This is really cool because this the background agent, I'm able to just, like, look, like, tap into it, and then I can I get, like, the the UI that I'm comfortable with, which the sun of the a lot of the CLI tools, I'd you don't necessarily get that? You can open diffs and whatnot, but I I feel like this UI in the ID is is better. Mhmm. 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.

Mhmm.

So yeah. It's I mean, if you've been using cursor, it's like a very intuitive UI too. Like, you know exactly what you're looking at. Yeah. I I did post on on Twitter yesterday. I'm like, do people really like the CLIs better?

And a lot of people were saying, like, it's not that you even need the CLI. Like, you don't or so it's not that you don't even need the UI.

You you basically just these are just API endpoints. There's they're bash scripts, and you you wanna be able to call it from something you wanna be able to just call it from a node process, and it will go go off and run it. With this, they they essentially have to run, like, an entire Versus Node instance in the cloud, I think, in order for this to work. So Yeah. Kinda interesting this whole whole new world of of, like, not just it used to be tap, tap, tab, then it was TypeScript 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.

Yeah. And one thing I do wanna speak on, though, is, 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 I don't know. I I I worry about entry level developers.

Like, will they will they cease to exist? And then once everyone retires, who JS who's gonna be there to replace them? Yeah. Because, like, this is a task you would've you would've give you would've given somebody that was, like, new to the job and, like, okay. Well, get familiar with, like, the code base and, like but, Node. Yeah. I can just do it instantly. Like, you don't even have to know anything. So I don't know. Yeah. I I don't know the answer to that, but

we'll be here to watch.

We'll be live streaming the end. Exactly.

Alright. Next up, we've got some new features coming to the ECMAScript standard.

So they had the one hundred and eighth t c thirty nine 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 fairly new ish, but you're gonna be be able to use them, in in in JavaScript soon. And the first one is array dot from async. 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 four await loop, typically, the only way to do something like this was with a four await loop where you iterate over each of the the things asynchronously, like, push it into an array. Yeah. Now you can use from a sync, pass in a function, and you'll get back an array that has all of those,

items from the interval in it. Yeah. That's we talked about this as well on a probably an episode that comes just before this Node. 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.all or promise.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 is not yet known. A generator can continue generating things until it is done. Right? There's literally a done property on a a generator. So there's I don't know. Maybe once or twice a year, I 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.

Definitely.

Now another one that reached stage four is error dot is error.

Yeah. And Wes is laughing. I mean, it's pretty simple, but, honestly, like, the 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 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.

This is gonna be super handy in TypeScript as well because the TypeScript error JS always unknown.

Right? And then you have to always narrow, and it's such a pain in the butt because it's like, it's it's fine. It's probably an error, you Node. And at least I can one line it, narrow it down now.

Yeah. And it it they they're saying here that this is a decade in the making. They've been working on this proposal for ten 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 dot 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 What is What does that Node, disposed? Like, memory cleanup? 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 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. So it's it's a it's a pattern that you'd have to adopt, but it does make it so that there you don't have to explicitly do those things all the time. So

when a Wes didn't talk about this, by the way. I'm 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?

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

Like Oh, okay. So, like, the it it exists it's it's it's used for as long as that variable is in Scott, and then when it's no longer in Scott, 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 Wes it's no longer in scope and no there's no longer any references to it. But that's basically some other use cases, though. 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 Oh, okay. We should do. That's yeah. Similar to, like, a a use effect. If you return a function from a use effect Yeah. 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.

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

Oh, man. My my post is in this blog post. I didn't realize that. Yeah. I just yeah. So beyond beyond just stage four things, this article also talks about, some of the other stuff. But, yeah, Wes, you wanna mention the the tweet that you did. Yeah. We we talked about it in the previous episode as well, but there's a whole new random Node space with, like, 22 different methods for being random.

So you wanna shuffle arrays or you want to randomly pick an item from an array, but you wanna weight them in different values or you wanna 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 to seed it, which means that you can have things that are consistently random, randomly the same amount every single time.

And we me and Scott were talking about this JS, like, in tests, that's sometimes very important. If you wanna randomly generate someone's name, you wanna make sure that you get the same name every single time.

So if you call 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.

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 the random Node space.

Yeah. Yeah. I'm I'm much looking forward to this. And, yeah, stage two is is pretty early.

I think there's there's lots of feedback. People wanna know if it should be cryptographically random or not. Right now, it is not. Okay. Meaning that you shouldn't use this for anything that is, like, you need security for if you wanna generate, like, a random, like, public key or something like that, that you should use the crypto libraries for that. So this is kinda interesting.

Frederick k Scott, we've had him on the podcast a few times. He's the creator of Astro.

And we even have had him on the podcast before Astro Wes we're talking about his snowpack bundler.

He's working on a email client, which I thought was really interesting because I feel like we're due for, like, a 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 I'm curious. And he's building in Astro, which makes sense, but, also, like, that's really cool to see what that will look like. Big a big email app built in Astro.

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

But but but also, like, you never you typically, you don't think about Astro in terms of, like, interactive apps. I mean, you can build them, but it when when I think of Astro, I think of, like, content based websites. But, technically, they they do have server actions. They do have server side rendering. Like, they're they have added a lot of features over the years that make them behave more like a traditional meta framework.

So it's it's not too far fetched to to use Astro for something like this. But I I just I didn't hear about this, so I just signed up for the wait list. I I'd be curious to see what what 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 your inbox, and it can automatically handle that because it

can more intelligently filter things out. Yeah. Or search too, man. Like Yeah. 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, what was that email? And you're just, like, entering random words that you hope match in a in a certain way. And, like, what I would love to do is that, like, a couple years ago, I felt like I talked to somebody about doing something with JavaScript on on hardware.

Mhmm. And then it will, like and then find me find me those email addresses. You Node? I'm not trying to match the word hardware in JavaScript in a in email. I wanna be able to just naturally ask it what I want. And the I find I have that issue with finding old tweets as Wes, and the using Grok to find old tweets has been

been pretty helpful. 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? Void zero. Void zero. Not v zero. Not Not v zero. That's why I was like, what is it? Yeah. Node void void Deno, with the idea that, the the all of the web ecosystem, like, a lot of it has kind of standardized on using Vite 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 roll down Vite. And so Vite was actually based on top of Rollup JS and Wes build, but Rolldown is a complete native implementation and API compatible implementation of of Rollup and is now a drop in replacement for Vite. So we talked about the native port of TypeScript earlier. This is this is similar in that you can now just instantly drop it in and just get speed ups. And, basically, you can take any any app that uses Vite, instead pull in roll down Vite.

And in their article, they talk about there have been production build time reductions from three x to 16 x and memory usage cut by up to a 100 x.

In the article, they also showed that they ran rolled down Vite against some big production code Bos, like GitLab, where their build time went down from two point five minutes to just forty seconds.

Excalidraw, their build time dropped from twenty two seconds to just one point four seconds, and then a few others. So this is really exciting, and the the blog talks about how you can do this. Basically,

you just replace Vite with roll down Vite, and now you instantly get some, you get you get speed ups. I I can't believe how quickly they ship this, though, because it feels like they just talked about it, like, six months ago, and they're like, yeah. We're rewriting roll up in Rust, and we're gonna call it roll down.

And if I'm just like, oh, it's here already? You know? Like, both the TypeScript thing and this thing is like, wow. That that was fast. It's happening.

Yeah. That's that's crazy.

Twenty two seconds to 1.4.

Man,

that I wonder if this is even using the, like, the type the TypeScript Go stuff as well. Right? Because a lot of that has to Yeah. I I would think that maybe just to, like, make sure that they have good metrics, it's not. But imagine combining both. Right? Because it, anytime you have a build process, that has to run through the TypeScript compiler as well. What is it? Does the article say anything about TypeScript? You know what? No. They use,

they have OXC, which is their

type Oh, that's their test.

Yeah. So they don't Vite does not type check. It TypeScript, meaning that it simply just takes the types out of the JavaScript and replaces them with spaces.

Okay. 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.

Yeah. Or now JS fast.

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 Vite would be running in the background just to build everything after the types are stripped. Mhmm. But I mean I'm yeah. I think imagining the the speed up of both of these, like, we're, it's it's a good time to be alive, I think. Yeah. I the build times are getting

are getting really fast. I was talking to at the meetup, some of the folks from I work on turbo Deno, and I was like, what's the fastest build you ever seen? And, like, from, like like, commit to being live.

And he he said at Vercel, they they provision some, like, crazy 32 CPU servers, and he said that they they had a psych go I think it was their their, like, shipped conference website. I think they said he said 15 or something crazy like that. Yeah.

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.

And that's not using any of the new v 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 Mhmm. Yeah. As part of the CI. Yeah. We definitely need to try it on the the Syntax FM website too because Yeah. It has build build times of a couple minutes as well. It would be nice to get that down to, like,

ten seconds. And then, like, I guess, like, the GitHub actions start slowing you down at that point. But I 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. Yeah. Definitely.

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

I think so. I think that's the major the major bump is they're now gonna be switching from roll up to roll down. Yeah. But it it doesn't look like any,

like, breaking changes. That's when we went from beat four to five and five to six, it was just kinda like, cool. You know? Like, it just keeps working. It just it's great. It's some bugs were fixed or whatever, and and there's maybe a couple 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.

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

Yeah. Eve I I do some crazy stuff. My vconfig JS, like like, a 180 lines or something wild like that because I have, like, bunch of legacy node stuff with pug templates, and, I have, like like, I don't know, something like 20 different inputs because 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. Yeah. The the, all the Angular folks usually chime in that we don't mention Angular enough, but Here you go. 20 was released. Yeah. Here you go. But, also, the, I've been so far out of the loop that the Vercel 20, like, that's that's a very big number. Yeah. I'm still reeling from two point o.

Yeah. Exactly.

But they mentioned that they stabilized some APIs like effect, link signal to signal. 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 in the world of Angular.

What's cool to see is that their signals implementation is based on standards or maybe the other way around. The the t c 39 signals proposal is going to be very much in line with the signals implementation. We've also heard that from Svelte as well. Okay. So I'm I I we gotta 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. Definitely.

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

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 were you using.

And we typically like to react to the results. So we'd begin to have Yarn you listening to? Who is your favorite content creator? Please

juice us up. Somebody write a bot or something so we'd be number one.

Yeah.

Yeah. Yeah. Certainly check it out.

If you can get that. What is the state of CSS survey? I think you could just Google it. This the URL is kinda funny.

Survey.demographics.com.

Link in the show notes for sure.

Sick. Alright. That's crazy amount of news in the last couple 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, Scott, tweet us, DM us, email us, send us a piece of mail. We actually have a Sanity PO Bos now. Really? Okay. You can send us a letter if you if you really want us to. So Awesome. Cool. Alright. Last thing we wanna talk about is Sanity. This podcast is presented by Sentry. You're gonna wanna check it out. They now have logs. Wes have now logs. I'm stoked about this because having logs is one thing for figuring out what 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 to do? Did 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 run times and when did it happen, what countries did it happen in.

But then there's also, like like, logs on your server as well. 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 warp, and you have all the red pieces of yarn connecting everything. Centrist's gonna do that for you, and, you're gonna wanna put it in your application if you haven't yet already. Go to century.i0/syntax.

You're gonna get two months of the team package for free.

Alright. 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.