Scott Teaches Wes Svelte and Sapper

You're listening to Syntax, the podcast with the tastiest web development treats out there. Strap yourself in and get ready. And with me Wes

always is mister Scott Talinsky. How are you doing today, Scott? And with me, as always, is mister Scott Talinsky. How are you doing today, Scott?

Hey. Yeah. I'm doing good. You know, living that life that we're all living right now and just doing the best we can. That's the

slogan. But, yeah, how are you doing? I'm doing pretty good. A little frustrated at my Internet right now. It's being very slow. We've got, actually, I think, an update to the rural Internet. Rural? Rural? Rural? How do you say that? Rural Internet, which usually I get about 12 megabits down, which is more than enough for nice and fast Internet. But, right now, it's it's choking at a boat like yeah. I'm getting 3 right now, which is okay for for recording this podcast, and I can see your video, but the latency is bad. And if my kids start watching a show or something like that, then the whole thing just comes crashing down. So I'm doing a little bit of research on the can I just get a secondary setup of what I currently have just like my own my own line?

Yeah. I know. See, now is not the time for me to brag about my Internet, but I'm, like, wired via Ethernet.

No, man. It's like my office is the main connection here, and everybody else can get the slower Internet in the house. Cool.

Yeah. I'm actually gonna set up, like, some Scott policy or something that says, like, my computer gets it first Yeah. Like, prioritization.

And then the iPad is Do you have static IP setup? I don't. No. I don't. I was gonna say because that would be really easy to do if you did. I don't know what that entails personally because I've never done that.

It's in the, somewhere in the Ubiquiti UI of the thing that I can log in to. I did it with my Amplify at home, which I I gave priority to my own computer and the TV, which is just very simple. And now with the Ubiquiti setup that I have up here, I've Scott figure out how to do that just yet. Nice.

But, anyways, let's, let's talk about our sponsors, which is Sanity and Stackbit. Have you noticed all of our sponsors start with s? I kinda have noticed that. Sanity, Sentry, Stackbit.

Wes. It is it is interesting. Yeah.

Netlify, you gotta change.

Netlify's gotta change their their company name to Vercel.

There I was doing a plan there. So

so today, we are talking about Svelte and Sapper, which I know nothing about. So this is gonna be another Scott Teaches Wes episode where Scott lays down the info about Svelte and Sapper, and, I'm gonna be asking him questions and sort of saying,

That's really neat. That's really cool Oh. And things like that. Yeah. I think we might be getting a a boatload of those in these in this episode because there's a lot of cool stuff in Svelte that, like, directly takes care of a lot of pain points that you experience in other frameworks.

So let's dive into it. For those of you who don't know what Svelte is, it's a JavaScript framework a la React Angular view. It takes the care of the view layer for you.

And the value proposition of Svelte, which is really opens the door to all the unique things that Svelte can Node, is really the fact that it compiles away. So the compiler, when it builds the site, it entirely removes the framework from your code, basically, allowing you to have much smaller bundle sizes. It takes it down to just JavaScript, and, therefore, you're not shipping the entire framework.

You get to ship this version of the framework that's been compiled into your code.

So it's really fantastic, which means they get to include a ton of things into the base framework that other frameworks Sanity have due to fear of bloat without having to worry about bloat because you're not shipping any of it. So it compiles away. I've always wondered about that, like, how it, like, compiles away. So, like, are the features just not needed in the browser or,

like, how does that work if you need to do any of this in the browser? Or is it is it just static and you you can't do any of that stuff? Obviously, it's not just static because it's a it's a JavaScript framework. Right? It just turns it into straight up JavaScript.

But isn't that what, like, React is under the hood? Like, React if you just view source on React, it's it's just JavaScript as well. Right? So, So, like, what's the difference there?

Yeah. But think about it. You have to think about when you minify or compress things.

You have your React code, which is already minified, compressed, whatever. It exists as its thing. Your code exists as its thing. When it wants something, it calls something else. It does some other stuff. It does some other stuff. With this, it allows the the framework to be baked into your code in those aspects and minifies it altogether.

Somebody just recently did, let me pull this up, web dev Scott Reddit. I I just saw this the other day where they did a comparison between Angular and Svelte of this exact same project, and it Wes, like Yeah.

1% of the size. It's tiny. Like, the bundle of your website is, like, 23 k, which is, like, minuscule. That's that's smaller than you could ever hope to get an image.

And I'm just, like, wondering, like, how does that actually work under? Like like, let's look at the bundle of my own website, which it'll probably be a little bit different, obviously. Yeah. That's my intent. How do they compile it away when you still need the features in the browser? Like from, like, navigating from page to page or doing an animation or

doing virtual DOM? Because it compiles down to vanilla, essentially.

Like, the code that you're working no longer needs to

require a framework. Well, like, however big React is. Oh, like, it doesn't need the React API. It just would just use, like, a vanilla API under the hood? Correct. Yeah. Oh, yeah. So it leans on the stuff that's already in the browser versus leaning on an existing library that's assumed to be loaded on the page. That's my understanding.

