background preloader

JavaScript Promises: There and back again

Ladies and gentlemen, prepare yourself for a pivotal moment in the history of web development… [Drumroll begins] Promises have arrived natively in JavaScript! [Fireworks explode, glittery paper rains from above, the crowd goes wild] At this point you fall into one of these categories: People are cheering around you, but you're not sure what all the fuss is about. What's all the fuss about? JavaScript is single threaded, meaning that two bits of script cannot run at the same time, they have to run one after another. As a human being, you're multithreaded. You've probably used events and callbacks to get around this. var img1 = document.querySelector('.img-1'); img1.addEventListener('load', function() { // woo yey image loaded}); img1.addEventListener('error', function() { // argh everything's broken}); This isn't sneezy at all. This doesn't catch images that error'd before we got a chance to listen for them, unfortunately the DOM doesn't give us a way to do that. Promise terminology fulfilled

Related:  2ES6/ES2015JS

Techniques With ES6 Default Parameter Values, Spread, and Rest Default Behavior Default parameter values let function parameters be initialized with default values when no value or undefined is passed. We can also specify a function as a default value. Deploying ECMAScript 6 This blog post describes the options you have for deploying ECMAScript 6 in current JavaScript environments. It is selective w.r.t. the amount of tools it covers. If you want a comprehensive list of tools, I suggest you look at Addy Osmani’s “ECMAScript 6 Tools”. Getting up to speed with Gulp - @eliostruyf This is the next article of my getting up to speed series. This article is completely devoted to Gulp. In the previous article I explained Node.js and NPM, but I also mentioned Gulp a couple of time. As you get in this world of JavaScript focussed development, you will see that Gulp (or Grunt – depending on the developers' preference) often used for various kind of things.

Hilbert's Grand JavaScript School (2015 Edition) (This material originally appeared, using ECMAScript-5 semantics, in 2013.) Dr. Hilbert “Bertie” David grows tired of blogging about JavaScript, and decides to cash in on the seemingly inexhaustible supply of impressionable young minds seeking to “Learn JavaScript in Five Days.” He opens his Grand JavaScript School on the shores of the Andaman Sea in Thailand, and with some clever engineering, he is able to install a countably infinite number of seats in his lecture hall. day one

Migrating to ES6 classes Migrating to ES6 classes Last week I wrote a short post about using ES6 arrow function. Today I would love to talk about ES6 classes, what is brings onto the table, and why you should or shouldn’t be concerned. ES6 Classes var Car = function (number_of_wheels, number_of_doors) { this.number_of_wheels = number_of_wheels; this.number_of_doors = number_of_doors} Car.prototype.getCarInfo = function () { return this.number_of_wheels + ' wheels, ' + this.number_of_doors + ' doors De Stijl: How necessary are var, let, and const? Disclaimer: JavaScript the language has some complicated edge cases, and as such, the following essay has some hand-wavey bits and some bits that are usually correct but wrong for certain edge cases. If it helps any, pretend that nearly every statement has a footnote reading, “for most cases in practice, however ______.” ECMAScript-2015 gives us three different variable declaration statements: var, let, and const.

Metaprogramming in ES6: Part 3 - Proxies In the third and final installment of my Metaprogramming in ES6 series - remember, those posts I wrote over a year ago and promised I wouldn’t take ages to complete but did? In this last post, we’ll be looking at possibly the coolest ES6 Reflection feature: Proxies. Those of you versed in my back catalogue will have already read my last post, when we had a look at the ES6 Reflect API, and the post before where we took a look at ES6 Symbols - those of you haven’t should go ahead and get versed, the Reflect will be particularly relevant here and is required reading before we continue. Just like the other posts, I’m going to quote a point I made in Part 1: So, Proxy is a new global constructor (like Date or Number) that you pass an Object, a bunch of hooks, and it spits out a new Object that wraps the old one with all these fancy hooks.

ES6 In Depth – Symbols ES6 In Depth is a series on new features being added to the JavaScript programming language in the 6th Edition of the ECMAScript standard, ES6 for short. Note: There is now a Vietnamese translation of this post, created by Julia Duong of the Coupofy team. What are ES6 symbols? Symbols are not logos. They’re not little pictures you can use in your code. ES6: Iterators and Generators Iterators and Generators in JavaScript gives us a more expressive write expressive lazy code. Lazily executed code can give us a bit of a performance boost because computations can be delayed until they are needed. This allows us to create some very interesting functions that can generate an infinite amount of output. Iterable / Iterator Iterator is a pattern for Iterating over a collection.

Metaprogramming in ES6: Symbols and why they're awesome You've heard of ES6 right? It's the new version of JavaScript that is awesome in so many ways. I frequently wax lyrical about all of the amazing new features I keep discovering with ES6, much to the chagrin of my colleagues (consuming someone's lunch break talking about ES6 Modules seems to be not to everyone's liking). A set of great new features for ES6 comes in the form of a slew of new metaprogramming tools, which provide low level hooks into code mechanics. Not much has been written on them, so I thought I'd do a teensy weensy 3 part post on them (sidebar; because I'm so lazy and this post has been sat in my drafts folder - 90% done - for three months, a bit more has been written about them since I said that):