Web Containers, StackBlitz, and Node.js in the Browser with Tomek Sulkowski

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. Here is Scott Talinski and Wes Boss. Welcome to syntax. This is the podcast with the tastiest web development treats rid Out there today, we've got an exciting episode and a guest. We haven't had a guest on in a long time. We have Tomac on here today. I I butchered his name already, Tomac, rid on to to talk to us about couple things. At least I know, maybe we'll go somewhere else with it, but specifically, web containers.

I saw this pop up a couple of months ago. He's running Node in the browser, which seems really interesting to me as well as he's working on this thing called Stackblitz, which Let's you run the IDE in the browser. So lots to talk about today on that. We are sponsored by 3 awesome companies. First 1 is FreshBooks Cloud Accounting. Rid. 2nd 1 is LogRocket JavaScript session replay, and third one is Linode Linux servers rid And cloud hosting at your disposal. We'll talk about all of them partway through the episode.

With me today is Scott Talinski as always, and, Tomac, how do you say your last name? Tsoukowsky.

Hi. There you go. I would I woulda got that.

Not bad. How are you doing? Thanks for coming on. Yeah. I'm I'm great. Thanks for having me. I've been a huge fan for, like, seems like forever.

Oh, yeah. Rid. That's good. I'm glad to hear that. I think that we got somebody from Stackblitz asked to come on the show a couple months ago.

And Whenever people ask to come on the show, we're usually like, yeah. Probably not. But then this just kept popping up, and I was like, oh, that sounds really the tech behind it. You know? Yeah. So I thought it'd be pretty fun to to have you on and ask a bunch of questions. So do you wanna give us A little intro of who you are, where you're from, what you do, all those things? Yeah. Sure. So,

generally, you'll start probably hearing about around May this year, at least more about this year because we've introduced pretty exciting new thing just couple of months ago.

But let me rewind. So I done about, like, 4 years ago now to mostly work on the part. And now I've transitioned a little bit to more, like, dev rel stuff, just talking With people talking with library marketers and doing kind of content creation stuff. Coming on podcasts? Yeah. Yeah. Yep.

Definitely. So the Staglits itself,

should I introduce it? Yeah. Yeah. I I think that'd be, like, helpful to understand, like, what it is, And then we'll we'll get into the, like, the web containers and and how that works, and and then wherever that that Takes us, I think.

That's cool. So what Stampede is is basically online ID. Some call it a browser based ID.

We prefer actually the second one, because as it turns out, it doesn't have to be online. If something is in browser, it still can work without a Internet connection.

And what it gives you is a way to, as a proper IDE, write code, see it execute, see some results.

So there are a couple of Solutions like this on the market already. You might know CodePen, CodeSandbox, JSB, things like that. Yeah. And, yeah, we we we Started pretty early in that space as one of the 1st editors that had, like, this multi files capabilities.

Sometimes it's more like a playground where you just, like, have place for

CSS, JavaScript, and HTML, and that's it. You have, like, That's what the 1st CodePen CodePen does a lot more now, but that's what the first one was or jspin.

What's Remi Sharp's one? Rid. Remy Sharp's is JS Bin. JS Fiddle is the one I was talking about. There's yeah. Just like you've got 3 different boxes and a 4th to show you the output. But rid. But things are getting much more complicated than that. You you often need to, like, replicate, like, an app in one of these things. And if that's the case, it's nice to send them something that works. Right? Yeah. Definitely.

That's that's true. So now that it's Way more popular to see those kind of, online IDs popping up that they have, like, multiple files, and they look more or less like Versus Code. Sometimes even, like, exactly like Versus Code, and sometimes it is actually a Versus Code.

So we're, a bit more like like this one. Okay. The first thing that popped up, I was like, oh, this is Versus Code in the browser. Is does is this running on Versus Code or part of it, Or it just looks like it. I guess it's the 2nd part and the 3rd part. It runs on part of Versus Code, and it looks like it. But there is also an interesting, tidbit About the future.

So first of all, when you look at Versus Code, a leo leo typical Versus Code running locally on desktop, it's It's an electron app with some UI, and the biggest part of Versus Code is called Monaco.

And that's this library Yeah. That you can use to just Render the code and enter some values into it, color it, have out of condition and things like that.

So we've been running this part For, like, the longest time, I think since since the very beginning.

The rest was parts of Versus Code, parts our custom stuff. And that's also how

many other similar solutions do it right now. Okay. Okay. Cool. Ready. So my question here or, I guess, the the thing I think that makes it a bit different, and I'm specifically thinking about, like, a code sandbox. Mhmm. So, like, code sandbox, you can run, rid Like server side, you can run JavaScript code, things like that. And I believe the way that it works is that it actually just runs it on a server and streams the updates.

Rid. What sort of caught my attention is you're using this thing called web containers.

And, like, I just fired up an example.

It NPM installs React and Next. Js, ready. And there's a little console, and now I have a Next. Js app running in my browser. So, like, where's that running? Like, where where's the code? Is is it in the cloud rid Or or what? That's a great question. I've and I think I can provide a a little bit of context

slash history. Hopefully, rid up too much history, but there are basically 2 ways, 2 models of doing these online IDs.

First1 is more Directed towards front end, and it's very more or less custom stuff. So you can, write your own, like, Browser based library to compile like the create React apps, React scripts, or Angular stuff or things like that.

