Tuesday | 21 MAY 2024
[ previous ]
[ next ]

SvelteKit Tutorial from Joys of Code

Date: 2022-03-13

Now that I've used svelte and sveltekit to get a project of some size working, I figure now is a good time to go back and do a course on it to learn how to do things properly. I was able to hammer svelte and hammer my way of thinking to work and get things done but now its time to clean things up. I like this method because now I can take these lessons and see how my own ideas differed or if they were the same and hopefully see why things are done the way they are.


The joys of code videos seem to be quite good and the author says that they are covering the most things especially for free. I also believe them because from what I can tell sveltekit is still new enough that there is no deep and comprehensive tutorial or guide quite yet so this might be it. The net ninja crash course was helpful but very much a crash course.

One thing the creator talks about is the idea of meta frameworks which is quite interesting. I noticed that sveltekit, nuxt and next all sit at the same level. They are these frontend frameworks that also provide a backend. I also have a feeling that nuxt and next work in very similar ways to how sveltekit generates the backend. The author also pointed out that the javascript world has sort of settled on the component model of development. This is also something I noticed after using react, vue and svelte. Each of these frameworks have the same core concept of lifecycles and components which is interesting. Even if new frameworks come up, I imagine this core concept will continue to hold.

I wonder if ejs and express should count as a framework in the same vein. Probably not because its very much a traditional server side project in that case. But everything is pretty much same :) A fun note is that I thought we were in the age of the first generation frameworks of react and angular. Vue and svelte would be the second but I'm guessing now these metaframeworks are another generation all together. I'm just making this up based on my perception.

Lots of good points about the js bloat and the hot new thing :)


Adding aliases to be able to use $lib seems to be a vite specific thing which is really good to know. It seems really easy to add more shorthands such as $root or $components.

Ah! svelte:head is that tag you can using to change things in the header. I'm guessing svelte:body then works the same way.

Pages starting with underscores are ignored. Really good to know as I've moved my api routes out of the routes folder but I probably could just rename them with underscores to hide them from the routing.

Following along would be difficult, the creator talks pretty fast and the chunks are a bit too long at 10minutes. He also copies and pastes code quite a bit so these would probably take about 30 minutes if you really want to follow along. Luckily the blog post is exactly what he is going over so its actually quite a good system. The video is a speedrun but you can follow the blog at your own pace.

Typscript is not only great because of the type checking but also the hints that the editor is able to figure out. I never thought about that part of typescript.

Highlighting the current page link requires using the page variable from the stores and then setting up a reactive path variable. (Episode 7) Useful to jot this down for later.

Svelte compiler will auto close even divs. Cool.

You can have each component error specifically meaning that errors won't bring down the entire page. That's a pretty cool feature of nested components.

Shadow endpoints very interesting ideaIndex.json.js this just automated some return types but we can explicitly say what the header type isThe requests all have access to headers and such.

I do a lot of processing in the load function, I might need to rework some logic to get shadow endpoints working but that would be useful.

Ah time posted function is such a great idea I’ve always seen it but never actually bothered to implement it. I should.

Ctrl space will bring back the suggestions!! I need to try this in Java current I go back and delete and settle to get the help.

Json stringify takes parameters to pretty print things damn!

Vscode is definitely pretty crazy with the amount of type helping and auto completion it does. He is quick.

Svelte has native animation I need to learn that.

Cool to see the underscore method way to get other http options. I guess it must be a standard. Maybe in the back it actually uses the method override package.

  • This is another set of videos about using hooks in sveltekit, not super useful quite yet so I'm going to tack it on here You can create a folder and then do npm init svelte@next that’s really useful as that maps far better in my head. This guy runs into trouble often so it’s good to see him fix it but maybe should script it because 5 minutes videos are really just 1 minutes worth.

You can use aria labels to get around needing labels that’s helpful to know!The methodoverride for Delete is a config change

Ah! I learned you can cast to numbers using the plus I wonder what that throws as I’ve been using parseint. I’m also curious how the number cast works.