862: Svelte 5 Is Here!

Is Svelte becoming React? Scott and Wes explore the exciting updates in Svelte 5, including Runes, Snippets, odd font choices, and performance benchmarks, while discussing custom event updates, migration tips, and potential performance gains. Show Notes 00:00 Welcome to Syntax! Scott’s Svelte5 Overview. 01:27 Brought to you by Sentry.io. 02:06 What’s new in Svelte 5? 02:13 Runes. 04:47 $state 07:00 $state.snapshot 11:47 $derived 12:46 $derived.by 15:41 $effect 17:24 $effect.pre 18:05 $effect use cases. 22:20 $props 24:57 Binding state. 27:15 $inspect vsode-wrap-svelte. 28:46 $inspect(…).with 30:42 Snippets. 34:22 Events now onclick instead of on:click. 36:09 Custom events now just props instead of createEventDispatcher. 36:31 Serif Font on website. 40:01 Performance. Benchmarks Doc. Benjamin McCann Tweet. 46:41 Is Svelte becoming React? 49:21 Migration. 51:41 What’s next and wish list for Svelte. 57:12 Sick Picks & Shameless Plugs. Sick Picks Scott: Dragon Quest 3. Wes: Dresscode.dev. Shameless Plugs Scott: Syntax on YouTube. Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads Wes: X Instagram Tiktok LinkedIn Threads Scott: X Instagram Tiktok LinkedIn Threads Randy: X Instagram YouTube Threads

Speaker names marked ? are inferred from speaking time and the show’s known hosts — they are not voice-verified.

• 0:00Wes Bos?

  Welcome to Syntax. Today, we got a show for you on Svelte 5. Svelte 5 has been out for how long, Scott?

• 0:07Scott Tolinski?

  Couple of months now. Yeah, yeah, maybe, maybe by the time you're listening to this, a couple of months, yeah.

• 0:13Wes Bos?

  Okay, and there is a couple new primitives, couple new ways to sort of approach state and effects and whatnot, and some kind of new features. And Scott, you did a video on the Syntax YouTube channel, right? And CJ's done a couple?

• 0:31Scott Tolinski?

  Yeah, I did a, actually, you know, it's funny, it's my first long-form tutorial since LevelUp tutorials became Syntax on YouTube. And yeah, it's a, it's like a two and a half hour long tutorial on, you know, getting up and running with Svelte 5, especially if you've never used Svelte, or you're coming from React. I do a lot of like, in React, you do it like this. So yeah, it's a good base understanding of all of these APIs. And I've been working in Svelte 5 since, man, the first alpha, the first time I could get my hands on it, since I'm a Svelte ambassador. I've been in the Discords, and I've been giving this stuff a go and testing the new APIs out as they've come, pretty much as they come. So yeah.

• 1:15Wes Bos?

  It's, it's pretty nifty. I'm a big fan of, of how all this works. And we thought, let's do like an audio episode, running through the different features of, of what Svelte 5 has. But let's talk about Sentry. If you are upgrading to Svelte 5, like we did on the Syntax website, you're probably, or maybe, gonna hit some issues where you break something, especially as a pretty, pretty big website, right? And Sentry is going to be there to figure out when those things go awry, whether it's a database query that has, has run away on you, or whether it's a syntax error that when somebody clicks a button, it breaks, or rage clicks, things,

• 1:57Wes Bos?

  things like that. So check it out for your website. You definitely want this before things go wrong, not after. Sentry.io/Syntax.

• 2:06Scott Tolinski?

  Yeah, cool. Yeah, let's get into it, first and foremost. Svelte 5. What is new? I think the headline feature for Svelte 5 in terms of what people may have seen the most is the runes, R U N E S, runes, which the word runes here is is basically just referring to the fact that Svelte is using a symbol, which is the dollar sign, to indicate some bit of unique functionality. So anytime you see the dollar sign before a word, you know that that is some Svelte-specific code here, whether that is state or props or even effects or things like that.

• 2:51Wes Bos?

  I didn't know that.

• 2:52Scott Tolinski?

  Yeah, yeah. And it's funny because a rune is like, I believe it's a Norse thing, a mythology.

• 2:58Wes Bos?

  A mark or letter of mysterious or magic significance, I would say. Nah, maybe a little bit of both?

• 3:07Scott Tolinski?

  Yeah, yeah, maybe a little bit of both. And it's definitely, you know, there to give you an indication that something is happening here. And part of the thing that comes about with these runes, and we'll talk about each of them individually here, is that specifically in Svelte previous versions, reactivity, variables, state, those types of things were done in a couple of ways. Inside of Svelte components, any variable defined in the past was a reactive variable, no matter what you did. That's inside of a component. Now, outside of a component, you have to use a writable or readable.

• 3:50Scott Tolinski?

  You have to use one of these reactive state features.

• 3:53Wes Bos?

  Like a data store, right?

• 3:54Scott Tolinski?

  Correct. Yeah. And so because of that, there was always this disconnect of how you did state within a component versus potentially how you did it outside of a component. And it led to maybe some confusion about what you used when and where. And so the Svelte team's idea sometimes of, and I don't want to say simplicity, but the idea of being able to quickly read and parse things is that

• 4:20Scott Tolinski?

  You should have like one way of doing things, right? And so the fact that there's these multiple ways of doing things here, I think, I don't know for certain here. I don't want to speak for them, but I think that in the past has been something that they they've wanted to move away from. Right? Specifically, even with like Svelte kit file based routing. They've they felt like because the routing, there were so many different ways to do routing with the file based routing. Once they stuck to only folders or routes, then that was like, that is the only way to do it. So now within Svelte 5, we have the dollar sign state. And that is the way that you create reactive state within Svelte 5. So now, when you create a normal variable inside of a Svelte component, it's not reactive.

• 5:03Scott Tolinski?

  Now, I think this this change is controversial for a number of reasons. People really liked the simplicity of creating a variable and having that be reactive. I personally really liked it. I made a meme about it and posted that on Twitter. So the fact that that's gone, I think, upset some people. But in practice, creating a dollar sign state as a rune for reactive state, it just makes things more clear what's going on. And on top of that, I think, you know, this this topic will keep coming up, whether or not people are feeling like it's overly complex. But the state, when you have a state creation of a state, just like you did inside of Svelte 4 or Svelte 3, you still mutate that state.

• 5:47Scott Tolinski?

  We're not doing a set state, get state feature like you might have in React.

• 5:52Wes Bos?

  Yeah.

• 5:52Scott Tolinski?

  You create a variable with the state rune, that variable is reactive. You mutate it, it updates, right?

• 5:59Wes Bos?

  So all the way down too. So like, like if you have an object with six properties on it, and you want to update one of those properties on the object, you don't have to like make a copy of it and then update the one property and then call set state. Like, no, you just say like person dot age equals 70. And wherever that object has been used or that property's been used, and it just re-renders and updates it. So. I very much like that part of Svelte and I wasn't bummed to see that like, oh, now if you want to have reactive state, you have to declare it with the dollar sign state instead of simply just making a variable. Not a big deal. At least I don't think so.