And it works Entirely in the browser, Suru can actually go offline.

It's super fast.

So it's also cool for, like, demos, rid Bulk reproductions and things like that, like smaller projects. Yeah. The downside that is that is super custom. So whenever, like, if, Like future react or view or something requires some new build systems, we'd have to adapt.

And also it's limited because, like, JavaScript, it's not only the libraries. It's also the whole ecosystem around it like build tools and things like that you would want to run them to. So it's not for, like, real, like, full professional workflows.

The 2nd model is VM based. So we have a virtual machine that you connect to, and the UI runs locally in the browser, but it rid Sends all the stuff to the VM and gets the results back. So, obviously, it's it's a bit slower. It's not that much, but There is a there is a difference. Obviously, it can't work without an network connection, and it's pricey because you actually have to Pay for those virtual machines. So, like, each hour of code costs. Right? Costs money. And you probably get these jerks Probably trying to mine Bitcoin on it as well. I'm sure. That is actually a real concern. Like, they Yes. I'm sure. Yeah. Rid Yeah. The the cryptophiles are are getting, like, kicked off of of that thing, like, all the time. Oh, yeah. I do not envy anybody

Who allows people to uncode server side for free because it probably just attracts the worst people ever. You briefly mentioned offline.

Mhmm. How does that work in the context here? If everything's running in browser, right, how does file storage in that point work? Is it is it making Commits constantly, or or how does that work if you're offline and you're you're trying to to work on some code? So first of all, to to wrap this up, If we're talking about, like, the classical

2 versions, like the custom front end stuff or VM stuff, it's For the custom stuff, you could sometimes just, you know, store it in, in in local storage, but usually as a fallback.

So, usually, just for to simplify things because it's all, like, the super fresh technology, it's The assumption that you can continue working, but for example, persistence, like the the hardcore persistence happens when you are back online, for example. Okay. Gotcha. But, also, actually, there is a there is a second solution because of project that enhanced the Browser capabilities, you can actually connect to local file system and work with that file system. So Fugu. Yeah. It's it's, this

funny looking blowfish, I guess. There was an app for Fugu A long time ago Mhmm. For SFTP, do you remember the app Fugu, Wes?

No. What is how do you spell Fugu, and what is it? F u g u. Re It's a, Japanese blowfish,

Fugue. Oh, okay. But there was an app for, like, back when I was in in college, Fugue, that they would give you on your rid. With your freshman USB key that they'd give everybody with software, they'd give you Cyber Duck and the Fugu. Okay. I've seen this before. It's the

Project to make all desktop APIs, anything you can imagine, accessible on the web. Is that right? Exactly. So Oh, okay.

It's it's almost you could maybe not not rebrand it, but, like, simplify it as we maybe don't need Electron anymore. Mhmm.

Oh, okay. So So there's a set of APIs that will allow you to access your your local file system. Yeah. So you could save the files right to your your hard disk. Right? Mhmm. Exactly. So and load it from it initially so you can pick up the your project folder

and allow access to Chrome To only that folder, of course. So it's like super safe. It's not that they can write everywhere.

And in the end, yeah, you can just work against So we actually have an alpha version of that implemented, so you can even use to,

like, work on your local stuff. Yeah. I just posted a link in our show notes for the Fugue API tracker that shows you sort of the status of all of the different APIs involved here. Rid It's a lot of stuff.

Web Share, Web Bluetooth, Web USB Yeah. Badging, periodic background sync, pointer lock, pan tilt rid Support, file system access. There's that one. NFC.

Web OTP, a web one time password, content indexing.

It looks like Android has very good support for a lot of these. And Apple has decent support, not as good, probably about half of what Android has.

That's not really that surprising with how how much better PWA support Android has than Ios anyways. Rid. So I would imagine they're probably putting a little bit more effort in there. Oh, device pa sorry. I'm just going whenever somebody sends me a list of these, like, rid. Interesting APIs always go down a rabbit hole. The device posture API will be able to expose transitions between table, which is like a laptop rid tent, which is when your laptop is almost closed, tablet, which is flat book or flat slash monitor. That's interesting. I'm assuming, yeah, you'd be able to, like, subscribe to an event.

And when somebody switches from,

like, laptop to tablet mode, like, you could That would fire an event. That's really interesting. One thing I would like to to just wrap up this introduction of of what the the Those 3 models are. Okay. So when we started as starting as the 1st model, like, the only supporting front end stuff, We looked into the second one, but we realized that browser are so capable now that we might actually not need those virtual machines. And if we drop that and we focus on browser only capabilities, we can get Speed, we can get, like, offline and other stuff like that. And actually, one additional huge point is that it It will be super secure because VM is pretty much like someone's else's computer.

And here inside your browser, you're very re Unboxed. Very limited in the what you can do outside of the browser with your OS. So Stackbleeds and web containers specifically is Pretty much like the 3rd solution.

And it's it pretty much runs an thin open, operating system inside of the browser. So we have file system.

We have our own Network, polyfill, and this all runs loads when this when stagnant loads, and then it doesn't need, Internet connection.

Wow. So you're essentially running an entire this is what caught my attention. You're running Node. Js in the browser. Right? Like, you're running all of that. It's not talking to your local machine. It's actually

