Symbols in ECMAScript 6

Symbols are a new primitive type in ECMAScript 6 [1]. This blog post explains how they work.


ECMAScript 6: new OOP features besides classes

This blog post is outdated. Please read chapter “New OOP features besides classes” in “Exploring ES6”.

Classes [2] are the major new OOP feature in ECMAScript 6 [1]. However, it also includes new features for object literals and new utility methods in Object. This blog post describes them.


One JavaScript: avoiding versioning in ECMAScript 6

What is the best way to add new features to a language? This blog post describes the approach taken by ECMAScript 6 [3], the next version of JavaScript. It is called One JavaScript, because it avoids versioning.


Meta programming with ECMAScript 6 proxies

This blog post is outdated. Please read chapter “Metaprogramming with proxies” in “Exploring ES6”.

This blog post explains the ECMAScript 6 (ES6) feature proxies. Proxies enable you to intercept and customize operations performed on objects (such as getting properties). They are a meta programming feature.


Mobile-friendly web pages

Google has announced that they are marking web pages as “mobile-friendly” in their search results. I was initially worried about this, because many websites have mobile-specific versions that are worse than their desktop versions on mobile devices. I also don’t like being auto-forwarded to mobile locations (e.g. from www.example.com to m.example.com), because it prevents URLs from being universal.

However, Google’s criteria for mobile-friendliness are reasonable: Pages must…

  • Avoid software that is not common on mobile devices, like Flash
  • Use text that is readable without zooming
  • Size content to the screen so users don't have to scroll horizontally or zoom
  • Place links far enough apart so that the correct one can be easily tapped

Google’s blog post gives tips for ensuring that your page is recognized as mobile-friendly. It seems like a similar approach could be used for checking whether pages are accessible.


Statically typed JavaScript via Microsoft TypeScript, Facebook Flow and Google AtScript

Update 2014-11-18: Facebook Flow has been released as open source. Its website is flowtype.org. The site mentions plans for Flow’s future.

This blog post looks at three initiatives for adding static typing to JavaScript: Microsoft’s TypeScript, Facebook’s Flow and Google’s AtScript.


ECMAScript 6 promises (2/2): the API

This blog post is outdated. Please read chapter “Promises for asynchronous programming” in “Exploring ES6”.

This blog post is an introduction to asynchronous programming via promises in general and the ECMAScript 6 (ES6) promise API in particular. It is second in a series of two posts – part one explains foundations of asynchronous programming (which you may need to learn in order to fully understand this post).


ECMAScript 6 promises (1/2): foundations

This blog post is outdated. Please read chapter “Asynchronous programming (background)” in “Exploring ES6”.

This blog post explains foundations of asynchronous programming in JavaScript. It is first in a series of two posts and prepares you for part two, which covers promises and the ECMAScript 6 promise API.


ECMAScript 6 modules: the final syntax

Check out my book (free online): “Exploring ES6”. Updated version of this blog post: chapter “Modules”.

At the end of July 2014, TC39 [1] had another meeting, during which the last details of the ECMAScript 6 (ES6) module syntax were finalized. This blog post gives an overview of the complete ES6 module system.


Standardizing (a flavor of) Markdown

Update 2014-09-05: Jeff Atwood renames “Standard Markdown” to “Common Markdown” and apologizes to John Gruber. Details: “Standard Markdown is now Common Markdown”.

On September 3, Jeff Atwood announced a new standardization effort for John Gruber’s Markdown: Standard Markdown.


Preventing function signature mismatch in ES5 and ES6

In some cases, using a function (or method) with a callback can lead to surprising results – if the signature of the latter does not match the expectations of the former. This blog post explains this phenomenon and suggests fixes.


Video: JavaScript coding tips

The following video is a recording of the talk “JavaScript coding tips”, which I held 2014-05-16 at the Sud Web Conference in Toulouse, France.


How should I format the ECMAScript 6 generator asterisk?

[Update 2015-03-30] This blog post is now a section in “ES6 generators in depth”.

The asterisk (*) is used by ECMAScript 6 to mark generator-related constructs [1]. In each case, you have considerable freedom w.r.t. adding or omitting whitespace before and after this character. This blog post explains how to best format the asterisk and why.