• 6:42Scott Tolinski?

  Yes. And so when you create a state that way and you're accessing it, you're accessing a proxy of the state, which I also think can trip people up because let's say you're using state as a default value to create other state. You can't really do that because it's a proxy. So you have to use a different rune, which is I believe state dot snapshot. Let me even confirm that because this rune's name has changed a few times. That is the rough thing about, you know, getting onto something in an alpha is that the names of things change so frequently that like now I'm like, oh, what is the name? I believe it is state dot snapshot. So you use state dot snapshot to grab a snapshot of that state

• 7:23Scott Tolinski?

  at that moment instead of accessing the proxy itself. Proxy is another thing that I didn't use that much really before Svelte 5. You use them where you have to. But the fact that your state is all in a proxy now for me is like something that I've had to get used to.

• 7:40Wes Bos?

  Oh yeah, because if you, well, maybe answer this, if you console log an object that is state, it's not actually the object. It's what's called a proxy and in JavaScript, a proxy will intercept getters and setters on an object so that it can do the getting and setting for you with some logic, right? And if you want just the raw object of the raw data, which sometimes you want to like send that to an API or sometimes you want to throw it into something external, you can convert that. We had the same thing in MongoDB where like you have a document and document both has the data, but it also has all the methods on it for, for working with it, right? And sometimes you just want to convert that to.

• 8:25Wes Bos?

  Just a raw object, right? And there was like a to JSON method, very similar to this.

• 8:31Scott Tolinski?

  Yes. Yeah, so that is something you have to, you have to get used to a little bit. But for the most part, it makes it really nice. Now, you can also create reactive state in a more complex way where the, you can create a function that then contains runes. And one of those runes may be state, right? So you can create a function that creates an object that has these runes. But then you have to write getters and setters for that to be able to get and set the, the state within that object. Because of the getters and setters being like a lot of extra code, this Felt community is

• 9:10Scott Tolinski?

  kind of largely moving to class-based state for like deeply complex state objects, which I've, you know, when I initially posted this question to the syntax GitHub discussions, like, should we use classes or functions for this, for state? CJ was initially like, don't use classes. But when I showed him the side by side, here's what it looks like. He was like, I know what, yeah, class is way better. It's less code, it feels nice, it works really well.

• 9:40Wes Bos?

  More self-contained, yeah.

• 9:41Scott Tolinski?

  Yeah.

• 9:41Wes Bos?

  I, I like the class syntax quite a bit for that, especially when you have different getters, setters. And, and maybe we should explain like, like, why would you want to, to build something that has its own getters and setters? And often the case with that is you want to validate data before it's being set. A simple example might be somebody sends a, a string and you want to convert that to a number, right? It's a nice API to be able to just simply set a string and you can parse it out to a number and then actually set it. Or you might want to log all of the changes internally, you know? Like, at this time, you, you changed this value from six to seven. And then 30 minutes later, you changed it from seven to eight.

• 10:25Wes Bos?

  You, you could do that all. In a state with getters and setters.

• 10:31Scott Tolinski?

  Yeah, and a lot of times, you know, I think about like the audio player on the syntax site. There's a lot of stuff in there and you want to have specific methods to, you know, when I click, you know, player dot play with an MP3, a lot of stuff needs to happen. And it's nice to encapsulate all of that inside of some kind of like state object where that that state object or class is keeping track of all of the things and accessing the instance of this this state itself.

• 10:58Wes Bos?

  Or even like, like something like a player dot current time equals 36 seconds.

• 11:04Scott Tolinski?

  Totally.

• 11:05Wes Bos?

  Then you could say, oh, well, I need to do several things. Maybe we have analytics that the user jumped ahead. Maybe we want to update some UI. Like there's, there's several things that might want to happen when you do that. And it's nice to just keep the simple, this is just a JavaScript object and I'm updating properties. And all the logic of what happens is is contained inside of that store. Is it called a store or now is it just called a state?

• 11:33Scott Tolinski?

  And people call it a store. I think, I think that's just kind of a generic term. It's not specifically a store in their documentation, but you know, I think anything that stores data, you could consider a store. Another new rune here for state specifically is called derived. Now deriving state is a concept that many people are familiar. In Vue, I believe it's called computed state. But basically the idea of a derived state is that you have state that the value is dependent on another state value. So let's say you have a shopping cart full of products, they have prices and that is in state, right? You add something, that shopping cart changes.

• 12:16Scott Tolinski?

  The derived state might be the total or maybe even like subtotal or those things. Where what you're actually doing is deriving the one state value based on the other one. When one changes, this one also changes. And, and that's what you use derive for. When, when A changes, B should also change. And a lot of people might want to do this in like. In effect, right? Or like in React, like a use effect. When this dependency changes, do this. But in this, you can just specifically use the derived to do that. If you need more complex functionality, like more than just a simple expression, there is derived dot by, which takes a function and inside of that function, you can do your advanced things like a reduce of all of the things

• 12:59Scott Tolinski?

  inside of your shopping cart to get that value to then keep that value to be reactive. So derived and derived by are two runes that I think they have been taking a little bit of getting used to for people because they'll often reach for effect. And so there's like been a common line from the Svelte team is like, hey, if you're reaching for effect, maybe think about can you use derived first before you go down that path?

• 13:23Wes Bos?

  Yeah, if there's like a saying is don't store what you can calculate. And that's kind of comes from like the database community where like if you have somebody's first name and you have somebody's last name in two columns, don't make a third column called full name. Because then when somebody updates their name, now you're playing hot potato trying to update two different spots. So just store what you need and then derive what you you want from from the rest of that. And that's not always the the best use case for for databases. Sometimes it does make sense to simply just store both pieces because it's faster to query.

• 14:02Wes Bos?

  But in the case of a reactive application, it often makes sense to simply just store the pieces you need, like prices, and then derive what it is you need, like like a total added up entirely.

• 14:17Scott Tolinski?

  Yeah, yeah. And specifically, you know, one of the the big use cases to, we'll talk about effects in just a second. But if you're if you're trying to update a state value inside of an effect, that is like a a big red flag that you should probably be using derive.

• 14:33Wes Bos?

  Yes. Yeah, you don't want to be maintaining two separate pieces of state and having to remember. Like, so I I updated Adam Argles gradient dot style. This is the best website in the world for generating CSS gradients, especially with all the new features that we have in CSS color and radial gradients and Kona gradients. And it was on like an old version of Svelte and Svelte Kit. And I had

• 15:04Wes Bos?

  I upgraded the whole thing and it actually, the upgrade thing pointed out some issues where there was a function that returned a value. So it was like, but it was not a pure function, meaning it was going outside and also updating an external store. I think it was like the color picker. And then what had happened is there was two spots in the application that were holding the current color and they had to be kept in sync whenever you did it. And like that was, it was causing issues, right? So that's a perfect use case for, for a drive. You should not have that information stored into spots.

