Experimenting With SvelteKit

Jason: Hello, everyone. And welcome to another episode of "Learn with Jason." Today, on the show it's just me. We are going to do some experimentation.

I had a last minute schedule change. All good. We're going to just play around.

So we're going to try something that I've wanted to try for a while here which is SvelteKit.

I heard a lot of really promising things about it. It seems super promising. It has SvelteKit.

If you look at the stack overflow and survey, and other developers surveys happening, people

are very found of Svelte. I have not had a chance to try it. The most I have done with

Svelte is the work on this shows with Rich Harris and then Scott from levels of cuts.

Scott. So why don't we. Let me drop links to those episodes. Actually. Wait, I have

a search. Hold on. I'm going to switch over to show this because this is new. This is

a new thing that I built that I'm very happy about.

So do you remember when the show was built search, I was like I well get around to putting

this on the site eventually. It is on the site. Here is the episode where she helped

me put this together. Taught us how it works. And then here, because this works now here

is an intro and animation with Scott with SvelteKit. So that is very exciting. Why don't

I, I'm on the site here, don't know what that was. I have opened here and the captions already

live. We are as usual being live captioning with us today. We have Carrie with us today.

Thank you, Carrie for being here. And Carrie is from white coat captioning. You can check

out those live captions right on the home page at www.learnwithjason.dev. Captions are

made possible through the support of our sponsors. [Listing sponsors]. All kicking in to make

the show more accessible to more people, which I very much appreciate. And so today we are

going to play with SvelteKit. So this is SvelteKit. And before we, before we start there, how

are you all doing? What is going on today? How is everybody? What are you all working

on? What is your day going? Yeah, there is no PyTorch today. We had a schedule change.

I'm going to get back with Lorena. It was pretty last minute there. So, I'm pivoting

to something I was looking at yesterday to see if I had time to work on it. So you know,

hey, you get a schedule change, you make some lemonade, right?

With that, oh, Chris Ellis is actively working on a SvelteKit tutorial. That's amazing. What

wonderful timing. Cool. So maybe you can help me when I get

stuck. Because I definitely didn't have time to find somebody who knows SvelteKit to unstick

me when we realize I don't go this framework. Let's just poke around here and see what is

going on. So SvelteKit is an application framework that I only kind of know. That is probably

the biggest hurdle today, I know enough about SvelteKit to recognize it. Not enough to really

do things. What is up? Thank you. It is good to have you. I'm excited about SvelteKit as

well. It has been getting just really incredible support from the university. I have been ground

away how quickly sediment has grown for SvelteKit. It has been around for a while. It kind of

felt it was under the radar. Not under the radar. I know Rich has been talking about

it for a long time. But if felt to me that SvelteKit was something that was really powerful,

but not picking up the steam that it honestly kind of it deserved. It seems like recently

that steam is coming up we're seeing a lot of people. We're seeing people who were really

prominent in other communities start to move on and adopt Svelte. It is very popular over

there. I want to see what the hype is about. You don't get the like most loved framework,

I think it was stack over, let's see. Stack overflow. I think it was the most loved. Again,

take all of these with a huge grain of salt, there are so many people who take this. It

is a little bit bias. But the thing that was interesting to see is that well this is technology.

Where is frameworks? Databases, platforms, web frameworks. Look at that. Svelte is the

top loved framework. Which is, which is kind of amazing. And it's, it's you know, not like

way ahead of some of the things that I would have expected to be at the top of this list.

But it is still, that's pretty prominent. Right? So that's pretty cool.

And so let me drop this in here. Oh. Whoops. Yeah, echo, I didn't have a chance. To be

completely fair, I definitely learned this like it was we made the change very last second.

So I am. I am going to have to go fix that, that tweet. Let me go get actually, let me

just do that right now while I'm thinking about it. So everybody bear with me while

I'm on a different screen. And we're going to take this one down. And we'll instead tweet

out. I'm going to copy/paste my own tweet. Is that okay? I'm going to do that. I don't

care. Wait. Where is it? Hello. I'm just going to retweet my own thing. Here we are. Retweeted.

Retweeted. Okay. And then I will stop looking at twitter. How about that?

Yes. Great. So knowing that Svelte is growing in popularity, that people are kind of excited

about it. They want to work with it. I think this also came up in want to work with, a

lot of people were saying I want to work with this. How do you read, does anybody know how

to read one of these? I actually have no idea how to do it. Oh, look, Svelte is not even

in this. Hmm. Okay. Maybe not then. Anyways, it is growing in popularity. That is pretty

exciting. So we can, you know, worth, it is worth taking a little look here.

So, here's the thing that I think is cool about SvelteKit. So in general what I like

about Svelte is that they are stripping out a lot of the code that gets shipped as part

of the final application. There's not a lot of JavaScript overhead. You don't get a lot

of bulk as part of what the framework itself ships. The JavaScript you ship is mostly your

own JavaScript. And it does a decent job of not adding extra stuff. There are frameworks

that are specifically targeted for that, like Astro is like let's not ship literally anything

that is actively required for interactivity. That is their stated goal. And Svelte's goal

was let's create really, really good interactivity. If you look at this animation, this animation

library that wait, where did it go? Not this one. Did I lose it? Animation list Svelte.

Here. If you look at the possibilities with this, like there are some extremely cool like

animation stuff. This is all just built in. Right? It just works.

So it's very, very powerful in what it allows you to do. It doesn't require you to become

