MENU

Fun & Interesting

Learn How To Build Modern Web Apps With SvelteKit

Joy of Code 96,510 lượt xem 1 year ago
Video Not Working? Fix It Now

SvelteKit is the Swiss army knife of web frameworks for building resilient apps that run anywhere where JavaScript runs.

👉️ Support

▶️ YouTube Membership
https://youtube.com/@joyofcodedev/join

🔴 Patreon
https://www.patreon.com/joyofcode

👉️ Links:

Learn SvelteKit Playlist:
https://www.youtube.com/playlist?list=PLA9WiRZ-IS_zfHpxmztJQLeBISsQkh9-M

Learn Svelte Playlist:
https://www.youtube.com/playlist?list=PLA9WiRZ-IS_ylnMYxIFCsZN6xVVSvLuHk

Posts:
1. https://joyofcode.xyz/what-is-sveltekit
2. https://joyofcode.xyz/sveltekit-project-structure
3. https://joyofcode.xyz/sveltekit-routing
4. https://joyofcode.xyz/sveltekit-loading-data
5. https://joyofcode.xyz/working-with-forms-in-sveltekit
6. https://joyofcode.xyz/sveltekit-advanced-layouts
7. https://joyofcode.xyz/sveltekit-hooks
8. https://joyofcode.xyz/sveltekit-deployment

👉️ Uses:

🔗 https://joyofcode.xyz/uses

👉️ Socials:

🐦️ https://twitter.com/joyofcodedev
💬 https://discord.gg/k6ZpwAKwwZ

🔖 Timestamps

0:00 Intro

2:15 What Is SvelteKit?
5:00 SvelteKit Blurs The Line Between Frontend And Backend
8:29 Convention Over Configuration
11:17 Best Of Both Worlds: Server-Side Rendering With Client-Side Navigation
16:57 SvelteKit Uses The Web Platform
19:18 SvelteKit Apps Are More Resilient Using Progressive Enhancement
21:02 SvelteKit Runs Where javaScript Runs
22:12 SvelteKit For Component Libraries
22:45 SvelteKit Is Made For Everyone

23:14 SvelteKit Project Setup
24:06 Creating A SvelteKit Project From Scratch
34:12 Using The SvelteKit CLI

45:24 SvelteKit Routing
47:14 Project Setup
48:44 Pages
59:17 Layout
1:03:44 The Power of Nested Routes
1:12:51 Dynamic Routes
1:14:55 Advanced Routing
1:14:58 Multiple Route Parameters
1:16:43 Optional Parameters
1:18:04 Rest Parameters
1:20:18 Matching Parameters

1:23:41 Loading Data
1:23:48 Project Setup
1:24:28 Database Setup
1:38:49 API Endpoints
1:59:28 Showing Page Data Using Client-Side Rendering
2:05:14 Showing Page Data Using Server-Side Rendering
2:13:17 Sometimes You Only Want To Run Code On The Server
2:20:05 Your Layout Files Can Also Load Data
2:29:42 Making Your Data Available Everywhere
2:33:09 Using Data From The URL
2:40:28 Using Parent Layout Data
2:45:09 How Load Functions Work

2:51:19 Working With Forms
2:51:25 Project Setup
2:52:14 Creating A Fake Database
2:55:27 Reintroduction To Forms
2:59:25 Working With Forms Using API Endpoints
3:16:52 Working With Forms The SvelteKit Way Using Form Actions
3:26:31 Progressive Form Enhancement
3:30:44 Customize The Enhance Action To Show A Loading UI
3:37:09 Form Validation In SvelteKit
3:48:27 Advanced Enhance Action Customization

3:53:39 Advanced Layouts
3:53:45 Project Setup
3:54:10 Sometimes You Want Routes With Different Layouts
3:56:18 Using Group Layouts To Group Related Routes
4:03:19 Breaking Out Of Layouts
4:04:28 Layout Reset

4:06:28 SvelteKit Hooks
4:06:34 What Are Hooks?
4:07:44 Creating Routes
4:11:58 Authentication
4:16:39 Transforming HTML
4:19:24 Measuring Page Load Speed
4:21:58 Error Logging
4:23:46 Modifying A Fetch Response
4:25:12 Parsing Form Data
4:28:45 Using Multiple Hooks Together

4:29:53 SvelteKit Deployment
4:30:54 Web Hosting Types
4:36:11 Deploying A SvelteKit Project
4:48:09 Optimizing Your Site

4:59:58 Outro

#joyofcode #svelte #sveltekit

Comment