javascript: Navigate the Supabase Admin Interface

Supabase's admin interface is where we can explore data, create new tables, and configure our project. In this lesson, we'll walk through the admin interface and the available options for your Supabase application. We'll explore the following pages and ... more

javascript: Navigate the Supabase Admin Interface

Supabase's admin interface is where we can explore data, create new tables, and configure our project. In this lesson, we'll walk through the admin interface and the available options for your Supabase application. We'll explore the following pages and ... more

javascript: Create a New Supabase Project

In this lesson, we create a new [Supabase account](https://supabase.io/) and initialize our first project. We see how Supabase generates a database and an API for us. ... more

javascript: Create a New Supabase Project

In this lesson, we create a new [Supabase account](https://supabase.io/) and initialize our first project. We see how Supabase generates a database and an API for us. ... more

javascript: Install Multiple Versions of the Same Package in NPM with Package Aliases

There are some really known patterns to migrate packages in large applications. You might find some code referencing to a different package (such as `@my-namespace/my-package/next`) or specific branches (like `@my-namespace/my-package#next`). Anything ... more

react: Adding a Button that Dispatches an Action To Redux to Remove an Item from the ShoppingCart

This lesson creates a new reducer method called `removeFromCart` which accepts a product id as a string. We then add on `onClick` handler to our remove button that dispatches the `removeFromCart` action into our redux store. One thing to consider is that ... more

react: Dispatching Actions to Redux when an Input Field Fires its Blur Event with TypeScript

The Redux Style Guide explicitly recommends that you [avoid putting form state in redux](https://redux.js.org/style-guide/style-guide#avoid-putting-form-state-in-redux). Of course we do want to update our redux store with data that comes from user input ... more

react: Splitting our Redux Store into Multiple Slices using the createSlice Method

The Redux Toolkit has helped codify the notion that instead of splitting up your redux store into various reducer files, action files, and selector files it should be split into slices. Each slice needs to own the shape of its part of the data and is ... more

react: Add Redux and the Redux Toolkit (RTK) to an Existing Application

In this lesson we install [react-redux](https://react-redux.js.org/) and the [Redux Toolkit](https://redux-toolkit.js.org/) via NPM and then setup our own redux store using RTK's [configureStore](https://redux-toolkit.js.org/api/configureStore) method. ... more

react: Setup and Explore our Shopping Cart Application to Learn Redux with TypeScript

This course builds off a react-based shopping cart application containing a list of products (loaded dynamically from a JSON file). It is fully self-sustaining and does not rely on any third party APIs. It uses [vite](https://vitejs.dev/) as the underlying ... more

javascript: Lit in 60 Seconds

Learn Lit fast. This is a quick overview of how to use Lit core features compressed into one minute. Remember to pause the video if you need time to understand something! This lesson uses Lit v2. To learn more about Lit and the rest of the features we ... more

[Course] javascript: Web Frameworks in 60 Seconds

Learn web frameworks fast. Each lesson is a 60-second mini tutorial of a different web framework. If you like concise videos, this course is for you. ... more

react: React in 60 Seconds

Learn React fast. This is a quick overview of how to use React core features compressed into one minute. Remember to pause the video if you need time to understand something! This lesson is for React v16.8 or later. To learn more about React and the rest ... more

[Course] vue: The Beginner's Guide to Vue 3

Vue is a progressive framework for building UIs that allows you to incrementally integrate the technology into any existing project that you're working on. This makes it a great tool for you to learn as you can bring it anywhere. This course is for learners ... more

vue: Bind Reactive Properties to HTML Element Attributes

We'll see how we can bind the value of attributes in our HTML to JavaScript statements using the `v-bind` directive. This allows us to use the data props and JavaScript evaluations to control the appearance and structure of our web applications. We'll ... more

javascript: Set up the Minimum Files Needed to Run Vue 3

We'll discuss the minimum set of files that are required to get up and running with Vue. We'll add an `index.html` file as our entry point, a `main.js` file that will contain our JavaScript code and a `styles.css` that will contain all of our CSS. We ... more

vue: Interpolate JavaScript Expressions in Vue

We'll see how to signal to Vue that a string should be considered as JavaScript to be interpolated. We do this with double curly braces (`{{ }}`). We'll also see that we can access data properties that have been used into Vue during configuration. While ... more

javascript: Respond to Twitch Chat Commands With Scene Elements and ComfyJS

Using the open-source project ComfyJS, display a response to chat commands overlaid on the Twitch scenes. We'll use Eleventy templating to create a partial holding the initial command HTML. Then, using [the cicada principle](https://lea.verou.me/2020/07/the-cicada-principle-revisited-with-css-variables/), ... more

javascript: Embed Twitch Chat in Scenes Using ComfyJS

To embed Twitch chat, we'll use the open-source project [ComfyJS](https://github.com/instafluff/ComfyJS) which is a JavaScript API to interface with the Twitch API. It offers features like responding to incoming chat messages and chat commands and other ... more

[Course] javascript: DOM Events

Listening to and responding to events is a foundational skill for building software for the web. The Document Object Model, or DOM for short, has a powerful built-in event system. And yet, many of us have a pretty basic understanding of the DOM event ... more

[Course] javascript: Your Ultimate Guide to Understanding DOM Events

Listening to and responding to events is a foundational skill for building software for the web. The Document Object Model, or DOM for short, has a powerful built-in event system. And yet, many of us have a pretty basic understanding of the DOM event ... more

[Course] javascript: The Ultimate Guide for Understanding DOM Events

Listening to and responding to events is a foundational skill for building software for the web. The Document Object Model, or DOM for short, has a powerful built-in event system. And yet, many of us have a pretty basic understanding of the DOM event ... more

javascript: Improve Scroll Performance with Passive Event Listeners

This lesson will explore what problem passive event listeners are trying to solve, and how you can mark your event listeners as passive to improve scrolling performance. It also covers how some browsers automatically set `touchstart`, `touchmove`, `wheel` ... more

javascript: DOM Events and the Event Loop

This lesson presses into the deep inner workings of the event loop in order to understand how events fit into the overall javascript execution lifecycle. ... more

javascript: DOM Events and Microtasks

Building on our knowledge of the event loop we will see how the execution timings of microtasks queued in event listeners can be different depending on how an event is dispatched. ... more

javascript: Add and Remove Event Listeners while an Event is Dispatching

What happens when you add an event listener to an event target while an event is in the process of being dispatched? Let's find out together! ... more

javascript: Events are Dispatched Synchronously

Does the dispatching of an event queue a future task, or is the event dispatched straight away? And when are event listeners executed? Eventually or straight away? This lesson will show you how dispatching an event occurs synchronously and all event listeners ... more

javascript: Deprecated Event Creation Mechanisms

There are some deprecated mechanisms for creating events that should be avoided. ... more

javascript: Cancel Bespoke Events

The `error` and `beforeunload` events have their own bespoke approaches to canceling the event because nothing is easy. ... more

javascript: The Event Delegation Pattern

Event delegation is a simple, but powerful leveraging of the DOM event system which allows for easier adding of functionality to dynamically created content; as well as being an interesting performance optimization. ... more