a machine running in your browser. Right? Yes. Exactly. So It runs node, but it's not limited to node. It is now because we're mostly we're totally focused on node. Mhmm. But in near to longer future, we'll be able to run Python, Ruby, other stuff too because it's just the OS. In the browser, which

This hasn't really been done before WASM existed.

This isn't the type of thing that is it has existed for a long time. So WASM in these web containers, this is going to enable some really interesting development flows for you as a user specifically because Now all of these tools are are running explicitly in your browser, not in in a virtual machine on on a cloud that you're you're pinging into

in your browser. So it's wild tech. Crazy because, like, right now, what people are doing is you either have Node on your computer and you run your Node scripts, And there's a possibility that like, talk about security is that there's a possibility that those scripts running could access literally anything on your computer. Rid. But if you were to run that, the the other option is you run it in, like, a Docker container, which is pain in the ass to get set up. But then once you have that, then you're you're running a VM on your computer. Right? That's always a pain. Like, people always tell me, like, oh, just run Docker for your tutorials, and it's it's way too hard and way too resource intensive and things like that to get it up and running. Rid. So, like, from somebody who makes tutorials, this is very, very attractive to me because you could rid. Set up an entire, like, image, I'm thinking. I'm not sure what you call them, but you could run that in the browser with your specific rid Version of Node and or version of Ruby or whatever, and it just runs. You don't have to worry about, like, computer compatibility. I remember, I don't know, 10, 15 years ago, when I started doing in person WordPress tutorials, we would spend, like, 2 hours getting rid PHP and Apache running on everybody's computer. Yeah. And then we'd have a 100 people at the thing, and there'd be 3 or 4 people that just walked out because Just can't do it on Windows XP. It's it's better now, but, like, honestly, this is this is awesome. I've been to workshops, meetups, and whatever where 50% of it is set up.

He's like, alright. Let's make sure everybody's on the same page here after all this work. I don't know about you guys, but, like, I sometimes still stumble upon those Issues and can't ease easily resolve it. Like, I have this new M1 Mac, and it's like, it was so crazy to try to install some of the rid For the Oh, really? Yeah. And, actually, it's funny that you mentioned Docker because I'm looking at the tweet rid From, like, 2 years ago, but with Solomon Heights, the CEO of Docker, he said that if, wasn't existed in re 2008, they wouldn't have to create them. Wow. So that's a very on point note. It's a,

strong recommendation. Yeah. That sounds fresh, being able to run node in the browser. You know what else is fresh? FreshBooks.

Re FreshBooks is the cloud accounting solution to get you paid faster. You can log all of your invoices. You can log your hours. You can turn those into rid expenses. You would turn your hours into invoices and your expenses from your client. You can turn into personal expenses. You can see where you're at. You can track all of your different levels of taxes. And then at the end of the year, you have everything nice and clean in it. FreshBooks is awesome. If you're just billing a few people or you're running a huge company, check it out. FreshBooks .comforward/syntax to get a 30 day free trial. Thank you, FreshBooks, for sponsoring.

Sick. Cool. Okay. So let's talk about how all of this is possible. Right? We've briefly mentioned that, you know, you can't typically run server side code in the browser.

So we're doing this all through WASM, which Mhmm. If you have never heard of WASM, WASM is basically like, it says, WebAssembly, Assembly, where you can run Assembly code on the web, essentially interacting with JavaScript.

So this opens up a tremendous amount of doors for higher powered different server side language functionality in the browser itself. So what exactly is Stackblitz doing that's so WASM focused? Like, what what are we doing to get Node Into the browser via WASM. Like, let's say we have those 2 endpoints. We have Node. We have the browser. We have WASM in between. What happens there? So what node normally

needs is pretty much couple of things, access to file system, ability to run binaries, rid Access to a TCP network, and that's pretty much what the web containers is. So we've mostly build the Stuff from scratch.

So we have Rust based, file system, have a virtualized TCP network, And the binaries are endless. So sometimes for the more popular ones, we can build a WASM based, polyfill.

Sometimes it's actually a thing that is getting more traction recently.

And even one of our team, Dominic Elm, recently introduced rid A flag in Node. Js core. So it's it's in Node, I think, 14 even or at it was introduced in 16 where you can pick If a library provides, both versions of, like, binary and WASM, you can pick WASM version and have this way more portable.

It can run-in web containers, on edge Okay. And in other environments.

So when you mean, like, binaries, you're talking about rid Node packages that are not just JavaScript, but they have some lower level like, like, what are some examples? Like, image Sizing, I think, is the big one that I use. And does node starts ring ring above? Yes.

Yeah. Yeah. What Was the every time you switch your node version, you'd have to, like, recompile node Sass? Is that that's what it is? Yeah. That's a poster child of why we want to rid. Sweet from binaries to wasn't. Oh, that's kinda interesting.

So I was thinking, like, oh, like, you as web container developer, whenever there's rid. Package that uses a binary and and native thing, then you have to figure out how to, like, port that or make that available inside the web in there, which makes sense because you're you're rid You're essentially stepping outside of JavaScript or Node. Js into lower level system stuff. Right? Yep. But the people who are writing these Packages can also just write their packages in WASM instead of lower level binaries. Yeah. Or build them towards

rid Lawson, Target. If I understand that correctly, I'm, like, not and that deep into the seeds.

