English | MP4 | AVC 1280×720 | AAC 44KHz 2ch | 225 lectures (31h 59m) | 13.67 GB
Build & Deploy High Performance, Accessible, Server Side Rendered Web Apps that Work Even with JavaScript Disabled.
Svelte is a JavaScript framework that allows you to build state driven components. However what makes Svelte different from other frameworks like Angular, React and Vue; is that Svelte is a compiler. Svelte runs at build time. Which means your Svelte code will be compiled at build time into highly efficient imperative code that runs on the browser to carry out DOM operations. Other famous frameworks usually use a technique called the virtual DOM to decide how to update the DOM. This technique runs in the browser during run time. And that adds more overhead to the DOM calculations.
In this course we are going to learn everything about Svelte from scratch. We will start with the basics by creating simple components. And then gradually progress and create more complex components.
And while Svelte is a great tool to build components for the web, it’s not an easy task to build an entire application with just Svelte. That’s why we have SvelteKit. SvelteKit is a framework for rapid development of robust, performant web applications. SvelteKit provides us out of the box with things like routing, server side rendering, pre-rendering and more. It provides us with a structure that we can follow to build high performance applications that are server side rendered and progressively enhanced.
In this course we are going to learn everything about SvelteKit. We are going to discuss pages and layouts, loading data, hooks, error handling, environment variables, pre-rendering, progressively enhanced form actions and more.
Finally we are going to bring everything together by building a Spotify clone with Svelte, SvelteKit and the Spotify API. Bringing together all the knowledge that we have learned during the course. You can check a demo of the app that we are going to build in the free videos.
What you’ll learn
- Learn everything about Svelte from Scratch.
- Learn everything about SvelteKit.
- Use SvelteKit to create a high performance web application.
- Create applications that work without JavaScript enabled.
Table of Contents
Introduction to Svelte
1 Before Getting Started
2 A Demo of the App that We Are Going to be Building
3 What is Svelte
4 Tools & Extensions
5 Svelte vs. SvelteKit
Getting Started With Svelte
6 Creating a Svelte Vite Template
7 Svelte Components Basic Structure
8 Exploring State With A Simple Counter Component
9 Reactive Statements
10 Reactive Statements Gotchas
11 Component Props
Exploring More Svelte by Creating a Button Component
12 Accessing Component Children With Slots
13 Using SCSS in a Svelte Project Using svelte-preprocess
14 Adding Classes Dynamically Using The Class Directive
15 The Style Directive
16 Using Named Slots
17 Using Slot Props
18 Event Forwarding and Modifiers
19 Forwarding Props With $respProps
Diving Deeper With a Todo List Component
20 {#each} Loops
21 Binding Input Value to a Variable
22 Updating Arrays & Objects in Svelte
23 Binding Component Props
24 Custom Component Events
25 Working With Immutable Data
26 Removing Todos Event
27 Toggling Todos Event
28 Readonly Props
29 Code Debugging in Svelte
30 Component Lifecycle Functions
31 Lifecycle Functions Practical Example
32 Binding Dimensions
33 The tick lifecycle function
34 Cleaning Up Our Component
35 Styling Our Component
36 The {#await} Block
37 onMount Loading and Handling Loading & Error States
38 Adding Todos From the API
39 Removing Todos Using the API
40 Toggling Todos [Exercise Solution]
41 Making the Component More Customizable with Slots
Animations & Transitions
42 Introduction to Transitions
43 Animating Our Todos
44 {#key} Transitions
45 The FLIP Animation
46 Custom CSS Transitions
47 Custom CSS Transitions (Cont.)
48 Custom JavaScript Transitions
49 Displaying Done and Undone Lists Separately
50 The Crossfade Transition
Actions
51 Introduction to Actions
52 The Longpress Action
53 Using Tippy.js in Svelte Without Actions
54 Creating a Tippy.js Action
Stores
55 Creating a Mini Router for Testing
56 Store Application Settings With Writable Stores
57 Auto-subscriptions & Store Binding
58 Using the Settings Store Color Scheme Value
59 Store Callback Function
60 Store Current Location With Readable Stores
61 Custom Stores
62 Derived Stores
63 Tweened Writable Stores
64 Custom Interpolations In Tweened Stores
65 Spring Writable Stores
The Context API
66 Introduction to the Context API
67 Handling a Form Without Context
68 Creating Form & Field Components
69 Using Context to Pass Data Down to Children
70 Combining Context & Stores to Make Our Context Reactive
71 Handling Form Validation
72 Using Slots & Slot Props For More Component Customization
73 Using Konva.js Library Imperatively
74 Creating a Konva Stage Component
75 Creating Layer & Rect Components
76 Handling Destroying Layers & Rects
77 Handling Updating Konva.js Components
78 Handling Konva.js Events
79 Using Read-Only Props to Access Our Rect Object
Module Context
80 What is Module Context
81 Using Module Context to Keep Track of Component Instances
82 Creating a Simple Video Player Component & Binding Media Information
83 Pausing Other Videos When Playing a Video
84 Playing & Pausing All Videos
SvelteKit Pages & Layouts
85 Introduction to SvelteKit
86 Creating a New SvelteKit Project
87 Creating Routes
88 The $lib Folder Alias & Custom Aliases
89 Navigation Functions goto(), beforeNavigate() & afterNavigate()
90 Rest Parameters
91 Optional Parameters
92 Parameter Matchers
93 Layouts Basics
94 Changing Layouts Conditionally
95 Layout Groups
96 Breaking Out of Layouts Hierarchy
SvelteKit Loading Data
97 Shared Load Function (Server & Client)
98 Type-safety with Generated Types
99 Displaying Our Loaded Data
100 Server Only Load Functions
101 Layout Load Functions
102 Product Page Exercise + Errors & Rediercts
103 Passing Data From a Page to its Parent Layout
104 Controlling Routes’ Response and Creating Endpoints
105 Handling Pages & Endpoints in the Same Route and Creating POST Endpoints
106 Load Function Inputs
107 Using Fetch in SvelteKit
108 Creating a Login Page and Endpoint
109 Using Cookies to Login and Logout
110 Re-running All Load Functions
111 Re-running Specific Load Functions
SvelteKit Hooks, Error Handling, Environment Variables & Private Modules
112 The Handle Hook
113 Using the Locals Object
114 The handleFetch Hook
115 Quick Fix
116 Handling Expected Errors
117 Handling Unexpected Errors
118 Using Environment Variables
119 Server Only Modules
SvelteKit Preloading Pages & Link Options
120 Preloading Pages’ Data
121 Preloading Pages’ Code
122 Reload and No Scroll Link Options
123 Preloading Code and Data Programmatically
SvelteKit Page Options & Pre-rendering
124 SSR, CSR and trailingSlash Options
125 Pre-rendering Pages and Endpoints
126 Pre-rendering Pages with Dynamic Content
127 Pre-rendering Pages with Dynamic Parameters
128 Adding Dynamic Data in a Pre-rendered Page
129 $appenvironment Module
SvelteKit Form Actions
130 What are Form Actions
131 Quick Note
132 Logging In Using a Form Action
133 Redirecting in Form Actions
134 Named Form Actions
135 Enhancing Our Form with JavaScript
136 Customizing the Enhance Action
137 [Exercise Solution] Showing Validation Errors Using the Enhance Action
138 Using Forms with GET Method
SvelteKit Deployment
139 Adapters Overview
140 Building & Running Our App with the Node Adapter
141 Deploying to Heroku
142 Deploying to Vercel
143 Deploying to Netlify
Let’s Create a Spotify App with Svelte & SvelteKit
144 Creating a New SvelteKit Project And Installing a CSS Normalizer
145 Setting Up SASS
146 Adding Global Styles
147 Creating a Spotify App & Adding Environment Variables
148 Constructing a Spotify Login Request
149 Creating the Spotify Redirect Callback Endpoint
150 Populating the Root Layout With The Logged in Spotify User
151 Refreshing Expired Access Tokens
152 Logging Out Using An Endpoint
153 Adding Assets & Icons
154 Creating a Button Component
155 Using Typescript to Extend Native HTML Attributes
156 Creating & Styling the Login Page
157 Creating the Desktop Navigation Menu
158 Styling the Desktop Navigation Menu
159 Creating the Top Bar & Animating it On Scroll
160 Creating The Mobile Navigation Menu
161 Improving Menu’s Accessibility
162 Implementing Focus Trap for The Navigation Menu
163 Creating An Icon Button Component
164 Finalizing Our Mobile Navigation Menu
165 Creating & Styling the User Menu Button
166 Creating a Tippy Svelte Action For Out Profile Menu
167 Adding a Tippy Theme & Styling The User Menu
168 Improving Tippy By Adding Tippy Plugins
169 Pages’ Title Tag, Skip Link & Pages’ Loading Indicator
170 Styling the Layout for Disabled JavaScript
171 Fetching Data From the Spotify API
172 Creating an Endpoint for Forwarding Spotify API Calls
173 Fetching the Home Page Data
174 Refreshing the Access Token During Client Side Navigation
175 Creating the Home Page Markup
176 Styling the Home Page
177 Creating a Card Component
178 Creating a Card Component (Cont.)
179 Creating the Album Page & Loading Album Data
180 ItemPage Component Markup
181 Styling The ItemPage Component
182 Getting The Average Colour of an Image
183 Using the Average Colour Endpoint in the Album Page
184 The TrackList Component Markup
185 The TrackList Component Styling
186 Creating an Audio Player Component
187 Using the Player Component in The TrackList Component
188 Handling the TrackList Component When JS is Disabled
189 Customizing Error Pages
190 Adding a Retry Button in Error Page
191 Playlist Page Data
192 Playlist Page Markup & Styling
193 Playlist Tracks Load More Button
194 Playlist Tracks Pagination For Disabled JS
195 Follow & Unfollow Playlist Form Actions
196 Follow & Unfollow Button
197 Enhancing Follow & Unfollow When JS is Enabled
198 Creating a Toasts Store & Component
199 Creating a Toasts Store & Component (Cont.)
200 Playlists Page Markup & Styling
201 Reusable Pagination Component
202 Adding a Create Playlist Page & Form Action
203 Moving the Playlist Form to a Separate Component
204 Edit Playlist Page & Form Action
205 Creating a Modal Component with Micromodal.js
206 Enhancing the Add Playlist Form
207 Enhancing the Edit Playlist Form
208 Fetching & Displaying All Playlists
209 Add Track to Playlist Button & Tippy Menu
210 Add Track to Playlist Form Markup & Styling
211 Add Track to Playlist Form Action
212 Enhancing the Add to Playlist Form
213 Removing Tracks From Playlists Form Action
214 Enhancing Removing Tracks From Playlists Form
215 Handling Add to Playlist Form Styling for Disabled JS
216 Creating The Profile Page
217 Creating The profile Page (Cont.)
218 [Exercise] The Artist Page
219 The Search Home Page
220 The Search Form Component
221 The Search Results Page
222 Listing Items Route Load Function
223 Listing Items Route Load Function (Cont.)
224 Listing Items Page Markup
225 Extra Code
Resolve the captcha to access the links!