- 159
- 107 776
HunterScript
United States
เข้าร่วมเมื่อ 18 ก.ย. 2024
👋 Hey! Ready to level up your coding skills? This channel is packed with tutorials, tips, and projects to help you improve and tackle new challenges. Whether you're sharpening what you know or learning something new, you're in the right place. Hit subscribe and let's dive into coding together!
SvelteKit: Hooks
Learn the basics of hooks in SvelteKit!
Chapters:
0:00 - 0:47 - Different types of hooks
0:48 - 2:56 - How to setup hooks
2:57 - 3:15 - Locals
3:16 - 7:24 - Example using locals
7:25 - 8:19 - Using data from Page State
8:20 - 8:44 - Summary
Chapters:
0:00 - 0:47 - Different types of hooks
0:48 - 2:56 - How to setup hooks
2:57 - 3:15 - Locals
3:16 - 7:24 - Example using locals
7:25 - 8:19 - Using data from Page State
8:20 - 8:44 - Summary
มุมมอง: 215
วีดีโอ
SvelteKit: Page Options (Prerendered/SSR/CSR)
มุมมอง 116หลายเดือนก่อน
Learn how to use all page options in SvelteKit! Chapters: 0:00 - 0:21 - Intro 0:22 - 1:49 - Basic Overview 1:50 - 5:10 - SSR vs. CSR 5:11 - 9:13 - Prerender 9:14 - 9:36 - Summary
SvelteKit: Form Actions
มุมมอง 184หลายเดือนก่อน
Learn how to use form actions in SvelteKit! Chapters: 0:00 - 0:23 - Intro 0:24 - 1:02 - 2 reasons for Form Actions 1:03 - 2:29 - Default action 2:30 - 4:33 - Named actions 4:34 - 6:57 - Form prop 6:58 - 8:32 - use:enhance 8:33 - 9:01 - Summary
SvelteKit: Invalidating Data
มุมมอง 130หลายเดือนก่อน
Learn how to bring in new data into your page via invalidation. Chapters: 0:00 - 0:26 - Intro 0:27 - 1:12 - Example Setup 1:13 - 2:12 - invalidate() 2:13 - 3:00 - depends() 3:01 - 4:13 - invalidateAll() 4:14 - 5:07 - Practical Example 5:08 - 5:24 - Summary
SvelteKit: Redirects
มุมมอง 125หลายเดือนก่อน
Learn how to redirect on the server side as well as on the client. Chapters: 0:00 - 0:13 - Intro 0:14 - 1:23 - redirect() 1:24 - 3:22 - goto() 3:23 - 3:42 - Summary
SvelteKit: Environment Variables
มุมมอง 106หลายเดือนก่อน
Learn how to use environment variables with SvelteKit! Chapters: 0:00 - 0:11 - Intro 0:12 - 0:46 - Vite 0:47 - 1:17 - Dynamic (doc read) 1:18 - 3:03 - Static (private) 3:04 - 3:22 - Static (public) 3:33 - 4:03 - Summary
Personal Story: My Journey into Software Development
มุมมอง 65หลายเดือนก่อน
Hey everyone! I hope that you can take a thing or two away from my personal story into Software Development
Welcome to the channel! @HunterScript
มุมมอง 85หลายเดือนก่อน
Hey there! 👋 I am Hunter, from The Woodlands, Texas - just north of Houston. As a software engineer, I enjoy building applications of all kinds with people from all over the world. 👨🏻💻 🌍 I am a huge fan of TypeScript. The tooling is impressive, but what really stands out about TypeScript is how it encourages me to be more mindful of the code I write. As far as frameworks go, 🥇 Svelte is always...
SvelteKit: Api Routes
มุมมอง 155หลายเดือนก่อน
Learn how to create API routes in SvelteKit! Chapters: 0:00 - 0:06 - Intro 0:07 - 2:00 - Creating an API route 2:01 - 2:41 - json 2:42 - 2:49 - error 2:50 - 3:59 - redirect 4:00 - 4:12 - Summary
Sveltekit: File Types
มุมมอง 134หลายเดือนก่อน
Learn the different file types in Sveltekit! We will cover: * page.js * page.server.js * layout.svelte * layout.js * layout.server.js * error.svelte * server.js Chapters: 00:00 - 00:44 - Intro 00:45 - 03:00 - page.js 03:01 - 03:43 - page.server.js 03:44 - 04:46 - layout.svelte 04:47 - 07:07 - layout.js 07:08 - 09:27 - error.svelte 09:28 - 10:13 - server.js 10:14 - 10:32 - Outro #svelte #sveltek...
Sveltekit: File-Based Routing
มุมมอง 135หลายเดือนก่อน
Learn how routes work in Sveltekit! #svelte #sveltekit #javascript #typescript #coding #programming Chapters: 0:00 - 0:22 - Intro 0:23 - 1:52 - Basics 1:53 - 3:53 - Parameter 3:54 - 4:31 - Summary
Svelte 5: Working with Children
มุมมอง 191หลายเดือนก่อน
Learn how to work with children at a basic level in Svelte 5! Chapters: 0:00 - 0:05 - Intro 0:06 - 0:25 - Basic Syntax 0:26 - 0:55 - Quick Example 0:57 - 1:54 - Snippets 1:55 - 2:10 - Summary
Svelte 5: Tick API (Lifecycle Hook)
มุมมอง 214หลายเดือนก่อน
Learn how and why you should use the Tick API in Svelte 5. Chapters: 0:00 - 0:36 - Intro 0:37 -0:58 - 2 reasons for tick() 0:59 - 1:27 - Mechanics of tick() 1:28 - 1:49 - Docs read 1:50 - 2:12 - Summary
Svelte 5: $effect and $derived (basics)
มุมมอง 3082 หลายเดือนก่อน
Svelte 5: $effect and $derived (basics)
Dark Mode in 2 mins using Tailwind CSS
มุมมอง 314 หลายเดือนก่อน
Dark Mode in 2 mins using Tailwind CSS
the $effect is called whenever the dependencies are changed, the onMount is only called once when the component is mounted, so how $effect could being replecing onMount hook? they are totally differente behaviours
My man! Thanks. Short sweet and to the point.
Great to hear! 😎👊🏻
I don't understand what the problem is here? Omit is doing exactly what it is designed to do. You don't have a "fullName" field so Omit does nothing here. Am I missing something?
The point of this video is to show that Omit will not bark at you if you are trying to omit a property that doesn't exist. We should be especially careful with this when refactoring.
@HunterScript Ah! Okay that makes sense. Thanks for the reply
No prob! 😎👍🏻
I would need more in depth information, how to default style a page with tailwind typography. But this video was still help, maybe a more in depth video how to style with prose would be awesome?! Like ...
Totally! Thanks for the feedback, and I agree. I think it would be best to redo all Tailwind videos from scratch.
This is great, thanks a lot for sharing.
Thanks for the kind comment, I'm glad you liked it!
congrats
Thanks! 🙏
I think this would create spaghetti code! IMHO, one way bind is better.
I see your point. It's a piece of syntax that you really need to know what is going on before using it.
How best to implement Skeleton load using SSR,
I am assuming you mean skeleton ui. I think just creating a state var, toggling that var accordingly, and handling the "Skeleton" in your CSS would work fine. Let me know if that answers your question.
Is there a built in function to save state to local storage to survive a reload? Or would i need to do that on my own
Not that I am aware of! If you do see something in the future, dealing with local storage let me know here and I will make a video.
Bro, your videos, makes me happy hahaha, because you explain very simple the amazing things of svelte & sveltekit and that makes me very excited to use this technology. I really feel that the svelte community is very warm , pretty cool magic By any chance, do you know if there is a practical way to add typescript to a sveltekit project already started with javascript from the CLI?
I’m glad you are liking the videos! 😎👊🏻💯 That’s a good question, I was just thinking about that the other day. If you figure it out please let me know! 🙏
@@HunterScript yeaaah!!!! really enjoy them :) as soon as I know I will leave it here, so far it seems the most efficient solution is to create a new project (with ts) and move the files.
i was waiting for a video like this for so long , I have been using sveltekit for 2years without understanding hooks so well , I hope you make a video about sveltekit + websockets in the future
What's the point of the snippet? Couldn't you just move the body of the snippet into the each loop?
Great question! Svelte only allows 1 component per file, so snippets is Svelte's answer to that constraint. I will reach for snippets when I think a piece of code should be extracted out and I don't want to create another component all together, so snippets lets me keep it in that file. Yes, if you have just 1 piece of iteration, then maybe a snippet is not the best to use, but if you have multiple iterations that use the same code inside the iteration, then it could be a good idea to create a snippet. Also, you can pass snippets to components which is handy.
@@HunterScript Yeah, that makes sense to me, like a situation where you have some elements that you might what to be inside of a link in one situation and then not in a link in another, then a snippet makes sense
So useful and concise.
I am glad you liked it!
KEEP UP THE GOOD WORK MAN !!
Thanks man! Glad that you like the videos!
Thank you for these tutorials 🙏
No prob! I am glad that you are enjoying them.
Amigo ativa as legendas em seus vídeos , para pessoas de outros países conseguir entender.
Buenísima idea! No sabía que estaban inactivos
tnx i use `if (browser)`
Valid option! 😃
thank u so much
No prob! I hope the video helps!
@@HunterScript tnx if u need suggestion for next videos .. lol: 1- tailwind 2 +error.svelte 3- Skelton ui 3 <svelte: option custom element are good
@@hosseinse4079 Thanks for the suggestions! (They are always welcome) I could do some more tailwind videos. I would need to map out what I need to cover. Yep, I will most likely do this, and it will be a lot of videos. I cover +error.svelte in the file types video (just a brief explanation) Skeleton UI looks cool, I've been using Svelte-Shadcn-ui the past year+ I really want to do a course on Playwright, I think the courses on YT are a bit hard to follow so I think there is an opportunity there. Also, I want to cover AWS services. Most of the AWS stuff has an "influencer" vibe, which is not my thing. But if I can find a way to quickly explain them at a high level to help people build a decent mental model fast then I will probably follow through with that. Looking forward to what 2025 brings. Happy New Year!
@@HunterScript happy new year
keep it up
Thanks! 😊
Just wanted to let you know that your short to the point with live-coding examples and explanation is really helpful in understanding each Svelte feature sort of in isolation, this is huge resource to the svelte community specially newcomers. Really appreciate you for doing this, hope you get more subscribers so more people can learn from you. :D - IMO this is almost complimentary with the svelte tutorial available on svelte website.
I really appreciate your kind words! Exactly, my aim is to teach concepts/syntax in isolation without the distractions of a complex example. I’m so glad that your are getting something out of these videos! 😎👍🏻
Sup. Subbed 👍🏽
Thanks for the sub! 😎👊🏻💯
Satisfies doesn’t “widen the type”. It doesn’t change the type in any way. It simply validates that the type of the expression is assignable to the one you provide.
You are right! I think my error here was my teaching approach of blending the example into the syntax.
Nicely explained man, that made a lot of sense. Now, I wonder if you have a video that shows me where I’m going wrong with the `unknown` type…
Thanks man! I am glad that you got something out of the video. Yes, I do have a short on unknown: th-cam.com/users/shorts8NfPR2NsgtA Main Takeaway: Any -> can be any type, but turns off type-checking Unknown can be any type, but does NOT turn off type-checking. This is also a good follow-up video to see the difference in action: th-cam.com/users/shortsNom_q7Mpr2g Hope it helps! 😎👍
some nice in your examples is the contrast of how would be the code if isn't exist the features of svelte
😁✌🏻
when use const {prop1,...,propN} and when use let {prop1,...,propN} ??
Good question! I just use let since that is what they use in the docs. But I haven’t used const 🤔
@@HunterScript yap!! idk yet what is the good use of each one
i just wondering if there's a way to reduce the < ()=> counter.increment() > syntax. for example, wrapping that funcion or reassigning it , :o
@dei8bit Inside our onclick handler we need to use a function when dealing with state w/ classes. You could create a function that wraps around the class but I think that would defeat the purpose a bit using classes since you could just use the function approach shown at the beginning of the video. I hope this explanation makes sense!
Yeah you can. Instead of `increment(){ ... }` you could declare the function like this `increment = () => { ... }` You could try to `console.log(this)` inside the increment function to understand why this happens :)
Right on! I’m going to give this a look
so nice shorts bro, i just love it
Thanks man! I appreciate the views 😎👊🏻💯
@@HunterScript go ahead!!! ☺ you format is nice, very kindly , minimalist, chill, i really enjoy
@@dei8bit Thank man! I really appreciate it! I try to just teach syntax/concepts without the example getting in the way. I figure that if people understand the tools, then they can apply them to fit their own use cases 😊
tnx
✅
do u have video about hooks in svelte?
That is on my list! Soon I hope to cover most of SvelteKit. We need more SvelteKit vids on YT.
javascript is drunken
Haha I used to teach JS in clases to high schoolers and junior high and when we would get to coercion I would apologize in advance. They were blown away that a programing language could have its own set of problems.
tnx
😎👍🏻
thank you
No prob! Thanks for watching the video!
@@HunterScript tnx to u all other videos are about svelte 4
tnx
😎👊🏻💯
thanks
No prob! Thanks for checking out the video!
Can you create APIs that can be exposed to outside of Sveltekit?, lets say a native app as an example.
Absolutely, this api routes are public.
@HunterScript Great, thank you.
No prob! Anytime!
Love the routing system!
Me too! Makes things so much easier!
The april fools joke here is a reference to a joke coffee machine protocol, which is a reference to the first webcam which was just used to check the level of a coffee pot. Obviously if you ask a teapot to brew coffee the correct response is code 418 "I'm a teapot". I don't think russels teapot or the utah teapot have any relation but who knows.
Great insight here! 😎👊🏻💯
"Working with children" "Display a child" "Destructure a child" If you know nothing about programming, this sounds so weird
Hahaha 100%
As P. Diddy once said "It's easy to work with children until you have to fork them"
god created shit in what, 6 days? and he already made JS on the 9th? xD
If only Brendan Eich just spent a little bit more time lol
@HunterScript I wake up every day relieved I don't have to use JS
I am personally a fan, but man… it’s has it’s problems.
This is cursed knowledge. Now I want to return 418 on a silly web call...
😎👍
🎉
What are the other side effects of treating files as modules? What *are* modules? It would be helpful to have an explanatory short of that! It would probably be challenging to cram so much useful information into a short, but I think that's what the YT algorithm likes and what would be very useful for devs casually browsing YT!
Good idea! *Adding it to the list Personally, I like the restraint of 60 seconds. I have found that it makes me hyper-focused on what really matters. I think leaving out info is just as important as what you mention.
It's my favourite response code! Very important to handle it in your client side code!! 😤
😃✌
So good!😃
Thanks! 😄✌🏻
Is this like HTMX?
@ericb314 I believe so. From my limited knowledge, I think that the HTMX is a bit more fully featured but I am not positive. With that being said, I am a HUGE fan of Carson Gross (the creator). His essay on "Locality of Behavior" really helped me concretize a few concepts that I had been thinking about for a while. htmx.org/essays/locality-of-behaviour/
Hahaha OMG not another JS framework! 🤣
😁✌🏻
Hey Hunter!
Hey hey! 👋🏻 Hope all is well! Shoot me an email, I’d love to hear an update!
@ just emailed you now!
I have a very educational challenge for you if you're up for it! Given any arbitrarily deeply nested object type like this: { a: { b: any }, c: any} return a union of all valid property accesses as string literals. So for the above example that would be: "a" | "a.b" | "c" I had to use this once when I used a data table component from Nuxt component library, so it's actually useful as well as very educational! I hope you try this out, and if you need any hints or have any questions, I would love to answer them!
This would be a good video to make, I'll at it to the list! 😃✌️
This is very useful, thanks! Here's something else I recently came across. Maybe you want to make a short about it? type Options = { something: string }; const options = { something: "test" } as const satisfies Options; options.something // "test" string literal Some other ideas is to make videos about string literals in typescripts type system. That's where things get really interesting and complex!
Hey Eric, great idea! I will definitely add `as const satisfies` to the "videos to make" list. Thanks! 😊