And, I'll link to there's a post here. How does the Svelte compiler actually work that we can link here as well? So that way, people who wanna do it a little bit deeper of a dive there can.

So that's the the the basic selling point, but it allows it to do some really cool stuff of which we'll get into.

It's component and prop based to just like Vue and React. So you have components that are function largely the exact same way as React.

You have props that function very similarly. There are some differences, but they're positive differences in my mind.

Gives you easy reactivity, so you don't need to create state to set state and worry about the state versions of things. You have a variable, whether that's, like, let count. And then if you do count is equal to count plus 1, then that just updates in the UI. So reactivity is built in.

Because we mentioned the the whole thing compiles away, there's a lot of built in tools. Like, animations are built in as well as things like easy binding dimensions to things. There's a lot of really cool stuff we'll talk about later. And the whole thing, the whole view layer is template based. So unlike JSX, which is don't know. They try to say JSX isn't template based, but this is pretty much template based Wes you're accessing variables in that sort of standard way that we've seen before in older version. Well, I don't know about current Angular. To be honest, current Angular JS, like I don't know. It's a mystery to me right now because I haven't looked into it lately. But you access your variables basically based on bracket variable name within your template file. Yeah. So all of your templates Yarn Scott svelte files, and each of these template files can include script tags.

Right? So you TypeScript at the top where you do all of your JavaScript. You have your style tag Yeah. Which is just straight up CSS, which is scoped by default, and everything else below that is just straight up HTML and your template language.

And so this makes it really easy to just write a component. If you've used Vue, which I know you have just done so in a a minor capacity, Vue is the same way. So people coming from Vue are gonna feel very comfortable with this. Yeah. I really like that aspect of Vue. That's the funny thing about Svelte is that, again, just like Vue did, it takes a lot of lessons from a lot of different things and, really just does the best version of them, I think. So one cool thing is the template tag. The way that it accesses values is just via bracket the value, right, via the variable. Yeah. But unlike JSX, you can do some really neat things because it's compiled. You can just say image bracket s r c, and you don't have to do s r c is equal to bracket s r c, which is, like, totally redundant and unnecessary.

Oh, I hate that. Yeah. Because this isn't trying to be an extension of HTML. It's just trying to be a template language. It's trying to make your life a little bit easier.

And as far as components go, you just import them and use them just like anything else. Wow. So before you keep going, I just took a look at your website Yes. Which

your main bundle there is 23 k. Yes. In my website, which my I've got 2 main bundles. 1 is a framework bundle, which includes React and all the Gatsby and the routing and stuff like that. That is Wes k. Mhmm. And then I have my application bundle, which that includes probably all my custom functionality, and that's 214.

So mine is probably 10 times. Obviously, my side is much more complex than yours, so it should be much bigger, but still, like, the wow. That's quite a a big difference

for how small even just, like, baseline like, baseline framework for me is a Wes, and yours was 23. Right? Like, you can just see there's a 100 k difference there. And I think that's the big value proposition besides the fact that it's just plain easier to work in. And so I think it's just exciting. It's exciting to see that because it is it's it's free free perf. You don't have to worry about anything, and all of a sudden, you get some of that sweet reduction in KBs. You Node, worry about that.

So It's free real estate. It JS free real estate. You, Vinh. You nailed it. Meme Sanity here.

Tim Heidecker coming in. I think we've had a meme in every show for the last, like, 2 weeks. We've been memeing it memeing.

We've been memeing. Man, the the memes have reached us older folks, so we're starting to lay them down in syntax. Oh, yes. Us geezers over here. Yeah.

Okay.

Styles, you'll be excited to know that all CSS is scoped by default, and you basically put a wrapper around something to say it's global. That's it. Makes sense. So easy.

Sounds so easy. I found it like a, styled components, the type of flow, really simple.

It's really interesting. You can pass a variable as a class name and then instantly access like, you can basically use class names as sort of, like, props on variables. They have a style components like sort of setup. It's pretty neat. So, basically, you just have to tell the config that you're using a preprocessor.

And then anytime you want to use a Sass, you have to in the style tag, say type is equal to text forward slash Wes c s s. But for the most part, I don't even find myself using Sass. And if I do, it's, like, only for the nesting. But because everything is scoped by default and you're within a component, it's, like, almost like I don't find myself needing that ever. So as much as, like, I would typically reach for Sass in this, I don't I don't reach for it at all.

One of the biggest benefits of using ESLint is the fact that you get that scoping baked in. Exactly. I certainly still do scoping in my style components, but you Node it a lot less, which is kinda kinda neat that. You know? And and and, like, that should be coming to CSS pretty soon anyways. Hopefully. And once we have, like, scoping and nesting and variables in CSS, like, we're gonna be in good shape. Yeah. Right.

So let's talk about reactivity.

Reactivity is is baked in. Right? Obviously, we mentioned that if you change a variable, the basic example is, let's say, in your script, in your template tag, you say, let count is equal to 0. And then later on, you either do some sort of a function or you call count is equal to count plus 1.

