Browse all JavaScript lessons.

showing All 548 lessons...

Lodash - sortBy and sortedIndex

P

HTML Canvas and Images

P

Webpack Loaders, Source Maps, and ES6

P

Adding Shapes to Maps with Leaflet and GeoJSON

P

Intro to Webpack

P

Drawing Text on Canvas

P

Lodash: Refactoring Simple For Loops

P

Simple drag and drop with Observables

Using the map method with Observable

Introducing the Observable

Create an Array concatAll method

Chaining the Array map and filter methods

The Array filter method

The Array map method

The Array forEach method

Get Started with LeafletJS Mapping

P

Gradient Fills on the HTML5 Canvas

P

Drawing Styles on HTML5 Canvas

P

Drawing Paths - Curves and Arcs

P

Drawing Paths - Lines and Rectangles

Introduction to the HTML Canvas element

Object Enhancements in ES6

P

Editing breakpoints in Chrome devtools

P

Using the ES6 spread operator

P

Shorthand Properties in ES6

P

Introduction to Lodash

P

Cleaning your build folder with grunt-contrib-clean

P

Minifying your output with grunt-uglify

P

Concatenating Your Javascript with grunt-contrib-concat

P

Development Automation Tasks with Grunt

P

Basic Metaprogramming: Dynamic Method

P

ES6 (ES2015) - Generators

P

Use Template Literals in ES6

P

Array Comprehensions - NON-STANDARD

P

Destructuring Assignment in ES6

P

Default Values for Function Parameters in ES6

P

Arrow Function => in ES6

The let keyword in ES6

traceur compiler and Grunt

P

Intro to ES6 and traceur compiler

P

Advanced Function Scope

P

JavaScript Function Scope Basics

P

Multitask

P

External Config

P

Uglify

P

Template

P

Grunt Watch

P

Introduction to Grunt

P
lodash tutorial about Lodash - sortBy and sortedIndex

Lodash - sortBy and sortedIndex

3:38 lodash 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.

canvas tutorial about HTML Canvas and Images

HTML Canvas and Images

6:50 canvas 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.

babel tutorial about Webpack Loaders, Source Maps, and ES6

Webpack Loaders, Source Maps, and ES6

5:03 babel 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.

leaflet tutorial about Adding Shapes to Maps with Leaflet and GeoJSON

Adding Shapes to Maps with Leaflet and GeoJSON

2:56 leaflet PRO

With a basic map in place we can add shapes, like US states. We will then see how to style the shapes to make a visually appealing map.

webpack tutorial about Intro to Webpack

Intro to Webpack

4:29 webpack PRO

Webpack is a module bundler that bundles javascript and other assets for the browser. It works really well for applications and javascript libraries and is very simple frontend build tool.

canvas tutorial about Drawing Text on Canvas

Drawing Text on Canvas

6:45 canvas PRO

With the HTML canvas you can easily draw text as well as graphics. Let's take a look at basic text manipulation on the canvas.

lodash tutorial about Lodash: Refactoring Simple For Loops

Lodash: Refactoring Simple For Loops

3:44 lodash PRO

This lesson shows how to refactor your old loops into using a simpler and more powerful lodash-style. We will start by looking at how many people traditionally write JavaScript for loops and then talk about the alternate style and benefits that Lodash offers.

rxjs tutorial about Simple drag and drop with Observables

Simple drag and drop with Observables

12:35 rxjs

Armed with the map and concatAll functions, we can create fairly complex interactions in a simple way. We will use Observable to create a simple drag and drop example with basic DOM elements.

rxjs tutorial about Using the map method with Observable

Using the map method with Observable

3:45 rxjs

Like an array, Observable has a map method that allows us to transform a sequence into a new Observable.

rxjs tutorial about Introducing the Observable

Introducing the Observable

11:59 rxjs

In this lesson we will get introduced to the Observable type. An Observable is a collection that arrives over time. Observables can be used to model events, asynchronous requests, and animations. Observables can also be transformed, combined, and consumed using the Array methods we learned in the previous lessons. We can write powerful and expressive asynchronous programs using the few simple methods we've learned so far.

rxjs tutorial about Create an Array concatAll method

Create an Array concatAll method

4:17 rxjs

In addition to flat Arrays, programmers must often deal with nested Arrays. For example let's say we have an Array of stock exchanges, each of which is represented by an array of all the stocks listed on that exchange. If we were looking for a stock that matched a certain criteria, we would first need to loop through all of the exchanges, and then all of the stocks within.

