Today 3/6/19

What is Agile?

“Agile is a set of values and principles for software development under which requirements and solutions evolve through the collaborative effort of self-organizing cross-functional teams.”

Agile is a set of practices to help you be adaptable, and ensure your team is always working on something important.

Agile is the process of breaking down a large project into smaller tasks (usually called stories) and prioritizing them.

Agile Workflow

It is very simple.
* Sprint Planning: At first you start with the ToDo List AKA Product Backlog - a prioritized list of items to deliver a product.
* Once you have the ToDo List, the next step is to have a planning meeting where you pick the most important user stories and place them in a current Sprint. The required efforts are estimated and agreed upon
* The user stories are then developed into one to three weeks of Sprint (development cycles), it includes, planning, testing, bug fixing and everything that goes into delivering that feature in that sprint
* The team goes through a brief daily standup meetings every day to understand what the team did yesterday, what it is doing today, and if their are any roadblocks
* At the end of the sprint, you do a sprint review where you see if the development adds any values to the customer/product, if yes, you ship it. If not, then you will have to repeat the entire process for another sprint
* At the end you will have a Sprint retrospective meeting where you see what went well, what can be changed, what needs to be kept and what can be removed. After this meeting, the team moves on a next sprint planning and the cycle repeats

Today 3/5/19

What are algorithms? 

An algorithm is a set of unambiguous instructions to solve any problem. For example, when you make some changes in a word document, the document is auto saved. The autosave feature is an algorithm, it follows an instruction of saving a document the moment when any edit happens on the document.

Another practical and most understandable example would be; consider you have 10 people in a room and you have to count the number of people in that room. All of us follow the simple human process and start counting people in that room by pointing fingers at each person. In this process, unknowingly, we follow the set algorithm of counting people. The same applies to every task we perform in our daily activities.

Agnostic Apps / device agnosticism 

The term agnostic apps is gaining more and more popularity these days. It's a big and scary word but if we actually look at the literal meaning of it, it simply means any application or device that works just fine with various systems without requiring any special device/adaptation. For example, a website that works fine on laptops as well as on mobiles, tv, wearables, refrigerators, IOTs etc. 

Agile Epic and User Story 

An Epic is a a long/big story as the name suggests. There can be multiple small user stories for that epic. For example, an epic for a travel websites can be I want to find holiday destinations and travel around the world. It's big and it is difficult to define, so, to do that we have to break this epic into multiple small user stories such as As a user I want to discover new destinations.

A user story is a short, simple description of a product feature. User stories define product backlog and a product backlog is a collection of user stories that are prioritized based on the user/business needs. A user story has three parts (1) persona (as a user) (2) the feature (I want...) (3) the need satisfied by the feature (so that I can achieve...) for example, As a user I want recommended destinations based on my current location.

Minimum Viable Product (MVP) 

It is a product with just enough features to test the concept and give feedback on the developed product. Most companies start working on the project without knowing if they can provide what is expected, and it is the reason why many of them fail. Imagine a situation that you have to deliver a banking product, you put in years of efforts and eventually you develop something that the customers don't want. That can be a big pain. To avoid it, it's best to give customers the MVP, start with the most important features first, make sure that feature works just as expected and once the customers are happy with what you have build then continue with other features and eventually a complete product.

Focus 

It's the motion of your mind and body (how you feel at the moment) helps you learn things faster. Information combined with Emotions becomes a long term memory.

Javascript ES6 - lexical scope of this

In Javascript every function brings its own 'this' context. The situation becomes difficult to work with when there are many functions inside function which complicates the context of 'this'. The ES6 fat arrow (=>) passes the lexical scope of parent 'this' to all child functions -

Example:

function parentFunction(){
    this.add = 0;
    this.addAnother = function(){
    this.addOne = setTimeout(function(){
        console.log(++this.add);
        }, 1000)
    }
} 

var funcObj = new parentFunction();
funcObj.addAnother(); // NaN  

It outputs to 'NaN' because the 'this' context here 'console.log(++this.add);' is scoped to setTimeout function.

To avoid this, the ES5 solution is to use the classic 'var that = this' -

function parentFunction(){
    this.add = 0;
    var that = this;
    this.addAnother = function(){
    this.addOne = setTimeout(function(){
        console.log(++that.add);
        }, 1000)
    }
} 

var funcObj = new parentFunction();
funcObj.addAnother();  

Now, this works perfectly fine, but the new ES6 fat arrow works even better by passing the lexical scope of parent 'this' to all child functions -

function parentFunction(){
    this.add = 0;
    this.addAnother = () => {
    this.addOne = setTimeout(() => {
        console.log(++this.add);
        }, 1000)
    }
} 

var funcObj = new parentFunction();
funcObj.addAnother();  

The traditional ES5 'this' creates a new scope of 'this' in each function which is why we were getting the 'NaN' because the 'this' in setTimeout function was scoped to the setTimeout function alone.

With the fat arrow, the 'this' in setTimeout refers to the lexical scope of parent 'this'.

Javascript: Var vs Let vs Const

The var, let and const game is all about their scope (the location where they are available to the developers). Put it simply -