an expert. So this, this is what I think it is really interesting about Svelte. It seems

to be the framework for people who want to create very interactive visualizations. If

you want things to animate and want things to move around it just works in a really intuitive

way in Svelte. And it ship as very performing bundle. Which those are things that I think

are really like everything framework has its strengths. And Svelte, that seems to be its

strength. It's so well suited for visualizations and interactive UIs and transitions and animations

and stuff like that. So I want to just dig into it. And then what SvelteKit is doing,

it is giving us the ability to do a kind of single page app. Kind of app like experience

that just feels really nice to use. So that's what I've all understand, now, let's

find out how it actually work. So I'm going to start by just getting right into the docs.

Let's look at I guess let's make sure that I understand what it actually is. So, SvelteKit

is a framework for building extremely highly performing web apps. Building an app with

all of the modern best practices is complicated. That is true. I love it. Those practices include

build optimization so you load the minimal required code, offline support, prefetching

pages before the user initiates navigation. This one is huge, if you are not familiar

with that one means, that is when you can tell somebody is going to click because they

hover a link or something like that. And then you start loading the data ahead of time which

saves you a half of a second or sometime as full second. That a little bit of prefetching

will make your app feels like it loads instantly instead of click and wait. It is a subtle

thing. A small thing, put it makes a huge difference. And configurable rendering. I

don't know what that means, but we will find out. That allows you to generate HTML in the

browser or server at run our build time. So you can get all of with the creative part.

And SvelteKit does this with changing to your code show up in your browser automatically.

Oh! It is using VITE under the hood. That is interesting. So VITE is another one we

have done an episode about it. It is extremely cool. I'm so happy it exists. This is the

one where we actually used VITE. So this one, Neil and I talked about VITE for a while.

This one here as well where we did subscriptions. And now, the majority of what we did in here

was building this actual subscription thing, but we used VITE for it. It is so dang fast.

So if you want to see VITE in action, that's a good way to do that. Let's keep poking around

here. So, you don't need to know Svelte to understand

the rest of this guide, but it will help. That's what I think will be our biggest risk

here. But we can get started right away. So let's pull up the command line, which is over

here. And I'm going to move into the "Learn with Jason" directory and then pull it over.

So the first thing we're going to do is NPM and NIT. Svelte train. Yep. Yep. Svelte@next.

Interesting. So SvelteKit isn't like a separate thing, it is just the next version of Svelte.

So let's say fun with SvelteKit. All right. This is beta software. That is fine.

Let's go with, let's go with the demo app so we got something to peak at. I'm type script

is probably one step too far for me. Let's do code linting. Let's do prettier. Now I

can go into here. Let's NPM install. And then we can get a nit. All right. If we look in

here, we can see set us up with a pretty decent set up. Let's, let's, they wanted us to commit

everything. So let's commit everything and say initial commit. All right? Git all. I

screwed up my Git commands there. Now, what I can do is creating a new repo and "Learn

with Jason" fun with SvelteKit. This is using the GitHub CLI which is amazing. This will

create "Learn with Jason." Yeah, that's the one I want. Good. Good. Good. So that exists.

And if you're interested, this is oh, wait, it is GitHub.com/CLI. So check this out if

you're not familiar with it. It is a very, very powerful tool that gives us a lot of

powerful options. And then I'm also going to, let's just run

this thing with Netlify dev. Oh, wow. So we automatically recognize Svelte. That's good

news. And then it opened up in this window. But we can open it here.

All right. So here is a default SvelteKit app. Good. I like it. It's got a little counter.

All right. It's got an about page. And it's got to dos. Okay. So let's add a to do. Don't

help password. And let's say, do a thing. And it says do a thing. Then we say do, did

this go away? No. Oh, boy. Okay. Do another thing. And now, we've got two things. It looks

like I can edit them in place. I can mark them as done. And like you see this, this

little stuff here where it like fades and syncs down a little bit or I bet it does something

cool when I delete, too. Look at that, did you see how very quickly, like the fades away

and shrinks and all of that stuff. I bet when we look at this code there is no custom library

in here. So let's open this up and take a look.

Okay. So here is our source code. We've got app dot HTML that sets up our DIV with the

Svelte app in it. We have hooks. JS. What does this do? Handle, this looks like it a

specialty stuff. Because it is setting a cookie with a user I.D. Isn't the app set a cookie

so we recognize them when they return? I bet this is something for the, for the demo that's

not actually relevant to like the actual interworkings of Svelte. So let's poke around in here. We

have a layout. Let's look at the layout. So we get a header. An app.CSS. And sets up a

script. We have our main header here. Main. We got a slot. And slots are where the content

gets dropped in, if you got, I think that is react children, if I remember correctly.

Thank you, Julian, that is, this is operator mono.

footer and then style down below. So, this has the single file component feel of view

that I dig. Let's look. Here is the index page. So we've got prerender true. So I guess

this is how we tell it that we don't need a page to be dynamically rendered. Is it like

that? Probably. I don't know. And then we've got counter. So we'll look

at that in a second. Then we've got yeah. As far as I know, the slot is the children

in react. Because it looks like what we're doing is, we're setting a layout and then

it looks like all of this stuff just gets dropped into that slot. So of this will show

up in the slot. To the best of my understanding. Let's run it and take a look, actually, at

what happens. So we'll run it. And if we look in, let's go to the home page. Look in the

elements here. We can see that here's our section. Section with the H1 and that's section

