Practical guides for building with Svelte. Architecture, patterns, and production reality — written for engineers who want to understand the why https://hackpile.dev Build a client-side image optimizer: drag-and-drop WebP compression, EXIF-aware decoding, quality slider, and pointer-driven comparison. https://hackpile.dev/learn/image-optimization/first-client-optimizer https://hackpile.dev/learn/image-optimization/first-client-optimizer Sat, 25 Apr 2026 00:00:00 GMT Extract GPS and camera data with exifr before compression. Sanitize EXIF, store metadata in your database, not in public files. https://hackpile.dev/learn/image-optimization/metadata-extract-before-squash https://hackpile.dev/learn/image-optimization/metadata-extract-before-squash Sat, 25 Apr 2026 00:00:00 GMT Move @jsquash to a Web Worker: decode once, re-encode on quality changes. Keep your Svelte 5 UI at 60fps with stateful encoding and transferable objects. https://hackpile.dev/learn/image-optimization/web-workers-60fps https://hackpile.dev/learn/image-optimization/web-workers-60fps Sat, 25 Apr 2026 00:00:00 GMT Add a hardware-bounded Worker Pool to batch-process images with per-item gallery and preview drill-down. https://hackpile.dev/learn/image-optimization/worker-pool-batch-processing https://hackpile.dev/learn/image-optimization/worker-pool-batch-processing Sat, 25 Apr 2026 00:00:00 GMT Images are the heaviest resource on web pages. Sizing matters more than compression; oversized images waste more bandwidth than poor encoding. https://hackpile.dev/learn/image-optimization/why-image-optimization https://hackpile.dev/learn/image-optimization/why-image-optimization Fri, 24 Apr 2026 00:00:00 GMT Master lazy loading, priority hints, and LQIP blur-up techniques to optimize perceived performance and eliminate blank image boxes. https://hackpile.dev/learn/image-optimization/advanced-loading-lazy-lqip https://hackpile.dev/learn/image-optimization/advanced-loading-lazy-lqip Wed, 22 Apr 2026 00:00:00 GMT Platform-managed edge transforms: when to migrate from self-hosted Sharp to Cloudflare, Vercel, Netlify, or AWS Lambda@Edge. https://hackpile.dev/learn/image-optimization/edge-cdn-image-transforms https://hackpile.dev/learn/image-optimization/edge-cdn-image-transforms Wed, 22 Apr 2026 00:00:00 GMT Vector vs raster, AVIF vs WebP, lossy vs lossless, and the format decision tree every developer needs before touching a compression tool. https://hackpile.dev/learn/image-optimization/format-foundations https://hackpile.dev/learn/image-optimization/format-foundations Wed, 22 Apr 2026 00:00:00 GMT @jsquash ports Squoosh's professional codecs to your browser via WASM - no server, no ImageMagick, no build step needed. https://hackpile.dev/learn/image-optimization/jsquash-and-wasm https://hackpile.dev/learn/image-optimization/jsquash-and-wasm Wed, 22 Apr 2026 00:00:00 GMT Run a before/after Lighthouse audit. Learn what Core Web Vitals measure and how each lesson moves LCP, CLS, and TBT. https://hackpile.dev/learn/image-optimization/lighthouse-audit-proof https://hackpile.dev/learn/image-optimization/lighthouse-audit-proof Wed, 22 Apr 2026 00:00:00 GMT Wire the encoded variants and LQIP into object storage and a database. Presigned PUTs, per-variant retry, transactional DB writes, and orphan cleanup. https://hackpile.dev/learn/image-optimization/persisting-the-pipeline https://hackpile.dev/learn/image-optimization/persisting-the-pipeline Wed, 22 Apr 2026 00:00:00 GMT Responsive delivery ensures the right size reaches the right device. Master srcset, sizes, the picture element, and aspect-ratio for zero-CLS layouts. https://hackpile.dev/learn/image-optimization/responsive-delivery-srcset https://hackpile.dev/learn/image-optimization/responsive-delivery-srcset Wed, 22 Apr 2026 00:00:00 GMT Write effective alt text, use semantic file naming, implement schema markup, and enforce accessibility in your Svelte 5 upload flow. https://hackpile.dev/learn/image-optimization/seo-alt-text-accessibility https://hackpile.dev/learn/image-optimization/seo-alt-text-accessibility Wed, 22 Apr 2026 00:00:00 GMT Master build-time image optimization with @sveltejs/enhanced-img and server-side Sharp for CMS content in SvelteKit. https://hackpile.dev/learn/image-optimization/sveltekit-enhanced-img https://hackpile.dev/learn/image-optimization/sveltekit-enhanced-img Wed, 22 Apr 2026 00:00:00 GMT Four-layer testing strategy for image pipelines: Vitest, Playwright, visual regression, and Lighthouse CI performance budgets. https://hackpile.dev/learn/image-optimization/testing-the-pipeline https://hackpile.dev/learn/image-optimization/testing-the-pipeline Wed, 22 Apr 2026 00:00:00 GMT Learn about global CSS that reaches beyond component boundaries: :global(), :global{} blocks, keyframes, imports, and when to use each approach. https://hackpile.dev/svelte/styling/global-styles https://hackpile.dev/svelte/styling/global-styles Sun, 05 Apr 2026 00:00:00 GMT Harden your ad system for production: database indexing, Redis-backed frequency capping, rate limiting, HTML sanitisation, SSRF prevention, and GDPR compliance. https://hackpile.dev/integrations/dynamic-ads/07-production-hardening https://hackpile.dev/integrations/dynamic-ads/07-production-hardening Sat, 04 Apr 2026 00:00:00 GMT Master dynamic class binding in Svelte 5: the class attribute, class: directive, component merging, and TypeScript with ClassValue. https://hackpile.dev/svelte/styling/class-directive https://hackpile.dev/svelte/styling/class-directive Sat, 04 Apr 2026 00:00:00 GMT Master Svelte 5's --style-props for passing CSS variables to components — the cleanest way to build themeable, customizable UI without breaking encapsulation. https://hackpile.dev/svelte/styling/custom-properties https://hackpile.dev/svelte/styling/custom-properties Sat, 04 Apr 2026 00:00:00 GMT How Svelte scopes CSS at compile time, the three boundary rules, scoped keyframes, CSS nesting, and specificity differences. https://hackpile.dev/svelte/styling/scoped-styles https://hackpile.dev/svelte/styling/scoped-styles Sat, 04 Apr 2026 00:00:00 GMT Dynamic Inline Styles for clean, reactive inline styles — from basic usage to dynamic theming, conditional values, and the !important modifier. https://hackpile.dev/svelte/styling/style-directive https://hackpile.dev/svelte/styling/style-directive Sat, 04 Apr 2026 00:00:00 GMT Learn the architecture of a dynamic ad campaign system: domain hierarchy, data model, schema design, and project structure for ad serving and tracking. https://hackpile.dev/integrations/dynamic-ads/01-foundations https://hackpile.dev/integrations/dynamic-ads/01-foundations Fri, 03 Apr 2026 00:00:00 GMT Campaign CRUD patterns in SvelteKit: form actions, validation, progressive enhancement, and handling complex nested data structures. https://hackpile.dev/integrations/dynamic-ads/02-campaign-crud https://hackpile.dev/integrations/dynamic-ads/02-campaign-crud Fri, 03 Apr 2026 00:00:00 GMT Build an ad resolution pipeline with targeting filters, budget checks, frequency caps, and weighted selection to pick the best creative fast. https://hackpile.dev/integrations/dynamic-ads/03-dynamic-ad-rendering https://hackpile.dev/integrations/dynamic-ads/03-dynamic-ad-rendering Fri, 03 Apr 2026 00:00:00 GMT Live analytics dashboard architecture: event tracking, SSE streaming, and reactive charts for KPI visualization. https://hackpile.dev/integrations/dynamic-ads/04-real-time-dashboard https://hackpile.dev/integrations/dynamic-ads/04-real-time-dashboard Fri, 03 Apr 2026 00:00:00 GMT A/B testing for ad creatives: traffic splitting, per-variant metrics, statistical significance testing, and automated winner selection. https://hackpile.dev/integrations/dynamic-ads/05-ab-testing https://hackpile.dev/integrations/dynamic-ads/05-ab-testing Fri, 03 Apr 2026 00:00:00 GMT Budget pacing algorithms, daily resets, campaign lifecycle automation, and server-side scheduling patterns for ad systems in SvelteKit. https://hackpile.dev/integrations/dynamic-ads/06-budget-scheduling https://hackpile.dev/integrations/dynamic-ads/06-budget-scheduling Fri, 03 Apr 2026 00:00:00 GMT A practical guide to diagnosing EMFILE on Vercel: cold-start bundle pressure, Redis fan-out, and safer content loading in SvelteKit. https://hackpile.dev/tooling/debugging-emfile-vercel-serverless https://hackpile.dev/tooling/debugging-emfile-vercel-serverless Mon, 30 Mar 2026 00:00:00 GMT Most i18n strategies duplicate or mistranslate. Learn the overlay model: prose-only translation for Markdown blogs at any scale. https://hackpile.dev/integrations/i18n/01-why-i18n-fails-for-technical-blogs https://hackpile.dev/integrations/i18n/01-why-i18n-fails-for-technical-blogs Sat, 21 Mar 2026 00:00:00 GMT Build a multilingual SvelteKit blog foundation: locale config, TypeScript types, locale detection, route matcher, and the (locale)/[lang=locale] route group. https://hackpile.dev/integrations/i18n/02-i18n-foundation-config-types-routes https://hackpile.dev/integrations/i18n/02-i18n-foundation-config-types-routes Sat, 21 Mar 2026 00:00:00 GMT Extend the SvelteKit content index with getContent(locale) - marks articles as isFallback when no translation exists, plus +page.svelte for translated routes. https://hackpile.dev/integrations/i18n/03-locale-aware-content-index https://hackpile.dev/integrations/i18n/03-locale-aware-content-index Sat, 21 Mar 2026 00:00:00 GMT Translate SvelteKit markdown articles on first request using the Claude API: API key setup, prose extraction, and server-side rendering. https://hackpile.dev/integrations/i18n/04-on-demand-translation-claude-api https://hackpile.dev/integrations/i18n/04-on-demand-translation-claude-api Sat, 21 Mar 2026 00:00:00 GMT Cache SvelteKit translations in Upstash Redis: pre-rendered HTML, permanent TTL for complete, 2-hour retry for incomplete, and instant streaming. https://hackpile.dev/integrations/i18n/05-caching-translations-upstash-redis https://hackpile.dev/integrations/i18n/05-caching-translations-upstash-redis Sat, 21 Mar 2026 00:00:00 GMT Preview translations locally, pre-translate pillar articles with a CLI script, run a Batch API catalog translation, and invalidate stale Redis entries. https://hackpile.dev/integrations/i18n/06-dev-tooling-cli-batch-api https://hackpile.dev/integrations/i18n/06-dev-tooling-cli-batch-api Sat, 21 Mar 2026 00:00:00 GMT Build a Pokémon browser with SvelteKit: URL params, parallel fetching, streaming, parent data, TypeScript, and invalidation with PokéAPI. https://hackpile.dev/sveltekit/loading/17-capstone-pokeapi https://hackpile.dev/sveltekit/loading/17-capstone-pokeapi Sat, 07 Mar 2026 00:00:00 GMT How to throw expected and unexpected errors, and redirect users from SvelteKit load functions — including the redirect trap that silently breaks route guards. https://hackpile.dev/sveltekit/loading/10-errors-and-redirects https://hackpile.dev/sveltekit/loading/10-errors-and-redirects Thu, 05 Mar 2026 00:00:00 GMT How SvelteKit generates $types for every route, which type to use in which file, how layout and page data merges at the type level, and how to fix common inference breakdowns. https://hackpile.dev/sveltekit/loading/11-typescript-and-types https://hackpile.dev/sveltekit/loading/11-typescript-and-types Thu, 05 Mar 2026 00:00:00 GMT Learn SvelteKit streaming - return unresolved promises in server load functions, render with {#await}, handle errors safely, and defer noncritical data. https://hackpile.dev/sveltekit/loading/12-streaming-with-promises https://hackpile.dev/sveltekit/loading/12-streaming-with-promises Thu, 05 Mar 2026 00:00:00 GMT Learn how SvelteKit runs load functions in parallel, spots request waterfalls, avoids await parent() traps, and uses Promise.all patterns. https://hackpile.dev/sveltekit/loading/13-parallel-loading-and-waterfalls https://hackpile.dev/sveltekit/loading/13-parallel-loading-and-waterfalls Thu, 05 Mar 2026 00:00:00 GMT Learn when SvelteKit reruns load functions, how dependency tracking works, and how invalidate(), invalidateAll(), depends(), and untrack() keep data fresh. https://hackpile.dev/sveltekit/loading/14-rerunning-load-functions https://hackpile.dev/sveltekit/loading/14-rerunning-load-functions Thu, 05 Mar 2026 00:00:00 GMT SvelteKit prefetching with data-sveltekit-preload-data, preload-code, preloadData and preloadCode — cache mechanics, saveData support, and when to use each. https://hackpile.dev/sveltekit/loading/15-preloading-data-and-code https://hackpile.dev/sveltekit/loading/15-preloading-data-and-code Thu, 05 Mar 2026 00:00:00 GMT SvelteKit auth in load functions: why layout guards fail on client navigation, how hooks and locals work, and building requireLogin() with getRequestEvent(). https://hackpile.dev/sveltekit/loading/16-authentication-in-load-functions https://hackpile.dev/sveltekit/loading/16-authentication-in-load-functions Thu, 05 Mar 2026 00:00:00 GMT Why SvelteKit provides fetch in load functions, the five superpowers over native fetch, and how to avoid double-fetching during hydration. https://hackpile.dev/sveltekit/loading/06-fetch-in-load https://hackpile.dev/sveltekit/loading/06-fetch-in-load Wed, 04 Mar 2026 00:00:00 GMT Read cookies and set headers in SvelteKit server load functions. Learn why Set-Cookie uses cookies.set() and how SSR caching works. https://hackpile.dev/sveltekit/loading/07-cookies-and-headers https://hackpile.dev/sveltekit/loading/07-cookies-and-headers Wed, 04 Mar 2026 00:00:00 GMT How hooks.server.ts intercepts requests, populates event.locals with session data, and composes multiple hooks with sequence and handleError. https://hackpile.dev/sveltekit/loading/08-locals-and-hooks https://hackpile.dev/sveltekit/loading/08-locals-and-hooks Wed, 04 Mar 2026 00:00:00 GMT Master parent() in SvelteKit: avoid waterfalls, fetch first, and merge layout data efficiently. https://hackpile.dev/sveltekit/loading/09-parent-data-in-load https://hackpile.dev/sveltekit/loading/09-parent-data-in-load Wed, 04 Mar 2026 00:00:00 GMT Learn how to use params, url, and route inside SvelteKit load functions to build dynamic, filterable, and paginated pages with full type safety. https://hackpile.dev/sveltekit/loading/05-load-and-url https://hackpile.dev/sveltekit/loading/05-load-and-url Mon, 02 Mar 2026 00:00:00 GMT Learn how SvelteKit load functions work, why they exist, and how to use them to supply data to your pages before they render. https://hackpile.dev/sveltekit/loading/01-introduction https://hackpile.dev/sveltekit/loading/01-introduction Sun, 01 Mar 2026 00:00:00 GMT Learn how SvelteKit separates page and layout data loading, how data flows through layouts, and how to access it from any component. https://hackpile.dev/sveltekit/loading/02-page-vs-layout https://hackpile.dev/sveltekit/loading/02-page-vs-layout Sun, 01 Mar 2026 00:00:00 GMT A guide to the SvelteKit page object: every property it exposes and how it stays reactive during navigation. https://hackpile.dev/sveltekit/loading/03-the-page-object https://hackpile.dev/sveltekit/loading/03-the-page-object Sun, 01 Mar 2026 00:00:00 GMT Learn the difference between +page.ts and +page.server.ts, when each runs, what each can access, and how to choose the right one. https://hackpile.dev/sveltekit/loading/04-universal-vs-server https://hackpile.dev/sveltekit/loading/04-universal-vs-server Sun, 01 Mar 2026 00:00:00 GMT Step-by-step guide to integrating better-auth in SvelteKit: setup, schema, hooks, client, and login/logout UI. No ORM required. https://hackpile.dev/sveltekit/security/better-auth-svelte https://hackpile.dev/sveltekit/security/better-auth-svelte Fri, 20 Feb 2026 00:00:00 GMT Build production-ready email templates in SvelteKit. Master inheritance, workflows, and type-safe patterns for scalable email architecture. https://hackpile.dev/tooling/advanced-email-templates https://hackpile.dev/tooling/advanced-email-templates Sun, 08 Feb 2026 00:00:00 GMT Implementing email functionality in SvelteKit using Nodemailer, with modern patterns, Valibot validation, progressive enhancement, and best practices. https://hackpile.dev/tooling/nodemailer-svelte-guide https://hackpile.dev/tooling/nodemailer-svelte-guide Sat, 07 Feb 2026 00:00:00 GMT Guide to set up Claude Desktop and Claude.ai with MCP servers for Svelte 5, including context-coder, Supabase, and Svelte MCP for VSCode. https://hackpile.dev/tooling/ai-assisted-svelte-development https://hackpile.dev/tooling/ai-assisted-svelte-development Fri, 02 Jan 2026 00:00:00 GMT Master Svelte 5's class attribute for dynamic CSS class management, from basic conditionals to advanced patterns with objects and arrays. https://hackpile.dev/svelte/template-syntax/class-attribute https://hackpile.dev/svelte/template-syntax/class-attribute Sun, 28 Dec 2025 00:00:00 GMT Master Svelte 5's bind: directive for two-way data binding with form inputs, component props, and element references in reactive UIs. https://hackpile.dev/svelte/template-syntax/bind-directive https://hackpile.dev/svelte/template-syntax/bind-directive Sat, 27 Dec 2025 00:00:00 GMT Master Svelte 5's {@debug ...} tag for reactive debugging, tracking state changes, and understanding data flow in complex components with precision. https://hackpile.dev/svelte/template-syntax/debug-tag https://hackpile.dev/svelte/template-syntax/debug-tag Sat, 27 Dec 2025 00:00:00 GMT Master Svelte 5's `@html` tag for safe raw HTML rendering. Learn XSS prevention, DOMPurify, styling, and CMS content handling. https://hackpile.dev/svelte/template-syntax/html-tag https://hackpile.dev/svelte/template-syntax/html-tag Tue, 23 Dec 2025 00:00:00 GMT Master Svelte 5's $host rune for custom elements: dispatch events, access host properties, integrate with forms, and ensure encapsulation. https://hackpile.dev/svelte/runes/host-rune https://hackpile.dev/svelte/runes/host-rune Mon, 22 Dec 2025 00:00:00 GMT Master Svelte 5's $inspect rune for debugging reactive state. Learn deep tracking, custom callbacks with .with(), function tracing with $inspect.trace(), and essential debugging patterns for complex applications. https://hackpile.dev/svelte/runes/inspect-rune https://hackpile.dev/svelte/runes/inspect-rune Mon, 22 Dec 2025 00:00:00 GMT Master Svelte 5's $derived rune for computed values. Learn $derived vs $derived.by, dependency tracking, and memoization patterns. https://hackpile.dev/svelte/runes/derived-rune https://hackpile.dev/svelte/runes/derived-rune Sun, 21 Dec 2025 00:00:00 GMT Master $props rune: pass data, use destructuring with defaults, handle optional props, and build well-typed component interfaces. https://hackpile.dev/svelte/runes/props https://hackpile.dev/svelte/runes/props Sun, 21 Dec 2025 00:00:00 GMT Master Svelte 5's $state rune for reactive state management. Learn deep reactivity, proxy mechanics, and common pitfalls. https://hackpile.dev/svelte/runes/state-rune https://hackpile.dev/svelte/runes/state-rune Sun, 21 Dec 2025 00:00:00 GMT Master Svelte 5's $bindable rune for two-way data binding between parent and child components with predictable state management. https://hackpile.dev/svelte/runes/bindable-rune https://hackpile.dev/svelte/runes/bindable-rune Sat, 20 Dec 2025 00:00:00 GMT Master advanced SvelteKit routing patterns including param matchers, route groups, layout breaking, shallow routing, and navigation lifecycle hooks. https://hackpile.dev/sveltekit/routing/routing-advanced https://hackpile.dev/sveltekit/routing/routing-advanced Fri, 19 Dec 2025 00:00:00 GMT Master expert-level SvelteKit routing: production architecture, View Transitions, performance, debugging, and edge case handling for Svelte 5. https://hackpile.dev/sveltekit/routing/routing-expert https://hackpile.dev/sveltekit/routing/routing-expert Fri, 19 Dec 2025 00:00:00 GMT A deep dive into Svelte 5's {@const ...} directive for scoped constants in templates, enabling cleaner computations and better readability. https://hackpile.dev/svelte/template-syntax/const-tag https://hackpile.dev/svelte/template-syntax/const-tag Tue, 16 Dec 2025 00:00:00 GMT A deep dive into Svelte 5's {#key ...} block for controlling component lifecycle, DOM recreation, and transitions with precision. https://hackpile.dev/svelte/template-syntax/key-block https://hackpile.dev/svelte/template-syntax/key-block Tue, 16 Dec 2025 00:00:00 GMT Master Svelte 5's { @render ... } tag for invoking snippets, handling optional content, dynamic selection patterns, and building sophisticated component APIs. https://hackpile.dev/svelte/template-syntax/render-tag https://hackpile.dev/svelte/template-syntax/render-tag Tue, 16 Dec 2025 00:00:00 GMT Deep dive into Svelte 5's `` for document head management, SEO, SSR, dynamic meta tags, and patterns for complex apps. https://hackpile.dev/svelte/special-elements/svelte-head https://hackpile.dev/svelte/special-elements/svelte-head Mon, 15 Dec 2025 00:00:00 GMT Deep dive into Svelte 5's error boundary special element for robust error handling in component-based applications. https://hackpile.dev/svelte/special-elements/svelte-boundary https://hackpile.dev/svelte/special-elements/svelte-boundary Sun, 14 Dec 2025 00:00:00 GMT Learn how to use Svelte 5's to control runes mode, namespaces, CSS injection, and compile components as reusable custom elements. https://hackpile.dev/svelte/special-elements/svelte-options https://hackpile.dev/svelte/special-elements/svelte-options Fri, 12 Dec 2025 00:00:00 GMT Handle errors gracefully in SvelteKit with +error.svelte. Learn to create custom error pages, throw expected errors, and build cascading error boundaries. https://hackpile.dev/sveltekit/routing/error-svelte https://hackpile.dev/sveltekit/routing/error-svelte Fri, 12 Dec 2025 00:00:00 GMT Learn universal data loading for layouts in SvelteKit with +layout.js. Load shared data that's available to all child pages and layouts. https://hackpile.dev/sveltekit/routing/layout-js https://hackpile.dev/sveltekit/routing/layout-js Fri, 12 Dec 2025 00:00:00 GMT Master server-only layout data loading in SvelteKit with +layout.server.js. Handle authentication and load sensitive data for your app shell. https://hackpile.dev/sveltekit/routing/layout-server-js https://hackpile.dev/sveltekit/routing/layout-server-js Fri, 12 Dec 2025 00:00:00 GMT Learn how +layout.svelte wraps pages with shared UI in SvelteKit. Master layout nesting, the children snippet, and building consistent application structure. https://hackpile.dev/sveltekit/routing/layout-svelte https://hackpile.dev/sveltekit/routing/layout-svelte Fri, 12 Dec 2025 00:00:00 GMT Master navigation in SvelteKit. Learn how anchor tags work, client-side routing, preloading strategies, and programmatic navigation with goto(). https://hackpile.dev/sveltekit/routing/navigation https://hackpile.dev/sveltekit/routing/navigation Fri, 12 Dec 2025 00:00:00 GMT Learn how load functions work in +page.js for universal data loading in SvelteKit. Understand when it runs, how to fetch data, and connect it to your pages. https://hackpile.dev/sveltekit/routing/page-js https://hackpile.dev/sveltekit/routing/page-js Fri, 12 Dec 2025 00:00:00 GMT Learn server-only data loading in SvelteKit with +page.server.js. Access databases, use private API keys, and keep sensitive logic secure. https://hackpile.dev/sveltekit/routing/page-server-js https://hackpile.dev/sveltekit/routing/page-server-js Fri, 12 Dec 2025 00:00:00 GMT Learn how +page.svelte files define what users see at each route and how to create your first pages with Server-Side Rendering in SvelteKit. https://hackpile.dev/sveltekit/routing/page-svelte https://hackpile.dev/sveltekit/routing/page-svelte Fri, 12 Dec 2025 00:00:00 GMT Understand the philosophy behind SvelteKit's filesystem-based routing. Learn why co-location matters and how your folder structure becomes your router. https://hackpile.dev/sveltekit/routing/routes-foundation https://hackpile.dev/sveltekit/routing/routes-foundation Fri, 12 Dec 2025 00:00:00 GMT Build API endpoints in SvelteKit with +server.js. Learn to handle GET, POST, PUT, DELETE requests, return JSON, and create a complete backend API. https://hackpile.dev/sveltekit/routing/server-js https://hackpile.dev/sveltekit/routing/server-js Fri, 12 Dec 2025 00:00:00 GMT Discover SvelteKit's automatic type generation with $types. Learn how TypeScript types flow from load functions to components for end-to-end type safety. https://hackpile.dev/sveltekit/routing/type-safety https://hackpile.dev/sveltekit/routing/type-safety Fri, 12 Dec 2025 00:00:00 GMT Deep dive into Svelte 5's `` for rendering dynamic HTML tags, building polymorphic components, and handling semantic, CMS-driven content. https://hackpile.dev/svelte/special-elements/svelte-element https://hackpile.dev/svelte/special-elements/svelte-element Tue, 09 Dec 2025 00:00:00 GMT Deep dive into Svelte 5's `` special element for document-level events, reactive bindings, and attachments. https://hackpile.dev/svelte/special-elements/svelte-document https://hackpile.dev/svelte/special-elements/svelte-document Mon, 08 Dec 2025 00:00:00 GMT Deep dive into Svelte 5's for window events, reactive bindings, SSR-safe usage, and building responsive, window-aware applications. https://hackpile.dev/svelte/special-elements/svelte-window https://hackpile.dev/svelte/special-elements/svelte-window Mon, 08 Dec 2025 00:00:00 GMT Deep-dive into Svelte 5's `` special element for global event handling, keyboard shortcuts, click-outside patterns, and runes-based reactivity. https://hackpile.dev/svelte/special-elements/svelte-body https://hackpile.dev/svelte/special-elements/svelte-body Sun, 07 Dec 2025 00:00:00 GMT Master the module script pattern in Svelte 5 for sharing code across component instances, managing global state, and creating reusable utilities. https://hackpile.dev/svelte/script-modules-in-svelte-5 https://hackpile.dev/svelte/script-modules-in-svelte-5 Sat, 06 Dec 2025 00:00:00 GMT Master event handling in Svelte 5 with this guide to event attributes, delegation, callbacks, keyboard and touch events, and real interaction patterns. https://hackpile.dev/svelte/event-handling https://hackpile.dev/svelte/event-handling Wed, 03 Dec 2025 00:00:00 GMT Explore the new @attach directive in Svelte 5, its integration with the reactive effect system, and advanced patterns for DOM interaction. https://hackpile.dev/svelte/template-syntax/attach-tag https://hackpile.dev/svelte/template-syntax/attach-tag Mon, 01 Dec 2025 00:00:00 GMT Learn when and why to use Object.create(null) for safe dictionaries in Svelte 5 and SvelteKit applications, with 8 practical examples. https://hackpile.dev/javascript/creating-empty-maps https://hackpile.dev/javascript/creating-empty-maps Sat, 29 Nov 2025 00:00:00 GMT Intro to Svelte 5 reactivity and runes: how reactive programming works, why it matters, and the runes powering modern Svelte apps. https://hackpile.dev/svelte/runes/fine-grained-reactivity https://hackpile.dev/svelte/runes/fine-grained-reactivity Sat, 22 Nov 2025 00:00:00 GMT Learn when Svelte 5 effects run, how to clean up subscriptions, avoid infinite loops, and when to use $effect vs $effect.pre https://hackpile.dev/svelte/runes/effect-rune-lifecycle https://hackpile.dev/svelte/runes/effect-rune-lifecycle Sun, 16 Nov 2025 00:00:00 GMT Master advanced $props patterns in Svelte 5: rest props, $bindable, generics, TypeScript, and robust component architecture. https://hackpile.dev/svelte/runes/advanced-props-patterns https://hackpile.dev/svelte/runes/advanced-props-patterns Fri, 07 Nov 2025 00:00:00 GMT Learn various methods to convert arrays of key-value pairs into JavaScript objects, from beginner to advanced techniques. https://hackpile.dev/javascript/object-from-key-value https://hackpile.dev/javascript/object-from-key-value Sat, 01 Nov 2025 00:00:00 GMT A comprehensive structured learning path for mastering Svelte 5 and SvelteKit, organized from beginner fundamentals to expert-level patterns and architecture. https://hackpile.dev/learn/learning-path-tree https://hackpile.dev/learn/learning-path-tree Mon, 23 Jun 2025 00:00:00 GMT Master Svelte 5's {#each ...} block for rendering lists, understanding keyed iterations, destructuring patterns, and building performant dynamic interfaces. https://hackpile.dev/svelte/template-syntax/each-block https://hackpile.dev/svelte/template-syntax/each-block Mon, 23 Jun 2025 00:00:00 GMT Master Svelte 5's {#if} block for conditional rendering with transitions, reactivity, and real-world patterns. https://hackpile.dev/svelte/template-syntax/if-block https://hackpile.dev/svelte/template-syntax/if-block Mon, 23 Jun 2025 00:00:00 GMT Master Svelte 5's {#await} block for handling promises, loading states, errors, and building resilient async UIs declaratively. https://hackpile.dev/svelte/template-syntax/await-block https://hackpile.dev/svelte/template-syntax/await-block Thu, 12 Jun 2025 00:00:00 GMT A deep dive into app.d.ts — the single file that shapes how TypeScript understands your entire SvelteKit application at the framework level. https://hackpile.dev/sveltekit/reference/global-type-contract https://hackpile.dev/sveltekit/reference/global-type-contract Sun, 01 Jun 2025 00:00:00 GMT Learn when to use $state, context, and module-level state, plus how to build performant reactive stores with $state.raw in Svelte 5. https://hackpile.dev/svelte/reactivity/state-management-boundaries https://hackpile.dev/svelte/reactivity/state-management-boundaries Wed, 12 Feb 2025 00:00:00 GMT Master SSR in Svelte 5 by understanding what runs where, avoiding hydration mismatches, and safely handling browser-only APIs with runes. https://hackpile.dev/svelte/runtime/ssr-gotchas-with-runes https://hackpile.dev/svelte/runtime/ssr-gotchas-with-runes Wed, 12 Feb 2025 00:00:00 GMT When JavaScript should set CSS custom properties at runtime: user color pickers, API-driven themes, computed palettes. https://hackpile.dev/svelte/runtime/context-api/context-theme-dynamic-customization https://hackpile.dev/svelte/runtime/context-api/context-theme-dynamic-customization Sun, 02 Feb 2025 00:00:00 GMT Master professional patterns for Svelte 5 context—from naming conventions to advanced API design, testing, and scalable architecture. https://hackpile.dev/svelte/runtime/context-api/context-best-practices https://hackpile.dev/svelte/runtime/context-api/context-best-practices Tue, 28 Jan 2025 00:00:00 GMT Build a production-grade shopping cart with Svelte 5 context, featuring reactive state, persistence, scoped isolation, and multiple independent contexts. https://hackpile.dev/svelte/runtime/context-api/context-shopping-cart https://hackpile.dev/svelte/runtime/context-api/context-shopping-cart Mon, 27 Jan 2025 00:00:00 GMT Master context API design in Svelte 5 with read-only vs. read-write patterns and action methods for maintainable contracts. https://hackpile.dev/svelte/runtime/context-api/context-api-design https://hackpile.dev/svelte/runtime/context-api/context-api-design Sun, 26 Jan 2025 00:00:00 GMT Build a runnable Svelte 5 auth system with session cookies, role-based permissions, server route guards, and context-powered access control. https://hackpile.dev/svelte/runtime/context-api/context-auth-system https://hackpile.dev/svelte/runtime/context-api/context-auth-system Fri, 24 Jan 2025 00:00:00 GMT Master feature encapsulation with Svelte 5 context. Build self-contained modules with clear APIs and replace global stores with scoped architecture. https://hackpile.dev/svelte/runtime/context-api/context-feature-boundary https://hackpile.dev/svelte/runtime/context-api/context-feature-boundary Fri, 24 Jan 2025 00:00:00 GMT Understand why context is cheap in Svelte, what actually causes re-renders, and when using context becomes a code smell indicating architectural problems. https://hackpile.dev/svelte/runtime/context-api/context-performance https://hackpile.dev/svelte/runtime/context-api/context-performance Fri, 24 Jan 2025 00:00:00 GMT Learn the difference between read-only and read-write context, how to pass actions instead of raw state, and design stable, maintainable context APIs. https://hackpile.dev/svelte/runtime/context-api/updating-shared-state https://hackpile.dev/svelte/runtime/context-api/updating-shared-state Fri, 24 Jan 2025 00:00:00 GMT Build flexible compound component systems in Svelte 5 using context for internal communication. Create tabs, accordions, and other composable UI patterns. https://hackpile.dev/svelte/runtime/context-api/context-compound-components https://hackpile.dev/svelte/runtime/context-api/context-compound-components Sat, 18 Jan 2025 00:00:00 GMT Build a complete multi-step form wizard in Svelte 5 with step navigation, validation, progress tracking, and data persistence across steps. https://hackpile.dev/svelte/runtime/context-api/context-form-wizard https://hackpile.dev/svelte/runtime/context-api/context-form-wizard Sat, 18 Jan 2025 00:00:00 GMT Build a lightweight, flicker-free theme system using module-level reactive state and a useTheme hook. The simplest approach to dark mode that works everywhere. https://hackpile.dev/sveltekit/hooks/theme-switching-use-theme-hook https://hackpile.dev/sveltekit/hooks/theme-switching-use-theme-hook Wed, 15 Jan 2025 00:00:00 GMT Master TypeScript classes with Svelte 5 runes for encapsulated, type-safe context, including private fields and lifecycle management. https://hackpile.dev/svelte/runtime/context-api/class-based-context https://hackpile.dev/svelte/runtime/context-api/class-based-context Sat, 11 Jan 2025 00:00:00 GMT Identify and avoid common pitfalls when using Svelte 5s Context API, with practical debugging tips and strategies for effective context management. https://hackpile.dev/svelte/runtime/context-api/context-pitfalls https://hackpile.dev/svelte/runtime/context-api/context-pitfalls Sat, 11 Jan 2025 00:00:00 GMT Master Svelte 5 state management: when to use context, props, stores, events, or module state. Includes decision frameworks and real scenarios. https://hackpile.dev/svelte/runtime/context-api/context-vs-other-patterns https://hackpile.dev/svelte/runtime/context-api/context-vs-other-patterns Sat, 11 Jan 2025 00:00:00 GMT Why we're building calm systems with Svelte 5, and what CALM actually means for your code. https://hackpile.dev/learn/calm/00-calm-manifesto https://hackpile.dev/learn/calm/00-calm-manifesto Fri, 10 Jan 2025 00:00:00 GMT A honest reference for Svelte 5 Runes covering the six essential runes that power 95% of applications. https://hackpile.dev/learn/calm/00-runes-reference https://hackpile.dev/learn/calm/00-runes-reference Fri, 10 Jan 2025 00:00:00 GMT Why complex UI patterns grow silently over time, and how framework design either enables or prevents this. https://hackpile.dev/learn/calm/01-cost-of-cleverness https://hackpile.dev/learn/calm/01-cost-of-cleverness Fri, 10 Jan 2025 00:00:00 GMT The mental shift from "when does this run?" to "what does this depend on?" that prevents entire categories of bugs. https://hackpile.dev/learn/calm/02-data-flow-not-lifecycle https://hackpile.dev/learn/calm/02-data-flow-not-lifecycle Fri, 10 Jan 2025 00:00:00 GMT Why direct mutation is safe in Svelte 5, and why the real enemy was never mutation itself. https://hackpile.dev/learn/calm/03-mutation-is-fine https://hackpile.dev/learn/calm/03-mutation-is-fine Fri, 10 Jan 2025 00:00:00 GMT How $derived eliminates synchronization bugs by making computed values automatic and always consistent. https://hackpile.dev/learn/calm/04-derived-state-backbone https://hackpile.dev/learn/calm/04-derived-state-backbone Fri, 10 Jan 2025 00:00:00 GMT The most misused rune in Svelte 5, and how to know when you actually need it (rarely). https://hackpile.dev/learn/calm/05-effect-not-componentdidmount https://hackpile.dev/learn/calm/05-effect-not-componentdidmount Fri, 10 Jan 2025 00:00:00 GMT File-based routing isn't just organization—it's architecture. Each route owns its data, and that's a feature. https://hackpile.dev/learn/calm/06-routes-state-boundaries https://hackpile.dev/learn/calm/06-routes-state-boundaries Fri, 10 Jan 2025 00:00:00 GMT Load functions fetch data. The UI derives from it. This separation keeps your code predictable and testable. https://hackpile.dev/learn/calm/07-load-functions-pure https://hackpile.dev/learn/calm/07-load-functions-pure Fri, 10 Jan 2025 00:00:00 GMT SvelteKit forms work without JavaScript. With use:enhance, they become instant. Learn to build forms that never break. https://hackpile.dev/learn/calm/08-forms-progressive-enhancement https://hackpile.dev/learn/calm/08-forms-progressive-enhancement Fri, 10 Jan 2025 00:00:00 GMT SvelteKit's invalidation system lets you control exactly when data refreshes. Learn to use invalidate() and depends() for predictable updates. https://hackpile.dev/learn/calm/09-when-to-refresh-data https://hackpile.dev/learn/calm/09-when-to-refresh-data Fri, 10 Jan 2025 00:00:00 GMT Props down, callbacks up. Plus $bindable for forms and snippets for flexible content. Everything you need for component APIs. https://hackpile.dev/learn/calm/10-component-communication https://hackpile.dev/learn/calm/10-component-communication Fri, 10 Jan 2025 00:00:00 GMT Most apps don't need global state. Learn when route-level state is enough, and when a store actually earns its place. https://hackpile.dev/learn/calm/11-no-global-store https://hackpile.dev/learn/calm/11-no-global-store Fri, 10 Jan 2025 00:00:00 GMT Throw errors where they happen. Catch them where you can handle them. Keep everything in between clean. https://hackpile.dev/learn/calm/12-error-handling-boundary https://hackpile.dev/learn/calm/12-error-handling-boundary Fri, 10 Jan 2025 00:00:00 GMT Five patterns that seem smart but cause pain. Learn to recognize them before they hurt you. https://hackpile.dev/learn/calm/13-what-not-to-do https://hackpile.dev/learn/calm/13-what-not-to-do Fri, 10 Jan 2025 00:00:00 GMT Everything we've learned, applied to a complete application. See how the patterns connect and what calm architecture looks like in practice. https://hackpile.dev/learn/calm/14-building-calm-system https://hackpile.dev/learn/calm/14-building-calm-system Fri, 10 Jan 2025 00:00:00 GMT The reactive console.log you didn't know you needed. Learn to trace state changes and understand why your UI updated. https://hackpile.dev/learn/calm/mini-a-debugging-inspect https://hackpile.dev/learn/calm/mini-a-debugging-inspect Fri, 10 Jan 2025 00:00:00 GMT Type safety with Svelte 5 runes. Learn to type props, state, snippets, and get full editor support. https://hackpile.dev/learn/calm/mini-b-typescript-runes https://hackpile.dev/learn/calm/mini-b-typescript-runes Fri, 10 Jan 2025 00:00:00 GMT Test load functions, components, and user flows. Gain confidence that your app works without testing implementation details. https://hackpile.dev/learn/calm/mini-c-testing-app https://hackpile.dev/learn/calm/mini-c-testing-app Fri, 10 Jan 2025 00:00:00 GMT You've tried everything else. Here's when $effect is actually the right tool, with patterns that work. https://hackpile.dev/learn/calm/mini-d-when-need-effect https://hackpile.dev/learn/calm/mini-d-when-need-effect Fri, 10 Jan 2025 00:00:00 GMT Master the art of consuming context in Svelte 5 using getContext, hasContext, and getAllContexts with robust error handling and type-safe patterns. https://hackpile.dev/svelte/runtime/context-api/consuming-context https://hackpile.dev/svelte/runtime/context-api/consuming-context Fri, 10 Jan 2025 00:00:00 GMT An overview of Svelte 5 Context API series, outlining the topics to be covered and the learning path for mastering context in Svelte applications. https://hackpile.dev/svelte/runtime/context-api/context-api-intro https://hackpile.dev/svelte/runtime/context-api/context-api-intro Fri, 10 Jan 2025 00:00:00 GMT Learn how context flows through component trees and architect scalable context hierarchies in Svelte. https://hackpile.dev/svelte/runtime/context-api/context-scope-and-flow https://hackpile.dev/svelte/runtime/context-api/context-scope-and-flow Fri, 10 Jan 2025 00:00:00 GMT Master theme management in Svelte 5 with light/dark modes, system detection, local overrides, SSR support, and CSS variables. https://hackpile.dev/svelte/runtime/context-api/context-theme-systems https://hackpile.dev/svelte/runtime/context-api/context-theme-systems Fri, 10 Jan 2025 00:00:00 GMT Master reactive context in Svelte 5. Learn why context is not reactive by default and how `$state` objects and getters solve it. https://hackpile.dev/svelte/runtime/context-api/making-context-reactive https://hackpile.dev/svelte/runtime/context-api/making-context-reactive Fri, 10 Jan 2025 00:00:00 GMT Build a fully working multi-tenant SaaS dashboard from scratch, subdomain tenant resolution, layered context, feature flags, and role-based admin panel. https://hackpile.dev/svelte/runtime/context-api/multi-tenant-saas-context https://hackpile.dev/svelte/runtime/context-api/multi-tenant-saas-context Fri, 10 Jan 2025 00:00:00 GMT Learn how to provide context in Svelte 5 using the setContext function, enabling efficient data sharing across component hierarchies without prop drilling. https://hackpile.dev/svelte/runtime/context-api/providing-context https://hackpile.dev/svelte/runtime/context-api/providing-context Fri, 10 Jan 2025 00:00:00 GMT Master reactive context in Svelte 5: clean APIs with getters, computed values with $derived, side effects with $effect, and reusable modules. https://hackpile.dev/svelte/runtime/context-api/reactive-context-patterns https://hackpile.dev/svelte/runtime/context-api/reactive-context-patterns Fri, 10 Jan 2025 00:00:00 GMT An introduction to the Context API in Svelte 5, explaining its purpose, mental models, and when to use it. https://hackpile.dev/svelte/runtime/context-api/what-is-context-api https://hackpile.dev/svelte/runtime/context-api/what-is-context-api Fri, 10 Jan 2025 00:00:00 GMT Discover how Svelte handles conditional rendering and list iteration with its template syntax. https://hackpile.dev/learn/bookit/05-control-flow/01-intro-control-flow https://hackpile.dev/learn/bookit/05-control-flow/01-intro-control-flow Wed, 08 Jan 2025 00:00:00 GMT Learn to show and hide content based on conditions using Svelte's complete conditional syntax. https://hackpile.dev/learn/bookit/05-control-flow/02-conditional-rendering https://hackpile.dev/learn/bookit/05-control-flow/02-conditional-rendering Wed, 08 Jan 2025 00:00:00 GMT Handle empty states gracefully when there are no services or results to display. https://hackpile.dev/learn/bookit/05-control-flow/03-empty-state https://hackpile.dev/learn/bookit/05-control-flow/03-empty-state Wed, 08 Jan 2025 00:00:00 GMT Loop through arrays to render lists of services, bookings, and other data. https://hackpile.dev/learn/bookit/05-control-flow/04-each-block https://hackpile.dev/learn/bookit/05-control-flow/04-each-block Wed, 08 Jan 2025 00:00:00 GMT Understand keyed each blocks and why unique identifiers help Svelte track list items correctly. https://hackpile.dev/learn/bookit/05-control-flow/05-keyed-each https://hackpile.dev/learn/bookit/05-control-flow/05-keyed-each Wed, 08 Jan 2025 00:00:00 GMT Combine conditionals and loops to build an interactive filtered service display. https://hackpile.dev/learn/bookit/05-control-flow/06-filter-services https://hackpile.dev/learn/bookit/05-control-flow/06-filter-services Wed, 08 Jan 2025 00:00:00 GMT Understand what makes Svelte different from other frameworks and why it's a great choice for building BookIt. https://hackpile.dev/learn/bookit/01-getting-started/01-what-is-svelte https://hackpile.dev/learn/bookit/01-getting-started/01-what-is-svelte Fri, 03 Jan 2025 00:00:00 GMT Scaffold a new SvelteKit project using the official CLI and configure it for building BookIt. https://hackpile.dev/learn/bookit/01-getting-started/02-create-bookit-project https://hackpile.dev/learn/bookit/01-getting-started/02-create-bookit-project Fri, 03 Jan 2025 00:00:00 GMT Understand the folders and files in a SvelteKit project and learn where different parts of BookIt will live. https://hackpile.dev/learn/bookit/01-getting-started/03-project-structure https://hackpile.dev/learn/bookit/01-getting-started/03-project-structure Fri, 03 Jan 2025 00:00:00 GMT Learn the anatomy of a Svelte component — the script, markup, and style sections that make up every .svelte file. https://hackpile.dev/learn/bookit/01-getting-started/04-svelte-files https://hackpile.dev/learn/bookit/01-getting-started/04-svelte-files Fri, 03 Jan 2025 00:00:00 GMT Start the SvelteKit development server and learn the workflow that makes building BookIt fast and enjoyable. https://hackpile.dev/learn/bookit/01-getting-started/05-dev-server https://hackpile.dev/learn/bookit/01-getting-started/05-dev-server Fri, 03 Jan 2025 00:00:00 GMT Transform the default SvelteKit homepage into BookIt's welcome page — your first real contribution to the app. https://hackpile.dev/learn/bookit/01-getting-started/06-first-change https://hackpile.dev/learn/bookit/01-getting-started/06-first-change Fri, 03 Jan 2025 00:00:00 GMT See why copying navigation to every page creates maintenance nightmares — and why layouts exist. https://hackpile.dev/learn/bookit/03-layouts/01-repeating-code-problem https://hackpile.dev/learn/bookit/03-layouts/01-repeating-code-problem Fri, 03 Jan 2025 00:00:00 GMT Build a +layout.svelte file that wraps all pages with shared UI. https://hackpile.dev/learn/bookit/03-layouts/02-first-layout https://hackpile.dev/learn/bookit/03-layouts/02-first-layout Fri, 03 Jan 2025 00:00:00 GMT Learn exactly how page content flows into layouts through the children snippet. https://hackpile.dev/learn/bookit/03-layouts/03-render-children https://hackpile.dev/learn/bookit/03-layouts/03-render-children Fri, 03 Jan 2025 00:00:00 GMT Build BookIt's navigation header in the layout so it appears on every page. https://hackpile.dev/learn/bookit/03-layouts/04-site-header https://hackpile.dev/learn/bookit/03-layouts/04-site-header Fri, 03 Jan 2025 00:00:00 GMT Complete the layout with a footer that appears on every page. https://hackpile.dev/learn/bookit/03-layouts/05-site-footer https://hackpile.dev/learn/bookit/03-layouts/05-site-footer Fri, 03 Jan 2025 00:00:00 GMT Create a services-specific layout that adds sub-navigation while keeping the main site layout. https://hackpile.dev/learn/bookit/03-layouts/06-nested-layouts https://hackpile.dev/learn/bookit/03-layouts/06-nested-layouts Fri, 03 Jan 2025 00:00:00 GMT Understand why regular JavaScript variables don't update the UI — and why Svelte's $state rune exists. https://hackpile.dev/learn/bookit/04-reactivity-basics/01-static-vs-reactive https://hackpile.dev/learn/bookit/04-reactivity-basics/01-static-vs-reactive Fri, 03 Jan 2025 00:00:00 GMT Build the foundation of BookIt's booking form as a reusable Svelte component. https://hackpile.dev/learn/bookit/04-reactivity-basics/02-booking-form-component https://hackpile.dev/learn/bookit/04-reactivity-basics/02-booking-form-component Fri, 03 Jan 2025 00:00:00 GMT Add reactive state to the booking form so Svelte tracks every field's value. https://hackpile.dev/learn/bookit/04-reactivity-basics/03-track-form-fields https://hackpile.dev/learn/bookit/04-reactivity-basics/03-track-form-fields Fri, 03 Jan 2025 00:00:00 GMT Show users a real-time preview of their booking details as they fill out the form. https://hackpile.dev/learn/bookit/04-reactivity-basics/04-live-form-preview https://hackpile.dev/learn/bookit/04-reactivity-basics/04-live-form-preview Fri, 03 Jan 2025 00:00:00 GMT Capture form submissions with event handlers and display a confirmation message. https://hackpile.dev/learn/bookit/04-reactivity-basics/05-handle-submit https://hackpile.dev/learn/bookit/04-reactivity-basics/05-handle-submit Fri, 03 Jan 2025 00:00:00 GMT Add a "Book Another" button that clears the form and lets users make additional bookings. https://hackpile.dev/learn/bookit/04-reactivity-basics/06-reset-form https://hackpile.dev/learn/bookit/04-reactivity-basics/06-reset-form Fri, 03 Jan 2025 00:00:00 GMT Learn how Svelte's bind directive creates two-way data binding between inputs and state. https://hackpile.dev/learn/bookit/06-data-binding/01-bind-value https://hackpile.dev/learn/bookit/06-data-binding/01-bind-value Fri, 03 Jan 2025 00:00:00 GMT Build the contact information section of the booking form with validated text inputs. https://hackpile.dev/learn/bookit/06-data-binding/02-name-email-fields https://hackpile.dev/learn/bookit/06-data-binding/02-name-email-fields Fri, 03 Jan 2025 00:00:00 GMT Add date selection to the booking form using native HTML date inputs and Svelte binding. https://hackpile.dev/learn/bookit/06-data-binding/03-date-picker https://hackpile.dev/learn/bookit/06-data-binding/03-date-picker Fri, 03 Jan 2025 00:00:00 GMT Build a time slot selector using select elements and Svelte binding. https://hackpile.dev/learn/bookit/06-data-binding/04-time-dropdown https://hackpile.dev/learn/bookit/06-data-binding/04-time-dropdown Fri, 03 Jan 2025 00:00:00 GMT Let customers choose a service using radio buttons with Svelte's bind:group directive. https://hackpile.dev/learn/bookit/06-data-binding/05-bind-group https://hackpile.dev/learn/bookit/06-data-binding/05-bind-group Fri, 03 Jan 2025 00:00:00 GMT Complete the booking form with a textarea for customer notes and special instructions. https://hackpile.dev/learn/bookit/06-data-binding/06-notes-textarea https://hackpile.dev/learn/bookit/06-data-binding/06-notes-textarea Fri, 03 Jan 2025 00:00:00 GMT Understand why breaking UI into components improves maintainability, reusability, and developer experience. https://hackpile.dev/learn/bookit/07-component-communication/01-why-components https://hackpile.dev/learn/bookit/07-component-communication/01-why-components Fri, 03 Jan 2025 00:00:00 GMT Extract the service display into a reusable ServiceCard component. https://hackpile.dev/learn/bookit/07-component-communication/02-create-servicecard https://hackpile.dev/learn/bookit/07-component-communication/02-create-servicecard Fri, 03 Jan 2025 00:00:00 GMT Learn how to pass data to components using Svelte 5's $props rune. https://hackpile.dev/learn/bookit/07-component-communication/03-props-basics https://hackpile.dev/learn/bookit/07-component-communication/03-props-basics Fri, 03 Jan 2025 00:00:00 GMT Extract the booking form into a reusable component that accepts configuration props. https://hackpile.dev/learn/bookit/07-component-communication/04-create-bookingform https://hackpile.dev/learn/bookit/07-component-communication/04-create-bookingform Fri, 03 Jan 2025 00:00:00 GMT Build a simple PriceBadge component with props and default values. https://hackpile.dev/learn/bookit/07-component-communication/05-pricebadge-component https://hackpile.dev/learn/bookit/07-component-communication/05-pricebadge-component Fri, 03 Jan 2025 00:00:00 GMT Learn to forward props flexibly using the spread operator with $props. https://hackpile.dev/learn/bookit/07-component-communication/06-spread-props https://hackpile.dev/learn/bookit/07-component-communication/06-spread-props Fri, 03 Jan 2025 00:00:00 GMT Understand how Svelte automatically scopes CSS to prevent style conflicts between components. https://hackpile.dev/learn/bookit/08-styling/01-scoped-styles https://hackpile.dev/learn/bookit/08-styling/01-scoped-styles Fri, 03 Jan 2025 00:00:00 GMT Apply professional styling to the ServiceCard component with CSS. https://hackpile.dev/learn/bookit/08-styling/02-style-servicecard https://hackpile.dev/learn/bookit/08-styling/02-style-servicecard Fri, 03 Jan 2025 00:00:00 GMT Apply CSS classes conditionally based on component state. https://hackpile.dev/learn/bookit/08-styling/03-dynamic-classes https://hackpile.dev/learn/bookit/08-styling/03-dynamic-classes Fri, 03 Jan 2025 00:00:00 GMT Create a polished, user-friendly booking form with professional CSS styling. https://hackpile.dev/learn/bookit/08-styling/04-style-booking-form https://hackpile.dev/learn/bookit/08-styling/04-style-booking-form Fri, 03 Jan 2025 00:00:00 GMT Create responsive, interactive hover effects that provide feedback and improve user experience. https://hackpile.dev/learn/bookit/08-styling/05-hover-states https://hackpile.dev/learn/bookit/08-styling/05-hover-states Fri, 03 Jan 2025 00:00:00 GMT Set up app-wide typography, colors, and base styles that apply across all components. https://hackpile.dev/learn/bookit/08-styling/06-global-styles https://hackpile.dev/learn/bookit/08-styling/06-global-styles Fri, 03 Jan 2025 00:00:00 GMT Learn how SvelteKit turns your folder structure into URLs — no router configuration required. https://hackpile.dev/learn/bookit/02-basic-routing/01-file-based-routing https://hackpile.dev/learn/bookit/02-basic-routing/01-file-based-routing Thu, 02 Jan 2025 00:00:00 GMT Add an about page to BookIt so customers can learn about your business. https://hackpile.dev/learn/bookit/02-basic-routing/02-about-page https://hackpile.dev/learn/bookit/02-basic-routing/02-about-page Thu, 02 Jan 2025 00:00:00 GMT Create a contact page for BookIt with a simple contact form preview. https://hackpile.dev/learn/bookit/02-basic-routing/03-contact-page https://hackpile.dev/learn/bookit/02-basic-routing/03-contact-page Thu, 02 Jan 2025 00:00:00 GMT Build BookIt's services page where customers browse available booking options. https://hackpile.dev/learn/bookit/02-basic-routing/04-services-page https://hackpile.dev/learn/bookit/02-basic-routing/04-services-page Thu, 02 Jan 2025 00:00:00 GMT Create a single route that handles multiple URLs using dynamic parameters — the key to service detail pages. https://hackpile.dev/learn/bookit/02-basic-routing/05-dynamic-routes https://hackpile.dev/learn/bookit/02-basic-routing/05-dynamic-routes Thu, 02 Jan 2025 00:00:00 GMT Add navigation between BookIt pages using SvelteKit's optimized link component. https://hackpile.dev/learn/bookit/02-basic-routing/06-navigation https://hackpile.dev/learn/bookit/02-basic-routing/06-navigation Thu, 02 Jan 2025 00:00:00 GMT Learn how to use nonces and hashes with Svelte 5 hydratable function to secure server-rendered applications. https://hackpile.dev/svelte/runtime/hydratable-csp-support https://hackpile.dev/svelte/runtime/hydratable-csp-support Wed, 01 Jan 2025 00:00:00 GMT Learn Svelte 5 and SvelteKit by building a complete service booking application from scratch. Progress from beginner to production-ready expert through hands-on, project-based learning. https://hackpile.dev/learn/bookit-learning-path https://hackpile.dev/learn/bookit-learning-path Tue, 31 Dec 2024 00:00:00 GMT Learn how to seamlessly pass custom class instances between server and client in SvelteKit using the Transport hook. https://hackpile.dev/sveltekit/hooks/transport-guide https://hackpile.dev/sveltekit/hooks/transport-guide Fri, 27 Dec 2024 00:00:00 GMT A complete guide to Svelte 5's {#snippet ...} syntax for defining reusable markup blocks, parameter handling, scoping rules, and migration from slots. https://hackpile.dev/svelte/template-syntax/snippet-block https://hackpile.dev/svelte/template-syntax/snippet-block Wed, 27 Nov 2024 00:00:00 GMT