• Var has a functional scope (local and global/window), also it goes all the way up till the window object to find the declaration. Var is also a function scope (they are available inside the function they are declared in)   
• Let has a block level scope. It stays within the curly braces. Let allows re-assigning its values  
• Const also has a block level scope. Use const if you do not need to change its value 

Let's go with examples:

Var:

for(var i = 0; i < 10; i++){
    console.log(i);
}

It's normal to consider that the scope of 'var i' would be available inside the curly braces of for loop. However, the 'var i' is also accessible outside of the for loop.

for(var i = 0; i < 10; i++){
    console.log(i);
}
console.log('After loop is over ' +i); //logs 10 

It's completely valid because of the concept of 'Hoisting'. All variables in JavaScript are hoisted on top of the function - something like this:

var i; 
for(i = 0; i < 10; i++){
    console.log(i);
}
console.log('After loop is over ' +i);   

This is because there is only one type of scope in ES5 - that is Function Scope

function func(){ 
    for(var i = 0; i < 10; i++){
        console.log(i);
    }
}
func();
console.log('After the function ' +i); // throws an error, because var i is not accessible     

And if you don't declare the var keyword inside the function, the JS will hoist the var at the window/global level and it will be accessible everywhere  -

var i; // hoists in global scope 
function func(){ 
    for(i = 0; i < 10; i++){ // if you don't mention 'var i'
        console.log(i);
    }
}
func();
console.log('After the function ' +i); // logs 10      

Let:
Let will never have the issues like var, because let has a block level scope which means it doesn't work outside of that block of code, or outside of those curly braces -

 
for(let i = 0; i < 10; i++){
    console.log(i);
}
console.log('After loop is over ' +i); // doesn't work     

But you can re-assign the values of let -

 
let i = 'hi';
i = 55; 
console.log(i); // logs 55 

Const:
Changing const value is not possible -

 
const i = 10;
i = 55; 
console.log(i); // throws typeError  

But, it allows a little flexibility to change the property of const object  -

 
const i = {
    k: 10
}
i.k = 55; 
console.log(i); // logs k:55   

Get form fields value using jQuery

In jQuery the .val() method is used to get form field values from input, textarea, select etc. Use the :checked method for select, checkbox, and radio buttons.

Here’s a Fiddle:

JavaScript Constructor Prototype

At first it's important to understand that in JavaScript every function is an Object. Ok - then, what is a Constructor function?

The Construction function in javascript is just like any other function. Except, the convention it follows - Capitalization. The first character is in capital format. Another difference is that it uses the 'this' keword of javascript, which is the most important and confusing keyword of all.

This is how we create the constructor function:

function Student(name){
  this.name = name;
  this.getName = function(){
    return this.name;    
  }
}
var s1 = new Student("Leo");
var s2 = new Student("Lara");

console.log(s1.getName()); //Leo
console.log(s2.getName()); //Lara

This is not an appropriate way because if you create 500 Student objects then there will be 500 copies of the getName() function in memory.

Approach 2:

function Student(name){
  this.name = name;
}
var s1 = new Student("Leo");
s1.getName = function(){
  return this.name;
}
var s2 = new Student("Lara");

console.log(s1.getName()); //Leo
console.log(s2.getName()); //TypeError: s2.getName is not a function

The problem with this approach is that you have to repeat the same function for each object you create which will be arror prone.

Approach 3:

function Student(name){
  this.name = name;
}
Student.getName = function(){
  return this.name;
}
var s1 = new Student("Leo");
var s2 = new Student("Lara");

console.log(s1.getName()); //TypeError: s1.getName is not a function
console.log(s2.getName()); // 

The problem with this approach is that our newly created objects don't have access to the getName function.

Let's use the prototype property to associate the function

function Student(name){
  this.name = name;
}
Student.prototype.getName = function(){
  return this.name;
}
var s1 = new Student("Leo");
var s2 = new Student("Lara");

console.log(s1.getName()); //Leo
console.log(s2.getName()); //Lara

1. The benefits of this approach is that no matter how many objects you create, functions are loaded only once in the memory.
2. It allows you to override the function if necessary

JavaScript: Prototype Object Vs Reference Object Explained

What is an Object?
It is a set of key and value pairs. You can use any number of keys with any name as long as it is a String. And each key can be associated with any value, those values can be of any Types, such as: Primitive Types, Function Objects and object itself.

var myObject = {
  a: undefined, //Primitive
  b: null, //Primitive
  c: true, //Primitive
  d: "foo", //Primitive
  e: 4.33, //Primitive
  f: function bar() { /**/ }, //Object
  g: {
    h: baz
  } //Object
}

The difference:

In case of Objects - values are passed by reference, and the changes are bi-directional:

var a = { x: 1, y: 2}
var b = a;
console.log(b); // Object {x: 1, y: 2} 

//
b.x = 10;
console.log(a.x); // 10

//
a.y = 20;
console.log(b.y); //20

While in Primitive - the values are passed by value, and the changes are uni-directional:

//Prototype Object
var object1 = {x: 11, y: 22};
var object2 = Object.create(object1);
console.log(object2); //Object {}

//
object2.x = 100; 
console.log(object1.x); //11 
console.log(object2.x); //100 

//
object1.y = 200; 
console.log(object2.y); //200 
console.log(object1.y); //200 

Fiddle: http://jsfiddle.net/sL6q0742/