with an H1. Right? And outside of it is our main. Next to a header. Which is in the layout.

So here's the header. Here's the main. And there's the slot. So that's how it works.

If it looks like it is autowraps. This is probably a special named file because it has

the double underscore lead. So yeah. Very much like view slots as I understand it. Confirming.

It looks like I want to be sorry if I'm getting that way wrong. Slots can have names. Also

nice. That would be like if we wanted to pass it as an actual prop. That would work.

Okay. So now, that we got this in here, let's maybe go and look at what that prerender thing

meant. So let's go back to the docs. And each of your page, each page of your app is a Svelte

component. Right. You create pages by adding the source routes. This is very familiar to

me. This is how you do it in whatever, they have source pages. This is source routes.

Cool. These will be server rendered so that a user's

first visit to your app as fast as possible and then the client app takes over. Okay,

that's what happens in all of the frontend frameworks that I know.

Let's edit the files. Get a sense of how things work. We've got some routing down here. Endpoints

run only on the server. Or when you build your site if prerendering. Okay. I suspect.

Okay, yeah. It is likely some of the pages can be represented as simple HTML. They can

be prerendered. If your entire app is for prerendering, it will create pages and load

functions for the pages. In many cases you only want to prerender specific pages. That's

when you put this prerender true. Start at the root of your app and prerender any pages

that it fines. Each page is scanned for elements that are other candidates for prerendering.

So you generally don't need to specify which pages should be accessed. If you do need to

specify which pages should be accessed. You can do so. I don't exactly know what the means.

So, we might have to see what happens when we try it.

Okay. So let's, let's let's poke around. Oh, yeah. I trust codes. That's a good question.

And we got a link from Chris Ellis. So, let's poke at that, that's not the link I wanted.

I wanted this link. Copy link. There it is. Name slots. So if we slot name,

name. Slot name address. Slot name email. Oh. And then we can just do like a span and

say what the slot is. Oh! That's interesting. Okay. Okay.

So knowing that contact card has that if we do a span slot equals name also how bad ass

is this? That should work. Right? Do I have to run it? No? Anyone? Oh, do I have to sip

show me? Weren't you supposed to run for me? Rude.

Span slot email. Maybe you have to look put it in between or something? Oh! That's interesting.

That's, that's a limitation that's weird. So if it is on the same line it doesn't work.

Is that right? Or did it just need to like have something in there and then a oh, okay.

It is just the grippal is a little bit strange. That is powerful stuff, that is pretty cool

that works like that. Okay. And yeah, it honestly it might be my

computer, I'm running a lot of stuff on it. It could be hung up on me right now.

But that is really powerful stuff. Actually, let me keep that open and put it in the show

links. Let's go back to our app here. Let's shut that down. And I just want to start messing

with this a little bit. So let's go and look at this to dos. I want to see how this works.

Because it looks like there is a little bit more than usual going in here. So with this

one, we are intense. So we load the response from to dos.JSAN which it appears is here,

which is kind of interesting. So, you do a dot JSAN dot JS and then run a function. Interesting.

Okay. So we're able to kind of define whatever we want here. And that is very cool.

I like it. I like this a lot. So yeah. What's up, Ally, thank you for stopping by. Good

to see you. Okay. So we've got our to dos here. We've

got the ability to get which it looks like just pulls all of the posts, and here's that

user I.D. Okay. So, this hook is just for the demo. It's just to get us set up with

a user I.D. so we can send these. It looks like, okay. There is an API. This is oh, so

they like set up a whole API here. Where we can go and hit the Svelte API and then pass

in to dos and like what our to do is. So to dos user I.D. and then we get our to dos.

I got it, I understand. So what this is letting us do, basically they implemented a little

bit API to support the to do management, that is very cool.

[ Laughter ] It's okay. You don't, you know, you don't

have to follow. That's all right. I appreciate it. But it definitely doesn't effect our friendship.

So why don't we mess around with, let's mess around with some data here. I'm going to start

easy and I'm going to try to create a page. Well before I do that, I do want to see how

the animation is done. So let's go back and focus up here. So we've got loading, okay.

So we know how to get the data. All right. So, check this out. Import scale, and import

flip, let's see how much actual animation code happens here. For each to do. Unbelievable.

You just do some scale stuff. Don't quite know what that part means, but we can figure

that out. But then like animate flip just works. So freaking cool. I mean, yeah, there

are clearly some things in here I need to learn. But like are there any animations down

here? There's the transition. So there's, there's a little bit of CSS animation mixed

in here just to move it up and down a little. Cool.

Let's see. Transform none. Transition opacity. So that's where the opacity shift came from.

Okay. That makes sense. Dang. So there's almost no it is very cool to me that there is almost

no manual animation to get this very cool to do thing set up.

Right? So when you create one it fades in. Right? It kind of flies in, fades in. If you

check the box, it goes there. So, we got the opacity shift and we got the, that a little

bit of a like down one pixel to look like it is lowering. Right?

And then when we delete, that's the, the scale. Just really cool how fast that, how fast that

works. I'm, I'm very, very excited. [ Laughter ]

Tony, I mean, you can click on links in the stream if you want. But I think you will just

pause the stream. [ Laughter ]

So this I yeah, I really, really like the way that works. I think that is super cool.

So, let's mess around a little bit with building our own page. So I'm going to start with getting

rid of some stuff. So let's, let's do something like this. We're going to say hello, chat.

