You want X lines of text. Anything after that, gracefully cut off. That's "line clamping" and it is a perfectly legit desire. When you can count on text being a certain number of lines, you can create stronger and more reliable grids from the elements that contain that text, as well as achieve some symmetric aesthetic harmony.

There are a couple of ways to get it done, none of them spectacular.

In case that explanation wasn't clean, imagine you have some HTML like this:

<div class="module">
      <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
    </div>

And you want to limit it to exactly three lines in a container. Like this:

In all these examples, let's assume we have a "module".

.module {
      width: 250px;
      overflow: hidden;
    }

Weird WebKit Flexbox Way

David DeSandro showed us this little ditty a few years ago.

.line-clamp {
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;  
    }

One one hand, this is awesome and exactly what we need. CSS the perfect place for this. It's a real need and it should be this simple.

On the other hand... it's weird. why does it need to be a flexbox thing (the old version at that)? It doesn't work without that. And it's extremely fragile. Let's say you want the module (or the paragraph) to have some padding. You can't, because the padding will expose extra lines. That's what we get with half-baked non-standardized properties.

The Fade Out Way

The root of this technique is just setting the height of the module in a predictable way. Let's say you set the line-height to 1.2em. If we want to expose three lines of text, we can just make the height of the container 3.6em (1.2em × 3). The hidden overflow will hide the rest.

But it can be a bit awkward to just the text off like that. Ideally we would add ellipsis, but we can't reliably position them. So instead we'll fade out the text achieving the same kind of communication ("there is more...").

To fade out the last line, we make a box (a pseudo element will work great) and overlay a transparent-to-background-color gradient over the top. Making it nearly as wide as the container is best in case the last line is short. Because we know the line-height, we can make the pseudo element box exactly one line tall.

.fade {
      position: relative;
      height: 3.6em; /* exactly three lines */
    }
    .fade:after {
      content: "";
      text-align: right;
      position: absolute;
      bottom: 0;
      right: 0;
      width: 70%;
      height: 1.2em;
      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 50%);
    }

The Opera Overflow Way

