Demistfying co

I always wondered why generator functions are included in the JS language, and still don't see why they are very powerful. However one of the key reasons I still think they are a needed step for the evolution of the language is the use-case of this very article.
I am not going to talk about generator functions or Promises or the Fetch API in this article, but you can read for more information in the links I attached.
The following code snippet is basically what co package does where you can easily do asynchronous calls in a synchronous way. (the key difference here is co can deal with not only Promises, but here we just wanted to work with them, not like e.g. thunks, which co can handle).
Enough with the chit-chat, let's see some code!
The first thing what you should feel here is it has a synchronous feeling when it does something asynchronous. Witchcraft!
Let's see what is happening here (click on "Next" and "Prev" to follow the steps of the control flow)

See the Pen Demistifying co by Adam Nagy (@nagyadam2092) on CodePen.

I think this whole topic is more about to move on to the next generation asynchron call methodology, which is called async-await and thus it is a needed step to be able to build that kind of behaviour.
BTW it's fun to have a look at what an ES6 transpiler is doing with this code-snippet, go on and try it here: https://babeljs.io/repl/
In summary I think we achieved a good (not great) way of handling asynchronous calls with a "synchron-like" feeling.

JavaScript and AngularJS basics

This week I had a presentation in Frankfurt for my LH Systems colleagues about JS and Angular in general.
I really had fun over there since they were such a nice audience. Thanks guys!
Here are the links for the presentations:

• http://nagyadam2092.github.io/work/angularjs_presentation/js_basics/#/ 
• http://nagyadam2092.github.io/work/angularjs_presentation/angular_basics/#/ 

Minimalistic Angular minesweeper

It's been a long time, just wanted to show this little guy to you. Nothing special, nothing fancy, just a basic minesweeper.

See the Pen Angular minimalistic minesweeper by Adam Nagy (@nagyadam2092) on CodePen.

JavaScript interview questions

Hello everyone, it's been a long time.
Here are a few of my favourite interview questions which I think a candidate should at least have to be familiar with.

