How to Use Javascript 6 (ES6) Right Now Including ‘Import’

Note: This post is outdated because Babel changed the way it works. Please read this updated tutorial to start writing ES6 apps.

So you want to use the new Javascript, most popularily denoted as ES6 (ECMAScript version 6)? Why wouldn’t you, it has all these neat features like actual classes with constructors, arrow functions, blockscoping, etc…

If you’re writing Javascript on the back-end with io.js (Nodejs cooler and younger brother) this is already possible out of the bat. If you want ES6 on the front end though, you will need to use some magic which I will show in this post.


Tutorial – How to use Livereload with Nodemon in Gulp to Automatically Reload your Browser and Restart your App

Task runners are a wonderful thing to have once they are operational . But sometimes they might not be so easy to set up. In this post I want to focus on using two plugins that really speed up your workflow when developing both on the back end and the front end. I will be using a basic Node(Express) example to show case.


Task Runners, A comparison between Grunt, Gulp, Broccoli and Mimosa

Note: This article was written and researched in January 2015, but I just got around to publishing it today (April 5th, 2015).

Task Runners make your life easier when developing for the front-end by automating tasks. Except for when you have to configure them for the first time. Try not to lose your sanity.

Javascript Projects


Painter is a chrome extension which adds the ability to use a drawing pad right in your browser without leaving your current page.

Screenshot of the extension in use.
Screenshot of the extension in use.

How to use:

  • Download the file
  • Go to chrome://extensions/ in your browser
  • Drag & Drop the downloaded file in to the extension’s page.
  • A Dialog should appear, select ‘Add’ and the extension will be installed and should appear next to your omnibox.
  • the extensions icon is a smiley face.
  • Click the Icon and you can start drawing.
  • To save, press the save button, this will take you to another window where you can right click the image and ‘save as’ (I want to improve this, the saving should be more seamless.)

I recently had a project where I had to deal with the canvas element to create digital signatures. This lead me to get a little interested in the canvas. At that same time my team leader created a paint demo using canvas in codepen (probably out of influence from the same project) so I wanted to give it a try as well. I first wanted to create an extension for the new whatsapp web service. I wanted the user to be able to draw using the extension and then just directly push it to web.whatsapp but I never figured out how to push it. Hopefully they bring out an api? It would have been just like MSN messenger back in the day where you could draw and push that drawing directly. Since I couldn’t figure out how to implement that functionality I just made a general extension.

Github link