It automatically updates in the template without you having to sell anything to update, without you having to do a set state, without you having to do a use effect, without you having to do anything. Right? Yeah. Just updates.

And that that's actually funny. It's that, like, same sort of data binding that we're well, it's not data binding, but it's the same sort of reactivity that made aspects of Angular Node so popular that everybody knows and loves. Yeah. And what's interesting too is they also have a reactive variable.

Now reactive variable is basically, you can define it just with a dollar sign colon. And, like, a reactive variable automatically will update anytime the variable that's used within it changes. So in this particular instance, if you have a reactive variable that you say is, like, double the count, and it's dollar sign Node double. Yeah. And that's equal to count plus 2. Anytime count changes, it just fires. Again, no use effect, no dependencies, none of that stuff. And same thing with statements, which is where it gets really interesting.

It's funny because when I teach JavaScript to beginners, this is how they think JavaScript works. You put a variable in a span, change the variable, the span should update. Node? Like, that's Right. That that makes so much sense. And then and then you get ESLint, like, Node. And then you get into React, and you say, you can't update a variable directly. That's a mutation, and you should never do that. And they were sitting there, like, well Wait. Wait. But why not? So, like, if you Sanity to update your variable, you must do it this very weird way.

Like, I understand that mutations are bad, but, like, why can't I just increment a variable and and have it be okay? Right? Like, that seems to be what this is.

Exactly. And then even when you get into, like, the reactive definitions where you're like, okay. Well, now I gotta do a use effect. I gotta wrap the whole thing. I gotta set the state in the use effect, and then I gotta watch the dependency to see if the dependency change. Like, this is like, oh, they're just it's all transparent. It's all right there. And the same thing goes for statements, which is such a huge thing because you can now do like, the the basic example they have is just a dollar sign colon console Scott log account. And console dot log count will only run when count has changed, not when the component refreshes or rerenders or whatever. It runs when count changed. And what's cool about this is the same thing works for if statements ESLint any sort of expression. So that's really neat. It opens up the possibilities for a lot of stuff that you would typically use use effect for, right, within React. It's just dollar sign, colon JS their shorthand for it. In addition, data binding, also as easy as Angular one made it, where you have an pnpm. And in your input, regardless of the type of input, regardless if it's just a div with content editable, you just say bind colon value equals and then the variable name, and then that propagates through to the variable every single time without you having to do anything, without you having to write a specific set state function, you know, to update a variable in a form.

Forms are obviously I mentioned this frequently, my least favorite thing in React, And, this just makes works working with forms very, very different, very easy, very nice. So that's reactivity. It's fantastic.

Very nice.

Next, talk about props.

Props, basically, the the same way that we know and love props from React exist in Svelte Wes you can pass a prop from one thing to another thing with some interesting additions to how props work.

To use a prop in a component, you need to export it. This JS, like, one of the weirdest things in Svelte in my mind, and it's not even that weird. So to use a prop within a component in the side of the script, you need to export it first.

And the idea there is is that the prop is a variable being defined within your component. And by exporting it, you're allowing the parent component to assign a value to it, if that makes sense. It's one of those things that when you first see it, you're like, oh, okay. This is weird. But you just do it and become second nature, and all of a sudden, it's no big deal. Wait. So say that again. I I just wanna totally understand that. In order to use a variable in where? In the child component. Oh, okay. You have to export it from that one instead of passing it down. Well, you do pass it down still. Oh, but you still have to explicitly export it. You still have to explicitly export it. Let me add something to the, Oh, okay. The show notes here Wes you you say, basically, within a parent component, you would import the child like normal. Then you use the child just like you would in React Wes you have a component, and then you have a prop JS equal to a value. Right? Well, then in that child component, you have to do export let the prop name, and then it actually lets you define a default there. Because the way Svelte thinks about it is the the prop essential essentially is defined in the child JS, like, a variable, and it's almost being passed up, which is very counterintuitive to how we think about these things. But you essentially have a value, and you're allowing it to be used, within the parent component and assign a value to a reactive props work, except for instead of needing to destructure a prop from a prop object coming in from a function, you just export it from the that that specific Oh, I see. That's it. Makes sense. Yeah. It makes sense. And it's one of those things when you see it in practice, you're a little bit like, it's a little different. But the moment you use it for any given time, it's it's not a big deal. In fact, the syntax is a little bit cleaner than destructuring something from props in my mind. Yeah. Yeah. It's true because it can just be its its own line.

If all of your code is laid out so explicitly like that, it's a great way to keep you sane like our sponsor, which is Sanity.

So I, funnily enough, just spent the entire morning working with Sanity because I am testing it out JS, a headless CMS that I'll use in an upcoming course. And I'm just kinda just kinda going in and and making my content types and, like like, I've I've used it a couple times before, but this this is I'm doing it all from scratch this time, and it was it's pretty cool.

So one thing I I really liked about it is when you do the Sanity in it, you can choose from a couple of different options.

