Table of Contents
IntroductionRich Harris introduces the course by providing some personal background and discusses how and why Svelte was created. Who this course is for and course prerequisites are also covered in this segment. This course is compatible with Svelte versions 3 and 4.
ReactivityRich demonstrates reactivity in Svelte, keeping the DOM in sync with the application state by building an event handler with an increment function. Reactive declarations, grouping statements, and updating arrays and objects are also covered in this segment.
Declaring PropsRich walks through passing data from components to their children by declaring properties. Specifying default values for props and using spread props to send packages of props is also covered in this segment.
LogicRich discusses using logic to render HTML conditionally, including if, else, else-if, each, keyed each, and await blocks. How race conditions are handled, and student questions regarding if "each" is a reserved keyword and what happens if the keys aren't unique.
EventsRich discusses listening to DOM events and demonstrates inline event handlers, event modifiers, component events, event forwarding, and DOM event forwarding. Student questions regarding if forwarding works with callbacks and how to know if an event needs to be forwarded are also covered in this segment.
BindingsRich demonstrates using bindings to keep a variable's value and an input's value in sync. Inputs, including text, numeric, checkbox, select, group, multi-select, and textarea inputs are also covered in this segment.
LifecycleRich discusses functions that run during key moments of a component's lifecycle, including onMount, beforeUpdate, afterUpdate, and tick. Any function that is returned from onMount() will be called when the component has been destroyed. The tick function can be called at any time while the onMount, beforeUpdate, and afterUpdate functions have to be called while the component is initializing.
Lifecycle Q&ARich answers student questions regarding if bindings are synchronous, how await differs from onMount, how onMount impacts performance, ways to organize multiple await blocks, and if there is a way to use Promise.all for multiple await blocks. A more in-depth explanation of tick and what the this keyword is referring to are also covered in this segment.
StoresRich demonstrates handling state that does not belong to a specific component using stores. Writeable stores, auto subscriptions, readable stores, derived stores, custom stores, and binding to stores are covered in this segment.
Stores Q&ARich answers student questions regarding fetching data directly in a readable store, recommended ways to persist store data, and how store differentiates from Redux or React context. Opinions on the size of a store's scope and if Svelte has something similar to useEffect for function clean up are also covered in this segment.
Motion and Transitions Q&ARich answers student questions regarding Sveltes animation limitations, using third-party libraries for animations, and using transitions for hidden DOM elements.
Key Blocks, Deferring, & AnimateRich demonstrates replacing the contents of key blocks on value change, coordinating transitions between multiple elements by deferring transitions, and applying motion to elements that are not transitioning using animate.
ActionsRich discusses interfacing with third-party libraries, lazy-loading images, tooltips, and adding custom event handles with element-level lifecycle functions called actions.
Advanced BindingsRich demonstrates some more advanced uses of binding, including content-editable elements, inside each blocks, media elements, dimensions of block-level elements, this, component bindings, and component instances.
Classes & StylesRich walks through specifying classes, shorthand classes, inline styles, and component styles. Student questions regarding adding multiple classes and binding to multiple elements are also covered in this segment.
SlotsRich discusses using and naming slot elements to define where child components are accepted. Slot fallbacks, slot props, and checking slot content are also covered in this segment.
Context APIRich demonstrates using the context API to communicate between components without passing data or dispatching many events.
Special ElementsRich walks through a variety of Svelte's built-in elements, including self, component, element, window, body, document, head, options, and fragment. Binding to properties of window is also demonstrated in this segment.
Module Context & DebuggingRich demonstrates implementing and exporting context in script blocks, which will run the inside code once the module evaluates. Adding a debugging statement inside the component markup using the debug tag is also covered in this segment.
The Emoji Matching Game
Creating a Svelte ProjectRich demonstrates a finished version of the emactchi game and walks through how to set up a base Svelte project in VS Code.
Game Board GridRich walks through defining the styles for the game board grid, including implementing a responsive board size.
LevelsRich demonstrates defining the interface and parameters for the easy level of the emoji-matching game. The module contains level objects defined using TypeScript.
Passing Data to Game ComponentsRich walks through passing in and implementing the data for the game's easy difficulty level into the game. Rendering and centering a random array of emoji pairs is also covered in this segment.
Selecting SquaresRich implements logic for selecting squares, including resetting the selection if the contained emojis don't match and resetting the incorrect selection timeout to avoid interaction errors.
Dispatching Found EventRich walks through handling correct matches and randomly shuffling the emoji array. Updating the game state, removing the matched emojis from the grid, and displaying the matched emojis outside the grid are also covered in this segment.
Countdown TimerRich demonstrates creating a countdown timer component and displaying the countdown above the grid. Animating the countdown with the time remaining is also covered in this segment.
Replacing Emojis with SVGsRich walks through replacing the emojis with SVGs from Twemoji to maintain stable styling and emoji consistency across browsers and platforms.
Game AnimationsRich walks through adding transform animations to the emoji cards, which will allow the cards to be flipped over to hide and reveal the image. Keeping the matched cards revealed is also covered in this segment.
Send & Receive TransitionsRich demonstrates adding transitions to the matched emojis so they combine when moving into the found array.
Game Play StatesRich walks through implementing the various game states, including win, lose, and pause. Adding a modal welcome screen and defining the medium and hard levels are also covered in this segment.
Switching Game StatesRich demonstrates implementing the logic to switch between the game states and difficulty levels discussed in the previous lesson. Updating the CSS styling to automatically change the grid size based on the difficulty level is also covered in this segment.
Adding NeoconfettiRich walks through adding a burst of confetti for when the user wins the game using the Neoconfetti package.
Wrapping UpRich wraps up the course by briefly discussing Svelte concepts used in building the ematchi game and answering some student questions. Questions regarding repeat infinite animations or transitions, how dispatch and event handlers work, and catching missing declarations for derived values of component props are covered in this segment.