[_done20160226] js

Watch User Created Playlist (94)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Create a "Hello World" app using Electron

Use the Exponentiation Operator in JavaScript

P

Check if an array contains an item using Array.prototype.includes

P

Convert a callback to a promise

P

Identify and Deal with NaN in JavaScript

P

Format console.log with CSS and String Template Tags

P

Create Streams From Iterables With Most.js

P

Public Class Fields with React Components

P

Use ES6 Proxies

P

Create Streams From Single Values With Most.js

P

Combine Objects with Object.assign and Lodash merge

P

Set up a native app project with the NativeScript CLI

P

Create a list with nested reduce functions in ImmutableJS

P

Updating nested values with ImmutableJS

P

Partial Application with Function.bind

P

Dot Product in JavaScript

P

Calculate a sum using reduce in ImmutableJS

P

Yarn: A JavaScript Package Manager

P

Get JSON data from an API using fetch

P

Safer property access with Lodash's 'get' method

P

Manipulate the DOM with the classList API

P

Use Jest's Snapshot Testing Feature

P

Use Jest's Interactive Watch Mode

P

Track project code coverage with Jest

P

Add Babel Integration with Jest

P

Test JavaScript with Jest

P

Make Canvas Responsive to Pixel Ratio

P

Primitive Types in Flow

P

Use the Webpack Dashboard to Monitor Webpack Operations

P

Introduction to drawing with p5js

P

Using GraphQL's GraphiQL Tool

P

Up and Running with Facebook Flow for Typed JavaScript

P

Getting Started with Redux Dev Tools

P

Refactoring tip: no empty lines inside a function

P

Redirect the browser using JavaScript

P

The JSON.stringify API

P

JavaScript's Call Stack

P

How to use JavaScript's String.replace

P

The JSON.parse API

P

Web Audio API: The Delay Node

P

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

P

Precompiling Your LESS Files with Gulp

P

Bundling Your JavaScript Files with Gulp

P

Web Audio: Playing Back Audio Files

P

Scrape an HTML Table with split, map, and reduce

P

What is JavaScript Function Currying?

P

Chaining Web Audio Nodes

P

Intro to the Web Audio API

P

JSPM - Loading CSS with JSPM Plugins

P

Using JSHint for Linting with Gulp

P

Understanding function bind() in JavaScript

P

An Introduction to JSPM (JavaScript Package Manager)

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

"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

Array.prototype.reduce in JavaScript by example

P

Linting JavaScript with ESLint

P

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

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

The Factory Pattern for Javascript Modules

P

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

P

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

P

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

P

Introduction to apiCheck.js

P

Interactive Leaflet Maps with GeoJSON data

P

Webpack CSS, Preprocessors, and url assets

P

Lodash - sortBy and sortedIndex

P

Webpack Loaders, Source Maps, and ES6

P

Adding Shapes to Maps with Leaflet and GeoJSON

P

Intro to Webpack

P

Lodash: Refactoring Simple For Loops

P

Get Started with LeafletJS Mapping

P

Editing breakpoints in Chrome devtools

P

Introduction to Lodash

P

Basic Metaprogramming: Dynamic Method

P

Array Comprehensions - NON-STANDARD

P

traceur compiler and Grunt

P

Intro to ES6 and traceur compiler

P

Advanced Function Scope

P

JavaScript Function Scope Basics

P
electron tutorial about Create a "Hello World" app using Electron

Create a "Hello World" app using Electron

2:18 electron

Take the first step in learning how to create native desktop applications with Electron. We'll set up a package.json, create an npm start script to launch our app in development, and create a browser window and load a local HTML file into it.

An important concept to understand about Electron is it's multi-process architecture. The main process creates web pages by creating BrowserWindow instances, manages application lifecycle events, and more. Each BrowserWindow instance runs the web page in its own renderer process.

javascript tutorial about Use the Exponentiation Operator in JavaScript

Use the Exponentiation Operator in JavaScript

3:30 javascript PRO

ES2016 introduced the exponentiation operator ** to JavaScript. This lesson shows how it works and how you can use it as a replacement for the Math.pow function.

javascript tutorial about Check if an array contains an item using Array.prototype.includes

Check if an array contains an item using Array.prototype.includes

1:35 javascript PRO

We often want to check if an array includes a specific item. It's been common to do this with the Array.prototype.indexOf method, but now we have a simpler way: We can use the Array.prototype.includes method, which is available starting with ES2016.

