Browse all JavaScript lessons.

showing All 445 lessons...

Intro to the Web Audio API

Sort an Array Alphabetically or Numerically

P

Learn to flatten and flatmap arrays with reduce

P

Avoid common mistakes when working with reduce

P

Learn how to use the optional reduce arguments

P

Use reduce to filter and map over large datasets

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

Using JSHint for Linting with Gulp

Understanding function bind() in JavaScript

P

Create a Shallow Copy of an Array with Slice

P

Check if a Value is in an Array with indexOf

P

Combine Values of an Array into a String with Join

P

Use Concat to Add Values to an Array

An Introduction to JSPM (JavaScript Package Manager)

P

const Declarations in es6 (ES2015)

Gulp and Browserify - Adding Babel & Source Maps

P

Gulp and Browserify - Adding Live Reload with Browsersync

Gulp and Browserify - Hooking up Watchify

P

Gulp and Browserify - Initial Setup

Limit Built Branches on Travis

Adding ES6 Support to Tests using Mocha and Babel

Adding ES6 Support

Adding badges to your README

Add code coverage reporting

Adding code coverage checking

Adding code coverage recording with Istanbul

Automatically running tests before commits with ghooks

Automatically Releasing with TravisCI

Committing a new feature with commitizen

"Private" Variables with Closures and Factory Functions

P

JavaScript Testing Fundamentals: Hello world unit test with Mocha (in ES6)

P

Installing and Writing a Default Task with Gulp

js tutorial about Intro to the Web Audio API

Intro to the Web Audio API

4:34 js

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 Learn how to use the optional reduce arguments

Learn how to 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

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.

js tutorial about Using JSHint for Linting with Gulp

Using JSHint for Linting with Gulp

6:01 js

We will look at linting your JavaScript files using jsHint with Gulp to check for errors and warnings.

js tutorial about Understanding function bind() in JavaScript

Understanding function bind() in JavaScript

3:03 js PRO

Changing context in JavaScript is only possible using call() and apply(). The bind() method on the function prototype use those methods to allow us to quickly change the context in which a function is executed in. Learn how bind works by recreating it.

js tutorial about Create a Shallow Copy of an Array with Slice

Create a Shallow Copy of an Array with Slice

9:15 js PRO

Array slice creates a shallow copy of an array. In this lesson we cover, in detail, exactly what a 'shallow' copy is and how it can trip people up. We go on to look at examples that show to how to copy only the first item, the last item and even how to copy a sub-section of an array excluding the first and last. We end the lesson with a practical example that shows how slice fits into a workflow that contains other array methods such as map & reduce.

js tutorial about Check if a Value is in an Array with indexOf

Check if a Value is in an Array with indexOf

5:21 js PRO

indexOf is used to search for a value or reference inside of an array. In this lesson we first look at what values are returned when a search is successful vs when it's unsuccessful. Then we move onto a technique that shows how to use the return value to create a boolean flag that can be checked easily. We end by filtering 1 array based on the existence of a value in a whitelist array.

js tutorial about Combine Values of an Array into a String with Join

Combine Values of an Array into a String with Join

4:42 js PRO

The join() method joins all elements of an array into a string. In this lesson we first look at why join is often a better option than regular string concatenation. Then we move onto an example which shows a simple way of storing lines of text in an array and outputting them with a new line separator and we finish by looking at ways to chain multiple array methods together.

js tutorial about Use Concat to Add Values to an Array

Use Concat to Add Values to an Array

4:38 js

Concat creates a shallow copy of an existing array that includes any arguments you pass to it. In this lesson, we look at using concat for adding additional values to an array then cover some more useful features such as accepting other arrays as arguments & how to chain concat with other array methods such as forEach

js tutorial about An Introduction to JSPM (JavaScript Package Manager)

An Introduction to JSPM (JavaScript Package Manager)

3:09 js PRO

JSPM can handle installed packages, transpiling ES6, and bundling all from the command-line. This video gives a quick overview of install JSPM, installing packages with JSPM, writing a very simple app in ES6 that uses those packages, then bundling up for production.

js tutorial about const Declarations in es6 (ES2015)

const Declarations in es6 (ES2015)

2:14 js

Read only variables are available in JavaScript (es6/es2015). We will use const declarations and their benefits, like read only and block scope.

js tutorial about Gulp and Browserify - Adding Babel & Source Maps

Gulp and Browserify - Adding Babel & Source Maps

4:30 js PRO

What is already a nice workflow using Gulp, Browserify, Watchify & Browsersync to enable auto rebuilds & live browser reloading can be further improved by adding Babelify. A simple wrapper around the popular transpiler Babel, Babelify can ‘transform’ source files as they pass through our stream to enable certain Javascript features not yet available in the Browser or Node. We end the lesson by looking at how to generate & extract sourcemaps using exorcist.

