Video

Can you do a Tutorial where we will create a Facebook clone-- using Svelte, SvelteKit, Postgres Database, Drizzle ORM and Lucia Authentication. This tutorial is a big Application (I know), but then, it will be a series like this -- czcams.com/video/z1UMKqMN3VQ/video.html And with such a tutorial, you would have taught us all the practical real life use case of all Svelte and SvelteKit features, and their usage in a real world situation. Regards.

I was literally thinking of this same idea today, it makes more sense to download the actual components than to download it as a dependency. I plan on building my own web framework in Nim and I think I will port these components directly for my use-case.

They should have copied mobx more, this get and set context is silly especially if you dont have a singleton and you want to instantiate this class in many components.

This is how i used mobx in react

I ran into an issue here at the 17:20 minute mark in that all the fields returned from the load function was undefined. I started digging into this and realized that what is returned from the load function is a promise, hence the +page.svelte renders all the content as undefined as they had not been resolved yet. I fixed this issue by making the load function itself be asynchronous: export const load = async ({ locals, params }) => { ... } This way "await" can be used inside and then I could simply do: const project = await getProject(params.projectId); return { project: project }; Not sure if anything changed here in SvelteKit or PocketBase as I tried copying copying your code from github first with the same issue. But this is at least a fix to guarantee that the data is resolved in the load function _before_it is passed to the +page.svelte. Just wanted to share in case anyone else gets stuck on this. And thanks one million times for this fantastic series. I'm a huge Svelte fan and I absolutely love how PocketBase meshes with it, beautiful technology and this tutorial masterfully showcases it. Keep up the good work!

Amazing lib and fantastic video, thanks!

Please make an updated video for use with Svelte 5. I'm unable to figure out how to use this with the new $props rune in order to transfer the correct form types. My form is simply "any" on the client.

Great tips, thanks!

How will this work in Svelte 5?

Thanks for the video, I am trying to solve a scenario where I have a table with few number of records, each row has a check box with few buttons on page, update, delete etc. I am planning on pre populating form fields when user checks a row and hits submit. Any thoughts on how this binding can be done in svelte kit?

In my project json doesn't have ID Can I use title or description or else? Please tell me

Good video 👏👏

Can you do a few videos on Keras and TensorFlow, please? :) Great content on your channel from what I've seen so far!

I don't see the appeal here, I wouldn't have designed the card component like that to begin with. And with React we would've simply passed the components as props, so it isn't a new pattern. This actually makes Svelte take more effort to write, requiring you too package and dump components as properties.

Not sure why but in displaying the project routes>projects>[projectId] everything was showing as undefined although it would console.log. So I added const project = await getProject(params.projectId) call after defining the function and then returned project: project.project (just terrible terrible code) but it displayed as expected after that. Maybe this helps if someone else hits the same issue.

FACT: Thumbnail is the hardest word in the English language to type.

I'd love a video about the snippets you briefly mentioned. Whats the best practice?

MAN, IDK HOW TO THANK YOU ENOUGH

Any particular reason you don't just use a singleton pattern with the `getToastState` function? Inside the getter you could check if a ToastState class already exists in context and just return it. If non exists yet, this is the first call, and you create a new ToastState, set it to context, and return it. This way you would not have to consider when to use `set...` and when to use `get...`.

why not write data to servers disk, that would be faster than api call to redis to get the data

1. I like this approach 2. I like how many times you said toast

svelte is amazing...

Hunta you are the best, wish you well dude <3