javascript tutorial about Convert a callback to a promise

Convert a callback to a promise

4:45 javascript PRO

Promises are rapidly overtaking callbacks in popularity. In this lesson, I show you how to rewrite a callback using ES6 Promises. After getting a handle on the basics, we'll convert an error-first style callback to use the Resolve and Reject handlers built into Promises. If you aren't familiar with Promises, this lesson can be a great starting point by learning how to duplicate the behavior of a callback with ES6 Promises.

javascript tutorial about Identify and Deal with NaN in JavaScript

Identify and Deal with NaN in JavaScript

2:12 javascript PRO

Dealing with the special NaN value can be tricky in JavaScript. It behaves like a number and not a number at the same time. This lesson explains how to identify it using the isNaN function or the Number.isNaN method.

css tutorial about Format console.log with CSS and String Template Tags

Format console.log with CSS and String Template Tags

4:36 css PRO

The Chrome console allows you to format messages using CSS properties. This lesson walks you through the syntax of formatting your logs with css then refactoring into a template tag function to make formatting more reusable.

most tutorial about Create Streams From Iterables With Most.js

Create Streams From Iterables With Most.js

3:59 most PRO

One of the more powerful functions for creating streams in MostJS is the from function.

In this lesson, we use from to create streams from various Javascript Iterables, take a look at how to throw generator functions into the mix and, for good measure, take a sneak peek at how we can limit our streams using a function called take.

As a bonus, we see what it looks like to use Function.prototype.bind for a quick and dirty way to partially apply arguments to a function.

react tutorial about Public Class Fields with React Components

Public Class Fields with React Components

4:52 react PRO

Public Class Fields allow you to add instance properties to the class definition with the assignment operator (=). In this lesson, we'll look at their use case for simplifying event callbacks and state initialization with a React component.

javascript tutorial about Use ES6 Proxies

Use ES6 Proxies

1:32 javascript PRO

A JavaScript Proxy allows you to intercept operations performed on objects, arrays, or functions like property lookup, assignment, invocation, property deletion, and more to add custom behavior. In this lesson we look at how to intercept property lookup with the get "trap" that will allow us to get items starting from the end of the array with ease.

most tutorial about Create Streams From Single Values With Most.js

Create Streams From Single Values With Most.js

2:01 most PRO

Most provides many means for creating streams, the simplest of which is the of function. In this lesson, we demonstrate the use of of to lift a single value into a stream. We also show off the just alias of of, as well as, a common method for currying a function.

lodash tutorial about Combine Objects with Object.assign and Lodash merge

Combine Objects with Object.assign and Lodash merge

2:28 lodash PRO

Learn how to use Object.assign to combine multiple objects together. This pattern is helpful when writing libraries that have a set of default options where you want to allow a user to override specific options. You'll also learn how to use a third party library to recursively merge nested objects together.

nativescript tutorial about Set up a native app project with the NativeScript CLI

Set up a native app project with the NativeScript CLI

2:18 nativescript PRO

NativeScript is a framework that let's you build JavaScript to native applications. In this lesson, we will set up a native app using the NativeScript command-line interface. We will then take a brief look at some of the project it generates.

immutable tutorial about Create a list with nested reduce functions in ImmutableJS

Create a list with nested reduce functions in ImmutableJS

1:30 immutable PRO

ImmutableJS reduce functions can be nested to get data out of complex data structures. In this example, we will create an Immutable List from an Immutable Map that is nested inside of an Immutable List that is itself nested inside of an Immutable Map.

immutable tutorial about Updating nested values with ImmutableJS

Updating nested values with ImmutableJS

6:27 immutable PRO

The key to being productive with Immutable JS is understanding how to update values that are nested. Using setIn you can place a new value directly into an existing or new path. If you need access to the previous value before setting the new one, you can use updateIn instead. updateIn accepts the same path lookups as setIn, but gives you a callback function instead so that you can use the previous value however you wish and return an updated version.

javascript tutorial about Partial Application with Function.bind

Partial Application with Function.bind

3:24 javascript PRO

Function.bind is useful for more than locking down the this context when calling a function. This lesson shows how Function.bind can be used to make a new function with pre-specified initial arguments. This is a simple example of a functional programming technique called partial application which allows the remaining arguments to be specified when the new function is called.

javascript tutorial about Dot Product in JavaScript

