Browse all JavaScript lessons.

showing All 496 lessons...

Passing Data to WebGL Shaders

P

Introduction to WebGL Shaders

P

Setting Up WebGL

Make Canvas Responsive to Pixel Ratio

Primitive Types in Flow

Use the Webpack Dashboard to Monitor Webpack Operations

ES6 Parameter Object Destructuring with Required Values

Accessible Button Events

Create an Ember Project with the Ember-CLI

Shape Objects in GIF Loop Coder

Colors in GIF Loop Coder

Introduction to drawing with p5js

Outputting Animations from GIF Loop Coder

Custom Drawing in GIF Loop Coder

GIF Loop Coder - Interpolation

GIF Loop Coder Single Mode

GIF Loop Coder - Animation Functions

GIF Loop Coder - Introduction

The Phase Property in GIF Loop Coder

Parenting in GIF Loop Coder

GIF Loop Coder - Animating with Arrays

ES6 Rest Parameters

P

Modify Values in an Array with Map

P

Redux: Refactoring the Reducers

Redux: Using withRouter() to Inject the Params into Connected Components

Redux: Dispatching Actions Asynchronously with Thunks

Redux: Filtering Redux State with React Router Params

Redux: Wrapping dispatch() to Log Actions

Redux: Fetching Data on Route Change

Redux: Dispatching Actions with the Fetched Data

Redux: Supplying the Initial State

Redux: Wrapping dispatch() to Recognize Promises

Redux: Avoiding Race Conditions with Thunks

Redux: Updating Data on the Server

Redux: Updating the State with the Fetched Data

Redux: Normalizing API Responses with normalizr

Redux: Applying Redux Middleware

Redux: Using mapDispatchToProps() Shorthand Notation

Redux: Displaying Error Messages

Redux: Navigating with React Router <Link>

Redux: The Middleware Chain

Redux: Displaying Loading Indicators

Redux: Creating Data on the Server

Redux: Simplifying the Arrow Functions

Redux: Colocating Selectors with Reducers

Redux: Refactoring the Entry Point

Redux: Adding a Fake Backend to the Project

Redux: Persisting the State to the Local Storage

Redux: Normalizing the State Shape

Redux: Adding React Router to the Project

js tutorial about Passing Data to WebGL Shaders

Passing Data to WebGL Shaders

5:22 js PRO

In this lesson we cover how to pass data into a WebGL shader from the main JavaScript program.

js tutorial about Introduction to WebGL Shaders

Introduction to WebGL Shaders

6:20 js PRO

In this lesson we learn about the two types of shaders required in WebGL - vertex shaders and fragment shaders. We create one of each and see how those shader programs affect what is drawn on the screen.

js tutorial about Setting Up WebGL

Setting Up WebGL

4:20 js

In this lesson we cover setting up WebGL for use, including creating a canvas, getting the WebGL rendering context and clearing the canvas to a particular color.

js tutorial about Make Canvas Responsive to Pixel Ratio

Make Canvas Responsive to Pixel Ratio

1:06 js

Canvas is great for high performance graphics rendering but by default the results look blocky on phones tablets and laptops with high pixel density or Retina displays. By using canvas width and height attributes and style props we can use window.devicePixelRatio to create a canvas that is responsive to pixel ratio.

js tutorial about Primitive Types in Flow

Primitive Types in Flow

3:44 js

We'll go over some of the built-in types in Flow and how to add them to our projects by adding type annotations to our variables in JavaScript. We'll also learn about type mismatch errors when we give a variable a value that doesn't match its type annotation and how to fix it.

js tutorial about Use the Webpack Dashboard to Monitor Webpack Operations

Use the Webpack Dashboard to Monitor Webpack Operations

4:59 js

Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output for monitoring the status of your webpack builds. This command line tool replaces the frequently unhelpful large text dump that webpack generates with a pretty user interface that breaks out useful information and presents it in a way that's easy to understand at a glance.

js tutorial about ES6 Parameter Object Destructuring with Required Values

ES6 Parameter Object Destructuring with Required Values

1:40 js

Not only can you provide default values when using ES6 parameter object destructuring, but you can also require the presence of certain properties

js tutorial about Accessible Button Events

Accessible Button Events

6:57 js

Often buttons need to be handled by JavaScript, and if done improperly it can lead to accessibility issues. In this lesson you will improve a major news organization's global header with some basic HTML and JavaScript.

js tutorial about Create an Ember Project with the Ember-CLI

Create an Ember Project with the Ember-CLI

1:41 js

We will learn how to install Ember-CLI and use it to create a new Ember project. We will also learn how to run the Ember project.