You should talk to one of our rid. Core engineers because they're, like they understand node on the level that I think only other node engineers do at this Point. Yeah. I think that's that's the gist of it. Cool. Okay. So this thing is

this is running in a browser tab Yeah. So to say, our browser process. Mhmm. What does performance look like there? Does the browser slow things down anyway, or do you end up just having a process that something in the cloud. Right? You have maybe an IDE in the cloud. You could offload a lot of that CPU power behind the scenes into, You know, giant machines elsewhere. But in in the browser, you have your own computer, which is probably good. But in the same time, We all know the the joke about Chrome consuming enough memory as it is. So what does performance look like here when running node in a browser tab? That's a very cool question, and I I love to answer it because it's one of those where you

really see it usually, hopefully, If I do my job correctly click because it's very counterintuitive because everything you said is is Pretty much on point. But if you compare let's compare it to what happens when you work in a typical fashion.

So most of us use Versus Code. Right? Mhmm. So Versus Code is really an electron app. Mhmm. So this is, you know, it has its own Versus Engine, it's on processes and and threads. And each time you have the server run, it's, Again, a node process. So it's own version of v eight and and so on. And, of course, you always have the person So what we do is by moving this whole stuff to the browser, we only use this Single v eight. And Mhmm. Because it's super well optimized, it has something called v eight isolates, Which both provides very quick way of accessing these parts, but also separation so it's safe. It's rid It's not like because I run this and that all in the browser, they can talk to one another.

It's rid.

Sometimes much more performant than on local. Other times, it's on par. It's basically, if you have lower end machine, You will notice a difference, and that's faster than.

Really? Yeah.

So it's not something that we advertise a lot. We mostly focus on, like Yeah. The turbo is our NPM client is fast And things like that. But actually, people sometimes come to us with that day. Oh, I have this this lower level, like, network even, and I rid Versus Code and Chrome is, like, really, really sluggish, and it's faster if you just use,

the editor Interesting. In the browser. This is, like, all really interesting to me because, like, Scott and I have talked about it a lot on the show is that, like, eventually, we will probably be coding in the browser rid. As our full time thing, and it's not going to be a toy. Mhmm. Right? And, like, we're starting to see this. There's a couple products out there that are doing it. And rid. And, also, like, what piques my interest is, like, kids these days. I'm gonna get on my old thing, but, like, a lot of people, I look at my friends' kids as they don't have a family computer. They just have iPads and phones and and things like that. Or Or they have, like, 1 computer, but it's slow and and no one really uses it. You know? Like, we're starting to see, like, sitting in front of a computer is rid. Becoming more of, like, a specialist thing again.

And I'm curious, like, what the next step will be for developers who wanna be able to create rid stuff and only have access to tablets and Ipads and stuff like that. And I don't know if this works on on Ipads or not yet, but I'm imagining that this re will eventually make its way to to mobile. Any thoughts on that? That part depends on mostly on Apple

because we

rid

Uh-oh. So I can't say not because I don't want to, but I I don't know really.

But Yeah. The thing is that to be able to run though, WASM, you need a thing called the shared r array buffer.

And this is not a yet available publicly at least on that level that we can we can support it in. Safari. It's, only available in a Chrome Chrome based browser. So, you know, Edge, Chrome, Brave.

And it is possible to run it in Firefox too, but you have to set up a sub flag. So we get a little bit of rid. Like from people that, oh, we only support this chosen browser, but it's it's not that. Yeah. We It's not your choice. Yeah. It's like, Trust me, we would love to have more users.

Yeah. Right. Yeah. And we actually this is interesting, rid Like a flip that we actually moved node away from v eight. So we are able to run it now against the, what's The spider monkey.

So we are actually making it

more flexible. And So Node is a set of read. JavaScript APIs that will use a JavaScript engine to run JavaScript. Right? Yep. And by default, no uses v eight. Right? For Sometime, there was, like, another project that was trying to get it to work with IE's old engine. I forget what that was. Oh, Yeah. I don't know. Imagine that shelf now, but the engine in Firefox is called Spidermonkey.

I have, like, a really sick Spider monkey t shirt somewhere. It's like it looks like a metal band. It's really, really cool. Anyways, so I didn't know that you could do that, but that is that something you guys are working on, or is that just

rid thing the like, switching out the entire JavaScript engine for another one. So it's something that we work on, and it's re Actually, already possible. We have 1 very big Firefox advocate. It's Mhmm. Florentz has been actually working on Firefox dev tools before, which I know we all love. This is like they especially in CSS land, they were, like, super Useful. Now Chrome is Oh, yeah. But yeah. And for instance, actually using Stackblitz in in Firefox with, like, no additional like, there is a little bit of setup to just run Firefox with that flag. It's documented in our docs if you're interested,

but it rid Once again, a spider monkey. So the the other one I was thinking of is called ChakraCore. That was the shim to be able to use Internet Explorer's JavaScript rid engine. I don't remember that. I'm assuming that it's the repository is archived because IE is no more, and, Edge uses v eight now. Right? Yep. That's really interesting to me. And that that makes sense because you couldn't ship v eight if you're running this thing in Firefox has to run on Firefox's JavaScript engine. Right? Precisely. It can't ship v eight, unless there's a WASM v eight, Something like that.

No. So, yeah, so long story short, it doesn't run on Ios yet. We're Super looking forward to it. All I think we all have Ipads, and we'd love to run it on it, but not yet. Rid. I would be surprised