Dot Product in JavaScript

11:12 javascript PRO

This lesson explores the dot product method, two ways to calculate it and some useful examples.

immutable tutorial about Calculate a sum using reduce in ImmutableJS

Calculate a sum using reduce in ImmutableJS

1:22 immutable PRO

The reduce function in ImmutableJS allows you to transform and create new data from an existing data structure. In this example, we will do some math and calculate a sum based on data in an ImmutableJS Map.

yarn tutorial about Yarn: A JavaScript Package Manager

Yarn: A JavaScript Package Manager

1:57 yarn PRO

Yarn is a new JavaScript package manager that aims to be speedy, deterministic, and secure. See how easy it is to drop yarn in where you were using npm before, and get faster, more reliable installs.

javascript tutorial about Get JSON data from an API using fetch

Get JSON data from an API using fetch

1:19 javascript PRO

We will use fetch to get JSON data from an API. fetch is available globally on the window object in the browser or via libraries in other JS environments.

lodash tutorial about Safer property access with Lodash's 'get' method

Safer property access with Lodash's 'get' method

8:36 lodash PRO

Property access in Javascript can be problematic - especially when dealing with nested Objects and Arrays. Doing it manually and in a safe manner requires tons of boilerplate inside conditionals and results in a defensive style of coding. In this lesson we look at why this is a problem & how to overcome it using the get method from the popular utility library Lodash

javascript tutorial about Manipulate the DOM with the classList API

Manipulate the DOM with the classList API

3:26 javascript PRO

Learn how to add, remove and test for CSS classes using the classList API. It's more powerful than using className and doesn't require any dependencies.

jest tutorial about Use Jest's Snapshot Testing Feature

Use Jest's Snapshot Testing Feature

3:41 jest PRO

Often when testing, you use the actual result to create your assertion and have to manually update it as you make changes to the feature. With Jest snapshot testing, you can let Jest do this part for you and write more tests and features faster and with more confidence. Let's learn about how you can use Jest snapshot testing to improve your own workflow.

jest tutorial about Use Jest's Interactive Watch Mode

Use Jest's Interactive Watch Mode

3:17 jest PRO

Jest ships with a pretty amazing interactive watch mode which you can initiate with jest --watch. Let's learn about the bits of interactivity and how this can really improve your workflow.

jest tutorial about Track project code coverage with Jest

Track project code coverage with Jest

3:07 jest PRO

Jest comes pre-packaged with the ability to track code coverage for the modules you're testing, but it takes a little extra work to make it track untested files as well. Let's look at what Jest can do for you, what you have to do yourself, and how to setup code coverage thresholds so you can work to improving the code coverage numbers for your projects.

jest tutorial about Add Babel Integration with Jest

Add Babel Integration with Jest

1:42 jest PRO

Jest will default to utilize babel when your node_modules contains babel-jest. Depending on your environment this may already be the case! In this quick lesson, find out why that is and how to ensure that continues to work.

jest tutorial about Test JavaScript with Jest

Test JavaScript with Jest

4:04 jest PRO

Let's learn how to unit test your JavaScript with Jest, a JavaScript unit testing framework from Facebook. We'll install and optimize Jest for this project and see how quick and easy it is to get things going with Jest.

javascript tutorial about Make Canvas Responsive to Pixel Ratio

Make Canvas Responsive to Pixel Ratio

1:06 javascript PRO

Canvas is great for high performance graphics rendering but by default the results look blocky on phones tablets and laptops with high pixel density or Retina displays. By using canvas width and height attributes and style props we can use window.devicePixelRatio to create a canvas that is responsive to pixel ratio.

flow tutorial about Primitive Types in Flow

Primitive Types in Flow

3:44 flow PRO

We'll go over some of the built-in types in Flow and how to add them to our projects by adding type annotations to our variables in JavaScript. We'll also learn about type mismatch errors when we give a variable a value that doesn't match its type annotation and how to fix it.

webpack tutorial about Use the Webpack Dashboard to Monitor Webpack Operations

Use the Webpack Dashboard to Monitor Webpack Operations

4:59 webpack PRO

Learn how to use the new Webpack Dashboard from Formidable Labs to display a pretty, useful output for monitoring the status of your webpack builds. This command line tool replaces the frequently unhelpful large text dump that webpack generates with a pretty user interface that breaks out useful information and presents it in a way that's easy to understand at a glance.

