I've recently switched to Svelte from React and have to say your videos are literal gold. Honestly I love the way you teach that encourages the viewer to explore instead of just memorizing the content
This particular video is almost like a reference book for me, I come back to it every few months to pull out whatever feature I need at the given moment.
I love this video! I wish I had seen it months ago. I was building a standard map component for customer contact forms which showed the business locations. I decided on leaflet because it was free and easy to use. I built the map component, but then just built an L component where you pass the property name you want to invoke and the options. It allowed me to add attribution tags, markers and other things as components. It was another video of yours that made me think about using let, and the context module to share the map with children. I learn so much watching your videos. Thank you!
It's worth noting that (unless something changed recently), Svelte's built-in events can't be bubbled up through slots, which is unfortunate. I just use Eventery for all my events needs these days
@@irlshreki tried to post a link to the relevant github issue, but youtube hates links, so the comment got removed. i even got a "spam, and scam policy" warning, lol
hmm if i look at my server logs form use:enhance is still refetching the whole page but its just not reloading the page. this is worth mentioning. a lot of requests could happen in the background that a developer does not expect to happen. i only noticed this when watching my server logs when submitting the form.
Very similar to vue directives, with the same caveat that they’re not type safe. Angular directives are much more powerful though, as they can be enabled only for certain types of elements (or any css selector) and are fully type safe.
At this point all these frontend frameworks are just copying each other, putting "new" names on "old" concepts and immediately becoming "so cool". This thing called Directive has existed for a long long time in Angular, which everyone loves to hate, but now is trendy again because Svelte does it? Circlejerk Maximus
Other Frameworks have this aswell. E.g. in Vue it's called directives, which work in much the same way. Unfortunately there is an open pr for proper typescript support.
I notice that you get the full list of functions in the VS Code tooltip that pops up (looking at around 10:55). My Copilot keeps messing this up. How do I get copilot to f-off and just get VS Code to show me my tool tip for available methods?
Thank You so much for this fantastic video. I have question. In the first example there is a nice animation when element is added to the DOM, but how to play similar animation when element is removed from the DOM? The destroy hook is fired after element is removed from the DOM, but to achieve such animation there would need to something like beforeDestroy hook...
at minute 25, question: Would it be maybe possible to get rid of the innerHtml approach instead of using a Slot Component, where you could inject your content and then do a {#each letters thingy instead? As the template literal approach seems kind of error prone to me...
It's nice but my personal preference with UI apps is a bit of explicit verbosity than a magical thing that does many things. I actually prefer explicit event handlers still just so I can refresh my memory about what is going on fairly quickly after some time has passed and I haven't been working on Svelte.
People who hate typescript seriously have skill issues. It improves development experience greatly but oh well people want to waste their time without safety and auto completion
I love this video! I wish I had seen it months ago. I was building a standard map component for customer contact forms which showed the business locations. I decided on leaflet because it was free and easy to use. I built the map component, but then just built an L component where you pass the property name you want to invoke and the options. It allowed me to add attribution tags, markers and other things as components. It was another video of yours that made me think about using let, and the context module to share the map with children. I learn so much watching your videos. Thank you!
You know what? This is so powerful. The more I learn the more I love svelte.
Did you say "we added brazil" to the `` tag? LOL, that's the first time hearing this reference. Think that is how I'm gonna call it now.
I approve! 😄
I've recently switched to Svelte from React and have to say your videos are literal gold. Honestly I love the way you teach that encourages the viewer to explore instead of just memorizing the content
Thank you! 😊
This particular video is almost like a reference book for me, I come back to it every few months to pull out whatever feature I need at the given moment.
I love this video! I wish I had seen it months ago. I was building a standard map component for customer contact forms which showed the business locations. I decided on leaflet because it was free and easy to use. I built the map component, but then just built an L component where you pass the property name you want to invoke and the options. It allowed me to add attribution tags, markers and other things as components. It was another video of yours that made me think about using let, and the context module to share the map with children. I learn so much watching your videos. Thank you!
After 20 years of bashing JS i think I have no arguments left to ignore TS, it's strong typing is actually nice.
This is an incredible video, absolute gold! Thank you!
This is my favorite coding channel.
This awesome thanks for sucha great tutorial. Thanks for making the Svelte community better! 😎
40 minutes, wow.
I love long videos.
the part about capturing/bubbling was incredibly useful thanks Matia
It's worth noting that (unless something changed recently), Svelte's built-in events can't be bubbled up through slots, which is unfortunate. I just use Eventery for all my events needs these days
Oh interesting. How come sveltes event dispatcher doesn't do the trick?
@@irlshreki tried to post a link to the relevant github issue, but youtube hates links, so the comment got removed. i even got a "spam, and scam policy" warning, lol
hmans/eventery on GitHub?
What does this mean in practice? You can't nest svelte actions in the ui?
Great Job, that type error took me a day to solve it, I wish I knew you back then
hmm if i look at my server logs form use:enhance is still refetching the whole page but its just not reloading the page. this is worth mentioning. a lot of requests could happen in the background that a developer does not expect to happen. i only noticed this when watching my server logs when submitting the form.
I wish I could like this video a thousand times
I love how you are doing a lot of explanations of Svelte Actions! Thank you!
You can use Parameters utility to just select the 2nd argument type in typescript!
it adds noise, but makes sense when the type is not exported
Really really nice Svelte tutorials! Thanks
Great job! Thank you for your work
Thanks for your hard work!
This is kind of a tiny version of component with lifecycle in React but way better and shorter.
You are best explainer
Thank you! 😄
Had me at this video is action packed 😂
this is so cool
Very similar to vue directives, with the same caveat that they’re not type safe. Angular directives are much more powerful though, as they can be enabled only for certain types of elements (or any css selector) and are fully type safe.
At this point all these frontend frameworks are just copying each other, putting "new" names on "old" concepts and immediately becoming "so cool".
This thing called Directive has existed for a long long time in Angular, which everyone loves to hate, but now is trendy again because Svelte does it? Circlejerk Maximus
Angular sucks.
@@JoyofCodeDev Skill issues
great video, as always!
This is amazing
Good Educator!
Brazil mentioned
Other Frameworks have this aswell. E.g. in Vue it's called directives, which work in much the same way.
Unfortunately there is an open pr for proper typescript support.
The video is less about directives and more about how simple it's working with the actual DOM in Svelte.
Thank you for so much efforts :)
I notice that you get the full list of functions in the VS Code tooltip that pops up (looking at around 10:55). My Copilot keeps messing this up. How do I get copilot to f-off and just get VS Code to show me my tool tip for available methods?
I don't use Copilot. 😂
Thank You so much for this fantastic video.
I have question.
In the first example there is a nice animation when element is added to the DOM, but how to play similar animation when element is removed from the DOM?
The destroy hook is fired after element is removed from the DOM, but to achieve such animation there would need to something like beforeDestroy hook...
1. Svelte action
2. Sveltekit form actions
Action packed 😅😅
Great video 🔥
Literally every framework has a way to achieve this
Show me a JavaScript framework that makes it easy to work with the DOM like Svelte without having to use a ref.
@@JoyofCodeDev Vue's directives are very similar to that Svelte feature
or just type onchange into the text field?
=> Brazil :)
at minute 25, question: Would it be maybe possible to get rid of the innerHtml approach instead of using a Slot Component, where you could inject your content and then do a {#each letters thingy instead? As the template literal approach seems kind of error prone to me...
minute 21: you should Name Types with Capital as first Letter, Bro!
I want more
"here we added Brazil" 😂
It's nice but my personal preference with UI apps is a bit of explicit verbosity than a magical thing that does many things. I actually prefer explicit event handlers still just so I can refresh my memory about what is going on fairly quickly after some time has passed and I haven't been working on Svelte.
= Brazil 🤣
funny how in html only brazil can take you to a new line
First again! 🍌
Second!!
deep
typescript
People who hate typescript seriously have skill issues. It improves development experience greatly but oh well people want to waste their time without safety and auto completion
brazil hahaha
Very little explanation is the aim. Lots of argument shadowing and logging of the same values. rather hard to learn much
unfurtunately, react cancer destroyed web dev
brazil 🤣
I love this video! I wish I had seen it months ago. I was building a standard map component for customer contact forms which showed the business locations. I decided on leaflet because it was free and easy to use. I built the map component, but then just built an L component where you pass the property name you want to invoke and the options. It allowed me to add attribution tags, markers and other things as components. It was another video of yours that made me think about using let, and the context module to share the map with children. I learn so much watching your videos. Thank you!