Browse all JavaScript lessons.

showing All 445 lessons...

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

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

The "this" keyword: The new and window Binding

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

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

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

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

Web APIs: Persisting browser data with window.localStorage

Hoisting in JavaScript

NW.js Basics: Overview of the Window and Manifest

P

The "this" keyword: Introduction and Implicit Binding

Animating with Canvas

P

The Factory Pattern for Javascript Modules

Refactoring: Array.prototype by example [filter, some, forEach]

The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

Your first NW.js desktop application in less than 5 minutes

Introduction to apiCheck.js

P

Listening for Mouse and Keyboard Events with HTML Canvas

P

Riot JS - Repeating Elements with Each Attribute

Riot JS - Scoped CSS and Toggled Classes

P

Riot JS - DOM Events

P

Riot JS - Tag Life Cycle Hooks

P

Canvas and Pixels

P

Riot JS - Tag Options

Riot JS - Getting Started with this React-like micro-library

Canvas Transformations

P

Advanced Flattening

Interactive Leaflet Maps with GeoJSON data

P

Canvas Effects

P

Webpack CSS, Preprocessors, and url assets

P

Lodash - sortBy and sortedIndex

P

HTML Canvas and Images

P

Webpack Loaders, Source Maps, and ES6

P
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

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

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

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

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

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

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

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

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

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

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

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.

js tutorial about Refactoring: Array.prototype by example [filter, some, forEach]

Refactoring: Array.prototype by example [filter, some, forEach]

5:42 js

Refactoring is a great opportunity to learn and we have an existing Javascript function that is lengthy, hard to understand, and overcomplicated. We'll take a look at putting some of Javascript's built in Array.prototype methods to use to help us clean this up and learn by example through refactoring.

By taking a few minutes to refactor this existing code, we can get a glimpse at how we can harness the power of the Array and lean on some built in Array functions available to us in Javascript's core without any added utility libraries.

In this lesson we touch on just a few of the Array methods:

js tutorial about The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

The Module Pattern in Javascript (aka Immediately-Invoked Function Expression aka IIFE)

5:05 js

Javascript modules are a design pattern that allow you to encapsulate your code into smaller self managing pieces. They help you separate your code, protect your variables, and provide an easy way to expose only the parts of your component that you want to be exposed.

js tutorial about Your first NW.js desktop application in less than 5 minutes

Your first NW.js desktop application in less than 5 minutes

3:42 js

NW.js can be an invaluable tool for building cross-platform desktop applications with javascript and html. In this lesson, we build a simple NW.js app that will act as the starting point to a much bigger application! In less than five minute, no less. :)

js tutorial about Introduction to apiCheck.js

Introduction to apiCheck.js

3:52 js PRO

Because JavaScript is a typeless language, validating your api is a terrific way to help avoid bugs and instruct users of your API without requiring them to check documentation. See how api-check can help you do this. If you're familiar with ReactJS propTypes, this will be familiar to you.

js tutorial about Listening for Mouse and Keyboard Events with HTML Canvas

Listening for Mouse and Keyboard Events with HTML Canvas

10:40 js PRO

In this lesson, listening for and handling mouse and keyboard events in Canvas is covered.

js tutorial about Riot JS - Repeating Elements with Each Attribute

Riot JS - Repeating Elements with Each Attribute

4:01 js

It's easy to repeat over a collection and render many elements. Riot works very similar to Angular and has various syntaxes for it's each attribute. We'll look at the typical syntax for arrays, a shortened syntax, and an object key/value syntax.

js tutorial about Riot JS - Scoped CSS and Toggled Classes

Riot JS - Scoped CSS and Toggled Classes

2:41 js PRO

Riot takes a 'keep your styles close' approach with custom tags. You are encouraged to place your styles for a tags element right inline with the html and javascript. Learn how riot parses the inline styles as well as ways to keep your styles from bleeding out to the rest of your app. Scoped styles provide great isolation for your custom tag. Use the class attribute's special binding syntax to easily add and remove a class based on an expression.

js tutorial about Riot JS - DOM Events

Riot JS - DOM Events

2:49 js PRO

Riot can listen for raw dom events on any element by adding the on* attribute to elements and referencing an event handler. Let's walk through a couple examples.

js tutorial about Riot JS - Tag Life Cycle Hooks

Riot JS - Tag Life Cycle Hooks

2:48 js PRO

Every tag in Riot has a lifecycle. I'll explore the three hooks: mount, update, and unmount while adding an animation feature for an existing tag. Lifecycle hooks are important for setting up, tearing down, and keeping a tag's view up to date after external logic is run.

js tutorial about Canvas and Pixels

Canvas and Pixels

10:38 js PRO

In this lesson, you'll learn how to read and write individual pixel color values from a canvas.

js tutorial about Riot JS - Tag Options

Riot JS - Tag Options

2:20 js

Tag Options allow you to abstract your custom tag elements into reusable objects by allowing the tag-user to specify the dynamic parameters of their component.

js tutorial about Riot JS - Getting Started with this React-like micro-library

Riot JS - Getting Started with this React-like micro-library

2:43 js

Getting started with Riot JS. We'll discuss riot's compile and mount process and build a small hello world component with simple data-binding.

js tutorial about Canvas Transformations

Canvas Transformations

8:44 js PRO

Transformations can change the default canvas coordinate system and create complex drawings with much less code.

js tutorial about Advanced Flattening

Advanced Flattening

11:58 js

In this lesson we solidify our understanding of how to flatten collections. This is perhaps the most important skill when learning to program without loops. We will try our hand at flattening not just a two dimensional collection, but a three-dimensional collection. Later on it will become clear how these skills relate to asynchronous programming.

js tutorial about Interactive Leaflet Maps with GeoJSON data

Interactive Leaflet Maps with GeoJSON data

3:53 js PRO

Rendering GeoJSON data on a map and interacting via mouse over, mouse out, and click.

js tutorial about Canvas Effects

Canvas Effects

7:14 js PRO

Learn some of the different ways you can affect the graphical content that you are drawing to a canvas. We'll cover global alpha, global composite operations and shadows.

js tutorial about Webpack CSS, Preprocessors, and url assets

Webpack CSS, Preprocessors, and url assets

7:09 js PRO

Webpack enables modularity by allowing you to require the styles needed for a particular component. Adding preprocessors is a breeze and it simplifies the deployment of your css assets.

js tutorial about Lodash - sortBy and sortedIndex

Lodash - sortBy and sortedIndex

3:38 js PRO

Lodash's "sortBy" method helps you sort data in your collections and "sortedIndex" helps you find where to place new data. In this video, John walks you through how to use each of these methods and how they can work together.

js tutorial about HTML Canvas and Images

HTML Canvas and Images

6:50 js PRO

In addition to vector drawing, you can draw bitmap images into a canvas, and also retrieve a bitmap based on the content in a canvas.

js tutorial about Webpack Loaders, Source Maps, and ES6

Webpack Loaders, Source Maps, and ES6

5:03 js PRO

Webpack loaders are how you tell webpack to resolve your dependencies and you can use a loader built for the babel transpiler to easily enable ES6 code in your project. Full sourcemap support is also available using webpack's devtool property.

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