js tutorial about Shape Objects in GIF Loop Coder

Shape Objects in GIF Loop Coder

5:53 js

This lesson is a quick tour of the predefined shape objects in GIF Loop Coder.

js tutorial about Colors in GIF Loop Coder

Colors in GIF Loop Coder

6:28 js

In this lesson we cover the different methods for defining and animating colors in GIF Loop Coder.

js tutorial about Introduction to drawing with p5js

Introduction to drawing with p5js

4:10 js

In this lesson we look at using color and the basic drawing methods of p5js, and how they can be combined to create a simple graphic on the canvas.

js tutorial about Outputting Animations from GIF Loop Coder

Outputting Animations from GIF Loop Coder

5:11 js

Let's discuss all the different formats that GIF Loop Coder can output animations as. We'll also look at different ways to optimize output file size.

js tutorial about Custom Drawing in GIF Loop Coder

Custom Drawing in GIF Loop Coder

4:40 js

We'll look at how you can access the raw HTML5 Canvas in GIF Loop Coder and use it to draw whatever you want, in addition to the animated shapes that are a core part of GLC.

js tutorial about GIF Loop Coder - Interpolation

GIF Loop Coder - Interpolation

6:29 js

This video discusses the default interpolation in GIF Loop Coder, and four distinct ways to change that interpolation to add variety to your animations.

js tutorial about GIF Loop Coder Single Mode

GIF Loop Coder Single Mode

4:34 js

We'll take a look at Single Mode animations and strategies for making this type of animation smoothly loop.

js tutorial about GIF Loop Coder - Animation Functions

GIF Loop Coder - Animation Functions

7:20 js

Animating with arrays is super simple with GIF Loop Coder, but using an animation function can give you the power to create much more complex animations.

js tutorial about GIF Loop Coder - Introduction

GIF Loop Coder - Introduction

6:10 js

In this video, I'll introduce you to the program, GIF Loop Coder, which allows you to make looping animated gifs (and other types of animations) using JavaScript and HTML5 Canvas. We'll cover the basic UI and syntax of how to add objects to the animation list, animate them and save the result as an animated gif.

js tutorial about The Phase Property in GIF Loop Coder

The Phase Property in GIF Loop Coder

5:10 js

In this lesson, we look at one of the most powerful features in GIF Loop Coder, the phase property, which allows you to let different objects run animations shifted in time.

js tutorial about Parenting in GIF Loop Coder

Parenting in GIF Loop Coder

4:02 js

In this lesson, we look at how you can build up complex animations by assigning one shape as the parent of another, creating a branching display tree.

js tutorial about GIF Loop Coder - Animating with Arrays

GIF Loop Coder - Animating with Arrays

5:28 js

In this lesson, we discuss animating using arrays, and how different data types are interpolated while animating.

js tutorial about ES6 Rest Parameters

ES6 Rest Parameters

3:47 js PRO

In this lesson we will go over ES6 or ECMAScript 2015 Rest Parameters. We will cover what they are, how they work, how they compare to the arguments keyword, and why they are more versatile.

js tutorial about Modify Values in an Array with Map

Modify Values in an Array with Map

9:26 js PRO

Map is one of the most useful array methods. It creates a new array with the exact same number of items as the source and can be used to modify values, change their type, add fields to objects, simplify objects etc. In this lesson we focus on practical use-cases for map & see it in conjunction with other array methods.

js tutorial about Redux: Refactoring the Reducers

Redux: Refactoring the Reducers

6:23 js

We will learn how to remove the duplication in our reducer files and how to keep the knowledge about the state shape colocated with the newly extracted reducers.

js tutorial about Redux: Using withRouter() to Inject the Params into Connected Components

Redux: Using withRouter() to Inject the Params into Connected Components

2:58 js

We will learn how to use withRouter() to inject params provided by React Router into connected components deep in the tree without passing them down all the way down as props.

js tutorial about Redux: Dispatching Actions Asynchronously with Thunks

Redux: Dispatching Actions Asynchronously with Thunks

4:44 js

We will learn about “thunks”—the most common way to write async action creators in Redux.

js tutorial about Redux: Filtering Redux State with React Router Params

Redux: Filtering Redux State with React Router Params

4:09 js

We will learn how adding React Router shifts the balance of responsibilities, and how the components can use both at the same time.

js tutorial about Redux: Wrapping dispatch() to Log Actions

Redux: Wrapping dispatch() to Log Actions

4:31 js

We will learn how centralized updates in Redux let us log every state change to the console along with the action that caused it.