And then when you have those options, you can also choose if you wanna fill them with a bunch of data. They Scott, like, a movie example and a blog example, and then you can run that puppy locally, or you can deploy it, and you can deploy, your back end up to send it's called Sanity Studio. So it's kinda interesting take at doing a headless CMS because I would say Sanity is a a service, but the actual admin UI for working with it is a React you can either host yourself or host it on Sanity, which is pretty nifty. And then, of course, they've got integrations for React and Vue and everything you'd expect. Probably Svelte actually would be kind of an interesting use case JS if you're trying to learn Svelte and Sapper and, maybe pick Sanity for your back end. Check it out at Sanity.

That's gonna get you double the free usage tier. Thanks so much to Standard Deep for sponsoring. Hey. Thank you. K. So let's get into it. We got template logic next, which is one of those things that, you know, has always been sort of a a PowerPoint in React as well. It's not the most clear thing because you have to do the ampersand ampersand, basically, conditionals to do everything. And then it's again, it's just JavaScript. So at the end of the day, it is clear enough. But No. I don't like it. I don't like it either. But,

you know, I'm trying to get the math here. Just give me an if statement. Yeah. Right. No. No. Wes there we can be sore about it. Why is there no if statements in JSX?

Yeah.

If we're being entirely honest, JSX really needs a JSX 2 that's like a template Node, which, like, that is much more templatty because I think the some of the things that are trying to be just too much straight up JavaScript. And once you're like, well, it needs to be a 100% straight up JavaScript, so, therefore, we can't do a lot of these things. I think some of that needs to get thrown out. But, yeah, you know, that's an uneducated perspective on the matter.

So template logic is the standard bracket pound if that you've seen in other things, maybe handlebars or something, pound if user ID. And then to exit, you do forward slash if to end something rather than, like, an pnpm if or something.

Each statements are the same way, so doing loops is much better than your Scott map stuff Wes you do pound each cat as kittens, and then you'd have the access to each cat as a kitten, or each cat as a pnpm, depending on how afraid you want to say this. Here's a template tag that I think is going to, blow your noggin a little bit. And this is the promise template tags, which allow you to await a promise within the template.

So you can say, oh, pound await, and then you have the promise itself.

And then you have a colon then where you then get access to the value, and then you have a colon catch. So, therefore, you can have essentially your states of a promise for you're waiting, oh, the the value is blank, and then, oh, there's a problem. You can have all of those directly in your template without having to do if error or whatever coming in from an a single wait statement. So you can access the promise directly in the template, which is just very nice.

That's cool. Sometimes you're in the middle of a template, and you say, okay. Well, I need to this is now a synchronous Node, so I have to go to the top of that template and pop a promise in there and then get the results or something like that. And then, oh, I have to have a loading Scott, so then you have to give yourself a new hook and things like that. So that is pretty nifty because, yeah, there's there's nothing in React template tags that allows you to show something if a promise has fired off but JS not yet resolved.

If that's the case, then you have to, like, set state. What ends up happening is you have to abstract it all into another function coming in from, like, a hook or or whatever.

And this is just how you get access to the promise itself, and it's that easy. So really nice.

Next JS events, which events are a big thing. Right? So events, we have button. It's in they use the word directive like you're used to with Angular colon click, and then your function gets passed in there. I found this sassy little note within the Svelte tutorial that I wanted to share with you because I thought this was some straight fire.

This is in the official Svelte, documentation. It says, in some frameworks, you may see recommendations to avoid inline event handlers for performance reasons, particularly inside loops. That advice doesn't apply to Svelte. The compiler always will always do the right thing, whichever you choose, which is it's so nice that they're like it's it's somewhat I would say that's it's very targeted and somewhat aggressive because people really get on that about react to micro performance optimizations Wes they're like, well, on the output function, you shouldn't have an error function here. You should do this. You should do that. Like, who cares? This is just literally who cares. You do the function, whatever. You don't worry about it. In addition to these directive, I thought this was a really neat thing. There's also directive modifiers, especially for the on click business here. I thought these directive modifiers were really neat. For instance, if we have a click event, right, and we warp it to prevent default or maybe it's a form submit and you wanted to prevent default, you do on colon click, and then you do a vertical pipe and then prevent to default. And it just automatically prevents default for you. And there's a whole bunch of these event modifiers. This isn't the only one. There's other ones, like, once that it's only going to run once. Let me see if I can find these other ones really quick here. The other event modifiers.

Yeah. So let me tell you Wes I I use that all the time is I'll often have a function that goes off and does something. And then I'll either need to modify that function to do the prevent default even though the, like, the handling of the event is not really part of the business logic of the function, or you have to do, like, an inline function or create a separate function that just prevents default and then passes along the piece of information over to the the handler or the function that you're running. So if that's the only thing you need to do, then you often find yourselves modifying or creating a secondary function for it. And this just does it for you, which is pretty nifty.

Right. So you can put all these things in line, and then you have the the modifiers. Right? So, like, the modifiers that are available to you are prevent default, stop propagation, passive capture, once, and self.