• What is the difference between == and === ?
• most basic question, good for a warm up
• === checks for type too while == does not.
•  Type conversions
• That's a tricky one, lot of questions can be created. You have to try yourself, but here are some examples
• "1"+2+3  -->  "123"
• 1+2+"3" -->  "33"
• true + "2" -- >  "true2"
• true + 1 -->  2
• false + true -->  1
• function something(){} + 1 -->  1
• undefined + null  -->  NaN
• etc...
• What are closures?
• "Closures are functions that refer to independent (free) variables. In other words, the function defined in the closure 'remembers' the environment in which it was created."
• I prefer this definition more: "A closure is an inner function that has access to the outer (enclosing) function’s variables—scope chain. The closure has three scope chains: it has access to its own scope (variables defined between its curly brackets), it has access to the outer function’s variables, and it has access to the global variables. "
• Expect some tricky questions, a typical one is here the 3rd point. As the page says also, you have to surround the critical code with IIFE.
• What is IIFE?
• Immediately Invoked Function Expression
• Basically helps create an own scope for your code.
• (function something(){})() 
• Design Patterns
• I think what this is the most important one. Most of the JS developers think that they don't need any patterns at all. But the point is that's what distinguishes good developers from bad developers. Here are some of the most used patterns. (You can find some good descriptiones here.)
• Module (Revealing Module)
• Observer (event loop)
• Facade
• Singleton
• Factory
• ...
• What is the event loop?
• How the browser handles events. Basically if an event appears, the browser will not stop the execution of the current script, instead puts it in the event queue, and when finished this script, gets the first event from the queue, and executes it's callback
• A very good visualization is here: http://latentflip.com/loupe/
• Prototypical Inheritance using ES5
• You can see my blog post about this topic here: http://nagyadam2092.blogspot.hu/2015/03/oop-in-javascript.html 
•  What are Promises?
• "A promise represents the eventual value returned from the single completion of an operation."
• Basically offers a much better way to handle errors like callbacks when calling asynchronous methods.
• You can read more here: http://www.html5rocks.com/en/tutorials/es6/promises/
• What is 'this' in the following example?
• Most of the examples are pointing if the interviewee knows if 'this' is pointing the global variable (in browser it's the 'window' object)
• good article: http://www.quirksmode.org/js/this.html
• Mention some basic algorithms (code it as well)!
• sorting algorithms
• fibonacci
• computational complexity (O(n), O(logn), ..)
• Turing machine
• Git
• You have to be familiar with Git. From command line.
• Here is a good cheat sheet: https://training.github.com/kit/downloads/github-git-cheat-sheet.pdf

Angular mistakes (1.x)

Hello everyone, it's been a while. I had a lot of work to do, but now I got the time to post this collection I have been collecting. Enjoy!

•  directive's attribute should be dashed, not camelCased, but in the scope of the directive it should be camelCased
  

  <list-display scroll-left="scrollLeft"></list-display>
  scope:{scrollLeft: "="}

• very annoying thing..
• inside a directive the function should be not declared like the "var"-y way
  

  function xy(){..}

  -- good
  

  var xy = function(){..} 

  - not good
• Most of the bugs come from this mistake:
  you should be injecting via the array notation the dependencies, not like
  

  function ($scope){..}

  
  but
  

  ['$scope', function(scope){..}]

  
  This messes up the uglification --> arguments will be uglified, so Angular's compilation will not understand what you want to inject.
• If you're defining a controller inside a directive, you have to be aware injecting dependencies, like '$element' and such. Better way is to define it on the module like this:
  

  angular.module("App").controller('SwiperController',['$element', function ($element) {..}]);
   angular.module("App").directive('someDirective', SwiperContainer)
  function SwiperContainer() {return {restrict: 'E',transclude: true,controller: 'directiveController',template: '<div class="swiper-container {{containerCls}}"><div class="swiper-wrapper" ng-transclude></div></div>'}}

• ES6: if you're writing a service, the name of the class should start with a capital letter!
  

  var module = angular.module("TimelinexrClient");
  class DataService {
  constructor(http) {
  this.http = http;
  this.baseURL = "http://localhost:8080";
  }
  getPaths(from, to) {
  }
  }
  DataService.$inject = ['$http'];
  module.service('DataService',DataService);
  export default module;

• DON'T START A DIRECTIVE ATTRIBUTE WITH x- OR data-! 
• https://docs.angularjs.org/guide/directive#normalization
• if you're using window's setTimeout function instead of $timeout service, you have to call in the end a $scoe.$apply (or $digest) function. 
• The main reason here is Angular is not running the digest loop, so if you're making changes in the model, it will not be rendered to the view.

This list is not complete, there will be added more mistakes later on!

OOP in JavaScript

If you are creating a big project, you are going to have problems with the maintenance of your code. It is a common solution to this problem to use OOP methodology. Fortunately, JavaScript gives you the tool to be able to use these concepts.
There are lots of ways to do this, I am going to cover two big techniques to reach your goal: to be OO. First, you have to understand the basic concepts behind the prototypical behaviour of JavaScript.

Prototypal inheritance (object literal)

Let's look at this example

var parent = {
    get: function fn(){
        return this.val;
    },
    val:42
};

var child = Object.create(parent);
child.val = 69;
var grandchild = Object.create(child);

parent.get(); //42
child.get(); //69
grandchild.get(); //69

E.g. what happens at the child.get(); call? The value attribute is set to 69. That's clear. But what will be it's get function? Here comes the cool part. Obviously the child object does not implement any get functions, so the JavaScript engine will seek for it in the prototype chain. It will go back to it's prototype object (an dif there is no implementation of get, it will look at it's prototype, etc.. That's what we call 'prototype chain'.), and call it's get function, however the this keyword is going to reference to the child object. Pretty neat, isn't it?
For more information about Object's create function check out this link.
An important note: polymorphism is also available in JavaScript (just like in e.g. JAVA):

var greatgrandchild = Object.create(grandchild);
greatgrandchild.get = function() {
    return this.val + " is my val."

};
greatgrandchild.get(); //"69 is my val."

Also we can create a contructor in an object:

var MyObject = {
    constructor: function(value) {
        this._val = value;
    },
    get: function() {
        return this._val;
    }
};

MyObject.constructor(42);
MyObject.get(); //42 

Functional inheritance (the "classical" model)

This model is very similar to what we learned before. It has constructor as well, but this time it will point back to the function. So basically the function we create will be the constructor of our class. We can do this by calling the keyword new.

var XXX = function() {
    console.log("Here I am, sitting on a tree.");
};
XXX.prototype.constructor; //function () {console.log("Here I am, sitting on a tree.");}
var x = new XXX(); //"Here I am, sitting on a tree."

So every time we create a function, two objects are created: the function object and the prototype object, who holds a constructor variable, who is pointing back to the function object. A bit weird.
As we see, every function is a contructor in it's own way, however, not every function was meant to be a class.
So how can we do inheritance with this model?
It is very similar to the previous object notation inheritance, but this time we have to give explicitly a value to the object's prototype variable, like the following.

//class Animal
var Animal = function(_feet) {
    this.feet = _feet;
};
Animal.prototype.eat = function() {
    console.log("I am eating, omnomnom..");
};
Animal.prototype.info = function() {
    console.log("I have this amount of feet: " + this.feet);
};

//class Cat extends Animal
var Cat = function(_feet, _miceHaveEaten) {
    Animal.call(this, _feet);
    this.miceHaveEaten = _miceHaveEaten;
    var privateVariable = "This is not available outside the class!";
};
Cat.prototype = new Animal();
Cat.prototype.purr = function() {
    console.log("Purrrrrr.........");
};
//polymorphism
Cat.prototype.info = function() {
    console.log("I have eaten this amount of mice so far: " + this.miceHaveEaten + ", also I have " + this.feet + " feet.");
};

var unicellular = new Animal(0);
unicellular.eat();
unicellular.info();

var cico = new Cat(4, 9001);
cico.eat();
cico.purr();
cico.info();

Important note: if we declare a e.g. function in a class with the keyword this, it is going to be assigned to every instance of the class. Typically we don't want to do this, so we want to assign it only to the class's prototype.
Important note #2: we can declare private variables inside a class as you can see in the declaration of the class Cat. This can be done by easily using the var keyword, not using the reference to the object with the this keyword.
Not so important, but very interesting note: you cant change the value of this with the '=' operator. If you want to do a call like the following: this="this"; , the browser will give a ReferenceError: Invalid left-hand side in assignment. error.
I highly recommend you to try all these code snippets in your browser's console for example to get a more in depth understanding of these concepts.

Exercise

Create a class called "Orc" using the classical model. It has an "ugliness" property which is set in the constructor. This property is a Number between 0 and 100, the default value is 100. This class has a method called "intimidate", which writes to the console "You will fear me cuz my ugliness index is: " plus the object's "ugliness" property.

Create a subclass "UrukHai" which inherits from the class "Orc". It has one other property than "Orc"'s, this is called "strongness", a Number between 0 and 10, the default value is 0. It has a new method called "attack", which writes to the console: "I will crush you cuz my ugliness index is {{ugliness}}, and my strongness is: {{strongness}}".

Also create some instances of the classes showing all the methods of a class.

//class Orc
var Orc = function(_ugliness) {
    if (_ugliness > 0 && _ugliness < 100) {
        this.ugliness = _ugliness;
    } else {
        this.ugliness = 100;
    }
};
Orc.prototype.intimidate = function() {
    console.log("You will fear me cuz my ugliness index is: " + this.ugliness);
};

//class UrukHai extends Orc
var UrukHai = function(_ugliness, _strongness) {
    Orc.call(this, _ugliness);
    if (_strongness > 0 && _strongness < 10) {
        this.strongness = _strongness;
    } else {
        this.strongness = 0;
    }
};
UrukHai.prototype = new Orc();
UrukHai.prototype.attack = function() {
    console.log("I will crush you cuz my ugliness index is " + this.ugliness + ", and my strongness is: " + this.strongness);
};

JavaScript difference between bind() VS call() and apply()

First of all let me discuss about the keyword this in JavaScript.
this always refers to the “owner” of the function we're executing, or rather, to the object that a function is a method of. So e.g. create an object called obj like this:

var obj = {
    x: 81,
    getX: function() {
        console.log(this.x);
        return this.x;
    }
};
obj.getX(); //81

Here the this keyword refers to the object (obj) itself because we are going to call this function from the object's context. A golden rule here is to look at who called the function. Another example could be a global function:

function globalFunction() {
    console.log(this);
}

This can be confusing, because a man could think 'so who is calling this function? Who is the owner?
Well, JavaScript has a bad habit of dealing with variables: the function will be assigned to the global variable, in a browser it is the window object. So right now these two calls are equivalent:

globalFunction();
window.globalFunction();

Therefore in the function globalFunction, this will refer to the global window object.
Now let's move on to the next step to understand the functions bind, call and apply.
With these functions we can manipulate the keyword this in a function. Very interesting, and indeed, we do need these kind of functions. Why? E.g. jQuery's forEach call on a set of HTML elements would be very funny to use if the keyword this would not be the element of the iteration, isn't it? So the implementation includes the the function call to make sure, this is referred to the variable of the iteration.
But let's take a look back to our example. How can we force obj 's getX function to reference the this keyword to a variable we want to give? The solution is what (hopefully) you think: call, apply and bind functions. Let's see on examples, what is happening with each cases:

var otherObj = {
    x: 99
};
obj.getX.call(otherObj); //99
obj.getX.apply(otherObj); //99
var myGetXFunction = obj.getX.bind(otherObj); //returns a function
myGetXFunction(); //99

What is happening here? call will manipulate the this keyword to our variable in the first argument inside the function. The only difference between call and apply is apply lets you invoke the function with arguments as an array; call requires the parameters be listed explicitly.
However, bind will not execute the function. bind will only give a reference to a function, which is similar to the original function, but the keyword this is changed to our variable. Very elegant!
I hope you understand now more the meaning and reason behind these functions.
A JSFiddle example is below: