Browse all JavaScript lessons.

showing All 515 lessons...

Use Concat to Add Values to an Array

An Introduction to JSPM (JavaScript Package Manager)

P

const Declarations in es6 (ES2015)

P

Gulp and Browserify - Adding Babel & Source Maps

P

Gulp and Browserify - Adding Live Reload with Browsersync

P

Gulp and Browserify - Hooking up Watchify

P

Gulp and Browserify - Initial Setup

P

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

P

Optimizing Javascript for Chrome and Node.js

P

Writing conventional commits with commitizen

Automating Releases with semantic-release

Array.prototype.reduce in JavaScript by example

P

Linting JavaScript with ESLint

P

Unit Testing with Mocha and Chai

Setting up Unit Testing with Mocha and Chai

Publishing a beta version

Releasing a new version to npm

Releasing a version to GitHub

Publishing to npm

Pushing to GitHub

Creating the library and adding dependencies

Configuring npm and creating a package.json

Setting up GitHub

Introduction to How to Write an Open Source JavaScript Library

Immutable.js: Introduction - Easing the Pains of Mutability

P

The "this" keyword: The new and window Binding

P

NW.js and Webpack: A match made in heaven

P

Writing next generation JavaScript with Babel 5 (out of date)

P

ES6 Modules (ES2015) - Import and Export

P

Double && (and) Double || (or) = Double Functionality

P

NW.js Basics: Overview of DevTools, Menu and MenuItems

P

The "this" keyword: Explicit Binding with call, apply, and bind

P

Web APIs: Persisting browser data with window.localStorage

P

Hoisting in JavaScript

P

NW.js Basics: Overview of the Window and Manifest

P

The "this" keyword: Introduction and Implicit Binding

P

Animating with Canvas

P

The Factory Pattern for Javascript Modules

P
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 PRO

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 PRO

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 PRO

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 PRO

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

js tutorial about Optimizing Javascript for Chrome and Node.js

Optimizing Javascript for Chrome and Node.js

7:40 js PRO

Avoid JavaScript optimization killers and ensure that Chrome and Node.js are executing your code as efficiently as possible. This video demonstrates several limitations of the V8 JavaScript engine's optimizing compiler and inliner. Information that is not only interesting, but can prove to be very useful.

js tutorial about Writing conventional commits with commitizen

Writing conventional commits with commitizen

4:47 js

Because semantic-release requires a specific message format, it's easier to follow this convention using a tool called commitizen. In this lesson, we'll use it to write our first conventional commit message.

js tutorial about Automating Releases with semantic-release

Automating Releases with semantic-release

5:49 js

There are so many repeated steps when releasing a new version of a library. The tool semantic-release automates this process by pushing off the responsibility of your releases to continuous integration. Trust us, this will change your workflow for the better.

js tutorial about Array.prototype.reduce in JavaScript by example

Array.prototype.reduce in JavaScript by example

4:49 js PRO

Let's take a closer look at using Javascript's built in Array reduce function. Reduce is deceptively simple and when harnessed correctly can achieve very powerful results. By leveraging reduce, we can answer a variety of questions on a single, simple data set. In this lesson, we'll look at how you might use Array.prototype.reduce to:

  • Sum an array of numbers
  • Reduce an array of objects to a sum of a given property
  • Group an array of objects by key or a set of given criteria
  • Count the number of objects in an array by key or a given set of criteria
js tutorial about Linting JavaScript with ESLint

Linting JavaScript with ESLint

3:08 js PRO

ESLint is a JavaScript linter (static analysis tool) that offers full support for ES6, JSX, and other modern tools via plugins. We walk through setting up ESLint in a project, using the "init" CLI tool, configuring warnings/errors for rules, and adding editor plugins and build integrations. ESLint is built to be "pluggable" with simple, extendable, modular rules and an API for writing and using plugins. ESLint has many rules which are all turned off by default; you can extend the core "recommended" rules which will catch common JavaScript errors, and you can also turn on stylistic rules for code consistency.

js tutorial about Unit Testing with Mocha and Chai

Unit Testing with Mocha and Chai

3:01 js

Now that you've got everything set up with mocha and chai, it's time to actually write tests. In this lesson you'll learn how to use describe and it to outline your tests and make sure you don't break your library in the future.

js tutorial about Setting up Unit Testing with Mocha and Chai

Setting up Unit Testing with Mocha and Chai

2:44 js

Every dependable library needs to have tests to ensure that you don't push accidental bugs. In this lesson, see how you can set up mocha and chai to start testing your library.

js tutorial about Publishing a beta version

Publishing a beta version

3:37 js

Sometimes you're not quite ready to release a full on version of your open source library to npm. In this lesson, learn how to publish a beta version so people can try it out without tampering with anyone else using your library.

js tutorial about Releasing a new version to npm

Releasing a new version to npm

3:24 js

When you want to add a new feature, fix a bug, or push out a breaking API change, you need to take Semantic Versioning into account. In this lesson, learn what each number means as well as how to push out a new version of your library.

js tutorial about Releasing a version to GitHub

Releasing a version to GitHub

2:27 js

Now that you've released your module to npm, it's time to learn how to associate that release with a particular commit on GitHub. In this lesson learn how to create a tag using git tag and then how to associate that with a release on GitHub.

js tutorial about Publishing to npm

Publishing to npm

2:36 js

Putting your code up on GitHub is helpful, but publishing your library to npm makes it even easier for people to use your library. In this lesson, you'll learn how to publish your library and validate that it published correctly.

js tutorial about Pushing to GitHub

Pushing to GitHub

2:34 js

Once you've written some code and you feel good about it, it's time to commit that code and push it up to your GitHub repository for storage and collaboration.

js tutorial about Creating the library and adding dependencies

Creating the library and adding dependencies

4:46 js

Don't reinvent the wheel. We're creating a great library here, but we don't have to write every line of code. Learn how to depend on other libraries while creating your own in this lesson.

js tutorial about Configuring npm and creating a package.json

Configuring npm and creating a package.json

5:01 js

In this lesson, you'll learn how to set up your machine to publish to npm so people can install your library. You'll configure some helpful defaults and use those to create a package.json file for your project using npm init.

js tutorial about Setting up GitHub

Setting up GitHub

1:31 js

In this lesson, you'll learn how to set up a GitHub account, create a new GitHub repository, and connect your local project with that new repository so you have a place to store and collaborate on your library code.

js tutorial about Introduction to How to Write an Open Source JavaScript Library

Introduction to How to Write an Open Source JavaScript Library

1:35 js

This is an introduction to the "How to Write a JavaScript Library" in which the scope of the series is presented. You will learn everything you need to know to create a library for JavaScript: set up the GitHub repo, publish a module to npm, set up a test suite with code coverage reporting (using Karma, Mocha, and Chai), add continuous integration, add ES6 (ES2015) with Babel, configure Webpack, and distribute the library as a "Universal JavaScript" (a.k.a. "Isomorphic JavaScript") module (consumable by both the browser and node).

js tutorial about Immutable.js: Introduction - Easing the Pains of Mutability

Immutable.js: Introduction - Easing the Pains of Mutability

3:22 js PRO

By utilizing immutable data structures, we can write code that is easier to reason about, avoid mutation-related bugs, reduce complexity, and even gain some performance benefits along the way.

Before diving too far into Facebook's Immutable.js library, let's take a moment to examine some of the pains and obstacles that mutable data structures present.

We'll take a brief glimpse at putting the Immutable "List" data structure to work by example. We will convert our usage of Javascript's native Array to use Immutable.List in order to address a mutation-related "bug" caused by multiple objects "sharing" a mutable structure (array) by reference.

js tutorial about The "this" keyword: The new and window Binding

The "this" keyword: The new and window Binding

