Posts

Showing posts from September, 2016

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. Referring to the global object The following are a few popular ways of referring to the global object: Global variables: Global variable window : is the classic way of referring to the global object. But it doesn’t work in Node.js and in Web Workers. Global variable self : is available in Web Workers and browsers in general. But it isn’t supported by Node.js. Some people use self to mark code that works in both Web Workers and normal browser contexts. Global variable global : is only available in Node.js. Until now! this : this in global scope: refers to the global object. The only problem is that Node.js modules and ES6 modules have their own scopes, which means that this approach doesn’t work there. this during a function call in sloppy mode: If you call a function via a function call (and not a method call), its this refers to the global ob...

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 exponentiation operator . The other feature, Array.prototype.includes() , is supported via the standard library polyfill . babel-preset-es2017 gives you: babel-plugin-syntax-trailing-function-commas : optional trailing commas in parameter lists and function/method calls. babel-plugin-transform-async-to-generator : async functions . This is the one feature after ES6 that I’m most looking forward to. Note that if you want all of ES2017 (as much as it is supported by Babel) then you need three presets: es2015 , es2016 and es2017 . Alternatively, there is also a meta-preset: babel-preset-latest will a...

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. EJS templates This is an example of an EJS template: <ul> <% for(var i=0; i<supplies.length; i++) { %> <li><%= supplies[i] %></li> <% } %> </ul> I see two problems with this template: It outputs empty lines for line 2 and 4. The delimiters <% and %> make the template look cluttered. Suppressing whitespace The first problem can be fixed by using the delimiters <%_ and _%> which suppress any whitespace generated by that line: <ul> <%_ for(var i=0; i<supplies.length; i++) { _%> <li><%= supplies[i] %></li> <%_ } _%> </ul> Better control flow syntax If control flow syntax is enabled by a single character at the beginning of a line then the template looks much nicer: ...

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) The wish For presentations, mirroring the laptop’s display with the projector’s is perfect, because: It is easy to do interactive demos (e.g. switch to a REPL, run some JavaScript code). You can use the cursor as a virtual laser pointer (there is a preference under “Slideshow” to show the cursor in that mode). But there are several pieces of information that would be nice to have while presenting: The next slide, for smoother segues Remaining time (countdown) Presenter notes (I don’t use them, but many people do) Therefore, many people don’t mirror displays and Keynote’s Presenter Display. But then you lose the previously mentioned advantages. The best of both worlds It’d be cool to have mirroring plus extra information displayed somewhere, but I don’t even know how exactly that would work. Non-solution: Keynote Remo...

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. Tag functions and escape sequences With tagged template literals, you can make a function call by mentioning a function before a template literal: > String.raw`\u{4B}` '\\u{4B}' String.raw is a so-called tag function . Tag functions receive two versions of the fixed string pieces ( template strings ) in a template literal: Cooked: escape sequences are interpreted. `\u{4B}` becomes 'K' . Raw: escape sequences are normal text. `\u{4B}` becomes '\\u{4B}' . The following tag function illustrates how that works: function tagFunc(tmplObj, substs) { return { Cooked: tmplObj, Raw: tmplObj.raw, }; } Using the tag function: > tagFunc`\u{4B}`; { Cooked: [ 'K' ], Raw: [ '\\u{4B}' ] } For more information on tag f...