if in, I don't know, 3 years from now, if we don't have really good support for this because you can kinda see ready. Apple is moving in the direction of regular people or just creators can use an iPad as a power tool rid. And, like, being able to run literally any binaries you want in WASM seems like a really good way to bring a lot of these applications to the iPad. It also feels like they really explicitly

are trying not to make the web too powerful. It does feel like that as well. Apple's like, yeah. Should we Should we give them more power and lose our 30% commission, all that stuff, or, you know, what do we do? Yeah. Yeah. I think the pressure is there. There's a lot of Pressure on those, like, Safari folks from so I think we'll get there. I even, like, last month, they introduced something behind the flag. I think that gets us closer to it. I think it was a good signal that we might rid. Get there sooner later later than later. So and also, I think one one thing to note is that it's not only about, you know, the portability ready. And just running it in the browser, but a lot of new, you know, use cases. Like, you have a lot of those Server rendered blogs, for example, that you need, like, to write in markdown.

And now you can't like, before, all blogs were in WordPress. You would just go to a website, log in, edit your code, create a new new post, and and have it. And now you need to, you know, Have Node installed, Git installed, pull your project, and all that jazz. Instead, you know wait for 20 minutes. Yeah. Rid. Yeah. And instead of, like, you you can just open a browser tab, click once, click twice, and edit edit the code, push it. We already have a GitHub integration, actually, mostly as proof of concept, but we're working on a full fledged Front end GitHub

Git. Sorry. Yeah. Maybe we should take a quick break here before we get too deep because when you're working on APIs like this, you might be They're going to check this thing out. It is really super neat. It's a error and exception healing service that records a video replay for you to see what re Happened as it happened, then you can scrub it through, check out the error log, check out the network request, all sorts of stuff. It's so very cool. So check it out at logrocket.comforward/syntax.

Sign up today and get 14 days for free. Head on a website. Just watch the video and see why it's so rid Cool. Okay. Let's get back into it, Wes. What you got? I'm curious.

Like, you're running the Versus Code Monaco in there, but, like, what if somebody wants An extension, whether that's a custom highlighter or whether that's a testing suite or anything like that. Is there any plans to be able to run Versus Code extensions as well? Is there anything like that? There's more than plans. We're actually working on it right now. Nice.

And some of us are actually already testing it. So We actually plan to change a little bit the way we communicate and do a bit more when built in public. When we rid Started working on web containers. We're actually working, like, in a almost like basement mode for 2 years, not talking to anyone because we weren't even Sure if that's possible.

Now we know pretty much all about what's possible, and we're ready. Super excited. And we know people are excited about extensions, about git, and things like that. So we'll be publishing our progress probably in in a month. And hopefully, early next year, we'll be able to run

more full fledged Versus Code in a browser with all the Versus Code test. That's really exciting. It's funny. Like, there's a couple apps that I have gone away from the desktop app version of it, and now it's just the tab ready. Running in my browser, which is pretty cool. I still for my editor, I still might want, like, an actual icon on the dock, but I don't care The actual tech running behind it. You know? So that's kinda exciting to see that. Yeah. And you can still install PWA and have an icon too. Yeah. There you go. Man, the the web. Rid. The web.

Yeah. The web. That should be our tagline syntax.

The web. Hey. The web. Okay. So a lot of times, these are really great. You you spin up a project. It's a project. It exists. You work on it. You hack on it, whatever. But a lot of projects can be a little bit more rid complex. Let let's say we have, like, a mono repo set up or multiple processes in one specific product or project. Is that something that Stacklets Supports, could support, doesn't support, has no plans of supporting, like a server and a like an API and a client running in a single project.

So right now, we are for focusing more on, like, mid complex solutions and because it's very actionable. So for example, now There is this, cool project called slide dev from the view community.

So if you go to s l I dotdev/new.

It actually already opens a style blitz with slides.

So you can you can type your, You know, slides programmatically using, you know, MDX, QoSview, and things like that. Yeah. So the cool thing is that we can now rid Support all those simple to a bit more complex workflows.

So just to stay a little bit in that area, you can also write rid. Node.new and have a fresh node web container and just start, you know, experimenting.

You can, write Vite, v I, t e, dot new slash react or slash view or anything like that, and you can have these playgrounds and things like that. But, Yeah. We are definitely looking into more real life heavy scenarios.

This is something that we have, like, enterprise Places Mhmm. That allow you to to pre pretty much, like, have this nice elegant setup of multiple libraries, ready. Projects and so on. And, actually, we'll be introducing so by the time that podcast comes out, we will be actually supporting it.

Oh, wow. Awesome. Cool. And also about the real life usages.

A month ago, I guess, or 2, we've introduced minimal support for

I was just typing that in the notes to ask you next. Yeah. I was gonna say, Wes has some some database notes coming up here, so that's very timely. Rid That was my question. Is that like, can you run a database on it? Specifically, SQLite because it's such a nice little tidy package you can run. So you're you're working on that? Yeah. Pretty much. That's the scope that we've implemented it, it's ready. So we've released it, as I said, I think 2 months ago.

And it doesn't have rid Everything, but it allows pretty much

