Links mentioned: Details automatically generated.
summary

Speaker doesn't know where web containers are. Speaker explains how the learn dots felt dot dev differs from the tutorial. Speaker explains to Speaker how the advanced stuff stops at stores. There was no tutorial like interactive tutorials on like the smell kids sight until now. Now there is a node server running in the browser.

Speaker gave a presentation on web components on the 16th. Rich harris, who created svelte. Org website, showed us the upcoming interactive's felt and smelt kit tutorials. Speaker is a big fan of the website.

Speaker gave a presentation at a conference recently. As part of their job, Speaker gets to give talks and workshops.

Speaker explains to their student how to apply the lesson. Speaker enjoyed the tutorial section. Speaker has not built anything as felt kit yet. Speaker has been using astro as a replacement for sapper replacement. Svelte is a server-side rendering tool. There is no tutorial section on how to do it.

Speaker wants to run a server-side application in a browser. The website recently changed the layout and all the links and stuff will be with the recorded video so people can check it out later. Speaker is going to send them some traveling music. Speaker is trying to back up some of their projects to github on their chromebook.

Speaker explains how to create a felt kit. Speaker is pre-rendering the page. If they want to build multi-page applications, they use the framework of the library they are using. Speaker does not agree on the right way to create a dashboard. Speaker will create a single page application. Speaker explains to Speaker what a web container is.

topics
  • speakers likes
  • web containers
  • reactivity props
  • interactive tutorials
transcript

Welcome back your dreams, welcome back to that same old place that you will the new since you hung around but those dreams every vein, and they turn around.

Hey, what's going on?

All right, let me stop this.

How is everyone doing?

Hopefully, you're being productive and That means to you.

Okay, so quickly I wanted to go over.

Okay.

So there was a conference that recently just happened and I gave like a remote.

There's a let me just go to the site.

Hold on.

Go to the Twitter not sure of the actual I want to mess that up.

I know the Twitter I see here.

Okay.

So, come on.

Move over here.

Yo.

Okay.

So Wanted to show this.

All right, let us see.

Okay so yeah, so it is that one.

Okay, cool.

So shouts to let me share my screen.

Let me kind of like a story here.

All right.

So part of my job, I get to give like talks and workshops which I really enjoy.

I really enjoy giving workshops and things and So, I was able to give a like, a quick lightning talk, kind of presentation thing at JS nation, that is actually.

Oh yeah, so it because it's kind of split up in two days.

So yeah, so the 16th, when my presentation happened, right?

And so is on web components, basically how well components are awesome.

And so but then they have a bunch of speakers likes there's like a remote and in person, and so I did the remote one and Rich Harris person who created svelte.

Presented there.

And one of the things I wanted to say, I think they might have said something on Twitter about it.

Maybe that's I think I saw, and they pushed it on Twitter as well, such as Eric.

Let me see here.

I was not thinking about pulling this up, I think they might have mentioned it.

They mention it here.

Maybe.

Yeah.

Okay, so here's a retweet.

And so today, I just nature Nation, Rich Harris, showed us the upcoming, interactive's felt and smelt kit tutorials.

This one is me more to.

Finally, try-outs.

Felt cool.

You know, I am a big fan of felt the site's, you're on right now built with svelte and sapper.

So I am a big fan.

So yeah.

So there are like a new tutorial section, right?

So you can see from as you as this picture shows.

So what's cool is though?

Oh, and this is the URL to the actual site.

So here, you will be able to probably let me then I add their Twitter.

Let me since I am showing these, let me add these links.

So if you want to check them out for yourself and then the actual Miss. Tweedy.

I think they mentioned it also before somewhere else, but my computer sounds like it's about to take off.

So let me just copy this one.

Yeah.

Cool.

Great as well.

And this is their actual website.

So if you want to check out the video once they release it, you can as well, cool.

And so, Mentions felt right.

So speltz already have like on spelled Dev slash tutorial / starts off at Basics and let me copy and paste that.

So it's a pretty good tutorial.

That's what I first used when I was looking at svelte.

And it's cool because it's interactive, so you can kind of like it's automatically spits it out here, which is pretty cool.

And so they show all sorts of things like earlier.

I showed The Deferred transitions, which is what I am using for a project I am working on.

And so what school is?

So give you all the information kind of here on what to do and like explain it for you and it tells you like I like what to do to make it work, right?

And so you can type it in yourself, but they also have this show me And it just does it for you and so, so you can reset it as well to go back.

So now this is how it looked before applying the lesson.

So you see how it is.

Kind of like this jump there, right?

Now, if you do show me, And you click it, see you just kind of like went over there and so that's where I spoke about earlier or what have you so but so this is a good tutorial section, I appreciate it.

I enjoyed it.

There's like the examples as well, so they have these two.

So these are also so that kind of creepy made different examples of things as well and there's like a ripple joint where you could create your own and share it and stuff.

You can save them.

That's super cool, right?

But now there's this thing called svelte kit.

We're just kind like, the framework for spilt and yeah, use it for this site as well until it works.

If I remember correctly.

Yeah, that is built with.

No not spoken supper.

I have not built anything as felt kit yet, so I was such a big fan of sapper.

I just can't like Let It Go.

And I have been, I have been using Astro, that's kind of like my sapper replacement.

And so I have been using that so smoke.

It seems cool.

So, it's like, how I view has next and react has next.

Svelte, has felt kits.

And so it makes it basically to where you can, like, server-side render stuff.

You have like, routes and pages and things, which is pretty cool.

And some other things as well.

