Browse all JavaScript lessons.

showing All 520 lessons...

Redux: Extracting Presentational Components (AddTodo, Footer, FilterLink)

Redux: Extracting Presentational Components (Todo, TodoList)

Redux: React Todo List Example (Filtering Todos)

Redux: React Todo List Example (Toggling a Todo)

Redux: React Todo List Example (Adding a Todo)

Redux: Implementing combineReducers() from Scratch

Redux: Reducer Composition with combineReducers()

Redux: Reducer Composition with Objects

Redux: Reducer Composition with Arrays

Redux: Writing a Todo List Reducer (Toggling a Todo)

Redux: Writing a Todo List Reducer (Adding a Todo)

Redux: Avoiding Object Mutations with Object.assign() and ...spread

Redux: Avoiding Array Mutations with concat(), slice(), and ...spread

Redux: React Counter Example

Redux: Implementing Store from Scratch

Redux: Store Methods: getState(), dispatch(), and subscribe()

Redux: Writing a Counter Reducer with Tests

Redux: The Reducer Function

Redux: Pure and Impure Functions

Redux: Describing State Changes with Actions

Redux: The Single Immutable State Tree

Intro to Recursion - The Solution

P

Intro to Recursion - The Problem

P

Chaining Web Audio Nodes

P

Converting an array-like object into an Array with Array.from()

P

Intro to the Web Audio API

P

Sort an Array Alphabetically or Numerically

P

Learn to Flatten and Flatmap Arrays with Reduce

P

Avoid Common Mistakes when Working with Reduce

P

Use the Optional Reduce Arguments

P

Use Reduce to Filter and Map over Large Datasets

P

JSPM - Loading CSS with JSPM Plugins

P

Reduce an Array into a Single Object

Transform an Array into a Single Value using Reduce

Immutable.Record() as data models

P

Lightning Fast Immutable.js Equality Checks with Hash Codes

P

Transforming Immutable Data with Reduce

P

Maintaining Order in Immutable.js Objects

P

Simple Undo/Redo with Immutable.js Data Structures

P

Converting Immutable.js Structures to Javascript and other Immutable Types

P

Exploring Sequences and Range() in Immutable.js

P

Differences between the Immutable.js Map() and List()

P

Using fromJS() to Convert Plain JavaScript Objects into Immutable Data

P

Equality Checking with .is() and More

P

Working with Subsets of an Immutable.js Map()

P

Iterating Over an Immutable.js Map()

P

Querying an Immutable.js Map()

P

Modifying an Immutable.js Map()

P

Creating an Immutable Object Graph with Immutable.js Map()

P

Manage Application State with Immutable.js

js tutorial about Redux: Extracting Presentational Components (AddTodo, Footer, FilterLink)

Redux: Extracting Presentational Components (AddTodo, Footer, FilterLink)

8:35 js

Learn how to separate the looks from the behavior by extracting presentational components.

js tutorial about Redux: Extracting Presentational Components (Todo, TodoList)

Redux: Extracting Presentational Components (Todo, TodoList)

4:52 js

Learn how to separate the looks from the behavior by extracting presentational components.

js tutorial about Redux: React Todo List Example (Filtering Todos)

Redux: React Todo List Example (Filtering Todos)

8:14 js

Learn how to create a React todo list application using the reducers we wrote before.

js tutorial about Redux: React Todo List Example (Toggling a Todo)

Redux: React Todo List Example (Toggling a Todo)

3:29 js

Learn how to create a React todo list application using the reducers we wrote before.

js tutorial about Redux: React Todo List Example (Adding a Todo)

Redux: React Todo List Example (Adding a Todo)

7:25 js

Learn how to create a React todo list application using the reducers we wrote before.

js tutorial about Redux: Implementing combineReducers() from Scratch

Redux: Implementing combineReducers() from Scratch

4:22 js

Learn how to build a reasonable approximation of the combineReducers() utility in 15 lines. No magic!

js tutorial about Redux: Reducer Composition with combineReducers()

Redux: Reducer Composition with combineReducers()

2:10 js

Learn how to use combineReducers() utility function to generate a reducer from several other reducers instead of writing it by hand.

js tutorial about Redux: Reducer Composition with Objects

Redux: Reducer Composition with Objects

2:42 js