right now. So yeah. That's really cool. Are there any, like, limitations for this type of thing that, I guess, like, you've you've said there's a couple here or there. Are there any, like, oh, you gotta think about your application in a specific way? Or Is there any, like, limitations or how large something can be in a specific Wasm or web container?

Not Freely. Not that we've really come upon those.

So what you're saying is you're inviting everyone to see how big we can get it? Oh, yeah. Definitely. Yeah. We do need we do need testers. So this is this is really cool that actually people come to us with ideas that We wouldn't even figure out. Like, I think couple of days ago, John Lindquist was testing his what's the name of the library that, Like, automat. Yeah. What is that? ScriptKit. Yeah. And was using Stackblitz to to demo it. So who thought it's an interesting re We really like those new challenging use cases because in contrast to, like, this custom front end solution that I've mentioned before, we come across something that is new to us, it's just some kind of fix that we need to or lacking API, for example, that we need to implement, and it actually makes our stuff more bulletproof.

It's not, like, specifically for this library or build tool. It's For web containers. So yeah. Oh, yeah. Like writing a failing test, and then you go and make it work. Yep. Mhmm. Exactly.

Can you tell us about turbo? You it says you've you wrote your own NPM client that's faster? That's actually a 2nd, generation of turbo already.

1st one was for that custom stuff. Mhmm. And even that first one was way faster because it was smart about what it needs. So in packet JSON, you have this main file, which is the, like, entry file to a library.

And from that, you know, like, what That file imports.

So we would traverse that path and only import those files to the client.

So, you know, no license files or, like, version for for specific, like, environments and things like that.

Thing happens in new turbo, but additional things that I would like to point out here is that, for example, it because it works In browser, it uses browser caching.

So for example, if you NPM install a thing for the first time, it can Take, like, up to, say, 15 seconds depending on your connect connection. The 2nd time, it will take, like, 4. Yeah.

And ready. Each time you go to the project, we actually reinstall the dependencies, every time. So For example, if you like, at any point, something becomes, like, really botched and you need to, like, normally, locally, you would write rid and reinstall the dependencies.

Here, you just, refresh the page.

One additional big rid Thing that, Turbo has for a going for it is to safety, and it's actually the weekend after we are recording this That there was this big leak of your parser JS. Mhmm. Yep. And that's like a tiny library that is Just used an Tiny. 88,000,000 projects per year.

Yeah. At least I mean your downloads. What is it? It parses, Oh, User agent. User agent. It's a user agent parser. Yeah. So the issue is that the NPM is unsafe, rid It's crazy

how we all That sounds like a Hacker News blog post title, NPM is unsafe.

Already? And we've known about it since, like, forever.

I think couple of years at least. Yeah. And it's because problem is Just the other is that if you're NPM library maintainer, you log in in your Yeah. Terminal, for example, and you're authenticated Until you log out pretty much. Yeah. So if you get a a bug, it can publish a new version of this read. Library to NPM, which is centralized.

So everyone will get a new version of this and will like, it's it's a perfect spreading rid. Yeah.

And what's even worse that is that NPM libraries sometimes has the have this post install phase. And this is where this whole thing can happen. Like, pretty much anything can happen at this point.

So Duo doesn't have this post install for the, pure dependencies.

And this this plus the fact that it runs already inside of the browser Sunbox,

it makes it, like, bulletproof pretty much. Contained. Yeah. That's super neat, but turbo is not something that you could use outside of the context rid of this that is specifically for Stackblitz. It's specifically for in browser. So just to make that clear, I know we mentioned it's, You know, kind of NPM like. You know what I mean? So Yeah. It's turbo is web container specific for now. Although

We have people asking for for a local version of turbo. So maybe at some point, no promises.

Rid. Yeah. Yeah. I'll take it. Yeah. Take 1 turbo, please. Not seem like a fun thing to write. It's a NPM client that works on everybody's machine. Yeah.

Yeah. I guess he did the hard work already, which is figuring out all the dependencies, so that's pretty interesting. We've been, like, sort of, like, keeping our eye on on these things as well. We've talked about there's CodeSandbox That does kind of something similar.

Vscode.dev just rolled something out. Gitpod, we're probably gonna have them on the podcast as well. Rid. Are you aware of of what these things do? Like, sometimes people always ask me, like, what's the difference between your course and this course? I'm just like, I don't know. I haven't take the course. But, So you it's totally fine for you to say. I'm I'm not totally sure, but have you checked out any of these other things, and is there differences?

Oh, sure. So, actually, I think we all check each other in that to be honest. And even if you if if you actually take a look at the Versus Code announcement post dimension web containers. Oh, really? Yes.

Just with a typo. There is a space. It shouldn't have a space.

Yeah. So so for example, CodeSandbox does, mix of the the 1st model and the 2nd model. So it's either custom compilation on The browser or VM based stuff.

And by the way, one of the issues with VMs is also if something Right. It's broken if you end up in a broken state, which happens. If you refresh the page, you're getting connected to the same VM instance.

So you're like just everything is broken again. Yep. Still. And the second1 was Versus code dev. So Versus code dev is actually very cool, and we were excited to see that because it's It's a proof on big scale that this kind of UI for, IDEs can work.

So they're doing a very good job to to change people's mind model about this. Like, we've been working in browsers for, like, Very heavily.

