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)

  • silas@programming.devM
    link
    fedilink
    English
    arrow-up
    3
    ·
    edit-2
    1 year ago

    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

    • ______@lemm.eeOP
      link
      fedilink
      arrow-up
      1
      ·
      1 year ago

      Could you explain an use case. I don’t understand what would need to be validated when navigating.

      • 8rhn6t6s@lemmy.world
        link
        fedilink
        arrow-up
        1
        ·
        1 year ago

        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.

  • Throwaway@lemm.ee
    link
    fedilink
    arrow-up
    1
    arrow-down
    1
    ·
    1 year ago

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

      • Throwaway@lemm.ee
        link
        fedilink
        arrow-up
        1
        arrow-down
        1
        ·
        1 year ago

        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.devM
          link
          fedilink
          English
          arrow-up
          2
          ·
          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