• 15:41Scott Tolinski?

  Totally. Yeah. And let's get into effect here. Now, effect is essentially the same as what you would have use effect in React in a, in a broad sense. Where basically this runs when things change, right? The difference between React and Svelte in many, many ways, not just this way, is that because Svelte is a compiler, it can understand your code in a different way, right? So because Svelte is a compiler, you can use a, an effect and the effect will automatically track what's inside of your effect. And it knows that if these things change, then this needs to rerun.

• 16:22Scott Tolinski?

  That doesn't, so it kind of inverts the, the, the React model, right? Where the React model is, I need to tell you explicitly which things we're tracking. Where Svelte says, we're tracking every reactive variable inside of here. And there is an option to not track specific variables if you want to untrack things. But for the most part, I find myself not really needing that that often. And for the, you know, even with, with React, people say not to use use effect that much. In effect is probably the same way. Now, there's times when you do need to use effect. When something changes, you need your application to react in that way. You use effect. So dollar sign effect is just takes a function and the return of that function is the cleanup.

• 17:07Scott Tolinski?

  So it runs when the components destroy.

• 17:09Wes Bos?

  Yeah.

• 17:10Scott Tolinski?

  And just like React land, this replaces for the most part, the on mount, on destroy lifecycle methods. And we move to just this effect where effect will run, you know, on mount and on destroy. Now, there's also this effect dot pre.

• 17:28Scott Tolinski?

  Now, effect pre, it says you may need to run code before the DOM updates and then you can use effect dot pre. Otherwise, the DOM updates, then effect runs, right? And again, I think this is like pretty familiar with how people use this stuff. I do use effect dot pre sometimes if I'm like building a like an auth guard system, right? Like when my component's loading, I want to check the state of authentication. I don't want the DOM to render. I don't want even the DOM to even touch that. If it hits that effect, I want it to check to see the authentication state before it does anything. And so that's what I would use auth dot or effect dot pre for.

• 18:05Wes Bos?

  Some use cases for when you might want to use an effect is a what we call them side effects in programming, meaning that you need to go off and do something elsewhere. So for example, if you need to write to Canvas when a value changes, in the past, I've done, if you need to update the title tag of the browser, you could use an effect, although most, most things now have title tags built in. If you need to send stats off to a third-party API, either when something loads or when something changes. So for example, if you're watching a course and the current time changes,

• 18:50Wes Bos?

  you may want to sync that data to an external service or API that tracks where you are in that specific video. And if that's the case, I would probably listen for changes on that data, which is like video dot current time, that might be a store. And then every single time that changes, it runs that effect and you can put a fetch request in there or something like that, which would go off and, and update the external API.

• 19:19Scott Tolinski?

  Yeah. What's interesting too, Wes, is that you can do like nested effects, which man, there's, let me tell you, there's some like weird things in effect that I truly do not understand. And maybe it's just I haven't had the use case for them, like having a nested effect. Or another one is effect dot tracking. Let me read you effect dot tracking, which I've, I cannot tell you how many times I've read the docs, people explain this to me, code, I've done it all. And I still don't get it. For some reason, it's, I have a mental block with this one. I, it's like, remember when you, like Redux first came out, I was just like, I don't, I don't get any of this until I like really got it. So I'm sure it's like, something I just need to hit before it makes any sense to me. But effect dot tracking is

• 20:02Scott Tolinski?

  a rune that tells you whether or not the code is running inside of a tracking context. And their demo just shows running effect dot tracking outside of an effect and then returns false. Running effect dot tracking inside of an effect returns true. Okay, sure. I, yeah, I need to spend some time with this one. Because I'm sure there's a valid use case for it. But

• 20:26Wes Bos?

  Yeah, hold on, let me, let me do a quick read of it. Oh, I see. I, I, I see. The idea here is that if it is being tracked, meaning that like, will this ever rerun?

• 20:41Scott Tolinski?

  Will it ever rerun?

• 20:42Wes Bos?

  Like, if you put it just inside the script tag at the top of a spell tag thing, that only runs once when the component is, is parsed, right? But if it's inside of, either inside of a template, or if it's inside of an actual effect, then you know that that code is being tracked for changes and may rerun at a certain point. So why would you need that? That is

• 21:13Wes Bos?

  That is a great question.

• 21:14Scott Tolinski?

  I'm too dumb for this.

• 21:15Wes Bos?

  I also do not know.

• 21:17Scott Tolinski?

  Or for this, I just called it a hook. I'm so sorry, Svelte folks. This is

• 21:20Wes Bos?

  Yeah.

• 21:20Scott Tolinski?

  This Svelte nightmare is referring to these things as hooks. No, I'm too dumb for this room.

• 21:25Wes Bos?

  I think a lot of these things are like, if you are building an app absolutely from scratch with Svelte and you're doing absolutely everything the Svelte way, then you're not gonna, you're not gonna hit these things. But like, actual applications are, oh, we have this third-party charting library that works in a certain way. And, and when you're trying to like, cross that bridge from declarative code that is Svelte to imperative code, uh, which is a lot of like JavaScript libraries that you may have. Sometimes there's like oddities and you, and you need to do things imperatively inside of, inside of Svelte. There's all these little escape patches and I'm assuming that this is one of them.

• 22:09Scott Tolinski?

  Yeah, yeah, for sure. Um, there's, there's a number of other little things like effect dot root or whatever. But basically what they say is effect is escape, is an escape hatch. And if you need it, you can go deeper with it. Now, another rune that there is now existing is props. Now, props in Svelte have long been one of those things. I think that trips up new people because in Svelte 4 and Svelte 3, you had to export a variable to have it be a prop. Which I think even felt weird for me. I think the explanation I got for it made it make more sense. But it still felt weird all doing that. And now, uh, that's gone now. Now we have a dollar sign props. And dollar sign props essentially returns an object of all of your props. So you can destructure your props from here.

• 22:54Scott Tolinski?

  Meaning that TypeScript for this has gotten both easier and maybe a little bit more verbose sometimes because the type inference was a little bit better with the export props, uh, because it could infer some types a little bit easier. But with dollar sign props, you now type it just like any normal TypeScript code, right? It's an object. You just type it as if it, you know, were an object. And so. Because this is an object, you can have default values for fallback values. You can define something as being optional with TypeScript. You can do spread props, really, or rest props. You know, when it's like spread or rest, I always mess that up. I don't know if you do, when you spread versus rest.

• 23:37Wes Bos?

  You, you spread into, into a function, or you spread into, like, basically, when you're putting something in

• 23:47Scott Tolinski?

  Into.

• 23:47Wes Bos?

  To, into an object, or an array, or into a function, that is a spread. But when you are collecting data, that is a rest.

• 23:55Scott Tolinski?

  Yes, correct. So that's cool. You can do that a lot easier now. There used to be some like weird dollar sign, dollar sign, rest props syntax that was just like, it felt like they truly just like, ah, we gotta do this somehow, you know? So now it makes way more sense, yeah.

