Speaker is a big fan of interactivity in their job. In their job they take care of tutorials and writes tutorials and blog posts. In the signore web app, they are build an interactive coding experience. The Trusted browser-based runtime from stack Blitz is an API that they can use in their own project.

Speaker has created an interactive, learning material for full stack. They are a big fan of felt.

Speaker is excited to see what they're going to do with learn. They want to build fully branded products without connecting to external servers or directing users to third party apps. They are excited about the full browser support for Porting. Speaker is excited about the interactive tutorials from spelt a stress-free editor.

Speaker explains to Speaker how GitHub allows one to work on a project without interrupting local development. They are interested in AI applications.

Speaker is a big fan of programming stuff in the cloud. They have a Chromebook, but they sent it to get repaired. Speaker likes to use different tools that allow them to try things out on the web without having to download a lot of resources. They like services that allow them to code in the cloud and then deploy from there. Speaker is a JavaScript developer Advocate. One of their favorite places to do web component demos is Stack bullets. Speaker is going to talk about web container technology today.

Speaker has created a project called stack Blitz. It allows everyone to start from the same place and build from there. Speaker is creating web components for work.

Speaker has developed a tool that allows people to implement web components in their framework of choice without downloading everything and trying it out in the browser. They are excited about the new web container API. After years of battle, testing by millions of developers, the web containers API is now available to everyone.

Speaker is excited about the new web container API that allows them to do stuff in the browser. They would like to be able to offer the same experience as the web container tutorial. Speaker is excited about the stack Blitz, which allows people to do a lot of cool stuff in the browser.

Speaker is going to check out interactive elements in their website. They are almost done with the radio show stuff. Their back is still a bit sore, but they are feeling good. They will send Anthony Cruz some traveling music.

Speaker will see everyone at the next break session 15 minutes after the hour.

• github repo
• favorite spots
• web containers
• stack blitz
• npm packages
• ship

Welcome back.

Your dreams were your ticket out.

Same old lady with another since you, but those dreams every made, and they turn around.

Welcome back.

All right.

Give it a stretch.

Oh yeah.

Oh yeah.

Okay.

Yeah, all right, I am feeling much better.

A little bit of breakfast and my back feels, it's getting better, it feels better.

You know, I mean because I think if I were to the kind of like lie around all day and not like do stuff, probably make it worse.

So I think by moving around is helping kind of stretch it out.

Of course, I am losing my voice.

All right.

So I will make this quick.

I wanted for this brick session.

I want to kind of talk about this thing that I saw released.

Earlier last week.

And I think it's pretty cool because I am a big fan of doing as much as programming stuff like in the cloud, right?

So because a lot of people don't have like, vices to be able to run like heavy programs, right?

And so like, for example, like I have a Chromebook, it's a nice Chrome book, actually sent it to get repaired, but like, I like being able to do as much stuff in the cloud because I don't have to download all these files to my computer, especially if I am just trying stuff out and playing around with things, right?

And so, I like to be able to use different tools that allow me to try things out on the web, you know, on the internet without having to download a bunch of resources or use up a bunch of resources on my local machine.

And so on, let me share my screen here.

So I like those different type of like services that will allow you to whether it be spin up, like you're like a vs code in the cloud or whatever you so you can kind of like code things and see an actual preview of it and some of It allow you to like pull in Repose like GitHub repos, work on it and then be able to deploy from there so stuff like that.

To me is cool because that gives you if you're out traveling or whatever and you wanted to update something on your website or what have you and you just carry around like a Chromebook or something you're not you like you don't have your big machine or whatever that you have at home or what have you that you normally use.

Let us say you get to be able to hop on your Chromebook or whatever, pull down the repo and a thing.

Make your changes and you're good to go so well.

All that being said, there's a.

So one of my favorite spots to do those that, that offers, those type of things is, stack bullets, and let me pull up the site.

So I am going to show you like my Account on stacked wits.

Eventually, if this loads And so this is my stack with account right and just with a click of like a button you can start up a brand-new next JS like project.

You can do nux node.js this was back in the day was super cool.

We talk, we spoke about this before previously like a while back, when it came out.

But this is using like the web container stuff, which is what we're going to talk about today.

So web containers you spit up a vanilla JavaScript thing Typescript react, angular View, and a bunch more, right?

And why I like it and way I have been using it.

Is that a lot of times like you see here, web component demos, I with my job as a JavaScript developer Advocate, I am able to get the I get the chance and opportunity to be able to go and do like workshops and talks and stuff like that.

And with the workshops, I like hands-on experience.

So without having to worry about an about what everybody's like, have on their local systems on their laptops, you can just spin up like a stack Blitz and everybody's on the same page, you know?

I mean, which I think is amazing.

So everybody starting at the beginning and then you can always download it later if you want and set it up.

But as far as like doing workshops is just so much easier to be able to have everybody start off the same place and then be able to build from there.

Is that spending time trying to get everybody on the same page, right?

So that's kind of like how it.

So I have a bunch of like, where component demo stuff.

So a lot of times I will just like, create like little simple projects, you know, like here's a node.js thing I was working on work, so angular.

