HACKPILE
Build real Svelte apps.
Master the architecture behind them.
Svelte and SvelteKit are deceptively simple on the surface and surprisingly deep underneath. Hackpile covers both sides. Every guide here is written to be understood on first read and referenced on the tenth — clear enough for day one, thorough enough for production.
Svelte 5 Reference
A complex set of articles that extend the Svelte documentation with more in-depth explanations of each topic, practical real-world examples, and clear guidance on applying concepts in production-ready applications.
- Runes
- Template Syntax
- Special Elements
- Styling
- +1 more
SvelteKit Reference
A comprehensive reference for SvelteKit’s core concepts, patterns, and APIs. Each article dives deep into a specific topic with practical examples and best practices.
- Routing
- Loading Data
- TypeScript Integration
- Security
- Your First Client-Side Optimizerimage-optimization
- Why Image Optimization Matters More Than You Thinkimage-optimization
- Choosing the Right Image for the Jobimage-optimization
- Complete Pipeline Recapimage-optimization
- Dynamic Ad Campaign Foundationsdynamic-ads
- Debugging EMFILE on Vercel in a Serverless SvelteKit App
Why Image Optimization Matters More Than You Think
Images are the heaviest resource on web pages. Sizing matters more than compression; oversized images waste more bandwidth than poor encoding.
Choosing the Right Image for the Job
Vector vs raster, AVIF vs WebP, lossy vs lossless, and the format decision tree every developer needs before touching a compression tool.
Complete Pipeline Recap
Run a before/after Lighthouse audit. Learn what Core Web Vitals measure and how each lesson moves LCP, CLS, and TBT.
Scoped CSS
How Svelte scopes CSS at compile time, the three boundary rules, scoped keyframes, CSS nesting, and specificity differences.
Dynamic Ad Campaign Foundations
Learn the architecture of a dynamic ad campaign system: domain hierarchy, data model, schema design, and project structure for ad serving and tracking.
Why Standard i18n Approaches Fail for Technical Blogs
Most i18n strategies duplicate or mistranslate. Learn the overlay model: prose-only translation for Markdown blogs at any scale.
Introduction to Load Functions
Learn how SvelteKit load functions work, why they exist, and how to use them to supply data to your pages before they render.
Real Authentication in SvelteKit with better-auth
Step-by-step guide to integrating better-auth in SvelteKit: setup, schema, hooks, client, and login/logout UI. No ORM required.
Routing
Understand the philosophy behind SvelteKit's filesystem-based routing. Learn why co-location matters and how your folder structure becomes your router.
Fine-Grained Reactivity
Intro to Svelte 5 reactivity and runes: how reactive programming works, why it matters, and the runes powering modern Svelte apps.
{#if ...}
Master Svelte 5's {#if} block for conditional rendering with transitions, reactivity, and real-world patterns.
Context API Introduction
An overview of Svelte 5 Context API series, outlining the topics to be covered and the learning path for mastering context in Svelte applications.
Calm Systems with Svelte 5
A curated series of articles focused on building CALM systems with Svelte 5. The series develops clear mental models and demonstrates practical, production-grade patterns for structuring applications that remain understandable, adaptable, and maintainable as they evolve over time.
- Foundation
- Mental Models
- Building
- Maintenance
- +2 more
Image Optimization
A complete guide to building high-performance Svelte 5 applications, from image pipelines to Core Web Vitals.
- Image Optimization