Using ECMAScript 6 today

This blog post is outdated.

Read my book, instead (free online!): “Exploring ES6

ECMAScript 6 (ES6) still sounds like something from the future. After all, it will only become a standard by mid 2015. However, its features are continually appearing in browsers and there are compilers that translate ES6 code to ES5 code. The latter is already a compelling solution, because the ECMAScript 6 feature set is already frozen.

This blog post gives a brief overview of ECMAScript 6 features and describes tools that enable you to use them today.


Dispatched and direct method calls in ECMAScript 5 and 6

There are two ways to call methods in JavaScript:

  • via dispatch, e.g. obj.someMethod(arg0, arg1)
  • directly, e.g. someFunc.call(thisValue, arg0, arg1)

This blog post explains how these two work and why you will rarely call methods directly in ECMAScript 6.


The roles of AngularJS and Polymer

A key feature of AngularJS 2.0 is its support for Web Components [1]. Google’s Polymer is a Web Component polyfill (enabling them on all current browsers) and a framework on top of Web Components. This blog post describes how the Angular team sees the roles of AngularJS and Polymer.

The roles, according to the AngularJS team

AngularJS 2.0 team member Rob Eisenberg recently explained the relationship between AngularJS and Polymer:


A JavaScript survival guide

Are you a programmer who is considering learning JavaScript, but unsure whether it is worth the pain? Then this blog post is for you: I argue that it is worth it and give tips for surviving the language.


The five stages of coming to terms with JavaScript

The five stages of coming to terms with JavaScript are:

  1. Denial: “I won’t need this language.”
  2. Anger: “Why does the web have to be so popular?”
  3. Bargaining: “OK, at least let me compile a reasonable language to JavaScript.”
  4. Depression: “Programming is not for me, I’ll pursue a career in masonry, like I always wanted.”
  5. Acceptance: “I can’t fight it, I may as well prepare for it.”


React JSX via ECMAScript 6 template strings

Facebook’s React has an optional language extension that enables you to embed HTML inside JavaScript. This extension can make your code more concise, but it also breaks compatibility with the rest of the JavaScript ecosystem. ECMAScript 6 will have template strings [1], which enable you to implement JSX (or something close to it) inside the language. Jonathan Raphaelson has done so and the result looks as follows.


Three Google I/O videos about Web Components and Polymer

The videos of the Google I/O 2014 talks have been online for a while now. Three of them are about Web Components and Polymer. This blog post briefly describes what they are about and mentions a few highlights, which may help you to decide which videos you want to watch.


Ideas for fixing unconnected computing

I traveled quite a bit recently and got exposed to a negative aspect of current technology: Things work well if you have a solid internet connection with no traffic limits and are plugged into a power outlet. Otherwise, things do not work well at all. This blog post describes the problems that arise and suggests solutions.


Using the Logitech Presenter R700 with a Mac

Recently, I was shopping for a presenter (a remote control for PowerPoint, Keynote, etc.) and liked the Logitech Presenter R700 (a newer European-only version of the R800) best, due to its design and its integrated display with a countdown. Alas, Macs are not officially supported for this device. Thankfully, they can be made to work together, as explained in this blog post. I also mention how my configuration file can be adapted to an R800.


Installing web apps natively

Web apps have been around for a while, but the ability to install them as if they were native apps is relatively new. This blog post takes a look at what’s currently possible.


SimpleHTTPServer: a quick way to serve a directory

Python’s SimpleHTTPServer is the classic quick solution for serving the files in a directory via HTTP (often, you’ll access them locally, via localhost). This is useful, because there are some things that don’t work with file: URLs in web browsers.


Curbing Online Abuse

Curbing Online Abuse Isn’t Impossible. Here’s Where We Start” by Laura Hudson describes how online abuse was curbed in the battle-arena game League of Legends, published by Riot Games. The following insight is interesting:


Firefox Electrolysis (one process per tab) is back

Electrolysis (e10s) [1] is a project to add a one-process-per-tab architecture (similar to Google Chrome’s) to Firefox. It was put on hold [2] in early 2012 and is now being resumed.


Multiple return values in ECMAScript 6

