Title.
I'm going to use svelte and sveltekit. Most likely tailwind. Zod for validation.
Any tips and tricks/ideas, pits to watch for before I commit heavily into falling into them.
This project could potentially be in vue/react but in my opinion svelte is more appealing to me (specially because of stores)
9 Comments
silas@programming.dev · 3 pts · 2y
If you’re handling any sensitive data, passwords, or private user data, DO NOT use stores. Stores should only be used on the client-side. Use event.locals to pass data around for the user on the server side instead. If you use a store on the server-side, you risk that data being exposed or used in other current users and browser session.
For form validation, check out SvelteKit form actions. Also, I personally find Yup to be easier to use than Zod
8rhn6t6s@lemmy.world · 1 pts · 2y
Learn about hooks if you need validation on page navigations
______@lemm.ee · 1 pts · 2y
Could you explain an use case. I don't understand what would need to be validated when navigating.
8rhn6t6s@lemmy.world · 1 pts · 2y
This is more protecting data.
For example if you have a page that only certain users can view. You can create a hook to validate their credentials every time they visit that page and redirect them out if necessary.
______@lemm.ee · 1 pts · 2y
Oh so authentication, I was thinking form validation. Interesting.
Blamemeta@lemm.ee · 0 pts · 2y
Same as any other project, just keep at it. Also styling as a prop is a bitch in svelte.
______@lemm.ee · 1 pts · 2y
What do you mean by styling as a prop?
Blamemeta@lemm.ee · 0 pts · 2y
You know how in react, you can pass style to nested components with props? The classname/SX prop specifically? A tad harder to do in svelte.
silas@programming.dev · 2 pts · 2y
I’d try using props for high-level component states (primary, secondary, disabled, loading, online, error, etc.) instead of one-off styles. Then your props will manage a bunch of styles and functionality all at once and you’ll stay a whole lot more organized. You can even have a settings/options prop that changes minor things if you’d like. Then, for one-off or edge-cases related to styling, you can use a css variable