I love learning through projects. It's just more enjoyable, and it prevents me from having to think of a project to implement while I am trying to learn at the same time. I hope you make more videos like these.
Thanks for the tip about using classes for universal state, it's soo much cleaner! I was just using a regular object for each piece of state, wrapping them in a class solved all the hoops I was having to jump through 🎉
Thanx for the awesome tutorial! Been looking forward to Svelte 5 but haven't yet practiced any of the new features. I'm following along as you write, but damn... I'm surprised my code works because you type much much faster than I do 😂. Still, this teaches me a lot and gets me excited to build something with all the new stuff.
This is epic, I have to watch it again and again and take notes. you should have highlighted this gem: `const example = $derived(import(`../../../examples/${$page.params.example}/index.svelte`))`
For the Circles Drawing example, rapidly clicking the canvas causes the next circles to be drawn in the wrong location, I assume this is something to do some interim step where its still updating perhaps $effect or tick would be a solution - I need your knowledge and wisdom to shed some light 🙏
Probably just me missing something, it was trying to calculate the top/left domrect when clicking on an existing circle therefore calculations for the next based off of the circles position - fixed by binding a ref to the main svg stage and using that for the domrect offset. However like I said it’s probably my fault for not following along properly. Soz for wasting any of your time.
@@JoyofCodeDev Yes it does not because the actual problem is a hardware computational problem try adding 0.1+0.1+0.1 in you console. So once you reach 5.0 it is actually 4.99999999999 this is why it loops one more time and results in 5.09999999999 which is interpreted as 5.1 (this is why you used toFixed to remove the extra WEIRD digits). My comment was on the logic, so the actual solution is my comment + instead of elapsed+=1 use elapsed =(+elapsed+0.1).toFixed(1) and remove the .toFixed(1) from the div, it should work since you're fixing it before checking elapsed >=duration. And btw I guess everyone appreciates your great work and dedication, thank you for what you're doing. Appreciate it!
@@khalilayari3230 there are seven runes to learn and everything else is basically the same as Svelte 4. I would argue that they are more javascript-like and idiomatic to javascript than $: or 'export let', for example. Global state is less of a pain, state in typescript files... I just started wrapping my head around it all, but so far I would say you're dead wrong.
The official docs aren't live yet but you can go to svelte-omnisite.vercel.app/ and use the new Svelte CLI with `npx sv create` to create a project.
Lovely site design. Giving the cli a go shortly, great work 👏
Thanks My dear friend You are a very good person, thanks again
Serif-gate
I have seen your tweet thanks for sharing this I have just completed the Svelte crash course on the Syntax channel this is so helpful thanks.
I love learning through projects. It's just more enjoyable, and it prevents me from having to think of a project to implement while I am trying to learn at the same time. I hope you make more videos like these.
This is really good. Really, really, really, really good.
Thanks for the tip about using classes for universal state, it's soo much cleaner! I was just using a regular object for each piece of state, wrapping them in a class solved all the hoops I was having to jump through 🎉
Didn't watch the full video, can you share the timestamp?
@@fmaiabatista6:47
@@fmaiabatista Sure starts at 6:47
I'm hyped for all the upcoming svelte 5 content
🎉 You make it look so easy peasy lemon squeezy… that’s because it is!
this is an excellent tutorial, thanks for covering everything
Brilliant. Love your videos as always. Also never fails to make me chuckle.
We missss you Matia on svelte 5 release on live stream 😢 we love your workkkk 🎉🎉🎉🎉🎉
I was there 😂
10:08 it shows 0 celsius=0 fahrenheit, it should be 32 fahrenheit. Awesome video btw🎉
if you want you can also do the conversion when reading the value
Thanx for the awesome tutorial! Been looking forward to Svelte 5 but haven't yet practiced any of the new features. I'm following along as you write, but damn... I'm surprised my code works because you type much much faster than I do 😂.
Still, this teaches me a lot and gets me excited to build something with all the new stuff.
Thank you so much!, Such a kind person
Svelte 5 has just been released!
Nice video! Thanks for sharing.
That first counter should probably be an not a disabled .
I forgot this existed
@JoyofCodeDev ya, pretty rare to need it, but this is a perfect use-case.
Hey Friend.
Great video!
Thanks for the course on CSS
hello my frontend friends
Thanks for your content, it's very underrated.
How did you customize your browser? It looks very clean and with the mono font it looks great
it's just normal Brave, but I changed the system font to Monaspace Neon
Superb content, thanks 🎉
Amazing thanks for the video
FANTASTIC
"Sharp C, the evil twin of C#" Haha
Quality content
😎 Awesome stuff 👏👏👏
4:32 with the counter, since am not receiving user input through input tag, I guess it's safe to a div
thanks
Daaaamn
Svelte can svelt our stress
At 57:46 it should have been Array(cols)
thank you I fixed it
Please create more videos on week
❤
This is epic, I have to watch it again and again and take notes.
you should have highlighted this gem:
`const example = $derived(import(`../../../examples/${$page.params.example}/index.svelte`))`
yeah I forgot about that 😄
For the Circles Drawing example, rapidly clicking the canvas causes the next circles to be drawn in the wrong location, I assume this is something to do some interim step where its still updating perhaps $effect or tick would be a solution - I need your knowledge and wisdom to shed some light 🙏
there's always some bugs 🐛
@@JoyofCodeDev 😂 yes of course, just hoping you had an idea about a prevention/solution.
Forgot to thank you again for all your fantastic work btw, thanks
I can't seem to reproduce it
Probably just me missing something, it was trying to calculate the top/left domrect when clicking on an existing circle therefore calculations for the next based off of the circles position - fixed by binding a ref to the main svg stage and using that for the domrect offset. However like I said it’s probably my fault for not following along properly. Soz for wasting any of your time.
25:00 Using if(elapsed > duration) you are forcing it to go over and then trying to fix it. Use if(elapsed >= duration) and it should be no problem.
that doesn't work
@@JoyofCodeDev Yes it does not because the actual problem is a hardware computational problem try adding 0.1+0.1+0.1 in you console. So once you reach 5.0 it is actually 4.99999999999 this is why it loops one more time and results in 5.09999999999 which is interpreted as 5.1 (this is why you used toFixed to remove the extra WEIRD digits).
My comment was on the logic, so the actual solution is my comment + instead of elapsed+=1 use elapsed =(+elapsed+0.1).toFixed(1) and remove the .toFixed(1) from the div, it should work since you're fixing it before checking elapsed >=duration.
And btw I guess everyone appreciates your great work and dedication, thank you for what you're doing. Appreciate it!
any upadated ui library for svelte 5 ?
what font do you use?
That's probably Monaspace neon.
7:43 the evil twin of f# (also a language)
Is svelte kit supported with svelte 5?
yeah
Would have been better to use on the 1st project (at 4:15)
thanks I'm going to update it
Learn Svelte with joy of code easy pasy 😅
First 🎉
The video is great, but is hard to follow, beginners will not be able to understand the "why"
I think you learn the why through the exercise
holy shit they just killed the only thing that made svelte 4 attractive for some rare edge cases
WHAT WAS THE THING?!
@@isaacdruin developer experience and intuitive syntax is the thing.
@@khalilayari3230 there are seven runes to learn and everything else is basically the same as Svelte 4. I would argue that they are more javascript-like and idiomatic to javascript than $: or 'export let', for example. Global state is less of a pain, state in typescript files...
I just started wrapping my head around it all, but so far I would say you're dead wrong.
Getters and setters?
Svelte 5 is born dead.
I guess JavaScript is dead