Browse all JavaScript lessons.

showing All 520 lessons...

Exploring a Repository

Exploring GitHub

Introduction to GitHub

Redirect the browser using JavaScript

P

The JSON.stringify API

P

JavaScript's Call Stack

P

Find Patterns at the Start and End of Lines with Line Anchors in Regular Expressions

P

Match the Same String Twice with Backreferences in Regular Expressions

P

Find the Start and End of Words with Regular Expression Word Boundaries

P

Use Lookaheads in Regular Expressions

P

Create Capture Groups in Regular Expressions

P

Use Shorthand Regular Expression Character Classes

P

Use Character Classes in Regular Expressions

P

Use Regular Expressions to Find Repeated Patterns

P

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)

js tutorial about Exploring a Repository

Exploring a Repository

4:07 js

The basic unit of GitHub is a repository. This is where your code is stored and GitHub allows you to interact with others and with the code in great ways. In this lesson we talk about Watching, Starting, and Forking a repository. We also cover GitHub issues and pull requests and various other stats about a GitHub repository.

js tutorial about Exploring GitHub

Exploring GitHub

1:47 js

GitHub adds a lot of great features on top of git repository hosting. We’ll take a look at some of these features including:

  • How to create a repository and organization on GitHub
  • How to explore and find projects on GitHub
  • About GitHub gists
  • Searching pull requests and issues on GitHub
js tutorial about Introduction to GitHub

Introduction to GitHub

0:47 js

In this lesson we’ll talk about what GitHub is and how to sign up for a GitHub account so you can contribute to an open source project on GitHub.

js tutorial about Redirect the browser using JavaScript

Redirect the browser using JavaScript

2:13 js PRO

There are two common ways to redirect the browser in JavaScript. Both use window.location but they differ in how they interact with Session History (and hence, the browser's back button). In this lesson, you'll learn how they're different and how to use each of them.

js tutorial about The JSON.stringify API

The JSON.stringify API

8:26 js 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 serialize a JavaScript object or array into a JSON string. This API allows you to customize the serialization very specifically as well.

js tutorial about JavaScript's Call Stack

JavaScript's Call Stack

3:45 js PRO

JavaScript has a concurrency model based on an "event loop". Yet, we know that JavaScript is single-threaded, which means only one task can happen at a time. To understand how JavaScript has a concurrent model yet is single threaded, we'll take a look at how the browser is working to interpret your JavaScript.

Specifically, we'll start by looking at the Stack implemented by browser engines (e.g. V8 or SpiderMonkey). The JavaScript engines use the call stack to keep track of what functions are running -- a function is added to a stack when the engine reaches a function that needs to be executed, and it cleared from the stack when the function returns.

js tutorial about Find Patterns at the Start and End of Lines with Line Anchors in Regular Expressions

Find Patterns at the Start and End of Lines with Line Anchors in Regular Expressions

3:19 js PRO

We can identify the start and end of a line using Line Anchors. When dealing with multiple line matches we can utilize the multiline regular expression flag.

js tutorial about Match the Same String Twice with Backreferences in Regular Expressions

Match the Same String Twice with Backreferences in Regular Expressions

3:31 js PRO

Regular Expression Backreferences provide us a method to match a previously captured pattern a second time.

js tutorial about Find the Start and End of Words with Regular Expression Word Boundaries

Find the Start and End of Words with Regular Expression Word Boundaries

2:18 js PRO

Regular Expression Word Boundaries allow to perform "whole word only" searches within our source string.

js tutorial about Use Lookaheads in Regular Expressions

Use Lookaheads in Regular Expressions

1:27 js PRO

Lookaheads allow us to match a pattern followed by another pattern without including the second pattern in our match.

js tutorial about Create Capture Groups in Regular Expressions

Create Capture Groups in Regular Expressions

4:35 js PRO

In this lesson we'll capture groups of characters we wish to match, use quantifiers with those groups, and use references to those groups in String.prototype.replace.

js tutorial about Use Shorthand Regular Expression Character Classes

Use Shorthand Regular Expression Character Classes

1:42 js PRO

In this lesson we'll learn shorthands for common character classes as well as their negated forms.

js tutorial about Use Character Classes in Regular Expressions

Use Character Classes in Regular Expressions

2:41 js PRO

Regular Expression Character Classes define a group of characters we can use in conjunction with quantifiers.

js tutorial about Use Regular Expressions to Find Repeated Patterns

Use Regular Expressions to Find Repeated Patterns

3:53 js PRO

Regular Expression Quantifiers allow us to identify a repeating sequence of characters of minimum and maximum lengths. In this lesson we'll use Regular Expression Quantifiers to match repeated patterns, common Quantifier patterns, and using shorthand for those common Quantifier patterns.

js tutorial about Find Plain Text Patterns using Regular Expressions

Find Plain Text Patterns using Regular Expressions

2:29 js 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.

js tutorial about Get Started with Regular Expressions in JavaScript

Get Started with Regular Expressions in JavaScript

6:00 js

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.

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

How to use JavaScript's String.replace

5:26 js 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).

js tutorial about Safely inspect nested objects with Reduce

Safely inspect nested objects with Reduce

6:29 js 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! :)

js tutorial about Compose Functions with Reduce

Compose Functions with Reduce

8:19 js 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.

js tutorial about Use Some as a Ternary Operator or Conditional

Use Some as a Ternary Operator or Conditional

5:43 js 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.

js tutorial about The JSON.parse API

The JSON.parse API

3:35 js 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.

js tutorial about Intro to Recursion - Detecting an Infinite Loop

Intro to Recursion - Detecting an Infinite Loop

5:39 js 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.

js tutorial about Web Audio API: The Delay Node

Web Audio API: The Delay Node

3:51 js PRO

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

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

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

js tutorial about Precompiling Your LESS Files with Gulp

Precompiling Your LESS Files with Gulp

2:40 js PRO

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 PRO

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

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

js tutorial about What is JavaScript Function Currying?

What is JavaScript Function Currying?

5:34 js 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.

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.

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