Browse all JavaScript lessons.

showing All 556 lessons...

Find Plain Text Patterns using Regular Expressions

P

Get Started with Regular Expressions in JavaScript

How to use JavaScript's String.replace

P

Safely inspect nested objects with Reduce

P

Compose Functions with Reduce

P

Use Some as a Ternary Operator or Conditional

P

The JSON.parse API

P

Intro to Recursion - Detecting an Infinite Loop

P

Web Audio API: The Delay Node

P

4 common ways to get a substring from a string in JavaScript

P

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

P

Precompiling Your LESS Files with Gulp

P

Bundling Your JavaScript Files with Gulp

P

Web Audio: Playing Back Audio Files

P

Scrape an HTML Table with split, map, and reduce

P

Intro to Recursion - Refactoring to a Pure Function

P

What is JavaScript Function Currying?

P

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

javascript tutorial about Find Plain Text Patterns using Regular Expressions

Find Plain Text Patterns using Regular Expressions

2:29 javascript PRO

The simplest use of Regular Expressions is to find a plain text pattern. In this lesson we'll look at at finding plain text patterns as well as using the metacharacter "." and how to escape a metacharacter.

javascript tutorial about Get Started with Regular Expressions in JavaScript

Get Started with Regular Expressions in JavaScript

6:00 javascript

In this lesson we'll learn two ways to construct a Regular Expression in Javascript, explore the methods available to us directly from the RegExp constructor, use Regular Expressions with String.prototype methods, and build a simple regex highlighter.

javascript tutorial about How to use JavaScript's String.replace

How to use JavaScript's String.replace

5:26 javascript PRO

In JavaScript, you can change the content of a string using the replace method. This method signature is overloaded with a bunch of different ways to do string replacement in JavaScript. This lesson covers the entire API (including an interesting DSL for the replacement string).

javascript tutorial about Safely inspect nested objects with Reduce

Safely inspect nested objects with Reduce

6:29 javascript PRO

A common problem when dealing with some kinds of data is that not every object has the same nested structure. lukeskywalker.parents.father.isjedi works, but anakinskywalker.parents.father.isjedi throws an exception, because anakin_skywalker.parents.father is undefined. But we can reduce a path to provide safe default values and avoid exceptions when walking the same path on non-homogenous objects - watch to learn how! :)

javascript tutorial about Compose Functions with Reduce

Compose Functions with Reduce

8:19 javascript PRO

Javascript has first-class functions which means that any function can stored, passed around, and returned just like an Object can. This allows for a lot of flexibility with how you call functions. This allows us to use array reduction to create functional pipelines by composing arrays of functions.

javascript tutorial about Use Some as a Ternary Operator or Conditional

Use Some as a Ternary Operator or Conditional

5:43 javascript PRO

some returns a boolean value after passing each item in the source array through the test function that you pass in as the first parameter. This makes it well suited to the types of queries that require a simple yes or no answer. In this lesson we look at 2 practical use-cases for some. The first shows how it can be used with a ternary operator to switch a class on an element & the second shows how some can be used in an if conditional.

javascript tutorial about The JSON.parse API

The JSON.parse API

3:35 javascript PRO

JSON (JavaScript Object Notation) is a standard method to serialize JavaScript objects and is commonly used to transfer data from the server to the browser. The browser has a JSON API that allows you to parse the JSON string into a JavaScript object. This API allows you to customize the parsing behavior very specifically as well.

javascript tutorial about Intro to Recursion - Detecting an Infinite Loop

Intro to Recursion - Detecting an Infinite Loop

5:39 javascript PRO

When using recursion, you must be mindful of the dreaded infinite loop. Using the recursive function that we’ve built up over the previous lessons, we look at how a simple duplicated configuration item could cause chaos for our program as it has no context of which items it has previously seen. We fix this problem by introducing a parents array, which can keep track of which top-level commands have already been accessed.

javascript tutorial about Web Audio API: The Delay Node

Web Audio API: The Delay Node

3:51 javascript PRO

In this lesson, we cover the delay node, creating an echo effect.

javascript tutorial about 4 common ways to get a substring from a string in JavaScript