If you combine the features “property value shorthand” and “destructuring”, ECMAScript 6 gives you an elegant way to handle multiple return values. This blog post explains why that is useful and how it works.


The ECMAScript 6 schedule changes

Allen Wirfs-Brock, editor of the ECMAScript 6 specification, recently mentioned on Twitter that the schedule for ECMAScript 6 has changed slightly.


Checking whether a value is an integer in JavaScript

Integers lead an odd life in JavaScript. In the ECMAScript specification, they only exist conceptually: All numbers are always floating point and integers are ranges of numbers without decimal fractions (for details, consult “Integers in JavaScript” in “Speaking JavaScript”). In this blog post, I explain how to check whether a value is an integer.


Implementing a raffle in JavaScript

At two recent occasions, there were copies of “Speaking JavaScript” to be raffled off. This blog post describes two ways of drawing winners via JavaScript.


Understanding the four layers of JavaScript OOP

JavaScript OOP is baffling: on one hand, there is a simple core, on the other hand, there are some really weird things going on. I’ve been pondering for a long time how to explain it well and I think the best way to do so is via four layers: single objects, prototype chains, constructors, constructor inheritance. The first two layers are JavaScript’s simple OOP core, layers 3 and 4 are where the complications start.


We’re doing syntax highlighting wrong

James Fisher mentions two things that are often syntax-highlit wrong:

  • Comments in source code: “The comment is washed out. While the rest of the text exists in black, boldface, and bright colors, the comments fade into the background. […] The implication is obvious: we have collectively decided that the comment is less important than the code.”

  • Insertions and deletions in diff viewers: “[…] a red line is one that was deleted, and a green line is one that was added. […] Our diff viewer, then, tells us that deletions are bad, dangerous, and possibly an error, while insertions are good, safe, and successful.”

Consult the blog post for the rationales and several instructive illustrations.


ECMAScript 6’s new array methods

Check out my book (free online): “Exploring ES6”. Updated version of this blog post: chapter “New Array features”.

This blog post explains what new array methods ECMAScript 6 will bring and how to use them in current browsers.

Note: I’m using the terms constructor and class interchangeably.


Meet the site of the Web Components community

The Web Components community has a new site: WebComponents.org. Quoting Addy Osmani:

WebComponents.org is the home for the community to learn and discuss Web Components.

The site had previously been soft-launched at webcomponents.github.io and is now online at the final URL. It’s good to have a single site with a simple URL where one can look up information related to this important technology. The site’s twitter account is @Web_Components.


Identifying the current <script> element

Guest blog post by Rodney Rehm

You may find yourself in a situation requiring you to know the DOM context of the JavaScript that is currently executing. The DOM context of a running JavaScript is the <script> element that caused the JavaScript to be executed in the first place. With HTML5 the WhatWG introduced document.currentScript, which this article will use to explain simple techniques to make use of DOM context.


JavaScript’s “this”: how it works, where it can trip you up

In JavaScript, the special variable this is relatively complicated, because it is available everywhere, not just in object-oriented settings. This blog post explains how this works and where it can cause problems, concluding with best practices.


The interoperability of Web Component polyfills

At the moment, there are two polyfills for the upcoming Web Components standard (roughly, for widgets): Fortunately, the three ways of writing a Web Component (via the Polymer polyfill, via the X-Tag polyfill or by using the APIs directly) are interoperable. Quoting “Custom Element Interoperability” by the Polymer team:
We’re happy to say that, yes, custom elements of any variety (be they Polymer, X-Tag or vanilla) can all happily coexist.
The blog post explains how that works and provides an example that you can download from GitHub.

Third Web Component polyfill: @b_lionel told me about Bosonic, which is partially based on Polymer and also interoperable.


Handling required parameters in ECMAScript 6