• 24:11Wes Bos?

  This is nicer. You can, you can collect them all, right? Previously, you had to know ahead of time what they all were. In this, you can simply just use dollar sign dot props, which is helpful when you're doing like wrapper components that simply just need to pass down all of the props. I remember I had to use that double dollar sign somewhere on the syntax website. You just collect them all and then pass them along. It was, it was kind of weird. And the export thing always tripped me up too, because you were exporting, and then two lines later, if you can use it, but like,

• 24:43Scott Tolinski?

  Yeah.

• 24:43Wes Bos?

  I'm not, export is for files.

• 24:45Scott Tolinski?

  I know.

• 24:46Wes Bos?

  Not for different parts of the file.

• 24:49Scott Tolinski?

  It was one of those things that you just like, or like, I guess this is just how it is, right? Once you get used to it, you don't even see it anymore. But, yeah, so that's how you do props now. So the cool thing about state in Svelte, just like view and I believe Angular, I know Angular one at least, you could bind state to an input. Bind stating in general, you can bind state to a div and get access to that div, like you would like a ref in React or something. But if you're binding state to an input, sometimes you want that input to be nested in another component. And so in the past, you always just exported that prop and you bound it. And if you Updated the state in a child component, it updated the state upwards, which is great.

• 25:33Scott Tolinski?

  But you want more control over that. So what they did is they introduced a bindable rune, which basically says, hey, if this state needs to be passed back up to the component, then inside of your props declaration, you have to say that this, this particular prop is equal to bindable. And then you give it a default value because that makes it more explicit to say, hey, when I bind this variable, I want it to pass upwards, which is nice. Again, it just adds a little bit of clarity. I, I think that this, along with other things, is like something that, you know, detractors of the new salt stuff would say, we're having to do more, right? To do the same amount of stuff, but it does make it a lot more clear for sure.

• 26:16Wes Bos?

  But the, the idea with that is if you have a prop coming into a component, you don't necessarily know if that variable or, or prop being passed in is like bound to a state somewhere up the tree, or if it's just like a, like a variable somebody passed in as a prop, right?

• 26:34Scott Tolinski?

  Yeah. Yeah. It just makes it more clear. I mean, the functionality is the same as the way it used to work without bindable. But now it makes it so that if you, you pass something in, you're binding it in, not explicitly bindable. So yeah.

• 26:46Wes Bos?

  Well, it's, it's still better than React state because in React you have to pass the actual state itself and the updater function if you do want to, to update that thing. So yeah, I'm, I'm, I like it.

• 26:59Scott Tolinski?

  Yeah, I don't, I don't mind it. Certainly. I don't mind it. And you, you only bind state so much. I mean, obviously you do inside of form inputs a lot. Again, I bind state to divs if I want access to that. Not just divs, but elements, if I want access to that element specifically. And another new rune here is the inspect rune, which inspect low key, really, really cool. Now inspect is basically a console log replacement, but it's for reactive variables. The reason why this is cool is that unlike React, A Vue component or Svelte components don't rerun top to bottom when something changes, right? A React component is a function. Something changes, that function reruns. That has its strengths and it has its weaknesses, right?

• 27:43Scott Tolinski?

  The fact that it's rerunning every time in Svelte is variables are tracking. And if a variable changes, then either the effect that that variable is used in or the template code that reruns, but the rest of the stuff doesn't rerun. And because of that, you can't just put a console log on a variable and actually have it console log every single time something changes. Because you know, that code's not rerunning. So they came up with a dollar sign inspect. Now, the coolest thing about dollar sign inspect is you pass it a reactive variable and it doesn't just tell you, it doesn't just log out the value. It will say init and then the value, and then it'll say update and then the value.

• 28:24Scott Tolinski?

  So you can tell if this is the initialized value or the updated value of that variable, which becomes really handy when you're trying to debug. When is this getting set? How is this getting set? Oh, this is actually coming in as an empty array instead of a populated array? That's either something wrong or now I have to check to make sure that those variables actually exist in the template code. And it's nice. There's also inspect with, which basically allows you to have a callback function. And that way you can throw debugger statements in there. You can have a little bit more control over it. I pretty much never use inspect dot with, but then again, I basically never use the debugger because I'm a, I'm a low level developer.

• 29:07Wes Bos?

  Can you, can you use inspect with a derived? Cause like, I feel like that'd be kind of nice to just watch for changes of, like, for example, if you're trying to track the currently focused element or something like that, and you're, you're keeping that in state. Then you could simply just watch when it, when it changes. So it's not just for state, it's also for derived state.

• 29:30Scott Tolinski?

  Yes, it's for any reactive value, even nested reactive values. So let's say you have, you created your class state object and their state are derived inside of that. You, you can inspect those as well and get those outputting. It's nice. Now it's a little annoying that you can't just do console log, but I get it. In the past, we used to do this by doing dollar sign, colon, console log to make console log a reactive statement. This actually is nicer because you do get that init or update, which you didn't get before. I, I released a small little VS code extension called Svelte, Svelte 5 wrap or inspect wrap or something. I'll, I'll post a link to it in this, that binds command I to just wrap the currently highlighted variable in a dollar sign inspect. That way you don't have to type it out every time.

• 30:15Scott Tolinski?

  So that's something a little shorthand I gave for myself. There's also a rune called host, which is for custom elements or web components. So if you are having your Svelte code being output as web components, because that's something you can do. The host rune, let's see, provides access to the host element. Pretty straightforward. I've never used it. I've never output my, my Svelte components as web components, but you can do it. So, yeah.

• 30:42Wes Bos?

  Next one we have here is snippets. This is something that has been on my groan list for a while, which is you're not able to define more than one component in a file. And you, you still can't do that, but my use case for defining more than one component in a file is often I'll, I'll loop over something and I'll want to put the, like, let's say you have a list of items and you'll have an ordered list and then you loop over each item. And then you, you render out a list, list item for each of those, right? Often I'll want to put that in its own. Like, like just above, right? Just so I can put it in its own thing. And, and the big use case I have there is often I'll want to like,

• 31:25Wes Bos?

  create a couple of quick variables before I template it, because it gets a little bit fuzzy. And it's not enough to make its own component and its own file, but it's enough to want to have to do it separately. And now we have this idea called snippets, where you can define reusable pieces of markup or of template. And you can, you can pass it arguments, you can type them, and it's, it's pretty nice.

• 31:55Scott Tolinski?

  Yeah. And because of how snippets work, they also replace slots within Svelte. Now, slot was kind of how they did children. You would have a slot, you could have a name slot, and then you could have named children. But now, inside of components, children is like React, it is the word children. So you can use children, and children are now considered a snippet, meaning that you can actually create, in the same way you had name slots, you could have named snippet areas that allow you to, you know, put things as children inside of different parts. Now, I don't, you know, the syntax is fine. I think it's nice to be able to do this. I largely am still creating single file components. There is times, like certainly where I'm creating snippets,