3:09 js PRO

In this lesson we talk about the "new binding" as well as the "window binding" for rules three and four of how to understand the "this" keyword in JavaScript.

js tutorial about NW.js and Webpack: A match made in heaven

NW.js and Webpack: A match made in heaven

4:51 js PRO

Let's add some module loading to our NW.js. Webpack and dependency management FTW!

js tutorial about Writing next generation JavaScript with Babel 5 (out of date)

Writing next generation JavaScript with Babel 5 (out of date)

3:07 js PRO

Babel is a compiler that lets us right future JavaScript not yet fully in browsers (ES6 / ES2015, ES7 / ES2016, etc) and transpile it back into code that can be used now. We'll walk through installing babel, writing some future JS syntax, transpiling it, and running it in a browser.

This lesson is out of date and uses an older version of Babel.

js tutorial about ES6 Modules (ES2015) - Import and Export

ES6 Modules (ES2015) - Import and Export

5:33 js PRO

ES6 (ES2015) introduces a standardized module format to Javascript. We'll take a look at the various forms of defining and importing modules. Using Webpack to bundle up our modules and Babel to transpile our ES6 into ES5, we'll put this new module syntax to work within our project. Then we'll examine how to import 3rd party packages from npm, importing lodash with the _ underscore alias using the ES6 module syntax.

js tutorial about Double && (and) Double || (or) = Double Functionality

Double && (and) Double || (or) = Double Functionality

3:24 js PRO

The and (&&) and or (||) operators in javascript do not function like traditional logical operators. We can use them to our advantage to eliminate some boilerplate code when writing conditional expressions.

Additional jsbin: https://jsbin.com/qipina/edit?js,output

js tutorial about NW.js Basics: Overview of DevTools, Menu and MenuItems

NW.js Basics: Overview of DevTools, Menu and MenuItems

6:47 js PRO

Want to make the app look native but keep the ability to toggle the Chrome dev tools? Throw the toggle in the system menu! Here we cover a few gotchas when setting up menus in a NW.js app.

js tutorial about The "this" keyword: Explicit Binding with call, apply, and bind

The "this" keyword: Explicit Binding with call, apply, and bind

4:32 js PRO

In this lesson we talk about .call, .apply, and .bind in order to understand "explicit binding", or the second rule of discovering what the "this" keyword is referencing in JavaScript.

js tutorial about Web APIs: Persisting browser data with window.localStorage

Web APIs: Persisting browser data with window.localStorage

4:24 js PRO

Local Storage is a native JavaScript Web API that makes it easy to store and persist data (as key-value pairs) in the Browser. In this lesson, we'll walk through using window.localStorage to store feedback a user enters into a form (text) so that even if they close and re-open their browser, they won't loose their progress.

js tutorial about Hoisting in JavaScript

Hoisting in JavaScript

3:39 js PRO

In this lesson, we'll walk through variable, function declaration, and function expression hoisting.

js tutorial about NW.js Basics: Overview of the Window and Manifest

NW.js Basics: Overview of the Window and Manifest

3:08 js PRO

Here we modify the manifest to configure the root NW.js browser window. This is the first step to make the app feel native and "desktoppy."

js tutorial about The "this" keyword: Introduction and Implicit Binding

The "this" keyword: Introduction and Implicit Binding

5:58 js PRO

In this lesson we introduce the "this" keyword in JavaScript as well as talk about "implicit binding" or the first rule in discovering what the "this" keyword is referencing.

js tutorial about Animating with Canvas

Animating with Canvas

9:18 js PRO

In this lesson, we cover several different ways to animate graphics drawn to Canvas.

js tutorial about The Factory Pattern for Javascript Modules

The Factory Pattern for Javascript Modules

3:15 js PRO

Javascript modules are a great way to isolate your code, but they are not very re-usable. If we implement the factory pattern inside of one of our modules we get code re-use without losing the encapsulation benefits of a javascript module.

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