Love the video and thanks for the content on Svelte! Been using it since 2019 and it's such a joy. I've been holding off on Svelte 5 until it's close to stable but really eager to dive in.
I love this podcast! I never went to school and studied programming all on my own. That meant a lot of imposter syndrome, and this podcast kind of served the same purpose as university in the sense that I could connect with other coders and compare my skills with them, to know I was heading in the right direction. After 3 years of study I got a real job and have been working as a full-stack dev now for 2,5 years. And I’m so *so* grateful for Scott and Wes for this podcast! 💙💙
You don’t have imposter syndrome, you’ve learnt how to glue web libraries together and are called a “full stack engineer”. You are an imposter, a library gluer pretending to be a programmer
I like the video quality of this podcast, care to share the camera(s) used? Also just gonna put this here: Wes Bos taught me javascript. I tried so many different tutorials, treehouse a ton of other things, nothing clicked until Wes Bos' tutorials. It is nearly a decade later and now I'm a Sr. UX/UI Engineer and I'm happier than I've ever been, doing what I love (which is javascript!) and other front-end things.
Currently for class you could just use class=$$props.class and it will automatically pass in the class as a prop. In Svelte 5 you can spread {…props} and use class={props.class}. I use clsx to merge classes if needed.
@@WesBosunfortunately not: every class in svelte is prefixed with an hash that is unique per component so even if you could pass it down (it's already possible in svelte 4) it will not be applied to the children. Maintainers are looking into methods to make this work however. If you really need it tho you can use the :global() selector to remove that extra hash class and achieve what you need ``` :global(.my-class){ color: red; } ``` This will work
@@paoloricciutiyeah we are using that right now, but its a weird syntax, doesnt support nesting and isn't ideal. Seems like it could statically analyze any classes that get passed into it, or we could at least specify possible classes as a union on the type def of the component?
@@phoneywheeze Tailwind merge is if you have coliding classes in a conditional like: “bg-blue-500 {active && “bg-red-500”}” Never used it, but thats my idea of it This is the problem with passing reserved “class” attribute. Altho they say later that sou can solve that by {…rest} or something 😊
I have been a listener for years and I could never remember which voice belonged to which Twitter profile picture, I am glad to see the new video format! Will definitely keep me more engaged, I am looking forward to more from you two, thanks guys!!!
Wooo! This is great. With all the video content I saw coming out on Twitter I was sort of hoping this would happen someday. Would be pretty neat to also see a video version in Apple Podcasts, too (no pressure). 😊
Hi! I listened to this episode when it first came out, but I hadn't started learning Svelte then. I just started learning recently, but I'm a bit confused because all the beginner Svelte 5 content seems to be aimed at people who already know Svelte 4. I did the Svelte 4 tutorial, but getting it to stick takes time. Do you know any beginner-friendly Svelte 5 videos that you can recommend? Also, while I'm here, I keep reading/hearing about how Rune will replace stores, but I don't fully understand how. To practice, I am trying to convert a static site to Svelte. I have a list of activities (walking, running, skating, cycling) and each of these have their own page on the static site. I moved all the activities to an activities array and I need to share that data with the +page.svelte and the Header component. I am guessing the way to do it is to create the array of activities in the +page.svelte and then pass it as a prop to the Header - as I was writing this out, I actually think I started to understand, but let me finish anyway in case it helps others - on the +page.svelte, I access the data from the load function, but to do that, I need to use `let { data } = $props();`. Once that has been added, if I try to use `export let activities....`, I get an error saying that I cannot use `export` because the file is a rune file. Now, my understanding was that I always needed to use `export let` in order to refer to the variable in the html, but now I see I can just use `let` and the `export` was just for reactivity. Thanks, rubber ducking.
Since Svelte 5 isn’t fully released yet, you’ll probably have to wait. However sub to this channel because we’ll be releasing a course on exactly that. Svelte 5 for everyone, not just current Svelte 5 users
@@syntaxfm Thank you! I've been listening to Syntax for years (it's my favourite podcast) and have been getting excited about Svelte for ages. I had some other things I needed to learn first, so it's been on the back burner, but looking forward to focusing on it now.
The answer is no if you want a job or contract in the industry. Maybe, if you are just doing your own thing. But more seriously, it's great you have the podcast on UA-cam with the show notes! Sentry is putting their marketing dollars to good use
for the "on:click" i really liked the visual separation with the ":" but that said i've also just learned to not question Svelte's breaking changes like i did with kits "+" folder structures (that i cant live without now) 😅@@syntaxfm
I tried svelte once, and quickly noticed that it required a node web server. So I instantly threw it away. Very nice it's small and fast. But if I can't put it on any SERVER it won't be universal usage.
will this real-world svelte 5 app be open sourced? will you generate content explaining how you built it and the decision you made? (I hope you will, btw)
Almost feel weird seeing your faces. So used to only hear your voices. Very nice tho! Now you're able to show some examples of what you actually talk about!
sorry but slots are WAY more intuitive than passing in components as props and far less ugly, in my opinion. I hope that does not become the norm because thats something i disliked about react code...
agreed. slots especially named slots are extremely intuitive. with the switch though, svelte looks like it's moving towards a developer centered approach, compared to the one it has now, which is to enable non tech people to build uis
But you can't just use html spec thing for your language, I'm happy that rich is moving away from changing the language and that he has learned that this is not how you fix the web.
@@syntaxfm Well, maybe I'm not the brightest crayon. I meant to say that it does seem complicated, like non-trivial. I'm sure if someone puts their mind to it, they'll get it. But for me it's just feels extremely confusing. I guess I was trying to go with Svelte, because it appeared easier than React. Well, at least that's how it was perceived by me. But now that Runes are coming, it doesn't seem to be any easier than React, so I might as well learn React. I guess Svelte was always meant to be a "side-thing" for people who know React already. But I didn't "get the memo", so I was learning Svelte for my side-project as an alternative to React, with an understanding that it'll be easier. And "runes" sort of take that "gloss" away. Anyways - I'm sure that complexity is technically inevitable, and now that's clear. I'm sure there are good reasons for using Svelte over React (like speed or something), but that wasn't the reason for me. So, for now, I'm done with Svelte.
Sk5 RC. In Runes Mode, $:, slots, ":" (eg on:click"), |preventDefault", onMount() gone. RIP. Still looking for greater clarity on when to use effects vs derived / derived.by.. Rick says if you find you are using $effect a lot, rethink derived! Laughed when you said dont worry about infinite loops. Never hit infinite loops before SK5 but lots of times trying to get derived/effect right. You really have to reconsider/rethink reactivity to avoid infinite loops. Not as simple as it was. Converted a small app that worked with SK4 with 7 $: cut to 4 $effects in SK5, after many infinite loops!
Have you never had to reach for useIsomorphicLayoutEffect? I've never been able to use a layout effect in a serverside context without reaching for a 3rd party solution. Is that no longer accurate?
I did hear about it! But: - what you said is "you can't use useEffect if you have SSR", this is wrong because of course you can because you are thinking about useLayoutEffect, not useEffect. And of course you can't :) because it's not going to do anything on the server - second is that use of this hook is always was discouraged by docs, but you make it sound as if this is somehow a valid everyday concern that React developers have to deal with
Welcome to video!
Congrats on making the transition to video! Definitely looking forward to more video content.
Pumped to keep evolving here.
Love the video and thanks for the content on Svelte! Been using it since 2019 and it's such a joy. I've been holding off on Svelte 5 until it's close to stable but really eager to dive in.
I love this podcast! I never went to school and studied programming all on my own. That meant a lot of imposter syndrome, and this podcast kind of served the same purpose as university in the sense that I could connect with other coders and compare my skills with them, to know I was heading in the right direction.
After 3 years of study I got a real job and have been working as a full-stack dev now for 2,5 years. And I’m so *so* grateful for Scott and Wes for this podcast!
💙💙
That’s amazing! Thank you so much for sharing.
You don’t have imposter syndrome, you’ve learnt how to glue web libraries together and are called a “full stack engineer”. You are an imposter, a library gluer pretending to be a programmer
I like this Wes Bos guy. Is was his class that got me into software development 10 years ago.
I like the video quality of this podcast, care to share the camera(s) used?
Also just gonna put this here: Wes Bos taught me javascript. I tried so many different tutorials, treehouse a ton of other things, nothing clicked until Wes Bos' tutorials. It is nearly a decade later and now I'm a Sr. UX/UI Engineer and I'm happier than I've ever been, doing what I love (which is javascript!) and other front-end things.
Sony FX3s with a Sigma 55mm lens.
You can just do this for classes: const { class: className } = $props()
Heck yeah! I haven't heard this podcast in ages! That's about to change if you're now on UA-cam.
Glad to have you back!
Heyy, nice to see your faces guys, I'm listening Syntax for a long time =) Great work guys!!!
some feedback, I would really like to see some code examples as you speak, it's so much easy to follow when you just see the code on screen
Currently for class you could just use class=$$props.class and it will automatically pass in the class as a prop. In Svelte 5 you can spread {…props} and use class={props.class}. I use clsx to merge classes if needed.
Thanks for the details Brittney. $$props always felt weird.
So if I specify a class on the parent and spread it on the child, will Svelte still know to keep those selectors in the child component?
It also works if you do this:
let {class: classes} = $props();
@@WesBosunfortunately not: every class in svelte is prefixed with an hash that is unique per component so even if you could pass it down (it's already possible in svelte 4) it will not be applied to the children. Maintainers are looking into methods to make this work however.
If you really need it tho you can use the :global() selector to remove that extra hash class and achieve what you need
```
:global(.my-class){
color: red;
}
```
This will work
@@paoloricciutiyeah we are using that right now, but its a weird syntax, doesnt support nesting and isn't ideal. Seems like it could statically analyze any classes that get passed into it, or we could at least specify possible classes as a union on the type def of the component?
My current approach is... class={style}
And it works okay :) because I almost never pass something to style attribute
is it different than using tailwind merge if you're already using tailwind?
@@phoneywheeze Tailwind merge is if you have coliding classes in a conditional like:
“bg-blue-500 {active && “bg-red-500”}”
Never used it, but thats my idea of it
This is the problem with passing reserved “class” attribute. Altho they say later that sou can solve that by {…rest} or something 😊
curious if you're still using this approach or has it evolved?
the way i use to do it with v3/v4 was...
Svelte 4
@@justinoneill2837 Yep, we use it in both Svelte and Astro still
This was very nice, I like this format.
Thank you! Back this Weds with a Potluck episode.
I have been a listener for years and I could never remember which voice belonged to which Twitter profile picture, I am glad to see the new video format! Will definitely keep me more engaged, I am looking forward to more from you two, thanks guys!!!
You aren't the only one who's said that. Glad to hear you liked the new format, I think it's only going to get better from here. We're listening.
Weeeeeeeeeelcome to syntax 0:00
video version doesn’t have the breathy outro. Thank you 🙏
Wooo! This is great. With all the video content I saw coming out on Twitter I was sort of hoping this would happen someday. Would be pretty neat to also see a video version in Apple Podcasts, too (no pressure). 😊
We're trying to figure that out rn. Video podcasting feeds is very rough rn outside of UA-cam. We've even talked about building our own.
Hi! I listened to this episode when it first came out, but I hadn't started learning Svelte then. I just started learning recently, but I'm a bit confused because all the beginner Svelte 5 content seems to be aimed at people who already know Svelte 4. I did the Svelte 4 tutorial, but getting it to stick takes time. Do you know any beginner-friendly Svelte 5 videos that you can recommend?
Also, while I'm here, I keep reading/hearing about how Rune will replace stores, but I don't fully understand how. To practice, I am trying to convert a static site to Svelte. I have a list of activities (walking, running, skating, cycling) and each of these have their own page on the static site. I moved all the activities to an activities array and I need to share that data with the +page.svelte and the Header component. I am guessing the way to do it is to create the array of activities in the +page.svelte and then pass it as a prop to the Header - as I was writing this out, I actually think I started to understand, but let me finish anyway in case it helps others - on the +page.svelte, I access the data from the load function, but to do that, I need to use `let { data } = $props();`. Once that has been added, if I try to use `export let activities....`, I get an error saying that I cannot use `export` because the file is a rune file. Now, my understanding was that I always needed to use `export let` in order to refer to the variable in the html, but now I see I can just use `let` and the `export` was just for reactivity. Thanks, rubber ducking.
Since Svelte 5 isn’t fully released yet, you’ll probably have to wait. However sub to this channel because we’ll be releasing a course on exactly that. Svelte 5 for everyone, not just current Svelte 5 users
@@syntaxfm Thank you! I've been listening to Syntax for years (it's my favourite podcast) and have been getting excited about Svelte for ages. I had some other things I needed to learn first, so it's been on the back burner, but looking forward to focusing on it now.
Speed, simplicity, size - don't forget that a 5 also looks like an S for more synergy
Good to see you guys on UA-cam. Listen to your podcast. Now how is it that you have high quality video? Are you using Riverside?
We’re using Riverside but the frame rate isn’t always great. We’re working on a fix.
@@syntaxfmnow I’d like to try riverside for myself. Thanks
I really enjoy the svelte content. I'm excited for v5!
The answer is no if you want a job or contract in the industry. Maybe, if you are just doing your own thing.
But more seriously, it's great you have the podcast on UA-cam with the show notes! Sentry is putting their marketing dollars to good use
The issue with Svelte is that it isn't widely adopted, particularly among enterprise companies. They predominantly use Angular and React.
Just subbed! happy to finally have some video
When I listen to the podcast, I always imagined you two to be in 60fps.
I think you can still get into infinite loops if you change a state rune inside an effect that at the same time uses that state rune.
I think they are adding a warning for that to prevent users from attempting.
I'm kinda bummed about the removal of "on:" and the pipe " | preventDefault" stuff but overall happy with everything else
At first I felt the same and I still miss the pipe. But in practice the onclick works great.
for the "on:click" i really liked the visual separation with the ":" but that said i've also just learned to not question Svelte's breaking changes like i did with kits "+" folder structures (that i cant live without now) 😅@@syntaxfm
smaller API surface is king, I'd have to check it out to see that for myself
love the video format !!
Glad to hear it, we’ve been wanting to do this forever
Class as a prop was always a big deal for me when working with tailwind. I would constantly name it something else...
does anyone know where I can find the same headphones pads on the left person but for Sony wh-1000xm4?
They are these amzn.to/3SuWYUW
Wes talks about them at the end of ep syntax.fm/show/669/the-svelte-sveltekit-show
It's the svirste episvode of svntax and the shvow sveatures Svelte! Is it worth svitching?
I tried svelte once, and quickly noticed that it required a node web server. So I instantly threw it away. Very nice it's small and fast. But if I can't put it on any SERVER it won't be universal usage.
Not a fan of node? You can use other JavaScript runtimes but yeah just JS for now
Not all web hotels have a node server for you to use.@@syntaxfm
Web hotels?
👍🏻 just for those awesome goofy faces in the beginning 🎉
🥳
Like this format
will this real-world svelte 5 app be open sourced? will you generate content explaining how you built it and the decision you made? (I hope you will, btw)
Available here : github.com/stolinski/svelte-5-drizzle-sveltekit-2-example
Snippets can have multiple arguments now 👍
Love that change
More Svelte please! It's like coding 3 years in the future.
Thee moment when, your mental image of the voices collides with reality!
But I wasn't far off. 🤪
Voices are way different, since UA-cam doesn't skip silence and runs at 1.5~
😢😢You don't show code
While we’re an audio podcast moving to video, rest assured we’ll not only be showing code soon but will be doing breakdowns and tutorials as well
Hello video
Hello
Still watching early into the episode, but I though S5 was things on top, not many breaking changes. Why not to update?
It’s not breaking anything in terms that your older code will still work, but when you start using Runes, you can’t mix techniques in a component
"Magical, not magic."
Almost feel weird seeing your faces. So used to only hear your voices. Very nice tho! Now you're able to show some examples of what you actually talk about!
We have big plans there and have heard everyone who wants more code.
Svelte 5 runed Svelte experience. Readibility is ruined. Dev productivity is ruined. Sad because i love Svelte
Give it a real try. In my experience it's now much easier and more readable with Svelte 5. Less mysterious and just as simple
Svelte 5 rocks !! It took me a month to understand the benefits.
sorry but slots are WAY more intuitive than passing in components as props and far less ugly, in my opinion. I hope that does not become the norm because thats something i disliked about react code...
I think this is something you'll get used to and end up loving. There are def some upsides here. (I liked slots too)
agreed. slots especially named slots are extremely intuitive. with the switch though, svelte looks like it's moving towards a developer centered approach, compared to the one it has now, which is to enable non tech people to build uis
But you can't just use html spec thing for your language, I'm happy that rich is moving away from changing the language and that he has learned that this is not how you fix the web.
Bro looks like AI generated
Which one?
Why svelte over qwik. Svelte has scale limitations. Qwik doesn’t.
How is this not spoken about?
What exactly are the scale limitations?
They lost me with "runes", I'm done with "Svelte", sorry guys.
Which part lost you? I'm sure the Svelte team would love the feedback.
@@syntaxfm Well, maybe I'm not the brightest crayon. I meant to say that it does seem complicated, like non-trivial. I'm sure if someone puts their mind to it, they'll get it. But for me it's just feels extremely confusing. I guess I was trying to go with Svelte, because it appeared easier than React. Well, at least that's how it was perceived by me. But now that Runes are coming, it doesn't seem to be any easier than React, so I might as well learn React. I guess Svelte was always meant to be a "side-thing" for people who know React already. But I didn't "get the memo", so I was learning Svelte for my side-project as an alternative to React, with an understanding that it'll be easier. And "runes" sort of take that "gloss" away. Anyways - I'm sure that complexity is technically inevitable, and now that's clear. I'm sure there are good reasons for using Svelte over React (like speed or something), but that wasn't the reason for me. So, for now, I'm done with Svelte.
@@syntaxfm It became too complex - I might as well learn React now.
@@not_a_human_beingI tought the same at first but now I can see all the huge benefits of svelte 5
Syntax listener since episode 1! The face off style video is creepy. Please shoot straight on.
Sk5 RC. In Runes Mode, $:, slots, ":" (eg on:click"), |preventDefault", onMount() gone. RIP. Still looking for greater clarity on when to use effects vs derived / derived.by.. Rick says if you find you are using $effect a lot, rethink derived! Laughed when you said dont worry about infinite loops. Never hit infinite loops before SK5 but lots of times trying to get derived/effect right. You really have to reconsider/rethink reactivity to avoid infinite loops. Not as simple as it was. Converted a small app that worked with SK4 with 7 $: cut to 4 $effects in SK5, after many infinite loops!
17:47 it's so cute to see Svelte developers trying to explain how React works 🥹
Both of us have been writing React since 2015. Been through all of the painful api and syntax changes.
@@syntaxfm what do you think is going to happen when you try to run useEffect during SSR? :-)
I know what you were trying to say, but what you did say is really funny :)
Have you never had to reach for useIsomorphicLayoutEffect? I've never been able to use a layout effect in a serverside context without reaching for a 3rd party solution. Is that no longer accurate?
I did hear about it! But:
- what you said is "you can't use useEffect if you have SSR", this is wrong because of course you can because you are thinking about useLayoutEffect, not useEffect. And of course you can't :) because it's not going to do anything on the server
- second is that use of this hook is always was discouraged by docs, but you make it sound as if this is somehow a valid everyday concern that React developers have to deal with