No video

Practical Svelte 5 - Shopping Cart

  Рет қаралды 14,010

Huntabyte

Huntabyte

Күн бұрын

Пікірлер: 128
@readywhen
@readywhen 2 ай бұрын
I started web dev with svelte (after no code and vanilla). I loved it. Now I've been working with react for a while. Now I love svelte even more!
@andrewthomas3947
@andrewthomas3947 2 ай бұрын
Same journey. But doesn't tried react.
@codingwithjamal
@codingwithjamal Ай бұрын
i love svelte. it feels like normal html but with super powers
@Daddytronics
@Daddytronics Ай бұрын
Svelte is heavenly. React is a nightmare
@MadeInJack
@MadeInJack Ай бұрын
Can't wait for more Svelte 5 videos 😄 Maybe a full series with best practices to build, organize and manage large codebases?
@Huntabyte
@Huntabyte Ай бұрын
Noted!
@MikeHTMLAllTheThings
@MikeHTMLAllTheThings 2 ай бұрын
I actually love the idea of having the basic layout structure in place and then allowing others to try it however they like or follow along. Cool way to handle a tutorial.
@Huntabyte
@Huntabyte Ай бұрын
I'm glad to hear that! Was very curious how it would be received, so far, so good!
@MadeInJack
@MadeInJack Ай бұрын
+1
@smallSkrrtBigDreams
@smallSkrrtBigDreams 2 ай бұрын
This was so easy to understand, what a nice introduction to the new Svelte features! And having the examples be part of a larger context and not isolation makes it much easier to follow along. I've watched a lot of your videos, you are literally the reason I decided to learn Svelte, so thanks a bunch for all your work.
@Huntabyte
@Huntabyte Ай бұрын
Thanks for the kind words! Happy to hear that this was easy to understand!
@ridass.7137
@ridass.7137 2 ай бұрын
17:43 I think if there is a separate remove button, the decrease button should always be disabled and not remove the item when the current item quantity is 1. This would also prevent accidental removal of the item if, for example, you have added too many and then spam the decrease button to reduce the quantity, failing to stop at 1.
@Huntabyte
@Huntabyte 2 ай бұрын
Yeah I think I agree with you there from a UX perspective in retrospect!
@devbyveritech
@devbyveritech Ай бұрын
⁠​⁠@@Huntabyteremoving the item from cart when it’s less than 1 is very okay. Where I think the decrement button should be disabled is in the checkout page. But in the case of cart, it’s okay to remove the product
@NicholasMaietta
@NicholasMaietta 2 ай бұрын
This is crazy good. This opened my eyes to Svelte 5's runes. Thank you. (Yes, make more videos, please)
@JoyofCodeDev
@JoyofCodeDev 2 ай бұрын
let's go 👏
@benjaminjameswaller
@benjaminjameswaller Ай бұрын
Love this tutorial on Svelte 5. Please do more to expand on these new concepts and in this shopping cart ui. Also I noticed you might want to cover the situation where when you added the same item more than once, the cart got a duplicate entry = it didn't just add one item with a count of two it added the same item on as separate entry.
@RicardoCamisa
@RicardoCamisa 2 ай бұрын
Svelte 5 is crazy good!
@Huntabyte
@Huntabyte 2 ай бұрын
Right?! I feel this weird excitement when writing it and it just feels so natural already!
@codewithguillaume
@codewithguillaume 2 ай бұрын
Ahhhhh feels good to see you again Hunter !
@pasokoner
@pasokoner 2 ай бұрын
13:45 This technique alone makes the video worth watching
@roycrippen9617
@roycrippen9617 Ай бұрын
Definitely. This week I started transitioning the codebase at work to svelte5 and I ran into this exact issue. It took me like 30 minutes to figure out how to fix it. I wish I had seen this video before I stumbled on that problem.
@bloozy85
@bloozy85 Ай бұрын
I like svelte, but js frameworks time running out soon, it's obvious. Too much stuff going on and actually all of them seem to go into same direction and do the same stuff under the hood with different syntax and compilers. It's so nice to work with web components and JSDoc, and everything runs out of the box and natively. Just push your build on your webspace ... boom! No need for fancy serverless build & deploy services. What i actually really like tho, is a wordpress backend with a vanilla stack frontend. It so dead simple and works for most small and mid sized businesses.
@silvankuebler
@silvankuebler Ай бұрын
not really a technique but just a widely used convention also e.g. very loved in the python communtiy
@VeriousSmithIII
@VeriousSmithIII Ай бұрын
I'm just getting into building Javascript Apps because of Svelte. Been a WordPress dev most of my professional life. This video was helpful. Thanks for sharing. Looking forward to more!
@Huntabyte
@Huntabyte Ай бұрын
Glad it was helpful! More on the way!
@adriablancafort
@adriablancafort Ай бұрын
Amazing video as always! I really love your content. I've noticed there isn't a good video explaining all the i18n options for sveltekit available and comparing them. It could be a good idea for a future video and I'm sure that your audience would be very interested to see it.
@Huntabyte
@Huntabyte Ай бұрын
Noted!
@francoisbouchet9907
@francoisbouchet9907 Ай бұрын
Iam always struggling to understand documentations, so practical is the only way I manage to learn code..., this video is very helpful to onboard Svelte5 and runes subtleties... don't hesitate to publish some more! thanks! -- NB: I particularly like that you let the usual "errors / mistakes" happening on the go.... many youtubers edit them out, but they then lack an opportunity to explain what can go wrong and make us rethink our bad habits.
@Huntabyte
@Huntabyte Ай бұрын
I'm glad to hear that you found this useful! Will continue to publish more!
@henoknigatu7121
@henoknigatu7121 2 ай бұрын
Hi , I really enjoy your SvelteKit tutorials! I was wondering if you could create a more comprehensive tutorial that covers most of SvelteKit's features in an integrated manner. Many tutorials out there are quite discrete and don't show how to use various features together. It would be incredibly helpful to see a full-fledged example with best practices and advice on how to structure a project. Thanks for considering this, and keep up the great work!
@emyralunthomas
@emyralunthomas Ай бұрын
Learned a ton about Svelte 5 from this video - thank you! Would love to see a follow up showing how to filter products by category
@Huntabyte
@Huntabyte Ай бұрын
Glad to hear that!
@supercurioTube
@supercurioTube Ай бұрын
That was awesome. I selected Svelte 5 for my next project, for which I haven't started to write the UI yet and seeing your concrete implementation was super informative.
@Huntabyte
@Huntabyte Ай бұрын
That's awesome to hear! I have some more videos queued up on additional UI and state patterns as well!
@aawnu
@aawnu Ай бұрын
Great video that perfectly introduces the new runes and workarounds. Learned a lot, thanks!
@Huntabyte
@Huntabyte Ай бұрын
I'm glad to hear that, thanks for the feedback!
@zsmain
@zsmain 2 ай бұрын
This was very informative, looking forward for similar videos.
@Huntabyte
@Huntabyte 2 ай бұрын
Awesome to hear! Looking forward to making them!
@vinseixas5662
@vinseixas5662 Ай бұрын
I'm new to Svelte and looking curiously towards Svelte5. I've been following your guides and videos, plus using the shadcn-svelte you worked on. All of the stuff that comes out of this channel is such high quality.
@Huntabyte
@Huntabyte Ай бұрын
Hey I appreciate the kind words, I appreciate it! Svelte and its community has been nothing short of incredible! The only bad thing is once you give it a chance, you'll never want to use something else 😂
@paulclarke4099
@paulclarke4099 2 ай бұрын
Would love you to show the best approach to handle state in a Svelte5/SvelteKit multi user application so that state is completely isolated for each user since Stores alone are not the proper approach when using SvelteKit, using Context API or whatever is the best way to do this. No videos seem to show the best way to do this (you did touch on it in an earlier video) but I would like to see it in more detail with very clear explanations of why to do it that way. Your videos a really great and you have the ability to clearly and succinctly explain things 💯😃👍
@Huntabyte
@Huntabyte 2 ай бұрын
Thanks for the kind words! That’s absolutely something I can do!
@pfcycletechnology7064
@pfcycletechnology7064 20 күн бұрын
What a great idea. I struggle with that in sveltekit too. If there's someone who could/should get the credit for creating such an informative sveltekit tutorial, it should be here on this channel.
@pfcycletechnology7064
@pfcycletechnology7064 20 күн бұрын
@@Huntabyte Just a suggestion. Moving this shopping cart into a sveltekit project and add user authentication so each cart belongs to a user. That would be informative. So leave this project as is, with svelte5 and start another project in sveltekit with shopping cart and user authentication. Doable? ;)
@alittlegreyhair1104
@alittlegreyhair1104 Ай бұрын
A really useful video, thank you. In the first part I found all that tailwind markup confusing the picture where the SV-5 action was happening. 'Looking forward to learning more from you.
@Huntabyte
@Huntabyte Ай бұрын
You're welcome, and thanks for the feedback! I forgot to zoom in a bit on the code which caused more of the clutter to be in the way. In the next installment I've cleaned it up a bit and made the code a big bigger.
@alittlegreyhair1104
@alittlegreyhair1104 Ай бұрын
@@Huntabyte Look forward to it :)
@johnwu8916
@johnwu8916 Ай бұрын
This was super helpful. I would love to see a tutorial on how to apply some OOP concepts leveraging runes, like how best to encapsulate all the methods and properties inside the model and be able to import it to support universal reactivity. That might be helpful for supporting larger code bases or complex web apps. Thanks! (PS: I am new to front-end dev, and mostly my experience is writing server and other backend codes, so if there is another path to manage complex relationships between objects in svelte/javascript/typescript, I am all ears 😃)
@Huntabyte
@Huntabyte Ай бұрын
A video on just that will be uploaded either this weekend or early next week!
@MM-uf6kt
@MM-uf6kt Ай бұрын
This would be a great series!
@Nukhtarov
@Nukhtarov 2 ай бұрын
I liked it. Would love to see more like this. Thank you Hunter
@Huntabyte
@Huntabyte Ай бұрын
More to come!
@gageracer
@gageracer Ай бұрын
Not only I liked the video, this could be a great practive/quiz website "make this page reactive with svelte/solid/react". I love programming as if it's a puzzle.
@anfytrion
@anfytrion 2 ай бұрын
What a great demo of Svelte 5 powers
@Huntabyte
@Huntabyte 2 ай бұрын
Thank you! I’m glad you think so!
@Loui3Hunna
@Loui3Hunna Ай бұрын
Great as always! Would very much like to see more Svelte 5 API examples :)
@Huntabyte
@Huntabyte Ай бұрын
More to come!
@d4yno
@d4yno 2 ай бұрын
Absolutetly awesome in depth tutorial.
@Huntabyte
@Huntabyte Ай бұрын
Thanks for the kind words!
@vexkiddy
@vexkiddy 2 ай бұрын
Great video Hunter!
@HzClan
@HzClan 2 ай бұрын
Nice video as usual, can't wait to see the filters in action in the next video!
@memestagestartup
@memestagestartup 2 ай бұрын
been waiting for your new vids to drop...🥳🥳
@Huntabyte
@Huntabyte 2 ай бұрын
Me too! Took me a while to realize these videos won’t great themselves! 😂
@Terr590
@Terr590 2 ай бұрын
Love the practical approach in this video, thanks!
@Huntabyte
@Huntabyte 2 ай бұрын
Glad to hear it! These videos are much more enjoyable to make!
@jmoo4457
@jmoo4457 Ай бұрын
I think this is a great overview of Svelte 5 runes, but in a real practical application, i would try to divide up the shopping cart logic (add, remove, etc.) into its own so that the logic does not live at UI component levels. Would be cool if you can cover a video on abstracting state and its logic in Svelte something like React's custom hooks so that the logic could be used like `const { add, remove, modify } = $cart` abstracted into its own module.
@Huntabyte
@Huntabyte Ай бұрын
Yeah I already have one queued that covers just that 😁
@BhideSvelte
@BhideSvelte Ай бұрын
Two Ways To Mutate 1. only owner can mutate the array, obj in Main component 2. if childs want to mutate they should use bindable ..new concept.. or else just pass the function to child component ...every main logic stays in Main Component and you can mutate good one Thankss
@Add0w
@Add0w 2 ай бұрын
This is really excellent explanation, thank you.
@Huntabyte
@Huntabyte 2 ай бұрын
This is great feedback! Thank you!
@AB-gx5zj
@AB-gx5zj Ай бұрын
Nice video (more on S5 please)!
@Huntabyte
@Huntabyte Ай бұрын
More to come!
@adamjennings4797
@adamjennings4797 Ай бұрын
Great video, very easy to follow.
@Huntabyte
@Huntabyte Ай бұрын
Thank you! That's great to hear!
@lemnisk8
@lemnisk8 2 ай бұрын
Thank you.... Please make more of such videos...
@twentxx
@twentxx 2 ай бұрын
Thank you so much! 🙏 Your videos has very useful practical knowledges. Love it
@Huntabyte
@Huntabyte 2 ай бұрын
You’re welcome! Glad you like this format!
@anuragsingh-ts3nb
@anuragsingh-ts3nb 15 күн бұрын
@huntabye its great how u explained the concept, was struck in a issue what iff, on scroll i have to load more products how that can be handled if you can provide a snippet of a way to go, as currently the data is loaded from a API endpoint in page.ts load function
@devbyveritech
@devbyveritech Ай бұрын
I love this More of it please
@KevinMacKenzie61
@KevinMacKenzie61 Ай бұрын
Fantastic video. Thanks!
@Huntabyte
@Huntabyte Ай бұрын
Thank you, Kevin! Appreciate you being a member for almost 1.5 years now, means a ton!
@KevinMacKenzie61
@KevinMacKenzie61 Ай бұрын
@@Huntabyte While I appreciate you thanking me for being a member, I wish I could actually pay you what you have taught me is worth. While there are other great teachers on KZfaq, no one helps me grasp things like you do.
@joshua.hintze
@joshua.hintze 2 ай бұрын
Nice video. I would love to know of other good cases to use an effect. Thanks!
@Huntabyte
@Huntabyte 2 ай бұрын
You got it!
@riigel
@riigel 2 ай бұрын
more videos like this!
@WLockIV
@WLockIV 2 ай бұрын
Is it just me or is the derived update more intelligent now? I feel like old derived would have triggered an update each time anyway. Thanks for the video!
@user-bl3dd1rj8y
@user-bl3dd1rj8y 2 ай бұрын
great stuff looking forward to seeing more videos on svelte 5
@Huntabyte
@Huntabyte 2 ай бұрын
Glad to hear it! Looking forward to delivering more!
@robimalco
@robimalco Ай бұрын
mind blowing expertise
@Huntabyte
@Huntabyte Ай бұрын
Thanks Robi!
@BhideSvelte
@BhideSvelte 2 ай бұрын
It took sooo long...i was waiting...love from India ☺️☺️
@Huntabyte
@Huntabyte 2 ай бұрын
Me too… I just realized these videos won’t create themselves!
@8-P
@8-P 2 ай бұрын
I enjoy watching your videos, thanks alot for this :)
@Huntabyte
@Huntabyte 2 ай бұрын
I appreciate the kind words! Happy to do it!
@omargarcia7900
@omargarcia7900 Ай бұрын
Can you do a few videos on Keras and TensorFlow, please? :) Great content on your channel from what I've seen so far!
@herkulano
@herkulano 2 ай бұрын
Thanks!
@Huntabyte
@Huntabyte 2 ай бұрын
Hey thanks a ton for that! I appreciate it!
@n3x404
@n3x404 Ай бұрын
love it 🥰
@kson2659
@kson2659 Ай бұрын
Thanks mate!
@bnjmn7779
@bnjmn7779 Ай бұрын
Would be interested to see how to connect this to a backend to save the cart of a user.
@SaidElnaffar
@SaidElnaffar 2 ай бұрын
Liked and Subscribed for sure.
@Huntabyte
@Huntabyte 2 ай бұрын
Thank you!
@deepjyotideb1173
@deepjyotideb1173 2 ай бұрын
How slow exactly is a reducer? Does using it make it visibly slower?
@Huntabyte
@Huntabyte 2 ай бұрын
It’s many times slower than a loop. Using it in one single place may not create a noticeable difference, but when it’s used many places it can really add up. So for that reason I try to avoid it!
@ElGnomistico
@ElGnomistico Ай бұрын
Pleaaaase make more of these
@JacobDuenke
@JacobDuenke 2 ай бұрын
Hey, just wondering why do you seem to always use “const” for derived variables, but “let” for state variables?
@imho7992
@imho7992 2 ай бұрын
They’re not editable and they are read only.
@JacobDuenke
@JacobDuenke 2 ай бұрын
@imho I’m familiar with const, just wondering what’s the implications with $derived. The values do change of course, so I would assume you’d need to use let, at least for primitive values. You could get away with const for reference types.
@Huntabyte
@Huntabyte 2 ай бұрын
I use const because _i_ can’t update that value, not that it doesn’t ever update. Whereas with $state I can - just a preference!
@xthesly
@xthesly Ай бұрын
Shouldn’t a cart be managed with sveltekit using session and/or db ?
@Huntabyte
@Huntabyte Ай бұрын
Of course, but as mentioned in the video, we're focused on the frontend / interactivity rather than the full stack in this video. To integrate it full stack you would just add a few API calls into the mix but the general idea remains the same.
@nevillebrem
@nevillebrem Ай бұрын
what extensions makes your +page.svelte files to folders?
@Huntabyte
@Huntabyte Ай бұрын
It's not an extension but a VSCode setting! "explorer.fileNesting.patterns". I haven't added these settings to my settings repo just yet, but in the meantime you can search "antfu vscode settings" to find comparable ones.
@nevillebrem
@nevillebrem Ай бұрын
@@Huntabyte thanks!
@nigelnyakudya2262
@nigelnyakudya2262 Ай бұрын
We need a rewrite for morden Saas in svelte 5 brother.
@Huntabyte
@Huntabyte Ай бұрын
It's coming man! Svelte 5 is still in RC and Bits UI still has some work to do so it's ready to be added into the course as well 😃
@mikejohneviota9293
@mikejohneviota9293 Ай бұрын
Decaprio is programming again
@RicoGarza00
@RicoGarza00 5 күн бұрын
Svelte 5 is so much more confusing as a beginner.
@greendsnow
@greendsnow 2 ай бұрын
Can't look at it, my eyes hurt. Css please.
@Huntabyte
@Huntabyte 2 ай бұрын
Never
@joseflinha
@joseflinha Ай бұрын
Great video, but why name files for components differently than the name of the component itself? CartItem vs cart-item.svelte please CartItem.svelte
@Huntabyte
@Huntabyte Ай бұрын
You should look into the annoying things that can arise with git and OS discrepancies depending on how they handle file name case sensitivity. I use kebab case for that reason, but also because it's what I like to use and what I'm most comfortable with. Feel free to use what suites you best!
@joseflinha
@joseflinha Ай бұрын
@@Huntabyte Yes, there is a Git setting core.ignorecase for that. If you like such a name... 🙂
Global Stores Are Dangerous
11:48
Huntabyte
Рет қаралды 15 М.
Svelte 5's Secret Weapon: Classes + Context
18:14
Huntabyte
Рет қаралды 17 М.
Кадр сыртындағы қызықтар | Келінжан
00:16
Comfortable 🤣 #comedy #funny
00:34
Micky Makeover
Рет қаралды 16 МЛН
女孩妒忌小丑女? #小丑#shorts
00:34
好人小丑
Рет қаралды 47 МЛН
طردت النملة من المنزل😡 ماذا فعل؟🥲
00:25
Cool Tool SHORTS Arabic
Рет қаралды 9 МЛН
Svelte 5 is a beast, but is it worth switching?
37:55
Syntax
Рет қаралды 21 М.
Svelte 5 Preview | Runes
12:40
ThePrimeTime
Рет қаралды 76 М.
The Svelte 5 Guide On Runes And Universal Reactivity
21:41
Joy of Code
Рет қаралды 22 М.
i didn't know these Svelte tips
18:56
Nev the Dev
Рет қаралды 4,8 М.
Please stop using px for font-size.
15:18
Coder Coder
Рет қаралды 130 М.
Protect SvelteKit Routes with Hooks
21:10
Huntabyte
Рет қаралды 55 М.
I tried 4 Full Stack Frameworks
1:05:16
Coding Garden
Рет қаралды 28 М.
Svelte 5 is Bigger Than You Think
9:35
Ben Davis
Рет қаралды 19 М.
Every Framework Sucks Now
24:11
Theo - t3․gg
Рет қаралды 132 М.
I Tried Every Svelte UI Library
20:57
Joy of Code
Рет қаралды 45 М.
Кадр сыртындағы қызықтар | Келінжан
00:16