Web Design Degree Center – Choosing Your Javascript Framework | WebDesignDegreeCenter.org

Pick your JavaScript framework: Angular.js, Ember.js or Backbone.js.

They all have pros and cons and they all will do the job. They are constantly developed and even introduce breaking changes in new versions which means developers find the flows and anti-patterns in their frameworks and do it right in the next major version for the good of the language and the developers using the frameworks:
Continue reading

The Final Steps to Mastering JavaScript’s “this” Keyword | sitepoint.com

Completing his look at JavaScript’s ‘this’ keyword, Ivaylo Gerchev examines how to use ‘this’ in callbacks and closures, as well as lexical binding in ES6.

Source: The Final Steps to Mastering JavaScript’s “this” Keyword

This article just got me unprepared as I was thinking I already covered all possible situations where “this” is changed by the context. However today I cemented my knowledge!

An Introduction to Functional JavaScript | sitepoint.com

M. David Green demonstrates how you can start thinking functionally in JavaScript, by refactoring some all-too-common imperative code to a functional style.

Source: An Introduction to Functional JavaScript

The article starts with an old classical way of doing things with JavaScript and the DOM. Things like global variables with generic names!

It is then translated to a more modern OOP that uses the IIFE, the strict directive, constructor function and its prototype.

And then we enter the world of functional JavaScript! I can’t remember well right now but the final solution reminds me of a design pattern.

One additional interesting thing in the examples is how the author uses string concatenation through arrays ([].join()) instead of “str1” + “str2” as this way is proved to be faster probably because the + operator is overloaded to work with multiple variable types or something else – just remember that string concatenation in JavaScript is slow.

There’s one other solution to the same problem in the comments which may be called one-liner and also the type of Clever Programming which happens when the code is short, fast and clever but a bit hard for beginners to read and understand fast. However using regex is a must for experienced developers which makes this solution also good.

Keep reading on the link above.

Do 404s hurt my site? | Official Google Webmaster Central Blog

I’ve been through this. Testing and redirecting wrong urls and missing pages. I have a site with a couple of million pages where soft 404 and also not found pages can increase to hundreds of thousands after a big automatic update. I managed to handle all of these pages as a single developer of my own sites by refactoring and testing the code making it more predictable so when I change multiple pages I know what to expect. Here comes the very good communication with Google’s Webmaster tools with the help of which I discover bad things on time and can even improve an already a good positioned website.

Of course one of the big things to watch out for are 404 not found and 500 server errors. So let’s read about the former here:

Source: Official Google Webmaster Central Blog: Do 404s hurt my site?

Converting Mongoose model functions to be Promise and callback friendly simultaneously

I just started using promises in one of my Node.js applications after watching the callback hell in some of the code there.

I was going to use Q but while checking the different options I stumbled upon Bluebird and I liked it.

At some time I checked how Mongoose works with promises and discovered that many functions return a promise and also the queries’ exec() returns a promise too. The Promise in Mongoose is mpromise.

However I decided to stick to a single implementation of Promise for my entire application to have something as a standard and predictable way to use “promisified” functions. And this happened to be Bluebird. It’s huge(features) and I like it!

The first thing to “clean” was a function in one of my Mongoose’s models: User.create() – a custom static function that overrides the default create function. I needed the override to be able to receive custom structured arguments and also to do some changes before the model data is saved. I changed the way I handle the create later by removing it and using pre-hooks instead but this is a good example to show and is like a repeatable template for any other function that is going to be converted the same way.

Let’s see the original Promise-free function:

userSchema.static('create', function (data, cb) {
  var user = new User({
    facebookId: data.facebookId,
    accessToken: hat(),
    name: data.name,
    photo: data.photo
  });
  return user.save(cb);
});

You can see that User.create() receives a data object literal and executes the callback cb after it’s saved.

An example usage of create will be:

User.create({
  facebookId: '68yc7j9y4f64',
  name: 'Iliyan Trifonov',
  photo:'https://...'
}, function userCreateCb (err, user) {
  if (err) {
    return console.error(err);
  }
  if (!user) {
   return console.error('User not created!');
  }
  console.info('User created successfully!', user);
});

Now let’s make User.create return a promise:

First we promisify the model with:

Promise.promisifyAll(User);
Promise.promisifyAll(User.prototype);

and then the create function will look like:

userSchema.static('create', function (data) {
  var user = new User({
    facebookId: data.facebookId,
    accessToken: hat(),
    name: data.name,
    photo: data.photo
 });
 return user.saveAsync();
});

Now we should handle the resolve and reject:

User.create({
  facebookId: '68yc7j9y4f64',
  name: 'Iliyan Trifonov',
  photo:'https://...'
}).then(function (user) {
  console.info('User created successfully!', user);
}).catch(function (err) {
  console.error('Error creating the user!', err);
});

For now I am experimenting with the then(resolveCb)/catch(errorCb) combination but it can be changed to then(resolveCb, rejectCb) or then(resolveCb)/then(null, rejectCb).

But what about the rest of the code that depends on User.create to use a callback?

Let’s add the callback argument again:

userSchema.static('create', function (data, cb) {
  var user = new User({
    facebookId: data.facebookId,
    accessToken: hat(),
    name: data.name,
    photo: data.photo
  });
  return user.saveAsync().then(function (user) {
    return cb(null, user);
  }).catch(function (err) {
    return cb(err);
  });
});

And now the create function will work with the legacy code and the new Promises code simultaneously!