Learn the fundamental pattern of building maintainable Redux applications: reducer composition, and how it can be used to update properties of an object.

js tutorial about Redux: Reducer Composition with Arrays

Redux: Reducer Composition with Arrays

2:21 js

Learn the fundamental pattern of building maintainable Redux applications: the reducer composition, and how it can be used to update items in an array.

js tutorial about Redux: Writing a Todo List Reducer (Toggling a Todo)

Redux: Writing a Todo List Reducer (Toggling a Todo)

2:47 js

Learn how to implement toggling a todo in a todo list application reducer.

js tutorial about Redux: Writing a Todo List Reducer (Adding a Todo)

Redux: Writing a Todo List Reducer (Adding a Todo)

4:11 js

Learn how to implement adding a todo in a todo list application reducer.

js tutorial about Redux: Avoiding Object Mutations with Object.assign() and ...spread

Redux: Avoiding Object Mutations with Object.assign() and ...spread

2:38 js

Learn how to use Object.assign() and the spread operator proposed for ES7 to avoid mutating objects.

js tutorial about Redux: Avoiding Array Mutations with concat(), slice(), and ...spread

Redux: Avoiding Array Mutations with concat(), slice(), and ...spread

3:54 js

Learn how to avoid mutating arrays using concat(), slice(), and the ES6 array spread operator.

js tutorial about Redux: React Counter Example

Redux: React Counter Example

2:18 js

Before you use the React Redux bindings, learn how to create a complete simple application with just React and Redux.

js tutorial about Redux: Implementing Store from Scratch

Redux: Implementing Store from Scratch

2:28 js

Learn how to build a reasonable approximation of the Redux Store in 20 lines. No magic!

js tutorial about Redux: Store Methods: getState(), dispatch(), and subscribe()

Redux: Store Methods: getState(), dispatch(), and subscribe()

3:09 js

We will learn about the Redux Store and demonstrate how its three methods let us implement a counter application.

js tutorial about Redux: Writing a Counter Reducer with Tests

Redux: Writing a Counter Reducer with Tests

2:36 js

You will learn how to write the reducer for the counter application in a test driven development way, as well as the conventions in implementing reducers.

js tutorial about Redux: The Reducer Function

Redux: The Reducer Function

1:54 js

There is something in common between all Redux applications. They have to implement the reducer: a function that calculates the next state tree based on the previous state tree and the action being dispatched.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

js tutorial about Redux: Pure and Impure Functions

Redux: Pure and Impure Functions

1:19 js

Some functions are more predictable than others. You will learn the difference between the pure and impure functions. Understanding this difference is essential for writing Redux applications.

js tutorial about Redux: Describing State Changes with Actions

Redux: Describing State Changes with Actions

2:54 js

You will learn how Redux asks you to describe every change in the application state as a plain JavaScript object called “action”.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

js tutorial about Redux: The Single Immutable State Tree

Redux: The Single Immutable State Tree

2:11 js

How is Redux different from Backbone or Flux? Learn the first principle of Redux—the single immutable state tree.

We are presenting a “complete” example in the code window below. Feel free to click around and explore! We will be explaining what everything does during this course.

js tutorial about Intro to Recursion - The Solution

Intro to Recursion - The Solution

4:39 js PRO

In this lesson we manage to remove all of the nested loops that helped us towards a partial solution in the first lesson. We create a function getTasks, that can, only under certain conditions, call itself. This is the basis of recursion and often leads to cleaner, shorter code that can handle more dynamic input.

js tutorial about Intro to Recursion - The Problem

Intro to Recursion - The Problem

6:15 js PRO

Recursion is a technique well suited to certain types of tasks. In this first lesson we’ll look at solving a problem that requires the flattening of arrays without using recursion. Showing the shortcoming of a non-recursive solution first will help you to understand why it’s so valuable and why sometimes it's the only solution to many problem.

js tutorial about Chaining Web Audio Nodes

Chaining Web Audio Nodes

6:27 js PRO

In this lesson, we learn about a couple of new types of nodes and see how to chain multiple nodes together to create various special effects.

js tutorial about Converting an array-like object into an Array with Array.from()

Converting an array-like object into an Array with Array.from()

2:19 js PRO

Array.from() lets you convert an "iterable" object (AKA an array-like object) to an array. In this lesson, we go over grabbing DOM nodes and turing them into an array so that we can use methods like Array.filter() and Array.forEach() on them.