And then let's get over here, head to the home page. There we go. Okay. We simplified.

We are at hello chat. If I delete this, how fast does that change? Just instantaneous.

Let's look at the counter. So here's the counter. This one has another autoimported thing. So

it imports a spring. Gives us a count. This, oh, this dollar sign thing I remember is being

like a context thing that I'm going to have to look up again.

But we're able to offset modular display. So does that mean that the left button will

be disabled if I click in true. The counter by one. Where does that thing come at? So

we've got the offset? Where is the offset? Oh! Interesting. So that's how we're setting.

Okay. Look at this, boom! Boom! You see how it goes up and down? That's because it's checking

what the difference is in direction. And then it translates either up or down based on that.

That is extremely cool. Watch for changes in this variable. Okay.

So this is, this is basically making it reactive. So more or less. It is saying that this will

be a variable that when changed should rerender the component. Okay. Got you. I'm into it.

That's very, very cool. So let's, let's mess around in here a little

bit. I'm going to get rid of this counter. And we're going to simplify that. Go. We got

our hello chat. We've got none of these are being used anymore. So we can drop this. All

right. Let's save that. Okay. Not using the counter anymore. So check this out. We do

a context module. This looks like how we export things that are settings for the and then

this script is like internal stuff that the component will use. So I bet there is more

to that. But it looks like we got kind of two different contexts we run in that will

allow us to kind of configure Svelte and probably, maybe communicate to other components. And

this is stuff for the component itself. Okay. So that's cool.

So we can get rid of this for now. That's, that's all kind of coming together here. All

right. Now, let's customize the layout a bit. All right. So we got this header. We got the

app CSS. So we can say like built with SvelteKit. On www.learnwithjason.dev. I forget to close

an element. I double closed an element. I double closed two elements. What chaos is

this? And I should change this to say SvelteKit. We got that one going.

Let's get into the header and mess around a little bit. So we've got this logo. We've

got some stores. This comes from app stores. Do we have an app stores or is that like a

global thing? So that looks like a global. So we'll have to look up what that means.

Then we got a link. Then we got this nav box being, I think, it is, it is the shape behind

it. Oh, it is like the side shapes. So, we can drop those. Drop this one. Corner. Oh.

This like goes up in the, in the top right. What are you? With that extra autocomplete

is kind of wild. Oh, so it will just throw something up there if we want to. Okay. So

that's cool. And then we got this corner. We've got everything

being displayed flex. We got the nav. Okay. SVG. We don't need that one anymore. Got this

path. CSS variables. We've got the UL, the LI. All good. Okay. So we've simplified that

a bet. Let's look at this app.CSS. I'm just going to mess around with that like change

it to the default font. Look at that go. That's cool. All right. We're getting there. It's

got a monospace good. All of these different colors. And then what if we dropout oh, that's

cool. Okay. So we can get rid of the gradient. And then we can mess with like, we can set

this to be background. Then it is white. Okay. We're getting places. Things are happening.

It is all happening! Then we have a radial gradient. I don't want a radial gradiant do

I? In fact, let's turn it off. In fact, we don't need any of these anymore because we're

not doing anything with the pseudoelements anymore. It sets the app to be a minimum it

is all happening! [ Laughter ]

Then we can do let's see. That is 100% high. Got font weights. Yeah, basic. Okay. This

is all making sense. I can follow all of this. We're happy, we're happy. Good. What is up,

Ben? All good. Nicky, anything for you. Okay. And then script module is one time per component

instance. Script without context module is once per instance of the component. I think,

I think I get what you mean. Like script module is once per load. And the, without context

module is like once per render or something like that.

So that's all good. All good. Let's all right. So we have a somewhat simplified little thing.

Let's set our background set this background to be like just a little bit, this is so cool

if that works. Let's make it like a little bit this, this color. That is not going to

pass. Not really. Let's make it a little bit lighter. That works. I'm okay with that.

Oh. That's [ Laughter ]

Purple and orange. Match made in heaven. Maybe we do, maybe we do more of a, like a red?

No. I'm going to do a grey. How about a grey? Oh, that contrast is bad still. See, I have

an episode coming up where we will teach us about contrast. That feels like something

we need. That feels okay. I think that will pass. Should we test it? Okay. So I'm going

to go here. And then I've got our color here. And we can do contrast against this color.

Oh, that's not what I wanted at all. Background, how do I get the background? Contrast. Contrast

ratio because the background is this. That's plenty. Right? That's good enough. It goes

over AAA. So we have great contrast. And now, also, does everybody know about that

tool? That thing is so good. Yeah! The Todd is coming on. Let's take a look. Want to narrow

and broke my nav. Okay, is Todd on the site yet? He's not yet on the site. Let me check

the date on this. He is coming on, let me got to check my secret notes. Todd will be

on October 28th. We're going to do understanding contrast for accessibility. I have a bunch

of episodes that are not up on yet. I think I have 10 episodes that are not listed yet.

Something like that. So yeah. Definitely, definitely keep an eye on this schedule . you

can always add on Google Calendar if you want to get notified automatically. It will just

show up in your Google Calendar. You won't have to get notified. It doesn't send a push

notification, but puts it on your calendar it is happening. I didn't think about that.

It is going to be a spooky episode. So should I try to talk Todd into doing the episode

as a lobster roll? Yes. Yes. We should do that. I will

[ Laughter ] Great! And since I don't have an episode to

link to. Let's do a quick shout out to Todd. There he is. Todd, and he is building a lobster

