js1

Watch User Created Playlist (42)

This playlist is user created.

pro-course-rss-logo

PRO RSS Feed

Introduction to Grunt

Grunt Watch

P

Template

P

Uglify

P

External Config

P

Multitask

JavaScript Function Scope Basics

Advanced Function Scope

P

Intro to ES6 and traceur compiler

traceur compiler and Grunt

P

Array Comprehensions - NON-STANDARD

Basic Metaprogramming: Dynamic Method

P

Development Automation Tasks with Grunt

P

Concatenating Your Javascript with grunt-contrib-concat

P

Minifying your output with grunt-uglify

Cleaning your build folder with grunt-contrib-clean

P

Introduction to Lodash

Shorthand Properties in ES6

Editing breakpoints in Chrome devtools

Get Started with LeafletJS Mapping

The Array forEach method

The Array map method

Intro to Webpack

Adding Shapes to Maps with Leaflet and GeoJSON

P

Webpack Loaders, Source Maps, and ES6

P

Lodash - sortBy and sortedIndex

P

Webpack CSS, Preprocessors, and url assets

P

Introduction to apiCheck.js

P

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

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

Web APIs: Persisting browser data with window.localStorage

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

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

Unit Testing with Mocha and Chai

Setting up Unit Testing with Mocha and Chai

Publishing a beta version

Releasing a new version to npm

Linting JavaScript with ESLint

P

Gulp and Browserify - Initial Setup

Gulp and Browserify - Hooking up Watchify

P

Introduction to Grunt

3:58 js

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.

Grunt Watch

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

Template

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

Uglify

1:41 js PRO

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

External Config

3:51 js PRO

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

Multitask

1:49 js

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.

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 Intro to ES6 and traceur compiler

Intro to ES6 and traceur compiler

2:42 js

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.

js tutorial about traceur compiler and Grunt

traceur compiler and Grunt

3:30 js PRO

Build and watch ECMAscript 6 using traceur compiler and Grunt.

js tutorial about Array Comprehensions - NON-STANDARD

Array Comprehensions - NON-STANDARD

2:28 js

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

See comments.

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 Development Automation Tasks with Grunt

Development Automation Tasks with Grunt

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

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

Concatenating Your Javascript with grunt-contrib-concat

2:02 js PRO

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

js tutorial about Minifying your output with grunt-uglify

Minifying your output with grunt-uglify

2:23 js

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.

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

Cleaning your build folder with grunt-contrib-clean

2:05 js PRO

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

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 Shorthand Properties in ES6

Shorthand Properties in ES6

1:01 js

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

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

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 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 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 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 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 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 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 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 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 Gulp and Browserify - Initial Setup

Gulp and Browserify - Initial Setup

2:21 js

Let's look at the basics of setting up Gulp and Browserify. Creating a Gulp task from scratch, we'll cover how to utilise the Browserify API to generate a single bundle.js file, catch and log any errors that occur in the compilation process, transform the stream into a format that can be consumed by gulp.dest and finish by writing the bundle to a dist directory.

js tutorial about Gulp and Browserify - Hooking up Watchify

Gulp and Browserify - Hooking up Watchify

3:31 js PRO

Beginning with a single Gulp task capable of generating a one-time Browserify bundle, we enable file-watching and incremental rebuilds by incorporating Watchify. We add a second task watch & refactor our initial code to enable the bulk of it to be re-used. We’ll look at exactly how to ‘wire’ these tools together and how the relationship between Watchify & Browserify can manifest into a seriously efficient workflow.

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