Experimenting With SvelteKit — Learn With Jason

hello everyone and welcome to another episode of learn with jason today on the show it's just me we are gonna do some experimentation um i had a last minute uh last minute schedule change all good we're gonna just play around so we're gonna try something that i've wanted to try for a while here which is spelt kit um i've heard a lot of really promising things about spelt kit it seems super promising um it it has unbelievable developer love if you look at the the stack overflow survey if you look at other developer surveys that are happening people are very fond of sveltkit and so i haven't had the chance to really try it the the most i've done with svelt is actually the work that i did on this show with rich harris so um and then we had another one with with scott uh from level up tuts scott talinski so why don't we let's see let me drop links to those episodes actually because oh wait i have a search on my oh i should okay hold on i'm gonna switch over so i can show this uh because this is new this is a new thing that i built that i'm very happy about so do you remember uh when sarah dayan came on the show and we built search and then i was like yeah i'll get around to putting this on the side eventually it's on the site so first of all here's here's the episode where uh where she helped me put this together taught us how that works and then here because this works now here is the episode with rich where we did an intro to svelte and then we also did uh this animation was felt with with scott telinski so let me drop these um so that is all very exciting and why don't i while i'm on the site here what okay i don't know what that was actually i have it open over here where the captions already live so we are as usual being live captioned today we've got carrie with us today thank you so much carrie for being here and uh carrie is from white coat captioning you can check out those live captions right on the home page at learnwithjason.dev captions are made possible through the support of our sponsors netlify fauna asura and auth0 all kicking in to make this show more accessible to more people which i very much appreciate um and so today we are going to play with spelt kit um so this is spelt kit and before we before we start there how y'all doing what's what's going on today how is everybody what's uh what are y'all what are y'all working on how's your day going uh yeah coca-cola with there's there's no pie torch today we had a schedule change so i'm uh i am going to try to get back with lorena and and see if we can reschedule but um yeah i uh so we it was pretty last minute there so i'm i'm pivoting to something that i was looking at yesterday to see if i had time to work on it so uh you know let's say hey you get a you get a schedule change you make some lemonade right um with that oh chris ellis is actively working on a svelte kit tutorial that's amazing what what wonderful timing um cool so maybe you can help me when i get stuck because i definitely didn't have time to to find somebody who knows svelte to like unstick me when we when we realized that i don't actually know this framework so uh yeah so let's let's just poke around here and see what is going on so svelt itself is an application framework that i only kind of know so that's going to be the probably the biggest hurdle today is that i know enough about svelt to recognize it not enough to really do things um hey what's up yeah thank you thank you uh that's it's good to good to have you i'm excited about svelt as well i mean it's been getting just really incredible support from the community i've i've been uh kind of blown away by how quickly sentiment has has grown for spelt i know it's been around for a while it kind of felt like it was under the radar it was it was not even under the radar like i know rich has been talking about it for a long time but it felt to me like svelte was something that was really powerful but it wasn't picking up the steam that it honestly kind of seemed like it deserved and it just seems like recently that steam is coming where we're seeing a lot of people uh we're seeing some people who were really prominent and other communities start to move over and adopt svelt and it's uh it's becoming very popular over there so i kind of want to see what the hype's about i mean you don't you don't get the the like most loved framework uh i think it was stack over let's see stack overflow developer survey i think i think it was the most loved and now you know granted take all of these with a huge huge grain of salt because there are only so many people who actually take this so it's a it's a little bit biased but the thing that is uh that was interesting to see is that oh this is technology where's frameworks databases platforms web frameworks so look at that spelt is the the top loved framework which is uh which is kind of amazing um 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 that's pretty prominent right so that's that's pretty cool and so let me drop this in here oh whoops yeah eco i didn't have a chance i looked to be completely fair i definitely learned this like it was we made the change very last second so um i am i am gonna have to go fix that uh 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 just gonna copy paste my own tweet is that okay i'm gonna do that i don't i don't care um let's wait where is it hello i'm just gonna retweet my own thing here we are retweeted re-tweet it has been quote okay uh and then i will stop looking at twitter how about that uh yes great so knowing that svelt is is growing in popularity that people are are kind of excited about it they want to work with it i think this also came up in the like want to work with like 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 svelt's not even in this okay maybe not then uh anyways it uh it's it's growing in popularity that's that's pretty exciting and so we can um you know it's worth it's worth taking a little look here so here's the thing that i think is cool about spell kit so in general what i like about svelt 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 of bulk as part of what the framework itself ships so the javascript that you ship is mostly your own javascript and it does a decent job of like not adding extra stuff right so there are there are frameworks that are specifically targeted for that like astro is is like hey let's not ship literally anything that isn't actively required for for interactivity which you know that's their stated goal i think spelt's goal was more let's create really really really good interactivity like the the if you look at this animation um this animation library that wait where did it go not this one um did i lose it animation was felt here if you look at the the possibilities with this like there are some some extremely cool like animation stuff and this is all just built in right it just it just works so it's very very powerful in what it allows you to do and it doesn't require you to become an expert um so this this is what i think is is really interesting about svelt is it seems to be the framework for people who want to create very interactive visualizations if you want things to animate if you want things to move around it just works in a really intuitive way in svelt and it ships a very performant bundle which you know those are those are things that i think are really um like every framework has its strengths and svelt that seems to be its strength is it's it's so well suited for visualizations and interactive uis and and transitions and animations and stuff like that so i want to just dig into it and then what spelt kit is doing is it's giving us the ability to do a kind of single page app uh kind of app-like experience um that that just feels really nice to use so that's what i've that's what i've all understood now let's find out how it actually works so i'm going to start by just getting right into the docs and let's let's look at well i guess let's make sure that i understand what it actually is so spell kit is a framework for building extremely high performance web apps building an app with all the modern best practices is fiendishly complicated that is true i love fiendishly those practices include build optimization so that you load only the minimal required code offline support pre-fetching pages before the user initiates navigation this one's huge if you aren't familiar with what that means that is when you you can tell that somebody's going to click because they hover a link or something like that and you start loading the data ahead of time which saves you half a second or sometimes a full second and that little bit of prefetching will make your app feel like it loads instantly instead of like you click and then wait so it's a it's a subtle thing it's a small thing but it makes a huge difference and configurable rendering i don't know what that means but we're going to find out that allows you to generate html on the server or in the browser at runtime or at build time spell kit does all the boring stuff for you so that you can get on with the creative part uh and spelt kit does all this while providing a lightning fast developing experience where changes to your code show up in your browser automatically uh oh it's using veet under the hood that's cool so the updates are instant and precise without reloading the page or blowing away application state so um veet is another one that we've done an episode about it's extremely cool i'm so happy this exists oh my goodness um let's see this was the one where we actually used veet um so this this one sunil and i talked about veet for a while and then there's this one here as well where um we did subscriptions and now the the majority of what we did in here was building this actual subscription thing but we used veet for it and it is so dang fast so if you want to see veat in action that's a good way to to do that um 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 yeah so that's that's what i think is going to 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 json directory and then pull it over all right so the first thing that we're going to do is npm init uh spelt train yep yep svelt at next interesting so spelt kit isn't like a separate thing it's just the next version of svelt so let's say fun with spelt kit all right this is beta software that is fine let's go with let's go with the demo app so we've got something to peek at i'm typescript is probably one one step too far from me let's do code linting let's do prettier and now i can go into here let's npm install and then we can get in it all right and if we look in here we can see it set us up with a pretty decent setup let's um let's say they wanted us to commit everything so let's commit everything and say um initial commit all right get out all screwed up my git commands there okay so now what i can do is create a new repo and so we'll create it at learn with json fun with spelled kit um and this is using the the github cli which is amazing this will create learn what yup that's the one i want good good good okay so that exists and if you're interested this is oh wait is it github.com cli oh it is cli github.com yeah so check this out if you're not familiar with it it's a very very powerful tool that gives us a lot of really powerful options and then i am also going to um let's just run this thing with netlify let me use network dev oh wow okay so we we automatically recognize felt kit 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 spelt kit app good i like it it's got a little counter all right it's got an about page and it's got to do's okay so let's add it to do don't help one password and let's say do a thing and it says do a thing and then we say duke please go away no oh boy okay do another thing and now we've got two things 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 and sinks down a little bit or i bet it does something cool when i delete too look at that okay so do you see how it like very quickly kind of it like fades away and shrinks and all that stuff i bet when we look at this code there's no custom library in here so let's let's open this up and take a look okay so here is our source code we've got app.html which sets up our div with the svelt app in it okay we've got hooks.js what does this do handle this looks like it's some specialty stuff because it's setting a cookie with a user id visit 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 inner workings of spelt so let's poke around in here we've got um a layout let's look at the layout so we get a header we get an app.css and it sets up a script we've got our main header here main we've got a slot and slots are where the content gets dropped in if you've got i think that's like react children if i remember correctly thank you oh hey julian that is uh this is operator mono um footer and then we've got style down below so this has got the the sort of single file component feel of view that i dig um and let's look here's the index page so we've got pre-render 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 um and then we've got a counter so we'll look at that in a second and then we've got yeah hysteria nine as far as i know um 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 all of this will show up in the slot um to the best of my understanding let's let's run it and take a look actually what happens so we'll run it and if we look in let's go to the home page and look in the elements here we can see that here's our section section with the h1 and that's a 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 you looks like it auto wraps this is probably a specially named file because it's got the the double underscore lead um so yeah very much like view slots as far as i understand it chrysalis dev is confirming and uh it looks like i want to be suffodolsk sorry if i'm getting that way wrong um slots can have names also nice so that would be like if we wanted to pass it as an actual prop that would work okay so now that we've got this in here let's maybe go and look at what that pre-render thing meant so let's go back to the docs and [Music] each of your page each page of your app is a spell component great you create pages by adding to source routes this is very familiar to me this is how you do it in next next gatsby whatever you have a they have source pages this is source routes cool um these will be server renders so that a user's first visit to your app is as fast as possible and then a client side app takes over okay that's what happens in all of the front-end frameworks that i know um 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 pre-rendering okay i suspect if okay yeah it's likely that at least some of the pages can be represented as simple html and these can be pre-rendered good so if your entire app is suitable for pre-rendering you could use adapter static which will generate html files for every page plus additional files that are requested by load functions in those pages in many cases you'll only want to pre-render specific pages so that's when you export this pre-rendered true let's start at the root of your app and generate html for any pre-renderable pages that it finds each page is scanned for a elements that point to other pages that are candidates for pre-rendering so you generally don't need to specify which pages should be accessed if you do need to specify which pages should be accessed by the pre-render you can do so with the pages option in the pre-order configuration don't exactly know what that means so we might just have to see what happens when we try it um okay so let's uh 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 uh if we slot name name slot name address slot name email oh and then we can just do like a span and 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 badass is this that should work right do i have to run it no anyone oh do i have to hit show me weren't you supposed to run for me rude span slot email maybe you have to like put it in between or something oh that's interesting that's a that's a limitation that's weird so if it's 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 so it's just the the rebel is a little bit strange but that's powerful stuff like that's very cool that that works like that um okay and yeah it honestly it might be my computer i'm running a lot of stuff on it so it could be could be hung up on me right now but that is really powerful stuff i like actually let me keep that open so i can put it in the show links let's go back to our app here and let's shut that down and i just want to start messing with this a little bit so let's let's go and look at this to do's and i want to see how this works because it looks like there's a little bit more than usual going in here so with this one we are in hence so we load the response from to dos.json which it appears is here which is kind of interesting so you do a json.js and then you can run a function interesting okay so we're 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 um what's up ally thank you for stopping by good to see you um okay so we've got uh we've got our to do's here we've got the ability to get which it looks like just pulls all of the posts and here's that user id okay so this this hook is just for the demo it's just to get us set up with a user id so that we can send these and then it looks like let's see there's an api this is oh so they like set up a whole api here where we can go and hit the svelt api and then pass in to do's and like what our to to-do is so to use user id and then we get our to-do's i got it i understand so what this is letting us do is basically they implemented a little api to support the dynamic to-do management that is uh that is very cool um it's okay you don't you know what you don't have to follow it's all right you know i i appreciate it but it definitely doesn't affect it doesn't affect our friendship so why don't we mess around with let's mess around with some data here i'm just 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 was done so let's let's go back and let's 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 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 yeah i mean like where would there are clearly some things in here that i need to learn but like are there are there any animations down here there's a transition so there's a there's a little bit of css animation mixed in here just to move it up and down a little bit cool and see transform none transition opacity so that's where the opacity shift came from okay that makes sense and 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 it kind of flies in fades in if you check the box it goes there so we've got the opacity shift and we've got the um that little bit of a like down one pixel to look like it's lowering right and then when we delete that's the the scale it's just really cool how fast that uh how fast that works i'm i'm very very excited um tony i mean you can click on you can click on links in the stream if you want that uh i think you're just gonna pause the stream [Laughter] so this i yeah i i really really like the way that that works i think that's super cool so let's 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 just get over here head to the home page there we go okay we've simplified we're at hello chat so if i delete this how fast does that change ah just instantaneous let's look at the counter so here's the counter and this one has another auto imported thing so it imports a spring gives us a count this oh this dollar sign thing i remember as being like a context thing that i'm gonna have to look up again but we're able to offset modulo displayed count so does that mean that the left button will be disabled if unclick hidden true decrease the counter by one where does that thing come in so we've got the offset where's 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 uh making it reactive so more or less it's saying that this this will be a variable that when changed should re-render 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 there we go we've 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 now check this out so we 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 the component will use so it looks i bet there's more to that but it looks like we've got kind of two different contexts that we run in that will allow us to kind of configure svelte and probably communicate to other maybe communicate to other components and then this is stuff that's 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've got this header we've got the app.css [Music] so we can say like built with spell kit on learn with jason.dev i forget to close an element i double closed an element double close two elements what chaos is this okay and then i should probably change this one to actually say spell kit okay so we've got we got that one going let's get into the header mess around a little bit so we've got this logo uh we've got some stores and this comes from app stores do we have an app stores or is that like a global thing app so that looks like a global so we'll have to look up what that means and then we've got a link then we've got this uh this nav box being i think is just the shape behind it oh it's like these side shapes okay so we can drop those this one corner oh this like goes up in the in the top right what are you with that extra autocomplete it's kind of wild oh so it'll just throw something up there if we wanted to okay so that's cool and then we've got this corner we've got everything being display flexed got the nav okay svg we don't need that one anymore got this path i love css variables um we've got the ul the li all good okay so we've simplified that a bit let's look at this app.css and i'm just gonna mess around with see so that like let's change it to the default font look at that go that's cool all right we're getting there uh it's got a mono space good uh all these different colors and then what if we drop out oh that's cool okay so we can we can get rid of the gradient and then we can mess with like we could set this to be background and then it's white okay we're getting places things are happening it's all happening then we've got a radial gradient i don't really want a radial gradient do i probably not let's turn it off in fact i don't think we need any of this anymore because we're not really doing anything with the pseudo elements it sets the app to be a minimum it's all happening uh then we can do let's see that's 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's up ben how you doing nikki anything for you um oh and then uh fakui says 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 one script module is once per load and the without context modules like once per render or something like that so that's all good all good um let's all right so we have like a somewhat simplified little thing let's set our background let's set this background to be like just a little bit oh this is so cool that that works let's make it just like a little bit this this color yeah that's not gonna pass contrast is it not really let's make it a little bit lighter that works i'm okay with that oh that's a purple purple and orange match made in heaven maybe we do uh maybe we do more of a like a red no i'm gonna do a gray how about a gray oh that contrast feels bad still okay see i have an episode coming up where todd libby is gonna teach us about contrast and that feels like uh feels like something we need that feels okay i think that's i think that'll pass should we test it okay so i'm going to go here and then i've got our [Music] color here and we can do contrast against can i get 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 trip goes over triple a so we've got great contrast and now also does everybody know about that tool that thing is that thing is so good uh yeah the todd is coming on let's let's take a look it went too went too narrow broke my nap here let's get is todd on the site yet he's not he's not yet on the site let me check the date on this he is coming on upcoming gotta check my secret notes todd will be on october 28th we're gonna do understanding color contrast for accessibility i have a bunch of episodes that are not up on yet there's a i think i have like 10 episodes that aren't listed yet or something like that so um yeah definitely definitely keep an eye on this schedule you can always add on google calendar if you want to get notified automatically it'll just kind of show up in your it will show up in your google calendar you won't have to get notified or anything like it doesn't actually send a push notification it just like puts it on your calendar that it's happening um oh i didn't even think about that it's gonna be a spooky episode um should i try to talk todd into doing the episode as a lobster roll yes yes we should do that i will [Laughter] great um and since i don't have an episode to link to let's let's do a quick shout out to todd there he is there's todd and the reason you can see todd is uh is definitely building a little bit of a of a legend around himself in lobster rolls i bet if i look into his media we're gonna see many pictures of it let's see how far do we have to go to find a lobster roll wait lobster here's one is that a lobster roll no that's cheeseburger there it is we knew we knew that he would find a lobster roll uh so anyways this uh this this will be happening that's gonna be a good time so let's keep on plugging away here let's see if we can do something fun um less lobsters in arizona that is true that is absolutely a fact all right chris ellis have a good night okay so now that we have uh set up a light customization of what was there we can start messing around so what i'm going to try to do is i'm going to attempt to re-implement 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 let's get it up and live so i'm going to check what we've done let's get at everything we'll do git commit call it a work in progress and say minor customizations to the base template and we'll push that up set the upstream to with that dash u shortcut so that i don't have to i can just do git push now and it knows to go to main uh and then i'm going to netify init so i'm using the netlify cli now which i have i think alifi.fy.cli cli is that right let's find out yeah okay so i have a short shortcuts love shortcuts if you want to go get started with the cli uh the netlify cli is going to let us do a bunch including create and configure a new site so i have my github repo that i created it's it's this one here if you want to go check it out i can drop that in the link as well and that is going to be deployed to my own site and we'll call this fun with svelt kit alright and it should because it detected spell kit i think it's gonna just auto detect stuff but what i'm gonna 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 nullify functions good okay and now i think this is not going to work because i saw something about adapters so what do i need to know about adapters let's look this up um 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 a 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 okay so there's no options no nothing that's i can manage that so let's install it then we'll come down to this felt config and it looks like not a lot happening here which is good or wait was it default or named default so import adapter from sveltekit adapter netlify and then here we can go adapter and then we call that like a function okay so then we should be able to get add everything get commit m uh add the nutlify adapter we'll get push and then let's go take a look at this so i'm gonna notify open and so that'll open up the thing yeah and it failed because we didn't have an adapter this one should work because we do have an adapter i need an nvmrc looks like it does work probably and there we go there's our site so um the the adapter i think is let me just actually read the docs here um an adapter before you can deploy your spelt kit app you need to adapt it for your deployment target okay so that anywhere you go you need an adapter adapters are small plug-ins that take the built app as input and generate output for deployment many adapters are optimized for a specific hosting provider and you can generally find information about deployment in your adapter's documentation however some adapters like adapter static build output that can be hosted on numerous hosting providers so it may also be helpful to reference the documentation of your hosting provider in these cases so if you were building a site that didn't have any of the server side rendering stuff like the to-do's where you are actively reading and writing using like the back end features of spelt kit it looks like you would use this to get smaller bundles and deploy those to nullify but because we don't need to do that so this is node oh i kind of like the idea of naming it like that instead of calling it adapter yeah i actually i'm gonna do that because that makes more sense to me because like this right because now it's very clear whoops it's very clear that we're using the netlify adapter instead of like adapter adapter and you got to look up here to see that it's nullify i like that so let's use that and we'll just say uh let's call this a chore rename for clarity and i can push that and that'll rebuild the site nothing will actually change um i probably could have like skipped ci or something um i'm using node 16 by default oh you know what it might be let's check i used what version a node using node 16.9.0 is this because i'm on the new build image yes so uh this is the new build image which is default as of a week or two ago and it has i think where's the wait no i don't care about that i want to know about build image selection okay do we have details about what changed in this okay i think this might have bumped the the default node version php run maybe it didn't oh okay maybe i'm wrong i don't know how it's getting node 16. is there already an nvmrc in here see does it have an engines doesn't have an engines interesting maybe it's because it's set as type module and that be really cool if our build system was smart enough to recognize that yeah i don't see anything that would yeah ubuntu should have 14 right like 14 is the lts okay something something is happening that is smart and it's apparently smarter than me because i don't know how it's because we didn't set any environment variables right so we didn't change the didn't change it there did it i wonder let's check this first one and see if it like noticed something about node uh now using node 16.9.0 how how did you learn this downloading and installing really interesting that it just like knows that okay i'm gonna have to dig into that one with the team and figure out why that happened because i'm happy that it did but i'm confused because it doesn't say that that's the version that we need um what are you doing computer why why are you like this there's i mean i am on the like every feature flag that netlify has so if 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 in every account but if you deploy spell kit and you see something weird happen um actually what why don't we just do this as if we didn't have it already happen what i'm gonna do is if i run node version it shows that i'm on 16.6.1 um so actually why don't we do nvm install 16. and get the latest which is 16.90 okay so if you don't use nvm nvm is a very cool tool that will let you swap your node version very quickly yeah nikki that's that's basically it um but using nvm i can install now i'm on 1690 where i was on 1661 before and so now if i run node v it says 16.9.0 okay so now i'm going to run it again but this time i'm going to pipe that into a file called nvmrc and what that means is it will have created a file called nvmrc and inside it just has the version so if i save that and i can add it git commit nvm rc then we can push that so netlify will respect that and use whatever version of node you want it to use i think to a to a point i don't know if you can go further back than 12. you might be able to go back to 10. unclear um but you can you can definitely use 12 14 16 and like any version thereof because it'll pull based on nvm um 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 just set this nvmrc it's just going gonna work and that's a very nice a nice experience so let's keep messing with some spelt kit stuff so now that this is deployed right i'm very happy about that it's deployed everything is working the way that we want our recent deploys are working did it change anything about the nvmrc see yeah here it goes so it's attempting to you to use the node version from nvmrc now but because i used the same one that was used before it's already installed so we don't have to reinstall it or anything had i changed it like had i not updated my version locally it would have reset to 1661 and we would have installed it at this step here okay so that's a lot of not node or not spell let's let's play with some more svelte so what i want to do next is 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'll only be able to increment it and that that seems like something that'll take me a solid half hour uh let's call this one boop.spelt and inside of it i am going to add a script what is up with this double completion we'll just live with that i guess can you [Music] and then we have whatever we want to be here so i think what i want is like a section and that's gonna be fun for the rest of the day i'm really excited about it here's a section and inside that section we want to have a display of our count so we can call that like a paragraph and inside of it we will put in the count so let's let's design this first and then we'll 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 will have a font size of say two rem and the button will have a background of what was 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 okay so if i restart the local server oh gotta reinstall the netify cli because i just changed my node version and this has to pull in all the stuff for all the different frameworks so it takes a little bit okay run nutlify dev and we've got ourselves a boop button and it looks like it's respecting our style choices okay so let's make this apply boops liberally that is correct uh do i have i mean auto close language defined maybe i can just try it here and see what happens uh let's not change it the language defined here but on the workspace we'll say never that seems okay let's let's try that now will you now will you respect me computer no shouldn't have gotten my hopes up volta dot 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 um let's uh let's let's style this up just a little bit more here so i'm gonna do section and let's have our section do uh we'll do display flex we'll do flex direction column and we'll do uh align items center that should center everything good and then on this we want like a border none sort of padding of like 0.5 maybe a little more on the left and right yeah yeah like that let's do a font size of uh 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 what our other color options are accent color sounds good let's try that one hey i like that and then uh let's do a like a font weight bold oh that it's kind of hard to read isn't it maybe it needs to be like a color of white or 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 not on its own i don't like this but i'm gonna i'm gonna live with it because i would rather try to figure out how to make this thing work so this gives us a uh button button doesn't do anything we've got our our thing here that works um let's go with like a 0.5 ram that seems okay all right so next what i want is i want this to be counter equals zero now if i want the counter to be here do i get to just like drop it in like this i do haha 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 on click increment this seems too easy it's probably not gonna work it doesn't okay so let's go look in the docs and figure out what i did wrong so i'm gonna go to the let's make this bigger we're gonna go to svelte js svelte.com.dev and then let's look at the docs and look at reactive assignments reactive statements so prop you can export we're not we don't need that but i do want on event name and handler okay so i i got halfway there i needed to do it a little bit different so i did it like view or no i did it like nothing and i don't know why i'm surprised that it didn't work so that theoretically should work bam look at it oh goodness everyone oh my goodness it's so good all right so here's what i want to do next i want to figure out oh i love this okay so wait now do i need but do i need to make this reactive i bet i don't what if i just like let counter 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 um we'd go like derived count and that would equal 10 minus counter and we can say let's say call it details and say we are something like this right so then if i boop okay but see it's not doing the thing so instead i would need to do this and now now it's okay all right light bulb 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 depending on some other value i understand so um cool all right i get that that makes sense and now boom boom boom boom and then i could we could make this uh intelligent and to do that we get to do some other fun stuff which i think 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 actually i can do it like this boom and then then i could do like an else and then i could do if i'm wrong expected if um gotta look it up got close i think let's go 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 oh okay so i need to do it like this and then i think it works one two three four five six seven eight nine ten oh all right and then it just doesn't change after that because we're at maximum booper drive okay so now we've got some kind of reactive bits in our components we've 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 all right i'm i'm on board what up y'all this is cool all right so i'm really happy right now because this is doing all the things that i would want it to do it's intuitive enough that based on my knowledge of of other frameworks and the little bit of svelte experience that i have this didn't feel insurmountable the docks were easy to parse when we needed to go look something up so we could just kind of find it really quickly that makes me really happy so i'm uh 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 a result of a change so 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 was they put this into a css animation and so to do that or actually you know what why don't we do this let's do this transition and we're going to transition fade so i would need to get like import the fade but we could do transition parameters don't really need those can we just can we just call fade without any we don't need to import anything so let's do this let's do a span and a transition fade what what is that why would you do that okay then we're gonna go here it doesn't like that fade is not defined okay so i need to import fade from svelte transition is that just gonna work that would be neat let's try it so if 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 that 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 opacity good yup i wonder if it'll like play in backwards if we do it that way let's let's try it and see what happens so i'm gonna do uh import scale and then we're gonna try an out of scale and what now what i think should happen is this one should like 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 as why that one weird so we would need to like link the transition somehow if we were gonna do that which i could pretend let's see if there's a is there a dock on like chaining tween spring i don't really want any of that what does draw do oh that's for svgs we don't have one of those um i want to also it looked like scale didn't do anything did you did you all see that so it's like in scale out scale and let's see so does scale just 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 say on the transition fade we would go delay 400 and then that should cause these to do their thing okay so it kind of it kind of did it but it i would need him to be like position absolute or something that but that starts to feel a little bit messy doesn't it um 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 any let's look in the actual docs right like or let's look in the tutorial let's look at transitions right so if we've got a transition then it'll fade in and out okay that part's fine we got that and 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 that part makes sense i want to see it do a handful okay so now 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 what does that mean oh interesting okay so there are there are like steps here so transition and then we've got these kind of bits here 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 oh that's cool that's really cool um are any of these going to do what i want so that's really handy you see that that's just built in that's kind of incredible okay so um it doesn't look like wait no deferred transition look like we needed right coordinated between multiple elements so crossfade function send and receive so what we're actually doing oh there's a lot here so there's the left one on change mark it true and i don't see transitions and then with these ones i don't see transitions so that means when you do market to do you remove a 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 crossfade send and receive 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 does that actually get you send do i need to run the send these don't actually get used right like am i am i just am i losing it over here ouch oh here send and receive oh okay i'm not i'm not i got it i'm figuring it out so we've got each of these to do's on the in it does a receive and it sends the to-do id on the out it does the send and it sends the to-do id and so this one this one might be a little advanced for the five minutes we have remaining so let's try to hack it okay 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'll be our our maximum booper drive state then we'll show this one and then this one will say if derived count is greater than zero we'll show this and when we get to derived count so this one's gonna have to be reactive as well no we need a we need like an on complete so let's go back to those uh transition events and we'll say on intro and it'd be outro end right on outro end on outro end we will say status equals more boops and i need to put this in the right place right that should be right let me take this out we are instead going to put it here and yikes 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 hacky because this feels like what i would do in a regular app um let me break this up a little bit so we can see what's actually happening i don't know why it doesn't auto format for me i think i'm having issues i i'm starting to suspect that the the spell plugin is arguing with one of my other plugins because my auto formatting is not really working so i suspect i'm doing something wrong um so something that i've done here as well isn't actually doing what i want so uh let's let's see if we can get our transition to actually work transition scale and i want um 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 creating component transition let's just keep looking for scale it'll be here somewhere spelt transition scale there we go um 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's because i think that means our um our span needs a display block and i think that'll fix it let's try it what did i screw up on outro end oh i did all sorts of things wrong i just like got halfway through nope keep that and we're using scale on both so let's set transition to scale on both let's try that again boom boom boom boom now you should fade you do fade okay so it needed to be display blocked so that the scale could actually transition um so this is really really nice like this this feels really good to use i love the fact that we were able to get this just up and running and we get these like we didn't really get a chance to look at the more in-depth stuff here of uh of like the the client side or the 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'll figure that out uh 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 but no matter what we are in pretty solid shape here where we've got a deployed app um and here's the other thing if i refresh the page this is persistent like this this is pulling from a database it's not just a demo that will refresh when you navigate away so we were able to in a in pretty short order here um let's get add i'm going to remove that vs code stuff get add all hit commit and we'll say add a boop counter and push that up that should deploy nice and quick for us and once that is done it should be live over here eh here we go i think this should only take another few seconds here vt is so dang fast okay so that's our site deployed so if i head back over to the home page boom boom 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 how intuitive those animations feel um how the the docs were really complete so um uh bill we did not do the to-do's part so so the to-do's part actually came out of the svelt kit demo um from npm init spelled at next 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 and and i think what i might do now is i might try to hunt down maybe i can get rich to come back or get somebody else from the spell community to come and teach us about that because it sounds like there is a lot to do here a lot of cool opportunities so i would be very excited to uh to learn more so you know stay tuned but for now i think we're going to call this one done if you want to go and see the site you can see what we deployed here at fun with spell kit.netify.app and if you want to see the repo it ended up over here somewhere no no one of them let's see let's just open it again right here it is you can go and find this repo there it goes okay so with that let's uh let's head on back to the learn with jason home page and do another shout out to carrie who's been here all day doing live captions thank you so much carrie for being here and that live captioning is coming through white coat captioning that's made possible through the support of our sponsors netlify fauna asura and auth0 all of whom are making the show more accessible to more people while you're checking out things on the site make sure you go and look at the schedule we've got as we said a ton of really fun stuff coming up it is just jam-packed there's all of this and more we've got everything from like we're gonna do team workflows in notion we're gonna do personalization uh which is really cool so we're we'll be able to take content on a page and customize it based on who's viewing it which is a really really powerful thing that seems like it's maybe impossible on the jam stack turns out we can do it um we're yeah we're doing new relic stuff we're doing distributed databases this one i i don't even know i'm so excited so many cool things happening all over the place and there's more episodes that i haven't even added yet so what a great time to be a live chat oh my goodness all right with that thank you all so much let's go find someone to raid thank you all so much for hanging out with me today and we will see you next time

Channel: Learn With Jason

Views: 4,514

Keywords: Learn with Jason, SvelteKit

Id: kEMrGsDEgOw

Length: 88min 54sec (5334 seconds)

Published: Fri Sep 10 2021