• 32:40Scott Tolinski?

  list items and those types of things to make it easier. I, you know, a lot of times when I am creating a little thing like that, I want an individual item to have its own, maybe its own function or its own, you know, functionality in there. And then I'll reach for a single file component, gets a little bit easier. But to, to render any of these things, you use a template tag @render, and then you render the snippet name. So if you pass children, it's @renderchildren.

• 33:05Wes Bos?

  Yeah. You still can't create variables inside of a snippet though, right? Like if you wanted to... Create a variable before you go ahead and render something. That's not something that you can do with this. A snippet must only contain markup.

• 33:22Scott Tolinski?

  You can use the @const template tag, but it's not, it's not great. Yeah, I agree. I know.

• 33:29Wes Bos?

  I was talking to a bunch of people at the conference last week and they're like, like, what don't you like about Svelte? And I was like, that @const is killing me.

• 33:37Scott Tolinski?

  I know. You could, the reason why, for people who don't know, @const allows you to define a variable in a template tag inside of your template, but it's only allowed as the immediate child of an if each or snippet. Oh, you can use it as an immediate child of a snippet. Okay.

• 33:53Wes Bos?

  Yeah.

• 33:53Scott Tolinski?

  Okay. Yeah. Okay.

• 33:55Wes Bos?

  But.

• 33:56Scott Tolinski?

  Yeah.

• 33:56Wes Bos?

  Nah.

• 33:57Scott Tolinski?

  Yeah.

• 33:57Wes Bos?

  And also you cannot export a snippet, um, which makes sense. I, I, I think.

• 34:04Scott Tolinski?

  You just make it into a component at that point. Yeah.

• 34:06Wes Bos?

  Yeah, that's true. Just the, the overhead to having to find all the props and everything is, is kind of annoying to make it a separate component.

• 34:16Scott Tolinski?

  Yes, it is annoying. You know, it'd be nice to just like one click encapsulate as component, uh, turn into a component or something. Another new change here beyond snippets, I do find snippets to be handy. Like you said, it's nice to be able to create a component without having to make a new file. But another new change is that the, uh, events before in Svelte used to always be like on colon and then the event name, right? And now there's no colon anymore. So on colon click is now just on click. Even with custom events, you create a custom event, it's just on custom event name. And this is really nice for a number of reasons, but one of the, the things that I take advantage of is in Svelte,

• 34:55Scott Tolinski?

  um, let's say you have an attribute or a prop on something that the prop is the same name as the thing you're, the variable you're passing into it. So for instance, if you have a function named on click and saving in React land, you'd have to do on, on click. I've even forgot what it is in React now.

• 35:13Wes Bos?

  It's on click equals curly brackets on click.

• 35:16Scott Tolinski?

  Right. In Svelte, it's just curly brackets on click. So you're just basically saying, hey, the on click is a thing named on click. Um, and that works for all, all props in general, but it's nice for these functions, especially if you have a small component, it has one function, that function's a click function. Yeah. Just say on click, the name of the function.

• 35:33Wes Bos?

  That shorthand, that's one of my wish lists for JSX is.

• 35:37Scott Tolinski?

  Yeah.

• 35:38Wes Bos?

  All the time. You have like type equals type and name equals name, you know, like you're just repeating yourself over and over again. And it's nice to be able to do it.

• 35:52Scott Tolinski?

  Yeah.

• 35:53Wes Bos?

  So is that why they they took the on colon click? Cause I kind of like the syntax of that. I guess it's not very JavaScripty, though.

• 36:02Scott Tolinski?

  Yeah, yeah.

• 36:03Wes Bos?

  HTML?

• 36:04Scott Tolinski?

  I think it's to get HTML and the side effect here is that you can just do it like this. Another thing, too, is that like now events can be passed in as props. Before events, you had to do like a custom event dispatcher. Now you just pass a function down in as a prop of that. That prop is named on click, then you just the prop on click goes directly on the button on click. And again, it's just like feels really, really nice that way.

• 36:31Wes Bos?

  Serif, let's talk about this one. The serif font on the website. So they, Rich Harris is always known for for being a bit of a contrarian. And a lot of the times he's he's right. Meaning that like he's used JS doc instead of TypeScript.

• 36:47Scott Tolinski?

  Veet.

• 36:47Wes Bos?

  Underscores instead of whatever Veet instead of Webpack. But he got one wrong.

• 36:53Scott Tolinski?

  They were on Snowpack first and then he made the choice to go to Veet. And that was like a big try. I actually talked to him about that in our interview and it was like, how hard was that to make that call? Knowing that like people are going to be writing think pieces and opinion pieces about.

• 37:07Wes Bos?

  Oh, yeah.

• 37:07Scott Tolinski?

  Yeah.

• 37:08Wes Bos?

  I bet.

• 37:09Scott Tolinski?

  I know, right?

• 37:10Wes Bos?

  He got one wrong and that is the entire Svelte website. Now he uses a serif font like.

• 37:15Scott Tolinski?

  I like the serif font.

• 37:16Wes Bos?

  Microsoft Word document from 2003.

• 37:19Scott Tolinski?

  I'm I'm agreeable and maybe that's it. It's just too much of a fanboy to see that I'll just say, hey, I like it. I like the serif font, man. You know what? Everybody, a thing that bugs me the most about the web these days is that every single site looks like Vercel and nothing against Vercel. Their site looks very nice. Everything looks like that and it's also boring. Every single doc site looks like DocuSaurus and you look at it, you're like, all right, DocuSaurus, which is fine. It works. It's predictable, but I am bored, man. So like, if I see somebody taking any sort of chance with just, just simply by using a serif font. I am not going to complain about that. The amount of people that are like, this sucks.

• 38:01Scott Tolinski?

  It's like, who cares, man? Uh, yeah, who cares? Uh, that's really what I come down to.

• 38:05Wes Bos?

  I care. Just go on the website and change the SK font family body.

• 38:11Scott Tolinski?

  Yeah.

• 38:12Wes Bos?

  Variable to monospace. Looks way better.

• 38:15Scott Tolinski?

  Well, here's, here's even an easier thing, Wes. You go to the doc site and you click on the little A in the top right and it makes the body font into a sans-serif.

• 38:23Wes Bos?

  Oh, okay.

• 38:26Scott Tolinski?

  They had enough people complaining about it that they had to add that.

• 38:28Wes Bos?

  Stop my whining.

• 38:29Scott Tolinski?

  Yeah. I don't have any beef with it. I'm gonna be honest and so many people complain about it that maybe I'm just being contrarian.

• 38:36Wes Bos?

  Serif code is weird. I, I understand serif for like paragraph text. I understand serif for headings.

• 38:44Scott Tolinski?

  There's no serif code.

• 38:45Wes Bos?

  But the sidebar.

• 38:47Scott Tolinski?

  Oh.

• 38:47Wes Bos?

  Has all of the, like, the runes and the template syntax is in, like, no one's coding in a serif font.

• 38:56Scott Tolinski?

  Yeah. So, so folks, if you want to make one change to this, make any piece of code that's in the sidebar into a monospace font. I think that solves it for me.

• 39:06Wes Bos?

  Yeah, cuz the, the code samples are in a monospace font.

