Home /Knowledge Map

Knowledge Map

Every article on this site, organised by track and topic. Click any row to reveal its articles. Multiple sections can be open at once.

199 articles · 7 tracks · 26 topics · 7 integration areas
Calm Systems with Svelte 5 Course
6 topics · 20 articles
  1. 01 The CALM Manifesto concept 6 min
  2. 02 The Five Runes You Actually Need reference 4 min
  1. 01 The Cost of Cleverness concept 5 min
  2. 02 Data Flow, Not Lifecycle concept 6 min
  3. 03 Mutation Is Fine concept 5 min
  4. 04 Derived State as the Backbone concept 6 min
  5. 05 $effect Is Not componentDidMount concept 7 min
  1. 01 Routes Are State Boundaries concept 6 min
  2. 02 Load Functions Are Pure concept 6 min
  3. 03 Forms and Progressive Enhancement tutorial 7 min
  4. 04 When to Refresh Data reference 6 min
  5. 05 Component Communication reference 7 min
  1. 01 No Global Store Until Proven Guilty concept 6 min
  2. 02 Error Handling at the Boundary concept 6 min
  3. 03 What Not to Do reference 7 min
  1. 01 Building a Calm System project 12 min
  1. 01 Debugging with $inspect reference 3 min
  2. 02 TypeScript with Runes reference 4 min
  3. 03 Testing Your App reference 5 min
  4. 04 When You Need $effect reference 4 min