And so I think these are and they they can even be chained. So you can do it once and prevent default. It's so cool. It's nice. I would love to use some of that stuff sometimes.

I just think about how much nicer some aspects of the things that I'm doing to work around the platform if they didn't exist. Right? Totally.

So let's talk about the baked in goodies. Like, Svelte baked you a cake. Right? And then they were like, you know what? We when you cut open this cake, there's gonna be some melted sprinkles in there. We made you a birthday cake. Like, this is, what is that funfetti? We made you a funfetti cake. So there's all sorts of goodies that have been baked in. And by that, I mean, there's, like, animation.

So the animation stuff within Svelte that's baked in is as good as animation libraries and other platforms.

They've thought about everything here because within Svelte Motion, you can get, tween or spring animations out of the box by default built in to Svelte, tweened or spring animations.

You can get transitions that are super duper easy warp you can just define it in or out.

So in addition to being able to write your own, obviously, they've built a ton of baked in transitions. If you wanna do cross fade, you wanna do a fade, a fly, a slide, a scale, a draw. You just wanna drop something like that in there. It's as easy as importing it and assigning it onto a component by saying in, out, or transition, colon, fade. So if you were to say in, colon, fade, it's just gonna fade when the component comes in, and it does so based on, you know, default parameters that you can modify.

And that works even with mounting and unmounting with inside of a template. So if you have, like, an if statement and you wrap that around a div transition, colon Node, that div JS gonna fade in and out. No ifs, ands, or buts. That, to me, is the slickest version of any sort of animation library on any of these platforms. There's even a flip animation version where you can do flip animations built into Svelte.

So dope. It's so cool.

I love it. This is the, jQuery of new generation of frameworks because jQuery just had fade in, fade out.

Exactly. It's the jQuery with no bloat. And here is my favorite part about this animation stuff. Guess what comes in by by default? Animating height 0 to height auto comes in. No problem. Oh.

Yeah. I I've been doing that That's amazing. Level upside or, I mean, on the Scott Tolinski site right Node. I'm animating hide that one. It's like, oh, this is okay. Cool.

So also baked in, and you can bind quickly and Sanity.

You can bind dimensions. So if you wanted to get a divs dimensions, you can just do bind colon client width equals a value, bind colon client height, or any of those things given to you from the dimensions. And that will spit back out into a variable of which you can do lots of cool stuff within, including using it throughout elsewhere in your component. Maybe you wanna do some reactivity in showing your or showing or hiding your components based on browser width or something like that. There's a lot there.

So this is really cool because It's really cool. This is I don't know. It's like a prop on on a component or on an element, and it gives you a variable of the width and the height. So if this was React, we would need to create a custom hook.

Inside that hook, you would need to create Scott that would hold the value. And then you'd also need to use effect, which inside would listen for a resize, which resize observer.

You probably have to go polyfill that. So for Safari You'd have to use a ref as well. Yeah. And then when it changes, you'd have to set state. Oh, yeah. You need a ref to track the actual thing, and then finally return it from your custom hook. And then your custom hook will give you a variable. And then you can go ahead and display it. So

so much easier in, Svelte land. And it's something that you would, like, wanna do, you know, if it was that easy. Sometimes I, like, look at this stuff, and I'm like, oh, I don't wanna implement my own. Use measure hook, whatever, which I do have. But, like, it'd be nice if you could just bind the value of the dimensions to a variable at one point in, like, a one liner. That sounds pretty dope. Right? Yeah. There's also life cycle methods if you need on. Just I I don't know the all of them off the top of my head, but it's the this you know, the what what you could be expected on mount, those kind of things. Okay. Here are the life cycle methods. On mount before update, after update, on destroy. And then there's a one called tick, which is kind of interesting. A tick returns a promise that resolves once any pending state changes have been applied.

So it's, like, really granular control if you want to use tick.

I have not used Tic personally, but I'd be interested to see some more advanced use cases that use it. So either way, those life cycle stuff exists within Svelte Node and easy. Same sort of the stuff you'd apply or expected for them to exist. There's also advanced state because if you think about it, local states all being done via reactive variables. But global state can be done via what's called stores, which are also built into Svelte. And, again, you don't ship them if you don't use them. So, man, so cool.

So advanced state with stores, basically, a store is an object that'll, with a subscribe method that allows you to basically update or write to it. There's even some fancy subscribe stuff going on too. But either way, to create a global store, you just import writable from Svelte store.

Then you export the variable as export const count is equal to writable and then the default value. And then anytime you need to update it, just like you kind of would with set state, you do count Scott update and then the new value. And then throughout your entire application, it's now update. So congratulations.

It's pretty dope.

That's great. No more pontificating about, you know, which abstraction of which state library is gonna do it for you.

And if you want to stop pontificating about the best way to to do your jam stack, well, then you're just gonna on head over to stackbit.com.