Very intense stuff for for a long time. And yeah. And with v s code dev, you can actually, you know, install rid. Some extensions you can work on quite big code basis too. The thing is that it's only the editor. It's an extended Monaco, you might So you can't run it. And I think if you can switch to the so Codespaces is again that 2nd model. So this is an, remote VM.

So very useful thing and very interesting to see that, but Nothing new under the sun, I was gonna say. Yeah. It's just backed by by Microsoft and has a very nice integration rid To to GitHub. But besides that, it's just the remote. Yeah. I'm very curious to see what this looks like integrated into

The Edge browser. Eventually, I'm sure they'll do some neat stuff there. But it it does say in the There is some neat stuff in there already. Yeah, it was. Really? Yeah. Rid I've been using Edge for a little bit for the past couple weeks. Got some neat stuff we'll have to chat about. Maybe I need to do a week or 2 on that. It does say in the v s code dot dev announcement, it says, for For example, terminal and debugger are not available, which makes sense since you can't compile, run, or debug, rust, or go applications Within this the browser sandbox. Although, emerging technologies like web containers may someday change this. It already is Versus Code dev.

Check out Stackblitz.

We actually only need to to bring the rest of the Versus code into to have the re experience.

So early next year, we'll be releasing that. We'll be releasing GitHub integration.

And then Our holy grail is pretty much to for you to be able to uninstall your local ID.

That's pretty cool. Yeah. I'm I'm really glad we had you on for this because, like, That's like the next gen of this type of stuff, and I I can already hear the VIM users being like, oh, I can already SSH into a box and and run VIM on there already. You know? But can you run node in that process? It's our, like, 3rd most popular,

feature request. Do you have Vim bindings? So we will have something for the end users too very soon, I promise.

Wow. Generally, I I'm super excited about this because I know that you're Very much like into tinkering inside of browser. You know? I've heard you talking, like, an hour about elements panel in in dev tools, And this is pretty much an extension of it. You can, you know, run nodes new and have a new, like, sandbox to play with, but with pretty much no limitation.

You can install, you know, anything and and feel safe. I think that's also like, I don't want to care about, rid No. DevOps stuff, really. I'm I'm kind of more of a front end person, and I think Mhmm. There's there's a market for that.

Totally. Oh, yeah. With everything. With all these new hosts, with all these new tools, the whole DevOps thing is becoming less and less of a rid A thing you need to care about and more of a thing that just scales for you and and works and deploys and builds and all that good stuff. So before we get moving into, you know, wrap up here, let's take some time to talk about one of our sponsors, which is a great place to host any of your content. Wes, do you wanna talk about Linode? Yes.

Linode is cloud computing that developers trust. So if you wanna if you wanna host your application. Talk about being able to host stuff really easily. Linode is one of those people where you can host that thing. So they have rid. All kinds of different products that you can host yourself on. I'm gonna specifically just talk about their Linux server hosting right now where you sign up. Rid. They're gonna give you a $100 free so you can sign up for this thing and use that $100, and you can configure it in terms of how much space and and CPU and all that stuff that you need. And And you could go ahead and deploy your application to it. They have lots of good resources on getting your application up and running. And I was just talking to the folks at Linode rid. About some sponsorship next year, and they gave me a little peep into what's coming next year. I'm not allowed to say, but let me tell you rid Some pretty exciting stuff. So check it out. Linode, l I n o d e.comforward/ syntax. That's gonna get you a $100 in free credit. Thank you, Linode, for sponsoring.

Alright. Yeah. Let's get into some sick picks. So, so I have a sick pick, this is a sick pick that Wes had just done somewhat recently, so it feels kind of wrong to do this. But this is a sick pick. It's gonna be a double up sick rid Pick. I'm gonna say, Wes Wes sick picked something, and I really like it, so I wanna sick pick it as well, which is these halo magnets For the back of your your phone, Wes, I I just tossed 1 on the back of my phone straight up and put 1 on the back of my wife's phone. Yeah. And it's just like a thin little magnet. You know, the best part about it was that little guide that shows you exactly where the wireless charger is on the back of your phone, And then now I have MagSafe for the magnet charging on my phone, and mine didn't come with that. So it's, like, big big that I have that now, it works really, really well, and, honestly, this little magnet took about 2 seconds to to put on here. It was super cheap, and it's been really super nice. I can't wait to get a whole bunch of rid Magnet,

accessories now to just shove my phone on. So, yeah, shout out shout out to you for picking that one in the past. It's rid. So good. I've been I've been using mine for probably 2 weeks now. It's not a magnet. The thing that you put in your phone is a little magnet. It's not a magnet. You're right. Yeah. It's just a hunk of metal, but the wireless rid. Charger and the I'm thinking about getting a little dock for my desk because I just slap my phone. I rid I just just put it down beside my keyboard, or I'll throw it on the wireless charger. But now I'm thinking, oh, you got 1 on your desk? Yep. And it just clips on there. Yeah. Oh, because then you can See. So I did a partnership with Grovemade or Groovemade or whatever that company is, and Yeah. To be honest, the stuff is expensive,

And it's okay. Like, this stand is is super expensive, and it didn't come with the charger. When I got it, I was like, really? I have Buy my own charger now, and this thing was really expensive. Buy the, like, Apple MagSafe thing to put in it? Yeah. It would it's outrageous a little bit, but did because they they sent it to me, and I bought the charger, and I put it in here. And I've been using it today for the 1st time. Yeah. I dig a little little magnet Stand on my desk that wirelessly charges the phone. That I I I dig that. It's it's really pretty nice. Smart. Smart. Tomek, do you have any sick pics for us? I'm just looking around me and, don't That's what we do.