p5 tutorial about Introduction to drawing with p5js

Introduction to drawing with p5js

4:10 p5 PRO

In this lesson we look at using color and the basic drawing methods of p5js, and how they can be combined to create a simple graphic on the canvas.

graphql tutorial about Using GraphQL's GraphiQL Tool

Using GraphQL's GraphiQL Tool

6:07 graphql PRO

We'll learn how to use GraphQL's GraphiQL tool as an IDE for writing GraphQL queries, covering how to write a query, leverage query variables, perform specific operations, and also how to use the Documentation pane to explore an existing GraphQL schema.

flow tutorial about Up and Running with Facebook Flow for Typed JavaScript

Up and Running with Facebook Flow for Typed JavaScript

2:11 flow PRO

Let's learn how to set up Facebook's Flow inside of a project and write a simple typecheck task that will let us run Flow against any files in our codebase.

redux tutorial about Getting Started with Redux Dev Tools

Getting Started with Redux Dev Tools

6:04 redux PRO

The Redux DevTools let us wire up our Redux app to a time-traveling debugger. This can help us debug, test, and review the state of our application in a simple history that can be "bookmarked" and scrubbed through. In this lesson, we wire up the Redux DevTools into our app, and walk through the different "monitors" and options available.

More information can be found on the official Redux DevTools GitHub page: https://github.com/gaearon/redux-devtools

javascript tutorial about Refactoring tip: no empty lines inside a function

Refactoring tip: no empty lines inside a function

5:00 javascript PRO

To keep code elegant and readable, this lesson presents a refactoring technique consisting of two rules: (1) Don't have empty lines in a function, (2) keep the function short, with at most 6 or 8 statements. See how this can help keep each function focused on one responsibility.

javascript tutorial about Redirect the browser using JavaScript

Redirect the browser using JavaScript

2:13 javascript PRO