• 39:09Scott Tolinski?

  Right.

• 39:09Wes Bos?

  And, and the paragraph tags are fine in, in that. I think even the nav at some point was in serif. Is that true?

• 39:17Scott Tolinski?

  I don't know, honestly. I'm.

• 39:18Wes Bos?

  Change the logo. If you care that much, change the svelte logo to be serif font, you know?

• 39:23Scott Tolinski?

  Oh, man.

• 39:23Wes Bos?

  Make it Times New Roman.

• 39:25Scott Tolinski?

  Times New Roman, yeah.

• 39:26Wes Bos?

  Georgia.

• 39:27Scott Tolinski?

  Georgia. Georgia, by the way, uh, was the font that I used for everything back when there was like six fonts that you could choose from.

• 39:34Wes Bos?

  Oh, I was Verdana all day long.

• 39:37Scott Tolinski?

  Yeah, I was a Georgia man. Yeah.

• 39:39Wes Bos?

  Was that a slight?

• 39:41Scott Tolinski?

  No, no, I could just see it. I could just picture it. Yeah.

• 39:44Wes Bos?

  Oh.

• 39:45Scott Tolinski?

  I, yeah, I don't, I don't know why I went Georgia. Yeah.

• 39:48Wes Bos?

  Yeah, Georgia was was pretty nice. I my my new thing when people tell me something like I would use Verdana, you just say, explains a lot.

• 39:57Scott Tolinski?

  Yeah.

• 39:57Wes Bos?

  You know?

• 39:59Scott Tolinski?

  Yeah, yeah, I know. Oh, one more thing here is before we get into some other stuff is performance. Man, one of the big changes that they made a lot of this stuff is to make Svelte better, faster, smaller, all of those things. And I think it's even like setting up for future improvements. Like, the fact that the state is is signals based is that if the browser eventually gets signals or JavaScript gets signals, they'll be able to eliminate a portion of their code. So they're kind of thinking ahead, because I do think that's inevitable, right? But as far as like even bundle sizes go, Ben McCann posted a really

• 40:37Scott Tolinski?

  great post showing the same project in Svelte 3 was GZipped 987 KBs. In Svelte 4 was 418 KBs. So that's a massive change. And then in Svelte 5, 244 KBs.

• 40:52Wes Bos?

  Seriously?

• 40:53Scott Tolinski?

  Yes. So the same site went from 98 to 418 to 244, just with library improvements. So, yeah, pretty sick.

• 41:05Wes Bos?

  That's, that's really nice. And does this this website also shows it in all these other frameworks as well?

• 41:13Scott Tolinski?

  So that's that was from the tweet that I had posted in the show notes. This this um, have you ever you you've seen this? This is cross crossest. I'm so sorry, crossest. This crosses JS benchmarks table is pretty massive. If you want to get any like ability to read this, you kind of have to click which frameworks. But then even that is like a massive table. You just deselect all and then select the ones you want. For the most part. Svelte is very, very fast on these things. So if we've been looking at libraries that it's competing with in terms of the one that you might want to look at is the weighted geometric mean, which is the second from the bottom. You can see it's like a 1.02 for vanilla

• 41:54Scott Tolinski?

  vanilla JS is 1.05, right? In terms of the duration in milliseconds where Svelte 5 is 1.13, which is great for Svelte, considering the only things that people typically use that are near it would be like Solid JS is a little bit faster at 1.1 million.js, shockingly 1.09. But then you have to scroll pretty far before you get to other things that people are using. I remember Inferno JS was supposed to be very fast, 1.15. Svelte in classic mode, 1.16.

• 42:32Wes Bos?

  The million JS React implementation is

• 42:35Scott Tolinski?

  insanely fast.

• 42:37Wes Bos?

  Even faster than Svelte.

• 42:38Scott Tolinski?

  It is. And that's crazy to me. I don't know what the caveats there are, if there are any. View vapor is 1.26, so quite a bit further back. And then like, man, you gotta keep scrolling.

• 42:50Wes Bos?

  What's the worst one? Hold on, let's go all the way to the other side. BlazerWasm8.

• 42:54Scott Tolinski?

  BlazerWasm8 is 8.

• 42:56Wes Bos?

  Sauron, Alpine, 2.83. And of course, this is just

• 43:06Scott Tolinski?

  Yes.

• 43:07Wes Bos?

  This is what is measuring fast? Like, what does that even mean?

• 43:12Scott Tolinski?

  So there's all these number of tables here. So create rows, replace all rows, partial updates, select rows, swap rows, remove rows, create many rows.

• 43:21Wes Bos?

  And this is rendering?

• 43:22Scott Tolinski?

  Yes. And then, so the very, the second to last one is a weighted mean of all of those. So you can see that. Like, yeah, so it's definitely, I don't know where React with hooks is in here, but it's quite a bit faster, considerably faster. And then the other ones on here are like memory allocation, or transferred size in first byte, or first paint. So this table's definitely worth spending some time on if you want to see. But the long and short of it is that Svelte is approaching Vanilla JS speeds, as is Million JS, as is Solid JS. So these things are getting very fast. And that's good for all of us, especially when

• 44:03Scott Tolinski?

  the upgrade path is running a migration assistant and getting a smaller bundle, getting a faster site.

• 44:08Wes Bos?

  Yeah, no kidding. It just comes for free. I should say that, I just said that Alpine JS was like on the slower end. That doesn't really make sense to compare that, because people aren't building the entire website in Alpine JS. They're just sprinkling it on where they need it, right? And this is doing apples to apples, the entire website.

• 44:34Scott Tolinski?

  Word. Yeah, totally. So definitely worth spending some time and looking at. But again, it's not the end all be all. And in fact, largely what determines the performance of your site is images and crazy stuff that you're writing. So yeah. But Svelte, I will say, gives you less footguns in that regard, where with React, because the component reruns every single time, you have to worry about, hey, what is actually running when this component reruns? Where Svelte is like, what is changing when this variable changes?

• 45:03Wes Bos?

  Aiden Bai, we had him on the podcast. He's the creator of Million JS. Million JS is a rendering, like a React rendering optimizer, where it does kind of the same things as Svelte, where it figures out what needs to update, rather than re-rendering the whole thing. And he's working on this tool called React Scan, that basically just like visualizes which components are re-rendering. And it's amazing, he goes on GitHub and Pinterest and like lots of very large websites. And they're all, the whole website is re-rendering every single time you scroll or something ridiculous like that. And it's, it's not because the developers behind it are

• 45:46Wes Bos?

  bad. It's just like, it's just like a foot gun, you know? And, and the, almost always the solution to these is just wrap a memo around it and the React compiler is going to fix that. But it's, it's at a point now where it's like, yeah, like, do it for us. Because even highly paid devs at some of these big companies are not realizing that it could potentially be an issue. I think a lot of the stuff is like, well, nobody, nobody noticed that that was slow for like 10 years until you built this tool. But there's the other flip side to it is, of like, you don't have those foot guns in Svelte at all.