Alright. We are sponsored today by Stackbit. They sponsored, a whole bunch last Yarn. And I know a lot of you tried it out, and they got some new things coming down the pipe for you to try out. So Stackbit offers developer tools that enable things like ESLint and live editing, live previews, content changing, sharing real time previews of your Jamstack website, which is pretty nifty. So you sign in. You select your static site generator, whether that's, Hugo or Gatsby, whatever. You select your CMS, whether that's Sanity. Hey. There's our other sponsor for today, Contentful Forestry, things like that, Datto CMS.

And this will give you the ability to do things like live previews, sharing real time content editing with somebody else, things like that, pretty nifty. You wanna try and check it out, head on over to stackbit.com and try it out with your current stack Vercel select Node of their little starters that they have just to to try it out yourself.

Again, that's Stackbit.com.

Thanks so much to Stackbit for sponsoring.

One more note we have here is last time, when Stackbit sponsored, we talked about their, their site builder that they had Wes, it'll allow you to connect everything up Vercel.

That is definitely still there, and they've got some really neat stuff rolling out, with both Gatsby and Next. Js in the next couple months. So stay tuned for that. Thanks so much to Stackbit for sponsoring.

Cool.

So let's keep this moving here, moving and grooving.

So we talked about these baked in goodies. In addition to, that stuff, we have the stores, the life cycle, whatever. There's also the concept of slots. Now I don't know if React doesn't really have slots. It kind of does with the way they do children, but slots are a concept of, like, basically, here is some content. It's basically a placeholder for a component or another template to come in is the best way I can describe this. It's used both within Vue as well as Svelte. So if you are used to Vue, you'll be happy that a slot exists. Let me see.

The concept does exist in React, so I don't wanna it's just different. The so, basically, here's how the Svelte documentation describes it.

Components can have child content at the same way elements can. The content is exposed to the child component using the slot element. So instead of using children, it's basically slot. Right? Now the cool thing about slot is that you can give them names. So there's multiple slots. Right? You could have a slot that's a footer or a slot that's a header, and then you could pass in custom headers or footers based on the name.

And so slots are an interesting thing. I don't use them a ton. I use them when I have to, but I'm it's one of those ones since I'm not used to them specifically because I haven't been doing a lot of Vue that I don't probably utilize them the same way they could. It also includes the concept of, like, adding things to your, like, the DOM context essentially via ways that you might expect within like, we needed to do so within React Helmet before. Right? To add a title to a web page, the easiest way to do it would be to use React Helmet. To add a title in Svelte, you just wrap a title in Svelte colon head. And then inside of there, you can add HTML. So, basically, all of the functionality that you want that you're used to with the React Helmet is available to you within just core Svelte. You also have the options to, you know, do things on the window or the body. So you could do Svelte colon body or Svelte colon window and even throw on event handlers and stuff on there. Or you can bind properties.

You can do all sorts of stuff. So if you wanted to get the window scroll y variable, you could do svelte colon window, bind colon scroll y is equal to the value of y. And then all of a sudden, y is automatically,

binding the value the scroll value to a variable that you can use to do whatever you want with. Throw it in global state. Yeah. Okay. There's all sorts of cool stuff. I'm just looking at the example of Svelte Slots just to sort of understand what it is. And, like, I think probably the simplest example you can have is if you have a layout. Yeah. And that layout then needs children, then you can pass them in, but you can you can pass them in via names. So that's not that all that different than just, like, children Scott footer or or children dot whatever, or you can pass them in via props. So that's pretty nifty. I like how slot is the actual component itself, though, instead of just curly bracket children.

Yeah. And it again, those of you who have used Vue, that's gonna feel very, very normal to you.

So let's talk about Sapper for the time left that we have. What is Sapper? Sapper is sort of their app platform. It's their Next JS equivalent Wes you get server side rendering out of the box. You get routing based on folders, so it has the same folder based route system. I found Sappers to be a little bit more elegant in the execution of it.

They do have, like, really nice basic server side routing that, like, here's a here's a good example. You have your index Scott Svelte file that would be inside of a a route folder. Right? Like in Next JS. Yeah. And then if you wanted to do a server side code for that, it's just instead of a Scott Svelte file, it's a dot JS file.

That's it. And then all of a sudden, you have an export function.

Export function get under, you know, Wes, whatever. It allows you to access the route express like routes just basically via having a JavaScript file of the same name in that folder.

So that makes it, like, really super easy. You don't have to think too much about it.

For instance, I have an index dot Node dot JS file that typically just goes and grabs all of the markdown files from a folder and then publishes them as a JSON file. And then in my index Scott Svelte file, what I do is I read that data just by doing a basic fetch command for that JSON file that now exists at that route.

And, it just exists. So then you can access it really easily. This this code might be a little bit more visual if you look at the Scott Tolinski repo for the my website. I think it's like Scott 2020 or something. I will, link this in the show Node, but it JS, really simp super simple code to get, like, basic server side routing, pull from a a folder or whatever. I even abstracted it out into a couple of folders. 1 JS used data, and one's like published data or something. And they're just 2 abstracted functions that make it so I don't have to do anything. It just point it to a folder, and then all of a sudden, it goes off and gets all the markdown files.