In these situations, most developers would nest two loops. However in this lesson we will write a new Array function "concatAll" which will automatically flatten nested arrays buy one dimension. This will remove the need to ever use a nested loop to flatten a nested array.

rxjs tutorial about Chaining the Array map and filter methods

Chaining the Array map and filter methods

3:05 rxjs

Both map and filter do not modify the array. Instead they return a new array of the results. Because both map and filter return Arrays, we can chain these functions together to build complex array transformations with very little code. Finally we can consume the newly created array using forEach. In this lesson, we will learn how to build nontrivial programs without using any loops at all.

rxjs tutorial about The Array filter method

The Array filter method

4:42 rxjs

One very common operation in programming is to iterate through an Array's contents, apply a test function to each item, and create a new array containing only those items the passed the test. For example, let's say you wanted to loop through an array of stocks and select only those with the price larger than a certain value. In this lesson we will demonstrate how to use the Array's filter method to easily perform this operation with less code than a loop would require.

rxjs tutorial about The Array map method

The Array map method

3:02 rxjs

One very common operation in programming is to iterate through an Array's contents, apply a function to each item, and create a new array containing the results. For example, let's say you wanted to loop through an array of stock objects and select only the name for display on screen. In this lesson we will demonstrate how to use the Array's map method to easily perform this operation with less code than a loop would require.

rxjs tutorial about The Array forEach method

The Array forEach method

4:03 rxjs

Most JavaScript developers are familiar with the for loop. One of the most common uses of the for loop is to iterate through the items in an array. In this lesson, we will learn how to replace the for loop with the Array's forEach method - and shorten your code in the process.

leaflet tutorial about Get Started with LeafletJS Mapping

Get Started with LeafletJS Mapping

3:13 leaflet PRO

Leaflet makes creating maps in the browser dead simple. With some HTML and 3 lines of JavaScript, we can quickly have a map displaying.

canvas tutorial about Gradient Fills on the HTML5 Canvas

Gradient Fills on the HTML5 Canvas

5:20 canvas PRO

When drawing on the HTML5 canvas element, your fills aren't limited to flat colors. You can use gradients to get smoothly blended color fills on your drawn elements.

canvas tutorial about Drawing Styles on HTML5 Canvas

Drawing Styles on HTML5 Canvas

5:31 canvas PRO

You aren't limited to boring black lines when drawing on the HTML5 canvas element. Using styles, you can program interesting colorful images with JavaScript.

canvas tutorial about Drawing Paths - Curves and Arcs

Drawing Paths - Curves and Arcs

5:16 canvas PRO

When drawing on your HTML canvas in JavaScript, you aren't restricted to straight lines. Using curves and arcs you are able to create smooth curved lines.

canvas tutorial about Drawing Paths - Lines and Rectangles

Drawing Paths - Lines and Rectangles

3:06 canvas

Now that we have an HTML5 canvas to draw on, let's take a look at drawing simple lines and rectangles with JavaScript

canvas tutorial about Introduction to the HTML Canvas element

Introduction to the HTML Canvas element

4:55 canvas

The HTML Canvas element allows us to access powerful drawing APIs from JavaScript. In this lesson, the first in a series, we will learn about <canvas>, and get ready to start drawing.

javascript tutorial about Object Enhancements in ES6

Object Enhancements in ES6

2:12 javascript PRO

Building on the ES6 Shorthand Properties lesson, John shows the other new Object Enhancements in ES6 that will help you write less code and easily create complex Objects.

chrome-devtools tutorial about Editing breakpoints in Chrome devtools

Editing breakpoints in Chrome devtools

4:29 chrome-devtools PRO

There is more to breakpoints than just setting them. Learn how to edit and disable breakpoints, and log to the console without modifying your code.

javascript tutorial about Using the ES6 spread operator

Using the ES6 spread operator

1:40 javascript PRO

The spread operator allows you to "explode" an array into its individual elements.

javascript tutorial about Shorthand Properties in ES6

Shorthand Properties in ES6

1:01 javascript PRO

Shorthand properties allow you to compose complex objects from other objects.

lodash tutorial about Introduction to Lodash

Introduction to Lodash

1:33 lodash PRO

Lodash is a toolkit of Javascript functions that provides clean, performant methods for manipulating objects and collections. It is a "fork" of the Underscore library and provides additional functionality as well as some serious performance improvements. If you aren't using Lodash, you should be.

grunt tutorial about Cleaning your build folder with grunt-contrib-clean

Cleaning your build folder with grunt-contrib-clean

2:05 grunt PRO

Grunt will clean up your build with the grunt-contrib-clean to make sure that no artifacts from previous builds are hanging around.

