30 articles tagged #components on hackpile.dev.
- Your First Client-Side Optimizer
Build a client-side image optimizer: drag-and-drop WebP compression, EXIF-aware decoding, quality slider, and pointer-driven comparison.
- Lazy Loading, Priority Hints, and the Blur-Up Technique
Master lazy loading, priority hints, and LQIP blur-up techniques to optimize perceived performance and eliminate blank image boxes.
- $host
Master Svelte 5's $host rune for custom elements: dispatch events, access host properties, integrate with forms, and ensure encapsulation.
- $props
Master $props rune: pass data, use destructuring with defaults, handle optional props, and build well-typed component interfaces.
- $bindable
Master Svelte 5's $bindable rune for two-way data binding between parent and child components with predictable state management.
- {@render ...}
Master Svelte 5's { @render ... } tag for invoking snippets, handling optional content, dynamic selection patterns, and building sophisticated component APIs.
- <svelte:head>
Deep dive into Svelte 5's `<svelte:head>` for document head management, SEO, SSR, dynamic meta tags, and patterns for complex apps.
- <svelte:options>
Learn how to use Svelte 5's <svelte:options> to control runes mode, namespaces, CSS injection, and compile components as reusable custom elements.
- +page.svelte
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.
- <svelte:element>
Deep dive into Svelte 5's `<svelte:element>` for rendering dynamic HTML tags, building polymorphic components, and handling semantic, CMS-driven content.