js tutorial about Redux: Fetching Data on Route Change

Redux: Fetching Data on Route Change

3:46 js

We will learn how to fire up an async request when the route changes.

js tutorial about Redux: Dispatching Actions with the Fetched Data

Redux: Dispatching Actions with the Fetched Data

6:58 js

We will learn how to dispatch a Redux action after the data has been fetched and recap how to do it when the route changes.

js tutorial about Redux: Supplying the Initial State

Redux: Supplying the Initial State

4:13 js

We will learn how to start a Redux app with a previously persisted state, and how it merges with the initial state specified by the reducers.

js tutorial about Redux: Wrapping dispatch() to Recognize Promises

Redux: Wrapping dispatch() to Recognize Promises

6:29 js

We will learn how to teach dispatch() to recognize Promises so that we can move the async logic out of the components into asynchronous action creators.

js tutorial about Redux: Avoiding Race Conditions with Thunks

Redux: Avoiding Race Conditions with Thunks

4:43 js

We will learn how Redux Thunk middleware lets us conditionally dispatch actions to avoid unnecessary network requests and potential race conditions.

js tutorial about Redux: Updating Data on the Server

Redux: Updating Data on the Server

5:24 js

We will learn how to wait until the item is updated on the server, and then update the corresponding local state.

js tutorial about Redux: Updating the State with the Fetched Data

Redux: Updating the State with the Fetched Data

9:33 js

We will learn how moving the source of truth for the data to the server changes the state shape and the reducers in our app.

js tutorial about Redux: Normalizing API Responses with normalizr

Redux: Normalizing API Responses with normalizr

7:58 js

We will learn how to use normalizr to convert all API responses to a normalized format so that we can simplify the reducers.

js tutorial about Redux: Applying Redux Middleware

Redux: Applying Redux Middleware

2:57 js

We will learn how to replace the middleware we wrote and the custom code we used to glue it together with the existing core and third party utilities.

js tutorial about Redux: Using mapDispatchToProps() Shorthand Notation

Redux: Using mapDispatchToProps() Shorthand Notation

1:49 js

We will learn how to avoid the boilerplate code in mapDispatchToProps() for the common case where action creator arguments match the callback prop arguments.

js tutorial about Redux: Displaying Error Messages

Redux: Displaying Error Messages

10:59 js

We will learn how to handle an error inside an async action, display its message in the user interface, and offer user an opportunity to retry the action.

js tutorial about Redux: Navigating with React Router <Link>

Redux: Navigating with React Router <Link>

2:38 js

We will learn how to change the address bar using a component from React Router.

js tutorial about Redux: The Middleware Chain

Redux: The Middleware Chain

8:44 js

We will learn how we can generalize wrapping dispatch() for different purposes into a concept called “middleware” that is widely available in the Redux ecosystem.

js tutorial about Redux: Displaying Loading Indicators

Redux: Displaying Loading Indicators

5:59 js

We will learn how to display the loading indicators while the data is being fetched.

js tutorial about Redux: Creating Data on the Server

Redux: Creating Data on the Server

5:36 js

We will learn how to wait until the item is created on the server, and update the corresponding local state.

js tutorial about Redux: Simplifying the Arrow Functions

Redux: Simplifying the Arrow Functions

2:34 js

We will learn how to reduce the syntactic noise in the action creators and components when using arrow functions.

js tutorial about Redux: Colocating Selectors with Reducers

Redux: Colocating Selectors with Reducers

4:52 js

We will learn how to encapsulate the knowledge about the state shape in the reducer files, so that the components don’t have to rely on it.

js tutorial about Redux: Refactoring the Entry Point

Redux: Refactoring the Entry Point

2:25 js

We will learn how to better separate the code in the entry point to prepare it for adding the router.

js tutorial about Redux: Adding a Fake Backend to the Project

Redux: Adding a Fake Backend to the Project

1:32 js

We will learn about fake backend module that we will be using throughout the next lessons to simulate data fetching.

js tutorial about Redux: Persisting the State to the Local Storage

Redux: Persisting the State to the Local Storage

7:36 js

We will learn how to use store.subscribe() to efficiently persist some of the app’s state to localStorage and restore it after a refresh.

js tutorial about Redux: Normalizing the State Shape

Redux: Normalizing the State Shape

6:46 js

We will learn how to normalize the state shape to ensure data consistency that is important in real-world applications.

js tutorial about Redux: Adding React Router to the Project

Redux: Adding React Router to the Project

1:43 js

We will learn how to add React Router to a Redux project and make it render our root component.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?