js tutorial about Intro to the Web Audio API

Intro to the Web Audio API

4:34 js PRO

An introduction to the Web Audio API. In this lesson, we cover creating an audio context and an oscillator node that actually plays a sound in the browser, and different ways to alter that sound.

js tutorial about Sort an Array Alphabetically or Numerically

Sort an Array Alphabetically or Numerically

6:23 js PRO

Sort can automatically arrange items in an array. In this lesson we look at the basics including how to sort an array of strings alphabetically and the correct way to perform a numerical sort on an array of numbers. We finish as always with a practical use-case that shows not only sort in action, but also how it can be chained together with other array methods such as map and join.

js tutorial about Learn to Flatten and Flatmap Arrays with Reduce

Learn to Flatten and Flatmap Arrays with Reduce

8:06 js PRO

Learn a few advanced reduction patterns: flatten allows you to merge a set of arrays into a single array, the dreaded flatmap allows you to convert an array of objects into an array of arrays which then get flattened, and reduceRight allows you to invert the order in which your reducer is applied to your input values.

js tutorial about Avoid Common Mistakes when Working with Reduce

Avoid Common Mistakes when Working with Reduce

4:17 js PRO

In this lesson, we will be looking at two common mistakes programmers make when working with reduce. We will see why we always need to pass in an initial value for our accumulator as well as return the accumulator.

js tutorial about Use the Optional Reduce Arguments

Use the Optional Reduce Arguments

4:47 js PRO

Sometimes we need to turn arrays into new values in ways that can't be done purely by passing an accumulator along with no knowledge about its context. Learn how to reduce an array of numbers into its mathematical mean in a single reduce step by using the optional index and array reducer arguments.

js tutorial about Use Reduce to Filter and Map over Large Datasets

Use Reduce to Filter and Map over Large Datasets

8:32 js PRO

Learn how two common array functions - map() and filter() - are syntactic sugar for reduce operations. Learn how to use them, how to compose them, and how using reduce can give you a big performance boost over composing filters and maps over a large data set.

js tutorial about JSPM - Loading CSS with JSPM Plugins

JSPM - Loading CSS with JSPM Plugins

2:22 js PRO

JSPM is a JavaScript Package Manager, but it can also install and load other file types such as CSS using plugins. This lesson demonstrates how to install twitter's bootstrap library and then load it into your project.

js tutorial about Reduce an Array into a Single Object

Reduce an Array into a Single Object

3:59 js

We'll look at using array.reduce to transform an array of strings into an object that counts the occurrence of each string in the array.

js tutorial about Transform an Array into a Single Value using Reduce

Transform an Array into a Single Value using Reduce

3:56 js

Learn how to use the reduce function on javascript arrays to transform a list of values into something else. In this introduction we'll be taking a list of numbers and reducing them into a sum.

js tutorial about Immutable.Record() as data models

Immutable.Record() as data models

5:33 js PRO

The Immutable.js Record() allows you to model your immutable data much like you would model data with native Javascript classes or objects. It differs from native classes because it cannot be mutated after it's creation and it always has a default value. It's an excellent construct in which to piece together your stores, be them Flux or some other storage implementation. Let's quickly create an Immutable Record().

js tutorial about Lightning Fast Immutable.js Equality Checks with Hash Codes

Lightning Fast Immutable.js Equality Checks with Hash Codes

2:27 js PRO

While Immutable.js offers .is() to confirm value equality between iterables it comes at the cost of referencing each key and value in both objects. For lightning fast equality checks, Immutable.js can produce a hash code based on an iterable's content. If two iterables have the same content, their hash codes will be the same. It's worth noting that this technique is unsuitable for mission critical application development since there is a chance, however slight, that checksums like these might collide. This is outlined here: https://en.wikipedia.org/wiki/Collision_(computer_science)

js tutorial about Transforming Immutable Data with Reduce

Transforming Immutable Data with Reduce

8:25 js PRO

Immutable.js iterables offer the reduce() method, a powerful and often misunderstood functional operator on which map(), filter(), groupBy(), etc. are built. The concept is simple: reduce transforms your iterable into something else, that's all. The name is misleading as you may or may not actually "reduce" anything. Let's replicate the groupBy() and filter() methods with reduce to illustrate how it works.

