Erik V

Svelte's ecosystem is essentially Web APIs and HTML/CSS/ Javascript. Which is more pragmatic than it is clever. And quite convenient to lean on.

- If pre-load is the answer to the second question. What do you do on mobile. Where preload only fires on touch, not hover?
- Do you implement some caching strategy on the client or server?
- What is your app?

Question for those using Svelte-Kit and Vercel
- How do you co-locate your DB near your frontend?
- How do you deal with load functions and cold starts? (Aside from pro plan).
- Async in universal load blocks nav. But streaming requires server load functions, which may cold start, blocking nav.

You can make themes in the config. They use css custom props, so like --bg-base-active or --bg-base-inactive, whatevs. Then reassign it's color based on theme. Then you can use bg-base-active etc.. No dark modifier is needed. All this happens as props in the config. And it's treeshakalbe + uses LSP.

Why use all those variant modifiers and 100-900 colors instead of using tailwind.config to create themes?

So much has changed 🥲. Yet still so many improvements to make 😅.

Same for remote functions. - Is there a way to *not* call getReallyBigPayload based on some caching mechanism?

<script>
import { getReallyBigPayload } from './data.remote';

let { item } = $props();
</script>

<p>likes: {await getReallyBigPayload(item.id)}</p>

Does anyone have recommendations for articles, videos, etc... on Svelte-Kit load + client side caching?

I have a hard time wrapping my head around using something like load functions and IndexDB. Since load may happen on the server without having the context of whats cached on the client.

Better Commits V2.0 [Share your config] · Issue #122 · Everduin94/better-commits 🦋 Better Commits V2 I'm planning to refactor better-commits semi-soonish. The codebase doesn't really reflect how I tend to do things now. Before I do that, I want to gather some real world example...

If you use better commits, consider sharing your config and an example commit for testing :)

github.com/Everduin94/b...

Question (2/2)

Should state like this, managed by page data / a cookie, generally have a $state rune in tandem representing it? It feels necessary with 100ms+ delays. But makes the code muddier imo.

Or am I totally missing something here?

Question for my Svelte wizards. (1/2)

Context

I have code where my state is managed by a cookie and a form action (a button). This way, when I refresh, I SSR the state I want.

On Vercel free tier (project over 1mb, no edge) this puts a delay on my button, and on a slow network, a long delay...

YouTube video by the bootleg boy 2 remember when lofi hip-hop still sounded like this.

Remember when vibe coding meant listening to lofi bootleg boy with a cup of pour over coffee writing svelte?

www.youtube.com/watch?v=617L...

I'm in a software dev funk. I'm really starting to just not enjoy it.

I spent 2 days rebuilding my stairs. - Challenging, rewarding, safer for my kids.

I spent 4 months of nights refactoring my long-running svelte project. Tedious, exhausting, and the outcome leaves something to be desired.

The more I *try* to use AI for programming, the more I feel like I'm apart of some global hoodwink lol.

Sweet. Do you have an example? How do you set things like app name, icons, theme color, etc?

Service workers • Docs • Svelte Service workers • Svelte documentation

If all I need I want out of a PWA is the most basic install this on my phone with these icons and background color. - Is switching from @vite-pwa/sveltekit to svelte-kit service workers (svelte.dev/docs/kit/ser...) ideal?

I am very, very, very.... very, tired of @vite-pwa/sveltekit 🫠

Makes sense! This is in dev mode, haven't tried in a production build.

Just trying to make sure I'm not significantly leaking anywhere, and this seems to be the biggest offender. So good news if it's mostly a dev thing haha.

When running a heap snapshot in a Svelte 5 application. What are detached comments? And why are they so... big?

Is this something that's unavoidable? Or a product of making a mistake somewhere?

Ouh great example, and as mentioned, exactly the behavior I was looking for haha. Missing an example like this in the docs (and the streaming universal load tip mentioned earlier) has been a source of confusion for me for a while.

Learned a lot, thanks to both of you :)

I learned something new 😅

I was under the impression that you can only stream via +page.server.ts. Is this no longer true?

The problem with +page.server.ts is you have to go out to the server, when you could have just called from the client directly. Depending on architecture, this can have significant impact.

But streaming in sk requires page.server. It's not the same as just fetching from the client.

But the load function is blocking *navigation*. - I can navigate immediately, render a loading state, and fetch from the client regardless of data.

i.e. I just personally don't use SSR to render data in that context, because it find it unintuitive to not immediately navigate on click.

Load functions with async noticeablely block navigation. Alternatively, streaming requires page.server, still blocks on request and costs an extra hop depending on architecture.

i.e There are implications of using load functions, beyond the fixed cost of the data, that might not feel intuitive.

Just to be clear. Not asking anything of kit or the maintainers. I think they've done a great job with it. I know what parts don't work for me and I just don't use those parts. Just sharing my experience / view point. - I'm not saying there's an issue with Svelte Kit.

It does block the page when going out to server. It just doesn't block on the async request. So if you have a cold start or high latency on Vercel. You might wait for a second, then navigate, then start streaming.

Developing locally, this is not noticeable, because 0 latency on localhost.

"This is useful if you have slow, non-essential data..."

This is why I said "(but essential)" 🙂.

I refactored my mid-sized app to use streaming over a year ago. It requires you to use page.server.ts. Which wrecked the performance of my app in prod (on Vercel free plan).

Example from my experience. If my page needs to render slow (but essential) data. Kit does not have an intuitive way of doing this.

I think that you are one of the most knowledgeable people on kit. So you know where to deviate from the docs or "break the rules". For us mortals, we get confused :)

Based on OPs comment. - I think Svelte could make sense and be intuitive for just about any web app

(imo) the same is not necessarily true for kit. It could be "in the way" or "unintuitive" for many web apps

For me, kit is the best option w/ svelte. I just avoid some features.

Thanks for the example!

Maybe it's just because its a quick POC. - [svelte] assignment_value_stale is logged on each change. And query on line 12 of createResource is marked with state_referenced_locally warning.