js

this insane language was developed by Brandon Eich in 10 days! John Resig showed a preview of what it is capable with his lib jQuery. All the new JS UI Frameworks are a testimony to the super powers it has.

Arrow Functions ES6

// Ex1:
var nums = [1, 4, 9];
var sqs = nums.map(Math.sqrt);

// Ex2:
myArray = [1,2,3,4];
myArray.map(element => {
  return element + 1;
});

// Above is same as
myArray.map(element => element + 1);

For more: source1, source2

/> remove duplicates

var names = ["Mike","Mike","Matt","Adam","Jenny"];
var uniqueNames = [];
var counter = 0;
$.each(names, function(i, el) {
    if($.inArray(el, uniqueNames) === -1) {
    	uniqueNames.push(el);
    } else {
    	console.log(i+'duplicate found: ' + el);
    }
});

console.log(uniqueNames);

/> sort strings of numbers

var strNumbers = ["20","2500","10","35","0"];
var customSort = function (a, b) {
    return (Number(a.match(/(\d+)/g)[0]) - Number((b.match(/(\d+)/g)[0])));
}

var sorted = strNumbers.sort(customSort);
console.log(sorted);
document.getElementById("sorted").innerHTML= sorted;

// html
<div id="sorted"></div>

/> JSON stringify vs parse

var obj = { name:"Adrian", age:28, city:"Melbourne"};
console.log(JSON.stringify(obj));
document.getElementById("demo").innerHTML = JSON.stringify(obj);

var json = '{"Foo":["B","A","R"]}';
var object = JSON.parse(json);

// html
<div id="demo"></div>

/> Get number of chars in JSON response
the json payload it will be wrapped inside ‘pre’ tag when the browser renders it.

document.getElementsByTagName("pre")[0].innerHTML.length

/> JS Callback Function
pass a function as an argument

$("button").click(function(){
    $("p").hide("slow", function(){
        alert("The paragraph is now hidden");
    });
});

/> Abstract vs Strict Equality (== vs ===) in JS
In JS you have to use either == or === for comparison. First is known as abstract equality it will resolve the data type and compare the values for you. Second is known as strict equality it will first check if the type (ex: string, number, boolean etc) on the left hand side is same as the value being compared on the right hand side. Example:

console.log(4 == "4"); // true (abstract equality)
console.log(4 === "4"); // false (strict equality)

/> Concat | Minify | Uglify

Concatenation: appends all of the static files into one file (application.js).

Minification: removes unnecesary whitespace & redundant or optional tokens like semicolons & curly brackets. Can be reversed via a Linter.

Uglification: Transforms the code into an “unreadable” form, (i.e. renames variables, functions to hide the original names or intent). It can’t be reversed.

/> Bubble Sort

console.log(sort([50, 10, 33, 3, 5, 20, 5]));

function sort(nums) {
  var n = nums.length;

  for(var i = 0; i < n; i++) {
  	for(var j = 1; j < n; j++) {
    	if(nums[j-1] > nums[j]) {  

				var temp = nums[j-1];  
        nums[j-1] = nums[j];  
        nums[j] = temp;
      }
    }
  }

	return nums.toString();
}

/> Observer in JS

/> AJAX vs Promises vs Service Workers

Angular

/> Code Quality
Sonar Cube Istanbul

/> Angular Forms
Template Driven vs Model Driven

Template Driven approach is very familiar to Angular 1 developers and is ideal for easy migration of Angular 1 applications into Angular

Advertisements