In ECMAScript 5, you have a few options for ensuring that a required parameter has been provided, all of which are somewhat brittle and inelegant:
    function foo(mustBeProvided) {
        if (arguments.length < 1) throw new Error(...)
        if (! (0 in arguments)) ...
        if (mustBeProvided === undefined) ...
In ECMAScript 6, you can (ab)use default parameter values to achieve more concise code (credit: idea by Allen Wirfs-Brock):


What is the true nature of lions and hyenas?

Kevin Richardson is a South African zookeeper who has been accepted into several clans of spotted hyenas and prides of lions. His years-long relationship with these animals illustrates a different side of them: they can be affectionate and cuddly. Given how many atrocities humans commit to get their food, you have to wonder what one should consider the “true nature” of lions and hyenas. More information:


The maximum call stack size

Are you curious how many recursive calls you can make on your JavaScript engine?


In search of the perfect technology for slides

I many cases, if you are presenting in front of an audience, you will create slides, visual material of some kind. I’m a very visual person myself and learn much better if I can read in addition to listen. Slides are also helpful when you lose attention for a few seconds.

There are a variety of software technologies out there for helping you with creating slides. Following are ones that I find intriguing:


Making checkbox labels clickable via <label>

The <label> element has been around for a while, but I still don’t see enough websites use it. In lets you make labels of checkboxes and radio buttons clickable.


reduce() and array indices

This blog post explains how the index works that Array.prototype.reduce() passes to its callback.


Taking a break

I’ll be back on Monday, 17 March 2014 and will announce if and how 2ality will continue.


JavaScript time values: dates as milliseconds since 1970-01-01

This blog post explains how JavaScript dates are stored internally as time values, milliseconds since 1970-01-01.


What are integers in JavaScript?

According to the ECMAScript specification, all numbers in JavaScript are floating-point. Yet, the notion of integer comes up occasionally. This blog post explains what it means.


Video: Fake operator overloading

On 2012-05-31, I held the talk “Fake operator overloading” at Fluent Conference, in San Francisco. The video is now publicly available (go there for a larger version of the video).


Win a ticket for Fluent 2014

Update 2014-02-07: A winner has been determined and received the ticket. If you didn’t win: get a 20% discount on a Fluent ticket via the code 2ALITY20

The Fluent 2014 conference takes place in San Francisco from March 11–13. Its tag line is “The Web Platform”. The 2ality blog raffles off a ticket for the last two days (excluding the workshop day). To enter the raffle, tweet the following text:

I’d like to win a ticket for Fluent 2014. #2alityFluent2014
The deadline is
Friday, February 7, 2014, 18:00 GMT
I’ll contact the winner via Twitter, within a few hours of the deadline. (If the winner isn’t following me already, I’ll ask them to temporarily do so, so that I can send them a direct message.)

[Legal disclaimer: I make no guarantees w.r.t. to there being a winner. Contesting this raffle via legal means is not allowed.]


Repeating strings efficiently

Recently, Michael Ficarra pointed me to an efficient algorithm for repeating a string several times. In this blog post, I explain how it works.


Binary bitwise operators in JavaScript

This blog post describes JavaScript’s binary bitwise operators: bitwise And (&), bitwise Or (|), and bitwise Xor (^).


The new operator implemented in JavaScript

Code snippet – this is roughly how you would implement the new operator in JavaScript:


ECMAScript 6: TC39 meetings, March–November 2013

TC39 [1] is the committe that currently plans ECMAScript 6 (code-named ECMAScript.next), the next version of the JavaScript language standard. In this blog post, I’m summarizing the highlights of several meetings that they had in 2013, in March, May, July, September and November. Previous blog posts summarized prior meetings.

This post is made possible by Rick Waldron’s excellent notes of the meetings.


ECMAScript 6: merging objects via Object.assign()

New version of this blog post: inside “ECMAScript 6: new OOP features besides classes”.

Copying all properties of one object to another one is a common operation in JavaScript. This blog post explains ECMAScript 6’s implementation of it, which is called Object.assign().


Evaluating JavaScript code via eval() and new Function()

This blog post examines how one can dynamically evaluate code in JavaScript.


Web platform: five technologies to look forward to in 2014

This blog post describes five technologies that will make 2014 an exciting year for the web platform:
  1. asm.js: near-native performance on the web
  2. ParallelJS: parallelized JavaScript code
  3. ECMAScript 6 (ES6): evolving the language, uniting the community
  4. Web Components: a standard infrastructure for widgets
  5. CSS Grid Layout: native-like GUI layout