JS on autoplay

Gotta watch em all!

Watch User Created Playlist (206)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

JavaScript Function Scope Basics

Advanced Function Scope

P

Basic Metaprogramming: Dynamic Method

P

Introduction to Lodash

Editing breakpoints in Chrome devtools

Introduction to the HTML Canvas element

Drawing Paths - Lines and Rectangles

Drawing Paths - Curves and Arcs

P

Drawing Styles on HTML5 Canvas

P

Gradient Fills on the HTML5 Canvas

P

Get Started with LeafletJS Mapping

The Array forEach method

The Array map method

The Array filter method

Chaining the Array map and filter methods

Create an Array concatAll method

Introducing the Observable

Using the map method with Observable

Simple drag and drop with Observables

Lodash: Refactoring Simple For Loops

P

Drawing Text on Canvas

P

Intro to Webpack

Adding Shapes to Maps with Leaflet and GeoJSON

P

Webpack Loaders, Source Maps, and ES6

P

HTML Canvas and Images

P

Lodash - sortBy and sortedIndex

P

Webpack CSS, Preprocessors, and url assets

P

Canvas Effects

P

Interactive Leaflet Maps with GeoJSON data

P

Advanced Flattening

Canvas Transformations

P

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

Riot JS - Tag Options

Canvas and Pixels

P

Riot JS - Tag Life Cycle Hooks

P

Riot JS - DOM Events

P

Riot JS - Scoped CSS and Toggled Classes

P

Riot JS - Repeating Elements with Each Attribute

Listening for Mouse and Keyboard Events with HTML Canvas

P

Introduction to apiCheck.js

P

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

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

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

The Factory Pattern for Javascript Modules

Animating with Canvas

P

The "this" keyword: Introduction and Implicit Binding

NW.js Basics: Overview of the Window and Manifest

P

Hoisting in JavaScript

Web APIs: Persisting browser data with window.localStorage

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

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

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

NW.js and Webpack: A match made in heaven

P

The "this" keyword: The new and window Binding

Immutable.js: Introduction - Easing the Pains of Mutability

Introduction to How to Write an Open Source JavaScript Library

Setting up GitHub

Configuring npm and creating a package.json

Creating the library and adding dependencies

Pushing to GitHub

Publishing to npm

Releasing a version to GitHub

Releasing a new version to npm

Publishing a beta version

Setting up Unit Testing with Mocha and Chai

Unit Testing with Mocha and Chai

Linting JavaScript with ESLint

Array.prototype.reduce in JavaScript by example

Automating Releases with semantic-release

Writing conventional commits with commitizen

Optimizing Javascript for Chrome and Node.js

P

Installing and Writing a Default Task with Gulp

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

"Private" Variables with Closures and Factory Functions

P

Committing a new feature with commitizen

Automatically Releasing with TravisCI

Automatically running tests before commits with ghooks

Adding code coverage recording with Istanbul

Adding code coverage checking

Add code coverage reporting

Adding badges to your README

Adding ES6 Support

Adding ES6 Support to Tests using Mocha and Babel

Limit Built Branches on Travis

Gulp and Browserify - Initial Setup

Gulp and Browserify - Hooking up Watchify

P

Gulp and Browserify - Adding Live Reload with Browsersync

Gulp and Browserify - Adding Babel & Source Maps

P

An Introduction to JSPM (JavaScript Package Manager)

P

Use Concat to Add Values to an Array

Combine Values of an Array into a String with Join

P

Check if a Value is in an Array with indexOf

P

Create a Shallow Copy of an Array with Slice

P

Understanding function bind() in JavaScript

P

Using JSHint for Linting with Gulp

Manage Application State with Immutable.js

Creating an Immutable Object Graph with Immutable.js Map()

P

Modifying an Immutable.js Map()

P

Querying an Immutable.js Map()

P

Iterating Over an Immutable.js Map()

P

Working with Subsets of an Immutable.js Map()

P

Equality Checking with .is() and More

P

Using fromJS() to Convert Plain JavaScript Objects into Immutable Data

P

Differences between the Immutable.js Map() and List()

P

Exploring Sequences and Range() in Immutable.js

P

Converting Immutable.js Structures to Javascript and other Immutable Types

P

Simple Undo/Redo with Immutable.js Data Structures

P

Maintaining Order in Immutable.js Objects

P

Transforming Immutable Data with Reduce

P

Lightning Fast Immutable.js Equality Checks with Hash Codes

P

Immutable.Record() as data models

P

Transform an array into a single value using reduce

Reduce an array into a single object

JSPM - Loading CSS with JSPM Plugins

P

Use reduce to filter and map over large datasets

Learn how to use the optional reduce arguments

P

Avoid common mistakes when working with reduce

P

Learn to flatten and flatmap arrays with reduce

P

Sort an Array Alphabetically or Numerically

P

Intro to the Web Audio API

Chaining Web Audio Nodes

Intro to Recursion - The Problem

Intro to Recursion - The Solution

Redux: The Single Immutable State Tree

Redux: Describing State Changes with Actions

Redux: Pure and Impure Functions

Redux: The Reducer Function

Redux: Writing a Counter Reducer with Tests

Redux: Store Methods: getState(), dispatch(), and subscribe()

Redux: Implementing Store from Scratch

Redux: React Counter Example

Redux: Avoiding Array Mutations with concat(), slice(), and ...spread

Redux: Avoiding Object Mutations with Object.assign() and ...spread

Redux: Writing a Todo List Reducer (Adding a Todo)

Redux: Writing a Todo List Reducer (Toggling a Todo)

