7 Projects To Learn Svelte 5

7GUIs in Svelte.
🔴 Patreon: / joyofcode
𝕏 Twitter: / joyofcodedev
💬 Discord: / discord
🔥 Uses: www.joyofcode....
🔗 Svelte 5: svelte-omnisit...
🔗 7 GUIs: eugenkiss.gith...
🔗 GitHub: github.com/joy...
🔖 Timestamps
0:00 Intro
1:10 7GUIs
1:53 Sponsor
2:08 Svelte 5
2:26 Counter
4:29 Temperature Converter
10:26 Flight Booker
19:45 Timer
25:37 CRUD
38:36 Circle Drawer
53:58 Cells
1:14:11 Outro
#joyofcode #sveltekit #svelte

[@JoyofCodeDev]

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.

[@farang_lao]

Lovely site design. Giving the cli a go shortly, great work 👏

[@sistana]

Thanks My dear friend You are a very good person, thanks again

[@bmehder]

Serif-gate

[@JustPhred-m4g]

Thank you so much for working through these projects in this way. You presented so many techniques and approaches to breaking down a problem in the context of Svelte/Svelte5. Recognizing the ways one can leverage the out-of-the-box reactiveness at the core of Svelte is key ... I'm still working on that! Again, thank you. Please keep doing what you do!

[@prashlovessamosa]

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.

[@bmehder]

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.

[@SoreBrain]

I'm hyped for all the upcoming svelte 5 content

[@SRG-Learn-Code]

This is really good. Really, really, really, really good.

[@webstuffzak]

Brilliant. Love your videos as always. Also never fails to make me chuckle.

[@kingsgambit9284]

Right video at right time

[@EliSpizzichino]

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`))`

[@JoyofCodeDev]

yeah I forgot about that 😄

[@wyndmill]

this is an excellent tutorial, thanks for covering everything

[@garlandcrow]

Thanks for the course on CSS

[@JoyofCodeDev]

hello my frontend friends

[@dannymendiola]

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 🎉

[@fmaiabatista]

Didn't watch the full video, can you share the timestamp?

[@dannymendiola]

​@@fmaiabatista6:47

[@dannymendiola]

@@fmaiabatista Sure starts at 6:47

[@c.1977]

Superb content, thanks 🎉

[@dogfoxx]

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.

[@softgripper]

Hey Friend. Great video!

[@egrekov]

FANTASTIC

[@dlongodesign7026]

🎉 ‪You make it look so easy peasy lemon squeezy… that’s because it is!‬

[@dezly-macauley]

😎 Awesome stuff 👏👏👏

[@meka4996]

Svelte 5 has just been released!

[@jamesmoynihan948]

Nice video! Thanks for sharing. That first counter should probably be an not a disabled .

[@JoyofCodeDev]

I forgot this existed

[@jamesmoynihan948]

@JoyofCodeDev ya, pretty rare to need it, but this is a perfect use-case.

[@MohammadAbdalrazzak]

Thank you so much!, Such a kind person

[@pascaltib]

Amazing thanks for the video

[@jaam2232]

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

[@JoyofCodeDev]

it's just normal Brave, but I changed the system font to Monaspace Neon

[@BhideSvelte]

We missss you Matia on svelte 5 release on live stream 😢 we love your workkkk 🎉🎉🎉🎉🎉

[@JoyofCodeDev]

I was there 😂

[@dibbyo456]

Quality content

[@oddrobot5499]

10:08 it shows 0 celsius=0 fahrenheit, it should be 32 fahrenheit. Awesome video btw🎉

[@JoyofCodeDev]

if you want you can also do the conversion when reading the value

[@thedelanyo]

4:32 with the counter, since am not receiving user input through input tag, I guess it's safe to a div

[@realderek]

"Sharp C, the evil twin of C#" Haha

[@Kmps2341af]

any upadated ui library for svelte 5 ?

[@serychristianrenaud]

thanks

[@Yusran_Uca]

Svelte can svelt our stress

[@TheTripleKnight]

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 🙏

[@JoyofCodeDev]

there's always some bugs 🐛

[@TheTripleKnight]

@@JoyofCodeDev 😂 yes of course, just hoping you had an idea about a prevention/solution.

[@TheTripleKnight]

Forgot to thank you again for all your fantastic work btw, thanks

[@JoyofCodeDev]

I can't seem to reproduce it

[@TheTripleKnight]

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.

[@sledgex9]

At 57:46 it should have been Array(cols)

[@JoyofCodeDev]

thank you I fixed it

[@lasal7820]

❤

[@naldiojoaquim8920]

Please create more videos on week

[@mouniryounes]

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.

[@JoyofCodeDev]

that doesn't work

[@mouniryounes]

@@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!

[@ELHAUKEZ]

Is svelte kit supported with svelte 5?

[@JoyofCodeDev]

yeah

[@GoosebumpCinema]

what font do you use?

[@codingwithfazley]

That's probably Monaspace neon.

[@fabiogiolito]

Would have been better to use on the 1st project (at 4:15)

[@JoyofCodeDev]

thanks I'm going to update it

[@isaacfink123]

7:43 the evil twin of f# (also a language)

[@bustopgamer5802]

Not sure about you but I hate these getters and setters. Can you make a video where we don't use those?

[@JoyofCodeDev]

you can watch my Svelte 5 runes guide: kzbin.info/www/bejne/qnbVfKyrirmtqa8

[@danielrincodev]

Daaaamn

[@j.m.manhard]

First 🎉

[@PanopticMotion]

Slow down! I have never had to slow a video down! WTF :) Why you in a hurry :)

[@devgauravjatt]

Learn Svelte with joy of code easy pasy 😅

[@TomislavMiletic]

The video is great, but is hard to follow, beginners will not be able to understand the "why"

[@JoyofCodeDev]

I think you learn the why through the exercise

[@khalilayari3230]

holy shit they just killed the only thing that made svelte 4 attractive for some rare edge cases

[@isaacdruin]

WHAT WAS THE THING?!

[@khalilayari3230]

@@isaacdruin developer experience and intuitive syntax is the thing.

[@isaacdruin]

​@@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.

[@greendsnow]

Getters and setters? Svelte 5 is born dead.

[@JoyofCodeDev]

I guess JavaScript is dead