Table of Contents
Introduction
Basics
Svelte Basics
Rich walks through the website that will be used throughout the course and discusses the composition of a Svelte component. Demonstrations of declaring variables, utilizing JavaScript shorthand attributes, and styling with CSS are also covered in this segment.
Reactivity
Rich 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 Props
Rich 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.
Logic
Rich 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.
Events
Rich 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.
Bindings
Rich 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.
Lifecycle
Rich 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&A
Rich 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.
Stores
Rich 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&A
Rich 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.
Advanced APIs
Motion & Transitions
Rich discusses using motion stores, easing functions, the spring function, and transitions to update values gradually for smoother animations. Creating custom CSS transitions, custom JavaScript transitions, transition events, and local transitions are covered in this segment.
Motion and Transitions Q&A
Rich answers student questions regarding Sveltes animation limitations, using third-party libraries for animations, and using transitions for hidden DOM elements.
Key Blocks, Deferring, & Animate
Rich 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.
Actions
Rich discusses interfacing with third-party libraries, lazy-loading images, tooltips, and adding custom event handles with element-level lifecycle functions called actions.
Advanced Bindings
Rich 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 & Styles
Rich 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.
Slots
Rich 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 API
Rich demonstrates using the context API to communicate between components without passing data or dispatching many events.
Special Elements
Rich 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 & Debugging
Rich 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 Project
Rich demonstrates a finished version of the emactchi game and walks through how to set up a base Svelte project in VS Code.
Game Interface & Styles
Rich walks through creating a Game component with a rough mock-up of the game UI and styling the interface. Importing global stylesheets into a JavaScript module is a feature provided by Vite.
Game Board Grid
Rich walks through defining the styles for the game board grid, including implementing a responsive board size.
Levels
Rich 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 Components
Rich 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 Squares
Rich 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 Event
Rich 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 Timer
Rich 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 SVGs
Rich walks through replacing the emojis with SVGs from Twemoji to maintain stable styling and emoji consistency across browsers and platforms.
Game Animations
Rich 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 Transitions
Rich demonstrates adding transitions to the matched emojis so they combine when moving into the found array.
Game Play States
Rich 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 States
Rich 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 Neoconfetti
Rich walks through adding a burst of confetti for when the user wins the game using the Neoconfetti package.