Super too exciting, but I always recommend this. It's a hard sell because it's a series of 17 books.

Oh. But once you get past, Like, all it it starts good already. Just Yeah. But once you get past, like, 4, we are just lost. Is it is it how to code web assembly in 17 parts? Close. It's Dresden Files? Oh, I've heard of yeah. I've heard the words Dresden Files ready for It's super good. It's still, I think, going strong. Like, there are still new books in planned, but I I got my wife into it. And, like, on the audiobooks, we've been, like, she's already through, I think, 14, and and she started, like, 4 months ago. That's like 200 hours of listening. Yeah.

Yeah. We love it.

And it's a detective story about, rid. Magicians living in, Chicago in modern days. And it's from And I highly recommend audiobooks.

So because it's from first person, it, like, it reads really well.

And what's also cool is that the narration for the audiobooks is by James Masters, who you might know from Buffy the vampire player series. Mhmm. And he's just golden. He he he just like, he should just win all the awards.

So, yeah, the Story itself is cool, is is novel, but the characters, the growth, the the relationships are like, nah. So yeah.

Definitely.

Rid Sick. I am going to sick pick I I'm gonna be sick picking a whole bunch of car stuff because my family we just got a minivan, And I've been updating a whole bunch of the little little things in the minivan, and one thing that I did Did you replace the backup camera in your car? Rid I did. What the heck?

Who does that?

Me.

I'm not gonna I'll sick pick that in the future once I, rid. I just did it, like, 2 days ago, so I I want to get a little bit more time on it before I said pick it. But, yeah, I did that. That was pretty sweet. This one is a really easy upgrade to any car, and that is switching out the interior light bulbs rid. LED. Mhmm. So you have, like, these, like, orange lights in there. Some of them are not very bright and they get very hot. Rid. There is just plug and play LED replacements where you just pop the cover off, pull the old bulb out, make sure it cools down first, rid and then pop the new one in. And, like so we bought, like, a 2015 minivan, so it has some of this, like, older stuff. And we were coming from, like, a nicer rid. SUV and or like, oh, these lights are not as nice as the the old SUV. So we switched them all out without with all LED, and they're so much brighter. And it just they're, like, nice, red. Bright, clean, white. All the puddle lights, when you open the door and it shines on the ground, those are so much brighter, so you can see a lot better. Rid. And it's just, like, $18 for a pack of 10. Mhmm. It's probably, like, $11 American.

And, it was such a good upgrade to the car. So I recommend that for anyone who wants a tiny little upgrade to their car for not too much money. That sounds kinda fun. It shamelessly plugs. Would you like to plug anything? Is there anything at all in the world? So to be honest, we've been shipping so much stuff and supporting so much stuff that

I haven't been able to keep up with the announcements.

Yeah. That's alright. Literally, like, there there is way more stuff That we admit to, that we support.

So, yeah, if you go to I think the Twitter is the best thing, the best place to Find out the new stuff, but so Stackblitz Twitter account is pretty active, but still not active enough.

And if you go to rid. .Com and sign in, you should see bunch of new starters for, like, working with slides, It's working with NX and other things that we'll be releasing in before this podcast is published.

Sick. Yeah. Awesome. I can't wait to see the the steady stream of, new stuff.

I'm going to shamelessly plug the latest level up Level up tutorials course, which is on [email protected], where we teach you how to build extremely, dare I say, blazingly fast Static sites with ASTRO, and we talk all about why you would use ASTRO, how we can integrate things like Svelte or whatever into it, and just talk about why this rid This server first static framework is is really pretty exciting, so you can check that out at leveluptutorials.com rid. Forward slash pro.

I am going to shamelessly plug all my web development courses. Do you wanna learn a little thing or two about JavaScript, read. HTML, CSS, you name it. Go to westboss.comforward/courses, and you can take my beginner JavaScript course or my beginner React course or my advanced React course, which I rid Just updated. Check it out at westpaws.comforward/courses, and use coupon code syntax on any of the courses for an extra $10 off. Rid. Ten bucks off tick.

Awesome. Well, Tomac, thank you so much for coming on. That was really interesting. Makes me really excited about the future of re IDEs in general. Yeah. And not only that, but, like, the future of the browser being able to run anything,

I think that's really, really cool. Feature the browser. Yeah. It's a high time for us, like, web developers to be able to use, you know, web to build the web. Right. So even even after this fact, actually yeah. I I've been so excite like, we've been able to support Astro For a couple of weeks at least now. Mhmm. And I was preparing the announcement.

I was like, oh, I let me actually play with it. And it's like rid Super fun. It's great. Do it locally. I bought yeah. It's it's super cool. Astros. We just recorded a podcast on it. Yeah. We just did a a little explainer on it. So yeah. Rid So shout out to Astro. Shout out to the team over there. So yeah. Well, I guess that's it for this episode of syntax. We will catch you next week on Monday for another tasty treat. Peace. Peace.

Head on over to syntax.fm for a read. Full archive of all of our shows. And don't forget to subscribe in your podcast player or drop a review if you like this show.

Rid.