So I am creating some web components for work and I have examples on how to use them in different Frameworks.

And so from the GitHub repo of it, you just click a link, it opened UPS.

It opened up stack Blitz and the project is there you just put in your credentials and it will just like work.

So you can kind of see how to implement Aunt, the web components in your framework of choice, kind of thing.

Without you having Again, download everything and trying it out, you can just try it out in the browser.

If you don't like it, then it just goes away, right?

Cool and a bunch of Astro stuff.

I have been playing around with and things.

It's also a pretty cool way for me to like prototype stuff like I am saying like praying playing around with things so there's like a new thing.

I have an idea for something and I go let me go try before actually building it locally on my machine, right?

So it's kind of like want to see if the ideal work.

So that's what it's cool.

Now.

If you note, now this here, this first one is a brand-new thing, the web container API, right?

And so when containers are In what was kind of like announced when they were able to allow nodejs project to run in your browser.

And I don't know if that comes across on how amazing that is, but to be able to have like a whole runtime, this be able to run in your browser.

That's kind of amazing.

So they're able to do that, and they call it web containers but now there's a web container API.

So oh, by the way, I am let me throw a link to Nothing I show next to the video so you're able to just check it out for yourself.

Oh, on their Twitter page, they actually they're pinned tweet kind of talks about it.

And so today, on February 14th, after years of battle, testing by millions of developers, like I said, they're using it for their node.js projects, right?

And the browser again, it's amazing in collaboration with browser vendors.

So now is able to be used in all these different types of browsers, which is nothing because that's super important.

So web containers API is now available to everyone.

So start building the next generation of interactive coding experiences at web containers dot IO.

So this especially for me and like my line of work.

This is super cool because Like I was saying earlier, I am kind of like a part of my job.

I kind of take over I kind of take care of tutorials and I write tutorials and blog posts and all these things, right?

And I am a big fan of interactivity.

And so, being able to have like, all right, I could say in our tutorials or whatever or our documentation site, can be like, all right?

Because we step through different things in order to get the project setup, right?

So instead of having you to do it, On your local machine and going back and forth?

You'd be able to do it within your browser in the tutorial right then and there which I think is super cool so while you're reading along you can go and do it and see the actually work.

So yeah.

So it's like that I think is cool.

So if you go to web containers that I owe you presented with this right?

And so Dev environment, signore web app.

So from interactive tutorials to full-blown ID, he's build instant interactive coding experience back by web containers and again we spoke about before be able to run like node in your browser.

The Trusted browser-based runtime from stack Blitz.

And so again, there they have had it before but now it's like an API that you can use in your own project, right?

Cause before it would be like on stack Blitz in the stack Blitz website, but now you can put it in your own web app, which is super cool.

All right, so we can kind of see here for.

Here's an example.

And so importing chalk is like a CLI tool.

Helps like color.

Like if you ever like mpm install something easy.

Like Different colors and like there's like a warning, maybe it's red or like it's yellow or if it's an error, it's red or whatever like you can use, you could do that with chalk.

So you can see here at console logging and chalk magenta.

So, hello from the web content API, so that would be in magenta, and then they have like a little which I can't see waving Emoji.

Hey, if you want me green here, cool.

Right.

Let us see.

Let us see, let us see.

So then all this, right?

So this kind of show you what it looks like.

So this is what it did.

Like it.

This installs dependencies.

Now if you run, it is what happened?

So you see.

Here's the magenta.

And here's the green, that is kind of amazing.

Then.

You want like list the files?

These are commands.

You can just run in there, right?

So let me see.

I think I can just type it in.

Yeah.

And it shows it to you.

That is kind of amazing.

So yeah, so then again, if I wanted to run node, this is in the browser on their site like this, you could do this same thing.

I could type I can't type and talk.

Hey that's kind of amazing.

I just it's super cool and so you can find out more information about stuff here.

So spell can you know I am a big fan of felt.

So on this field kit team, we fantasize for years about being able to build fully Interactive, Learning material for full stack.

Frame Works by the way.

Let me copy this link before I forget.

I am going to add it to the list of links next to the recording of the video so you can check it out for yourself.

So let us take a quick look at smoke it because We have like an internet.

We have a really good interactive kind of thing already.

Like learned that spelt do.

I think where is it?

Where is it?

I think it's learn.

We see learn.

Yep.

But this is kind of what they have now, right?

And you can kind of go through and step through it, and so they have like the smoke, it's tough here.

So I mean, I like, they're like learning tutorial kind of thing, which is pretty cool.

And so you like they give you the information here and you can solve it and this is running.

If I remember correctly, I think this is using stack widths here, but now I think they want to do is to be able to do all that.

Easier in their application kind of thing.

So I am excited to see what they're going to do with it.

So yeah, so more stuff here.

Really cool to put the Power your web app with the web container API and create unmatched user experiences by integrating node js directly into your web app.

Build fully branded products without connecting to external servers or directing users a way to third party apps and so that is super cool and it's in like all major Frameworks like I said they have like that like solid JS remix quick just a quick next nux and spelt socket probably and then Run npm packages also in there.