Beautiful. That's really neat. Yeah. In addition, Sapper also give to static export, aka, static site generation for free.

And that's what I'm using on, Scott Tolinski.

Basically, we we have a sapper site that's being hosted on Netlify, and I just told Netlify to export the site on build that builds it. You get all the preloading goody stuff that you get within other platforms. You don't get the fancy image stuff that you get with Gatsby, but that's really it. You get so much good stuff in terms of server side or static things if you need it. It's basically a full on Next. Js platform in those sort of ways, so much to the point that one of the first things in their site is comparisons to Next. Js.

They do note the differences in, and there's a there there's a healthy healthy dose of snark and sass within these documentations in a way that I kind of like. This is really funny. In the comparisons with Next. Js section of Sapper's documentation, the very first bullet point in the comparison is Sapper is powered by Svelte, so it's faster and your apps are smaller.

That's great. It's coming right out and saying it. So, pretty neat. And for the most oh, here's here's the thing I really like about Sapper that I really hate about Next. Js. I'm gonna tell you that right now. One of my least favorite features about Next. Js is that they decided to handle links differently than Scott only HTML or everything else in React. They were just like, oh, we're gonna throw a link, but you gotta put an anchor inside of there. Why? I don't know. We just wanted to make your life different than every other routing platform. Right? With Sapper, to do routing, you only use anchor tags. It's just straight up HTML. You just use an anchor tag. And since the the everything's compiled away via the the platform, it just takes care of it. You don't even have to you don't have to bring in a link. You don't have to think about that link special syntax.

You just use an anchor tag. Just HTML. Really cool. Wow. That's pretty neat. I'm I'm glad that we did this episode because

it really gives a rundown of how simple and clean it is. It is. I think the more people use it, the more they'll be blown away by all these things that a lot of times people say, well, it's not good for big projects or what. I don't necessarily think that's the case. I haven't found anything that would let me not do something in Svelte that I could do in React. For the most part, things just seem easier, less boilerplate y. And a lot of these sort of debates Yeah. And things that we we sort of argue over in the React community are the best way to get, you know, data from your API, render props and mix ins, Wes all those just go away. All of those conversations in that sort of shuffling

of the cards of your code, it just goes away, and I like that. I would like to see, like, a a large website built in this. I'm sure there are some that are out there already. I just like to see what they are and what the pain points are because, like, I see that as well with, like, sometimes even we talk about these things and then like Gatsby, and then you actually go ahead and build a larger site in it and you start to feel the creaks of it or Scott necessarily creaks, but just like trade offs in in certain parts of of the thing. So I'd love to hear if anyone out there has built something and and run into an issue here or there, whether that's build times or or something like that.

Yeah. And I I know Swyx did a really great post about he's like sort of I think he's augmenting Sapper to write his own static generation platform for Sapper.

I think I'm not entirely positive of that if he's still working on that or whatever.

But from what I understood, it was Yeah. It was just saying, oh, he found a way that he could improve Zapper's build times by doing it a little bit differently if you are only focusing on static generation.

But, yeah, there's a lot of cool stuff out there, and I think it's just, it's getting cooler.

I'm actually, I think I'm gonna be doing a free course on on Meteor and Svelte because Meteor is the, like, king of back end reactivity.

Right? It's so easy to do back end reactivity.

And RDB, who I I'm sorry, r d b. I do not know your name because it's listed as literally RDB everywhere.

His r his website is r d b Scott name.

His GitHub is r d b. His Meteor thing is r d b. So either way, he did a a package on Svelte Meteor data that allows you to connect Meteor's reactivity to Svelte's reactivity in, like, really no time at all JS pretty, really super cool. And you can use, like, Meteor subscribe statements within the templates using the promise template tags. So you could do await, subscribe for this data, and then loading. And then when that data is complete, it just comes in immediately. And since it's subscribed, it's always gonna be reactive from the database. And user accounts and stuff, oh my gosh. I'm really excited about this. So I'll probably be doing a free series on that just because I'm excited about it and wanna share share some of that. Beautiful.

Should we move into some sick pics or anything else to share about Strapi and Sapper?

Node. That's it.

This has been the Svelte and Sapper show brought to you by Sanity and Stackbit

and the letter s.

And the sleepy,

super Sleepy Scott Tolinski.

So sick picks. Do you have a sick pick?

I do. I am going to sick pick a feature of Firefox, and this is the containers feature in Firefox. And this has I didn't really totally understand it, and I've been using it a lot lately, and it's way better than Chrome's profiles.

