dcm | Kevin Chisholm - Blog

May182016 by dcmNo Comments

Angular2 Http double subscribe

I working on a new Angular 2 service today that wraps the HTTP class. The purpose of this service is to intercept errors, and log the user out when the HTTP status code of the error object is 401.
Everything seemed fine until I realized that each GET and POST was firing twice. After a lovely hair-pulling session, I realized that it was the 2nd observable subscription that was causing the double network calls. Messy stuff.

If you find yourself wresting with the same problem, this Stack Overflow answer nails it. Cheers to dfsq for his great answer:

http://stackoverflow.com/questions/35397710/angular2-http-double-subscribe

May182016 by dcmNo Comments

How to Center in CSS

CSS

Centering in CSS is a giant pain in the neck. Depending on the scenario, there are multiple ways to go about it, but it’s never fun.

How to Center in CSS is a code generator that consolidates all the possible techniques and gives you the code you need for each situation. Well Done!

howtocenterincss.com

May162016 by dcmNo Comments

Share Node.js code with JSApp.us

Node.js

JSApp allows you to write Node.js code in a browser, run it, and also share it with others

One of the things that makes front-end development so much fun is that you can easily create and share code. With tools such as JSFiddle, you can create an example web page and then send that JSFiddle URL to someone. Or you can even send someone the URL of a JavaScript file that you created so that they can just run $.getScript(yourJavaScriptURL) to inject your code in their page. And there are plenty of other clever ways to share / demo front-end code without a lot of fuss.

But what about Node?

Well, it’s not always so easy with Node, right? It’s server-side code, so you can’t just send someone a URL of your Node.js file to inject in their page. Github really saves the day in this case; you can create a public repo, and then send someone the Github repo URL. But that still requires the recipient to have at least git installed on their computer. And as we all know, once something takes more than 2 clicks, you start to lose your audience. That said, anyone with a reasonable attention span and a genuine interest in your code will follow the few clicks needed to clone your repo and run your code, but for quick little snippets, it sill feels like overkill sometimes.

For example, I like to write blog posts here about Node. In some cases, it does make sense to create a Github repo, especially if you have to leverage package.json, and the app requires file access, etc. But what about little examples? Just 10-20 lines of code to demonstrate a concept? Or even a simple working example?

Enter JS App!

When you navigate to jsapp.us, you immediately see some sample Node.js code. You can delete it and write your own. Then, you simply click “test” in the sidebar (or CTRL + b), and a new browser window opens with your Node.js code running!

If you create a profile (free), you can save your code and share it with others. This is one of the most clever things I’ve seen in a long time. You can also go back and edit your files, re-name them, delete them. Really fun stuff.

If you need to create a quickie Node.js app and a Github repo would be overkill, JSApp might be just the tool you need. It’s been a while since I was this impressed but something I stumbled upon.

Bravo!

May202015 by dcmNo Comments

What are the Five Ways to Create an Angular Service?

Angular Services

There is a lot of confusion over the difference between the angular’s factory, service and provider methods. This article explains the different ways that an Angular service can be created.

The official Angular 1.4.0 documentation page describes services as: “…substitutable objects that are wired together using dependency injection (DI)” Stating: “You can use services to organize and share code across your app.” While a bit dry, I think this is actually a perfect description. I think that many who are new to Angular are confused about which of the many methods available should be used when creating a service. Fortunately, the answers are fairly simple and straightforward.

Five Ways to Create an Angular Service

The angular.value method

The value method, one the most overlooked approaches, is most commonly used to turn a global into an injectable Angular service. While the approach is simple, the application is powerful: the value of your service is testable and can be shared across your application.

Example # 1A

var app = angular.module('myApp', []);

app.value(“speed”, 100);

var app = angular.module('myApp', []);

app.value(“speed”, 100);

Example # 1B

var app = angular.module('myApp', []);

app.value(“teamMember”,{title: ‘Project Manager’});

var app = angular.module('myApp', []);

app.value(“teamMember”,{title: ‘Project Manager’});

Examples 1A and 1B use the exact same syntax when creating an Angular service. The only difference is their value. Example # 1A’s “speed” service is a primitive: the number 100. Example # 1B’s value is an object with a “title” property.

The angular.constant method

This works the same as the angular.value method. The difference is that it is available during the configuration phase of your Angular application. Also, the value of a this constant can never be changed.

Example # 2

var app = angular.module('myApp', []);

app.constant(“MAX_ITERATIONS”, 5);

var app = angular.module('myApp', []);

app.constant(“MAX_ITERATIONS”, 5);

The angular.factory method

The angular.factory method takes two arguments: a string and a function. The string represents the name of the service, which will be used to gain access to this service (e.g. to inject this service into a controller as a dependency). The anonymous function that you provide as the second argument provides the actual implementation. When you register your service, Angular will execute this function.

The only difference between angular.factory and angular.service is that the callback function you provide with the service is instantiated. With the factory method, it is executed.

Its return value is cached and will be shared with any component of your application that injects the service. It is important to note that this function will only be executed once.

This is the scenario most are thinking of when they intend to create an Angular service, and probably the most common approach.

Example # 3

var app = angular.module('myApp', []);

myApp.factory('myService', function() {
  return {
    sayHello: function() {
      return "Hello"
    }
  };
});

var app = angular.module('myApp', []);

myApp.factory('myService', function() {

return {

sayHello: function() {

return "Hello"

}

};

});

In Example # 3, we create a service named “myService”. Any component that lists this service as a dependency will receive the object that you see returned. This object has one method: “sayHello”.

The angular.service Method

This approach is similar to the angular.factory method with one big exception: the function that you provide is treated as a constructor and is instantiated. It is important to note that this function is instantiated only once and every component that injects your service as a dependency shares the same exact cached object that this instantiation returns.

Example # 4

var app = angular.module('myApp', []);

app.service('myService', function() {
  this.sayHello = function() {
    return "Hello"
  };
});

var app = angular.module('myApp', []);

app.service('myService', function() {

this.sayHello = function() {

return "Hello"

};

});

Example # 4 is very similar to Example # 3, except that the latter uses the JavaScript “this” keyword when defining the properties and methods of the object that the service returns. The reason is: the function provided when registering the service is instantiated (i.e. treated as a constructor), not just executed.

The angular.provider method

This approach is the most complex of the five. The angular.provider method is actually used under the hood by all four of the other service registration approache. While this approach is more verbose, it provides a powerful feature that the others do not: the service you are registering is available to your application during its configuration phase. This is useful when creating a service that will be shared across multiple applications and needs to be configured in order to work properly.

When using angular.provider, there are two important details to keep in mind:

The callback function that you pass to the angular.provider method will be treated as a constructor – This means that the callback will be instantiated for each application that it is registered with, and its return value will be shared by all components that inject that service.
The callback function that you pass to the angular.provider method must have a $get method – When you inject a service into a component that was created using the provider method, Angular will call that services’ $get method to retrieve the object to inject.

Example # 5

var app = angular.module('myApp', []);

app.provider('helloWorld', function() {
  this.name = 'Default';

  this.$get = function() {
    var name = this.name;
    return {
      sayHello: function() {
        return "Hello, " + name + "!"
      }
    }
  };

  this.setName = function(name) {
    this.name = name;
  };
});

app.config(function(helloWorldProvider){
  helloWorldProvider.setName('World');
});

var app = angular.module('myApp', []);

