Browse all JavaScript lessons.

showing All 496 lessons...

Iterate over a Collection with Polymer's dom-repeate

P

Execute Custom Events in Polymer

P

Create Event Listeners in Polymer Elements

P

Observe Property Changes on a Custom Polymer Element

P

Data Bind Two Polymer Elements

P

Understand Declared Property Basics in Polymer

P

Extend Native HTML Elements with Polymer

P

Use Lifecycle Callbacks On Custom Polymer Elements

P

Style Custom Elements in Polymer

P

Create a Custom Element using Polymer

Filter an Array with Truthy Values

Precompiling Your LESS Files with Gulp

Bundling Your JavaScript Files with Gulp

Web Audio: Playing Back Audio Files

Scrape an HTML Table with split, map, and reduce

P

Intro to Recursion - Refactoring to a Pure Function

What is JavaScript Function Currying?

Redux: Extracting Action Creators

Redux: Generating Containers with connect() from React Redux (FooterLink)

Redux: Generating Containers with connect() from React Redux (AddTodo)

Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

Redux: Passing the Store Down with <Provider> from React Redux

Redux: Passing the Store Down Implicitly via Context

Redux: Passing the Store Down Explicitly via Props

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

Redux: Extracting Container Components (FilterLink)

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

Intro to Recursion - The Problem

Chaining Web Audio Nodes

js tutorial about Iterate over a Collection with Polymer's dom-repeate

Iterate over a Collection with Polymer's dom-repeate

2:49 js PRO

In this lesson we'll use the "dom-repeat" helper method in our custom element to iterate over a collection and use the built in model instantiation to update items in our collection.

js tutorial about Execute Custom Events in Polymer

Execute Custom Events in Polymer

3:08 js PRO

We can utilize the "fire" method from within our custom element to execute a custom event. In this lesson we'll create a custom event and pass useful data along with the event to the consumer of our element.

js tutorial about Create Event Listeners in Polymer Elements

Create Event Listeners in Polymer Elements

1:32 js PRO

In this lesson we'll look at creating event listeners in our custom element using the listeners object as well as annotated event listeners.

js tutorial about Observe Property Changes on a Custom Polymer Element

Observe Property Changes on a Custom Polymer Element

1:57 js PRO

Custom element property changes can be observed by specifying an observer method which will be executed whenever a change occurs and receive both the new value and old value.

js tutorial about Data Bind Two Polymer Elements

Data Bind Two Polymer Elements

5:12 js PRO

Polymer provides us a variety of data-binding configurations. In this lesson we'll look at configuring Two-way, One-way-down and One-way-up data binding.

js tutorial about Understand Declared Property Basics in Polymer

Understand Declared Property Basics in Polymer

4:31 js PRO

We can declare properties on our custom element which serve as a public api configurable by any user from markup.

js tutorial about Extend Native HTML Elements with Polymer

Extend Native HTML Elements with Polymer

3:11 js PRO

Polymer allows us to extend a native HTML elements UI or functionality. In this lesson we'll use a button as our custom element basis and add new UI and functionality to it that can be added to any button in our application.

js tutorial about Use Lifecycle Callbacks On Custom Polymer Elements

Use Lifecycle Callbacks On Custom Polymer Elements

5:49 js PRO

In this lesson we'll look at the lifecycle callbacks (Created, Ready, Attached, Detached, and attributeChanged) available to us in Polymer and how to use each one.

js tutorial about Style Custom Elements in Polymer

Style Custom Elements in Polymer

5:55 js PRO

In this lesson we'll look at how to isolate the style of our custom element, use the ":host" selector, and create css variables in order to theme our element.

js tutorial about Create a Custom Element using Polymer

Create a Custom Element using Polymer

4:20 js

In this lesson we'll install Polymer using bower and explore creating our first custom element. We will use the dom-module to create our first Element and add an event listener to watch for the keyup event.

js tutorial about Filter an Array with Truthy Values

