Shipping ES6 ES2015 Modules to Browsers

UPDATE 2017.09.13: Deploying ES2015+ Code in Production Today also provides a good writeup on this subject. Good workflow fleshed out by Sam Thorogood on using ES2015/ES6 modules with browsers that support, whilst also keeping older browsers (that don’t support it) happy. The modules Let’s take these 2 simple modules for example: // main.js import {x} […]

Introduction to commonly used ES6 ES2015 features

Good overview to get started with ES2015 by Zell Liew in case you’re still not using it (which you should; just do it!). As he puts it: JavaScript has progressed a ton in the recent years. If you’re learning JavaScript in 2017 and you haven’t touched ES6 ES2015, you’re missing out on an easier way […]

ES6 ES2015: Easily remove duplicates from an Array

Say you have a JavaScript Array containing duplicate values. By creating a Set – which only stores unique values (primitive values or object references) – and then spreading that Set into a new Array you can easily dedupe the given Array: // Array with duplicates const arr = [7, 3, 1, 3, 3, 7]; // […]

Sublime HyperClick

Most of the time when you are navigating and reading a code-base, you need to jump between required/imported (whatever jargon your programming language uses) files. The “Go to Definition” functionality of Sublime falls short for most languages since jumping between these required files needs some knowledge about how the language or package manager of the […]

ES6 ES2015: Looping over an Object with keys and values

Say you have an object like this: const obj = { firstName: ‘John’, lastName: ‘Doe’, age: 50, eyeColor: ‘blue’ }; Using lodash’s forEach you can easily loop over this object, with easy access to both the key and the value: _.forEach(obj, function(value, key) { console.log(key + ‘ ‘ + value); }); But what about ES2015? […]

Check if a browser supports ES6 ES2015

Great snippet by Benjamin De Cock: var supportsES6 = function() { try { new Function(“(a = 0) => a”); return true; } catch (err) { return false; } }(); The critical test is the a = 0. All browsers supporting default parameters have a fairly complete support of ES6 — for example, Edge 13 will […]

ES6 ES2015 and React snippets for Sublime Text

babel-sublime-snippets contains a set of shorthands for Sublime Text to working more easily with ES2015 and React. With it, for example, you can just type cdup followed by a TAB and you’ll end up with componentDidUpdate(prevProps, prevState) {…}. Find it as Babel Snippets through Package Control. babel-sublime-snippets →

From Coffeescript to ES6 ES2015

At work we used write most of JavaScript in Coffeescript. Used to. In our most recent projects we now write ES6 (in combination with Babel). In the transition from Coffeescript to ES6, I found these resources helpful: Moving to ES6 from CoffeeScript → CoffeeScript equivalents in ECMAScript6/ES2015 → Decaffeinate: CoffeeScript in, ES6 out → Decaffeinate […]

Setting up React for ES6 ES2015 with Webpack and Babel

This resource came in quite handy when setting up React in combination with ES6 ES2015, Webpack and Babel. Installing all the required dependencies: # Install Webpack npm install –save-dev webpack # Install the Babel Loader, for use with Webpack npm install –save-dev babel-loader # Install the es2015 and react presets, for use with Babel npm […]