Tag: ecmascript6

This is the second article of the EcmaScript 6 niceties serieES6 also known as ES2015 brought a truck-load of new features and structures into Javascript and renewed the language as we knew it. This serie will highlight a few of the ES6 niceties you might find useful in your next Javascript project.
Today’s article is about those funny dots; rest- and spread-operator.

When looking at ES6 code for the first time you’ll probably notice the usage of three dots which you haven’t seen in any code written in Javascript’s earlier standards (<= ES5).
These three dots don’t necessarily do the same job, as there are two operators using that three-dot-syntax.

Rest operator

“The rest” can be assigned to a variable, using the rest-operator. Look at these rest-arguments:

function replace(string, ...replacements) {
  // return another string;
function subtract(...numbersToSubtract) {
  return numbersToSubtract.reduce((sum, next) => sum - next);
subtract(10, 1, 2, 3); // 4

Note that the rest operator must be a function’s last parameter!

Spread operator

The spread operator is sort of the opposite of the rest-operator: It takes an array of values, and turns it into ‘something else’ which uses comma-seperation. This might sound a little foggy, but these examples will clearify this:

// function calls
function combine(...numbers) {
  return subtract(...numbers) + add(...numbers);
combine(10,1,2,3); // 4+16=20

// assignments
const x = [1,2,3]; // 1,2,3
const y = [...x,4,5,6]; // 1,2,3,4,5,6
const z = [4,5,6,...x]; // 4,5,6,1,2,3
// assignments that converts Set and Map to an Array
let set = new Set([1, 2, 3, 3, 3, 4, 5]),
    array = [...set]; // [1,2,3,4,5];
let map = new Map([ ["name", "Sjoerd"], ["age", 40] ]),
    array = [...map]; // [ ["name", "Sjoerd"], ["age", 40] ]

// destructuring
const [a,b,...z] = y

Nearby future

The last example is called destructuring. In ES6 you can destructure ‘iterables’ (Array, Map, Set) and objects.

const { name, age } = { name: 'Sjoerd', age: 40, isDeveloper: true }

But you can’t destructure an object using the spread-operator. That could be so useful, especially working with React JS, where you find yourself often extracting values from props and state object literals.

But that is coming our way; Object Rest Spread proposal is in stage 4 in the ECMAScript approval process.
Using this Babel plugin enables you to use it now already.

const { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 }
z==={ a: 3, b: 4 }

In React practice

let props = {};
props.foo = x;
props.bar = y;
const component = <Component {...props} />;

const props = { foo: 'default' };
const component = <Component {...props} foo={'override'} />;
console.log(component.props.foo); // 'override'

This is the first article of the EcmaScript 6 niceties serie. ES6 also known as ES2015 brought a truck-load of new features and structures into Javascript and renewed the language as we knew it. This serie will highlight a few of the ES6 niceties you might find useful in your next Javascript project.
Today’s article is about arrow functions.

Arrow functions have a different syntax than traditional Javascript functions (using =>), but they’re not just a shorthand notation; they behave differently in a few ways. I’ll show you a few common examples of when and how to use those functions, compared to Javascript prior to ES6.

Arrow function syntax – pretty short!

Look at the following piece of code. Here you see the arrow function assembling the tradition Javascript function. You can see the syntax is rather short, and you’ll see its variations get shorter and shorter 🙂

var es5Function = function(a,b) {
    return a + b;
let es6Function = (a,b) => { // rather similar to es5Function
    return a + b;
// note implicit return
let es6FunctionShorthand = (a,b) => a+b;
let es6DamnShort = y => y+2;

console.log( es5Function(1,2) ); // 3
console.log( es6Function(1,2) ); // 3
console.log( es6FunctionShorthand(1,2) ); // 3
console.log( es6DamnShort(1) ); // 3

As anonymous function

In Javascript you’ll be using anonymous function more than often 🙂 – they’re all over the place! Arrow functions can be quite handy right here, because of their short syntax and their different behavior. Let’s start rather simple, an event handler:

function doSomething() {
    console.log("Do something");
myButton.addEventListener('click', doSomething, true);

Here the function doSomething is used as an event-handler, and can be (re)used by other code.
Every now and then, you first need to take care of some things in a handler before you start calling reusable code. Sometimes the reusable function expects other parameters or you need to do / check something with the given arguments. For example with the event argument:

/* ES <= 5 */
myAnchor.addEventListener('click', function(event){
}, true);

/* ES6 */
myAnchor.addEventListener('click', event=>{
}, true);

Nothing new happened here, but your code gets a lot cleaner.
Remember how short arrow functions’ syntax can get. Imagine how much cleaner the following code becomes compared to its ES5 counterpart:

function doX(x){
    console.log(`Do ${x}`);

myButton.addEventListener('click', ()=>{
}, true);
// it can get very short!
myButton.addEventListener('click', ()=>doX("anything"), true);

Doesn’t bind ‘this’

So far arrow function just makes your code cleaner, but still function as always. One of the main new behaviors you’ll get to use a lot is that it doesn’t (re)bind this.
Apart from when your using a callback for jQuery.each you’ll be using a workaround if you need to access this from within your (anonymous) callback / event-handler function. Often by declaring something like ‘var that = this;‘ before creating the anonymous function, and use that in stead of this.
Compare these two examples:

/* ES &lt; 5 */
var ES5Clickers = {
    init: function() {
        this.myButton = document.getElementById("butt");
        this.myAnchor = document.getElementById("link");

        this.myButton.addEventListener('click', this.doSomething, true);
        var that = this;
        this.myAnchor.addEventListener('click', function(event){
            /* this.doSomething(); // this.doSomething is not a function */
        }, true);
    doSomething: function() {
        console.log("ES5Clickers: Do something with this");

/* ES6 */
const ES6Clickers = {
    init() {
        this.myButton = document.getElementById("butt");
        this.myAnchor = document.getElementById("link");

        this.myButton.addEventListener('click', this.doSomething, true);
        this.myAnchor.addEventListener('click', (event)=>{
            this.doSomething(); // is all good now!
        }, true);
    doSomething() {
        console.log("ES6Clickers: Do something with this");


The short notation variations and implicit returns makes lambda kinda work a breeze:

const x = [{name:"Jane", age:20}, {name:"John", age:30}];
const y = x.map(z=>z.name); // return name of each object into the new array
console.log(y); // ["Jane", "John"]

Sparekassen Thy har valgt altid at være ved kundens side, via en ny mobil app. SejKo har leveret en iOS og Android app til både tablets og telefoner.

Appen giver direkte kontakt til ens rådgiver, og mulighed for at følge med i nyheder og begivenheder.
Alle data og push-notifikationer kan Sparekassen Thy styre fra platformen, hvor de også redigerer deres hjemmeside.

Teknisk er appen bygget som hybrid app, som gør det muligt at målrette både iOS og Android platformene fra en fælles kodebase – hvor man ellers udvikler to vidt forskellige apps; en til hver platform. Dette gavner både udviklingsprocessen og vedligeholdelsen af appen. Både i tid, pengene og projektstyring – da man ikke behøver at arbejde med forskellige udviklings teams.
Kodebasen er udviklet i det robuste framework, Ember.

Sparthy app, kontakt

Sparthy app, pushnotifications

Sparthy app på smartphone og tablet

Download appen Sparthy på Apple AppStore eller Google Play.


If you want to retrieve public data from Facebook (typically a Page) you nowadays will have to use Facebook Graph API and thus provide an access-token. In the old days you could use some of the available feeds (following the RSS-principles) but that was back then.
I’ve seen some strange hacks around, but it’s quite simple to pull public data with a non-expiring access-token. (Impatient ones go here!)

Access-tokens in short

The idea behind access-tokens is that the system you’re communicating with ‘knows something about somebody’; is that somebody a valid logged-in user, what is that user allowed to do, etc. For every request your application makes, on behalf of that user, you pass that access-token to the system.
Access tokens typically expire; to reduce the chance of getting in the wrong hands (Facebook offers appsecret_proof to prevent hijacking). When the user uses the application access-tokens get renewed in the background, when the user doesn’t use the application before the access-token expires, a new login / authorization action will provide a new one.
Facebook Graph API knows short- and long-term access-tokens, where the short-term tokens are used by the application’s client and the long-termed by the application’s server (using an app-secret).

Let the app do the talking

The access-tokens mentioned above are “user access-tokens”. If you just want to pull out some public data, having users logging in and expiring access tokens is probably not what you want. But you can also in make requests to Facebook’s API on behalf of an a Facebook App, in stead of a user, working with an “app access-token”.
When you create an app at Facebook for developers, you have an app-id and an app-secret. In stead of requesting “oauth” for an app access-token, you can construct one yourself  by combining your app-id and app-secret, when requesting from a server (not client!!), like this:


Note: using “appsecret_proof” doesn’t make much sense here

Let’s get practical

I needed to display posts from a Facebook Page via Javascript (with Ember.js to be exact). No further Facebook interaction was needed, so user access tokens were not what I was waiting for, I needed an access token that does not expire, and that I’m in control of, not some user. So I opted for using the “app_id|app_secret”-solution with an app access-token, mentioned above. That I had set up as a proxy on my webserver. The flow now is: Client -> Webserver -> FB API -> Webserver -> Client.

Flow proxy fb api permanent access-token


Here’s the method I used at the webserver (in PHP) to make calls to Facebook Graph API

* Retrieves response from an call
* to Facebook Graph API
* on behalf of an Facebook app.
* Returns a JSON-string when $returnJson is true,
* when false it returns an object of the
* JSON decoded data.
* The object-parameter determines which FB object you
* are requesting (posts, photos etc)
* The fields-paramater determines which fields
* of that object should be included in your data
* Try things out at the FB Graph API explorer tool first:
* https://developers.facebook.com/tools/explorer
* @param string $fbUser (id of fb-user to pull from)
* @param string $appId
* @param string $appSecret
* @param string $appApiVersion
* @param string $object (what object to request. Default: posts)
* @param array $fields (what fields of the object to request. Default: message, created_time)
* @param boolean $returnJson (return JSON-string otherwise object. Default: true)
* @return string / object

public function getFacebookPosts(
$appId, $appSecret, $appApiVersion,
$fieldsString = implode(",", $fields);
$accessToken = sprintf("%s|%s", $appId, $appSecret);

$fbApiUrl = sprintf("https://graph.facebook.com/%s/%s?fields=%s{%s}&amp;access_token=%s", $appApiVersion, $fbUser,$object, $fieldsString, $accessToken);

$json = file_get_contents($fbApiUrl);
return $returnJson ? $json : json_decode($json);

Load the Facebook data in Ember.js

For the ones interested in how you easily can work with the requested Facebook data in Ember, stay tuned and I’ll provide a snippet for your serializer.
Of course we’re using Ember Data to handle all this. First of all, model your data by adding a new model. You will at least have to define those attributes corresponding the fields-parameter from your API request.
For example ‘message’,’created_time’. Now setup your adapter, connecting to your ‘proxied webservice’.
When the data comes back to your client and back to Ember, Facebook has a slight different JSON-format than Ember expects, so we have to serialize it a little.
And what Ember expects depends whether you’re using the ‘old’ or ‘new’ adapter for handling JSON.
The previous de facto standard was the Ember Data RESTAdapter, the current de facto standard is the Ember Data v2 JSONAPIAdapter. What do they expect:

  • RESTAdapter: {“modelNamePlural”:[…]}
  • JSONAPIAdapter: {“data”:[…]}

Ember Data RESTSerializer (using the extractArray method)

export default DS.RESTSerializer.extend({

extractArray: function (store, primaryType, payload) {
const posts = payload.posts.data;
const newPayload = { posts: posts };
return this._super(store, primaryType, newPayload);



Ember Data JSONAPISerializer (using the normalizeArrayResponse method)

export default DS.JSONAPISerializer.extend({

normalizeArrayResponse: function (store, primaryType, payload, id, requestType) {
const posts = payload.posts.data;
const newPayload = { data: posts };
return this._super(store, primaryType, newPayload, id, requestType);



This is the model I’m using

export default DS.Model.extend({

message: DS.attr('string'),
created_time: DS.attr('date'),
status_type: DS.attr('string'),
comment_count: DS.attr('number', {defaultValue: 0}),
like_count: DS.attr('number', {defaultValue: 0}),
share_count: DS.attr('number', {defaultValue: 0}),
link: DS.attr('string'),
picture: DS.attr('string'),
caption: DS.attr('string'),
description: DS.attr('string'),
name: DS.attr('string')


The fields comment_count, like_count and share_count do not exist in the response from Facebook, they’re nested in ‘comments’, ‘likes’ and ‘shares’ objects. With the serializer’s normalize method you can make the response-data fit into your model.
Another thing I did here is adjusting the date-format given by Facebook, as Moment.js by default will fail with that input on Safari and IE, when there’s no colon in the time-zone.

Add this method to your serializer (either RESTSerializer or JSONAPISerializer) to get the model straight:

normalize : function (modelClass, resourceHash, prop) {
// likes
if( resourceHash.likes.summary.total_count ) {
resourceHash.like_count = resourceHash.likes.summary.total_count;
// comments
if( resourceHash.comments.summary.total_count ) {
resourceHash.comment_count = resourceHash.comments.summary.total_count;
// shares
if( resourceHash.shares &amp;&amp; resourceHash.shares.count ) {
resourceHash.share_count = resourceHash.shares.count;

// dates
// prevent "2016-02-16T12:59:03+0000" from failing in moment.js
// convert them to "2016-02-16T12:59:03+00:00"
// (note colon in milliseconds)
resourceHash.created_time = resourceHash.created_time.replace(/([A-Z0-9:-]\+[0-9]{2})([0-9]{2})/, "$1:$2");

return this._super(modelClass, resourceHash, prop);

For a project I’ve been working on recently I needed to convert text, retrieved from an API, to HTML.
The text isn’t “mark-down” but does contain line-breaks, URLs, hash-tags etc. etc. Since there wasn’t any add-on or snippet doing exactly this, I decided to roll my own.
Now I want to share my ‘snippet’ (only one file) with you, so you hopefully can benefit from it too, or modify it if needed.

You can find it here on Github Gist

As you can see I’ve included my test-file as well. Download both files and place “text-2-html.js” into your “app/helpers” directory (and “text-2-html-test.js” into your “tests/units/helpers” directory).

Now you can use the helper like this:

{{text-2-html message}}

By default the helper converts:

  • new-lines (attribute “nl”)
  • URLs (attribute “url”)
  •  e-mails (attribute “email”)

When configured it also converts:

  • phone-numbers (attribute “phone”) — note: buggy!!
  • hash-tags (attribute “hashTagURLPrefix”)
  • mentions (attribute “mentionURLPrefix” and “mentionAtShown”)


Here are some examples to illustrate these options:

Handlebars template

{{text-2-html item.message}}

defining target:
{{text-2-html item.message target='_system'}}

convert phone-number, note this is somehow buggy:
{{text-2-html item.message target='_system' phone=true}}

hash-tags and mentions, twitter links:
{{text-2-html item.message hashTagURLPrefix='https://www.twitter.com/hashtag/' mentionURLPrefix='https://www.twitter.com/'}}

hash-tags and mentions, hiding the @-sign for mentions, facebook style
{{text-2-html item.message hashTagURLPrefix='https://www.facebook.com/hashtag/' mentionURLPrefix='https://www.facebook.com/' mentionAtShown=false}}

See full reference below

I must tell that the phone-number feature might act a bit buggy (that’s why it’s not a default feature); it does recognize must phone-number formats but also other numbers, intended for something else. Try and see if it works for your purposes, otherwise I might work on that one day.

Assume we have the following text:

Hey\nHow're ya doin'?\nSorry you can't get through.\nWhy don't you leave me your name, mine is @planetcrypton, and your number, mine is +4560632840, and I'll get back to you.\nDon't forget to visit http://www.wearedelasoul.com/\nMail me at plug2@reversed-yogurt.com #oldschool #plug1 #plug2 #plug3

With this in your Handlebars:

{{text-2-html item.message hashTagURLPrefix='https://www.twitter.com/hashtag/' mentionURLPrefix='https://www.twitter.com/'}}

Would result in the following HTML-output:
How&#39;re ya doin&#39;?<br>
Sorry you can&#39;t get through.<br>
Why don&#39;t you leave me your name, mine is <a href=”https://www.twitter.com/planetcrypton” target=”_system”>@planetcrypton</a>, and your number, mine is <a href=”tel:+4560632840″>+4560632840</a>, and I&#39;ll get back to you.<br>
Don&#39;t forget to visit <a href=”http://www.wearedelasoul.com/” target=”_system”>http://www.wearedelasoul.com/</a><br>
Mail me at <a href=”mailto:plug2@reversed-yogurt.com”>plug2@reversed-yogurt.com</a> <a href=”https://www.twitter.com/hashtag/oldschool” target=”_system”>#oldschool</a> <a href=”https://www.twitter.com/hashtag/plug1″ target=”_system”>#plug1</a> <a href=”https://www.twitter.com/hashtag/plug2″ target=”_system”>#plug2</a> <a href=”https://www.twitter.com/hashtag/plug3″ target=”_system”>#plug3</a>

Just what we needed, eh? 🙂


Here’s a documentation of the available attributes, so you can go ahead and use it:

Attr. name Type Default value Note
nl boolean true convert new-lines
url boolean true convert URLs
email boolean true convert e-mail-addresses
phone boolean false convert phone-numbers, might be buggy
target string _blank define target for all links
hashTagURLPrefix string null convert hash-tags and define the URL-prefix
mentionURLPrefix string null convert mentions and define the URL-prefix
mentionAtShown boolean true show / hide the @-sign for mentions