Like WebKit, Opera has their own way to handle this. They apply ellipsis on the line you wish to. Of course the clock is ticking for Presto (Opera's rendering engine pre-Blink) so this isn't particularly useful. Perhaps it can still inform a future implementation though.

.last-line {
      height: 3.6em; /* exactly three lines */
      text-overflow: -o-ellipsis-lastline;
    }

The Clamp.js Way

Where there is a will there is a way (with JavaScript). I think that's a saying. Joseph J. Schmitt has an excellent library-free JavaScript thingy called Clamp.js for making this happen in a cross-browser way.

var module = document.getElementById("clamp-this-module");
    
    $clamp(module, {clamp: 3});

Make sure you target the element with the text directly inside of it. Originally I tried putting the ID on the module, which worked in Chrome/Safari, but failed in Firefox. Putting it on the <p> made it work in both (Thx Merri).

The Demos

Check out this Pen!

Updates

Vesa Piittinen created an alternative method to Clamp.js.

Unlike Clamp.js it retains all the text within the clamped element and uses text-overflow to do the magic.

FT Labs also has created a JavaScript plugin to do the job. It's nice in that you don't have to specify the number of lines, it just happens when the text overflows the container, so the design decision stay in the CSS.

Both of these examples have been added to the main Pen.

jQuery Conference Portland 2013 has a limited number of regular tickets still available. Two days. Two tracks. Fresh speakers. Jun 13-14. $50 off for members of the jQuery Foundation. Join today and get your first year of fan dues paid for with purchase of both a training and conference ticket. Training provided by Bocoup on Jun 12. Use coupon code CSSTricks25off for $25 off.

Line Clampin’ is a post from CSS-Tricks

Our goal with the Thief of Thieves Experience is to deliver an immersive experience through Internet Explorer 10 equal to one you’d typically find in a native application. We do this by using the latest in HTML5, CSS3, touch, and related technologies. This article will explore the techniques used to develop the app.

Microsoft’s MDOP for IT management also known as Microsoft’s Desktop Optimization Pack receives a list of new IT administration capabilities for Windows 8.

Adobe has re-engineered Flash Professional as a 64-bit application including real-time mobile testing and a new code editor for HTML5.

Out of Mind, an exhibition curated by 2013 Visual Arts senior, Carlyn Thomas, opened last week in Baltimore’s Gallery 788. Coverage of the exhibition and video of a curatorial talk by Thomas, appeared Sunday in the Baltimore Post-Examiner.

The curatorial project is part of Thomas’ senior thesis as an art history & museum studies student, and continues through the 11th.

Learn more about the project here.

It's back.

Direct Link to Article — Permalink

jQuery Conference Portland 2013 has a limited number of regular tickets still available. Two days. Two tracks. Fresh speakers. Jun 13-14. $50 off for members of the jQuery Foundation. Join today and get your first year of fan dues paid for with purchase of both a training and conference ticket. Training provided by Bocoup on Jun 12. Use coupon code CSSTricks25off for $25 off.

CSS Zen Garden is a post from CSS-Tricks

Today, ECMAScript 6 is in the process of being finalized. ECMAScript is the foundation of JavaScript and, hence, exploring the proposed features today also means that we get a sneak peak at how we will be writing JavaScript in the near future! In this article, we’ll explore ten new features, with a significant focus on tools, browsers and transpilers.

A Brief History: ECMA, ECMAScript and JavaScript

JavaScript was originally developed by Brendan Eich of Netscape, and officially released as part of Netscape Navigator 2.0 in 1995. A year later, JavaScript was submitted to ECMA International, a body that facilitates the standardization of information and communication technology and consumer electronics, so that it can be formalized industry-wise. ECMAScript, thus, became the name of the scripting language standardized in ECMA-262.

The ECMAScript standard forms the backbone of many other derived languages, including ActionScript and JScript. Through the years, ECMAScript has gone through four versions, with the discussions today very much revolving around version six, which has also been code-named, ECMAScript Harmony.

Version correspondence

Before we dive into these new features, it’s important to note that the ECMAScript standard forms the foundation of JavaScript. There are numerical differences between each of the JavaScript versions and the corresponding ECMAScript editions. This is to say that JavaScript is compatible with the ECMAScript standard, while providing more features. The table below summarizes the relationship between JavaScript and ECMAScript:

ES6 Overview

Goals

JavaScript has come a long way since its humble beginnings nearly twenty years ago. Today, developers are writing thousands of lines of code creating complex JavaScript applications. Before we dive into the detailed features of ES6, you may want to look at the big picture that is defined in the specification drafts, in terms of requirements, goals, means and themes. One of the goals for ES6 is to be a better language for creating:

• complex applications
• libraries
• code generators

Compatibility

The ES6 compatibility table is very useful, as it tells us the ES6 features that are supported in the current browser. It also gives us a handy link to the specifications for each of the features listed. Do note that some of the features’ existence might not mean full compliance with specifications. When working with Chrome, be sure to enable the “Experimental JavaScript” flags.

Features

Now that the big picture is defined, let’s explore how we can implement them. In the following sections, we will discuss ten features of ES6, using various tools so that we can understand ES6 both in theory and practice. Prior knowledge of JavaScript is a pre-requisite, so feel free to check out many resources on JavaScript.

Listed below are the features that we’ll go through with a different tool. Try them out one by one, or jump to the specific feature that you’d like to explore:

1. Block scoping with let [ using Firefox browser ]
2. Block scoping with const [ using Chrome browser ]
3. Classes [ using Traceur ]
4. Default function parameters [ using TypeScript ]
5. Collections [ using NodeJS ]
6. Destructuring [ using Firefox browser ]
7. Rest parameters & Spread operator [ using Grunt plugin Traceur ]
8. Iterators [ using Firefox browser ]
9. Array comprehension [ using Firefox browser ]
10. Modules (using ES6 Module Transpiler)

Feature 1 - Block Scoping with let

• Documentation: let
• Tool: Firefox browser 20.0: Menu > Tools > Web developer > Web Console

JavaScript variables are function-scoped. This means that, even if there are variables declared in a nested block, they are available throughout the function. Let’s review a short example below; we’ll simply use the web console in Firefox or Chrome to run them. What do you think will be the value of jsFuture?

var jsFuture = "es6";
    (function () {
      if (!jsFuture) { var jsFuture = "es5"; }
      console.log(jsFuture);
    }());
    

In the above example, the value of jsFuture in the console.log statement will be “es5″. Crucial to your understanding is the fact that, in JavaScript, variable declarations are hoisted to the top, but variable initializations, on the other hand, are not. Hence, regardless of where the variables are initialized and declared, within the function scope, they will always be hoisted. The snippet below is exactly the same – with comments to illustrate this feature of variable hoisting.

var jsFuture = "es6";
    (function () {
      // var jsFuture = undefined;
      // variable hoisting
      if (!jsFuture) { var jsFuture = "es5"; }
      console.log(jsFuture); // "es5"
    }());
    

ES6 tackles this issue with let, which is like var, except for the fact that it is block scoped instead of function scoped. Let’s consider another example with var below. Calling the function es[6]() will give us the value of i = 10. Notice that, even though var i = 0; is declared in the for loop, the scope of var i defaults to global. Hence, when the function es[6]() is executed, the value of i is 10.

var es = [];
    for (var i = 0; i < 10; i++) {
      es[i] = function () {
        console.log("Upcoming edition of ECMAScript is ES" + i);
      };
    }
    es[6](); // Upcoming edition of ECMAScript is ES10
    

Let’s now use let. To code this out, we’ll use Firefox and open up the web console through the menu (Tools > Web developer > Web Console). Creating a block-scoped variable within the for loop, let c = i; made it block scoped.

var es = [];
    for (var i = 0; i < 10; i++) {
      let c = i;
      es[i] = function () {
        console.log("Upcoming edition of ECMAScript is ES" + c);
      };
    }
    es[6](); // Upcoming edition of ECMAScript is ES6
    

Firefox already supports many upcoming ES6 features. Refer to the compliance table for Firefox to keep updated on which features are supported, and which ones are also compliant with the current specification.

Feature 2 - Block Scoping with const

• Documentation: const
• Tool: Chrome Browser > View > Developer > JavaScript Console

Constant definitions are now possible with const. let and const behave similarly in the sense that both are block scoped, but with const, the values are read-only and cannot be re-declared later on. Let’s review a simple code example in Chrome:

Feature 3 - Classes

• Documentation: class
• Tool: Traceur with Chrome Browser > View > Developer > JavaScript Console

In object-oriented programming languages, a class is a representation of an object. It forms the blueprint, while an object is an instance of a class. With regard to JavaScript, it is a class-less programming language and everything is an object. Traditionally, we’ve used functions and prototypes to implement classes. Let’s explore one common way of implementing class in ES5.

var Language = function(config) {
      this.name = config.name;
      this.founder = config.founder;
      this.year = config.year;
    };
    
    Language.prototype.summary = function() {
      return this.name + " was created by " + this.founder + " in " + this.year;
    };
    

Next, let’s see how ES6 implements classes with minimal class declaration syntax that can be extremely important to distinguish classes and functions. To code out class using the ES6 syntax, we will use Google’s Traceur, which is a transpiler that compiles ES6 code into ES5. First, let’s create the html file structure within which we will insert the ES6 syntax for classes. In order to compile the Traceur code, we require both traceur.js to compile Traceur to JavaScript, as well as bootstrap.js to bind them all. Finally, Traceur will look for script type="text/traceur" tags to compile the relevant code inside the tags into vanilla JavaScript.

<!DOCTYPE html>
    <html>
    <head>
      <title>ES6 Classes</title>
      <script src="https://traceur-compiler.googlecode.com/git/bin/traceur.js"></script&gt;
      <script src="https://traceur-compiler.googlecode.com/git/src/bootstrap.js"></script&gt;
    </head>
    <body>
      <script type="text/traceur">
        // insert ES6 code
      </script>
    </body>
    </html>
    

Next, within the script type="text/traceur" tags, let’s use the ES6 syntax to implement the same class that we previously did for Language.

class Language {
      constructor(name, founder, year) {
        this.name = name;
        this.founder = founder;
        this.year = year;
      }
      summary() {
        return this.name + " was created by " + this.founder + " in " + this.year;
      }
    }
    

We can now create an instance of the class Language by opening the HTML file in the Chrome browser as var js = new Language. In the console, we’ll see the prompts for other properties of the language as well!

With such a clear syntax declaration, we can also move on to extend the class to implement a sub-class MetaLanguage that will inherit all the properties from the parent class Language. Inside the constructor function, we will require the function super that will call the constructor of the parent class so that it is able to inherit all of its properties. Lastly, we can also add on extra properties, such as version, as illustrated in the code below. Let’s review the ES6 syntax and run it in the Chrome browser:

class MetaLanguage extends Language {
      constructor(x, y, z, version) {
        super(x, y, z);
        this.version = version;
      }
    }
    

Traceur is a useful transpiler that allows us to code using the ES6 syntax, while doing the heavy-lifting for us to compile it back to the current JavaScript version. Do try out other ES6 features in Traceur as well!

Feature 4 - Default Function Parameters

• Documentation: default function parameters
• Tool: TypeScript 0.8.3

With default function parameters, we can always have function parameters as an option by setting some defaults. The syntax for this feature in ES6 is extremely intuitive. The default parameters are defined when the functions are defined. Let’s have a look at the ES6 syntax below in a new TypeScript file with an extension of *.ts.

function history(lang = "C", year = 1972) {
      return lang + " was created around the year " + year;
    }
    

Next, we will install TypeScript as an npm module and run the file .*ts and compile it to vanilla JavaScript. Here are the installation and then compilation commands in the command line:

$ npm install -g typescript
    $ npm view typescript version
    0.8.3
    $ tsc 4-default-params.ts
    

The command above will create a vanilla JavaScript file, called 4-default-params.js, which can then be called from an HTML file. Here’s the simple HTML file that will call the external JavaScript file that is created by the TypeScript compiler:

<!doctype html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>ES6 Default Parameters</title>
    </head>
    <body>
      <script src="4-default-params.js"></script>
    </body>
    </html>
    

Finally, we will open the HTML file in Chrome/Firefox and call the function history() two times, with and without the function parameters. Notice that not passing in any function parameters will fall back to the default parameters:

Do check out other TypeScript features, including class or go through a TypeScript tutorial for more in-depth usage.

Feature 5 - Collections

• Documentation: Sets and Maps
• Tool: NodeJS v0.10.4

ES6 offers new data structures previously not available in JavaScript. Before we jump into exploring two such data structure (Sets and Maps), let’s see how we can run ES6 syntax with NodeJS. Install NodeJS; from here on, we will work in the command line. Firstly, we will check the NodeJS version installed, and then check which options will enable ES6 features with the command node --v8-options | grep harmony.

$ node --version
    v0.10.4
    
    $ node --v8-options | grep harmony
    --harmony_typeof (enable harmony semantics for typeof)
    --harmony_scoping (enable harmony block scoping)
    --harmony_modules (enable harmony modules (implies block scoping))
    --harmony_proxies (enable harmony proxies)
    --harmony_collections (enable harmony collections (sets, maps, and weak maps))
    --harmony (enable all harmony features (except typeof))
    

Next, start the NodeJS repl and query which properties are available for Set and Maps. We will start the NodeJS repl with node --harmony to enable all ES6 features.

$ node --harmony
    > Object.getOwnPropertyNames(Set.prototype)
    [ 'constructor',
      'add',
      'has',
      'delete' ]
    > Object.getOwnPropertyNames(Map.prototype)
    [ 'constructor',
      'get',
      'set',
      'has',
      'delete' ]
    > .exit
    $
    

Sets

Sets are simple data structures that are similar to arrays, but each value is unique. Let’s create a new file, called 5-sets.js, and insert some code to create, add, delete and query the new set that we will create. Also, note that we will add “Hippo” data twice, but in the set, it will be registered only once!

var engines = new Set(); // create new Set
    
    engines.add("Gecko"); // add to Set
    engines.add("Trident");
    engines.add("Webkit");
    engines.add("Hippo");
    engines.add("Hippo"); // note that Hippo is added twice
    
    console.log("Browser engines include Gecko? " + engines.has("Gecko"));    // true
    console.log("Browser engines include Hippo? " + engines.has("Hippo"));    // true
    console.log("Browser engines include Indigo? " + engines.has("Indigo"));   // false
    
    engines.delete("Hippo"); // delete item
    console.log("Hippo is deleted. Browser engines include Hippo? " + engines.has("Hippo"));    // false
    

Run the file in the node repl with the command node --harmony 5-set.js. Note that, even though “Hippo” was added twice to the set, upon deleting it, the set didn’t include it anymore. This once again illustrates that a set is a data structure that can only contain unique values.

Maps

Maps are quite similar to JavaScript object key-value pairs. Using a unique key, we can retrieve the value. In ES6, the key can be any JavaScript data type and not just strings. That’s the interesting part! Let’s create a new file, called 5-map.js, to try out the create, get and delete features:

var es6 = new Map(); // create new Map
    
    es6.set("edition", 6);        // key is string
    es6.set(262, "standard");     // key is number
    es6.set(undefined, "nah");    // key is undefined
    
    var hello = function() {console.log("hello");};
    es6.set(hello, "Hello ES6!"); // key is function
    
    console.log( "Value of 'edition' exits? " + es6.has("edition") );     // true
    console.log( "Value of 'year' exits? " + es6.has("years") );          // false
    console.log( "Value of 262 exits? " + es6.has(262) );                 // true
    console.log( "Value of undefined exits? " + es6.has(undefined) );     // true
    console.log( "Value of hello() exits? " + es6.has(hello) );           // true
    
    es6.delete(undefined); // delete map
    console.log( "Value of undefined exits? " + es6.has(undefined) );      // false
    
    console.log( es6.get(hello) ); // Hello ES6!
    console.log( "Work is in progress for ES" + es6.get("edition") ); // Work is in progress for ES6
    

As shown with the ES6 collections features, NodeJS harmony option already supports others ES6 features such as block scoping, proxies and modules. Do try them out in NodeJS as well!

Feature 6 - Destructuring

• Documentation: Destructuring
• Tool: Firefox browser 20.0: Menu > Tools > Web developer > Web Console

In programming languages, the term “destructuring” denotes pattern matching. In ES6, we can do some pretty nifty pattern matching in arrays and objects that previously would have taken us more than one step. Let’s explore some of them by coding it out in Firefox web console.

Array destructuring

With array destructing, we can initialize variables at once, or even swap them instead of having the conventional way of creating a var temp; temporary variable.

var [ start, end ] = ["earth", "moon"] // initialize
    console.log(start + " calling " + end); // earth calling moon
    
    [start, end] = [end, start] // variable swapping
    console.log(start + " calling " + end); // moon calling earth
    

Destructuring also becomes a useful shorthand when returning multiple values from a function, as we do not need to wrap around an object anymore. Also, to skip certain variables, just leave the array element empty:

function equinox() {
      return [20, "March", 2013, 11, 02];
    }
    var [date, month, , ,] = equinox();
    console.log("This year's equinox was on " + date + month); // This year's equinox was on 20March
    

Object destructuring

Due to destructuring, variables can also be initialized from an object that is returned from a function even with deeply nested objects. Also, just like the array patterns, we can skip the ones not needed. Here’s the snippet of code that illustrates just this:

function equinox2() {
      return {
        date: 20,
        month: "March",
        year: 2013,
        time: {
          hour: 11, // nested
          minute: 2
        }
      };
    }
    
    var { date: d, month: m, time : { hour: h} } = equinox2();
    // h has the value of the nested property while "year" and "minute" are skipped totally
    
    console.log("This year's equinox was on " + d + m + " at " + h); // This year's equinox was on 20March at 11
    

Feature 7 - Rest Parameters and Spread Operators

• Documentation: Rest parameters & Spread operator
• Tool: Grunt plugin Traceur

Rest parameters

In ES6, rest parameters allows us to easily use a few fixed parameters in a function, along with the rest of the trailing and variable number of parameters. We already use arguments, which is an array-like object that defines the arguments passed to a function, but clearly we cannot use the array function to manipulate these arguments. With a clear syntax in ES6, it also moves the intent of the developer into the syntax level with three dots ... to denote a variable number of arguments.

Let’s try to use rest parameters in the ES6 syntax with gruntjs and its plugin for the traceur transpiler, which we used in the previous section.

1. Install grunt command line utility:

       $ npm uninstall -g grunt
           $ npm install -g grunt-cli
           

2. Create a file, called package.json, which will define the various modules needed to run Grunt. Note that this list of dependencies includes the traceur plugin:

       {
             "name": "rest-params",
             "version": "0.1.0",
             "devDependencies": {
               "grunt": "0.4.1",
               "grunt-traceur": "0.0.1"
             }
           }
           

3. Create the Gruntfile.js which will contain just one task traceur that will convert ES6 syntax to today’s JavaScript. With this, we will be able to try out ES6 rest parameters.

       module.exports = function(grunt) {
       
             grunt.initConfig({
               pkg: grunt.file.readJSON('package.json'),
               traceur: {
                 custom: {
                   files:{
                   'js/': ['rest-spread.js']  // dest : 1
                   }
                 }
               }
             });
       
             grunt.loadNpmTasks('grunt-traceur');
             grunt.registerTask('default', ['traceur']);
       
           };
       
           

4. Create a simple index.html to call the traceur-compiled JavaScript file, js/rest-spread.js:

       <!DOCTYPE html>
           <html>
           <head>
             <title>ES6 Rest parameters</title>
           </head>
           <body>
             <script src="js/rest-spread.js"></script>
           </body>
           </html>
           

5. Most importantly, we’ll create the file rest-spread.js, which will contain the rest parameter syntax:

       function push(array, ...items) { // defining rest parameters with 3 dot syntax
             items.forEach(function(item) {
               array.push(item);
               console.log( item );
             });
           }
       
           // 1 fixed + 4 variable parameters
           var planets = [];
           console.log("Inner planets of our Solar system are: " );
           push(planets, "Mercury", "Venus", "Earth", "Mars"); // rest parameters
           

6. Finally, we will run grunt in the command line, which will, by default, run the traceur task and create the file, js/5-rest-spread.js. Next, just view the file index.html in the browser console:

       $ npm install
           $ grunt
           ╰─$ grunt
           Running "traceur:custom" (traceur) task
           js/ [ 'rest-spread.js' ]
           Compiling... js/
           Compilation successful - js/
           Writing... js/
           js/rest-spread.js successful.
           Writing successful - [object Object]
           

   

Spread operator

A spread operator is the opposite of rest parameters. When calling a function, we can pass in the fixed argument that is needed along with an array of a variable size with the familiar three dot syntax, to indicate the variable number of arguments.

We will use the same project as the rest parameters above and append in the spread operator code to the file rest-spread.js. In the example below, the function requires six separate arguments. When calling the function, the data is passed as an array with the spread operator. Let’s see how the syntax looks, when calling the function with fixed arguments as well as a variable number of arguments:

1. Append the spread operator code to rest-spread.js:

       // Spread operator "...weblink"
           function createURL (comment, path, protocol, subdomain, domain, tld) {
                 var shoutout = comment
                   + ": "
                   + protocol
                   + "://"
                   + subdomain
                   + "."
                   + domain
                   + "."
                   + tld
                   + "/"
                   + path;
       
             console.log( shoutout );
           }
       
           var weblink = ["hypertext/WWW/TheProject.html", "http", "info", "cern", "ch"],
             comment = "World's first Website";
       
           createURL(comment, ...weblink ); // spread operator
       
           

2. Run the traceur compile through the Grunt task in the command line, and view the file, index.html, in the browser:

       $ grunt
           Running "traceur:custom" (traceur) task
           js/ [ 'rest-spread.js' ]
           Compiling... js/
           Compilation successful - js/
           Writing... js/
           js/rest-spread.js successful.
           Writing successful - [object Object]
       
           Done, without errors.
           

   

If you’re already using GruntJS as a build tool in your current project, it will be easy to integrate it with ES6 plugins. So do try out other GruntJS ES6-related plugins to compile ES6 syntax to current JavaScript.

Feature 8 - Iterators

• Documentation: Iterator
• Tool: Firefox browser 20.0: Menu > Tools > Web developer > Web Console

JavaScript offers for-in for iteration, but it has some limitations. For example, in an array iteration, the results with a for-in loop will give us the indexes and not the values. Let’s take a look at the code below to illustrate this:

var planets = ["Mercury", "Venus", "Earth", "Mars"];
    for (p in planets) {
      console.log(p); // 0,1,2,3
    }
    
    var es6 = {
      edition: 6,
      committee: "TC39",
      standard: "ECMA-262"
    };
    for (e in es6) {
      console.log(e); // edition, committee, standard
    }
    

Let’s try the same concept, but, this time, with for-of with an array, a set and a map:

var planets = ["Mercury", "Venus", "Earth", "Mars"];
    for (p of planets) {
      console.log(p); // Mercury, Venus, Earth, Mars
    }
    
    var engines = Set(["Gecko", "Trident", "Webkit", "Webkit"]);
    for (var e of engines) {
        console.log(e);
        // Set only has unique values, hence Webkit shows only once
    }
    
    var es6 = new Map();
    es6.set("edition", 6);
    es6.set("committee", "TC39");
    es6.set("standard", "ECMA-262");
    for (var [name, value] of es6) {
      console.log(name + ": " + value);
    }
    

Feature 9 - Array Comprehension

• Documentation: Array comprehension
• Tool: Firefox browser 20.0: Menu > Tools > Web developer > Web Console

Array comprehensions give us a shorthand syntax to manipulate each of the array contents in a certain pattern. It is very similar to the map() or filter() methods available in the Array object. Let’s examine how we are using map()

var temperature = [0, 37, 100];
    function degToKelvin(deg) {
      return deg + 273;
    }
    temperature.map(degToKelvin); // [273, 310, 373]
    

Let's run through the same feature in Firefox to see the shorthand syntax in ES6 to create arrays with as many as three loops to create possible solutions for the game, Cluedo:

// Array created with 1 loop
    var temperature = [0, 37, 100];
    [t + 273 for (t of temperature)]; // [273, 310, 373]
    
    // Array created with 3 loops
    var suspects = ["Miss Scarlet", "Colonel Mustard"],
      weapons = ["Candlestick", "Dagger"],
      rooms = ["Kitchen", "Ballroom"];
    
    [(console.log(s + " with a " + w + " in the " + r)) for (s of suspects) for (w of weapons) for (r of rooms)];
    

Feature 10 - Modules

• Documentation: Modules, Modules examples, Modules loaders
• Tool: ES6 Module transpiler

In programming languages, modules perform isolated discrete functions and are independent of one another. This helps to not only build reusable components across projects, but also keeps errors isolated to the parts related to the current project. We have been creating modules in JavaScript typically with AMD or CommonJS. Let's create a simple module using the ES6 syntax and ES6 Module transpiler.

1. First, let's create the HTML file, index.html, that will call the essential JavaScripts. We'll be using RequireJS as an AMD loader; hence, we refer to a CDN copy of the latest RequireJS file. Next, we also add the attribute, data-main, on the script tag to tell RequireJS to load the js/init.js file.

       <!DOCTYPE html>
           <!doctype html>
           <html lang="en">
           <head>
             <meta charset="UTF-8">
             <title>ES6 Modules</title>
           </head>
           <body>
             <script src="//cdnjs.cloudflare.com/ajax/libs/require.js/2.1.5/require.min.js" data-main="js/init"></script>
           </body>
           </html>
           

2. Now, we will create the file, js/init.js, which will just invoke the js/main.js file:

       require(['main'],
             function(){
             });
           

3. Create the module, circle, in the file, in/circle.js, in the ES6 syntax. This module exports two functions:

       export function area(radius) {
             return Math.PI * radius * radius;
           }
       
           export function circumference(radius) {
             return 2 * Math.PI * radius;
           }
           

4. Create the file, in/main.js, that will import the module circle so that we can use the functions of that particular module. Notice the import syntax:

       import { area, circumference } from 'circle';
       
           console.log("Area of the circle: " + area(4) + " meter squared");
           console.log("Circumference of the circle: " + circumference(14) + " meters");
           

5. At this point, the folder structure is shown below. We'll use the ES6 Module transpiler to create ES5 compatible code with two newly created files: js/circle.js and js/main.js.

       $ tree
           .
           |-- in
           |   |-- circle.js
           |   `-- main.js
           |-- index.html
           `-- js
               `-- init.js
           

6. Install the ES6 Module Transpiler:

       $ npm install https://github.com/square/es6-module-transpiler.git
           $ compile-modules --help
           

7. Finally, we will transpile these two files. Navigate to the folder, in, from the command line:

       $ compile-modules circle.js --type amd --to ../js
           $ compile-modules main.js --type amd --to ../js
           $ cd ..
           $ tree
           .
           |-- in
           |   |-- circle.js
           |   `-- main.js
           |-- index.html
           `-- js
               |-- circle.js
               |-- init.js
               `-- main.js
           

8. Do look at the transpiled code in the files js/circle.js and js/main.js. We will now open up the file, index.html, in the browser to see modules in action! We will need to use a web server to run this file. I'm using the Python SimpleHTTPServer. Navigate to the command line in the root of the file, index.html:

       $ python -m SimpleHTTPServer 8000
           

   

Resources

Many of our web development community members have openly shared about ES6 and what's coming up. I highly recommend going through their blog categories related to ES6:

• Brendan Eich
• Addy Osmani
• Ariya Hidayat
• Nicholas Zakas
• Axel Rauschmayer
• Brandon Benvie

And, for some further reading:

• ECMAScript 6 support in Mozilla
• Draft specification for ES.next
• The Future of JavaScript, a video by Dave Herman
• ECMAScript 6 - The Refined Parts (video and slides) by Kit Cambridge
• Latest Tweets on ES mailing list
• es6 - my fav parts
• ES6 has proper tail calls
• Power of Getters
• ECMAScript 6
• ES6 deep Dive by Dave Herman

Play with ES6 Today

There you have it: ten features of ES6 with tools that allow us to code with the new syntax today. I hope this has made you more excited about what's to come! Please note that, since the standardization work is in progress, the syntax, features and compliances might change. Nonetheless, it's definitely worth the effort to dig in sooner than later.