Posted in Interesting, Programming, Softwares, Web Tech

Because…”this” is not that

Yes! You read it right. This is not that in Javascript and otherwise.

The this keyword in javascript can be confusing for a naive JS learner. Its behaviour varies depending on the execution context. In general, this refers to the object under current execution.

  • this, when used alone refers to a global object.
var a = this;
console.log(x);

A browser window

  • this, when used in an object method, refers to owner of the object method.
var car = {
 model: BMW,
 colour: black,
 details: function(){
    return this.model + " " + this.colour;
 }
};

this refers to the car object. The car object is owner of its properties and methods.

console.log(car.details());
BMW black
  • this, when used in a function refers to a global object
function testFunction() {
  return this;
}

returns the global object [object Window]. However, in strict mode, the above testFuntion returns undefined

  • this, when used in event handling

refers to the html DOM element on which the event listener is placed

Click here!

alerts with button tag name.

Posted in Interesting, Open Source, Programming, Softwares, Web Tech

Web browsers and JavaScript engine

What is a JS engine?

A Javascript engine is a computer program that executes JS code in a web browser. The engine is developed by web browser vendors.

The first JavaScript engine was created by Brendan Eich in 1995 for the Netscape Navigator web browser. This has evolved to be known as SpiderMonkey engine used by Firefox.

In general, JS engines are also known as ECMAScript engines. As many web browsers there are, so are the JS engines.

  • Google chrome has V8 engine.
  • Mozilla Firefox has SpiderMonkey
  • Microsoft Edge and Internet Explorer has Chakra
  • Apple Safari has JavaScriptCore
  • Opera has Carakan(pronounced Tsharakan)

Each JS engine works in a more or less similar fashion. But, the most popular being V8 engine which used in Chrome and Node.js

Posted in Interesting, Open Source, Programming, Softwares, Web Tech

Code Linting

What does linting mean?

Linting in software world means analyzing the developed source code for potential errors and warnings such as syntactical, logical (which might have got introduced without the knowledge of a developer) with the help of a program. The program is called as a lint or linter.

Why is linting important?

This mechanism of running lint ensures that the code is bug free and adheres coding guidelines of a particular language. This also helps in maintaining code quality reducing technical debt incurred.

Each language has its own linting tools. For eg. Javascript has JSLint, JSHint, ESLint etc.

  • JSLint is a static code analyser which checks if code complies JS coding rules. Its available on jslint.com. The CLI is also available. It was created by Douglas Crockford in the year 2002.
  • JSHint was created by Anton Kovalyov in the year 2011 and is a fork of Duoglas Crockford JSLint project. Anton thought that JSLint was “too opinionated and less configurable”. Both, online jshint.com and CLI versions  are available for this.
  • ESLint was created by Nicholas Zakas in the year 2013 as a static analysis tool which identifies problematic patterns in javascript. This tool is an advanced version of JSLint and JSHint. ESLint covers both code quality and coding style issues which were not covered by JSLint and JSHint. It supports current ECMAScript standards.Online available on eslint.org and as of March 2019 ESLint is a part of OpenJS foundation. Companies such as JetBrains has integrated support for ESLint in their WebStorm code editor and Facebook has published official ESLint plugin for React projects.
Posted in Interesting, Open Source, Programming, Web Tech

Pug.js

What is pug.js?

Pug.js a HTML template engine for Node.js. You can write a simple pug code which the compiler will compile it to HTML code and later on browser will render it.

How does pug code differ from html code?

Pug code is a crisp piece of code which looks like a paragraph which helps in readability. Pug supports JavaScript, so using JavaScript expressions, we can format HTML code. HTML code is consists of tags and Pug also uses same tags. But pug doesn’t have closing tags.

Some thoughts…

Since pug comes as a npm package we can run using browser or on node.js using cli. One should take care of white space while writing pug code, because it can cost a big time.

 

Posted in Interesting, Programming, Web Tech

Fun with JS array functions

If you are a JS programmer you must have used arrays quite often. While working with arrays, we somehow always tend to use for loop or Array.forEach() function followed by conditional if-else block checking. To bring into practice the use of already existing prototype array functions we have to understand when to use which functions. So, lets have some fun in understanding and KISS(Keep It Simple, Stupid!). Most of this function are self explanatory from their names itself.

Array.find() method returns the value of first element present in the array that satisfies the testing condition else returns undefined.
var arr = [35, 98, 78, 1, 8, 3];
var findEle = arr.find(function(ele){
return ele > 50;
});
console.log(findEle);

This will return 98 which is the first element that satisfies condition ele > 50.

Array.findIndex() method returns the index of the first element in the array that satisfies the provided testing function else returns -1.
var arr = [35, 98, 78, 1, 8, 3];
var findEleIndex = arr.findIndex(function(ele){
return ele < 10;
});
console.log(findEleIndex);

This will return 3 which is the index of first element that satisfies condition ele < 10.

Array.includes()method determines whether an element is present and returns boolean.
var arr = [35, 98, 78, 1, 8, 3];
var isPresent = arr.includes(98);
console.log(isPresent);

This will return true as 98 is present in the array arr.

