this post was submitted on 04 Oct 2023
3 points (80.0% liked)

Svelte + SvelteKit

526 readers
2 users here now

Svelte is a JavaScript framework for building user interfaces (UIs) that compiles your code into efficient JavaScript during the build process, resulting in better performance and smaller bundle sizes. Svelte focuses on reactive programming, where UI components update themselves when data changes, eliminating the need for a virtual DOM. Svelte Kit is an extension of Svelte that adds features like routing and server-side rendering, simplifying the creation of full-stack web applications. It provides file-based routing and supports server-side rendering, enabling faster initial page loads and improved search engine optimization. Svelte Kit combines client-side Svelte components with server-side rendering and serverless functions for a seamless development experience.

founded 1 year ago
MODERATORS
 

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)

you are viewing a single comment's thread
view the rest of the comments
[–] [email protected] 0 points 1 year ago (1 children)

Same as any other project, just keep at it. Also styling as a prop is a bitch in svelte.

[–] [email protected] 1 points 1 year ago (1 children)

What do you mean by styling as a prop?

[–] [email protected] 0 points 1 year ago (1 children)

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.

[–] [email protected] 2 points 1 year ago

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