• 46:23Scott Tolinski?

  Yeah. And hey, you know, I think React is realizing that there's a lot of benefits to using a compiler like Solid in Svelte, considering there is now a React compiler. There was a lot of talk about the React compiler at React Summit. So it definitely seems like it's obviously a good direction to go in. But that brings me, I guess, to a bigger point that Svelte community has been arguing over is, is Svelte becoming React? You'll see a lot of posts on the Svelte Reddit about stuff like this. And I do think it's largely because they chose the word, well, one, it's because you don't have reactive variables anymore. But two, they chose the word effect. I think, I think simply choosing the word effect makes people say, oh, React's got that word. That's React.

• 47:08Wes Bos?

  Everything has that, that signals has, like, signals has the idea of an effect in it.

• 47:15Scott Tolinski?

  I think it's just that. Because in reality, the things that are still, the reason why you pick Svelte, it's still simple. And that's not like a great word to use. But the compiler is still giving you a lot of good magic. The state is still mutated. You don't have to do the whole set state, get state thing. And effects are automatically tracked. So, you know, it's the same way we did reactive statements in Svelte. It's now just a little bit more clear and it's a little bit more dialed in, right? Now, we don't have unmount, undestroy, whatever, and reactive statements. We just have reactive statements named effect. So in my opinion,

• 47:58Scott Tolinski?

  You know, this stuff aesthetically might look a little bit more react-ish, but that's only surface level. Once you get deeper than that, it's still, the concepts, the core concepts of Svelte have not really been rethought that much.

• 48:11Wes Bos?

  All right, I have some synonyms for effect for you. You get to choose what the new API is called.

• 48:16Scott Tolinski?

  Give it to me.

• 48:17Wes Bos?

  Consequence?

• 48:20Wes Bos?

  That's a good idea because like they say, ah, you probably shouldn't use the effect if you don't know what you're doing, right? This could have consequences. Ramification.

• 48:28Scott Tolinski?

  Ooh.

• 48:29Wes Bos?

  Repercussion.

• 48:30Scott Tolinski?

  Okay.

• 48:31Wes Bos?

  Uh, conclusion, not really. Outcome. Ah, sequel, reaction. I think, I think I like ramification.

• 48:42Scott Tolinski?

  I like ramification. You know what? It could even be like reactive, right? This is a reactive area of code.

• 48:48Wes Bos?

  Yeah.

• 48:49Scott Tolinski?

  Does not matter to me. It could be a doll, it could be just the dollar sign for all I care. But dollar sign with a callback function instead of just dollar sign colon to me reads better and

• 48:59Wes Bos?

  Totally. I agree. Especially for like multi-line things where you had to do that weird like dollar colon, open up a block.

• 49:05Scott Tolinski?

  Yes.

• 49:06Wes Bos?

  That was, that was odd.

• 49:07Scott Tolinski?

  Exactly. It was odd. And I think a lot of the stuff makes it less odd. And maybe it being more JavaScripty means that it looks a little bit more react. But for the most part, Svelte special sauce is still there, folks. There's, there's nothing stopping that. Let's talk about the migration really quick here. I know you had mentioned you did a migration. I migrated.

• 49:25Wes Bos?

  I ran three.

• 49:27Scott Tolinski?

  Yes, you ran three migrations. Let me tell you, I've run a number of migrations, whether that is from the beta of Svelte Kit to the final release of Svelte Kit, from Svelte 3 to Svelte 4, Svelte 4 to Svelte 5. Nobody does migrations like the Svelte team. I don't know, honestly, I don't know which individuals are the ones who are making this so good. The shout out to the entire team because I ran the Svelte Migration Assistant on the Syntax website, which is not a tiny codebase by any means. And I would, I ended up having to touch like 10 files afterwards, uh, just to clean up some things. And it told me which files. It's not like, all right. Figured out there's things broken. It's like, here are the things that you need to look at.

• 50:11Scott Tolinski?

  All right, I looked at them, swapped some stuff, made some choices and bingo, bango. I completed the migration in less than like an hour, which is kind of an absurd statement. I've never, I'm a refactor guy. I've never refactored a codebase that large in an hour that easily. So a shout out to the Svelte team, the Migration Assistant.

• 50:31Wes Bos?

  It worked really well. And like I, I ran it where I, so I upgraded Svelte 3 to 4, then Svelte Kit 1 to 2, and then Svelte 4 to 5. And I'm, I must've spent maybe 12 and a half minutes fixing a couple little effects. And the things that I fixed were actually like a bug in the, not a bug, but like a bad practice in the thing where it was like updating a store as part of a peer function. And it like uncovered an actual issue. So I was amazed at how well that actually worked.

• 51:08Scott Tolinski?

  Yeah.

• 51:08Wes Bos?

  Almost to a point where like I had to, I had to actually go into the code and read it. Cause the code looked significantly different than, than it did before. And if I'm gonna have to jump into that at some point, I have to understand what's going on here.

• 51:21Scott Tolinski?

  Yeah. I don't know what they're, I mean, I get that they're, they have their, their tools, but the fact that it is so painless, or at least it works so well. When you know that there is such a wide variety of potential codebases and things is pretty amazing. So shout out to anybody who worked on the Migration Assistant, worked really well. A big thing here is I guess what's next for Svelte? I had to, when I interviewed Rich at JS Nation, again, I asked him very specifically. All right, we just have massive release, like what's next? Is it Svelte Kit 3 or what is, what is next? And he told me that they're going to be releasing a ton of little things.

• 52:04Scott Tolinski?

  Over this like this whole Christmas break time area where what do they call like an advent or something?

• 52:11Wes Bos?

  Yeah.

• 52:11Scott Tolinski?

  I don't know if he specifically used the word advent. I'm trying to remember in my brain, but he's basically saying that they're going to release a ton of little features here and there as these weeks go on. And one of which they've already announced is error boundaries. So you're going to have easy error boundaries. He said that's something that people have been asking for for a long time, but they put off because they felt like it would be like a more difficult project. And then somebody just knocked it out in like no time. And they're like, oh, wait, never mind. It's actually really nice and easy. So error boundaries are coming. You know, I think they want to do context better. Context largely works the same as it does in React without providers, but you know, you have to type whenever you retrieve context. So it often feels like you're throwing your

• 52:55Scott Tolinski?

  your data in a black hole and then you're retrieving it and casting types on to it. So like some kind of like more type safe context API would be really nice.

• 53:04Wes Bos?

  I honestly, I don't think you need context as often as you do in React because you can simply just import and export stores, right?

• 53:12Scott Tolinski?

  Yeah.

• 53:12Wes Bos?

  A lot of what people are using context for is because they like with React state, you can't just export and import state like that unless you create your own custom effect to hold it.