So, for example, like we have npm package for the stuff we do at work.

So being able to just like you go to, our site are doc site or whatever or tutorial and like as you're going through because what's cool is when you're on our site like we already and you log in to the site, then we know you like your API key or whatever.

So you would have to enter that in again you'd be able to do all this stuff in the browser and kind of play around with it and test it out for yourself.

Right.

And that is super cool.

The full browser support.

So you see all the major browsers support it, like they mentioned before and then it's running like webassembly to be able to do that.

So it looks like.

Yes, you can Port your favorite language or framework to what fun it into web container.

So it's using right now is like nodejs and the using wasm webassembly to make it run natively in the browser.

So I guess that's how they do it and that they're saying that you could Port.

You're so like Ruby.

Like they have here or python.

You be able to as long as you can get that into webassembly you can get that running we just so that opens it up to everything else, right?

Which is kind of amazing.

And then like to set up a few steps, boot up a web container, right?

That's what they do, they show you the Highlight the code right there, populated the containers file system, right?

So that's what container that amounts of you're mounting it and then you can install packages if you want.

They're so like their in npm install right there.

That's pretty dope.

And then run the server in the browser.

That's it.

That is pretty cool.

And then oh so then yeah.

So you see here in directed towards they showed, so I guess.

Okay.

So I guess learn that's felt that Dev already used it.

Okay cool.

Alright and then also looks like stacked list documentation here, so build Rich development experience is not possible before.

So we looked at the interactive tutorials from spelt a stress-free editor, enabling non-technical contributors to make their own PR's with a live disposable preview.

So yeah.

So this kind of goes into their hole was It codes, n someone that I think they called it.

On a stack.

With this logo here, I think it's called, like codes n or something.

Where it's pretty cool.

We're from your actual, oh, here's a blog post.

But from your GitHub repo, like you're able to pull, pull it down to like stack Blitz or whatever, and look at the pr, right?

See if it's cool make changes and then push it back up and then so it's like a whole thing so you don't have To worry about what like, if you're working on the project but then somebody made a PR.

So instead of having to like interrupt, what you're working on locally, you can pull their PR on the web, take a look at it and like, all right, that looks good.

And then push it back with all without having to disturb your local environment.

Which again, I think it's super cool with stuff, you're able to do on the web.

So here's a whole blog post from add that as well.

And then yeah.

So a lot of cool stuff here.

It's about what containers, so they break it all down, right?

Super cool.

Get back to here and then AI applications.

Oh, that's cool.

So retune is setting the stage for AI native ID.

He's oh, so it will you do anything?

So, with a co-pilot that I can understand and operate in the full runtime context across server and client, oh, that's cool.

So they have different examples of people using it and so it's The stuff support for every team you can slash server costs and you can ship faster and then Leverage The Tech we use in our own products.

So like I said, they were using it for like the node samples example that you could spin up on stack Blitz.

And yeah, pretty cool.

It's like, I can see, you can do it from a workspace from a GitHub repo, or from your local machine.

Super cool.

Super cool.

All right.

Yeah and then so if you were to click that, I think which one was here.

So if you were to click this web container API, right?

That will bring up, is this right?

And it's all in the browser, and so I can do stuff.

So, here's an example.

So let us say that's like your documentation site and you want somebody to be able to intercept here and it will show up here.

So like I was adding like an exclamation points.

Here.

So you have them in tutorials saying, hey, do this at a bunch of exclamation points for whatever reason?

I don't know.

But then you will see it pop up next to it.

Like, that is kind of amazing and super cool, and I am I am going to talk to my team.

Let them know about this because we were talking about stuff like this before, but now we can do it.

And especially since you can do it with other, like, Ruby and python.

It would be cool to be able to offer the same experience.

Because I mean No, it is like everywhere already.

And like I said, they are offering the web container stuff with the node.js stuff already.

So but be able to put it into your actual like it because we have Ruby developers, you know, saying I use our stuff.

So being able to use it, so they don't even have to pull it down to the machine because do it in the browser right then?

And there, I think that would be a super awesome.

So, yeah, so all sorts of my brain is like, like just thinking of all these different like ideas and use cases and yeah.

So that's that shout to them again shot.

The stack Blitz, doing a lot of cool stuff in the browser.

Make a lot of cool things happen on the web and I think that's super dope.

Alright, so that is that going to get you all back to work?

Thanks for hanging out.

Let me set up.

Screen share here.

So what do you think?

Is that something that you would want to check out like for yourself?

Do you have any ideas being able to have these interactive like elements in your like how would that help you?

You know I am so let me know and yeah I am getting back to work because I have got a lot of stuff I need to get done.

I am almost done with the radio show stuff.

The post radio show stuff so feeling good.

I am getting me productive even though my back is still kind of jacked up, but here we go.

Thanks again for hanging out.

See you around and I am gonna send you.

Offer some traveling music.

This is Anthony Cruz.

AKA butter.

The track is called, thank you.

Because again, thanks for hanging out and Yeah till then to the next break session, 15 minutes after the hour, I wish you much productivity.

All right, thanks again y'all see you around.

Y'all be easy piece.