How to use generators support in Heroku

The use of Javascript has increased and the projects are getting more complex. The EcmaScript 6 brings many new features into languages that should make the development easier and make the Javascript ecosystem richer. Currently you could use some of the features on the server side with Node.js newer versions like 0.11. There isn’t many hosting services where you could select the running node engine. Luckily, Heroku has this support for this, there is nice site for versions.

2014-03-29-115418_1096x450_scrot

As you could see the version 0.11.12 is unstable but still you could use it. Lets assume you have already setup the project, now change the package.json, node property set it to ~0.11.


{
  "name": "myapp",
  "description": "a really cool app",
  "version": "0.0.1",
  "engines": {
    "node": "~0.11"
  },
  "dependencies": {
    "co": "^3.0.5"
  }
}
web: node --harmony server.js

The last step is to change the Procfile and add the –harmony flag. So the file should look something like this. This enables only small part of the ES6 functionality.

Some of the Javascript DOM methods

Even if the JQuery or any other Javascript library dominates the DOM manipulation, there is old Javascript DOM API which is used by the libraries.

For debug or to test out the methods use the, browser consoles where you can execute the code.

Selecting elements, selector methods. DOM methods can be accessed under the document object.

First method allows to select all the elements by tag name, I have not seen many cases where it’s used.

document.getElementsByTagName('tag name')

Second selecting by name, is very useful when you have to do validation for forms.

document.getElementsByName('content')

There is list of other selectors which can be used to select by Id and class name.

// Get by ID
document.getElementById('wp_fs_link')</code>

// By class names
document.getElementsByClassName('mceButton')

Another set of methods are querySelector finds only one element and querySelectorAll find all the matching elements. Only problem is the compatibility with older browsers of IE(5,6,7), FF(2.0,3.0) and some Opera versions, you can look the overall table .
These methods are special because you can use the CSS selectors. Most of the JQuery element selections are based on querySelector.

document.querySelector('a + img')</code>

document.querySelectorAll('ul &gt; li')

document.querySelectorAll('li[class="menupop"]')

More and more the web sites get dynamic(AJAX) and you need to create the DOM on the fly. Also the code blocks are heavier and contains more then just one element. So it is cleaner to use some html template library like JQuery templates, Mustache, Handlebars and others. But for one element DOM appending use the createElement method.

var p = document.createElement('p');
p.innerHTML = 'This is <em>the</em> content';</code>

// Add the element into heading elemnt
document.getElementsByTagName('h2')[0].appendChild(p)

Each call to methods innerHTML, appendChild or any methods which changes DOM structures are slow when you are making the massive changes, so be aware of that!

Same example in JQuery

// JQuery
$('h2:first').append($('<p>', { text: 'This is the content' }));

As an last example we create typical form and change the border color to red if the text box is empty, demo is.

Well I can not put HTML code because it is not escaped, but the Javascript one is here:

var form = document.forms['check-username']
, username = form['username']
, button = form['check'];</code>

button.onclick = function(e) {
var len = username.value.length;
username.style.border = (len &lt;= 0) ? 'solid 2px red' : '';
}

As you can see lot of the Javascript’s official DOM methods are really long to type, so make sure your IDE/text editor has good auto complete feature. Besides the verbose of method names it is good to use these methods when you need performance without the bells and whistles which comes with libraries.