Around 44:45 a few minutes got cut off when I created the Button.svelte component. It's not a big deal, you can see the code, but it cut out me creating it. Sorry about that. Also, the repo is in the description if you need to see any part of the code.
00:20 What is Svelte 00:49 Compare to React 01:39 Why use Svelte 03:16 What should you know first 03:45 Svelte Component 04:46 How to get started 05:14 Project overview 06:30 Let's get started 08:01 VS code extension 08:17 Generated files explained 11:29 Basic fundamentals 15:47 Conditionals 17:16 Foreach loop 20:20 Starting a real-world application 01:03:34 Adding some transitions 01:06:02 Stores
@@vectoralphaSec Thank you. I have been following Brad for about 10 months now, I have completed Brad's Modern HTML & CSS and Modern JavaScript courses, where I gained the most knowledge, but his free content on youtube is also enough to get a job. Good luck.
When Svelte enters the room, the poor react, vue and angular bow down the king. But when "neo.mjs" enters the room, the svelte bows down to the legend.
This is the BEST SVELTE VIDEO FOR BEGINNERS, I recommend this one to everyone who wants to learn Svelte. And yesterday, on DEC 14, 2022 as a historical moment, Sveltekit 1.0.0 was officially RELEASED, so the formerly beta version is now fully stable, official version! CONGRATULATIONS to the Svelte & Sveltekit Team!! :)
When Svelte enters the room, the poor react, vue and angular bow down the king. But when "neo.mjs" enters the room, the svelte bows down to the legend.
This is an amazing video for beginners, thanks for making it free 🙏 Tip that could be useful for someone: instead of typing all html radiobuttons one by one a foreach can be used like this: {#each [1,2,3,4,5,6,7,8,9,10] as currRating}
Great tutorial as always. As a bonus, you could implement the each loop instead of hardcoding all ten rating selections: {#each [...new Array(10)].map((_, i) => i + 1) as rating}
Thank you Brad for this crash course. I had asked you on Twitter if you are planning a crash course on Svelte and you had said "Yes " and you delivered 👍
I have been waiting a long time for Brad to make a course like this! I have wanted to study svelte for a while now and Brad makes it easy. Love to you and your family!
3 года назад+8
nice to see some love for svelte, being using it for 1 year and half in production, never going back to react lol, great content
I’m looking to learn svelte, coming from react would you say that it’s just an easier tool compared to react? Sorry I’m just learning and hoping to get some insight
When Svelte enters the room, the poor react, vue and angular bow down the king. But when "neo.mjs" enters the room, the svelte bows down to the legend.
If you are running an m1 mac, you may get an error when you npm run dev for the first time "You are not authorized to view this page" or similar. Port 5000 is being used by the airplay receiver, you need to use a different port. In package.json, add --port "new port number here" without the quotes to the start script and you're good to go. This will also change what port the dev script uses.
Oh man I'm, so happy you're doing svelte kit. I got my start as a react dev with your videos. Now we've migrated to Svelte Kit and I'm struggling. Your content makes learning this so much easier. I hope you do a bigger project with stores and reactivity if you have the bandwidth. Even a copy of one of your old react projects but built with svelte instead would be super helpful.
Thanks Friend! I just started getting into Svelte, coming from an Angular and Ember background. So much wow on how easy this is. Keep up the good work!
Thanks for the crash course, it's well done. Some constructive feedbacl: 7:28 degit doesn't clone, it downloads the tar for the latest commit, which is faster than cloning, and you won't get the commit history.
The ul inside the RatingSelect component can be easily refactored to not use the same code 10 times for each input: {#each Array(10) as _, index (index)}
This was great. Thank you. I'm stoked I was able to solve the challenge you set forth AND I was able to refactor on my own once you introduced the "store" concept. All the best!
Excellent! I'm looking at Svelte for plugins in Obsidian so I won't need some of the app boilerplate but this completely cleared up the brain fog. Time to watch a demo using the latest and check what's changed in the past 12 months.
For average and count I would do derived store. This would make it even cleaner code. Great tutorial, thought. Keep up with the Svelte, Brad! I think it has lots of potential and tutorials like this help people to learn about it. Thanks
Awesome tutorial as always, Brad. Thank you so much. Svelte really trolled us with these file extension names... I miss .js / .jsx - but the overall tech is awesome. Looking forward to more Sveltelteletle
This was a great intro to Svelte! I've been exploring a lot of front end frameworks like Angular and React. I honestly find that this is way easier to use then either of those based on this video. I'm going to have to make a few projects in it and try it out!
At 20:00, you can use list.push(object) as long as you reassign the reference of the list variable to itself like this: list.push(obj) list = list It is better I think, as it doesn't copy the whole content of the array, which could be a little slower with a large list length.
@@prch818 The program has to update the DOM according to the data, which doesn't happen by default. The compiler takes care of this, and regenerates the view when it recognises an assignment. However, it cannot detect all kinds of changes made by a simple function call. It would be hard for it to recignise. Therefore, you can say list = list and give it a hint that it should update the view.
First of all thank you very much, I was looking for some lightweight framework to make a simple but elegant website for a friend. Svelte is perfect for this kind of project
Excellent tutorial... I'm really considering migrating from React to Svelte... Things seem much much simpler with this framework. Thanks again for your work, man!
When Svelte enters the room, the poor react, vue and angular bow down the king. But when "neo.mjs" enters the room, the svelte bows down to the legend.
I’m a knockout js user and feel it’s simpler and cleaner. I could build this example in a fraction of the time with 75% less code using knockout. After 2 years of js development I really believe native js and knockout is the best combo
Very thankful for his work, but given changes have occurred, what version of Svelte dies relate to or up to? What has changed or no longer applicable. Around the 8:23 minute mark when it showing the package dependencies it shows 3.0.0 for the Svelte compiler. I think at one point there was a 'breaking change', one guy wrote a book and a month later Svelte changed so drastically that he said his book was out of date completely and basically not worth buying - I think it had everything to do with 'routes'. I am sure the basics are always there - or at least good to know the background of a project - to help you understand an on going continuously improving application/environment/programing language, etc. FYI MS Visual Basic had a 'language break' where nothing written in a prior version could be run with the new version - things change life must go on.
Hey Brad, solid video. Just a quick question though, wouldn't it be a bit more efficient in the feedback form component to make use of reactive values instead of creating the function that handles input? You could have one reactive value that checks if the length of text is correct, another reactive value for the disabled state of the button, and finally another one for the message, which is simply an empty string if the form is valid, or a string with your message if the form is not valid. Seems like you're missing out on Svelte's amazing reactive value system here, since two-way data binding for the text is already handled by the input.
Really nice video mate, thankyou! For anyone getting to the point where you have to do the dispatch and then create the event forwarding to pass things up to the main App - If like me you thought something like "hhmmm, that's kinda clunky", absorb it as an approach and wait for the Store implementation at the end - MUCH nicer, and worth it to see how much cleaner it is. Question! - So I can learn more, does anyone have a take on why you'd ever use that approach with the store technique being there? Is it a legacy approach that will just be used less? Having seen both in action I can't see an immediate reason to not use a store, even for a small app.
Even though I really like Svelte so far (I've created the Chart app with it and its very good and performant) I wouldn’t just jump into building complex prod ready apps with it just yet, instead what I'd do is 1) either create widget like apps; 2) have a monorepo with bunch of both Svelte and React apps
Great tutorial! Svelte looks good, but I still haven't seen any JS framework where the communication (in particular, upwards) between components is really easy. All that code (creating stores, importing them, or using event dispatchers) is not necessary when you write vanilla JS / jQuery. Also I really don't want to import specific animation effects before using them as in Svelte - jQuery is much better here.
Damn state and updating state is so easy. It feels like plain programming : defining variable, due to some condition update variable. No fancy hooks or other stuff like React. The reactive values are still a little foggy with syntax and when to exactly use them (because my mindset is so React centric) but wow im amazed
I am getting a weird edge case at 50:02. Assuming that I start typing characters with no spaces, the message disappears right after I type the 12th character, not 10th. Additionally, if I start removing characters, the message re-appears as I delete the 9th character (now I am left with 8). I can't figure out what's causing this behavior. Any ideas?
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
Around 44:45 a few minutes got cut off when I created the Button.svelte component. It's not a big deal, you can see the code, but it cut out me creating it. Sorry about that. Also, the repo is in the description if you need to see any part of the code.
Sir i dont know you see my comment or not i am yor huge fan please do react advance project video
ruclips.net/video/kEQAYXcR6YQ/видео.html is that video copying known / permitted ? Someone took your video with his own audio overlay 😮
@@shocchosolutions6275 this is English language misuse, Sir
can't see the code
00:20 What is Svelte
00:49 Compare to React
01:39 Why use Svelte
03:16 What should you know first
03:45 Svelte Component
04:46 How to get started
05:14 Project overview
06:30 Let's get started
08:01 VS code extension
08:17 Generated files explained
11:29 Basic fundamentals
15:47 Conditionals
17:16 Foreach loop
20:20 Starting a real-world application
01:03:34 Adding some transitions
01:06:02 Stores
@traversymedia add this to info
You are a hero we didn't deserve.
You are a life changer for me! Following you for a year, I got a job. I have no words to thank you enough. I wish you all the best, buddy.
cool. How long did you start learning web dev before you got the job? Congrats.
Same for me. Self studied programmer.
@@vectoralphaSec Thank you. I have been following Brad for about 10 months now, I have completed Brad's Modern HTML & CSS and Modern JavaScript courses, where I gained the most knowledge, but his free content on youtube is also enough to get a job. Good luck.
When Svelte enters the room, the poor react, vue and angular bow down the king. But when "neo.mjs" enters the room, the svelte bows down to the legend.
I started my own youtube channel and now a company. Thnxx Brad. Programming dad
This is the BEST SVELTE VIDEO FOR BEGINNERS,
I recommend this one to everyone who wants to learn Svelte.
And yesterday, on DEC 14, 2022
as a historical moment,
Sveltekit 1.0.0 was officially RELEASED,
so the formerly beta version is now fully stable, official version!
CONGRATULATIONS to the Svelte & Sveltekit Team!! :)
Was waiting for Svelte content since long time... Thanks a lot, Brad!
More to come. SvelteKit will be next
yes me too
@@TraversyMedia I'm looking forward to this
Me tooooo!!!!
When Svelte enters the room, the poor react, vue and angular bow down the king. But when "neo.mjs" enters the room, the svelte bows down to the legend.
This is an amazing video for beginners, thanks for making it free 🙏
Tip that could be useful for someone: instead of typing all html radiobuttons one by one a foreach can be used like this:
{#each [1,2,3,4,5,6,7,8,9,10] as currRating}
{currRating}
{/each}
Great tutorial as always.
As a bonus, you could implement the each loop instead of hardcoding all ten rating selections:
{#each [...new Array(10)].map((_, i) => i + 1) as rating}
{rating}
{/each}
Yes, nice improvement!
Great job!
I'm 17min in and this is by far the best svelte tutorial I've seen so far already! 🙏💪
Thank you Brad for this crash course. I had asked you on Twitter if you are planning a crash course on Svelte and you had said "Yes " and you delivered 👍
This is my first Svelte course. If I ever do anything significant with Svelte, you have a big credit to that, Brad. Thank you very much.
The first 20 mins of this video covers more than most videos on RUclips, you are doing great work.
for the radio buttons, we can use (bind:group={selected}).I think its more Svelte-like. thanks Brad as always.
Can you please show the code for implementing this?
Coming from a React Developer. I really like this framework a lot. Very precise, simple and helps you to exactly what you want to do.
I have been waiting a long time for Brad to make a course like this! I have wanted to study svelte for a while now and Brad makes it easy. Love to you and your family!
nice to see some love for svelte, being using it for 1 year and half in production, never going back to react lol, great content
I’m looking to learn svelte, coming from react would you say that it’s just an easier tool compared to react? Sorry I’m just learning and hoping to get some insight
Svelte is getting very popular, that's awesome! 😁
Hopefully we see more job openings for it. It really is an awesome framework
if you are Falvio Copes the one I know then I'm expecting a new book will be added soon to your free books collection :D
When Svelte enters the room, the poor react, vue and angular bow down the king. But when "neo.mjs" enters the room, the svelte bows down to the legend.
If you are running an m1 mac, you may get an error when you npm run dev for the first time "You are not authorized to view this page" or similar.
Port 5000 is being used by the airplay receiver, you need to use a different port. In package.json, add --port "new port number here" without the quotes to the start script and you're good to go. This will also change what port the dev script uses.
Yesss!! I love Svelte. Big companies need to start adopting it asap! :D
Of course you'd be here :P
I agree!
@@salehmdev Kevin is the man 😉
Oh man I'm, so happy you're doing svelte kit. I got my start as a react dev with your videos. Now we've migrated to Svelte Kit and I'm struggling. Your content makes learning this so much easier. I hope you do a bigger project with stores and reactivity if you have the bandwidth. Even a copy of one of your old react projects but built with svelte instead would be super helpful.
The stores feature of Svelte is simply amazing
Svelte is sooooooooooo much easier than React to learn, read, and write.
Svelte kit is awesome too.
Glad you made this video. Love your content man.
Mr. Brad is that kind of teacher whom everybody wanted to be in his class
Perfect timing. Was starting to learn it. 👍👍
Thanks Friend! I just started getting into Svelte, coming from an Angular and Ember background. So much wow on how easy this is. Keep up the good work!
I really like the pace of these crash courses. Not too slow and since they are relatively short they can be rewatched if needed.
Thanks for doing a new video! You’re always staying on top of the tech trends.
Thanks for the crash course, it's well done. Some constructive feedbacl: 7:28 degit doesn't clone, it downloads the tar for the latest commit, which is faster than cloning, and you won't get the commit history.
12:25 reactive value
19:50 overwriting array-ish vars
Dude this was great, you make things super relatable and easy to comprehend. More svelte content please.
Likes the video so thanks. Somthing that could be better is the RatingSelect HTML:
{#each [1,2,3,4,5,6,7,8,9,10] as num}
{num}
{/each}
Wow. Thanks for taking the time to show the different store and variable structures.
The ul inside the RatingSelect component can be easily refactored to not use the same code 10 times for each input:
{#each Array(10) as _, index (index)}
{index + 1}
{/each}
When I find some new future, I always begin it with your crash course, Thanks!!!
Your voice + Your keyboard sound = fantastic programming code.
Great video as aways. I was planning on start using Svelte and this came at the perfect time.
I hope you do a Sveltekit crash course!!
This was great. Thank you. I'm stoked I was able to solve the challenge you set forth AND I was able to refactor on my own once you introduced the "store" concept. All the best!
Such a pleasant feeling to hear your voice, so much ease and knowledge. This is golden :)
this is by far the best Svelte tutorial.
Excellent! I'm looking at Svelte for plugins in Obsidian so I won't need some of the app boilerplate but this completely cleared up the brain fog. Time to watch a demo using the latest and check what's changed in the past 12 months.
Damn! Talk about timing, I've been looking to get into Svelte for the past month or so. Thanks a lot!
For average and count I would do derived store. This would make it even cleaner code. Great tutorial, thought. Keep up with the Svelte, Brad! I think it has lots of potential and tutorials like this help people to learn about it. Thanks
Perfect timing delivering svelte crash course/21 not too much out there and once again Brad delivers to us, thank you!
Amazing and so well explained as always
Alpine is on the list for future videos 😊
I can't beleive I just completed a svelte crash course! Thanks Brad.
Awesome tutorial as always, Brad. Thank you so much.
Svelte really trolled us with these file extension names... I miss .js / .jsx - but the overall tech is awesome. Looking forward to more Sveltelteletle
Great introduction to Svelte - just what I needed. I really enjoy your work, Thanks so much.
This was a great intro to Svelte! I've been exploring a lot of front end frameworks like Angular and React. I honestly find that this is way easier to use then either of those based on this video. I'm going to have to make a few projects in it and try it out!
I really loved svelte through your video, it'll be my next project
This is simply awesome, I could not stop the video once started ☺️. You have sparked a interest to do Svelte.
As someone who usually does backend, svelte is a lifesaver for hobby projects. React had me banging my head against the wall.
Same i usually use htmx and svelte as i find react overkill for my simple projects 😂
@@darthtrex9356 how is htmx? I never really tried it before, I'm not sure how request responses or errors would be handled in html
You are the best Svelte teacher.
How many Svelte teachers have you tried?
At 20:00, you can use list.push(object) as long as you reassign the reference of the list variable to itself like this:
list.push(obj)
list = list
It is better I think, as it doesn't copy the whole content of the array, which could be a little slower with a large list length.
Hey! Beginner here. Why do you have to do the 'list = list'? Why isn't the list.push(obj) enough?
@@prch818 The program has to update the DOM according to the data, which doesn't happen by default. The compiler takes care of this, and regenerates the view when it recognises an assignment. However, it cannot detect all kinds of changes made by a simple function call. It would be hard for it to recignise. Therefore, you can say list = list and give it a hint that it should update the view.
Svelte is to React what React is to angular.
Nope
Big fan of your content. This tutorial was awesome. Thank you!
First of all thank you very much, I was looking for some lightweight framework to make a simple but elegant website for a friend. Svelte is perfect for this kind of project
Excellent tutorial... I'm really considering migrating from React to Svelte... Things seem much much simpler with this framework. Thanks again for your work, man!
When Svelte enters the room, the poor react, vue and angular bow down the king. But when "neo.mjs" enters the room, the svelte bows down to the legend.
Svelte is my #1 fav go svelte! Go brad!
It would be great if you can do SvelteKit or Svelte + Tailwind tutorial next.
Great tutorial as always! ❤️ from Sri Lanka
I think James Q Quick has one with Kit + Tailwind and he is another amazing instructor.
This is the button css that worked for me:
button {
padding: 10px 30px;
border: 1px solid #ff6a95;
border-radius: 0.25rem;
cursor: pointer;
font-size: 1rem;
font-weight: 600;
color: white;
margin: 5px 10px;
}
button:disabled {
cursor: not-allowed;
background-color: #ccc;
border: #888;
}
button:disabled:hover {
background-color: #ccc;
transform: scale(1);
}
.primary {
background-color: #202142;
}
.secondary {
background-color: #ff6a95;
}
button:hover {
transform: scale(0.98);
background-color: #ff6a95;
}
This is awesome. Would love it if you could do a SvelteKit tutorial
Svelte is amazing!
a great tutorial to get you started with svelte, thank you Brad !!!
perfect summary about the latest features
what are the odds you drop this video the day I start caring about svelte. 🚀
Just commenting this to push the algorithm for svelte
Thank you Brad, learned a new language today , feeling satisfied for the day❤️❤️❤️
Excellent! I've been seeing Svelte more and more lately and I've been curious about it.
It really is great. Some things are just so simple compared to react
@@TraversyMedia It completely obsoletes React. I cannot look at any other framework anymore.
Great job buddy. Concise and skillful.
You are a game changer of web development 🔥🔥
I’m a knockout js user and feel it’s simpler and cleaner. I could build this example in a fraction of the time with 75% less code using knockout. After 2 years of js development I really believe native js and knockout is the best combo
Awesome as always, worth to watch even if you already have used svelte before.
Very thankful for his work, but given changes have occurred, what version of Svelte dies relate to or up to? What has changed or no longer applicable.
Around the 8:23 minute mark when it showing the package dependencies it shows 3.0.0 for the Svelte compiler. I think at one point there was a 'breaking change', one guy wrote a book and a month later Svelte changed so drastically that he said his book was out of date completely and basically not worth buying - I think it had everything to do with 'routes'. I am sure the basics are always there - or at least good to know the background of a project - to help you understand an on going continuously improving application/environment/programing language, etc. FYI MS Visual Basic had a 'language break' where nothing written in a prior version could be run with the new version - things change life must go on.
Hey Brad, solid video. Just a quick question though, wouldn't it be a bit more efficient in the feedback form component to make use of reactive values instead of creating the function that handles input? You could have one reactive value that checks if the length of text is correct, another reactive value for the disabled state of the button, and finally another one for the message, which is simply an empty string if the form is valid, or a string with your message if the form is not valid. Seems like you're missing out on Svelte's amazing reactive value system here, since two-way data binding for the text is already handled by the input.
this is why i read the comments... valuable insight like this :)
thanks Chris!
Very nice video! Congratulations and thank u for this content. I came from Vue but now im in love with Svelte 🤣🤣🤣
Thanks for the fantastic tutorial! One thing I may have missed is why you did not use a loop to lay out the ratings.
Nice! This video was exactly what i needed to get started!
Your tutorials are awesome. I will try to rebuild your feedback app in Svelte 5. Thanks!
Awesome course! I learned a lot. Thank you Brad!!
Really nice video mate, thankyou!
For anyone getting to the point where you have to do the dispatch and then create the event forwarding to pass things up to the main App - If like me you thought something like "hhmmm, that's kinda clunky", absorb it as an approach and wait for the Store implementation at the end - MUCH nicer, and worth it to see how much cleaner it is.
Question! - So I can learn more, does anyone have a take on why you'd ever use that approach with the store technique being there? Is it a legacy approach that will just be used less? Having seen both in action I can't see an immediate reason to not use a store, even for a small app.
I learn lots of from your video.it is very useful for me.
In 51:00 can you make those buttons with a for loop rather than repeating the code? I am new to JS.
wao. Awesssome Your website is now updated. It looks amazing.
its good to have a table of contents. Thank you
Great crash course! Thanks for all the great content, Sveltekit crash course next 🙏
Even though I really like Svelte so far (I've created the Chart app with it and its very good and performant) I wouldn’t just jump into building complex prod ready apps with it just yet, instead what I'd do is 1) either create widget like apps; 2) have a monorepo with bunch of both Svelte and React apps
Everything seems so sensible
Great tutorial! Svelte looks good, but I still haven't seen any JS framework where the communication (in particular, upwards) between components is really easy. All that code (creating stores, importing them, or using event dispatchers) is not necessary when you write vanilla JS / jQuery. Also I really don't want to import specific animation effects before using them as in Svelte - jQuery is much better here.
Best JS Framework ever !
yesssss i fucking love svelte! so glad to see this on your channel!
I wonder what is the easiest js framework to work with? I don't care of job market, etc etc. What I care much is about development time.
I really like ur presentation. Thanks brad.
Damn state and updating state is so easy. It feels like plain programming : defining variable, due to some condition update variable. No fancy hooks or other stuff like React.
The reactive values are still a little foggy with syntax and when to exactly use them (because my mindset is so React centric) but wow im amazed
I am getting a weird edge case at 50:02. Assuming that I start typing characters with no spaces, the message disappears right after I type the 12th character, not 10th. Additionally, if I start removing characters, the message re-appears as I delete the 9th character (now I am left with 8). I can't figure out what's causing this behavior. Any ideas?
Great tutorial. Clear and conscise. Please make a follow up for sveltekit.
Cool introduction about Svelte, thanks Brad.
which theme is that you are using in vscode?
.
@@waldosobrino4589 i don't understand
@@chethanb6406 it's just for also get notified when he replies to you
Bookmark: 1:00:00
1:15:52 " i dont know why it got here" i saw many of that in other of your videos, the reason is you do typo, and the auto import executed
Svelte looks really interesting and I liked the tutorial. Guess I will try recreating your Feedback app. Thanks!