A programmer evaluates the MacBook Pro (Touch Bar)

I got my new MacBook Pro this week. These are my first impressions of the machine. I’ve moved from a MacBook Air 13" to a MacBook Pro 13".

My dream notebook would have been a 13" version of the 12" MacBook. It’s a shame that Apple didn’t introduce such a machine, but I understand the decision to keep things simple. Accordingly, I changed the planning for my setup:

  • from iMac plus MacBook
  • to MBP plus LG UltraFine 5K display (as a docking station).

One benefit of this switch is that I won’t have to wait until new iMacs come out in order to have a large high-resolution display at home.


Controlling access to global variables via an ES6 proxy

The following function evalCode() traces the global variables that are accessed while evaluating a piece of JavaScript code.


Why does this work? [].concat[1,2,3]

In this blog post, we look at a syntactic puzzle. This is just for fun; there is nothing useful you can do with what we examine. It may, however, make you more aware of how JavaScript works, syntactically.


Pitfall: not all objects can be wrapped transparently by proxies

A proxy object can be seen as intercepting operations performed on its target object – the proxy wraps the target. The proxy’s handler object is like an observer or listener for the proxy. It specifies which operations should be intercepted by implementing corresponding methods (get for reading a property, etc.). If the handler method for an operation is missing then that operation is not intercepted. It is simply forwarded to the target.

Therefore, if the handler is the empty object, the proxy should transparently wrap the target. Alas, that doesn’t always work, as this blog post explains.


Computing tag functions for ES6 template literals

This blog post describes what you can do with functions that return tag functions for ES6 template literals.

For an introduction to template literals, tagged template literals and tag functions, consult chapter “Template literals” in “Exploring ES6”.


Three ways of understanding Promises

This blog post covers three ways of understanding Promises.


Tips for using async functions (ES2017)

This blog post gives tips for using async functions. If you are unfamiliar with them, you can read chapter “Async functions” in “Exploring ES2016 and ES2017”.


ES proposal: asynchronous iteration

The ECMAScript proposal “Asynchronous Iteration” by Domenic Denicola is currently at stage 3. This blog post explains how it works.


ES proposal: Rest/Spread Properties

The ECMAScript proposal “Rest/Spread Properties” by Sebastian Markbåge is currently at stage 3. It enables:

  • The rest operator (...) in object destructuring. At the moment, this operator only works for Array destructuring and in parameter definitions.

  • The spread operator (...) in object literals. At the moment, this operator only works in Array literals and in function and method calls.


ES proposal: global

The ECMAScript proposal “global” by Jordan Harband is currently at stage 3. It provides a new standard way of accessing the global object.


Three useful Babel presets

As of version 6, Babel supports presets, sets of features that can be enabled together. This blog post looks at three new useful Babel presets (and, as a bonus, two presets especially for Node.js).


Improving the syntax of EJS templates

I really like the way EJS templates work, because the meta-language (loops, if-then-else, etc.) is just JavaScript. This blog post describes ideas for improving their syntax.


Apple Keynote: combining mirroring and Presenter Display

This blog post describes a new setup for presenting with Apple’s Keynote app that I’ve experimented with. It involves:

  • A Mac running Keynote
  • An iOS device (iPhone or iMac)


ES proposal: Template Literal Revision

The ECMAScript proposal “Template Literal Revision” by Tim Disney is currently at stage 3. It proposes to give the innards of tagged template literals more syntactic freedom.


ES proposal: Function.prototype.toString revision

The ECMAScript proposal “Function.prototype.toString revision” by Michael Ficarra is currently at stage 3. It brings two major improvements compared to ES2016:

  • Whenever possible – source code: If a function was created via ECMAScript source code, toString() must return that source code. In ES2016, whether to do so is left up to engines.

  • Otherwise – standardized placeholder: In ES2016, if toString() could not (or would not) create syntactically valid ECMAScript code, it had to return a string for which eval() throws a SyntaxError. In other words, eval() must not be able to parse the string. This requirement was forward-incompatible – whatever string you come up with, you can never be completely sure that a future version of ECMAScript doesn’t make it syntactically valid. In contrast, the proposal standardizes a placeholder: a function whose body is { [native code] }. Details are explained in the next section.


Taking a break

For health reasons, I’m taking June–August off from work (Twitter, blogging, etc.). See you in September!

To tide you over, you can read (and buy, to support my work) my books, which are free to read online:


Six nifty ES6 tricks