roll. How long to see a lobster roll. Here is one, no, that is a cheeseburger. There

we go. We know, we knew that he would find a lobster roll. So anyways, this will be happening.

That will be a good time. So, let's keep on plugging away here and see

if we can do something fun. Less lobsters in Arizona. That is true.

[ Laughter ] That is absolutely a fact. All right. Chris

Ellis. Have a good night? Okay. So now that we have set up a light customization

of what was there, we can start messing around. So what I'm going to try to do, I'm going

to attempt to reimplement that counter without looking at the original counter code. Because

that seems like something that is both feasible and uses some cool stuff.

So I'm going to, actually, why don't we just deploy this thing first? Let's get it up and

live. I'm going to check what I have done. Let's Git commit, call it a work in process.

And call it minor customizations to the base template. And push that up. Set the upstream

with that dash U shortcut, I can do Git push and it knows to go to main. Now, I'm using

the nullified CLI now, which I have dot or slash CLI. Is that right? Let's find out.

Yeah! I have shortcuts. Love shortcuts. If you want to go get started with the CLI. That

Netlify CLI let us do a bunch including create a new site. My GitHub repo that I created.

You can check that out. I will drop it in the link as well. That is going to be deployed

to my own site. We'll call this fun with SvelteKit. All right. And it should, because it detected

SvelteKit, I think it is going to just autodetect stuff. But what I'm going to do just to make

sure is I'm going to use the NPM commands. So, let's use NPM run build. And then that

probably is right. Netlify functions. Good. Okay. Now, I think this is not going to work

because I saw something about adopters. Netlify. So what do I need to know about adapters?

Let's look this up. Publishing. No, not publishing. That's not what we're doing. We're doing adapters.

So, adapters. We want to use one of the adapters. So here's the Netlify one. That's what we

want. How do we add that? So I need to install the adapter. I can do that part. And then

we need to import it and drop it into our config. So no options. No nothing. I can manage

that. So let's install it. Then we will come down

to this Svelte config. And it looks like not a lot happening here which is good. Or wait,

there is a default or name? Default. So import adapter from SvelteKit, adapter Netlify. Here

we can go adapter and then we call that like a function. Okay?

So then we should be able to get at everything. Git commit. At the Netlify adapter. We will

get push. And then let's go take a look at this, with Netlify open.

So that will open up the thing. Yeah, it failed because we didn't have an adapter. This 1

should work because we do have an adapter. I need an NVMRC? It looks like it does work.

Probably. There we go. There's our site? Ta da!

So the, the adapter, I think, is, let me just actually read the docs here. An adapter, before

you can deploy your SvelteKit app you need to adapt it for your deployment target. So

anywhere you go, you need an adapter. They are small plug ins that take the built app

as input and generate output for deployment. Many adapters are optimized for a hosting

provider, you can generally find about deployment in your documentation, however, some adopters

can be hosted on numerous hosting providers. So the might be useful to reference your hosting

devices in this case. So if you were building a site without the to dos where you are actively

reading and writing and using the back end features of SvelteKit it looks like you would

use this to get smaller bundles and deploy those to Netlify. But because we don't need

to do that, so this is node. Oh, I kind of like the idea of naming it like

thought instead of calling it adapter. Yeah. I actually, I'm going to do that. Because

that makes more sense to me. Like this right? Now it is very clear. Whoops. It is very clear

that we're using the Netlify adapter instead of like adapter and adapter and you have to

look up here to see that it is Netlify. I like that. So let's use that.

We will just say, just call this a chore. Rename for clarity. I can push that. And that

will rebuild the site. Nothing will actually change. I probably could have like skipped

CI or something. I'm using node 16 by default. Oh, you know

what it might be? Let's check. I used what version of node? Using node 16.9.0. Is this

because I'm on the new build image? Yes. So this is the new build image which is default

as of week or two ago. And it has, I think where's the, wait, I don't care about that.

I want to know about build image selector. Okay.

Do we have details about what changed in this? Okay. I think this might have bumped the default

node version. I could be wrong. Huh. Maybe it didn't? Oh. Okay. Maybe I'm wrong. I don't

know how it is getting node 16. Is there already an NVMRC in here? Doesn't have engine, it

doesn't have an engines. Interesting. Maybe because it is set at type module and that

would be really cool it our build system was smart enough to recognize that.

Yeah, I don't see anything that would yeah. You should have 14. Right? Like 14 is the

LTS. Okay. Something, something is happening that is smart and it is apparently smarter

than me. Because I don't know how, because we didn't set any environment variables. right?

So we didn't change it there. Did it, I wonder, let's check this one and see if it noticed

something about node. Now, using node 16.9.0. How? How did you learn this?

Really interesting that it just like knows that. Okay. I'm going to have to dig into

that one team and figure out why that happened. Because I'm happy that it did. But I'm confused

because it doesn't say that's the version that we need.

What are you doing computer? Why? Why are you like this? There's, I mean, I'm on the

like every feature flag that Netlify has. So if there is some kind of test running,

I'm probably in it. So there is a chance that I have some things going on that aren't present

in every account. But if you deploy SvelteKit and you see something weird happen, actually,

why don't we just do this as if we didn't have it already happen. What I'm going to

do is if I run node version it shows that I'm on 16.6.1. So actually why don't we do

NVMRC involve 16 and get the latest, which is 16.9.0. So if you don't use NVM. NVM is