4 common ways to get a substring from a string in JavaScript

2:38 javascript PRO

There are four common ways to get a substring from a string in JavaScript, substring, substr, slice, and split + join. In this lesson you'll learn what the API to each of these methods is and how they compare.

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

Iterate over a Collection with Polymer's dom-repeate

2:49 polymer 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.

polymer tutorial about Execute Custom Events in Polymer

Execute Custom Events in Polymer

3:08 polymer 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.

polymer tutorial about Create Event Listeners in Polymer Elements

Create Event Listeners in Polymer Elements

1:32 polymer 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.

polymer tutorial about Observe Property Changes on a Custom Polymer Element

Observe Property Changes on a Custom Polymer Element

1:57 polymer 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.

polymer tutorial about Data Bind Two Polymer Elements

Data Bind Two Polymer Elements

5:12 polymer 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.

polymer tutorial about Understand Declared Property Basics in Polymer

Understand Declared Property Basics in Polymer

4:31 polymer PRO

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

polymer tutorial about Extend Native HTML Elements with Polymer

Extend Native HTML Elements with Polymer

3:11 polymer 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.

polymer tutorial about Use Lifecycle Callbacks On Custom Polymer Elements

Use Lifecycle Callbacks On Custom Polymer Elements

5:49 polymer 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.

polymer tutorial about Style Custom Elements in Polymer

Style Custom Elements in Polymer

5:55 polymer 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.

polymer tutorial about Create a Custom Element using Polymer

Create a Custom Element using Polymer

4:20 polymer

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.

javascript tutorial about Filter an Array with Truthy Values

Filter an Array with Truthy Values

6:44 javascript PRO

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.

css tutorial about Precompiling Your LESS Files with Gulp

Precompiling Your LESS Files with Gulp

2:40 css PRO

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

gulp tutorial about Bundling Your JavaScript Files with Gulp

Bundling Your JavaScript Files with Gulp

3:31 gulp PRO

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

javascript tutorial about Web Audio: Playing Back Audio Files

Web Audio: Playing Back Audio Files

4:59 javascript PRO

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.

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

Scrape an HTML Table with split, map, and reduce

8:31 javascript 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.

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

Intro to Recursion - Refactoring to a Pure Function

3:37 javascript PRO

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.

javascript tutorial about What is JavaScript Function Currying?

What is JavaScript Function Currying?

5:34 javascript PRO

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.

redux tutorial about Redux: Extracting Action Creators

Redux: Extracting Action Creators

3:52 redux

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

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

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

3:27 redux

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

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

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

4:41 redux

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

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

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

5:13 redux

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

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

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

1:30 redux

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

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

Redux: Passing the Store Down Implicitly via Context

7:56 redux

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

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

Redux: Passing the Store Down Explicitly via Props

3:54 redux

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.

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

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

6:19 redux

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

redux tutorial about Redux: Extracting Container Components (FilterLink)

Redux: Extracting Container Components (FilterLink)

8:04 redux

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

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

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

8:35 redux

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

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

Redux: Extracting Presentational Components (Todo, TodoList)

4:52 redux

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

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

Redux: React Todo List Example (Filtering Todos)

8:14 redux

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

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

Redux: React Todo List Example (Toggling a Todo)

3:29 redux

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

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

Redux: React Todo List Example (Adding a Todo)

7:25 redux

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

redux tutorial about Redux: Implementing combineReducers() from Scratch

Redux: Implementing combineReducers() from Scratch

4:22 redux

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

redux tutorial about Redux: Reducer Composition with combineReducers()

Redux: Reducer Composition with combineReducers()

2:10 redux

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

redux tutorial about Redux: Reducer Composition with Objects

Redux: Reducer Composition with Objects

2:42 redux

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

redux tutorial about Redux: Reducer Composition with Arrays

Redux: Reducer Composition with Arrays

2:21 redux

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

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

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

2:47 redux

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

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

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

4:11 redux

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

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

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

2:38 redux

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

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

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

3:54 redux

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

redux tutorial about Redux: React Counter Example

Redux: React Counter Example

2:18 redux

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

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