Filter an Array with Truthy Values

6:44 js

Array filter creates a new array with all elements that pass the test implemented by the provided function. In this lesson we discuss how only a truthy or falsey value is required as the return value to the function, which in turns allows us to be creative in how we perform the filter. We end the lesson by looking at an example showing how chaining multiple array methods together can lead to very nice, declarative code.

js tutorial about Precompiling Your LESS Files with Gulp

Precompiling Your LESS Files with Gulp

2:40 js

We will look at precompiling your LESS files using Gulp, Gulp-Concat, and Gulp-Less

js tutorial about Bundling Your JavaScript Files with Gulp

Bundling Your JavaScript Files with Gulp

3:31 js

We will look at bundling your JavaScript files using Gulp, Gulp-Concat, and Gulp-Uglify

js tutorial about Web Audio: Playing Back Audio Files

Web Audio: Playing Back Audio Files

4:59 js

In this lesson we cover how to load external audio files, such as mp3s, and play them back with the web audio api, including altering playback speed, and look at some of the parameters to the start method.

js tutorial about Scrape an HTML Table with split, map, and reduce

Scrape an HTML Table with split, map, and reduce

8:31 js PRO

This lesson teaches about the common need of grabbing information from an HTML table and converting it into plain JavaScript objects that you can use for your own needs.

js tutorial about Intro to Recursion - Refactoring to a Pure Function

Intro to Recursion - Refactoring to a Pure Function

3:37 js

Our previous solution used forEach and a globally available array that could be mutated from inside our function. We can improve upon this and create a function that is easier to maintain & test by swapping our forEach loop for reduce. By removing the global array and instead making getTasks return a value directly we end up with a pure function.

js tutorial about What is JavaScript Function Currying?

What is JavaScript Function Currying?

5:34 js

Currying is a core concept of functional programming and a useful tool for any developer's toolbelt. In this lesson, John walks through the definition of currying and its practical usage.

js tutorial about Redux: Extracting Action Creators

Redux: Extracting Action Creators

3:52 js

Learn how to keep code maintainable and self-documenting by extracting action creators from the components.

js tutorial about Redux: Generating Containers with connect() from React Redux (FooterLink)

Redux: Generating Containers with connect() from React Redux (FooterLink)

3:27 js

Learn how to use container’s own props inside the mapStateToProps() and mapDispatchToProps() functions.

js tutorial about Redux: Generating Containers with connect() from React Redux (AddTodo)

Redux: Generating Containers with connect() from React Redux (AddTodo)

4:41 js

Learn how to inject dispatch() as a prop into a React component by using connect() from React Redux library.

js tutorial about Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

5:13 js

Learn how to write mapStateToProps() and mapDispatchToProps() functions and use connect() from React Redux library to generate container components.

js tutorial about Redux: Passing the Store Down with <Provider> from React Redux

Redux: Passing the Store Down with <Provider> from React Redux

1:30 js

Learn how to use the Provider that comes with React Redux instead of the hand-rolled implementation from the previous lesson.

js tutorial about Redux: Passing the Store Down Implicitly via Context

Redux: Passing the Store Down Implicitly via Context

7:56 js

Learn how to make the store object available to all components by using the advanced React feature called “context”.

js tutorial about Redux: Passing the Store Down Explicitly via Props

Redux: Passing the Store Down Explicitly via Props

3:54 js

Learn how to pass store down as a prop to container components instead of declaring a top-level variable to prepare for easier testing and server rendered applications.

js tutorial about Redux: Extracting Container Components (VisibleTodoList, AddTodo)

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

6:19 js

Learn how to avoid the boilerplate of passing the props down the intermediate components by introducing more container components.

js tutorial about Redux: Extracting Container Components (FilterLink)

Redux: Extracting Container Components (FilterLink)

8:04 js

Learn how to avoid the boilerplate of passing the props down the intermediate components by introducing more container components.

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

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

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

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.

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