a very cool tool that will let you swap your node version very quickly. Yeah. Nicky. That's

basically it. [ Laughter ]

But using NVM I can install, now I'm on 16.9.0. So now if I run node V. Okay. Now I'm going

to run it again, this time I'm going to pipe that into a file called NV MRC. What that

means it will have created a file called NVM RC and inside it has the version. So if I

save that, I can add it Git commit. RC. We can push that. So Netlify will respect that

and use whatever version of node you want it to use. I think to a point. I don't know

if you can go further back then 12. You might be able to go back to 10. Unclear. But you

can definitely use 12, 14, 16, and like any version all of because it will pull based

on NVM. So that's a nice way if you're trying to get, you know, something set up quickly

and you don't want to have to go and mess with environment variables or anything like

that. You can set this NVMRC that will work. It is a very nice experience.

So let's keep messing with some SvelteKit stuff. So now that this is deployed right,

I'm very happy about that. It is deployed. Everything is working the way that we want.

Our recent deploys are working. Does it change anything about the NVMRC. So here we go. It

is adopting to use the node version from NVMRC now, but I used the same one from before it

is already installed. If didn't change it and not updated my version, it would have

reset to 16.6.1. And we would have reinstalled it at this step here. So, that is a lot nonsvelte.

So let's play with more Svelte. So what I want to do next, let's try to build

a counter. So thinking about what I want this counter to do, I want this counter to let's

do a like boop button and we will only be able to increment it. That seems like something

that will take me a solid half hour. [ Laughter ]

This boop.Svelte. And inside of it I am going to add a script. What is up with this double

completion? Just live with that, I guess? And then we have whatever we want to be here.

So I think what I want is like a section and that's going to be fun for the rest of the

day. I'm really excited about it. Here is the section, inside of that section, we want

to have a display of our count. So we can call that like paragraph and inside of it

we will put in the count. So let's, let's design this first and then figure out how

to make it work. And we'll say boop. Okay. So that style and

then inside of here I should be able to do something like a P, we'll have a font size

of say two REM. And the button will have a background of, what it? Like primary color

or something? Let's see what that one does. And then we will include that here by saying

import boop from was it LIB? LIB BOOP and then I can just use it, I think. BOOP.

Okay. So if I restart the local server. No. Got to reinstall the Netlify CLI because I

just changed my node version. This has to pull in all of the stuff for all of the different

frameworks so it takes a little bit. Okay. Run Netlify dev. And we got ourselves

a boop button and it looks like it is respecting our style choices. Okay. So let's make this

apply boops liberally. That is correct. Do I have, I mean, autoclose. Language defined.

Maybe I can just try it here and see what happens. Oh, let's not change it, the language

defined here. But on the workspace we'll see never. That seems okay. Let's try that.

Now, will you, now will you respect me, computer? No. Shouldn't have gotten my hopes up. VOLTA.SH.

I don't know what that is, Jacob. I don't know what that is at all.

Hassle free JavaScript tool manager. Built in Rust. This looks like a whole episode.

I have no idea what this is. But everybody go check that out because it looks fun.

Let's, let's, let's sometime this up just a little bit more here. So I'm going to do

section and let's have our section do a, we'll do display flex. We will do flex direction

column. And we'll do align items center. That should center everything. Good. And then on

this we want like a border none. Set padding of .5. Maybe a little bit more on the left

and right. Yeah. Yeah. Like that. Let's do a font size of 1.5. Maybe a little bit smaller.

Good. Okay. And then I want to use a different color. So let's go look at the app.CSS for

our other colors. Accent color looks good. Let's try that one.

Hey. I like that. And then let's do like a font weight bold. Oh, that's kind of hard

to read. Isn't it? Maybe it needs to be like a color of white. Or a color of I guess background.

Why didn't that work? Wait. Did I miss something? Background. I guess we just go pure white.

Oh, background was set in like inside of a component. Not on its own. I don't like this,

but I'm going to live with it because I would rather try to figure out how to make this

thing work. So this gives us a button. The button doesn't

do anything. We have our thing here that works. Let's go with like a .5REM. That's seems okay.

All right. So, next what I want, I want this to be counter equals zero. Now if I want the

counter to be here, do I get to drop it in just like this? I do! Uh huh. Okay. Perfect.

So then if I want that to be observed, it was this. Right? And that still works. Okay.

So then I want to define function increment. And do I get to just do something like counter

plus plus and then down here I get to do an onclick. Increment. This seems too easy. It

is probably not going to work. It doesn't. So let's go look in the docs and see what

I did wrong. So I'm going to go to. Let's make this bigger. So I'm going to go to Svelte.JS,

Svelte.DEV. Let's look at the docs. And look at reactive assignments. Reactive statements.

Prop you can export. We don't need that. But I do want on event name and handler. Okay.

So I got halfway there. I needed to do it a little bit different. So I did it like view

or, hmm, no, I did it like nothing. And don't know why I'm surprised that it didn't work.

So that theoretically should work. Bam! Look at it go! Goodness. Everyone! Oh, my goodness.

It is so good. So here's what I want to do next, I want to figure out oh. I love this.

Okay. So do I need to make this reactive? I but I don't. What if I just let counter.

It still works. Okay. So, yeah. You are, you are absolutely right. That I did not need

to make that reactive. So if I was going to do something like let's say

go like derived count. That would equal 10 minus counter. And we can say let's say call

it details. And say we are something like this. Right? Then if I boop,

