Experimenting With SvelteKit
with Jason Lengstorf
In this episode, Jason will experiment with SvelteKit!
Resources & Links
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
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.
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 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]