js tutorial about Gulp and Browserify - Adding Live Reload with Browsersync

Gulp and Browserify - Adding Live Reload with Browsersync

3:08 js

Building upon the watch task that we begin this lesson with, we’ll look at how to create a local development server using the app directory as the web root. By using Browsersync to achieve this, we can also instruct all connected browsers to automatically reload each time our bundle is re-generated. Browsersync has a public .stream() method that is designed exactly for this purpose.

js tutorial about Gulp and Browserify - Hooking up Watchify

Gulp and Browserify - Hooking up Watchify

3:31 js PRO

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task watch & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

js tutorial about Gulp and Browserify - Initial Setup

Gulp and Browserify - Initial Setup

2:21 js

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single bundle.js file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by gulp.dest and finish by writing the bundle to a dist directory.

js tutorial about Limit Built Branches on Travis

Limit Built Branches on Travis

3:38 js

By default, Travis will build all branches, tags, and Pull Requests. Because we're building our master branch before we release, we don't need Travis building our releases. Also, we don't care to have Travis build all the branches. So we're going to limit Travis to only build our master branch and Pull Requests by configuring travis via our .travis.yml file.

js tutorial about Adding ES6 Support to Tests using Mocha and Babel

Adding ES6 Support to Tests using Mocha and Babel

5:02 js

By adding ES6 support to our source code, we need to add that same support to our tests so we can consume that synatx. This is quite easy with the --compilers flag for Mocha.

js tutorial about Adding ES6 Support

Adding ES6 Support

8:35 js

Writing the code in the next version of JavaScript can really simplify the development of a library. In this lesson, learn how to create a build which uses the BabelJS transpiler to enable you to write your code using ES6 (aka ES2015) syntax.

js tutorial about Adding badges to your README

Adding badges to your README

2:28 js

It's nice to know the status of a project. Adding badges to your readme gives first-timers and old-timers an at-a-glance peek into the status of your project. In this lesson, we'll add several badges using shields.io

js tutorial about Add code coverage reporting

Add code coverage reporting

3:59 js

Now that we're keeping track of our coverage, let's upload our reports to a third party service so we can track our stats over time. In this lesson we'll show how easy it is to upload our stats to codecov.io.

js tutorial about Adding code coverage checking

Adding code coverage checking

3:24 js

Now that we have code coverage being reported, let's make sure that nobody commits code which drops code coverage below our standard by adding a check-coverage script that utilizes istanbul's built-in check-coverage command.

js tutorial about Adding code coverage recording with Istanbul

Adding code coverage recording with Istanbul

2:57 js

This lesson will utilize the Istanbul tool to instrument our code for code coverage recording and reporting. We'll use this to make sure that as our library gets new features, we keep track of our coverage and can find places to improve it.

js tutorial about Automatically running tests before commits with ghooks

Automatically running tests before commits with ghooks

3:02 js

Wouldn't it be nice if everyone ran the tests before committing code? With ghooks, you can automatically add a githook when dependencies are installed which will allow you to define common scripts to be run at various points during git actions (like committing). In this lesson, we'll add a githook for running the tests before we commit code to make sure we don't commit anything that breaks the tests.

js tutorial about Automatically Releasing with TravisCI

Automatically Releasing with TravisCI

3:52 js

Now that we have everything set up with semantic-release and we have a feature commit, let's push that up and watch TravisCI use semantic-release do our library release automatically.

js tutorial about Committing a new feature with commitizen

Committing a new feature with commitizen

3:49 js

In this lesson, we'll add a new feature to our library and use commitizen to generate our commit message that follows the convention for semantic-release to know it needs to bump the minor version.

js tutorial about "Private" Variables with Closures and Factory Functions

"Private" Variables with Closures and Factory Functions

3:01 js PRO

By making use of closures and lexical scope, we can achieve "private" properties by returning objects with methods from a factory function. By defining our desired "private" variables within our factory function and accessing these variables from within our returned object's methods we create a closure and maintain unique, separate references to our "private" variables.

js tutorial about JavaScript Testing Fundamentals: Hello world unit test with Mocha (in ES6)

JavaScript Testing Fundamentals: Hello world unit test with Mocha (in ES6)

6:15 js PRO

Mocha is a testing framework that provides structure for unit tests. In this lesson, we will be setting up Mocha with npm and npm scripts, writing a "Hello World" unit test, then writing the code to make the test pass (as an example of Test Driven Development (TDD), with the "red-green-refactor" workflow).

js tutorial about Installing and Writing a Default Task with Gulp

Installing and Writing a Default Task with Gulp

1:39 js

A brief introduction to using GulpJS in your JavaScript application and creating your first Gulp task.

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