There are two common ways to redirect the browser in JavaScript. Both use window.location but they differ in how they interact with Session History (and hence, the browser's back button). In this lesson, you'll learn how they're different and how to use each of them.

javascript tutorial about The JSON.stringify API

The JSON.stringify API

8:26 javascript PRO

JSON (JavaScript Object Notation) is a standard method to serialize JavaScript objects and is commonly used to transfer data from the server to the browser. The browser has a JSON API that allows you to serialize a JavaScript object or array into a JSON string. This API allows you to customize the serialization very specifically as well.

javascript tutorial about JavaScript's Call Stack

JavaScript's Call Stack

3:45 javascript PRO

JavaScript has a concurrency model based on an "event loop". Yet, we know that JavaScript is single-threaded, which means only one task can happen at a time. To understand how JavaScript has a concurrent model yet is single threaded, we'll take a look at how the browser is working to interpret your JavaScript.

Specifically, we'll start by looking at the Stack implemented by browser engines (e.g. V8 or SpiderMonkey). The JavaScript engines use the call stack to keep track of what functions are running -- a function is added to a stack when the engine reaches a function that needs to be executed, and it cleared from the stack when the function returns.

javascript tutorial about How to use JavaScript's String.replace

How to use JavaScript's String.replace

5:26 javascript PRO

In JavaScript, you can change the content of a string using the replace method. This method signature is overloaded with a bunch of different ways to do string replacement in JavaScript. This lesson covers the entire API (including an interesting DSL for the replacement string).

javascript tutorial about The JSON.parse API

The JSON.parse API

3:35 javascript PRO

JSON (JavaScript Object Notation) is a standard method to serialize JavaScript objects and is commonly used to transfer data from the server to the browser. The browser has a JSON API that allows you to parse the JSON string into a JavaScript object. This API allows you to customize the parsing behavior very specifically as well.

javascript tutorial about Web Audio API: The Delay Node

Web Audio API: The Delay Node

3:51 javascript PRO

In this lesson, we cover the delay node, creating an echo effect.

javascript tutorial about 4 common ways to get a substring from a string in JavaScript

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

2:38 javascript PRO

There are four common ways to get a substring from a string in JavaScript, substring, substr, slice, and split + join. In this lesson you'll learn what the API to each of these methods is and how they compare.

css tutorial about Precompiling Your LESS Files with Gulp

Precompiling Your LESS Files with Gulp

2:40 css PRO

We will look at precompiling your LESS files using Gulp, Gulp-Concat, and Gulp-Less

gulp tutorial about Bundling Your JavaScript Files with Gulp

Bundling Your JavaScript Files with Gulp

3:31 gulp PRO

We will look at bundling your JavaScript files using Gulp, Gulp-Concat, and Gulp-Uglify

javascript tutorial about Web Audio: Playing Back Audio Files

Web Audio: Playing Back Audio Files

4:59 javascript PRO

In this lesson we cover how to load external audio files, such as mp3s, and play them back with the web audio api, including altering playback speed, and look at some of the parameters to the start method.

javascript tutorial about Scrape an HTML Table with split, map, and reduce

Scrape an HTML Table with split, map, and reduce

8:31 javascript PRO

This lesson teaches about the common need of grabbing information from an HTML table and converting it into plain JavaScript objects that you can use for your own needs.

javascript tutorial about What is JavaScript Function Currying?

What is JavaScript Function Currying?

5:34 javascript PRO

Currying is a core concept of functional programming and a useful tool for any developer's toolbelt. In this lesson, John walks through the definition of currying and its practical usage.

javascript tutorial about Chaining Web Audio Nodes

Chaining Web Audio Nodes

6:27 javascript PRO

In this lesson, we learn about a couple of new types of nodes and see how to chain multiple nodes together to create various special effects.

javascript tutorial about Intro to the Web Audio API

Intro to the Web Audio API

4:34 javascript PRO

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.

css tutorial about JSPM - Loading CSS with JSPM Plugins

JSPM - Loading CSS with JSPM Plugins

2:22 css 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.

javascript tutorial about Using JSHint for Linting with Gulp

Using JSHint for Linting with Gulp

6:01 javascript PRO

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

javascript tutorial about Understanding function bind() in JavaScript

Understanding function bind() in JavaScript

3:03 javascript 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.

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

An Introduction to JSPM (JavaScript Package Manager)

3:09 jspm 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.

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

Gulp and Browserify - Adding Babel & Source Maps

4:30 gulp 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.

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

Gulp and Browserify - Adding Live Reload with Browsersync

3:08 browserify 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.

browserify tutorial about Gulp and Browserify - Hooking up Watchify

Gulp and Browserify - Hooking up Watchify

3:31 browserify 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.

gulp tutorial about Gulp and Browserify - Initial Setup

Gulp and Browserify - Initial Setup

2:21 gulp 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.

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

"Private" Variables with Closures and Factory Functions

3:01 javascript 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.

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

gulp tutorial about Installing and Writing a Default Task with Gulp

Installing and Writing a Default Task with Gulp

1:39 gulp PRO

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

javascript tutorial about Optimizing Javascript for Chrome and Node.js

Optimizing Javascript for Chrome and Node.js

7:40 javascript 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.

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

Array.prototype.reduce in JavaScript by example

4:49 javascript 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
eslint tutorial about Linting JavaScript with ESLint

Linting JavaScript with ESLint

3:08 eslint 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.

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

Immutable.js: Introduction - Easing the Pains of Mutability

3:22 immutable 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.

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

The "this" keyword: The new and window Binding

3:09 javascript 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.

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

NW.js and Webpack: A match made in heaven

4:51 nwjs PRO

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

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

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

3:07 babel 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.

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

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

3:24 javascript 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

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

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

6:47 chrome-devtools 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.

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

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

4:32 javascript 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.

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

Web APIs: Persisting browser data with window.localStorage

4:24 javascript 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.

javascript tutorial about Hoisting in JavaScript

Hoisting in JavaScript

3:39 javascript PRO

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

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

NW.js Basics: Overview of the Window and Manifest

3:08 javascript 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."

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

The "this" keyword: Introduction and Implicit Binding

5:58 javascript 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.

javascript tutorial about The Factory Pattern for Javascript Modules

The Factory Pattern for Javascript Modules

3:15 javascript 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.

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

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

5:42 javascript PRO

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:

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

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.

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

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

javascript tutorial about Introduction to apiCheck.js

Introduction to apiCheck.js

3:52 javascript 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.

leaflet tutorial about Interactive Leaflet Maps with GeoJSON data

Interactive Leaflet Maps with GeoJSON data

3:53 leaflet PRO

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

webpack tutorial about Webpack CSS, Preprocessors, and url assets

Webpack CSS, Preprocessors, and url assets

7:09 webpack 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.

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.

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.

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.

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.

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.

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.

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

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.

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