Svelte 5 Basics - Complete Svelte 5 Course for Beginners

Поділитися
Вставка
  • Опубліковано 21 гру 2024

КОМЕНТАРІ • 111

  • @mcd1814
    @mcd1814 10 днів тому +3

    It‘s insane how good this course is. Clear explanation, not to slow, good examples and up to date. And above all, not filled with ads every 2min. Thank you so much, this is to good to be true.

    • @syntaxfm
      @syntaxfm  10 днів тому

      Sincerely appreciate it. More on the way.

  • @RU-rx3ef
    @RU-rx3ef 9 годин тому

    You may or may not see this but this is my first time learning a framework. Your instructions and the way you teach is very understandable from a beginner's standpoint and I appreciate the work!

  • @naldiojoaquim8920
    @naldiojoaquim8920 2 місяці тому +71

    Please create more videos about svelte 5

  • @arvi8843
    @arvi8843 2 місяці тому +37

    Thanks! Hope for more advanced course in Svelte 5/Sveltekit. 🔥

  • @boscodsouza5087
    @boscodsouza5087 Місяць тому +4

    This is very helpful for me, a Svelte5 beginner. Thank you Scott & Syntax. 🙏

  • @marlopainter8246
    @marlopainter8246 2 місяці тому +9

    I had no idea 'sv create' existed. I was using 'create svelte@latest' .... sv is way better. I used 'bunx' instead of 'npx' and it was the same. Since the video, it asks which package manager to use, and many are listed. I chose bun and it set it up with bun and even gave the bun commands at the end. I love Svelte! Thanks for the video!

    • @BhideSvelte
      @BhideSvelte 2 місяці тому +4

      It was released yesterday...on svelte summit October 19 th

    • @marlopainter8246
      @marlopainter8246 2 місяці тому +1

      @@BhideSvelte I guess that explains why I never heard of it. 🤣

  • @usernamesSux9
    @usernamesSux9 2 місяці тому +3

    Svelte 5 just released! Woohoo! I am definitely looking forward to more Svelte 5 videos from Scott

  • @kurtwillrich7795
    @kurtwillrich7795 4 дні тому

    This is a fabulous video! Very well spoken and I love the explanations and the way you cover various ways of doing the same thing (while explaining the differences behind it). 5 out of 5 - great job!!!!!

  • @kozmikhero6749
    @kozmikhero6749 8 днів тому +1

    This video has taught me I want to use JSDocs instead of typescript. Plus svelte 5 is cool

  • @IFIListen
    @IFIListen 2 місяці тому

    Thanks for the tutorial, definitely looking forward to advance Svelte 5 + Sveltekit tutorial. 🔥

  • @ontheruntonowhere
    @ontheruntonowhere 21 годину тому

    Great course! One small request for the next ones: please put the browser window in dark mode with Dark Reader or something similar? Two hours of that white is really exhausting. Thank you! Liked and subbed, love the podcast too.

  • @rudymundek
    @rudymundek 2 місяці тому +2

    I'm upgrading from Svelte 4, and this tutorial is making it very easy to do so. Thanks!

  • @AmanuelTadesse-w8m
    @AmanuelTadesse-w8m 2 місяці тому +4

    This channel is on fire 🔥🔥🔥

  • @tofu_u
    @tofu_u 2 місяці тому

    Thanks for this Scott 🙏 Hoping for a lot more Svelte 5 content in the future!

  • @Александр-ч4п5ъ
    @Александр-ч4п5ъ Місяць тому +1

    Thanks for the tut! More intermediate svelte videos please

  • @BrandonTingVGC
    @BrandonTingVGC Місяць тому

    happy to see class coming back. Thanks!

  • @prashlovessamosa
    @prashlovessamosa 2 місяці тому +8

    Mr Scott
    Please cover sveltekit too after this totally loved it please don't forget to complete this series as I am still rooting for the third video of local first series😅.

    • @syntaxfm
      @syntaxfm  2 місяці тому +3

      The third local first video was derailed by the soon arrival of Zero. I'll be redoing it with Zero very soon once it's released.

    • @prashlovessamosa
      @prashlovessamosa 2 місяці тому

      @@syntaxfm great can't wait for it thanks.

    • @joloppo
      @joloppo 2 місяці тому +2

      What's Zero?

    • @drayfull5049
      @drayfull5049 26 днів тому

      ​@@syntaxfmI look forward to zero local first series and more advanced Svelte 5 videos. I like the direction of these ideas. This will make for an easy way to build some real nice apps. Thank you for sharing!

  • @fennecbesixdouze1794
    @fennecbesixdouze1794 2 місяці тому +4

    @1:41:50 I can't even begin to explain to you how much nicer this is in Vue with just "ref".
    To get the most recent value it's just "name.value", to set it it's just name.value = "New Name". It's simple, easy, always consistent, doesn't require writing mountains of boilerplate setters and getters etc, and you can return "name" out in an object and destructure it too and it just works and doesn't lose reactivity.
    And if you want to expose only the API you want, that's easy too: you just write the getters and setters in that case. The point is that ref/reactive are the simple primitives on which you build other reactive "composables". Vue also has by far the best and most mature collection of pre-built composables in the "VueUse" project.
    Signals are the future, and the ref/reactive API is so much nicer DX than Svelte 5's mess of boilerplate getters and setters or Solid's array destructuring nonsense. Time for people to stop sleeping on Vue.

  • @thedelanyo
    @thedelanyo 2 місяці тому +1

    19:56 in Svelte, that name variable would be infered. So does it mean, there's no inference in Svelte 5 components? 🤔,
    Edit: this is now clearly explained, with default value. 37:15

  • @sureshmutluru4532
    @sureshmutluru4532 Місяць тому

    Looking forward for more tutorials on Svelte

  • @manuelalejandrosaezpalomin3904
    @manuelalejandrosaezpalomin3904 Місяць тому

    Awesome!!!! I hope the advance course!

    • @syntaxfm
      @syntaxfm  Місяць тому +1

      Def will be coming.

  • @cholasimmons
    @cholasimmons Місяць тому +1

    I was porting a personal project over from old Svelte (3/4) to 5,
    I wish i watched this video first, gosh, it's got everything you need to know!
    But feel free to make a tutorial on page transitions, both the old way and the View Transitions API please 🙏

    • @syntaxfm
      @syntaxfm  Місяць тому +1

      Thank you! More coming.

  • @hosseinse4079
    @hosseinse4079 Місяць тому

    tnx i watched this and it was very handy .. cuz all other learning courses are from svelte 4

    • @syntaxfm
      @syntaxfm  Місяць тому

      Glad to hear it. More on the way

    • @hosseinse4079
      @hosseinse4079 Місяць тому +1

      @@syntaxfm one thing that i like to mention is ... we prefer to watch 3 30 mins video like part 1 part 2 part 3 than one long time ..

  • @itskazem
    @itskazem Місяць тому

    great, I'm looking forward for intermediate or advanced videos of svelte 5 or even svelteKit after it newer version released

  • @2u841r
    @2u841r 2 місяці тому

    Awesome! Thank You 🎉

  • @seenonmymind
    @seenonmymind Місяць тому +1

    Stupid question: at 9:10 how did he select prettier and eslint without running the command? I press enter and it runs without selecting anything.

    • @Counterfeit85
      @Counterfeit85 Місяць тому +2

      Navigate the list with arrow keys and select an entry via spacebar. Then you press enter 😊

  • @sukumaar357
    @sukumaar357 4 дні тому

    This is greatly helpfull :-)

  • @naldiojoaquim8920
    @naldiojoaquim8920 2 місяці тому +2

    Very amazing

  • @randyv744
    @randyv744 Місяць тому

    Thanks Scott!

  • @dei8bit
    @dei8bit Місяць тому

    Nice extension , i like that things

  • @smithdoesstuff
    @smithdoesstuff 2 місяці тому +11

    How long is the course?!? I wanna block my calendar so no one bothers me. HELP!!!

    • @isaacdruin
      @isaacdruin 2 місяці тому

      If it's longer than four hours I'll be shocked.

    • @syntaxfm
      @syntaxfm  2 місяці тому +5

      1.5 hours ish.

    • @smithdoesstuff
      @smithdoesstuff 2 місяці тому +5

      @@syntaxfm nice! That’s the sweet spot of just enough information and attention span expiration. I’ve started with Svelte/kit using their docs but I’m wanting some more real world actual developer perspective on the basics.

    • @smithdoesstuff
      @smithdoesstuff 2 місяці тому +1

      @@pookiepatsI hope that was sarcasm, didn’t think being excited for content was brown nosing

    • @smithdoesstuff
      @smithdoesstuff 2 місяці тому +1

      @@pookiepats nah! Just can’t ever tell on YT, we good.

  • @mihaiandrei434
    @mihaiandrei434 Місяць тому

    Thanks for the video! Also enjoying the theme🙏. Does anybody know the font he is using?

    • @syntaxfm
      @syntaxfm  Місяць тому

      Theme is Syntaxfm. Font is MD IO (Mass Driver IO)

  • @kanways8
    @kanways8 2 місяці тому +1

    I love svelte and I have developed some apps using sveltekit. The main reason of not choosing svelte always is there are no UI libraries like shadcn. I know there is community maintained shadcn-svelte package but I don't much of a fan of it. Also I'm not good at design, I want to know is there any tips you can give me to boost my productivity with svelte while building the UI.

  • @lucasgiunta8874
    @lucasgiunta8874 2 місяці тому +1

    finally we can use {type} in a input

  • @b.m.8517
    @b.m.8517 День тому

    If I wish to use class-based state management (state with classes) do I need to use TypeScript or can I simply use JavaScript?

  • @ok-alarm
    @ok-alarm 2 місяці тому +1

    NICE!!!! thanks for this

  • @mylastore
    @mylastore 2 місяці тому

    Does SvelteKit with Svelte 5 support Deno 2, or is it too early given that Deno 2 was just released?

    • @syntaxfm
      @syntaxfm  2 місяці тому

      It does. I believe you just use the Deno adapter and you are gtg

  • @remcoe33
    @remcoe33 Місяць тому

    I would like to know more about state that is coming from multiple child components. I'm the typical backend dev that needs a frontend ;). And had a really hard time to get the state correct in a "edit product" it is basically a big form but split into component’s and those could have components as well. (like table and row).

  • @laplantepierre
    @laplantepierre Місяць тому

    I notice that sometime the component header was loaded twice in the rendering page (npm run dev) Is this a bug in svelte5 ?

  • @SDAravind
    @SDAravind 2 місяці тому +30

    Next course with Deno + Svelte 5

    • @winfredj9820
      @winfredj9820 2 місяці тому +6

      bun + svelte 5 is better

    • @SWard-oe8oj
      @SWard-oe8oj 2 місяці тому

      Why? ​@@winfredj9820

    • @Mr.BinarySniper
      @Mr.BinarySniper 2 місяці тому

      @@winfredj9820 Bun is biter 🤣

    • @ThatRandomDude914
      @ThatRandomDude914 2 місяці тому

      @@winfredj9820agree

    • @2u841r
      @2u841r 2 місяці тому +1

      No, until bun supports Next.js 😁

  • @rich_lloyd_judd
    @rich_lloyd_judd Місяць тому

    Your ultra-minimal browser looks amazing for dev and videos, what is it??

    • @syntaxfm
      @syntaxfm  Місяць тому

      Arc Browser

    • @rich_lloyd_judd
      @rich_lloyd_judd Місяць тому

      @@syntaxfm Heck yep!! Developer mode, I had no idea that was a thing. Thanks for reply 🙏

  • @dei8bit
    @dei8bit Місяць тому

    if both "npx sv create" and "pnpm create vite" ask you what you want to use, what is the difference?

  • @albertjoelbonilla
    @albertjoelbonilla 2 місяці тому

    What theme do you use in your editor?

  • @TheTripleKnight
    @TheTripleKnight Місяць тому

    Can we get more in depth on state, state management, how to handle app wide, shared state?

  • @ozgurNY
    @ozgurNY Місяць тому

    I found Svelte5 official docs difficult to understand. Thanks for the video.

  • @syfenx
    @syfenx 2 місяці тому +1

    Nice stuff, even you are haunted by vscode popups when you select text, make it stop!

    • @syntaxfm
      @syntaxfm  2 місяці тому +1

      I swear I've turned them off 100 times.

  • @Aakash-j2e
    @Aakash-j2e 2 місяці тому

    is remix on the list?

  • @prashlovessamosa
    @prashlovessamosa 2 місяці тому +2

    I have some confusion regarding svelte and Sveltekit
    Does Svelte have routing support as like we have react router for react
    Another question Svelte 5 is on the horizon.
    Shall we get Runes support in Sveltekit too after the stable release of Svelte 5.

    • @syntaxfm
      @syntaxfm  2 місяці тому +3

      In the most simplified way to relate. Svelte is React. SvelteKit is NextJS

    • @isaacdruin
      @isaacdruin 2 місяці тому +2

      Svelte does not have routing support, it's just the front-end portion.
      Chat just informed me that Svelte 5 was just released! Rich stated on his twitter that there will be an announcement blog post on Monday.
      SvelteKit does have full runes support!

    • @prashlovessamosa
      @prashlovessamosa 2 місяці тому +1

      I got it I was so confused I found the channel name joy of code I am learning svelte but had no idea about sveltekit but now I know that's nuxt for svelte " pages router ".
      Thanks again for the clarification.

    • @isaacdruin
      @isaacdruin 2 місяці тому +2

      @@prashlovessamosa Joy of Code is the man!

  • @mirekwad
    @mirekwad Місяць тому

    Why doesn't Sveltekit use island architecture ?

    • @syntaxfm
      @syntaxfm  Місяць тому +1

      Great question. Let’s have Rich on the show again and ask him.

  • @prestongovender5715
    @prestongovender5715 Місяць тому

    Let’s build a cool project with svelte5 , there’s not many good project based tutorials on UA-cam.

    • @syntaxfm
      @syntaxfm  Місяць тому

      What kind of project would be interesting?

    • @prestongovender5715
      @prestongovender5715 Місяць тому

      @@syntaxfm a type of SAAS project or a clone. There’s a ton on next js but haven’t seen any svelte based Saas projects yet.

    • @greeneyed-px5pd
      @greeneyed-px5pd Місяць тому

      @@syntaxfm Saas starter kit with multi-user accounts featuring Signup, email activation, reset password, login/logout, creating an organization, and adding new users to the account via invitation emails.

  • @isaacdruin
    @isaacdruin 2 місяці тому

    Excited!

  • @Loui3Hunna
    @Loui3Hunna 2 місяці тому

    Let’s go!

  • @ThatRandomDude914
    @ThatRandomDude914 2 місяці тому +4

    Who is the teacher?

    • @prashlovessamosa
      @prashlovessamosa 2 місяці тому +1

      It doesn't matter 😅 all of them are good.

    • @syntaxfm
      @syntaxfm  2 місяці тому +6

      Scott. He's done a bunch of Svelte courses for Level Up Tutorials going back to Svelte 3

  • @mepkn
    @mepkn 2 місяці тому

    Why didn't they go with
    # if
    #else
    #endif

  • @MrDevianceh
    @MrDevianceh 2 місяці тому

    sveltekit wen?

  • @armanrozika
    @armanrozika Місяць тому

    hmm i can see why some people hate the runes

    • @syntaxfm
      @syntaxfm  Місяць тому

      What part makes you feel that way

  • @faridhoque4235
    @faridhoque4235 2 місяці тому

    sir, font name plz

  • @tom9380
    @tom9380 2 місяці тому

    so basically snippets are just inline components.