In this blog post, I show six tricks enabled by new ES6 features. At the end of each section, I point to related material in my book “Exploring ES6” (which is free to read online).


Handling whitespace in ES6 template literals

In this blog post, we look at problems that arise when template literals contain whitespace:

  • Breaking up long lines
  • Dedenting content
  • Joining Arrays
  • Indenting inserted content


Trees of Promises in ES6

This blog post shows how to handle trees of ES6 Promises, via an example where the contents of a directory are listed asynchronously.


Tracking unhandled rejected Promises

In Promise-based asynchronous code, rejections are used for error handling. One risk is that rejections may get lost, leading to silent failures. For example:

    function main() {
        .then(() => console.log('Done!'));

If asyncFunc() rejects the Promise it returns then that rejection will never be handled anywhere.

Let’s look at how you can track unhandled rejections in browsers and in Node.js.


Promise-based functions should not throw exceptions

This blog post gives tips for error handling in asynchronous, Promise-based functions.


The need for multi-platform npm packages

In this blog post, I argue that it should be possible to have multiple implementations of the same npm package (same name, same version).


Arrow functions vs. bind()

ES6 arrow functions are often a compelling alternative to Function.prototype.bind().


Examples of name clashes in JavaScript’s standard library

The main use case for ES6 symbols is that you can use them as property keys that can’t clash with other property keys.

In case you think that name clashes don’t matter, here are three examples of where name clashes caused problems in the evolution of the JavaScript standard library:


JavaScript fatigue fatigue

Enough with the fatigue – tips against feeling overwhelmed:


ES proposal: Object.getOwnPropertyDescriptors()

The ECMAScript proposal “Object.getOwnPropertyDescriptors()” by Jordan Harband and Andrea Giammarchi is part of ECMAScript 2017. This blog post explains it.


ECMAScript 2017: the final feature set

Check out my book (free online): “Exploring ES2016 and ES2017”. Buy it now to get all future updates (“Shared memory and atomics” will be added soon).

Update 2017-01-29: At the TC39 meeting in January 2017, the last feature of ECMAScript 2017, “Shared memory and atomics” advanced to stage 4. That means that its feature set is now complete, as listed below.


ES proposal: async functions

Async functions are an ECMAScript proposal by Brian Terlson. It is at stage 3 (candidate).

Before I can explain async functions, I need to explain how Promises and generators can be combined to perform asynchronous operations via synchronous-looking code.

ES2016 feature: exponentiation operator (**)

The exponentiation operator (**) is an ECMAScript proposal by Rick Waldron. It is at stage 4 (finished) and part of ECMAScript 2016.

ES2016 feature: Array.prototype.includes

Array.prototype.includes is an ECMAScript proposal by Domenic Denicola and Rick Waldron. It is at stage 4 (finished) and part of ECMAScript 2016.


The final feature set of ECMAScript 2016 (ES7)

Check out my new book (free online): “Exploring ES2016 and ES2017”.

We always knew that ECMAScript 2016 (ES2016) would be a small release. It turns out that it will be very small. Read on for a list of its features and an explanation why that is not a problem.



Enumify: better enums for JavaScript

In this blog post, I present enumify, a library for implementing enums in JavaScript. The approach it takes is inspired by Java’s enums.


ES6 classes have inner names

This blog post explains that classes have lexical inner names, just like named function expressions.


Running locally installed npm executables

One nice npm feature is that you can install packages with executables locally. This blog post explains how to run locally installed executables.


Managing the private data of ES6 classes

This blog post explains four approaches for managing private data for ES6 classes:

  1. Keeping private data in the environment of a class constructor
  2. Marking private properties via a naming convention (e.g. a prefixed underscore)
  3. Keeping private data in WeakMaps
  4. Using symbols as keys for private properties


Looking back on 2015: six exciting web technologies

In 2015, there was an amazing amount of innovation related to the web platform. The following sections describe six technologies that I find exciting:

  • Electron
  • React Native
  • Progressive web apps
  • Visual studio code
  • Rollup
  • Web Assembly


My new book: “Setting up ES6”

My latest book is called “Setting up ES6”. It covers the following topics:

  • A cheat sheet for deploying ECMAScript 6
  • Example setups (skeleton projects that you can download from GitHub):
    • ES6 in browsers via webpack and Babel
    • ES6 in Node.js via Babel (compiled dynamically or statically)
  • How to configure Babel 6, including a clear explanation of how it interacts with CommonJS modules