okay, but see it is not doing the thing. So instead I would need to do this. And now,

now, it is, oh, okay. All right. Lightbulb just went off. So if we need a value that

is dependent on another value that will change. Then we need this. Otherwise, if we're just

one value and we're modifying that value, we don't need this part. So this is only if

the value should change dependent on some other value. I understand.

So cool. All right. I get that. That makes sense. And now, boom, boom, boom, boom. And

then we can make this intelligent. And to do that. We get to do some other fun stuff,

which I think it is just like this. Yes? And then the condition would be if derived count

is less than one is that right? I feel like this is probably wrong. And then we would

say do it like this. Boom! And then then I can do like an else and then I can do if.

I'm wrong. Expected if. Hmm. Got to look it up. Got close, I think. Let's look at the

directives. If. So here. If expression, okay. So I was close.

But if I need an else if, or I just need an else. Okay. So I need to do it like this.

And then I think it works. One, two, three, four, five, six, seven, eight, nine, 10! Oh,

all right. Then it just doesn't change after that because we're at maximum booper drive.

Okay. So now we got some kind of reactive bits in our components. We got some logic

here. I'm going to set up the details to be a little bit less huge.

So we can just style those, I believe, I believe this will just override. Yes. Okay. Boop,

boop, boop, boop. All right. I'm onboard. What up you all? This is cool. So I'm really

happy right now. Because this is doing all of the things that I would want it to do.

It is intuitive enough that based on my knowledge of other frameworks and the little bit of

Svelte experience that I have, this didn't feel insurmountable, the docs were easy to

parse when we needed to look something up, and find it really quickly. That makes me

really happy. I'm feeling confident that we can make something work.

So let's play with transitions and see if we can make this look nicer. So a transition

would be when it enters or leaves the dom state as the result of a change. I don't think

we would want that one. I think we would want more of an how would this work? Oh! Wait.

This might be one of those things. So what they did, they put this into a CSS animation.

And so to do that, oh, actually, you know what, why don't we do this. Let's do this

transition. And we're going to transition fade. So I need to get it to fade. But we

could do transition parameters. Don't really need those. Can we just call fade without

importing anything? So, let's do this. Let's do a span and a transition fade. What is that?

Why would you do that? Okay. And we're going to go here. It doesn't like that. Fade is

not defined. So I need to import fade from Svelte transition. Is that just going to work?

That would be neat. Let's try it. Boop. Boop. Boop. Boop. If this is right, when I click

this button, we should see it fade in. Look at oh, my goodness that is amazing.

Oh! It's so good. Okay. So then what I want to do is let's try something else. So I'm

going to say out, is that right? It was like you could go to out? Out function, in function.

So I just want yeah, in fly, out fade. Good. I want it to out scale. And then I would need

a list of the transitions so I can actually look at how this works. Transition. Let's

go to scale. And what I want to happen is I want this to these are very cool! Okay.

So what does it do by default? Default zero. Default start. Scale value is zero. Capacity.

Good. Yep. I wonder if it will like play in backwards if we do it that way? Let's try

it and see what happens. So I'm going to do import scale. And then

we're going to try to out of scale. And what now, what I think should happen is this one

should like zoom. And then the other one will fade in.

Moment of truth. I just straight up broke it. That's okay. So both of them came in at

the same time is why that won't work. So we would need to like link the transition somehow

if we were going to do that. Which I could potentially, let's see if there's is there

a dock on like chaining? Between spring. I don't really want any of that. What does draw

do? Oh, that's for SPBs. We don't have one of those. I want to also it looked like scale

didn't do anything. Did you all see that? It was like in scale, out scale. Let's see.

So scale does not do anything unless you pass parameters to it? Let's look. Delay. Default.

Oh! So you can set a delay. Okay. So the duration is 400. So in this one, then what I should

be able to do is saying on the transition fade we would go delay 400 and then that should

cause these to do their thing? Boop. Boop. Boop. Boop. Boop. Okay. So it

kind of, it kind of did it. But it, I would need them to be like position absolute or

something. Yeah, but that starts to feel a little bit messy. Doesn't it? Hmm. There's

probably an easier way to do this that I just don't know. So let's keep poking. Let's see

what we can find. I want to see, is there, let's look in the

actual docs. Right? Or let's look in the tutorial. Let's look at transitions. Right? So if we

got a transition. Then it will fade in and out. Okay. That part is fine. We got that.

With this one, we can use fly. All right? And then if we want them to be different let's

in fly out fade. Okay. That part makes sense. I want to see it do it wants to do more stuff.

Let's see what happens. Wow! Okay. That was a lot. You should generally use CSS for transitions

as much as possible. There are things that can't be achieved without JavaScript, such

as a typewriter effect. So that's fine. I wonder, that is the '90s

infomercial animation. Oh, interesting. Okay. So there are, there are like steps here. So

transition and then we've got these kind of bits here. Is so we would almost need to like

set a state to track between the two. Hmm. Do we want to mess with that? Look and see,

play on elements. That's cool. That's really cool. Are any of these going to do what I

want? So that's really handy. See that? Just built

in. That kind of incredible. Okay. No, deferred transition it looks like it is

needed or needed between multiple elements. Okay. So, cross fade function. Send and receive.

So what we're actually doing. Oh, there's a lot here. So there's the left one. Unchange.

Mark it true. And I don't see transitions. And then these ones I don't see transitions.

So that means when you mark it to do, you remove it to do and then you add it to the