app.provider('helloWorld', function() {

this.name = 'Default';

this.$get = function() {

var name = this.name;

return {

sayHello: function() {

return "Hello, " + name + "!"

}

};

this.setName = function(name) {

this.name = name;

};

});

app.config(function(helloWorldProvider){

helloWorldProvider.setName('World');

});

In Example # 5, we have created an angular service named “helloWorld”. This service is available during the configuration phase of your application. After registering the service, we call the app.config method, passing the “helloWorld” service as an argument to the anonymous callback function. Inside of that callback, we use the services “setName” method to set the value of its “name” property. We could use the “helloWorld” service in a different application and set that “name” value to something different, as needed.

Summary

Most of the time, the angular.factory method is the approach that is desired / used. This does not mean it is the “right” way to create an Angular service. The approach you take should be driven by the problem you are looking to solve. angular.value and angular.constant are often helpful when you need to share a simple value across your application (keeping in mind that the value returned by angular.constant cannot be changed). The angular.service method is helpful when you want your service to be instantiated, and the angular.provider method provides a way to configure your service before any component gains access to it.

Helpful Links for Understanding the Different Ways to Create an Angular Service

https://docs.angularjs.org/guide/services

http://blog.pluralsight.com/angularjs-step-by-step-services

https://blog.codecentric.de/en/2015/03/five-ways-to-write-better-angular-services/

May132015 by dcmNo Comments

Getting Started with Gulp.js – Creating Multiple Tasks

Gulp.js

Learn how to create multiple Gulp.s tasks

In the article: “Getting Started with Gulp.js – Introduction,” I discussed the absolute basics needed to set up a Gulp.s task. In that article’s gulpfile.js, we had only one task named “default”. One of the great features of Gulp, is that it will look for a task named “default”, and execute it automatically. This is fine if you have only one task, but as soon as you have two or more, it makes sense to give each one its own name.

When you have one or more named Gulp tasks, you’ll want to execute those tasks from the default task.

Figure # 1 – The folder structure before running Gulp

File structure - before

In Example # 1, you’ll see the folder structure before running gulp. So, if you look in the BUILD folder, you’ll see two sub-folders: JS and CSS. The file main.scss will be compiled into CSS and the output will go into the BUILD/CSS folder. The file: SRC/JS/main.js will be uglified and the output will go in the BUILD/JS folder. The file SRC/COFFEE/global.coffee will be compiled and the output will also go in the BUILD/JS folder.

Example # 1 – gruntfile.js

//get references to the four modules that we need
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    coffee = require('gulp-coffee');

//create a default gulp task
gulp.task('default', function() {
    //run the sass task, the uglify task, and then run the coffee task
    gulp.start('sass', 'uglify', 'coffee');
});

//create an uglify gulp task
gulp.task('uglify', function() {
  return gulp
    .src(['src/js/**/*.js'])
    .pipe(uglify())
    .pipe(gulp.dest('build/js/')); 
});

//create a SASS gulp task
gulp.task('sass', function() {
    return gulp.src('src/sass/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('build/css/'));
});

//create a coffeescript build gulp task
gulp.task('coffee', function() {
  gulp.src('./src/coffee/**/*.coffee')
    .pipe(coffee({bare: true}))
    .pipe(gulp.dest('build/js/'))
});

//get references to the four modules that we need

var gulp = require('gulp'),

uglify = require('gulp-uglify'),

sass = require('gulp-sass'),

coffee = require('gulp-coffee');

//create a default gulp task

gulp.task('default', function() {

//run the sass task, the uglify task, and then run the coffee task

gulp.start('sass', 'uglify', 'coffee');

});

//create an uglify gulp task

gulp.task('uglify', function() {

return gulp

.src(['src/js/**/*.js'])

.pipe(uglify())

.pipe(gulp.dest('build/js/'));

});

//create a SASS gulp task

gulp.task('sass', function() {

return gulp.src('src/sass/**/*.scss')

.pipe(sass())

.pipe(gulp.dest('build/css/'));

});

//create a coffeescript build gulp task

gulp.task('coffee', function() {

gulp.src('./src/coffee/**/*.coffee')

.pipe(coffee({bare: true}))

.pipe(gulp.dest('build/js/'))

});

In Example # 1, we have the contents of gruntfile.js. You’ll notice that there are four tasks: default, uglify, sass and coffeescript. The default task is executed automatically. So that task simply executes the other three tasks.

How to Demo the Code Example

Clone this repository: https://github.com/kevinchisholm/gulp-basics-tutorial-multiple-tasks
Install node_modules with this command: npm install
Run gulp: gulp
Look in the following folder: BUILD/CSS, you will see the file: main.css
Look in the following folder: BUILD/JS, you will see the files: main.js and global.js

Figure # 2 – The folder structure after running Gulp

File structure - after

Summary

One of the key features of Gulp is the ability to have a default task. This task is always executed by default. In this article, I demonstrated how to execute one or more named Gulp tasks from within the default task. While I chose to uglify JavaScript, compile SASS and compile coffeescript, you can create Gulp tasks for any need you might have. I hope that this article has made it easy for you to understand how to run multiple Gulp tasks.

May62015 by dcmNo Comments

Getting Started with Gulp.js – Introduction

Gulp.js

Learn how to automate your front-end build process using this streaming build system

A while back, I posted an introduction to Grunt, the JavaScript task-runner. I also posted an article about the basics of concatenation and minification with Grunt. Grunt is an excellent tool, and still enjoys a large audience. That said, the most common complaint against Grunt is that its configuration-based syntax can become tedious and cryptic. In this article, I will introduce you to Gulp.js, an excellent streaming JavaScript built tool that has become quite popular in recent years. For this article, I will not discuss the details of installing Node or Gulp. There are plenty of articles available that will provide full details on that. Instead, I will provide a very gentle introduction to Gulp and how to create a simple Grunt task.

Code over configuration

Gulp’s success has to a large degree been based on the fact that it provides a powerful alternative to Grunt’s configuration-based approach. Gulp leverages actual JavaScript code in order to accomplish its tasks. With Gulp, you read files into memory, do things to the files, and then output the files from memory to a specified destination folder.

Easy Setup

Gulp is a node module. Installation and setup could not be simpler. On a very high-level, the steps needed are:

Using npm (node package manager), install Gulp
Create a file named: gulpfile.js or gulpfile.coffee (coffeescript)
Execute the following command in a terminal: gulp

That’s it!

Gulp is simple

One of the things that amazed me most when first looking into Gulp was the fact that there are only four APIs. Yep, four. But there is a great deal of power lurking beneath the hood.

gulp.task – Defines a task
gulp.src – Reads files into memory
gulp.dest – Writes files from memory to disk
gulp.watch – Watches the files defined by gulp.src for changes

Note: The official Gulp documentation states that there are four APIs, but I find it odd that the .pipe method is not counted amongst these.

A Simple Example

I think many people might wonder: “…what would I use Gulp for?” A very common task in front-end tooling is concatenation; you may have three JavaScript files and want them to be combined into one JavaScript file that will be used in your web page. In this example, we will take three JavaScript files, concatenate them, and then output one file that consists of those three files.

Where to Get the Example Code

Clone this repository: https://github.com/kevinchisholm/gulp-basics-tutorial-introduction

Example # 1A – package.json

{
  "name": "gulp-basics-tutorial-example-1",
  "version": "1.0.0",
  "devDependencies": {
    "gulp": "^3.8.11",
    "gulp-concat": "2.5.2"
  }
}

{

"name": "gulp-basics-tutorial-example-1",

"version": "1.0.0",

"devDependencies": {

"gulp": "^3.8.11",

"gulp-concat": "2.5.2"

}

In Example # 1A, we have the contents of package.json. This file tells Node that we need the following modules: gulp, and gulp-concat.

Figure # 1: Project File Structure

Project File Structure

In Figure # 1, we have the folder structure of our first example. Notice that in the SRC/JS folder there are three JavaScript files. These are the files that we will concatenate into one file. The BUILD/JS folder is empty, but that is where the final concatenated file will be written.

Now, before going any further, let’s install the node modules which our code will need. Navigate to the example-1 folder with your terminal application and then execute the following command: npm install

When running npm install, you’ll notice some activity in the console (don’t worry about the “warn” message), and then there will be a “node_modules” folder. These are the node modules specified in package.json. npm has downloaded them for us and put them in the “node_modules” folder. A detailed explanation for npm and the “node_modules” folder is beyond the scope of this article. A few google searches on either topic will yield plenty of links for further reading.

Figure # 2: Project File Structure with “node_modules” folder.

Project file structure after installing node dependencies

In Figure # 2, you’ll see that we now have a “node_modules” folder. Let’s take a look at gulpfile.js.

gulpfile.js

This is the file where the Gulp code goes. Gulp does support Coffeescript, so gulpfile.coffee is also a valid file name, but for the sake of simplicity, I will only cover the JavaScript implementation.

Example # 1B – gulpfile.js

//get references to the two modules that we need
var gulp = require('gulp'),
    concat = require('gulp-concat');

//create a default gulp task
gulp.task('default', function() {
  
  //return the file stream
  return gulp

    //read the files into memory
    .src(['src/js/file-1.js','src/js/file-2.js','src/js/file-3.js'])

    //write the files from memory to disk
    .pipe(gulp.dest('build/js')); 
});

//get references to the two modules that we need

var gulp = require('gulp'),

concat = require('gulp-concat');

//create a default gulp task

gulp.task('default', function() {

//return the file stream

return gulp

//read the files into memory

.src(['src/js/file-1.js','src/js/file-2.js','src/js/file-3.js'])

//write the files from memory to disk

.pipe(gulp.dest('build/js'));

});

In Example # 1B, there are two things happening: First we create to variables, each representing a module that we need. Second, we create a gulp “task”. The gulp.task method takes two arguments: 1) a task name, which is a string, and 2) a callback function, which contains the code that defines the actual task. Here is where Gulp’s real power lies: a gulp task is driven by JavaScript code (i.e. code over configuration).

Returning a File Stream

A Gulp task always returns a file stream. This is to say that gulp will read a file into memory and you want to return that in-memory file object from your task’s callback function. In-between those two tasks, you “pipe” that file to one or more plugins that manipulate the file in some way.

gulp.src

In Example # 1B, we use the gulp.src method to read one or more files into memory. In this case, it is the three JavaScript files in our SRC/JS folder. We then chain the pipe method, passing a call to gulp.dest as an argument. The call to gulp.dest takes a string as its sole argument: the path to our output directory: BUILD/JS.

Executing the Gulp Task

In order to actually execute our Gulp task, simply type the following in your terminal: gulp

Yep, that’s it! Because our task is named “default”, we do not need to specify a task name. Gulp assumes that we want to run the “default” task, looks for it, and then executes it. Now when you look in the JS/BUILD folder, you should see three files: file-1.js, file-2.js, and file-3.js.

Figure # 3: Non-Concatenated Files in the BUILD/JS Folder.

Build output

In Figure # 3, you’ll see that there are now three files in the JS/BUILD folder.

You may be wondering why our output is three files, and not one concatenated file. This is because we did not actually concatenate the files inside of our task. In Example # 1, I wanted to demonstrate the basic flow of a Gulp task: using gulp.src to read files into memory, and then using gulp.dest to write those files from memory to disk. Now let’s update our Gulp task so that it actually concatenates the files.

Example # 2 A – Add the Contact Module to Our Gulp Task

var gulp = require('gulp'),
    concat = require('gulp-concat');

gulp.task('default', function() {
  return gulp
    .src(['src/js/file-1.js','src/js/file-2.js','src/js/file-3.js'])
    
    .pipe(gulp.dest('build/js')); 
});

//get references to the two modules that we need
var gulp = require('gulp'),
    concat = require('gulp-concat');

//create a default gulp task
gulp.task('default', function() {
  
  //return the file stream
  return gulp

    //read the files into memory
    .src(['src/js/file-1.js','src/js/file-2.js','src/js/file-3.js'])

    //pipe the file to the contact module,
    //which creates one concatenated file
    .pipe(concat('scripts-all.js'))

    //write the files from memory to disk
    .pipe(gulp.dest('build/js')); 
})

var gulp = require('gulp'),

concat = require('gulp-concat');

gulp.task('default', function() {

return gulp

.src(['src/js/file-1.js','src/js/file-2.js','src/js/file-3.js'])

.pipe(gulp.dest('build/js'));

});

//get references to the two modules that we need

var gulp = require('gulp'),

concat = require('gulp-concat');

//create a default gulp task

gulp.task('default', function() {

//return the file stream

return gulp

//read the files into memory

.src(['src/js/file-1.js','src/js/file-2.js','src/js/file-3.js'])

//pipe the file to the contact module,

//which creates one concatenated file

.pipe(concat('scripts-all.js'))

//write the files from memory to disk

.pipe(gulp.dest('build/js'));

})

In Example # 2 A, we have added a new line to our Gulp task: .pipe(concat(‘scripts-all.js’)). This line takes the in-memory files, pipes them to the concat module (which concatenates them into one file named: “scripts-all.js”), and returns that in-memory file. That’s really it. Now, navigate to the folder: “example-2” in your terminal, and then run Gulp again, so see the output: gulp

Figure # 4: Concatenated Files in the BUILD/JS Folder.

The concatenated JavaScript file

In Figure # 4, you’ll see that instead of three files, there is one file: scripts-all.js.

Example # 2 B – scripts-all.js

(function(){
  window.getLocation = function(){
    return window.location;
  };
})();
(function(){
  window.getNavigator = function(){
    return window.navigator;
  };
})();

(function(){
  window.getSearch = function(){
    return window.location.search;
  };
})();

(function(){

window.getLocation = function(){

return window.location;

};

})();

(function(){

window.getNavigator = function(){

return window.navigator;

};

})();

(function(){

window.getSearch = function(){

return window.location.search;

};

})();

Example # 2B shows the contents of scripts-all.js. The details of the actual code are not important. What matters is that by piping the three source files to the concat module, our output is now one file that consists of the contents of all three source files.

Summary

The fact that there are only four APIs is a testament to the fact that Gulp.js is a simple yet powerful tool for running JavaScript tasks. There is a strong and growing community behind Gulp with thousands of existing plugins. The beauty of Gulp is that since it is code, you can leverage plain old JavaScript to make your gulpfile as powerful and efficient as needed. You are only limited by your imagination. While the examples in this article were very simple, there is a great deal of depth to Gulp and plenty of details / features that you can look into. I hope that this article was a helpful introduction and provided the tools you need to understand Grunt and easily start implementing it in your project.

Helpful Links for Gulp.js Basics

http://gulpjs.com/

https://github.com/gulpjs/gulp

https://www.npmjs.com/package/gulp

https://github.com/gulpjs/gulp/blob/master/docs/API.md

https://github.com/gruntjs/grunt-contrib-concat

https://www.codefellows.org/blog/quick-intro-to-gulp-js

Apr152015 by dcmNo Comments

Telestream ScreenFlow – Fast and Easy Screen Capture for Mac

Videos

If you are in the business of making screencasts or training videos, consider Telestream ScreenFlow, an affordable product that is easy to use and comes with a decent array of features

I’m sure it’s pretty obvious that I like to blabber endlessly about front-end web development, especially JavaScript. Recently, I have tried to ratchet-up my JavaScript ramblings a level by adding videos to my blog posts. When planning this, I knew I would have to eventually choose a screen capture software package that would make high-quality screen casts easy (I have a very short attention span when it comes to some things).

I fumbled around a bit with Snagit and Quicktime. I even took a shot at Corel VideoStudio Pro. That was a bit of a disaster (tons and tons of features, but at the end of the day, exporting to MP4 seems to be yet a pipe-dream). I had heard a bit about Telestream ScreenFlow, so I thought I’d give it a shot.

After reading tons of reviews, I plunked-down $99 and downloaded the software. I’ll spare you the feature-by-feature rundown, and get right to the most important point: It’s simple, easy to use, and easy to export videos. That alone for me sealed the deal.

I will say that the ScreenFlow is quirky for sure, a sentiment that many reviews will echo. The good news is that you only need a few minutes with Google search in order to find the answer to most of your questions. Capturing your screen in one shot and then exporting to MP4, is very easy. When you want to edit your video, however, you will probably find yourself scratching your head a bit as tasks that seem to me fairly common, are buried in an odd workflow.

Summary

I’ve been using Screenflow for a few months now and could not be happier. Once you get used to it, things move pretty quickly. They also sell a few add-ons which enable you to take things to the next level with regard to professional-looking screencasts or training videos. In short, if you are looking for a screen-capture software package for your Mac, and have fairly simple production needs, I highly recommend Screenflow from Telestream.

Helpful Links for Telestream ScreenFlow

http://www.telestream.net/screenflow/

http://www.telestream.net/screenflow/overview.htm

http://www.telestream.net/telestream-support/screen-flow/support.htm

http://www.telestream.net/screenflow/stories.htm

Reviews

http://www.macworld.com/article/2039696/review-screenflow-4-a-great-but-quirky-video-capture-and-edit-tool.html

http://www.maclife.com/article/reviews/screenflow_4_review

http://mac.appstorm.net/reviews/video/screenflow-4-professional-screencasting-on-your-mac/

Apr82015 by dcmNo Comments

What Are the Best Links for Learning About ECMAScript 6 ?

JavaScript

Like it or not, ECMAScript 6 is coming soon to a browser near you (and what’s not to like about that?). Learning about new additions to the specification is only a few clicks away.

Being in a “feature frozen” status since August of this year, ECMAScript 6 is on its path towards becoming a part of daily life. While the speed with which each browser manufacturer will implement these features will vary, adoption is inevitable.

I won’t waste pixels discussing why ECMAScript 6 is such a big deal. I’m assuming that you are aware of some of the more well-known features and are excited about them. But understandably, it can sometimes be difficult to decide where to jump in. I’ve gone through the tons of ECMAScript 6 bookmarks that have piled-up in my Google Docs and detailed the best ones below. This is by no means an exhaustive list; I tried to limit it to articles or videos that I felt were the most well-presented.

ECMAScript 6 Introduction

ECMAScript Language Specification ECMA-262 6th Edition – DRAFT

https://people.mozilla.org/~jorendorff/es6-draft.html

It doesn’t get much drier than this. But sometimes dry is good. There are many links out there that will be more enjoyable to read (and possibly more helpful), but when you really need to drill-down on a particular topic, the specification is always a source worth considering.

ECMAScript 6 with Kit Cambridge

Kit does a really nice job here. He starts out with a history of JavaScript that is worth the price of admission alone. Instead of just regurgitating key dates and facts, he helps you understand why the ECMAScript standard has evolved the way it has (did you know that ECMAScript 4 never survived beyond “draft” status?). He then prioritizes some of the less “sexy” features such as: the Spread operator, Default parameters, the Destructuring Assignment, Symbols and Generators. This guy is pretty young, but he is incredibly smart, super-technical, and presents himself very well.

Kit Cambridge, “EcmaScript Next: The Subtleties of ES 6” at W3Conf 2013

This is technically the same exact presentation as the previous video. But I must say, just like watching a good band perform the same song on two different occasions, it is still worth watching, even if you have seen the previous video.

Announcing Understanding ECMAScript 6 | NCZOnline

http://www.nczonline.net/blog/2014/03/26/announcing-understanding-ecmascript-6/

https://leanpub.com/understandinges6/read/

https://github.com/nzakas/understandinges6

OK, the first link is actually promoting his book: “Understanding ECMAScript 6”. But I wanted to include it because Nicholas C. Zakas is a JavaScript developer who is really worth listening to. I think the intro blog post is worth a read. The second link is where you can read the current state of the book. The third link is the GitHub repository for the book, in case you want to follow his work in real-time.

Toward Modern Web Apps with ECMAScript 6 | Blog | Sencha

http://www.sencha.com/blog/toward-modern-web-apps-with-ecmascript-6/

Ariya Hidayat presents a clear and well-thought-out overview of some of ECMAScript 6’s most exciting features.

ECMAScript 6 Features

While there is much to shout about, it can also be a bit overwhelming. Here are the ECMAScript 6 features you are most likely to experiment with, or be asked about in an interview.

Arrow Functions

Functions have gotten a significant injection of new functionality: Greater control over lexical “this” binding and streamlined syntax.

Arrow functions – JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

ECMAScript Wiki – Arrow Functions

http://tc39wiki.calculist.org/es6/arrow-functions/

Understanding ECMAScript 6 arrow functions | NCZOnline

http://www.nczonline.net/blog/2013/09/10/understanding-ecmascript-6-arrow-functions/

Kevin Chisholm – Blog

http://blog.kevinchisholm.com/javascript/ecmascript-6/getting-started-with-ecmascript-6-arrow-functions-basic-syntax/

http://blog.kevinchisholm.com/javascript/ecmascript-6/getting-started-with-ecmascript-6-arrow-functions-parameters/

http://blog.kevinchisholm.com/javascript/ecmascript-6/getting-started-with-ecmascript-6-arrow-functions-the-this-keyword/

Block-Level Scope

Learn about how the new “let” and “const” keywords break the “functions-only” paradigm with regard to managing scope.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let

http://www.sitepoint.com/preparing-ecmascript-6-let-const/

Rest parameters

If you’ve ever written a function that needs to take a variable number of arguments, you’ve probably used the Array.prototype.slice.call approach to convert the arguments object into a true array, or designed the function so that it expects an array. ECMAScript 6’s Rest Parameters removes this pain and makes for more concise code.

Rest parameters – JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters

Default and Rest Parameters in ES6

http://www.htmlxprs.com/post/24/es6-functions-default-and-rest-parameters

ECMAScript 6 and Rest Parameter

http://ariya.ofilabs.com/2013/03/es6-and-rest-parameter.html

Spread Operator

A yang to the Rest Parameter’s ying, the Spread Operator allows you to pass the elements of an array to a function as individual arguments in one shot, without the need to iterate that array.

Spread operator – JavaScript | MDN

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_operator

ECMAScript 6 and Spread Operator

http://ariya.ofilabs.com/2013/03/es6-and-spread-operator.html

Classes

Although constructors provide a way to implement classes JavaScript, ECMAScript 6 introduces a syntax that more closely resembles languages such as Java and PHP, not only in the way you create a class, but also in how you inherit from it.

An introduction to ES6 classes

http://javascriptplayground.com/blog/2014/07/introduction-to-es6-classes-tutorial/

Use ECMAScript 6 Today – Tuts+ Code Article

http://code.tutsplus.com/articles/use-ecmascript-6-today–net-31582#class

Apr12015 by dcmNo Comments

Getting Started with Mongo Shell Scripting – Basic CRUD Operations

MongoDB

Learn how to create a JavaScript file that executes mongo shell commands

Why Mongo Shell Scripting ?

In the article: “Getting Started With the Mongo Shell – Basic CRUD Operations“, I covered the basics needed to perform CRUD operations on a MongoDB database, using the mongo shell. All of the examples in that article were in real-time. This is perfectly acceptable, and there may be cases in which you will want to perform administrative tasks manually. But it is also possible (and more likely) that you’ll want to create a script that executes a batch of mongo shell tasks. So, since JavaScript is the language used to interact with the mongo shell, we can pass a JS file to the mongo command in a terminal. This is mongo shell scripting.

This functionality offers a great deal of potential. For example, in this article I will provide a very simple demonstration that performs basic CRUD operations (“Create, Read, Update, Delete”).

An important note about the following examples:

If you want to run these examples locally, you have two options:

Clone this GitHub repo and follow the instructions: https://github.com/kevinchisholm/mongo-shell-scripting-basic-crud-operations
Scroll down to the section: “How to Demo“, and then follow the instructions

Creating a Database

Create the “madMen” database – Example # 1

//create the madMen database and connect to it
var db = connect('127.0.0.1:27017/madMen'),
    allMadMen = null;

//create the madMen database and connect to it

var db = connect('127.0.0.1:27017/madMen'),

allMadMen = null;

In Example # 1, we create the “madMen” database and establish a connection to it. The “allMadMen” variable is set to null for now, but will indeed be used in the next example.

Adding Data to / Reading Data from a Database

Create the “names” collection – Example # 2

//create the names collection and add documents to it
db.names.insert({'name' : 'Don Draper'});
db.names.insert({'name' : 'Peter Campbell'});
db.names.insert({'name' : 'Betty Draper'});
db.names.insert({'name' : 'Joan Harris'});

//set a reference to all documents in the database
allMadMen = db.names.find();

//iterate the names collection and output each document
while (allMadMen.hasNext()) {
   printjson(allMadMen.next());
}

//create the names collection and add documents to it

db.names.insert({'name' : 'Don Draper'});

db.names.insert({'name' : 'Peter Campbell'});

db.names.insert({'name' : 'Betty Draper'});

db.names.insert({'name' : 'Joan Harris'});

//set a reference to all documents in the database

allMadMen = db.names.find();

//iterate the names collection and output each document

while (allMadMen.hasNext()) {

printjson(allMadMen.next());

}

In Example # 2, we create the “names” collection and then add four documents to it. We then use the “allMadMen” variable to store a reference to the names collection, and then iterate it. The purpose of the iteration is to allow you to see in your terminal that the madMen database has actually been populated with documents. Example # 2 demonstrates both the “Create” part of our CRUD operations, and the “Read” part as well.

Updating A Collection Document

Let’s make a change to “Donald Draper” – Example # 3

//search for the document whose name property is: "Don Draper"
db.names.find().forEach( function(thisDoc) {
  if(thisDoc.name === 'Don Draper'){
    //update the record that contains "Donald Draper" and change it to "Dick Whitman"
    db.names.update( { "_id" : thisDoc._id }, { "name": "Dick Whitman" } );
  }; 
});

//search for the document whose name property is: "Don Draper"

db.names.find().forEach( function(thisDoc) {

if(thisDoc.name === 'Don Draper'){

//update the record that contains "Donald Draper" and change it to "Dick Whitman"

db.names.update( { "_id" : thisDoc._id }, { "name": "Dick Whitman" } );

};

});

Example # 3 is the “U” in our CRUD operation; in other words: “Update”. Here we use the forEach method of the names collection to iterate and find the document whose “name” property is set to: “Don Draper”. So, once we find that document, we update its “name” property to: “Dick Whitman”.

Deleting A Collection Document

Let’s delete “Dick Whitman.” – Example # 4

db.names.find().forEach( function(thisDoc) {
  if(thisDoc.name === 'Dick Whitman'){
    //remove the record that contains "Dick Whitman"
    db.names.remove({ "_id" : thisDoc._id });
  }; 
});

db.names.find().forEach( function(thisDoc) {

if(thisDoc.name === 'Dick Whitman'){

//remove the record that contains "Dick Whitman"

db.names.remove({ "_id" : thisDoc._id });

};

});

In Example # 4, we delete the document whose “name” property is set to: “Dick Whitman.”

Dropping a Database

Drop the “madMen” database – Example # 5

//drop the database

1	//drop the database

db.dropDatabase();

In Example # 5, we drop the “madMen” database.

The Entire App – Example # 6A

//create the madMen database and connect to it
var db = connect('127.0.0.1:27017/madMen'),
    allMadMen = null;

print('* Database created');

//create the names collection and add documents to it
db.names.insert({'name' : 'Don Draper'});
db.names.insert({'name' : 'Peter Campbell'});
db.names.insert({'name' : 'Betty Draper'});
db.names.insert({'name' : 'Joan Harris'});

print('* Documents created');

//set a reference to all documents in the database
allMadMen = db.names.find();

print('* All documents:');

//iterate the names collection and output each document
while (allMadMen.hasNext()) {
   printjson(allMadMen.next());
}

//search for the document whose name property is: "Don Draper"
db.names.find().forEach( function(thisDoc) {
  if(thisDoc.name === 'Don Draper'){
    //update the record that contains "Donald Draper" and change it to "Dick Whitman"
    db.names.update( { "_id" : thisDoc._id }, { "name": "Dick Whitman" } );

    print('* Updated document: ' + thisDoc._id);
  }; 
});

print('* All documents:');

//set a reference to all documents in the database
allMadMen = db.names.find();

//iterate the names collection and output each document
while (allMadMen.hasNext()) {
   printjson(allMadMen.next());
}


db.names.find().forEach( function(thisDoc) {
  if(thisDoc.name === 'Dick Whitman'){
    //remove the record that contains "Dick Whitman"
    db.names.remove({ "_id" : thisDoc._id });

    print('* Removed document:');

    //output the removed document as json
    printjson(thisDoc);
  }; 
});

print('* All documents ("Dick Whitman" removed):');

//set a reference to all documents in the database
allMadMen = db.names.find();

//iterate the names collection and output each document
while (allMadMen.hasNext()) {
   printjson(allMadMen.next());
}

//drop the database
db.dropDatabase();

print('* Database dropped');

//create the madMen database and connect to it

var db = connect('127.0.0.1:27017/madMen'),

allMadMen = null;

print('* Database created');

//create the names collection and add documents to it

db.names.insert({'name' : 'Don Draper'});

db.names.insert({'name' : 'Peter Campbell'});

db.names.insert({'name' : 'Betty Draper'});

db.names.insert({'name' : 'Joan Harris'});

print('* Documents created');

//set a reference to all documents in the database

allMadMen = db.names.find();

print('* All documents:');

//iterate the names collection and output each document

while (allMadMen.hasNext()) {

printjson(allMadMen.next());

}

//search for the document whose name property is: "Don Draper"

db.names.find().forEach( function(thisDoc) {

if(thisDoc.name === 'Don Draper'){

//update the record that contains "Donald Draper" and change it to "Dick Whitman"

db.names.update( { "_id" : thisDoc._id }, { "name": "Dick Whitman" } );

print('* Updated document: ' + thisDoc._id);

};

});

print('* All documents:');

//set a reference to all documents in the database

allMadMen = db.names.find();

//iterate the names collection and output each document

while (allMadMen.hasNext()) {

printjson(allMadMen.next());

}

db.names.find().forEach( function(thisDoc) {

if(thisDoc.name === 'Dick Whitman'){

//remove the record that contains "Dick Whitman"

db.names.remove({ "_id" : thisDoc._id });

print('* Removed document:');

//output the removed document as json

printjson(thisDoc);

};

});

print('* All documents ("Dick Whitman" removed):');

//set a reference to all documents in the database

allMadMen = db.names.find();

//iterate the names collection and output each document

while (allMadMen.hasNext()) {

printjson(allMadMen.next());

}

//drop the database

db.dropDatabase();

print('* Database dropped');

In Example # 6A, we have the completed example code. To demonstrate, numerous print and printjson statements have been added so that the terminal output makes a bit more sense.

The Output – Example # 6B

MongoDB shell version: 2.6.5
connecting to: test
connecting to: 127.0.0.1:27017/madMen
* Database created
* Documents created
* All documents:
{ "_id" : ObjectId("550f2939a8a5d2643f6408fb"), "name" : "Don Draper" }
{ "_id" : ObjectId("550f2939a8a5d2643f6408fc"), "name" : "Peter Campbell" }
{ "_id" : ObjectId("550f2939a8a5d2643f6408fd"), "name" : "Betty Draper" }
{ "_id" : ObjectId("550f2939a8a5d2643f6408fe"), "name" : "Joan Harris" }
* Updated document: 550f2939a8a5d2643f6408fb
* All documents:
{ "_id" : ObjectId("550f2939a8a5d2643f6408fb"), "name" : "Dick Whitman" }
{ "_id" : ObjectId("550f2939a8a5d2643f6408fc"), "name" : "Peter Campbell" }
{ "_id" : ObjectId("550f2939a8a5d2643f6408fd"), "name" : "Betty Draper" }
{ "_id" : ObjectId("550f2939a8a5d2643f6408fe"), "name" : "Joan Harris" }
* Removed document:
{ "_id" : ObjectId("550f2939a8a5d2643f6408fb"), "name" : "Dick Whitman" }
* All documents ("Dick Whitman" removed):
{ "_id" : ObjectId("550f2939a8a5d2643f6408fc"), "name" : "Peter Campbell" }
{ "_id" : ObjectId("550f2939a8a5d2643f6408fd"), "name" : "Betty Draper" }
{ "_id" : ObjectId("550f2939a8a5d2643f6408fe"), "name" : "Joan Harris" }
* Database dropped

MongoDB shell version: 2.6.5

connecting to: test

connecting to: 127.0.0.1:27017/madMen

* Database created

* Documents created

* All documents:

{ "_id" : ObjectId("550f2939a8a5d2643f6408fb"), "name" : "Don Draper" }

{ "_id" : ObjectId("550f2939a8a5d2643f6408fc"), "name" : "Peter Campbell" }

{ "_id" : ObjectId("550f2939a8a5d2643f6408fd"), "name" : "Betty Draper" }

{ "_id" : ObjectId("550f2939a8a5d2643f6408fe"), "name" : "Joan Harris" }

* Updated document: 550f2939a8a5d2643f6408fb

* All documents:

{ "_id" : ObjectId("550f2939a8a5d2643f6408fb"), "name" : "Dick Whitman" }

{ "_id" : ObjectId("550f2939a8a5d2643f6408fc"), "name" : "Peter Campbell" }

{ "_id" : ObjectId("550f2939a8a5d2643f6408fd"), "name" : "Betty Draper" }

{ "_id" : ObjectId("550f2939a8a5d2643f6408fe"), "name" : "Joan Harris" }

* Removed document:

{ "_id" : ObjectId("550f2939a8a5d2643f6408fb"), "name" : "Dick Whitman" }

* All documents ("Dick Whitman" removed):

{ "_id" : ObjectId("550f2939a8a5d2643f6408fc"), "name" : "Peter Campbell" }

{ "_id" : ObjectId("550f2939a8a5d2643f6408fd"), "name" : "Betty Draper" }

{ "_id" : ObjectId("550f2939a8a5d2643f6408fe"), "name" : "Joan Harris" }

* Database dropped

In Example # 6B, we have the terminal output from the code in Example # 6A.

How to Demo:

Make sure the MongoDB database server is running
Create a file named: “create-db.js”.
Copy the entire contents of Example # 6 to “create-db.js”
In a terminal window, execute the following command: “mongo create-db.js”

Summary

In summary, we learned how to perform basic CRUD operations on a MongoDB database by leveraging mongo shell scripting.

Helpful Links for Mongo Shell Scripting

Getting Started With the Mongo Shell – Basic CRUD Operations | Kevin Chisholm – Blog

http://docs.mongodb.org/manual/administration/scripting/

Mar252015 by dcm1 Comment

Getting Started With the Mongo Shell – Basic CRUD Operations

MongoDB

Learn how to perform CRUD operations on a MongoDB database, using the mongo shell

While it is likely that you will want to leverage MongoDB for your Node.js application, the mongo shell is an incredibly useful administrative tool that should not be overlooked. The definition provided by mongodb.org is: “The mongo shell is an interactive JavaScript shell for MongoDB, and is part of all MongoDB distributions.” It really is that straightforward: you can interact with your MongoDB database using JavaScript, in a command shell. Brilliant.

In this article I will demonstrate how to create a MongoDB database, add documents to the database, update a document, delete a document, and then delete your database. All of this will be done using a command prompt and JavaScript.

NOTE: I assume that you already have MongoDB installed globally. If you do not have MongoDB installed and need assistance with that, please see the “Installation Links” section at the end of this article.

Starting the Mongo shell

Before you can interact with a MongoDB database using the mongo shell, you’ll need to have the MongoDB database server running. In order to start the MongoDB server, execute: “mongod” in your terminal window. The output you see should be similar to this:

mongod --help for help and startup options
2015-03-22T13:09:24.130-0400 [initandlisten] MongoDB starting : pid=1562 port=27017 dbpath=/data/db 64-bit host=YOUR_MACHINE_NAME.local
2015-03-22T13:09:24.130-0400 [initandlisten] db version v2.6.5

mongod --help for help and startup options

2015-03-22T13:09:24.130-0400 [initandlisten] MongoDB starting : pid=1562 port=27017 dbpath=/data/db 64-bit host=YOUR_MACHINE_NAME.local

2015-03-22T13:09:24.130-0400 [initandlisten] db version v2.6.5

Starting the Mongo shell couldn’t be easier. Open a second terminal window, and then execute the command: “mongo”. You should see the following output in your terminal window:

MongoDB shell version: 2.6.5
connecting to: test

1 2	MongoDB shell version: 2.6.5 connecting to: test

You may be surprised to see that you are connected to “test”, but that is the default database. In order to see a list of existing databases, execute the following command:

show dbs

show dbs

You should see the following output in your terminal window:

admin (empty)

1	admin (empty)

Creating a MongoDB Database

In order to create a new database, use the “use” command. Execute the following command:

use madMen

1	use madMen

You should see the following output in your terminal window:

switched to db madMen

1	switched to db madMen

Now take a look at the existing databases again by executing the command: “show dbs”. You may be wondering why the new database “madMen” does not show up in the list of existing databases. This is because it has no data. Let’s add some data to that database.

Adding Documents to a Collection

With MongoDB, we can create collections on the fly when we add data. For example, the new database “madMen” is empty. We can add a “names” collection and insert a document into that collection all in one command.

Execute this command:

db.names.insert({'name' : 'Don Draper'});

1	db.names.insert({'name' : 'Don Draper'});

You should see the following output in your terminal:

WriteResult({ "nInserted" : 1 })

1	WriteResult({ "nInserted" : 1 })

Now, let’s take another look at the list of databases. Execute the command: “show dbs”.

You should see the following output in your terminal:

admin (empty)
madMen 0.078GB

1 2	admin (empty) madMen 0.078GB

The reason you now see the madMen database in the list is because it contains some data. Let’s add three more documents to the “names” collection. Execute the following commands:

db.names.insert({'name' : 'Pete Campbell'});
db.names.insert({'name' : 'Betty Draper'});
db.names.insert({'name' : 'Joan Harris'});

db.names.insert({'name' : 'Pete Campbell'});

db.names.insert({'name' : 'Betty Draper'});

db.names.insert({'name' : 'Joan Harris'});

If you executed the previous JavaScript, the “names” collection should now have four documents. Let’s talk about how you can view all the documents in a collection.

Iterating Over the Documents in a Collection

If you want to view all of the documents in a collection, using the mongo shell, it is at minimum, a two-step process. First, obtain a reference to the collection, and then iterate over the collection using the next() method. In the following example, we’ll create a while loop. The hasNext() method will be used as the condition of the loop, and then inside of the loop, we’ll use the next() method to get the “next” document in the collection. The return value of that method will be passed to the printJson function, which is specific to mongo.

Execute this code:

var allRecords = db.names.find();

while ( allRecords.hasNext() ) {
printjson(allRecords.next());
}

var allRecords = db.names.find();

while ( allRecords.hasNext() ) {

printjson(allRecords.next());

}

In the previous example, we set the variable “allRecords” equal to the result of “db.names.find()”. The “allRecords” variable then has a reference to all of the documents in the “names” collection. We then use a while loop to iterate over the collection. On each iteration, the next method of the allRecords variable is passed to the printjson function. The output in your terminal should be similar to this:

{ "_id" : ObjectId("550ef996bca11fc0a6df88d0"), "name" : "Don Draper" }
{ "_id" : ObjectId("550efb31ec7714832416d885"), "name" : "Pete Campbell" }
{ "_id" : ObjectId("550efb31ec7714832416d886"), "name" : "Betty Draper" }
{ "_id" : ObjectId("550efb32ec7714832416d887"), "name" : "Joan Harris" }

{ "_id" : ObjectId("550ef996bca11fc0a6df88d0"), "name" : "Don Draper" }

{ "_id" : ObjectId("550efb31ec7714832416d885"), "name" : "Pete Campbell" }

{ "_id" : ObjectId("550efb31ec7714832416d886"), "name" : "Betty Draper" }

{ "_id" : ObjectId("550efb32ec7714832416d887"), "name" : "Joan Harris" }

The values of each document’s “_id” property will differ in your terminal because these are unique IDs, generated by the instance of MongoDB. The rest of the data should be the same.

Updating a Document

Now that we have four documents in the “names” collection, let’s update one of those documents. We do this by using the “save” method of the collection object. We’ll need to pass the “_id” of the document that we want to update, as well as the new data. Let’s change “Don Draper” to “Dick Whitman”.

db.names.save({_id:ObjectId('550ef996bca11fc0a6df88d0'),"name" : "Dick Whitman" });

1	db.names.save({_id:ObjectId('550ef996bca11fc0a6df88d0'),"name" : "Dick Whitman" });

You should see the following output in your terminal:

WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 });

1	WriteResult({ "nMatched" : 1, "nUpserted" : 0, "nModified" : 1 });

Now, let’s use the while loop we created earlier to inspect all records of the “names” collection:

var allRecords = db.names.find();

while ( allRecords.hasNext() ) {
printjson(allRecords.next());
}

var allRecords = db.names.find();

while ( allRecords.hasNext() ) {

printjson(allRecords.next());

}

You should see the following output in your terminal:

{ "_id" : ObjectId("550ef996bca11fc0a6df88d0"), "name" : "Dick Whitman" }
{ "_id" : ObjectId("550efb31ec7714832416d885"), "name" : "Pete Campbell" }
{ "_id" : ObjectId("550efb31ec7714832416d886"), "name" : "Betty Draper" }
{ "_id" : ObjectId("550efb32ec7714832416d887"), "name" : "Joan Harris" }

{ "_id" : ObjectId("550ef996bca11fc0a6df88d0"), "name" : "Dick Whitman" }

{ "_id" : ObjectId("550efb31ec7714832416d885"), "name" : "Pete Campbell" }

{ "_id" : ObjectId("550efb31ec7714832416d886"), "name" : "Betty Draper" }

{ "_id" : ObjectId("550efb32ec7714832416d887"), "name" : "Joan Harris" }

As you can see, the document that contained “Don Draper” has now been changed to “Dick Whitman”.

Deleting a Document

Let’s delete the same document that we just updated. In order to do that, we’ll use the “remove” method of the collection object, passing it the “_id” of the exact document that we want to delete:

db.names.remove({_id:ObjectId('550ef996bca11fc0a6df88d0')});

1	db.names.remove({_id:ObjectId('550ef996bca11fc0a6df88d0')});

You should see the following output in your terminal:

WriteResult({ "nRemoved" : 1 })

1	WriteResult({ "nRemoved" : 1 })

Now let’s take a look at all the documents in the database again:

var allRecords = db.names.find();

while ( allRecords.hasNext() ) {
printjson(allRecords.next());
}

var allRecords = db.names.find();

while ( allRecords.hasNext() ) {

printjson(allRecords.next());

}

As you can see, the document that we deleted no longer exists.

{ "_id" : ObjectId("550efb31ec7714832416d885"), "name" : "Pete Campbell" }
{ "_id" : ObjectId("550efb31ec7714832416d886"), "name" : "Betty Draper" }
{ "_id" : ObjectId("550efb32ec7714832416d887"), "name" : "Joan Harris" }

{ "_id" : ObjectId("550efb31ec7714832416d885"), "name" : "Pete Campbell" }

{ "_id" : ObjectId("550efb31ec7714832416d886"), "name" : "Betty Draper" }

{ "_id" : ObjectId("550efb32ec7714832416d887"), "name" : "Joan Harris" }

Deleting a Database

While not something you are likely to do too often, deleting a database is a perfectly valid MongoDB operation. The syntax could not be more simple; use the “dropDatabase” method of the db object.

db.dropDatabase();

1	db.dropDatabase();

You should see the following output in your terminal:

{ "dropped" : "madMen", "ok" : 1 }

1	{ "dropped" : "madMen", "ok" : 1 }

Now, execute the command: “show dbs”. You should see the following output in your terminal:

admin (empty)

1	admin (empty)

Summary

In this article, we learned about basic CRUD operations in Mongo Shell. We learned how to start the database server, start the shell and view a list of all databases. We also covered steps needed to create a database, add documents to that database, update a document, delete a document and delete a database. There is a mountain of topics when it comes to the Mongo Shell. I hope this article helped you in getting started.

Helpful Links for the mongo shell

General Links

http://www.mongodb.org/

http://try.mongodb.org/

http://docs.mongodb.org/manual/crud/

http://docs.mongodb.org/v2.2/mongo/

http://www.tutorialspoint.com/mongodb/

Installation Links

Install MongoDB on OS X — MongoDB Manual 3.0.1
http://docs.mongodb.org/manual/tutorial/install-mongodb-on-os-x/

Install MongoDB on Windows — MongoDB Manual 3.0.1
http://docs.mongodb.org/manual/tutorial/install-mongodb-on-windows/

Install on Linux — MongoDB Manual 3.0.1
http://docs.mongodb.org/manual/administration/install-on-linux/

Mar112015 by dcm1 Comment

Getting Started with Highcharts Part II: Formatting the Y Axis

JavaScript

Learn how to properly format the “y” axis values of your Highcharts chart.

In “Getting Started with Highcharts Part I: Basic Charts,” we covered the absolute basics of how to use the Highcharts jQuery plugin. In that article, we demonstrated that with minimal effort, we can render a professional looking chart in our web page. So the final example was a column chart that provided a data visualization of total 2014 sales in the Acme Widgets company.

But when you look at that final jsFiddle.net link, there are a few areas that could use additioal effort. The first area I wanted to focus on is the “y” axis (aka the “up and down” dimension of our chart). We have properly labeled that axis “US Dollars,” but this approach is inefficient, and the actual dollar amounts are not formatted correctly.

Example # 1

$(function () {
  $('#container').highcharts({
    title: { text: 'Acme Widget Company' },
    subtitle: { text: 'Total Sales - 2014' },
    chart: { type: 'column' },
    xAxis: { categories: ['Sue Frost', 'Jim Stone', 'Linda Brady', 'Edward Lee'] },
    yAxis: {
      title: {
      text: 'US Dollars'
      }
    },
    series: [{
      showInLegend: false,
      data: [150, 900, 675, 400]
    }]
  });
});

$(function () {

$('#container').highcharts({

title: { text: 'Acme Widget Company' },

subtitle: { text: 'Total Sales - 2014' },

chart: { type: 'column' },

xAxis: { categories: ['Sue Frost', 'Jim Stone', 'Linda Brady', 'Edward Lee'] },

yAxis: {

title: {

text: 'US Dollars'

}

series: [{

showInLegend: false,

data: [150, 900, 675, 400]

}]

});

So, in Example # 1, we have a column chart that is borrowed from the previous article in this series. The “y” axis is labeled as “US Dollars,” which is ok, but not very efficient. The actual numbers do not have dollar signs next to them, which minimizes the visual impact. Also, if we format these numbers correctly, we shouldn’t need to use the word “Dollar” in the label. So something like “Sales” would be more efficient and visually cleaner.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 1: http://jsfiddle.net/gf9d3pq4/1/

Example # 2

yAxis: {
  title: {
    text: 'Sales'
  },
  labels: {
    format: '${value}'
  }
}

yAxis: {

title: {

text: 'Sales'

labels: {

format: '${value}'

}

In Example # 2, we made two changes: 1) We simplified the label as: “Sales”, 2) We aded a “labels” property. This property is an object with one value: “format”. The value is a string which provides a template for how the “y” axis values should be formatted. In this case, we have added a dollar sign to the left of the number. This is great, but there is still one problem: the highest value on the “y” axis is “1100”. This number is not formatted correctly for most locals. Using the United States as an example, there should be a comma after the “1”. So let’s fix this.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 2: http://jsfiddle.net/gf9d3pq4/2/

How to Demo:

Click the jsfiddle link
Change the values of the “yAxis” property and then click the “Run” button in the upper-left-hand corner of the screen to see how your changes affect the appearance of the chart.

Example # 3

yAxis: {
  title: {
    text: 'Sales'
  },
  labels: {
    format: '${value:,.0f}'
  }
}

yAxis: {

title: {

text: 'Sales'

labels: {

format: '${value:,.0f}'

}

In Example # 3, we updated the labels.format value so that a comma is added for thousands. We also specified no decimal places. The comma is a big improvement, making four-digit numbers display correctly for the United States numbering syntax (proper syntax for other locals will vary).

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 3: http://jsfiddle.net/gf9d3pq4/3/

How to Demo:

Click the jsfiddle link
Change the values of the “yAxis” property and then click the “Run” button in the upper-left-hand corner of the screen to see how your changes affect the appearance of the chart.

Summary

In this article we learned how to format the “y” axis of a Highcharts chart. We discussed the “yAxis” property of the configuration object, the “labels” property, and how to add a dollar sign to properly convey US currency. We also demonstrated how to add a comma so that four-digit numbers are properly formatted.

Helpful Links for How to format the Highcharts “y” Axis

http://api.highcharts.com/highcharts#yAxis.labels

http://stackoverflow.com/questions/19810931/highcharts-y-axis-thousands-separator

Mar42015 by dcmNo Comments

Getting Started with Highcharts Part I: Basic Charts

JavaScript

Learn how to incorporate data visualization into your web page with just a few links of JavaScript

The data visualization trend shows no signs of slowing down, and charting is a key skill in that area. Highcharts is a jQuery plugin that provides a simple interface for creating great looking charts. There is a tremendous amount of muscle under the hood, which means that complex charts are not only within reach, but they do not require a degree in advanced mathematics. If you want to use Highcharts for a personal or non-profit project, then it is available without cost under the Creative Commons Attribution-NonCommercial 3.0 License.

In this article, I will cover the absolute basics of Highcharts. I will keep the deeper features for a later post, and instead focus on the bare minimum needed to leverage this super-powerful jQuery plugin and quickly spin up a chart on your web page.

Since Highcharts is a jQuery plugin, rendering a chart in your web-page could not be more simple:

$('#container').highcharts({
//configuration properties go here
});

$('#container').highcharts({

//configuration properties go here

});

So that’s it! Of course this little snippet of code has no use because highcharts knows nothing about the chart that we want to create. As simple as this library is to use, you do need to provide a few details so that Highcharts knows what to do. There are plenty of defaults that are provided so that you can worry about only the most critical details, but at minimum, Highcharts needs the data that powers your chart.

Example # 1A

<!DOCTYPE html> 
<html> 
  <head> 
    <meta charset="utf-8"> 
    <title>My first chart</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script src="http://code.highcharts.com/highcharts.js"></script>
  </head> 
  <body> 
    <div id="container"></div>
    <script>
      //highcharts code will go here
    </script>
  </body> 
</html>

<!DOCTYPE html>

<html>

<head>

<title>My first chart</title>

</head>

<body>

//highcharts code will go here

</script>

</body>

</html>

Example # 1B

$(function () {
  $('#container').highcharts({
    series: [{data: [150, 900, 675, 400]}]
  });
});

$(function () {

$('#container').highcharts({

series: [{data: [150, 900, 675, 400]}]

});

In Example # 1A, we have the base HTML for the rest of the examples in this article. For the sake of brevity, I will not include the HTML in further examples, only the JavaScript. Just keep in mind that the JS in the rest of the examples will go where you see the comment: “highcharts code will go here.”

In Example # 1B, we have the bare-minimum JavaScript needed to invoke the highcharts jQuery plugin. We passed an object to the highcharts method, which contains a “series” property. The value of this property is an array. There are multiple options when it comes to this series property, for now we will keep things very simple; the array has one element and that element is an object. This object has a “data” property whose value is an array. The element of that array has numbers, and the numbers in that array are the key to your chart.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 1B: http://jsfiddle.net/u4wke4vo/1/

How to Demo:

Click the jsfiddle link
Change the data in the “series” property’s array and then click the “Run” button in the upper-left-hand corner of the screen to see how your changes affect the appearance of the chart.

X and Y Axis

Now it might be a good idea to take a moment to discuss the concept of the x and y axis. Although this article is focused on the absolute basics of Highcharts, there is little to accomplish here without a firm understanding of how data is represented visually. The “x” axis represents the horizontal dimension of the chart, and the “y” axis represents the vertical dimension. Another way of looking at this is: the “x” axis is the “left to right”, and the “y” axis is the “up and down”.

When you look at the jsfiddle link for Example # 1B, you’ll notice that the “x” axis doesn’t really offer too much value. What do the numbers 150, 900, 675 and 400 mean when they are mapped to an “x” axis of 0 to 3? For this article, I am using a “Total Sales” context so that each example will present the total sales for a group of three representatives of the Acme Widget Company. The “x” axis is the sales reps. So instead of displaying arbitrary numbers, the “left to right” dimension of our chart will display names of the sales reps.

Example # 2

$(function () {
  $('#container').highcharts({
    series: [{data: [150, 900, 675, 400]}],
    xAxis: {
      categories: ['Sue Frost', 'Jim Stone', 'Linda Brady', 'Edward Lee']
    },
  });
});

$(function () {

$('#container').highcharts({

series: [{data: [150, 900, 675, 400]}],

xAxis: {

categories: ['Sue Frost', 'Jim Stone', 'Linda Brady', 'Edward Lee']

});

Here in Example # 2, we’ve added a second property to the configuration object named “xAxis.” The xAxis property is an array of strings, and each string provides a label for the “x” axis. So, in our case, that “left to right” dimension of the chart represents the Acme Widget company’s sales representatives.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 2: http://jsfiddle.net/u4wke4vo/2/

How to Demo:

Click the jsfiddle link
Change the data in the “series” property’s array and then click the “Run” button in the upper-left-hand corner of the screen to see how your changes affect the appearance of the chart.

Notice that Example # 2 is a line chart. That is the default chart type that Highcharts presents when you do not provide enough specifics. It looks nice, but it does not make a great deal of sense in this context because visually, it gives the impression of “data over time”. Our “Total Sales” context represents a series of set values for a year, so we need a chart type that better represents that kind of thought process. So, in my opinion, a column chart is a perfect example.

Example # 3

$(function () {
  $('#container').highcharts({
    series: [{data: [150, 900, 675, 400]}],
    xAxis: {
      categories: ['Sue Frost', 'Jim Stone', 'Linda Brady', 'Edward Lee']
    },
    chart: {
      type: 'column'
    }
  });
});

$(function () {

$('#container').highcharts({

series: [{data: [150, 900, 675, 400]}],

xAxis: {

categories: ['Sue Frost', 'Jim Stone', 'Linda Brady', 'Edward Lee']

chart: {

type: 'column'

}

});

Here, in Example #3, we’ve added a new property to the configuration object called “chart”, which is an object. This object has one property: “type”. This is where you tell Highcharts whether you want a “pie” chart, a “bar” chart, or a “line” chart, etc. For our examples, a “column” chart makes much more sense than a line chart.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 3: http://jsfiddle.net/u4wke4vo/3/

How to Demo:

Click the jsfiddle link
Change the data in the “series” property’s array and then click the “Run” button in the upper-left-hand corner of the screen to see how your changes affect the appearance of the chart.

You may have noticed that the chart’s title is: “Chart Title”, the “y” axis label is: “Values” and the “x” axis label is: “Series 1.” These are defaults that Highcharts provides when you have not specified them. While a helpful feature, it is likely that you’ll want to specify those kinds of labels. Let’s take care of that now.

Example # 4

$(function () {
  $('#container').highcharts({
    title: {
      text: 'Acme Widget Company'
    },
    subtitle: {
      text: 'Total Sales - 2014'
    },
    chart: {
      type: 'column'
    },
    xAxis: {
      categories: ['Sue Frost', 'Jim Stone', 'Linda Brady', 'Edward Lee'],
    },
    yAxis: {
      title: {
        text: 'US Dollars'
      }
    },
    series: [{
      name: "Domestic",
      data: [150, 900, 675, 400]
    }]
  });
});

$(function () {

$('#container').highcharts({

title: {

text: 'Acme Widget Company'

subtitle: {

text: 'Total Sales - 2014'

chart: {

type: 'column'

xAxis: {

categories: ['Sue Frost', 'Jim Stone', 'Linda Brady', 'Edward Lee'],

yAxis: {

title: {

text: 'US Dollars'

}

series: [{

name: "Domestic",

data: [150, 900, 675, 400]

}]

});

So, now we’ve changed a few things in Example # 4. The “title” and “subtitle” properties are self-explanatory. The “yAxis” property is an object, whose “title” property is yet another object with a “text” property. This determines the label for the “up and down” dimension of our chart. The sole object in the “series” property’s array now has a “name” property. This provides the label for the “x” axis, or “left to right” dimension of our chart. In this case, it indicates that all sales figures represent sales in the United States only.

HERE IS THE JS-FIDDLE.NET LINK FOR EXAMPLE # 4: http://jsfiddle.net/u4wke4vo/4/

How to Demo:

Click the jsfiddle link
Change the values of the various properties and then click the “Run” button in the upper-left-hand corner of the screen to see how your changes affect the appearance of the chart.

Summary

In this article, I covered the bare minimum needed to render a Highcharts chart in your web page. We covered the simple syntax for instantiating the jQuery plugin, and how to pass-in the configuration object. We also covered how to provide data, the x and y axis, and how to label them. We also discussed how to specify the type of chart that should be rendered.

Helpful Links for getting started with HighCharts

http://www.highcharts.com/

http://www.highcharts.com/docs

http://www.highcharts.com/demo

Feb252015 by dcmNo Comments

Renaming a file with Node.js

Node.js

Learn how to rename a file with Node.js, in ten lines of code

I was fleshing out a few ideas on a project today and found myself trying to figure out how to rename a file with Node.js. I have no doubt that there are better ways to go about this, but I thought I’d document my findings.

The first thing I realized is that the low-level nature of Node.js offers a great deal of power, but also with that power comes the need to handle all of the details. For me, this meant getting references to four things:

The name of the old file
The name of the new file
The full path to the old file
The full path to the new file (which does not exist yet)

The first two items are easy: I just had to provide a name for the old file, and decide what to call the new file. The last two items involved a bit more effort. I needed to do three things:

Get the path of the folder that contains the old file
Add a trailing slash to that path
Set a permanent reference to the old file

So, to accomplish all of these tasks, I decided to use the filepath Node.js module.

Example # 1A

{
  "dependencies": {
    "filepath": "0.8.1"
  }
}

{

"dependencies": {

"filepath": "0.8.1"

}

Example # 1B

//set a reference to the file system module
var fs = require('fs');
//set a reference to the filepath module
var FP = require('filepath');

//set a reference to the old file name
var oldFileName = 're-name-me.txt';
//set a reference to the new file name
var newFileName = 'ive-been-renamed.txt';
//set a reference to the folder structure that leads up to the current file, add a trailing slash
var fpFolder = FP.newPath() + '/';
//set a reference to the old file
var fpFile = FP.newPath(oldFileName);

//build the final file paths
var oldFilePath = fpFolder + oldFileName;
//set a reference to the new file path
var newFilePath = fpFolder + newFileName;

//output the old and new file paths
console.log('oldFilePath: ' + oldFilePath);
console.log('newFilePath: ' + newFilePath);

//set a reference to the file system module

var fs = require('fs');

//set a reference to the filepath module

var FP = require('filepath');

//set a reference to the old file name

var oldFileName = 're-name-me.txt';

//set a reference to the new file name

var newFileName = 'ive-been-renamed.txt';

//set a reference to the folder structure that leads up to the current file, add a trailing slash

var fpFolder = FP.newPath() + '/';

//set a reference to the old file

var fpFile = FP.newPath(oldFileName);

//build the final file paths

var oldFilePath = fpFolder + oldFileName;

//set a reference to the new file path

var newFilePath = fpFolder + newFileName;

//output the old and new file paths

console.log('oldFilePath: ' + oldFilePath);

console.log('newFilePath: ' + newFilePath);

Example # 1A shows the contents of package.json. There is only one dependency: the filepath Node.js module.

In Example # 1B, I first set references to the file system module, as well as the filepath module. Next, I provided strings for the names of the old and new files. The filepath module is then used to get the path to the current folder; I set that to the fpFolder variable (adding a trailing slash to that string, which will be needed when we append file names to that string).

The variable fpFile is used as a permanent reference to the old file (this will come in handy for Example # 3.) Finally, I build the full file paths for the old and new files. After that, a couple of console.log statements to make sure all of this work is correct.

Example # 1C

oldFilePath: [YOUR PATH TO]/video-code-examples/JavaScript/node-js/node-modules/fs/fs-rename/re-name-me.txt
newFilePath: [YOUR PATH TO]/video-code-examples/JavaScript/node-js/node-modules/fs/fs-rename/ive-been-renamed.txt

1 2	oldFilePath: [YOUR PATH TO]/video-code-examples/JavaScript/node-js/node-modules/fs/fs-rename/re-name-me.txt newFilePath: [YOUR PATH TO]/video-code-examples/JavaScript/node-js/node-modules/fs/fs-rename/ive-been-renamed.txt

Example # 1C shows the output of the two console.log statements. Each path will vary for you a bit, so I simply put “[YOUR LOCAL PATH TO]” for the folder structure that leads up to that file in the github repo that you cloned (see “How to Demo” below).

This example does not actually rename a file. So, now I will use the file system module to make that change.

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: JavaScript/node-js/node-modules/fs/fs-rename
Execute the following command in a terminal prompt: npm install
Execute the following command in a terminal prompt: node filepath-1.js

Example # 2

//use the fs object's rename method to re-name the file
fs.rename(oldFilePath, newFilePath, function (err) {
if (err) {console.log(err); return; }

console.log('The file has been re-named to: ' + newFilePath);
});

//use the fs object's rename method to re-name the file

fs.rename(oldFilePath, newFilePath, function (err) {

if (err) {console.log(err); return; }

console.log('The file has been re-named to: ' + newFilePath);

});

In Example # 2, I use the file system module’s rename method to rename the file: “re-name-me.txt.” This method takes three arguments: a path to the old file, a path to the new file and a callback. The callback takes one argument: an error object. Inside of the callback, I check for the error object, and then output the path of the new file. So now, follow the instructions below to see this code in action. After you execute the code, the file: “re-name-me.txt” will be renamed to: “ive-been-renamed.txt.”

In order to rename Example # 2 again, you’ll need to manually rename the file: “ive-been-renamed.txt” back to: “re-name-me.txt”. After a few times back and forth, this got pretty tedious and I started to think that there must be a way to toggle the file back and forth. Meaning: If the file has been renamed, change it back to the original name, and so forth.

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: JavaScript/node-js/node-modules/fs/fs-rename
Execute the following command in a terminal prompt: npm install
Execute the following command in a terminal prompt: node filepath-2.js

Example # 3A

//set a reference to the old file path
var oldFilePath = fpFolder + (fs.existsSync(fpFolder + fpFile) ? oldFileName : newFileName);
//set a reference to the new file path
var newFilePath = fpFolder + (fs.existsSync(fpFolder + fpFile) ? newFileName : oldFileName);

//set a reference to the old file path

var oldFilePath = fpFolder + (fs.existsSync(fpFolder + fpFile) ? oldFileName : newFileName);

//set a reference to the new file path

var newFilePath = fpFolder + (fs.existsSync(fpFolder + fpFile) ? newFileName : oldFileName);

In Example # 3A, I use the ternary operator when setting the final path for the old and new files. In each case, I check to see if the old file exists, and then depending on the answer, I set each path accordingly.

Example # 3B

"use strict";
//set a reference to the file system module
var fs = require('fs'),
//set a reference to the filepath module
FP = require('filepath'),
//set a reference to the old file name
oldFileName = 're-name-me.txt',
//set a reference to the new file name
newFileName = 'ive-been-renamed.txt',
//set a reference to the folder structure that leads up to the current file, add a trailing slash
fpFolder = FP.newPath() + '/',
//set a reference to the old file
fpFile = FP.newPath(oldFileName),
//set a reference to the old file path
oldFilePath = fpFolder + (fs.existsSync(fpFolder + fpFile) ? oldFileName : newFileName),
//set a reference to the new file path
newFilePath = fpFolder + (fs.existsSync(fpFolder + fpFile) ? newFileName : oldFileName);

//use the fs object's rename method to re-name the file
fs.rename(oldFilePath, newFilePath, function (err) {
if (err) {console.log(err); return; }

console.log('The file has been re-named to: ' + newFilePath);
});

"use strict";

//set a reference to the file system module

var fs = require('fs'),

//set a reference to the filepath module

FP = require('filepath'),

//set a reference to the old file name

oldFileName = 're-name-me.txt',

//set a reference to the new file name

newFileName = 'ive-been-renamed.txt',

//set a reference to the folder structure that leads up to the current file, add a trailing slash

fpFolder = FP.newPath() + '/',

//set a reference to the old file

fpFile = FP.newPath(oldFileName),

//set a reference to the old file path

oldFilePath = fpFolder + (fs.existsSync(fpFolder + fpFile) ? oldFileName : newFileName),

//set a reference to the new file path

newFilePath = fpFolder + (fs.existsSync(fpFolder + fpFile) ? newFileName : oldFileName);

//use the fs object's rename method to re-name the file

fs.rename(oldFilePath, newFilePath, function (err) {

if (err) {console.log(err); return; }

console.log('The file has been re-named to: ' + newFilePath);

});

Example # 3B is the full code for the final version of this file. I combined all var statements and cleaned up the code a bit. When you follow the instructions below, you’ll see that you can keep executing node filepath-2.js over and over, and the text file will toggle between the old name and the new name.

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: JavaScript/node-js/node-modules/fs/fs-rename
Execute the following command in a terminal prompt: npm install
Execute the following command in a terminal prompt: node filepath-2.js

Summary

As I mentioned, there are probably a number of ways to do this that are more efficient. Everything I detailed here was the result of a few minutes with Google. Hopefully, this article either got you where you needed to go, or pointed you in the right direction.

Helpful Links for Renaming a File with Node.js

http://nodejs.org/api/fs.html

https://www.npmjs.com/package/filepath

Feb182015 by dcmNo Comments

Getting started with the filepath Node.js module

Node.js

When you need to reference and work with the local file system in your Node.js program, the filepath module is quite a handy tool.

Even if your Node.js program is a web-server of some sort, working with the local file system is somewhat inevitable. While Node.js does provide low-level file system access (see the Node.js fs module), abstraction is always helpful, particularly when dealing with absolute paths.

The filepath Node.js module is a very helpful utility for simple access to file paths. You’ll need only a package.json file with this module as a dependency, an “npm install” command, and then you are up and running. This article provides a quick introduction to a few of the most common methods.

Example # 1A

//get a reference to the filepath module
var FP = require('filepath');

//get a reference to the folder structure that leads up to the current file, set it to the path variable
var path = FP.newPath();

//output the path variable 
console.log(path);

//get a reference to the filepath module

var FP = require('filepath');

//get a reference to the folder structure that leads up to the current file, set it to the path variable

var path = FP.newPath();

//output the path variable

console.log(path);

Example # 1B:

[YOUR LOCAL PATH TO]/JavaScript/node-js/filepath

1	[YOUR LOCAL PATH TO]/JavaScript/node-js/filepath

In Example # 1, we first create the FP variable, which references the filepath module. Then we create the path variable, which holds the return value of the FP object’s newPath method. And finally, we output the path in the console. Example # 1B shows the terminal output when we use console.log to view the path variable. This path will vary for each user so I simply put “[YOUR LOCAL PATH TO]” for the folder structure that leads up to that file in the github repo that you cloned (see “How to Demo” below).

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: JavaScript/node-js/filepath
Execute the following command in a terminal prompt: node filepath-1.js

Example # 2

//get a reference to the filepath module
var FP = require('filepath');

//get a reference to the folder structure that leads up to the current file, set it to the path variable
var path = FP.newPath();

var files = path.list();

console.dir(files);

//get a reference to the filepath module

var FP = require('filepath');

//get a reference to the folder structure that leads up to the current file, set it to the path variable

var path = FP.newPath();

var files = path.list();

console.dir(files);

Example # 2 demonstrates the list method. The only real difference between this code and Example # 1, is the new variable “files”, which receives the value of the list method, when called on our path variable. The files variable ends up as an array. Each element in the array is an object whose “path” property is a string that points to a file in the current directory.

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: JavaScript/node-js/filepath
Execute the following command in a terminal prompt: node filepath-2.js

Example # 3A

//get a reference to the filepath module
var FP = require('filepath');

FP.newPath(__dirname).recurse(function (path) {
	console.dir(path);
})

//get a reference to the filepath module

var FP = require('filepath');

FP.newPath(__dirname).recurse(function (path) {

console.dir(path);

})

Example # 3B

[
	{ path: '[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-1.js' },
	{ path: '[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-2.js' },
	{ path: '[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-3.js' },
	{ path: '[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules' },
	{ path: '[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/package.json' }
]

[

{ path: '[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-1.js' },

{ path: '[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-2.js' },

{ path: '[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-3.js' },

{ path: '[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules' },

{ path: '[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/package.json' }

]

Example # 3C

//get a reference to the filepath module
var FP = require('filepath');

FP.newPath(__dirname).recurse(function (path) {
	//console.dir(path);
	console.log(path.toString());
})

//get a reference to the filepath module

var FP = require('filepath');

FP.newPath(__dirname).recurse(function (path) {

//console.dir(path);

console.log(path.toString());

})

Example # 3D

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-1.js
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-2.js
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-3.js
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/.npmignore
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/LICENSE
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/README.md
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/index.js
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou/.npmignore
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou/LICENSE
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou/README.md
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou/index.js
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou/package.json
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/package.json
[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/package.json

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-1.js

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-2.js

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/filepath-3.js

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/.npmignore

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/LICENSE

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/README.md

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/index.js

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou/.npmignore

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou/LICENSE

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou/README.md

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou/index.js

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/node_modules/iou/package.json

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/node_modules/filepath/package.json

[YOUR LOCAL PATH TO]/video-code-examples/JavaScript/node-js/filepath/package.json

In Example # 3A, we see the recurse method in action. Just as the name implies, the recurse method will recursively list all of the files in the current directory. As a result, if one of those files is a folder, then it will list all of the files in that folder, and so on. This method differs from the previous two examples in that it takes a callback. The callback is a bit like a forEach call; it iterates over all of the files or folders in the path, and calls the callback for each one. Inside of the callback, the path variable is the current path being iterated over.

Example # 3C is the output from the code in Example # 3A.

In Example # 3C, we use the toString() method of the path object so that instead of a bunch of objects that we would need to handle, we just get the values we are after; the string representation of the path to that file or folder.

Example # 3D is the output from the code in Example # 3C.

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: JavaScript/node-js/filepath
Execute the following command in a terminal prompt: node filepath-3.js

Summary

The filepath Node.js module has much more to offer than was demonstrated here. Hopefully, this article has demonstrated how easy it is to get started with filepath.

Helpful Links for the filepath Node.js module

https://www.npmjs.com/package/filepath

http://nodejs.org/api/fs.html

Feb112015 by dcmNo Comments

Getting started with the uglify-js Node.js module

Node.js

Learn how to easily implement minification and file concatenation right in your Node.js program.

There is no doubt that tools such as grunt and gulp provide powerful front-end tooling, particularly for large-scale applications. But in some cases, you may want to “roll your own”. If you want to minify and / or concatenate files from your Node.js application, the uglify-js module offers a simple syntax yet plenty of muscle-power.

So, if you want to get serious, a quick package.json file and “npm install” command are all you need to get started. Once these two tasks are taken care of, you can minify one or more files, and concatenate the output to a new file. In this article, I will show you how to do just that in less than 20 lines of code.

Example # 1A

{
  "dependencies": {
    "uglify-js": "2.4.16"
  }
}

{

"dependencies": {

"uglify-js": "2.4.16"

}

Example # 1B

var featuredCity = {
  name: "london",
  country: "england"
};

var featuredCity = {

name: "london",

country: "england"

};

Example # 1C

function getFeaturedCity(){
  return featuredCity.name;
};

function getFeaturedCity(){

return featuredCity.name;

};

Example # 1D

var months = [
	"January",
	"February",
	"March",
	"April",
	"May",
	"June",
	"July",
	"August",
	"September",
	"October",
	"November",
	"December"
];

var months = [

"January",

"February",

"March",

"April",

"May",

"June",

"July",

"August",

"September",

"October",

"November",

"December"

];

In Example # 1A we have the contents of the file: package.json. This tells npm that our program depends on the “uglify-js” module. Examples # 1B, 1C and 1D are the contents of the files we will “uglify”. The actual code has no significance. We just want to have a reference so that once we have uglified the files, we can see the difference in the output.

Example # 2A

//get a reference to the uglify-js module
var UglifyJS = require('uglify-js');

//get a reference to the minified version of file-1.js
var result = UglifyJS.minify("file-1.js");

//view the output
console.log(result.code);

//get a reference to the uglify-js module

var UglifyJS = require('uglify-js');

//get a reference to the minified version of file-1.js

var result = UglifyJS.minify("file-1.js");

//view the output

console.log(result.code);

Example # 2B

featuredCity={name:"london",country:"england"};

1	featuredCity={name:"london",country:"england"};

In Example # 2A, we minify the file: file-1.js. In this case, the minified code is simply shown in the console. Example # 2B shows the minified code. It’s hard to imagine a case where we would want to minify code, but only show the result in a terminal window. Realistically, we need to write the output of the minified file to a new file.

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: JavaScript/node-js/uglify-js
Execute the following command in a terminal prompt: npm install
Execute the following command in a terminal prompt: node uglify-1.js

Example # 3

//get a reference to the file system module
var fs = require('fs');

//get a reference to the uglify-js module
var UglifyJS = require('uglify-js');

//get a reference to the minified version of file-1.js
var result = UglifyJS.minify("file-1.js");

//view the output
console.log(result.code);

fs.writeFile("output.min.js", result.code, function(err) {
    if(err) {
        console.log(err);
    } else {
        console.log("File was successfully saved.");
    }
});

//get a reference to the file system module

var fs = require('fs');

//get a reference to the uglify-js module

var UglifyJS = require('uglify-js');

//get a reference to the minified version of file-1.js

var result = UglifyJS.minify("file-1.js");

//view the output

console.log(result.code);

fs.writeFile("output.min.js", result.code, function(err) {

if(err) {

console.log(err);

} else {

console.log("File was successfully saved.");

}

});

In Example # 3, we have the content of uglify-2.js. Here, we’ve moved things into a more real-world context; we save the result of the minification to a physical file. Now notice that after you execute node uglify-2.js in your terminal, there is a new file named: output.min.js, which is a minified version of file-1.js.

The first change we made was to add a reference to the “fs” module, which provides access to the file system in Node.js. The console.log statement was left in, just so you can still see the output in the console. Below that, we call the writeFile method of the fs object. We pass it three arguments:

the name of the file that will contain the result of the minification process (i.e. the minified code)
the content for that file (i.e. the minified code), and
a callback. The callback takes one argument: an error object. In the callback, we check to see if there was an error, and if not, we send a success message to the console.

In this Example, the callback is optional as it has nothing to do with the minification process and only provides messaging as to the status of the minification attempt.

Although Example # 3 is more of a real-world context than Example # 2, it is still a bit unrealistic as we only minify one file. In a typical production workflow, one would likely want to minify and concatenate more than one file.

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: JavaScript/node-js/uglify-js
Execute the following command in a terminal prompt: npm install
Execute the following command in a terminal prompt: node uglify-2.js

Example # 4

//get a reference to the file system module
var fs = require('fs');

//get a reference to the uglify-js module
var UglifyJS = require('uglify-js');

//get a reference to the minified version of file-1.js, file-2.js and file-3.js
var result = UglifyJS.minify(["file-1.js", "file-2.js", "file-3.js"]);

//view the output
console.log(result.code);

fs.writeFile("output.min.js", result.code, function(err) {
    if(err) {
        console.log(err);
    } else {
        console.log("File was successfully saved.");
    }
});

//get a reference to the file system module

var fs = require('fs');

//get a reference to the uglify-js module

var UglifyJS = require('uglify-js');

//get a reference to the minified version of file-1.js, file-2.js and file-3.js

var result = UglifyJS.minify(["file-1.js", "file-2.js", "file-3.js"]);

//view the output

console.log(result.code);

fs.writeFile("output.min.js", result.code, function(err) {

if(err) {

console.log(err);

} else {

console.log("File was successfully saved.");

}

});

Example # 4 shows the contents of uglify-3.js. The only change we have made is in the call to UglifyJS.minify. Instead of passing it a string, we pass an array. Each element in the array is a path to a file we want to minimize and the concatenate to the output file. In this case all of the files are in the same folder as our program, so there is no folder structure (i.e. just the file names). You can take the same exact steps to demo this example, and when you do, you will see that the file output.min.js contains the minified code of file-1.js, file-2.js and file-3.js.

Summary

The uglify-js offers a ton of options, parameters and features. For this article, I wanted to demonstrate how easy it is to set up and use this Node,js module. But if you want to understand the true power of uglify-js, there is a ton of documentation available online. Hopefully this article got you to first base!

Helpful Links for the uglify-js Node.js module

https://www.npmjs.com/package/uglify-js

https://www.npmjs.com/package/uglify-js#api-reference

http://lisperator.net/uglifyjs/

Jan282015 by dcmNo Comments

Getting Started with HTML5 Drag and Drop Part IV: Multiple Draggables and Multiple Droppables

HTML5

Once you know how to successfully drag one HTML element and drop it on another one, there is a new UX challenge: multiple elements that can be dragged and then dropped on any one of multiple droppables.

In Parts I, II and III of this series, we covered the critical concepts needed to implement HTML drag and drop. There, we talked about the dragstart event, the dataTransfer object, originalEvent object, drop event, dragenter event, dragleave event, and setDragImage method. These concepts got us to the point where we could drag one HTML element, and then drop it on another. All of this, with some UX considerations such as setting a custom drag image, updating the droppable element when something is dragged over it or when something is dropped on it.

When I was taking a deep dive into HTML5 drag-and-drop, I wanted to be able to wire-up a scenario where there were multiple “draggable” elements, and multiple “droppable” elements. So from a UX standpoint, my goals were:

Any draggable could be dropped on any droppable
Each droppable would change appearance when an element was dragged over it
Each droppable would change appearance when an element was dropped onto it
Each droppable would accept only one dropped element at a time
The container that originally held the droppables would change appearance when empty
The container that originally holds the droppables could accept any one or all of the droppables if they are dragged back to it

When I first attempted this, I got to a point where this all seemed like a lot of moving parts. Fortunately, a substantial portion of the challenge has been solved in parts I, II and III of this series, and I hope that if you have already read those articles, you have a solid understanding of how to do the following:

Make an element draggable
Set a custom drag element
Make an element droppable
Update the droppable when an element is dragged over it
Update the droppable when an element was dropped onto it

So with that knowledge, our task list shrinks a bit:

Any draggable can be dropped on any droppable
Each droppable will accept only one dropped element at a time
The container that originally held the droppables will change appearance when empty
The container that originally held the droppables will accept any one or all of the droppables if they are dragged back to it

From here on, I will walk through the steps I took to accomplish these goals. There are probably other ways to go about solving these problems, but I am sharing the approach I took.

Task # 1: Any draggable can be dropped on any droppable

Well this was the easiest step. In parts I, II and III of this series, all of the JavaScript event binding was accomplished using classes instead of IDs. Because of this, adding more draggables and droppables in the HTML solved this problem. The existing JavaScript worked fine.

Task # 2: Each droppable will accept only one dropped element at a time

There are two things I needed to do in order to solve this problem: 1) create two separate “drop” event handlers, one for the multiple droppable HTML elements and another for the container that originally held the droppables; 2) in “drop” event handlers of the multiple droppables, check to see if the droppable element already has a child element.

Before I discuss the fix for task # 2, take a look at this JSFiddle link: http://jsfiddle.net/v9hawcof/5/

That link demonstrates the behavior that I do NOT want: more than one draggable can be dropped onto a droppable.

Base HTML

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
	<article>
		<section id="content">
			<p class="instructions">Drag any blue square to any light brown box, or back to its original container. Each light brown box in the top row will accept only one blue square at a time. If you want to view the JavaScript for this example, click <a href="js/part-iv.js" target="_blank">here</a>.</p>
			<div class="drop-elements">
				<div class="dropElement droppable"></div>
				<div class="dropElement droppable"></div>
				<div class="dropElement droppable"></div>
				<div class="dropElement droppable"></div>
			</div>
			<div class="drag-elements droppable multipleChildren hasChild">
				<div id="drag1" class="dragElement redBorder">Drag me!</div>
				<div id="drag2" class="dragElement greenBorder">Drag me!</div>
				<div id="drag3" class="dragElement orangeBorder">Drag me!</div>
				<div id="drag4" class="dragElement pinkBorder">Drag me!</div>
			</div>
		<section>
	</article>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/part-iv.js"></script>
</body>
</html

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

<p class="instructions">Drag any blue square to any light brown box, or back to its original container. Each light brown box in the top row will accept only one blue square at a time. If you want to view the JavaScript for this example, click <a href="js/part-iv.js" target="_blank">here</a>.</p>

</div>

</div>

</article>

</body>

</html

So in the code example above, we have the base HTML for the rest of the examples in this article. For brevity’s sake, I’ve stripped out all but the most essential areas of the markup so that you can focus on the technologies demonstrated in this article. When you view the page source for the final working example, you will see that there is more HTML, but it is for presentational purposes only.

Example # 1

//each of the four light-brown boxes at top have this bound to their drop event
var dropHandlerSingle = function (event) {
  var id = '';

  //prevent the browser from any default behavior
  event.preventDefault();

  //only allow one child element at a time
  if($(this).children().length){return;}

  //get a reference to the element that is being dropped
  id = event.originalEvent.dataTransfer.getData("id");
  
  //add the hasChild class so that the UI can update
  $(event.target).addClass('hasChild');

  //trigger the custom event so that we can update the UI
  $(document).trigger('custom:dropEvent');

  //move the dragged element into the drop target
  event.target.appendChild(document.getElementById(id));
};

//each of the four light-brown boxes at top have this bound to their drop event

var dropHandlerSingle = function (event) {

var id = '';

//prevent the browser from any default behavior

event.preventDefault();

//only allow one child element at a time

if($(this).children().length){return;}

//get a reference to the element that is being dropped

id = event.originalEvent.dataTransfer.getData("id");

//add the hasChild class so that the UI can update

$(event.target).addClass('hasChild');

//trigger the custom event so that we can update the UI

$(document).trigger('custom:dropEvent');

//move the dragged element into the drop target

event.target.appendChild(document.getElementById(id));

};

Here is the JSfiddle link for Example # 1: http://jsfiddle.net/v9hawcof/6/

Now in Example # 1, I’ve added a new function called: “dropHandlerSingle”. This event handler is dedicated to the four light brown boxes at top (i.e. the “multiple droppables”). In the function I check to see if the droppable element has any children. If so, then I exit immediately. You may also notice that I trigger this custom event: “custom:dropEvent”. That will be explained shortly.

Task # 3: The container that originally held the droppables will change appearance when empty

Example # 2

//after something is dropped
$(document).on('custom:dropEvent',function(){
  //make sure the DOM has been updated
  setTimeout(function(){
    //check each droppable element to see if it has a child
    $('.droppable').each(function(){
      //if this element has no children
      if (!$(this).children().length){
        //remove the hasChild class
        $(this).removeClass('hasChild');
      }
    });
  },50);
});

//after something is dropped

$(document).on('custom:dropEvent',function(){

//make sure the DOM has been updated

setTimeout(function(){

//check each droppable element to see if it has a child

$('.droppable').each(function(){

//if this element has no children

if (!$(this).children().length){

//remove the hasChild class

$(this).removeClass('hasChild');

}

});

},50);

});

Here is the JSfiddle link for Example # 2: http://jsfiddle.net/v9hawcof/7/

In Example # 2, you see the event handler for “custom:dropEvent”. The reason I used the setTimeout method, is because of timing challenges. When the drop event occurs, the DOM is not in the state needed in order to query it and figure out what is going on (i.e. which droppable elements have children). This event handler for “custom:dropEvent” will check each droppable element, and if it has no children, it removes the CSS class that gives it a “hasChildren” appearance (i.e. the background color changes from dark brown to light brown).

Task # 4: The container that originally held the droppables will change appearance when empty

Example # 3A

//bind the dropHandlerMultiple function to the .droppable.multipleChildren element
$('.droppable.multipleChildren').bind('drop',dropHandlerMultiple);

1 2	//bind the dropHandlerMultiple function to the .droppable.multipleChildren element $('.droppable.multipleChildren').bind('drop',dropHandlerMultiple);

Example # 3B

//the box that holds the four blue dragable boxes on page load has this bound to its drop event
dropHandlerMultiple = function (event) {
	event.preventDefault();

	var id = event.originalEvent.dataTransfer.getData("id");

	$(event.target).addClass('hasChild');

	event.target.appendChild(document.getElementById(id));

	$(document).trigger('custom:dropEvent');
};

//the box that holds the four blue dragable boxes on page load has this bound to its drop event

dropHandlerMultiple = function (event) {

event.preventDefault();

var id = event.originalEvent.dataTransfer.getData("id");

$(event.target).addClass('hasChild');

event.target.appendChild(document.getElementById(id));

$(document).trigger('custom:dropEvent');

};

Example # 3C

//bind the appropriate handlers for the dragover, dragenter and dragleave events
$('.droppable').bind({
  dragover: allowDragover,
  dragenter: function() {
    //ignore this event for the original container of the drag elements
    if ( $(this).hasClass('multipleChildren') ){return;}

    $(this).addClass('dragEnter');
  },
  dragleave: function() {
    $(this).removeClass('dragEnter');
  }
});

//bind the appropriate handlers for the dragover, dragenter and dragleave events

$('.droppable').bind({

dragover: allowDragover,

dragenter: function() {

//ignore this event for the original container of the drag elements

if ( $(this).hasClass('multipleChildren') ){return;}

$(this).addClass('dragEnter');

dragleave: function() {

$(this).removeClass('dragEnter');

}

});

Here is the JSfiddle link for Example # 3: http://jsfiddle.net/v9hawcof/8/

In Example # 3A, I bind an event handler for the container that originally held the droppables. In Example # 3B you’ll see that event handler: the “dropHandlerMultiple” function. The “dropHandlerMultiple” event handler does pretty much the same thing as the “dropHandlerSingle” event handler. The only difference is that the “dropHandlerMultiple” function does not check to see if it has children already. This is the critical step in accomplishing task # 4. In Example # 3B, you’ll see the code that tells the dragenter event handler to exit immediately if an element is dragged over the container that originally held the droppables. This is not a critical feature. I suppose I could have allowed the dragenter UX to apply to that container as well.

Here is the working example for this article: http://examples.kevinchisholm.com/html5/drag-and-drop/part-iv.html

Here is the JavaScript for this article’s working example: http://examples.kevinchisholm.com/html5/drag-and-drop/js/part-iv.js

Summary

As you can see, everything in this article is really a matter of personal choice. What I’ve done is detail how I decided to solve a particular UX challenge. Now how you approach this same set of tasks is completely up to you. I found that while attempting all of this, I learned a few things about HTML5 drag and drop. I hope you will too.

Jan252015 by dcm1 Comment

Node.js Basics – Command-Line Arguments

Node.js

Learn how to access command-line arguments passed to your node.js file

When you use Node.js as a command-line tool, you most likely type the following into your terminal application: node some-file.js. Once your application grows to even a modest level of complexity or sophistication, you will probably want to accept arguments on the command line. So, in this article, I will explain the basics of how to gain access to the arguments that are passed to your node application on the command line.

The key to accessing command-line arguments lies in the argv property of the process global. The process object is a global object, which means that you can access it from anywhere in your program. The argv property is an array that contains all arguments provided when you executed your program on the command line.

Example # 1A

Example # 1B

Example # 1C

In Example # 1A, we have the contents of the file: showArgs-1.js. Then this line simply inspects the argv property of the process objet. The output will go straight to the terminal window the moment you execute your program.

In Example # 1B, we have the actual command you use to execute the program; first node (the executable for Node.js), and then the name of the file we want to execute: showArgs-1.js.

Example # 1C shows the output of this program. So, in the console, you will see an array. The first element of that array is node, and the second element is the path to the program. This path will vary for each user so I simply put “[PATH TO]” for the folder structure that leads up to that file in the github repo that you cloned (see “How to Demo” below).

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: node/cli-arguments-basics
Execute the following command in a terminal prompt: node showArgs-1.js

Example # 2A

Example # 2B

Example # 2C

In Example # 2B, you’ll see that we passed some additional arguments to our program: “arg2”, “arg3” and “arg4”. I used the numbers 2, 3, and 4 because they make more sense, due to the 0-based nature of this arguments array. Remember: arguments 0 and 1 are node and the file that contains your program, so the additional arguments here are indexed as 2, 3 and 4.

Since we know that the first two arguments will be the same every time, let’s try to get rid of those first two arguments.

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: node/cli-arguments-basics
Execute the following command in a terminal prompt: node showArgs-1.js arg2 arg3 arg4

Example # 3A

Example # 3B

Example # 3C

In Example # 3A, we use the Array.prototype.slice method to remove the first two elements of the arguments array. Specifically, process.argv is an array, so we use its slice method to remove the first two elements of the array, and assign that return value to the variable args. We then inspect the args array using a console.dir statement.

In Example # 3B, we execute our program, passing three arguments: “arg0”, “arg1” and “arg2’. Example # 3C shows the output, which is an array containing only the arguments that we passed to the program.

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: node/cli-arguments-basics
Execute the following command in a terminal prompt: node showArgs-2.js arg0 arg1 arg2

Example # 4A

Example # 4B

Example # 4C

In Example # 4A, we make the output a bit easier on the eyes. Instead of a simple console.dir statement, we use the forEach method of the args array for iteration. Inside of each iteration, we use a console.log statement to output a more human-friendly message that shows the argument that is contained in that element.

How to Demo:

Clone this github repo: https://github.com/kevinchisholm/video-code-examples
Navigate to: node/cli-arguments-basics
Execute the following command in a terminal prompt: node showArgs-3.js arg0 arg1 arg2

Summary

While the examples here were quite basic, they are perfectly valid and could be used in your code. There are Node.js modules that provide powerful abstractions when it comes to Node.js command-line arguments. The one I have probably heard about the most is minimist. So, if you are writing an application that has even a moderate level of complexity, you will likely want to use something like minimist. That said, understanding how things work on a low level is always a good idea. Hopefully, this article has provided a helpful introduction to this concept.

Helpful Links for Node.js Command-Line Basics

http://nodejs.org/api/process.html

http://nodejs.org/api/process.html#process_process_argv

https://www.npmjs.com/package/minimist

Jan212015 by dcm4 Comments

Getting Started with HTML5 Drag and Drop Part III: Setting a Custom Drag Image

HTML5

Learn how to set a custom drag image for a better drag and drop UX.

In previous articles of this series: “Getting Started with HTML5 Drag and Drop Part I: Introduction,” and “Getting Started with HTML5 Drag and Drop Part II: The dragenter and dragleave Events,” we covered the basics needed to implement HTML5 drag and drop. The second article focused on the UX for dropping a dragged element. In this article, we will cover a UX consideration for dragging: setting a custom drag image.

When dragging a draggable HTML element, the default drag image is the element being dragged. In most cases, this is probably just fine. But what about if you want to snazz-up the UX and specify a custom image for the drag operation?

Using an image that already exists on the page

When using an image that already exists in the page as your custom drag image, there are two restrictions:

The image must exist in the DOM (i.e. it cannot have its “display” property set to “none,” or “visibility: hidden.”
The image must be visible on the page (i.e. it must be visible without scrolling)

Example # 1

var dragStartHandler = function (ev) {
    var dragImage = document.getElementsByClassName('html5-logo')[0];

      ev.originalEvent.dataTransfer.setData("Text", ev.target.getAttribute('id'));

    //set the custom drag image
    ev.originalEvent.dataTransfer.setDragImage(dragImage, 100, 100);
};

var dragStartHandler = function (ev) {

var dragImage = document.getElementsByClassName('html5-logo')[0];

ev.originalEvent.dataTransfer.setData("Text", ev.target.getAttribute('id'));

//set the custom drag image

ev.originalEvent.dataTransfer.setDragImage(dragImage, 100, 100);

};

(for the base HTML, please refer to either Part I or Part II of this series; they both provide that markup).

Here is the JSfiddle link for Example # 1: http://jsfiddle.net/v9hawcof/3/

The setDragImage Method

In Example # 1, we have set the HTML5 logo as the custom drag image. We do this by using the document.getElementsByClassName method. Since this method returns an HTMLcollection, we reference the element by using the [0] property as we know we will only get one element back (yes, we could have used the document.getElementbyId method, but I wanted to keep the HTML clean).

There are a couple of drawbacks to this approach

The HTML5 logo must be visible in the DOM, which is a bit restrictive
Some browsers (e.g. Firefox) will display the image in its native size, whereas others (e.g. Google Chrome) might display it using the dimensions defined by its current CSS
Using an external image for the custom drag image

Example # 2

dragStartHandler = function (event) {
	var dragIcon = null;

	//set a reference to the element that is currenly being dragged
	event.originalEvent.dataTransfer.setData("id",event.target.id);

	//create a custom drag image
	dragIcon = document.createElement('img');
	dragIcon.src = 'http://bit.ly/bartSimpsonSkateboard200X200';

	//set the custom drag image
	event.originalEvent.dataTransfer.setDragImage(dragIcon, 100, 100); 
};

dragStartHandler = function (event) {

var dragIcon = null;

//set a reference to the element that is currenly being dragged

event.originalEvent.dataTransfer.setData("id",event.target.id);

//create a custom drag image

dragIcon = document.createElement('img');

dragIcon.src = 'http://bit.ly/bartSimpsonSkateboard200X200';

//set the custom drag image

event.originalEvent.dataTransfer.setDragImage(dragIcon, 100, 100);

};

Here is the JSfiddle link for Example # 2: http://jsfiddle.net/v9hawcof/4/

In Example # 2, we use an external image for our custom drag image. In this case it’s a silly image of Bart Simpson on his surfboard, but you can certainly use any image you desire. The advantage here is that we have much more control over the experience. We can use any image we like, and we don’t need to worry about whether or not the image we use is part of or visible in the DOM; it’s external to the DOM. Of course, you can use an image that already exists in the DOM, but you gain the greatest control when you create a new image, rather than use a reference to a DOM element.

Here is the working example for this article: http://examples.kevinchisholm.com/html5/drag-and-drop/part-iii.html

Here is the JavaScript for this article’s working example: http://examples.kevinchisholm.com/html5/drag-and-drop/js/part-iii.js

Summary

Setting a custom drag image may seem like icing on the cake, but it is not an uncommon case. In this article we discussed two options: using a reference to an existing image element in the DOM, as well as using an external image. There is no right or wrong answer as to which approach is best, but I hope this article has not only explained how to do this, but the pros and cons of each method.

Helpful Links for the HTML5 Drag and Drop setDragImage Method

https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer#setDragImage.28.29

http://help.dottoro.com/ljdpgfkx.php

http://stackoverflow.com/questions/16894049/feature-detection-for-setdragimage-of-html5-drag-and-drop

Jan142015 by dcmNo Comments

Getting Started with HTML5 Drag and Drop Part II: The dragenter and dragleave Events

HTML5

Getting HTML5 drag and drop to work is a great start, but taking this to production requires certain UX considerations.

In the previous article of this series: “Getting Started with HTML5 Drag and Drop Part I: Introduction,” we covered the bare minimum code needed to make an HTML element draggable, and droppable onto another element. So, in Part II of this series, I will talk about two events that allow for better UX with regard to any element onto which you might drop something.

When I say: “…..any element onto which you might drop something,” I am referring to the fact that dragging something does not always mean that you will definitely drop it. In most drag and drop scenarios, you have one or more elements to drag, but also multiple places where you may drop them. Therefore, it is most often a good idea to give the user some indication that the element that they are dragging could be dropped in a particular location. Consequently, this involves setting up a hover-like behavior where the droppable element reacts to the fact that a draggable element has been dragged over it, or dragged away from it.

HTML Base

<!DOCTYPE HTML>
<html>
<head>
	<link href="css/drag-and-drop.css" type="text/css" rel="stylesheet" />
	<link href="css/part-ii.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<article>
		<section id="content">
			<div class="drop-elements">
				<div class="dropElement droppable"></div>
			</div>
			<div class="drag-elements droppable  hasChild">
				<div id="drag1" class="dragElement redBorder">Drag me!</div>
			</div>
		<section>
	</article>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/part-ii.js"></script>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</div>

</div>

</article>

</body>

</html>

In the code example above, we have the base HTML for the rest of the examples in this article. For brevity’s sake, I’ve stripped out all but the most essential areas of the markup so that you can focus on the technologies demonstrated in this article. When you view the page source for the final working example, you will see that there is more HTML, but it is for presentational purposes only.

Example # 1

//add the dragEnter class to any element that fires a dragenter event
$('.droppable').bind('dragenter',function(){
  $(this).addClass('dragEnter');
});

//add the dragEnter class to any element that fires a dragenter event

$('.droppable').bind('dragenter',function(){

$(this).addClass('dragEnter');

});

Here is the JSfiddle link for Example # 1: http://jsfiddle.net/v9hawcof/

The dragenter Event

In Example # 1A, we bind an anonymous function to the dragenter events of the droppable HTML element. In this event handler, we add the class: “dragEnter,” which changes the background color of that element. The reason for doing this is to tell the user: “If you want, you can drop the element that you are dragging.” But if you click the link above for the JSFiddle example, you’ll see that we have a problem. Although we add the dragEnter class when the user drags an element over the droppable element, we have not set a handler for when the user drags that element away; we can’t always assume that the user will drop the dragged element. So, we have to handle the case in which the user drags the element over the droppable element, but does not drop it, and then drags away.

Example # 2

$('.droppable').bind('dragleave',function(){
  $(this).removeClass('dragEnter');
});

$('.droppable').bind('dragleave',function(){

$(this).removeClass('dragEnter');

});

The dragleave Event

Here is the JS fiddle link for Example # 2: http://jsfiddle.net/v9hawcof/1/

In Example # 2, we bind an anonymous function to the dragleave event of the droppable element. In that event handler, we simply remove the “dragEnter” class from the droppable element. If you click the jsFiddle link for Example # 2, you’ll see that the user experience is much better; when you drag the small blue box over the larger tan box, the droppable element turns green. So, if you choose not to drop the blue box, and drag it away, the droppable element turns back to tan.

Here is the working example for this article: http://examples.kevinchisholm.com/html5/drag-and-drop/part-ii.html

Here is the JavaScript for this article’s working example:
http://examples.kevinchisholm.com/html5/drag-and-drop/js/part-ii.js

Summary

It is hard to imagine a case in which you would not want to notify the user in some way of the various events that take place during a drag and drop operation. In this article, we focused on the case in which the user drags an element over a droppable one, but does not drop it, and then drags the draggable element away. By attaching event handlers to the dragenter and dragleave events, we have a window of opportunity in which the UI can be updated accordingly. How you prefer to handle the UX in this and similar cases is up to you, but it is an important area to consider.

Helpful Links for HTML5 Drag and Drop dragenter and dragleave Events

dragenter

https://developer.mozilla.org/en-US/docs/Web/Events/dragenter

dragleave

https://developer.mozilla.org/en-US/docs/Web/Events/dragleave

Jan72015 by dcmNo Comments

Getting Started with HTML5 Drag and Drop Part I: Introduction

HTML5

While there are plenty of JavaScript libraries that take the pain out of drag-and-drop, understanding how to implement this feature of HTML5 is not only possible, it’s easier than you may think.

So let’s face facts: drag and drop is something that most of us take for granted. Ever since the late ‘80s, we’ve been able to drag something on the screen and then drop it somewhere as a way of saying: “I want this….” or “ ….do something to this.” In recent years, that kind of functionality has become more and more commonplace in desktop browsers. It’s hard to believe, but drag-and-drop was originally supported in Microsoft Internet Explorer 5. Yep, the XMLHttpRequest object is not the only game-changing feature originally dreamed-up at Microsoft. Ironically, our good friend IE is the only major browser whose support is limited. IE 10 seems to be fairly in line with regard to the most critical features, but IE 9 and below lack features that make native drag and drop implementation frustrating.

Let’s close our eyes for a moment, and pretend we don’t need to support Microsoft Internet Explorer

Fortunately, the HTML5 specification includes a fairly robust API for drag and drop. Making HTML elements draggable and droppable is painless, and managing the related events is possible. The key to all of this is understanding the bare minimum needed in order to properly manage this functionality.

But isn’t everything “draggable” these days?

No, not quite. According to the HTML5 Drag and Drop specification, only images and anchor links are draggable by default (and the anchor must have an href attribute). So, if you want to drag any other kind of HTML element, there is a bit of work to do.

Wait, aren’t there a gazillion JavaScript libraries that make drag and drop a snap?

Yep, there sure are. So, if you merely want to download a library or jQuery plugin and simply “dragify” as needed, this article probably isn’t for you. But if you want to understand how native HTML5 drag and drop functionality works, read on!

HTML Base

<!DOCTYPE HTML>
<html>
<head>
	<link href="css/drag-and-drop.css" type="text/css" rel="stylesheet" />
	<link href="css/part-i.css" type="text/css" rel="stylesheet" />
</head>
<body>
	<article>
		<section id="content">
			<div class="drop-elements">
				<div class="dropElement droppable"></div>
			</div>
			<div class="drag-elements droppable  hasChild">
				<div id="drag1" class="dragElement redBorder">Drag me!</div>
			</div>
		<section>
	</article>
	<script src="js/jquery-1.11.1.min.js"></script>
	<script src="js/part-i.js"></script>
</body>
</html>

<!DOCTYPE HTML>

<html>

<head>

</head>

<body>

</div>

</div>

</article>

</body>

</html>

In the code example above, we have the base HTML for the rest of the examples in this article. For brevity sake, I’ve stripped out all but the most essential areas of the markup so that you can focus on the technologies demonstrated in this article. When you view the page source for the final working example, you will see that there is more HTML, but it is for presentational purposes only.

Making an Element Draggable

In order to make an element draggable, you need only add a “draggable” attribute to that element, and set its value to “true”. This can be done by including the “draggable” attribute in the original html, or via JavaScript.

Example # 1A

//make each dragElement draggable
$('.dragElement').attr('draggable','true');

1 2	//make each dragElement draggable $('.dragElement').attr('draggable','true');

In Example # 1A, we have made an HTML draggable by adding a “draggable” attribute to that element, and setting its value to “true”. While I could have simply added a “draggable” attribute to the HTML, I chose to do so using JavaScript in order to illustrate how much control you have over this.

The dragstart Event

While the code in Example # 1A is completely valid, unless the element in question is an image, or an anchor tag (with an href attribute), there is a bit more work to do. Providing a “draggable” attribute alone is not enough to make an element draggable. There is at minimum, a second step: provide an event handler for the dragstart Event.

The dataTransfer Object

The dataTransferobject is used to hold the data that is being dragged during a drag and drop operation.

Even in the most basic drag and drop implementation, the dataTransfer object is important. The reason for this is the core logic behind drag and drop: why would you want to drag something if you did not plan to eventually drop it? (At first I found this frustrating; I felt that the “draggable” attribute alone should suffice when you want to be able to drag an element. But the more I delved into the specification, the more the logic started to make sense.)

In order to drag an element, you’ll need to provide some data to the dataTransfer object. Ultimately, it does not matter what data you provide; you just need to use the setData method of the dataTransfer object to set some data. You must do this in the dragstart event. After your dragstart event handler returns, you cannot modify the dataTransfer object.

I bet I know what you are thinking now:

Aaaaaaaaaaaaahhhhhh, c’mon Kevin, another friggin’ object I gotta learn about? In the Intro you said something about this whole thing being “…easier than you may think” !!

I know. I kinda lied. But aren’t you glad you’re halfway across the river?

(Seriously, this is all no big deal. Considering how cool drag and drop is, learning about a few objects and methods is a small price to pay.)

The originalEvent Object

When thinking about drag and drop events, it becomes necessary to consider multiple event objects. For example, when you start dragging an element, it fires a “dragStart” event. But then consider the element that you might drop this element on. It fires a number of events as well. When handling any of these events, you will need access to the original event that fired, as a way to refer to the HTML element that was dragged. So, in your dragstart event handler, you’ll want to create a reference to the dragged HTML element itself. This way, in any of the events fired by the droppable element, you can obtain a reference to the element that was dragged (i.e. the element that you might want to drop onto the droppable element).

Example # 1B

//each dragable element needs this for its dragstart event
var dragStartHandler = function (ev) {
  ev.originalEvent.dataTransfer.setData("Text", ev.target.getAttribute('id'));
};

//each dragable element needs this for its dragstart event

var dragStartHandler = function (ev) {

ev.originalEvent.dataTransfer.setData("Text", ev.target.getAttribute('id'));

};

In Example # 1B, we bind an event handler for the dragstart event of the HTML element that we plan to drag. That handler is the function: dragStartHandler. The dragStartHandler function takes the current event as its first argument. We then use the setData method of the originalEvent’s dataTransfer object. The originalEvent object is a property of the current event. In this case, the originalEvent is the dragStart event. When calling the setData method, we pass “Text” as the first argument. That simply tells the setData method what type of data we are about to set. The second argument is the ID attribute of the element that is being dragged. This is accomplished by referencing the target object of the event, which is the element that is being dragged, and then use the target object’s getAttribute method to retrieve the ID attribute of the target element.

Setting Up the Droppable Element

You don’t need to do anything special to allow one HTML element to be dragged over another. Once an element is properly “draggable,” you can drag it anywhere you like. But just like playing cards with Kenny Rogers, that gets old pretty quick. The next logical step in implementing HTML5 drag and drop is setting up the droppable element(s) so that you can handle the various events that fire during the process.

The dragover and drop Events

Example # 2

//each droppable element needs this for its dragover event
var allowDragover = function (event) {
	//prevent the browser from any default behavior
	event.preventDefault();
},
//each of the four light-brown boxes at top have this bound to their drop event
dropHandler = function (event) {
	var id = '';

	//prevent the browser from any default behavior
	event.preventDefault();

	//handle your drop event here..
};

//bind the dragStartHandler function to all dragElements
$('.dropElement').bind('dragover',allowDragover);

//bind the dragStartHandler function to all dragElements
$('.dropElement').bind('drop',dropHandler);

//each droppable element needs this for its dragover event

var allowDragover = function (event) {

//prevent the browser from any default behavior

event.preventDefault();

//each of the four light-brown boxes at top have this bound to their drop event

dropHandler = function (event) {

var id = '';

//prevent the browser from any default behavior

event.preventDefault();

//handle your drop event here..

};

//bind the dragStartHandler function to all dragElements

$('.dropElement').bind('dragover',allowDragover);

//bind the dragStartHandler function to all dragElements

$('.dropElement').bind('drop',dropHandler);

The dragover Event

In Example # 2, we have bound two event handlers to the droppable HTML element. The allowDragover function is bound to that element’s dragover event, and as you can see, it has little functionality: it simply prevents any default behavior that the browser might implement. Surprisingly, this is critical; the drop functionality will not work correctly without it. This is one event handler that you have to simply “set and forget.”

The drop Event

In Example # 2, we bind the dropHandler function to the drop event of the droppable element. This is where the real action should take place.

Example # 3

//the light-brown box at top has this bound to its drop event
var dropHandler = function (event) {
	var id = '';

	//prevent the browser from any default behavior
	event.preventDefault();

	//get a reference to the element that is being dropped
	id = event.originalEvent.dataTransfer.getData("Text");

	//add the hasChild class so that the UI can update
	$(event.target).addClass('hasChild');

	//move the dragged element into the drop target
	event.target.appendChild(document.getElementById(id));

	$(document.getElementById(id)).html('<i>Dropped</i>!');
};

//the light-brown box at top has this bound to its drop event

var dropHandler = function (event) {

var id = '';

//prevent the browser from any default behavior

event.preventDefault();

//get a reference to the element that is being dropped

id = event.originalEvent.dataTransfer.getData("Text");

//add the hasChild class so that the UI can update

$(event.target).addClass('hasChild');

//move the dragged element into the drop target

event.target.appendChild(document.getElementById(id));

$(document.getElementById(id)).html('<i>Dropped</i>!');

};

In Example # 3, we’ve added some functionality to the dropHandler function. First, we prevent any default behavior that the browser might have implemented. Next, we retrieve the ID of the HTML element that was dragged, leveraging the work that we did in the dragStartHandler function. The steps here are virtually the opposite of those taken to set the ID of the dragged element: we use the getData method of the originalEvent’s dataTransfer object, which itself is a property of the event object’s originalEvent property.

Next, we add the class “hasChild” to the element that received the drop. This is for presentational purposes only, but it does allow us to provide a better user experience by changing the appearance of the element that received the drop. Then we “move” the element simply by appending it to the droppable element, and then change the dragged element’s innerHTML to “Dropped”. Just like changing the appearance of the droppable element, this kind of approach usually makes for a better user experience.

Example # 4

(function(){
  //each dragable element needs this for its dragstart event
	var dragStartHandler = function (ev) {
	  ev.originalEvent.dataTransfer.setData("Text", ev.target.getAttribute('id'));
	},
  //each droppable element needs this for its dragover event
  allowDragover = function (event) {
    //prevent the browser from any default behavior
    event.preventDefault();
  },
  //the light-brown box at top has this bound to its drop event
  dropHandler = function (event) {
    var id = '';

    //prevent the browser from any default behavior
    event.preventDefault();

    //get a reference to the element that is being dropped
    id = event.originalEvent.dataTransfer.getData("Text");
    
    //add the hasChild class so that the UI can update
    $(event.target).addClass('hasChild');

    //move the dragged element into the drop target
    event.target.appendChild(document.getElementById(id));

    $(document.getElementById(id)).html('<i>Dropped</i>!');
  };


  $(document).ready(function(){
    //make each dragElement draggable
    $('.dragElement').attr('draggable','true');
  
    //bind the dragStartHandler function to all dragElements
    $('.dragElement').bind('dragstart',dragStartHandler);

    //bind the dragStartHandler function to all dragElements
    $('.dropElement').bind('dragover',allowDragover);

    //bind the dragStartHandler function to all dragElements
    $('.dropElement').bind('drop',dropHandler);
  })
})();

(function(){

//each dragable element needs this for its dragstart event

var dragStartHandler = function (ev) {

ev.originalEvent.dataTransfer.setData("Text", ev.target.getAttribute('id'));

//each droppable element needs this for its dragover event

allowDragover = function (event) {

//prevent the browser from any default behavior

event.preventDefault();

//the light-brown box at top has this bound to its drop event

dropHandler = function (event) {

var id = '';

//prevent the browser from any default behavior

event.preventDefault();

//get a reference to the element that is being dropped

id = event.originalEvent.dataTransfer.getData("Text");

//add the hasChild class so that the UI can update

$(event.target).addClass('hasChild');

//move the dragged element into the drop target

event.target.appendChild(document.getElementById(id));

$(document.getElementById(id)).html('<i>Dropped</i>!');

};

$(document).ready(function(){

//make each dragElement draggable

$('.dragElement').attr('draggable','true');

//bind the dragStartHandler function to all dragElements

$('.dragElement').bind('dragstart',dragStartHandler);

//bind the dragStartHandler function to all dragElements

$('.dropElement').bind('dragover',allowDragover);

//bind the dragStartHandler function to all dragElements

$('.dropElement').bind('drop',dropHandler);

})

})();

In Example # 4, we have the full code for our working example.

Here is the working example for this article: http://examples.kevinchisholm.com/html5/drag-and-drop/part-i.html

Here is the JavaScript for this article’s working example: http://examples.kevinchisholm.com/html5/drag-and-drop/js/part-i.js

Summary

This article barely scratches the surface of what is possible with HTML5 Drag and Drop. My goal was to provide an introduction to the topic that focused on the bare essentials needed to get started. Below are links that provide much more in-depth information on the subject.