So Chrome profile will allow you to open up a couple instances of Chrome. You can be logged ESLint like, you can have, like, all of your settings for for Node domain name and all of your settings for another domain name, things like that. And Firefox container takes it a little bit further and allows you to create kind of different you can create work. You can create a banking. You can create, I have a Facebook container. And what it does is it allows you to be logged in to that website in that container. And then your when you're visiting other websites, they have don't have access to you being logged ESLint to Facebook because, you're not logged in on the the same it's it's it's done in a container. Right? And, like, that's great for privacy. That's great for banking and and and all that stuff. But what I find it super helpful is just being logged in to 2 different things at one time. So I have my own personal YouTube account, and then I was doing some work on, like, my wife's YouTube account or or a couple other ones. And if I just have a container for that one, I can have all the cookies and and everything's logged into that, and I don't have to log out and log in or or use Google's awful account switcher, which never seems to work properly for me. And it's just been it's just been real good for both privacy as well as having it. It's not like a separate browser. It's just a tab. And the tab is just colored in whatever one you're in. So Facebook, I turned to blue. And anytime I'm on Instagram or Facebook, it's its own little container, and you can't reach outside of it.

Sick.

It's a sick pick.

Sick pick. Sick pick. My sick pick is going to be something kind of unique and interesting here. I recently purchased this solar fountain pump. It gives you a solar panel and a water pump and a little fountain, and you put it in well, it could be, like, maybe a birdbath or something, and it's always just gonna shoot water up in the air. Let me tell you. It shoots water like 2 and a half feet in the air. So, the pump is actually surprisingly powerful. And here's what I'm doing. I found this neat little community of hackers, and maybe you may be considering them to be hackers, within the customer images and reviews of this product, talking about the various creative ways that they've used this miniature fountain because it is basically a lot of little pieces.

You get essentially a solar powered water pump out of it. And the water pump granted is not super powerful. It's not going to be the pump that powers your entire backyard, but it is solar powered, so you can put it literally anywhere if you want some trickle water. So what I've gone ahead is I've ordered some just standard straight up clear tubing to attach to the end of this pump.

And then I'm gonna get some landscaping rocks, and I'm gonna build a full custom fountain out of the $60 solar pump. And it's for the cost and for the ease of use, it seems pretty darn amazing to me because, like, if you wanted to do any sort of fountain in the past, you've gotta plug it into something or you gotta buy a premade solar powered one. But I have this, like, little custom idea for little pool and whatever, and this pump is gonna make it so easy. And just to look at some of the stuff people have made with this is pretty impressive. The solar panel is great. You just plug it in. It's it it holds a charge with batteries. So, yeah, we'll see. What I did is I took one of my dishes, one of the large dishes, and I filled it up with water. And then I just put it in the yard, and I've been testing solar positions, just to test out positions to where the the panel's going to get a good amount of light and everything.

And so far, it's been running for, like Yeah. 4 days now nonstop.

Fountain hasn't stopped. So, needless to say, I'm pretty impressed with it. We'll see what happens when I get my tubing and get some landscape rocks eventually and,

build out a a little fountain for this thing. There's so much cool little like, you have tons of it. I got these little solar lights. There's so much cool little solar stuff on Amazon.

We've got these little, like, step lights. I've talked about them before at our cottage because when you're coming up from the fire, there's and you forgot to turn the outside light on. It just illuminates where the steps Yarn. And Node of them was starting to get flaky, and I opened it up. And I was surprised that, like, there's a little rechargeable battery in there, which is replaceable.

It was supposed to be for outdoor, and it started to get rusty. So I'm not sure how good it was, but, it was just it was pretty it it Wes sitting in a snowbank for 6 months, so that probably has something to do with it it not draining or whatever. But I I just got a little, tinfoil and some vinegar and scratched off the leads, and it's working again. And I was I I opened it up, and I was like, I fully expected this to be a lot more low tech than it actually was aside for for the price I paid. Yeah. The price is really killer.

So big fan of this, all of your, solar sick pics. Yeah. I know. I recently got some, like, of those little, like, lanterns. They look like little lanterns for the Yarn. And this is insane. It's, like, $24 for 4 of them or something. You just plop them down throughout the Yarn, and and oh, wow. This is like pro landscaping. I'm turning into pro landscaper man over here. Just wait till my thumb comes in.

Oh, man.

Let me recommend to you right now. Go down the rabbit hole of lawn care YouTube channels. Dude. Oh. Dude. What a satisfying I'm well past that rabbit hole. That is a definite yes.

Dude, my grass looks so good right now. I'm full on adult.

Oh, man. It's still the snow is still melting up up here, so

couple more months before we have green grass. Yeah. We got long green grass over here. I've been taking care of it. Fertilized it, all that stuff. So, you know me.

Awesome. All right. Well, shameless plugs. I'm going to shamelessly plug my new website again, Wes.

Check it out. It's a super fast new brand new website, built in Gatsby.

You can click over to the courses button and see all of the different courses that I have paid in free.

Cool. The, I'm going to sick pick my YouTube channel, which is level up tutorials on YouTube. I'm gonna be doing a free course on Svelte and, Meteor. So it's gonna be fun. It's gonna be free. It's gonna be Sanity, and,

yeah, just check it out. Alright. Thanks for tuning in, and we will catch you on Wednesday.

Peace.

Peace.

Head on over to syntax.fm for a full archive of all of our shows, and don't forget to subscribe in your podcast player or drop a review if you like this show.