other one. Okay. So when you add, I still don't see transitions.

How is this being done. We're automatically sending in the so where does send get called?

We send send. Huh. I don't see I don't see that actually being used. Do you? Like where

did that actually get used? Send do I need to run the send. These don't actually get

used. Right? Like am I just am I losing it over here? Out. Here. Okay, send and receive.

Okay. I'm not, I'm not. I got it. I'm figuring it out. So we've got each of these to dos

on the in. It does a receive and sends the to do I.D. and on the out, it does the out

and sends the to do I.D. So this one this one might be a little bit advanced for the

five minutes we have remaining. So let's try to hack it. So here's what I'm going to do

instead. I'm going to set another one here that is

let state and we will say it is currently not booped enough. All right. And we'll say

if so we're going to need like two blocks here. So the first one is going to be if state

equals that will be our maximum booper drive state. Then we'll show this one. And then

this one we'll say if derived count is greater than zero we'll show this. And when we get

to drive count so this one's going to have to be reactive

as well. No, we need like an on complete. So let's go back to those transition events.

And we'll say on intro, outro end. On outro end. On outro end we will say status equals

more boops. And I need to put this in the right place. All right? That should be right.

Let me take this out. We are instead going to put it here. And all right. This broke

the whole thing. State. Oh. State. State. Okay. So two, three, four, five. So this should

fade the first one out. There we go! Okay. So this definitely does what we want. Right?

Like we can so this is, and honestly, like this is only sort of hackie. Because this

feels like what I would do in a regular app. Let me break this up a little bit so we can

see what is actually happening. I don't know why it doesn't autoformat for me. I think

I have issues, I'm starting to suspect this SvelteKit plug in is arguing with one of my

other plug ins, because my autoformatting is not really working. So I suspect I'm doing

something wrong. So something that I done here as well isn't actually doing what I want.

So let's see if we can get our transition to actually work. Transition scale. And I

want starting point should be zero. Two minutes. Can we do it? I think we can. Let's go back

to the docs. Let's find scale. Right? Here's transition. And we're going to look at custom

transition functions. I don't need those. I need scale. Is there a list of these somewhere

that I was looking at? Create a component. Transition. Keep looking for scale. It is

here somewhere. Svelte transition scale. Here we go. So down here we've got scale. Scale

params. One of the params that we want is the start default of zero. The scale value

to animate out to and in from. Right. Does that mean that I need these, animates the

opacity and scale. Oh, that is because, I think that means our, our span needs a display

block. I think that will fix it. Let's try it.

What did I screw up? On outro end. Oh, I did all sorts of thing wrong. I just got halfway

through. No, keep that. And we're using scale on both. So let's set transition to scale

on both. Try that again. Boom, boom, boom, boom. Now, you should fade. You do fade. Okay.

So it needed to be display block so the scale could actually transition. This is really

nice. This feels really good to use. I love the fact we were able to get this up and running

and we get these, like we didn't really get a chance to look at the more in depth stuff

here like the server side stuff. But it is very cool, I think I broke a piece. Resource

responded with a 404 not found. Okay. That's fine. I must have broken something, I'm not

sure what I broke. But we will figure that out. But it does work deployed. Hopefully.

It does. Okay. So something that I did got a little bit goofy. I must have been poking

some buttons. No matter what, we are in pretty solid shape here. We have a deployed app.

Here is the other thing, if I refresh the page, this is persistent. This is pulling

from a database. Not just a demo that will refresh when you navigate away. We were able

to, in pretty short order here. I'm going to remove that VS Code stuff. Get add all.

Get commit. And we'll say add a boop counter. Push that up. That should deploy nice and

quick for us. And once that is done, should be live over here. Ah. There we go. This should

only take another few seconds here. VITE is so dang fast. Okay. That's our site deployed.

So if I head back over to the home page. Boom, boom, boom, boom, boom. There are transitions.

So this, I mean, this is slick. Like I feel very impressed by how nice Svelte is to work

with. How, how intuitive those animations feel. How the docs were really complete. So

Bill, we did not do the to dos part. So, the to dos part came out of the SvelteKit demo.

We, we set that up and this was kind of built in. So I only marginally understand how that

part works. But it is very cool. I think what I might do now, I might try to hunt down,

maybe I can get Rich to come back or somebody else from the Svelte community to come and

teach us about that. Because it sounds like there is a lot to do here. A lot of cool opportunities.

I would be very excited to learn more. So you know, stay tuned. But for now, I think

we will call this one done. If you want to go and see this site, you can see what we

deployed here at fun with SvelteKit. If you want to see the repo it ended up over here

somewhere. No. No. One of them. Let's see. Just open it again. Right? Here it is. You

can go and find this repo. There it goes. Okay. So with that. Let's, let's head on back

to the "Learn with Jason" home page and do another shout out to Carrie who has been here

all day doing live captions. Thank you so much, Carrie, for being here. That live captioning

is coming through White Coat Captioning made possible through our sponsors. [Listing sponsors]

all of who are making the show more accessible to more people. And check out the site and

look at the schedule. As we said, a ton of really fun stuff coming up. It is just jam

packed. There is all of this and more. We've got everything from like we're going to do

teamwork close and notion. We're going to do personalization which is really cool. So

we'll be able to take content on a page and customize it based on who is viewing it is,

which is a really, really powerful thing that seems like it is impossible on the jam stack.

It turns out we can do. [Event concluded]