js tutorial about Maintaining Order in Immutable.js Objects

Maintaining Order in Immutable.js Objects

8:08 js PRO

Immutable.js's Map doesn't promise iteration order after a set() operation. When we need a guarantee for iteration order, we can use OrderedMap. This comes at a slight performance cost, or for you computer science people, it is amortized at an unstable O(log32 N). Let's explore ordering.

js tutorial about Simple Undo/Redo with Immutable.js Data Structures

Simple Undo/Redo with Immutable.js Data Structures

8:35 js PRO

Implementing Undo/Redo can be tricky business. Consider two strategies to simplify implenting undo/redo: 1) use immutable data 2) react to that data with a top-down approach. Let's build a simple drawing app that will draw circles on a canvas and allow us to undo/redo our drawing.

js tutorial about Converting Immutable.js Structures to Javascript and other Immutable Types

Converting Immutable.js Structures to Javascript and other Immutable Types

5:57 js PRO

Immutable.js provides several conversion methods to migrate one structure to another. Each Immutable.js class contains a prefixed "to" method like Map.toList(), Map.toSet(), etc. Converting these types sometimes results in a loss of data, as we will see when converting from Map to List.

js tutorial about Exploring Sequences and Range() in Immutable.js

Exploring Sequences and Range() in Immutable.js

6:59 js PRO

Understanding Immutable.js's Map() and List() structures will likely take you as far as you want to go with immutable programming. They have only small semantic differences between each other and the remaining structures in the Immutable.js family. Sequence, however, has one major difference: it's lazy--which opens a new realm of functional possibilities. Let's write a simple sequence to start.

js tutorial about Differences between the Immutable.js Map() and List()

Differences between the Immutable.js Map() and List()

4:02 js PRO

The Immutable.js Map() is analogous to a Javascript Object or Hash since it is comprised of key-value pairs. The Immutable.js List() is analogous to a Javascript Array and contains many of the same native methods. Let's compare the two and dive into the basics of List().

js tutorial about Using fromJS() to Convert Plain JavaScript Objects into Immutable Data

Using fromJS() to Convert Plain JavaScript Objects into Immutable Data

6:39 js PRO

Immutable.js offers the fromJS() method to build immutable structures from objects and array. Objects are converted into maps. Arrays are converted into lists. The fromJS() method can also take a reviver function for custom conversions.

js tutorial about Equality Checking with .is() and More

Equality Checking with .is() and More

4:02 js PRO

Equality checking deeply nested objects is painful. Fortunately Immutable.js makes this task easy with its .is() and .isSubset() methods. Let's see how we can take two different Immutable Maps() and check for equality.

js tutorial about Working with Subsets of an Immutable.js Map()

Working with Subsets of an Immutable.js Map()

7:43 js PRO

Immutable.js offers methods to break immutable structures into subsets much like Array--for instance it has the all powerful slice()--and unlike Array it offers functional methods like take() and skip(). You get the best of both the imperative and functional worlds.

js tutorial about Iterating Over an Immutable.js Map()

Iterating Over an Immutable.js Map()

6:31 js PRO

Immutable.js provides several methods to iterate over an Immutable.Map(). These also apply to the other immutable structures found within the Immutable.js family, such as Set and List. The primary methods are map and forEach, but we will also cover filter and groupBy.

js tutorial about Querying an Immutable.js Map()

Querying an Immutable.js Map()

4:47 js PRO

Learn how to query an Immutable.Map() using get, getIn, has, includes, find, first and last. These are powerful operators that make finding data in an object graph pain free.

js tutorial about Modifying an Immutable.js Map()

Modifying an Immutable.js Map()

5:22 js PRO

We will now look at five methods that modify an Immutable.Map(). I highly encourage you to visit the Immutable.js documentation where I am now. They are set, delete, clear, update and merge. These are used often, so let's get to know them well.

js tutorial about Creating an Immutable Object Graph with Immutable.js Map()

Creating an Immutable Object Graph with Immutable.js Map()

3:15 js PRO

Learn how to create an Immutable.Map() through plain Javascript object construction and also via array tuples.

js tutorial about Manage Application State with Immutable.js

Manage Application State with Immutable.js

2:36 js

Learn how Immutable.js data structures are different from native iterable Javascript data types and why they provide an excellent foundation on which to build your application's state.

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