As far as I understand why you should have buttons, links, etc. as reusable components (as you may want to have a concise layout across pages), I don't understand why you overengineered such a simple component as a card. In most cases, you don't have to create separate components for text, titles, etc. It not only makes the code a mess but also much more complex, which is something you should avoid. You could simply include everything inside the card.svelte. In my personal opinion, the file structure should be as clean as the code, without pointless components and scripts. But yeah, I get that you may want to keep a concise layout across your page, and you may want to apply some fancy text styling to each of your paragraphs - I get it, really. But it doesn't justify a component with just a <slot/> in it. You could just create a simple CSS class, import it globally in global.css so each page would have access to it (if you wish not to import it to every individual component). Or you don't even have to create classes, just apply the styles globally to each <p> tag under <main> or <body>, etc. My point is, if you train yourself to keep things simple and maintainable, you won't regret it later on. It is always simpler to edit global.css styles than searching for a specific text component across hundreds of them. Of course, you can always overwrite styling from your global.css inside your +layout or +page.svelte - it is still a 20x simpler, easier, and more maintainable approach. I'd just like to point out that I am not a professional Svelte (or any, in fact) developer. I have some knowledge, and I wouldn't call myself a 'pro'. I just do it as my hobby. You are very welcome to discuss it in the comments - I would love to hear your opinion (as a pro dev, whether you agree or not). Perhaps there is something I don't understand or see, please lighten me then. Thanks

what about using Promise.all()?

might look good in theory, but if you have an API call inside +page.server.ts it then event.url.pathname will show the API url, not the current page?

Makes one wonder whether we should stop using onclick handlers altogether then? Over 50% of traffic comes from mobile these days, fact.

thank you for the great work you are doing here and on the UI libraries you're working on !

Hi, I find that, when I hit the back button on the browser, onOpenChange is not running (I console.log it but print nothing). Did you experience the same issue?

this makes me happy

anyone know if this still works with the latest 0.22.15 ?

9:32 this is some very complicated kinda over engineered code... Why don't you store the toasts in a record where the key is the id? Not sure if it's a good idea to mutate the array of toasts. No need to handle a map of timeouts then either...

This looks great! Really wanted a shadcn port in svelte. One question though, does this require sveltekit or can it work with just svelte(without kit)?

i am having trouble setting it up. specially i have a user-table with id as a number

4 days no new knowledge Master 😢?!

for the setTimeout cleanup, would something like this suffice constructor() { onDestroy(() => { this.toasts.forEach((toast) => { clearTimeout(toast.timeoutId); }); }); } addToast(title: string, message: string, durationMS = 5000) { const id = crypto.randomUUID(); const timeoutId = setTimeout(() => { this.removeToast(id); }, durationMS); this.toasts.push({ id, title, message, timeoutId }); } removeToast(id: string) { const toast = this.toasts.find((t) => t.id === id); if (toast) { clearTimeout(toast.timeoutId); } this.toasts = this.toasts.filter((toast) => toast.id !== id); }

If passwordless supported?

Awesome, this was so helpful! Thanks! Do you have a strategy for components too? For instance if you wanted to render markup conditionally in the main nav (like showing a login button if the user isn't logged in yet). How do you keep it reactive?

Awesome 🎉

I dont get why you switched from Next.js to Svelte. You mentioned, to keep things more based in javascript to render out the charts, but I don't understand how Svelte really makes that much easier when you can do that in React. Mostly curious, because I like the separation of js vs. the jsx aspects and if the js is too large I'd just move it into a hook. I guess, I dont know enough about Svelte though.

thank you!

Helllo, just started with Svelte and worked through the tutorial. There is one chapter about props which does not recommend $props due to performance issues. Since you used them, how big of an issue is it really? Coming from React + TS I prefer the syntax used in this video but I am hesitant to use it.

The if check in +layout.server.ts isn't it unnecessary?

Awesome!

I can’t believe I’m still not subscribed to this channel 😮 FIXED

This is so impressive, I wish I could use svelte at work.

As a senior architect, I will be always amazed how javascript community will always try to avoid a pattern that is easy to learn, efficient and SOLID : dependency injection. We all figured it out long time ago, but still another framework trying to reinvent the weel.

I'm with mixed feelings about this svelte 5. It's looking like a lot with React ( I hate react ) But the content is great, btw

I get an error "Cannot read properties of undefined (reading 'loadFromCookie')" when attempting to read 'loadFromCookie' from an undefined object. Suggesting that at the point where loadFromCookie() is being called, the authStore object or its method isn't properly recognised.

Great video, wow!