When You first look at this app, it looks so simple...but then Rich starts explaining all the neat small quirks You can achieve with Svelte to make this app as awesome as possible. For me, amazing learning experience.
If you wanted to show the button when the input is valid using Tailwind you could put class="peer" on the input element and class="peer-valid:block" on the button.
Yes. This actually shows a common problem with the vast majority of tailwind complaints: it's a much more robust than meets the eye. It's difficult to "get" on a side-project weekend.
For someone who had worked with different convoluted and opinionated css frameworks over a decade, I see tailwind as the holy grail of what css frameworks should have been in the first place. No more fighting over default styles, no more sass/scss. Tailwind is just simply beautiful! People who have argued tailwind to be not good absolutely have no idea.
Try the VS Code plugin 'Inline Fold' by Mohammed Alamri - it automatically hides/folds all your Tailwind classes. Then set a keyboard shortcut to hide/show the classes
I've been struggling to find a good ORM for javascript / typescript. I've used knex, then tried prisma, then moved to drizzle. When Rich said "they all suck." I really agree. They are *good enough* but not quite there yet imo.
Raw SQL with string interpolation and type coercion is where it’s at. Best experience IMO. But I’m biased, I think every software engineer should know at least basic sql
For sql, hands down the best way I've seen across all languages is sqlc in golang, it's not an orm or query builder, you write raw sql in a file, and it generates typesafe functions for you. Honestly just amazing, would be interesting to do it for js
Sqlx for Rust is very similar. You inline SQL but at compile time it validates the SQL, placeholders, etc and generates the correct return types for you
@@pearceodegard582 Yes, AFAIK with sqlx the query must be known at compile time so it cannot contain any dynamic data in the query itself. Then you place placeholders in it and call the query with values for them, which is escaped by the database itself rather than doing string manipulation before sending it over.
I had the same view of Tailwind as you before trying it out, now I can't go back. It actually solves the key sole problem prior to its creation - management of styling your application.
Seeing Rich speak ill of all the trendy struff is kinda reassuring to me that I'm not crazy. Also he thinks a lot in the way that I think, like mutating the data for the sake of a more responsive presentation, like why complicate stuff when you can simply get things done?
@@thedelanyo Backend serves 90s style html to the browser. All dynamic behaviour happens through href links, forms and inputs. Full page reload on every interaction.
You make sure you use form actions and the data loading feature to handle CRUD. Make sure there are no features hidden behind logic that requires JS on the client. So basically don't do thinks like "on:submit|preventDefault={handleSubmit}" etc.
Big fan of your work Rich, but I'll be brutally honest with you, I am worried that you are working at vercel.They are (rightly so as a VC Backed company) prioritizing the commercial interest over the community that make frameworks a success. I know people will call me crazy but the quality of the nextjs has decreased and is becoming increasingly lockled in to vercel. It is for instance, quite hard to selfhost a decent serverless xp for next if your not using vercel. The svelte core team and community are refreshingly pragmatic and seems to favor simplicity. I am worried that those two realities are not just compatible. I hope you'll be able to fight against the nextification of svelte and if not that your tc is worth it. With all respect and gratitude for the hard work. Tim.
The creator of Skeleton (a Svelte UI library) was asked the same question not long ago. His answer: " I did some testing during the last major refactor of the modal system. It has some a11y benefits, but honestly I found it incredibly difficult to work with. Especially in framework like Svelte - it doesn't work in a "Svelte-like" manner, it seems more geared towards folks writing apps in vanilla JS. We may revisit in the future, as I'm typically keen and prefer native browser solutions, but as it stands it's likely not going to be a consideration anytime soon Just FYI, we recreate most of the a11y benefits now - include focus trap, etc. So don't let that scare you away from our implementation [...] It's been a few months so some of the specifics have escaped me, but I recall the open and close mechanics relied on modifying a open attribute. There wasn't a great way to programmatically trigger it as we desired. And it really didn't jive well with the singleton approach we use for our notification features (ex: toasts) [...] (when asked about the close event on an HTMLDialogElement) Yeah you have to have a reference to the element - which is not great in Svelte to start with, as that means you have to start awaiting lifecycle events (ex: onMount) and then it relies on events rather than being able to control the state directly. [...] It totally makes sense for apps not build with something like Svelte, React, Vue, etc - where you have simpler and reactive state management. So I get why they went that path. " I'm tired of copy-pasting so I suggest you join the discord if you wanna see the rest / ask him a more specific question yourself
The dialog element spec is implemented horribly. It requires you to use the `openDialog()` function - unlike every other html element ever. Simply adding the `open` attribute does nothing. I'm simply baffled by just how awful that spec is. It makes it practically unusable for most scenarios.
lol, embedding SQL. That's insane. For so many reasons. lol. I assume he's done it for brevity and presentation reasons, but even so - how you cannot value a proper ORM is beyond me. I've found I disagree with a lot of what Rich Harris talks about - but he does do a lot of things right, as well.
When You first look at this app, it looks so simple...but then Rich starts explaining all the neat small quirks You can achieve with Svelte to make this app as awesome as possible. For me, amazing learning experience.
Rich has a very smooth approach for presenting stuff! Great progress on Sveltekit
If you wanted to show the button when the input is valid using Tailwind you could put class="peer" on the input element and class="peer-valid:block" on the button.
Yes.
This actually shows a common problem with the vast majority of tailwind complaints: it's a much more robust than meets the eye. It's difficult to "get" on a side-project weekend.
🫠
This was amazing. Eagerly waiting for the shallow routing feature! Thank you for continuing to improve upon Svelte/Kit!
Man I love this. Now I got permission to mutate data! Hell yes!
😂 i cheered when he said query builders suck because boy do they. you could learn effective SQL 3x over instead
the way he imported the page as a component
🤯
More such walkthroughs from RH. This is my kinda ASMR
Thank you for all your work on Svelte.
I also used to hate Tailwind. I was very against the ugliness, but I gave in and use it now.
For someone who had worked with different convoluted and opinionated css frameworks over a decade, I see tailwind as the holy grail of what css frameworks should have been in the first place. No more fighting over default styles, no more sass/scss. Tailwind is just simply beautiful! People who have argued tailwind to be not good absolutely have no idea.
Try the VS Code plugin 'Inline Fold' by Mohammed Alamri - it automatically hides/folds all your Tailwind classes. Then set a keyboard shortcut to hide/show the classes
@@MattHeslingtonCtrl+T / Command+T is the default I think
wow amazing work Rich, those are some great features!
I've been struggling to find a good ORM for javascript / typescript. I've used knex, then tried prisma, then moved to drizzle. When Rich said "they all suck." I really agree. They are *good enough* but not quite there yet imo.
EdgeDB has been pretty nice
Raw SQL with string interpolation and type coercion is where it’s at. Best experience IMO. But I’m biased, I think every software engineer should know at least basic sql
@@TannerBarcelos thanks, I might just do that from now on. I can’t help but think of LINQ from C# and how convenient that is
True, everyday I'm more and more grateful for EF Core.
Does anybody know if he made the repo public for this? I'd love to take a look.
I'm sorry if he showed in the video and I didn't catch it
For me this guy is the "Micheal Jordan" of javascript
🏀
For sql, hands down the best way I've seen across all languages is sqlc in golang, it's not an orm or query builder, you write raw sql in a file, and it generates typesafe functions for you.
Honestly just amazing, would be interesting to do it for js
Sqlx for Rust is very similar. You inline SQL but at compile time it validates the SQL, placeholders, etc and generates the correct return types for you
Would y'all say it is easy to prevent SQL injection with sqlc and sqlx?
@@pearceodegard582 Yes, AFAIK with sqlx the query must be known at compile time so it cannot contain any dynamic data in the query itself. Then you place placeholders in it and call the query with values for them, which is escaped by the database itself rather than doing string manipulation before sending it over.
So this whole thing works without JS? Nuts how good everything you do is. You literally consider every single issue a dev could have
I had the same view of Tailwind as you before trying it out, now I can't go back. It actually solves the key sole problem prior to its creation - management of styling your application.
Nice, was waiting for this for a long time :)
Is there a GitHub repository for this project?
Any news on when this feature will be released?
Rich, you can yammer all you want.
I laughed hard on the part where you give us permission to mutate on data
This example is vulnerable to SQL injection right? for example `VALUES (${user.id}, ${user.username}....` the username could inject SQL
why should someone prefer capture/restore over replaceState inside beforeNavigate ?
Rich Harris needs a workshop on Kysely
Quote of the day : I would rather look lame than look the same 🤍🤍
Bravo! i hope to find a new job where using Svelte.
Finally we got permisson to mutate data. I wont go to jail now when I public my private repos.
Welcome to another sermon on the mountain
Seeing Rich speak ill of all the trendy struff is kinda reassuring to me that I'm not crazy. Also he thinks a lot in the way that I think, like mutating the data for the sake of a more responsive presentation, like why complicate stuff when you can simply get things done?
Thanks
Rich looks like the Jesus meme guy.
Very succinct. But how does one detect js being disabled?
Easy! The browser completely stops running your JavaScript code. And the app downgrades to a typical 90s web site with full page reload.
@@ash8128 okay. So how does one handle that logic? Because in the video, he said there's a fallback for "disabled js users"
@@thedelanyo Backend serves 90s style html to the browser. All dynamic behaviour happens through href links, forms and inputs. Full page reload on every interaction.
You make sure you use form actions and the data loading feature to handle CRUD. Make sure there are no features hidden behind logic that requires JS on the client. So basically don't do thinks like "on:submit|preventDefault={handleSubmit}" etc.
Big fan of your work Rich, but I'll be brutally honest with you, I am worried that you are working at vercel.They are (rightly so as a VC Backed company) prioritizing the commercial interest over the community that make frameworks a success. I know people will call me crazy but the quality of the nextjs has decreased and is becoming increasingly lockled in to vercel. It is for instance, quite hard to selfhost a decent serverless xp for next if your not using vercel. The svelte core team and community are refreshingly pragmatic and seems to favor simplicity. I am worried that those two realities are not just compatible. I hope you'll be able to fight against the nextification of svelte and if not that your tc is worth it. With all respect and gratitude for the hard work. Tim.
modals are now a part of the browser api (dialog element) - why make a custom one?
The creator of Skeleton (a Svelte UI library) was asked the same question not long ago. His answer:
"
I did some testing during the last major refactor of the modal system. It has some a11y benefits, but honestly I found it incredibly difficult to work with. Especially in framework like Svelte - it doesn't work in a "Svelte-like" manner, it seems more geared towards folks writing apps in vanilla JS. We may revisit in the future, as I'm typically keen and prefer native browser solutions, but as it stands it's likely not going to be a consideration anytime soon
Just FYI, we recreate most of the a11y benefits now - include focus trap, etc. So don't let that scare you away from our implementation
[...]
It's been a few months so some of the specifics have escaped me, but I recall the open and close mechanics relied on modifying a open attribute. There wasn't a great way to programmatically trigger it as we desired. And it really didn't jive well with the singleton approach we use for our notification features (ex: toasts)
[...]
(when asked about the close event on an HTMLDialogElement)
Yeah you have to have a reference to the element - which is not great in Svelte to start with, as that means you have to start awaiting lifecycle events (ex: onMount) and then it relies on events rather than being able to control the state directly.
[...]
It totally makes sense for apps not build with something like Svelte, React, Vue, etc - where you have simpler and reactive state management. So I get why they went that path.
"
I'm tired of copy-pasting so I suggest you join the discord if you wanna see the rest / ask him a more specific question yourself
The dialog element spec is implemented horribly. It requires you to use the `openDialog()` function - unlike every other html element ever. Simply adding the `open` attribute does nothing.
I'm simply baffled by just how awful that spec is. It makes it practically unusable for most scenarios.
because the api impl is half-assed
@@maloxi1472thanks for the breakdown! I've been wondering why none of the Svelte UI libs haven't implemented this yet
Tailwind is a design system
lol, embedding SQL. That's insane. For so many reasons. lol. I assume he's done it for brevity and presentation reasons, but even so - how you cannot value a proper ORM is beyond me.
I've found I disagree with a lot of what Rich Harris talks about - but he does do a lot of things right, as well.
height-screen => h-screen 😊
Are you a potato fan too?
Amen to ORMs sucking.