ES2019: optional catch binding
The proposal “Optional catch binding” by Michael Ficarra is at stage 4 and therefore part of ECMAScript 2019. This blog post explains how it works. Overview # The proposal allows you to do the following: try { ··· } catch { ··· } That is useful whenever you don’t need the binding (“parameter”) of the catch clause: try { ··· } catch (error) { ··· } If you never use the variable error, you may as w
`babel-preset-env`: a preset that configures Babel for you
babel-preset-env is a new preset that lets you specify an environment and automatically enables the necessary plugins. The problem # At the moment, several presets let you determine what features Babel should support: babel-preset-es2015, babel-preset-es2016, etc.: incrementally support various versions of ECMAScript. es2015 transpiles what’s new in ES6 to ES5, es2016 transpiles what’s new in ES2
ES2020: `import()` – dynamically importing ES modules
Warning: This blog post is outdated. Instead, read section “Loading modules dynamically via import()” in “JavaScript for impatient programmers”. The ECMAScript proposal “import()” by Domenic Denicola is at stage 4 and part of ECMAScript 2020. It enables dynamic loading of ECMAScript modules and is explained in this blog post. ECMAScript modules are static # ECMAScript modules are completely stati
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). Complementing or replacing babel-preset-es2015 # These two presets are useful complements to babel-preset-es2015 (for ES6): babel-preset-es2016 gives you one of the two features of ES2016: the exponent
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() { asyncFunc() .then(···) .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
Promise-based functions should not throw exceptions
This blog post gives tips for error handling in asynchronous, Promise-based functions. Operational errors vs. programmer errors # In programs, there are two kinds of errors: Operational errors happen when a correct program encounters an exceptional situation that requires deviating from the “normal” algorithm. For example, a storage device may run out of memory while the program is writing data t
Arrow functions vs. `bind()`
ES6 arrow functions are often a compelling alternative to Function.prototype.bind(). Extracting methods # If an extracted method is to work as a callback, you must specify a fixed this, otherwise it will be invoked as a function (and this will be undefined or the global object). For example: obj.on('anEvent', console.log.bind(console)) An alternative is to use an arrow function: obj.on('anEvent',
What happened to Web Components?
Three years ago, there was a lot of excitement surrounding Web Components: everybody talked about them, the frameworks Ember and Angular planned to integrate them or even be based on them, etc. By now, that excitement seems to have died down. This blog post examines what happened to Web Components. Spoiler: they are alive and well and slowly being adopted across browsers. Refresher: Web Components
Tree-shaking with webpack 2 and Babel 6
Rich Harris’ module bundler Rollup popularized an important feature in the JavaScript world: tree-shaking, excluding unused exports from bundles. Rollup depends on the static structure of ES6 modules (imports and exports can’t be changed at runtime) to detect which exports are unused. Tree-shaking for webpack is currently in beta. This blog post explains how it works. The project we are going to e
Babel 6: loose mode
Babel’s loose mode transpiles ES6 code to ES5 code that is less faithful to ES6 semantics. This blog post explains how that works and what the pros and cons are (spoiler: normally not recommended). Starting point for this series of posts on Babel 6: “Configuring Babel 6” [explains the basics: configuration files, presets, plugins, etc.] Two modes # Many plugins in Babel have two modes: A normal m
Babel 6: configuring ES6 standard library and helpers
This blog post is outdated. Please read Chap. “Babel: configuring standard library and helpers” in “Setting up ES6”. This blog post explains how to configure how Babel 6 accesses its own helper functions and the ES6 standard library. The following GitHub repo lets you play with what’s explained here: babel-config-demo Starting point for this series of posts on Babel 6: “Configuring Babel 6” [expla
Configuring Babel 6
Update: This series of blog post has been turned into the book “Setting up ES6” (which is free to read online). Babel 6 is much more configurable than Babel 5, but also more difficult to configure. This blog post gives tips. Follow-up blog posts: [2015-12-11] Babel 6: configuring ES6 standard library and helpers [2015-12-12] Babel 6: loose mode [2015-12-13] Babel and CommonJS modules Installing Ba
The TC39 process for ECMAScript features
This blog post explains the so-called TC39 process, which governs how ECMAScript features are designed, starting with ECMAScript 2016 (ES7). Related blog posts: The final feature set of ECMAScript 2016 (ES7) Feature watch: ECMAScript 2017 Who designs ECMAScript? # Answer: TC39 (Technical Committee 39). TC39 is the committee that evolves JavaScript. Its members are companies (among others, all maj
Customizing ES6 via well-known symbols
In ECMAScript 6, the object Symbol has several properties that contain so-called well-known symbols (Symbol.iterator, Symbol.hasInstance, etc.). These let you customize how ES6 treats objects. This blog post explains the details. Warning # Implementation of the features described here is work in progress. Consult the “ECMAScript 6 compatibility table” for what is supported where (spoiler: not muc
No promises: asynchronous JavaScript with only generators
Two ECMAScript 6 [1] features enable an intriguing new style of asynchronous JavaScript code: promises [2] and generators [3]. This blog post explains this new style and presents a way of using it without promises. Overview # Normally, you make a function calls like this: let result = func(···); console.log(result); It would be great if this style of invocation also worked for functions that perf
Using the ES6 transpiler Babel on Node.js
This blog post is outdated (it covers Babel 5). Please read Sect. “Node.js setup: Dynamically transpiled ES6 via Babel” in “Setting up ES6”. This blog post explains how to use the ES6 transpiler Babel with Node.js. You can download the code shown in this post on GitHub. For further information on ECMAScript 6, consult the ebook “Exploring ES6”. Warning: The approach explained in this post is conve
Iterables and iterators in ECMAScript 6
This blog post is outdated. Please read chapter “Iterables and iterators” in “Exploring ES6”. This blog post is part of a series on iteration in ES6: Iterables and iterators in ECMAScript 6 ES6 generators in depth ECMAScript 6 introduces a new interface for iteration, Iterable. This blog post explains how it works, which language constructs consume data via it (e.g., the new for-of loop) and which
ECMAScript 6: new OOP features besides classes
This blog post is outdated. Please read chapter “New OOP features besides classes” in “Exploring ES6”. Classes [1] are the major new OOP feature in ECMAScript 6 [2]. However, it also includes new features for object literals and new utility methods in Object. This blog post describes them. New features of object literals # Method definitions # In ECMAScript 5, methods are properties whose values
Triggering events in vanilla JavaScript
So you want to trigger an event for a DOM element, without using jQuery? This blog post gives you a quick recipe for doing so. The running example is about sending a submit event to a form. I needed to do that for a demo of user interface testing via CasperJS. And, unfortunately, the Form#submit method does not send that event on most web engines. The recipe Steps: Look up the constructor of the e
Google’s Blink: a few interesting facts
With Blink, Google has created a permanent fork of the WebKit HTML engine. This blog post mentions a few interesting facts that provide context for that decision. How much did each company contribute to WebKit? There are several interesting diagrams and numbers in the article “Reviewers and companies in the WebKit project” (by Daniel Izquierdo Cortázar for Bitergia). It’s remarkable how much Googl
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