Svelte 5 Reference Docs
5 topics · 55 articles
  1. 01 Fine-Grained Reactivity concept 20 min
  2. 02 $state reference 35 min
  3. 03 $derived reference 35 min
  4. 04 $effect reference 50 min
  5. 05 $props reference 20 min
  6. 06 $bindable reference 30 min
  7. 07 $inspect reference 25 min
  8. 08 $host reference 30 min
  9. 09 Advanced Props Patterns reference 28 min
  1. 01 {#if ...} reference 30 min
  2. 02 {#each ...} reference 40 min
  3. 03 {#key ...} reference 25 min
  4. 04 {#await ...} reference 42 min
  5. 05 {#snippet ...} reference 20 min
  6. 06 {@render ...} reference 22 min
  7. 07 {@html ...} reference 25 min
  8. 08 {@attach ...} reference 25 min
  9. 09 {@const ...} reference 20 min
  10. 10 {@debug ...} reference 24 min
  11. 11 bind: reference 45 min
  12. 12 class reference 35 min
  1. 01 <svelte:window> reference 30 min
  2. 02 <svelte:document> reference 20 min
  3. 03 <svelte:body> reference 18 min
  4. 04 <svelte:head> reference 22 min
  5. 05 <svelte:element> reference 18 min
  6. 06 <svelte:boundary> reference 25 min
  7. 07 <svelte:options> reference 35 min
  1. 01 Scoped CSS reference 16 min
  2. 02 Global Styles reference 28 min
  3. 03 Dynamic Class Binding reference 24 min
  4. 04 Dynamic Inline Styles reference 22 min
  5. 05 CSS Custom Properties reference 26 min
  1. 01 Context API Introduction concept 15 min
  2. 02 What is the Context API? concept 15 min
  3. 03 Providing Context reference 40 min
  4. 04 Consuming Context reference 40 min
  5. 05 Context Scope and Flow concept 45 min
  6. 06 Making Context Reactive reference 32 min
  7. 07 Reactive Context Patterns reference 35 min
  8. 08 Updating Shared State Through Context reference 16 min
  9. 09 Class-Based Context reference 28 min
  10. 10 Context as a Feature Boundary guide 25 min
  11. 11 Designing Context APIs reference 30 min
  12. 12 Context Practices: The Complete Guide reference 45 min
  13. 13 Context Pitfalls and Debugging reference 45 min
  14. 14 Context Performance and Stability reference 35 min
  15. 15 Context vs Other Patterns guide 40 min
  16. 16 Compound Components with Context reference 45 min
  17. 17 Theme Systems with Context tutorial 28 min
  18. 18 Dynamic Theme Customization at Runtime tutorial 55 min
  19. 19 Shopping Cart with Context tutorial 45 min
  20. 20 Multi-Step Form Wizard with Context tutorial 28 min
  21. 21 Authentication Architecture with Context tutorial 40 min
  22. 22 Multi-Tenant SaaS with Context API project 40 min
SvelteKit Reference Docs
4 topics · 32 articles
  1. 01 Routing concept 12 min
  2. 02 +page.svelte reference 10 min
  3. 03 +page.js reference 12 min
  4. 04 +page.server.js reference 15 min
  5. 05 Navigation reference 10 min
  6. 06 +layout.svelte reference 12 min
  7. 07 +layout.js reference 8 min
  8. 08 +layout.server.js reference 10 min
  9. 09 +error.svelte reference 10 min
  10. 10 +server.js reference 12 min
  11. 11 Type Safety reference 10 min
  12. 12 Advanced Routing reference 45 min
  13. 13 Routing Expert reference 45 min
  1. 01 Introduction to Load Functions concept 18 min
  2. 02 Page Data vs Layout Data reference 20 min
  3. 03 The page Object from $app/state reference 18 min
  4. 04 Universal vs Server Load Functions reference 25 min
  5. 05 Using URL Data in Load Functions reference 20 min
  6. 06 Fetch in Load Functions reference 28 min
  7. 07 Cookies and Headers in Server Load reference 30 min
  8. 08 Locals and the Hooks Lifecycle reference 28 min
  9. 09 Using Parent Data in Load Functions reference 15 min
  10. 10 Errors and Redirects in Load Functions reference 28 min
  11. 11 TypeScript and $types in Load Functions reference 22 min
  12. 12 Streaming Data with Promises in Load Functions reference 32 min
  13. 13 Parallel Loading and Avoiding Waterfalls reference 33 min
  14. 14 Rerunning Load Functions and Dependency Tracking reference 32 min
  15. 15 Prefetching with preloadData and preloadCode reference 20 min
  16. 16 Authentication Patterns in Load Functions reference 35 min
  17. 17 Capstone: Building a Pokémon Browser with PokéAPI project 46 min
  1. 01 Mastering app.d.ts: SvelteKit's Global Type Contract reference 28 min
  1. 01 Real Authentication in SvelteKit with better-auth tutorial 22 min
Image Optimization Course
1 topics · 16 articles
  1. 01 Why Image Optimization Matters More Than You Think concept 10 min
  2. 02 Choosing the Right Image for the Job concept 10 min
  3. 03 Squoosh as a Library reference 14 min
  4. 04 Your First Client-Side Optimizer tutorial 35 min
  5. 05 How to Save the Brain Before You Squash the Body tutorial 22 min
  6. 06 Keeping Your Svelte 5 UI at 60fps During WASM Compression tutorial 22 min
  7. 07 Batch-Processing Dozens of Images in Parallel tutorial 34 min
  8. 08 Stop Sending 4000px Images to a 400px Phone reference 20 min
  9. 09 Lazy Loading, Priority Hints, and the Blur-Up Technique reference 18 min
  10. 10 Presigned Uploads, the Database, and the Lifecycle tutorial 26 min
  11. 11 SvelteKit's enhanced:img & vite-imagetools tutorial 20 min
  12. 12 Making Images Readable guide 14 min
  13. 13 Letting the Platform Own Sharp reference 16 min
  14. 14 Four-Layer Strategy tutorial 18 min
  15. 15 Complete Pipeline Recap project 24 min
  16. 16 What 3,200 Browser Image Encodes Taught Me About WASM, Workers, and Memory tutorial 24 min
Build BookIt Track
8 topics · 48 articles
  1. 00 What is Svelte? 8 min
  2. 00 Create the BookIt Project 10 min
  3. 00 Explore the Project Structure 12 min
  4. 00 Understanding .svelte Files 10 min
  5. 00 Run Your First Dev Server 8 min
  6. 00 Make Your First Change 10 min
  1. 00 How File-Based Routing Works 8 min
  2. 00 Create the About Page 6 min
  3. 00 Add a Contact Page 8 min
  4. 00 Create the Services Page 10 min
  5. 00 Dynamic Routes 12 min
  6. 00 Link All Pages Together 10 min
  1. 00 The Problem: Repeating Code 6 min
  2. 00 SvelteKit Layout 10 min
  3. 00 Understanding {@render children()} 8 min
  4. 00 Add a Site Header 10 min
  5. 00 Add a Site Footer 8 min
  6. 00 Nested Layouts 10 min
  1. 00 Static vs Reactive 10 min
  2. 00 Create a Booking Form Component 10 min
  3. 00 Track Form Fields with $state 10 min
  4. 00 Display Live Form Preview 10 min
  5. 00 Handle the Submit Button 10 min
  6. 00 Reset Form After "Submission" 8 min
  1. 00 Introduction to Control Flow in Svelte 8 min
  2. 00 Conditional Rendering with {#if}, {:else}, and {:else if} 14 min
  3. 00 Handle Empty States 10 min
  4. 00 Render Service List with `{#each}` 12 min
  5. 00 Why Keys Matter 10 min
  6. 00 Filter Services by Category 12 min
  1. 00 Two-Way Binding with bind:value 10 min
  2. 00 Customer Name and Email Fields 10 min
  3. 00 Date Picker Input 10 min
  4. 00 Time Selection Dropdown 10 min
  5. 00 Service Selection with bind:group 12 min
  6. 00 Add Optional Notes Textarea 8 min
  1. 00 Why Components? 8 min
  2. 00 Create ServiceCard Component 10 min
  3. 00 Pass Service Data with $props 12 min
  4. 00 Create BookingForm Component 12 min
  5. 00 Create PriceBadge Component 10 min
  6. 00 Spread Props 10 min
  1. 00 How Scoped Styles Work 10 min
  2. 00 Style the ServiceCard 12 min
  3. 00 Dynamic Classes 10 min
  4. 00 Style the Booking Form 14 min
  5. 00 Add Hover States 10 min
  6. 00 Global Styles 12 min
Ad Campaign Architecture Track
1 topics · 7 articles
  1. 01 Dynamic Ad Campaign Foundations guide 30 min
  2. 02 Campaign CRUD Patterns in SvelteKit guide 35 min
  3. 03 The Ad Resolution Pipeline guide 40 min
  4. 04 Real-Time Ad Analytics with Server-Sent Events guide 38 min
  5. 05 A/B Testing for Ad Creatives guide 35 min
  6. 06 Budget Pacing & Campaign Scheduling guide 32 min
  7. 07 Production Hardening guide 35 min
Multilingual SvelteKit Track
1 topics · 6 articles
  1. 01 Why Standard i18n Approaches Fail for Technical Blogs concept 26 min
  2. 02 The i18n Foundation: Config, Types, and Route Architecture tutorial 28 min
  3. 03 Making the Content Index Locale-Aware tutorial 26 min
  4. 04 On-Demand Article Translation with the Claude API tutorial 34 min
  5. 05 Caching Translations with Upstash Redis tutorial 40 min
  6. 06 Dev Tooling, CLI Scripts, and Batch API Catalog Translation tutorial 36 min
Integration Areas Integrations
7 domains
  1. Production Hardening 35 min
  2. Dynamic Ad Campaign Foundations 30 min
  3. Campaign CRUD Patterns in SvelteKit 35 min
  4. The Ad Resolution Pipeline 40 min
  5. Real-Time Ad Analytics with Server-Sent Events 38 min
  6. A/B Testing for Ad Creatives 35 min
  7. Budget Pacing & Campaign Scheduling 32 min
  1. Why Standard i18n Approaches Fail for Technical Blogs 26 min
  2. The i18n Foundation: Config, Types, and Route Architecture 28 min
  3. Making the Content Index Locale-Aware 26 min
  4. On-Demand Article Translation with the Claude API 34 min
  5. Caching Translations with Upstash Redis 40 min
  6. Dev Tooling, CLI Scripts, and Batch API Catalog Translation 36 min
  1. Advanced Email Templates in SvelteKit with Nodemailer 40 min
  2. Implementing Email with Nodemailer in Svelte 5 45 min
  1. Creating Empty Maps Without Properties in JavaScript 25 min
  2. Creating Objects from Key-Value Pairs in JavaScript 20 min
  1. Capstone: Building a Pokémon Browser with PokéAPI 46 min
  1. Real Authentication in SvelteKit with better-auth 22 min
  1. Claude AI Setup for Svelte 5 25 min
Standalone Articles Standalone
15 articles
  1. Debugging EMFILE on Vercel in a Serverless SvelteKit App 24 min
  2. Advanced Email Templates in SvelteKit with Nodemailer 40 min
  3. Implementing Email with Nodemailer in Svelte 5 45 min
  4. Claude AI Setup for Svelte 5 25 min
  5. Script Modules 20 min
  6. Event Handling 45 min
  7. Creating Empty Maps Without Properties in JavaScript 25 min
  8. Creating Objects from Key-Value Pairs in JavaScript 20 min
  9. Svelte 5 Learning Path 15 min
  10. State Management 52 min
  11. Server-Side Rendering 55 min
  12. Simple Theme Switching with the useTheme Hook Pattern 25 min
Difficulty beginner intermediate advanced expert

The Hackpile © 2026