grunt tutorial about Minifying your output with grunt-uglify

Minifying your output with grunt-uglify

2:23 grunt PRO

For production we want to use minified javascript to reduce the payload that is sent from the server. This can easily be accomplished with grunt-uglify.

grunt tutorial about Concatenating Your Javascript with grunt-contrib-concat

Concatenating Your Javascript with grunt-contrib-concat

2:02 grunt PRO

You can use Grunt to combine all of your Javascript files into a single concatenated file.

angularjs tutorial about Development Automation Tasks with Grunt

Development Automation Tasks with Grunt

4:24 angularjs PRO

With Grunt you can automate core tasks for your AngularJS project. In this lesson we will take a look at converting Stylus files to CSS, and add a watch task to convert those files automatically whenever a change is detected.

javascript tutorial about Basic Metaprogramming: Dynamic Method

Basic Metaprogramming: Dynamic Method

4:27 javascript PRO

Metaprogramming is a powerful tool for dynamically applying behavior to JavaScript objects. It can be a confusing concept, "code that writes code", but is very useful when you understand a few simple concepts. This lesson will show you how to create dynamic methods on your Javascript objects.

javascript tutorial about ES6 (ES2015) - Generators

ES6 (ES2015) - Generators

5:28 javascript PRO

Generators in ECMAscript 6 are first-class coroutines that produce encapsulated suspended execution contexts. Whew! Yield values and iterate over them until no more values exist in the generator. We'll talk more about practical use later ;)

javascript tutorial about Use Template Literals in ES6

Use Template Literals in ES6

4:12 javascript PRO

ECMAscript 6 lets us use string templates to gain a lot more control over strings in JavaScript.

javascript tutorial about Array Comprehensions - NON-STANDARD

Array Comprehensions - NON-STANDARD

2:28 javascript PRO

Array Comprehensions didn't make the ES6 cut. You probably shouldn't use them ;)

See comments.

javascript tutorial about Destructuring Assignment in ES6

Destructuring Assignment in ES6

4:33 javascript PRO

ECMAscript 6 destructuring provides flexible options for variable assignment.

javascript tutorial about Default Values for Function Parameters in ES6

Default Values for Function Parameters in ES6

2:16 javascript PRO

With ECMAscript 6 we get the luxury of default parameters for our functions.

javascript tutorial about Arrow Function => in ES6

Arrow Function => in ES6

2:57 javascript

ECMAscript 6 introduces the "arrow function" as a shortcut for creating anonymous functions with this scope bound.

javascript tutorial about The let keyword in ES6

The let keyword in ES6

2:58 javascript

Block scoping can be surprising, and sometimes confusing, in Javascript. With es6, we have access to the let keyword to remove this pain.

grunt tutorial about traceur compiler and Grunt

traceur compiler and Grunt

3:30 grunt PRO

Build and watch ECMAscript 6 using traceur compiler and Grunt.

javascript tutorial about Intro to ES6 and traceur compiler

Intro to ES6 and traceur compiler

2:42 javascript PRO

es6 is the next generation of javascript. You can use it today with the traceur compiler library. Also be sure to check out es6fiddle to start playing with ECMAscript 6 right now.

javascript tutorial about Advanced Function Scope

Advanced Function Scope

7:06 javascript PRO

Function scope and closures in JavaScript can be tricky. This lesson builds on the Function Scope Basics video to dive deeper into JS function scope.

javascript tutorial about JavaScript Function Scope Basics

JavaScript Function Scope Basics

5:45 javascript PRO

This or that? Javascript scoping can be confusing. This lesson covers the very basics of function scoping.

Multitask

1:49 grunt PRO

Grunt Multitask allows you to write complex tasks that run multiple targets. In this lesson, John will show you how to use Multitask in your GruntJS builds.

External Config

3:51 grunt PRO

In this lesson John will show you how to create a simple external config file for your GruntJS build.

Uglify

1:41 grunt PRO

In this lesson John will show you how to start using Grunt Uglify to compress your javascript for production deployment.

Template

3:45 grunt PRO

GruntJS allows you to use underscore/erb style templates to reduce repetition and create variables. This is commonly used to point at build folders and files within your application's structure.

Grunt Watch

3:03 grunt PRO

In this lesson John will show you how to get started with grunt-contrib-watch. Watch is an essential component of any Grunt build, and you will find yourself using it in almost every project.

grunt tutorial about Introduction to Grunt

Introduction to Grunt

3:58 grunt PRO

In this lesson you will install GruntJS and get up and running with your first task, initial configuration, and how to get Grunt methods auto-completing in WebStorm.

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