• 53:22Scott Tolinski?

  Yeah. Well, I think there are certainly some use cases, specifically like when you get into server side rendering and you want to make sure that you're, you know, if you create state that has, you know, sensitive data on the server side or something like that, that could be spread amongst users. So you do have to, I guess, be a little bit careful. So context, I do use context somewhat. Most of the time I am creating state in that way. But yeah, there's also talk of potentially like class helpers, like new things where you could have more advanced syntax for toggling and changing a bunch of classes. I know specifically like Tailwind folks really ask for this kind of stuff because they got a lot of classes over in Tailwind land. So you got to have a means of toggling a whole bunch of them beyond a bunch of if statements.

• 54:07Wes Bos?

  Yeah, like active and. Active class or

• 54:11Scott Tolinski?

  Yeah, what even like active class or whatever is now super easy. It's already super easy in Svelte because you can do, there is already like a shorthand for toggling one variable, but it's when you have like, or toggling one class, when you have like eight classes you want to toggle again, it gets a little bit rougher. You have to do a whole bunch of things. I think that is a pain again, specifically for Tailwind folks. But either way, I think by the time you're hearing this, it will be, you know, into December and we're going to start to see little stuff trickle out here and there. And it's going to be really super exciting.

• 54:45Wes Bos?

  Is there any, did you ask him about this, which is data fetching at a component level? Because that's, that's still on my, my wishlist as well as like right now Svelte Kit must fetch at a page level and pass into components. And like it doesn't, that doesn't make sense to me because everything is, is so component based. I'd rather just fetch the data in the component and the page to figure out what it needs.

• 55:12Scott Tolinski?

  Yeah, I don't, I didn't ask him about that and I should have, I will, because that is one of my things too. I want like islands and I want data fetching at a component level. Like those types of things for me are the things that I would really like to have.

• 55:27Wes Bos?

  Actions at a, at a component level will be nice as well.

• 55:31Scott Tolinski?

  Actions at a component level. Yes, I would like all of that stuff. So hopefully, yeah, we'll see. I'll have to ping, ping in the Svelte channel about that stuff.

• 55:39Wes Bos?

  Cool.

• 55:40Scott Tolinski?

  What, what do you want to see in Svelte 5 and beyond? What do you want to see in the next version? What do you want to see in Svelte Kit? Are you using it? Are you not using it? Why aren't you using it? Too much magic? Not enough magic? Do you think it's becoming React? Let us know. Leave a comment below. If you're on YouTube, we love comments. All, you know, it's the best place, I think, to leave a comment is probably on YouTube. Where else? Do they do comments now on Spotify? Did you say that?

• 56:02Wes Bos?

  Yeah, yeah, there's, there's, they've done comments on Spotify for a long time, but we've had to approve them and we weren't able to reply to them. So it was, it was often just like a, "Love this episode," or "I think of X about Y," which we love. But now you can like, now they're approved by Default, which is is great. Um, so they go out right away. Um, so if as soon as we release an episode, we got thousands of people listening to it. It's nice to see what people are talking about. We also can reply now, which is great because often people are saying like, what was that thing that you mentioned? Um, X, Y, and Z. And it's nice just to be able to type it in rather than me like, I don't know who you are, Danny. Uh, I have no way to contact you.

• 56:45Scott Tolinski?

  Yeah, just, yeah, yeah, definitely feels like you're just tossing comments down a hole. And now, now we can actually respond.

• 56:50Wes Bos?

  Yeah, cool. So definitely leave us a comment on, um, on this one, please. We, uh, if you're listening on Spotify, we'd love to see how many people are, are reaching this. Actually, I guess we know how many people are reaching this far. But, uh, yeah, leave us a comment.

• 57:05Scott Tolinski?

  We know, we're watching you. We're watching you listen to the podcast.

• 57:11Scott Tolinski?

  We're not.

• 57:12Wes Bos?

  Cool. All right. That's all. Oh, no. Uh, shick, shick picks.

• 57:17Scott Tolinski?

  Yes, shick picks. Shick picks and shameless plugs. I have a shick pick for us today. One of my, the first video games that I got when I, maybe not one of the first ones, but for the NES, I don't remember when we got it or how, uh, but it was Dragon Warrior and it was the first one. And man, I, as a child, did not really understand. I thought the game was cool. The music brings back so much nostalgia and I would basically, I would go to out of the little village. I would fight some villains and I would, you know, win and whatever. And then I would go a little bit too far and then I would die. And then I would say, hmm, I have no idea what I'm doing here. I did not understand how to play the game, but eventually, later on

• 58:00Scott Tolinski?

  in life, I went back and I played it again. And I, you know, after you learn how these games RPGs work, I beat it. Well, Dragon Quest III.

• 58:10Scott Tolinski?

  It was called Dragon Warrior in the States, but it's Dragon Quest in Japan. And Dragon Quest 3 was just released in this really incredible remake, just very recently. And it's like an HD remake and it's so cool, Wes. They combine like pixel art with depth 3D and lighting effects and all this stuff. So it feels like this old school, new school approach. Octopath Traveler and some other games have taken this approach, but it feels so cool in practice in terms of just aesthetics and man, this game rules. It's like bringing me back to childhood in a certain way. I never got to play Dragon Quest 3 before and it's a long game. It's really super good.

• 58:50Scott Tolinski?

  It's a great remake on top of, it doesn't feel like a game from, I believe, the 90s. 19, or no, yeah, 1988? Is that when it was initially released? Holy cow.

• 59:02Wes Bos?

  Holy.

• 59:03Scott Tolinski?

  Yeah, so it doesn't feel like a game from 1988. Yeah.

• 59:07Wes Bos?

  Sick, sick, sick. I'm going to sick pick this shirt I'm wearing. I've said in the past, I am a, I will do anything for a t-shirt. These Dresscode, kind of, I should move my thing. Dresscode is a developer-focused t-shirt company and they sent me this and they are some of the nicest t-shirts I've ever worn. They're really heavyweight, kind of oversized look.

• 59:36Scott Tolinski?

  Yeah.

• 59:36Wes Bos?

  You can see on the, on the back, it's, check it out, dresscode.dev.

• 59:40Scott Tolinski?

  I gotta get at them.

• 59:41Wes Bos?

  Yeah, they got some, some really cool stuff. Yeah, they said they send you one as well, so hit them up because they've got some, some pretty cool stuff that they, they're working on.

• 59:50Scott Tolinski?

  I love following them on Instagram. They're one of my favorite follows because they do release cool stuff all the time.

• 59:55Wes Bos?

  Awesome.

• 59:56Scott Tolinski?

  Shameless plugs.

• 59:57Wes Bos?

  What do we want to plug right now?

• 59:59Scott Tolinski?

  Ah, let's plug the Syntax YouTube channel as always. YouTube.com forward slash at Syntax FM on YouTube. We're releasing all kinds of stuff and we'll have a little bit of an announcement here about some stuff we're going to be doing on YouTube in the very next episode. So we're going to be, we have been, but we're going to continue to be more and more active on YouTube, folks. So if you want to make sure you're getting all the fun stuff that we're doing, which by all means, there's going to be a lot of fun stuff, then yeah, check us out on YouTube.

• 1:00:30Wes Bos?

  Buckle up. All right. Thanks, everybody. Catch you later. Peace.