So you can find out more since I have this up.

Let me but you notice though, There's like no tutorial section on how to do it and that is primarily because you need like a node server and you can't really run that kind of stuff like on the web until, and we spoke about this before.

So stack Blitz, they actually have these.

They have it where it's come over the use of show it in the front page.

Where is the?

They have it now, where is they're called web containers, and they're kind of like node.

You're able to run note in the browser which is kind of amazing.

So, I don't know.

They have it because you used to be like a thing and it would say, like it's Neither, but if you look under like full-stack, you will see there's this felt kit project.

Are you ready to go?

And so if you open that up, that looks like this.

But it's pretty cool.

And so you see like / about / to dues as you're able to kind of like interact stuff.

So like this is a spelt component here.

That's what helps make things I guess like faster right now was cool.

As what was announced the now is that there's the learn dots felt dot Dev, so where you can kind of like do the same thing because a lot of stuff similar.

So like the reactivity props, Logics binding story.

And so they split it up to where it's like you the basics as felt then there's like the introduction to spelt kit and then there's Advanced sections.

And so whereas here with the tutorial Everything's coming all in one place.

So you see the same reactivity props, logic events, bindings life cycle, and then they have stores motion, and all these other things that's broken out into the more advanced spelt stuff.

So you see it stops at stores.

So the advanced stuff has like the animations emotions, and all these other things.

So that's pretty cool.

So whereas here it kind of like you just get everything all together which is cool.

But then if you want to also kind of throw in spelt kit into the mix, Then you have like the introduction part after the introductions felt.

So like I was saying before there was no tutorial like interactive tutorials on like the smell kids sight until now when you know, just look it up.

There's like only if it's under no dot Moon.

We spoke about it before, so I don't know if you can like look back previously.

Now just makes it, but this is like a node server right now running in the browser, which is kind of amazing.

So yeah, okay.

So spill kit.

So let us take a look at this one.

So what is felt kit and so you can see it actually has like, oh, This broke you know, reloaded?

I think it because I might have I don't know if you can run multiple like web containers like on a browser so that could probably be it.

So it might be going for the latest one is and so here it is.

See how quickly I loaded.

So you have the whole like it's running spelt kit like a node server in the back.

End, we got quick.

That is, that is kind of amazing.

So do like the npm run and start install, all that stuff, like good to go.

They kind of shows you like the project structure and everything.

So here's like the routes.

So that's the main route index that's felt, and they talk about routing server-side stuff so you can go to the next one.

So, like the previous one, I was showing before you can like solve them, so tell you kind of like what to do and then you will be able to solve them so kind of keep going to go to one that's To like Zoot.

Oh and so there's this is still a work in progress, so you will see certain things that say, it still needs to be done.

So still to do kind of stuff.

It's like pre-rendering this still to be done?

So here's like the page, right?

And it kind of like tell you stuff you do.

So here you would have to do like that for here.

So you would put in the about page.

So here's the index right then, Go too about.

So let us say I just want to solve it, click it.

See it added it there, and I will refresh this automatically so many quick about see there it is.

And you're able to kind of travel back and forth.

You see the / about.

And so, if you want like the build multi-page applications, then you use, normally use the framework of the actual, like, like Library framework that you are using.

All right.

So yeah.

So that's pretty much how for me, that's how I kind of decide.

Like if I want people to be able to go directly to a certain page like with / about then I will probably use something like svelte kid or Astro or whatever.

But if it's just like a dashboard where I don't want them to be able to slash whatever just want you to like a one-way into this thing.

I will just do just an application like a single page application.

That's the way I do it.

I don't know, everybody does their own way.

There's like, no wrong way, really well.

There is what I got wrong way.

But, you know, so yeah.

So that's so main thing that I think is that the announcement of like the new learning learned, that's felt that Dev was that you're able to have spelt kit in it now as well because of the web containers.

Let me look it up.

I want to try and be as complete here.

Web container.

It's two words.

It is what containers?

Here we go.

So let me put this as well.

So, yeah.

So you can read node js natively in your browser, kind of amazing stuff.

So that allows for stuff like running, and you can see on their site, you can run other things like remix nuts, three, like we're talking about with view next to version two and next JS.

So, if you want to like react, you can do that you.

Can you just spin it up in your browser?

That's kind of cool.

So, let me add the link to the string here.

And it's just any node like application.

So if you can run node like you can run most, there're some caveats you have to read the thing but it's kind of amazing that you're able to run like the whole server side in your browser kind of amazing.

And so yeah.

So they have all the different things.

So yeah, they recently changed the layout of the site.

It's more like grouping things of having everything like one place.

Alright, cool.

So yeah, that's it.

Going to send you all back to work and stop sharing the screen and again all the links and stuff will be with the recorded video so you can check it out later.

Yes, top screen share Cool back.

Now, let me get y'all back to work.

I am gonna send you all up with some traveling music.

And this track here is a Pawnee, be on a new job.

It's track.

So new Jabez featuring up, honey, bee, and chance call! Thank you.

Cuz I want to thank you all for hanging out and yeah, so I will see you all later.

Much productivity to you.

I am trying to back up some like, from my one Chromebook, I am backing up like different projects to GitHub.

So then if I ever need them, I can pull them down to the new one.

So, just kind of Back up stuff.

And yeah, cool.

Thank you all.

See you later next break.

15 minutes after the hour.

If nobody wants to do, Show and Tell, we will take a look at artists website.

Listen to some music, maybe watch some videos and yeah.

All right, thanks y'all see you soon?