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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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