Redux: Reducer Composition with Arrays

Redux: Reducer Composition with Objects

Redux: Reducer Composition with combineReducers()

Redux: Implementing combineReducers() from Scratch

Redux: React Todo List Example (Adding a Todo)

Redux: React Todo List Example (Toggling a Todo)

Redux: React Todo List Example (Filtering Todos)

Redux: Extracting Presentational Components (Todo, TodoList)

Redux: Extracting Presentational Components (AddTodo, Footer, FilterLink)

Redux: Extracting Container Components (FilterLink)

Redux: Extracting Container Components (VisibleTodoList, AddTodo)

Redux: Passing the Store Down Explicitly via Props

Redux: Passing the Store Down Implicitly via Context

Redux: Passing the Store Down with <Provider> from React Redux

Redux: Generating Containers with connect() from React Redux (AddTodo)

Redux: Generating Containers with connect() from React Redux (VisibleTodoList)

Redux: Generating Containers with connect() from React Redux (FooterLink)

Redux: Extracting Action Creators

What is JavaScript Function Currying?

Intro to Recursion - Refactoring to a Pure Function

Scrape an HTML Table with split, map, and reduce

P

Web Audio: Playing Back Audio Files

Bundling Your JavaScript Files with Gulp

Precompiling Your LESS Files with Gulp

Filter an Array with Truthy Values

Create a Custom Element using Polymer

Style Custom Elements in Polymer

P

Use Lifecycle Callbacks On Custom Polymer Elements

P

Extend Native HTML Elements with Polymer

P

Understand Declared Property Basics in Polymer

P

Data Bind Two Polymer Elements

P

Observe Property Changes on a Custom Polymer Element

P

Create Event Listeners in Polymer Elements

P

Execute Custom Events in Polymer

P

Iterate over a Collection with Polymer's dom-repeate

P

4 common ways to get a substring from a string in JavaScript

P

Web Audio API: The Delay Node

Intro to Recursion - Detecting an Infinite Loop

P

The JSON.parse API

P

Use Some as a Ternary Operator or Conditional

P

Compose functions with reduce

P

Safely inspect nested objects with Reduce

P

How to use JavaScript's String.replace

P

Get started with regular expressions in javascript

Find plain text patterns using regular expressions

P

Use regular expressions to find repeated patterns

P

Use character classes in regular expressions

P

Use shorthand regular expression character classes

P

Create capture groups in regular expressions

P

Use lookaheads in regular expressions

P

Use regular expression word boundaries

P

Use backreferences in regular expressions

P

Find patterns at the start and end of lines with line anchors in regular expressions

P

JavaScript's Call Stack

The JSON.stringify API

Redirect the browser using JavaScript

Introduction to GitHub

Exploring GitHub

Exploring a Repository

How to install Git SCM

How to authenticate with GitHub using SSH

Identifying How to Contribute to an Open Source Project on GitHub

How to Fork and Clone a GitHub Repository

Setting up the project locally

How to create a Pull Request on GitHub

How to Collaborate on a Pull Request on GitHub

How to update a Pull Request on GitHub

How to rebase a git Pull Request branch

How to squash multiple git commits

Getting a Pull Request Merged and Wrapping up

Refactoring tip: no empty lines inside a function

P
js tutorial about JavaScript Function Scope Basics

JavaScript Function Scope Basics

5:45 js

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

js tutorial about Advanced Function Scope

Advanced Function Scope

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

js tutorial about Basic Metaprogramming: Dynamic Method

Basic Metaprogramming: Dynamic Method

4:27 js 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.

js tutorial about Introduction to Lodash

Introduction to Lodash

1:33 js

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.

js tutorial about Editing breakpoints in Chrome devtools

Editing breakpoints in Chrome devtools

4:29 js

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.

js tutorial about Introduction to the HTML Canvas element

Introduction to the HTML Canvas element

4:55 js

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.

js tutorial about Drawing Paths - Lines and Rectangles

Drawing Paths - Lines and Rectangles

3:06 js

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

js tutorial about Drawing Paths - Curves and Arcs

Drawing Paths - Curves and Arcs

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

js tutorial about Drawing Styles on HTML5 Canvas

Drawing Styles on HTML5 Canvas

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

js tutorial about Gradient Fills on the HTML5 Canvas

Gradient Fills on the HTML5 Canvas

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

js tutorial about Get Started with LeafletJS Mapping

Get Started with LeafletJS Mapping

3:13 js

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

js tutorial about The Array forEach method

The Array forEach method

4:03 js

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.

js tutorial about The Array map method

The Array map method

3:02 js

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.

js tutorial about The Array filter method

The Array filter method

4:42 js

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.

js tutorial about Chaining the Array map and filter methods

Chaining the Array map and filter methods

3:05 js

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.

js tutorial about Create an Array concatAll method

Create an Array concatAll method

4:17 js

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.

js tutorial about Introducing the Observable

Introducing the Observable

11:59 js

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.

js tutorial about Using the map method with Observable

Using the map method with Observable

3:45 js

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

js tutorial about Simple drag and drop with Observables

Simple drag and drop with Observables

12:35 js

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.

js tutorial about Lodash: Refactoring Simple For Loops

Lodash: Refactoring Simple For Loops

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

js tutorial about Drawing Text on Canvas

Drawing Text on Canvas

6:45 js 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.

js tutorial about Intro to Webpack

Intro to Webpack

4:29 js

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.

js tutorial about Adding Shapes to Maps with Leaflet and GeoJSON

Adding Shapes to Maps with Leaflet and GeoJSON

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

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.

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