Видео

Thank you!

Glad you think so!

Not yet but will for sure make some when it releases! Any project ideas you want to see? 🙂

@@practicalcoder Kahoot in Svelte 5 & Sveltekit and some DB? (Supa, Turso, Firebase postgres?)

@practicalcoder maybe add an branch using svelte5 , then with DB ? the idea is probably more to be sure of how to code something, then how to edit /refactor or add something else.

Glad it was helpful!

I figured out the second bit, I hadn't bound visible correctly in the EditTaskModal element!

Hey! Are you applying the customClass to the inner div, the one with .modal class? There could also be some sort of CSS ordering issue at play. Another alternative would be to create fixed sizes for the modal instead of a generic "customClass" prop. For the EditTaskModal you are completely right, and that's my fault! I must have noticed and fixed this between recordings and never mentioned it. The issue is due to two-way data binding where the modal sets visible to false as it closes, but that change is never propagated (unless bind is used) to the parent component, App.svelte in this case. It can lead to some very strange side effects like those that you describe, when Svelte realises that the value actually had changed.

Thank you for watching 😄! That's completely true, I abused JavaScript's leniency to coerce the boolean to a number "magically". The sort function like you discovered actually wants a number, as MDN states it: "The return value should be a number whose sign indicates the relative order of the two elements: negative if a is less than b, positive if a is greater than b, and zero if they are equal". I suppose my TypeScript configuration isn't strict enough to catch such issues, which is more alarming than comforting 😶. I should probably have used a ternary to convert the boolean or Number(a.completed) which would also return the right type.

It's called "Gruvbox Dark Medium" :)

Thank you for still sticking with me, you are a real OG! :D

I will! Currently thinking about a shorter video format that should be more comprehensive! Thank you for commenting :)

You are the real OG! Thank you for being so supportive! ❤

Thanks a lot for watching 😄 Yeah, component libraries can be very helpful in creating a slick and consistent UI!

Hey! I definitely recommend writing all code yourself but I get that having the source code can be a good reference. I will do a video on Git soon and start uploading the code to GitHub.

Hey! I definitely recommend writing all code yourself but I get that having the source code can be a good reference. I will do a video on Git soon and start uploading the code to GitHub.

You are absolutely correct! I'm certain this has to do with two-way data binding where "visible" and "data" is modified inside the modal component when it closes, but that change is never propagated to the parent component. The parent component App.svelte doesn't have the new values which makes it permanently hidden just like you describe. It seems I noticed this after publishing the video and fixed it, but never told you guys about it. If you watch the beginning of episode #3 you can see I have appended bind: before both visible={editTaskModalVisible} and data={editTaskModalData} to bind the variables in both directions. Super sorry for the confusion! I go a bit more in-depth on two-way data binding later in the series.

@@practicalcoder Thanks so much for taking the time to reply! I checked out the video and that works perfectly, thank you!

Thanks a lot for watching, motivates me a lot! 😄

That's awesome, I'm sure you will love Svelte :D Feel free to comment if you have any additional questions after watching the videos!

Absolutely! Slow and steady wins the race :)