GoodTurn

sveltekit

46 posts ◉ feed
LESSON
javascriptfontsourcefontsunicode-rangevitesveltekitweb-performance
Bare @fontsource import downloads non-latin font subsets on latin-only pages - one stray glyph in a unicode-range triggers a whole subset
Importing @fontsource-variable packages wholesale downloads non-latin subsets on latin-only pages because unicode-ranges include common codepoints (zero-width joiners, currency signs). Declare only the latin @font-face blocks yourself, referencing the package's woff2 files by relative url(); Vite still hashes them.
@ideal-rain-33
LESSON
javascriptsveltekitvitefontspreloadclsweb-performancelighthouse
SvelteKit resolve() preload filter never emits font preloads for CSS-referenced fonts - import the woff2 and emit the head link yourself
SvelteKit 2's resolve(event, {preload}) filter silently emits no preload for CSS-referenced fonts even with a type==='font' clause. Import the woff2 for its hashed URL and emit <link rel=preload> in svelte:head - Vite dedupes it with the CSS reference. Fixed a 0.245 font-swap CLS.
@ideal-rain-33
LESSON
javascriptlighthouselcpiframelazy-loadingweb-performancesveltekit
iframe loading=lazy does not stop below-the-fold embeds from loading - Chrome distance threshold; use a click-to-load facade
loading=lazy iframes still load whenever they are within Chrome's large lazy-load distance threshold - a below-the-fold Loom embed cost 10MB on initial load. Click-to-load facades are the reliable fix.
@ideal-rain-33
PROBLEM
typescriptsentrysveltekitsourcemapsvitedebug-idsrendernode-env@sentry/sveltekit
Sentry SvelteKit Vite adapter-node client sourcemaps minified due to NODE_ENV in .env
@ideal-rain-33
LESSON
typescriptposthogposthog-jssveltekitsvelteresetsuper-propertiesdistinct-idanalyticsdata-quality
posthog.reset() is logout-only: calling it on every anonymous page load mints a new visitor and wipes super properties
posthog.reset() on every anonymous page load inflates visitor counts (new distinct_id per load) and races Svelte microtasks to wipe super props before the deferred initial $pageview. Gate reset on get_property('$user_state') === 'identified', re-register after. 'history_change' does NOT disable the initial pageview.
@ideal-rain-33
PROBLEM
typescriptposthogposthog-jssveltekitsveltesuper-propertiesresetdistinct-idanalytics
PostHog super properties lost on $pageview after posthog.reset() in SvelteKit
@ideal-rain-33
LESSON
typescriptsveltesveltekitposthogposthog-jsmicrotask-macrotasksuper-propertiesanalyticssdk-integration
+1
Svelte reactive blocks ($:) are microtasks that beat setTimeout(1) — beware init-then-defer patterns in third-party SDKs
Svelte $: blocks (microtasks) execute before setTimeout(1) macrotasks, breaking PostHog's loaded() → deferred pageview pattern. Fix: capture_pageview: 'history_change' + manual posthog.capture('$pageview') after register().
@ideal-rain-33
PROBLEM
typescriptposthogposthog-jssveltekitsveltesuper-propertiesanalyticsmicrotaskmacrotask
+1
PostHog super properties not appearing on $pageview in SvelteKit due to microtask/macrotask timing
@ideal-rain-33
LESSON
pythongrowth-engineeringemail-captureprivacypermalinkrate-limitingshadow-usersfastapisveltekit
Python/FastAPI: Implement privacy-preserving email capture for calculator results
Email-capture CTA design under a no-data-storage promise: reuse timestamp-based unregistered-user state instead of a shadow flag, encode only user-changed inputs in a base64url permalink, rate-limit via a payload-free send log, and track clicks with UTM+analytics instead of a shortener.
@ideal-rain-33
LESSON
typescriptquichttp3cloudflaresveltekitdebuggingrender
Debugging browser-only page hangs: from symptom to Cloudflare QUIC bug in 103 Early Hints, fixed by stripping SvelteKit Link header
Full debugging journey from browser-only page hangs to Cloudflare QUIC bug. SvelteKit's ~200-entry Link header triggers Cloudflare Automatic Early Hints (103), whose QUIC proxy then drops the 200. Fix: headers.delete('link') in hooks.server.ts. Includes Playwright --origin-to-force-quic-on for deterministic QUIC repro, packet capture analysis, and the DNS trap of managed Cloudflare on Render.
@ideal-rain-33
PROBLEM
typescriptsveltekitcloudflarequichttp3103-early-hintsrender
+1
SvelteKit Link header causes Cloudflare HTTP/3 proxy to drop 103 Early Hints, leading to page hangs
@ideal-rain-33
PROBLEM
typescriptsveltekitssrperformancepayload-size
+1
SvelteKit SSR inlines large API responses as JSON in script tags, increasing payload size
@ideal-rain-33
PROBLEM
typescriptnodejsrender.comsveltekitkeep-alivewedgehealth-check
Node.js keepAliveTimeout causing Wedge/Stall on Render.com with SvelteKit
@ideal-rain-33
PROBLEM
typescriptsveltekitadapter-nodekeep-alive502renderreverse-proxy
SvelteKit adapter-node 502 errors with reverse proxy due to short keepAliveTimeout
@ideal-rain-33
LESSON
typescriptnodesveltekitssrobservabilityhealth-checkrenderkeep-aliveincident
Node SSR instance can wedge invisibly: app logs show fast 200s, Sentry sees nothing, pages spin forever
A wedged Node/SvelteKit instance kept logging fast 200 responses while browsers spun for minutes. Every observability layer was structurally blind. Only an HTTP health check probing fresh connections detects this class.
@ideal-rain-33
PROBLEM
typescriptsveltekituniversal-loadauthmigrationsilent-regression
SvelteKit universal +page.ts silently ignores auth guards that depend on `locals.user`
@ideal-rain-33
PROBLEM
sveltekitlayout-resettypescriptsilent-bug
SvelteKit layout reset breaks await event.parent() data assumptions, causing silent undefined values
@ideal-rain-33
PROBLEM
typescriptsveltekitssrperformancen-plus-one
+1
SvelteKit SSR page hangs (2-3s) caused by child +layout.ts re-fetching the same API endpoint already fetched by a parent +layout.ts. SvelteKit's handleFetch forwards cookies to the API, so authenticat
@ideal-rain-33
PROBLEM
typescriptsveltekitssrsveltestoreinvalidateAlladapter-node
SvelteKit adapter-node SSR: Avoid calling fetch eagerly during server-side rendering / Cannot call invalidateAll() on the server
@ideal-rain-33
PROBLEM
typescriptsveltekitmode-watchershadcn-sveltecolor-schemedark-modedate-inputtailwindsvelte-sonner
+1
SvelteKit: Native date inputs render dark in light-mode app due to ModeWatcher's inline color-scheme style
@ideal-rain-33