Array.some() method determines whether atleast one element of the array satisfies the testing condition and returns boolean.
var arr = [35, 98, 78, 1, 8, 3];
var isPresent = arr.some(function(ele){
return ele > 50;
});
console.log(isPresent);

Array.every() method tests whether every array element passes the test and returns boolean.
var arr = [35, 98, 78, 1, 8, 3];
var test = arr.every(function(ele){
ele > 10;
});
console.log(test);

This will return false as 1 and 3 are less than 10 and test condition fails.

Array.map() creates a new array by applying some action on every element in the original array.
var arr = [35, 98, 78, 1, 8, 3];
var mapValue = arr.map(function(ele){
return ele * 2;
});
console.log(mapValue);

This will return an [70, 196, 156, 2, 16, 6].

Array.forEach() executes action(s) for every elemnt in the array. It is similar to for loop.

Array.filter() creates a new array depending on if the condition is satisfied or not.
var arr = [35, 98, 78, 1, 8, 3];
var mapValue = arr.filter(function(ele){
return ele > 50;
});
console.log(ele);

This returns [98, 78].

Posted in Open Source, Programming, Web Tech

ECMAScript

What is ECMAScript ?

ECMA is a short form for European Computer Manufacturer’s Association. ECMAScript (ES) defines a standard and contains specifications for scripting languages such as JavaScript (Netscape /Mozilla browser implementation of the ECMA specification)and JScript (Microsoft’s Internet Explorer) developed by Brendan Eich in 1995. Therefore, one can also say that ES is a superset of JS and JScript.

That means it is used for client side scripting such as JavaScript and  for writing server side applications and services using Node.js.

Several editions with new feature support per edition have been published for ECMAScript. It should be noted that with each version release, there were support compatibility issues with some browser’s versions.

Posted in Open Source, Web Tech

Javascript bundling and minification

Bundling is basically concatenating all small or big javascript and or css files into one huge file to minimize the number of requests and hence load on the server.

To speedup loading of a webpage bundling and  minification of the bundled code is necessary. Minification is the process of removing unnecessary characters like whitespace, comments, new line characters etc. from source code to reduce the overall size of the content without changing the functionality of the code.

So, less file size means lesser time to process and download files. Of course, there are various approaches to bundling and minification using bundlers like Webpack,  Browserify, RequireJS etc.

Posted in Programming, Softwares, Web Tech

AMD in Javascript

AMD stands for Asynchronous Module Definition. In a nutshell, it’s a format or a specification for writing javascript.

So, what is a Javascript module?

Its a reusable code which exports specific objects, making them available for other modules through dependency references to be used their programs.

These modules can be loaded asynchronously, if desired.  That means, there’s  a huge improvement in website performance as the files are only loaded when they are needed.  Also, it provides developers with the flexibility to define order in which module dependencies have to be loaded and load multiple javascript files during runtime.

AMD implementation is used by jQuery, Dojo, Firebug etc. There are various javascipt module loaders like RequireJS,  Browserify,  Webpack, SystemJS

Posted in Interesting, Programming, Web Tech

Round, ceil, floor : Decimal to integer

Javascript has inbuilt functions for converting decimal number to an integer value.

Math.round function is used to round a number to its nearest integer. If fractional part of the number >=0.5 then the argument is rounded to next higest integer.
If fractional part of the number < 0.5 then the argument is rounded to lowest integer.
Syntax: Math.round(number)
eg. Math.round(7.5) = 8
Math.round(7.2) = 7

Math.ceil function returns integer greater than or equal to a given number. Ceil means think of the ceiling of the room which is above your head.
Syntax: Math.ceil(number)
eg. Math.ceil(7.5) = 8
Math.ceil(7.2) = 8
Math.ceil(7) = 7
Math.ceil(-7.5) = -7
Math.ceil(-7.2) = -7

Math.floor function returns integer lesser than or equal to a given number. Floor means think of the floor of the room which is below you
Syntax: Math.floor(number)
eg. Math.floor(7.5) = 7
Math.floor(7.2) = 7
Math.floor(7) = 7
Math.floor(-7.5) = -8
Math.floor(-7.2) = -8

Posted in Open Source, Web Tech

KnockOut It is

Knockout.js is a javascript library that helps you implement dynamic data hadling with more simplicity and maintainability. Since it’s  a pure javascript library it can work with any client-server technology.

Features:

  • Declarative data binding
  • Automatic UI refresh
  • Can be added on top of your existing web application without requiring major architectural changes
  • Very light weight library
  • Assists in dependency tracking between HTML element and the underlying data

How KO works?

Instead of manually tracking, each element of the HTML page that rely on the updated data , it will automatically update the DOM when any changes to the data model occurs.

Knockout is not a replacement of jQuery. KO provides a complementary, high-level way to link a data model to a UI. It doesn’t attempt to provide animation, generic event handling, or AJAX functionality. Knockout is focused only on designing scalable and data-driven UI.

MVVM Design Pattern

Knockout uses a Model-View-ViewModel (MVVM) design pattern in which the model is your stored data, and the view is the visual representation of that data and ViewModel acts as the intermediary between the model and the view.

Actually, the ViewModel is a JavaScript representation of the model data, along with associated functions for manipulating the data. Knockout creates a direct connection between the ViewModel and the view, which helps to detect changes to the underlying model and automatically update the right element of the UI.