Author: Roshni Devadiga

An overview of Google accelerated mobile pages

An overview of Google accelerated mobile pages

Google algorithms of search engine ranking keeps updating at a rapid pace. This means the way google treats our pages for ranking also keeps changing. In recent times we have seen google giving more importance to mobile first websites. This in common terms means that websites having optimised mobile pages will stand a better chance in the ranking (obviously with due attention given to the usefulness of the content).

An addition to this mobile first initiative is the Google accelerated mobile page concept.

What is Accelerated Mobile pages?

Accelerated Mobile pages or AMP as it called, are minimal versions of the mobile web pages. These pages have pure article content with all the clutter of a normal webpage removed. The concept of AMP is only for mobile pages and only recognised by google search engine.

Why Accelerated Mobile pages?

The concept was introduced due to the fact that mobile web pages need to be light and quick to load even in cases of not so great mobile internet connections. The core purpose of having a mobile web page is getting information on the go. If the website dumps in a lot of non information stuff like flashy animations, heavy images, heavy JavaScript etc, then it kind of shifts from the basic purpose of a mobile web page in the first place. This is primarily the reason of introducing the concept of AMP by google.

What makes a page AMP compliant?

The amp compliant mobile pages have a different markup as compared to the traditional html pages. These help the search engines identify whether a page is amp compliant or not. You can find a list of all these markups and the way for writing an amp page here

You can validate your webpage for amp compliance through a wide range of validators available. Google webmaster tools has an inbuilt validator as well.

AMP checklist

I am putting down a quick checklist that you need to keep in mind while building an AMP page:

  1. Use amp compliant tags
  2. You cannot have external JavaScript files included like you normally do using the script tag. You need to load it using the google CDN. Try to avoid adding an external JavaScript file as much as possible for the sake of simplicity and keeping the page light
  3. The css should be either inline or internal. Loading external css files is not allowed.
  4. The main mobile webpage will have an amphtml meta tag pointing to the amp url of the mobile webpage. The amp version will have a canonical meta tag pointing to the main mobile version of the webpage
  5. You cannot have the normal adsense ads or any other types of ads as you would use it on normal sites. These also need to be modified for amp. There is a google adsense amp version available which you can use. Also there is an amp version of google double click ads. These two can be used for adding any kinds of ads on the amp pages
  6. For placing any kinds of widgets you can make use of amp iframes

Hope this article gave you a quick overview of what AMP is all about. Do leave your feedback in the comment section below.

Event Bubbling and Capturing in JavaScript

Event Bubbling and Capturing in JavaScript

What are events?

Events are any kind of actions in JavaScript. They can either be user initiated(like a button click) or system initiated (like document load). When these events occur, a lot goes on in the back end which is most of the times not visible to us. You can have handlers attached to these events which will do a particular task when an event occurs. Example of an event can be a click event and a click handler can be attached to it, that will perform a set of tasks that you want it to, when a target is clicked.

Phases of events in JavaScript

When an event occurs, it goes through the following phases in the given order:

  1. Capturing Phase
  2. Target Phase
  3. Bubbling Phase

Let us take a look at each one to understand it better

Capturing phase in JavaScript

This is the phase that is triggered at the very beginning when an event like a button click occurs. This travels from top to bottom of your DOM tree until it reaches the target.

Consider the following html.

<body id='container'>
  
<div>
    <a>Click me!</a>
  </div>

</body>

When we attach click handlers in capturing phase to each of the elements of the DOM tree and then say we click on the anchor tag. The capturing phase is triggered first and the trigger takes place from top to bottom direction until the target that is the anchor tag is clicked.

Target Phase in JavaScript

This is the phase which follows the capturing phase and is triggered when the capturing reaches the target. The target in the above example is the anchor tag. So this phase will come into play when the capturing travels from the html down the DOM tree and reaches the anchor tag.

Bubbling Phase in Javascript

This is the phase in which most of the time we register our handlers. This is by default the phase of event handling.

Once the target phase is executed, the execution enters into the bubbling phase. Unlike the capturing phase, this travels from bottom to top of the DOM tree. It initiates from the target which is anchor in our case. It travels from the anchor to each of its ancestors triggering the events of each if registered until it reaches the top level DOM node that is HTML in our case.

 

Take a look at the simple example below which illustrates these phase in action:

Memoization in JavaScript

Memoization in JavaScript

We extensively make use of function calls in JavaScript. We may run function calls in loops for executing the function for a set of elements. Function calls are expensive and involve some overhead. This overhead becomes very much prominent when the function is to be executed over and over again for a huge number of times. But JavaScript can help us take away a little burden of this repetitive execution of functions by introducing a concept of ‘Memoization’.

Memoization in simple terms

Memoization in very simple terms is caching. If you are aware of the term caching you would know that it means saving what you have already loaded or executed in such a way that if there are any future requests with the same set of conditions, then you can directly give out the result that you previously saved. You need not carry out the execution again.

Memoization in JavaScript

With memoization of functions you can achieve caching. Say you have a function which you may need to execute a number of times with a set of parameters which would be repeating. In such a case no need to repeat the execution again and again. All you need to do is after the first execution save the result in something like a cache. This can be either an array or an object in JavaScript which you can refer to and utilize later. Then on subsequent execution you would first check the cache for the presence of any entry for the given condition or the given set of parameters. If you find it in the cache then you simply return the result without having to execute it again. If you do not find it then you execute the function and save the result for the given condition in cache for any such future request.

Fibonacci execution using memoization in JavaScript

Since now the basics are clear, let us dig into an example that explains how we can write a function which calculates fibonacci and make it more optimized using memoization.

Consider the below example of fibonacci without memoization

This is a simple way of fibonacci. If you take a look at the last few lines you would find that first we are executing the function using the parameter 5 and after that we are executing it again using 7. So when we execute it using 7 then if you see the code it goes through the entire process of executing it for 7, 6, 5, 4, 3, 2, 1. This is unnecessary.

What if we could save the execution that we had done for the parameter 5? If this was done then for parameter 7 we would only have to execute the function for 7 and 6 and use the memoized function for 5. This would save us a lot of overhead and also time.

Take a look at the memoized version of fibonacci below

This is one of the best ways of carrying out caching of function executions to save time and overhead.

Hope you had a great time reading this article. Stay tuned for more!

Features of ES6(Ecmascript 6)

Features of ES6(Ecmascript 6)

What is Ecmascript 6(ES6)?

Ecmascript 6 or popularly known as ES6 is the latest released specification of ecmascript that powers javascript. It was released in 2015. Hence it is also known as ES2015. It is not currently supported by all major browsers, but you can use Babel which is a javascript compiler which converts the es6 code and makes it compatible with es5 supporting browsers.

Features of ES6

ES6 offers loads of cool features which are inspired from other programming languages.Let us dive into the details of what ES6 has in store for us.

1. Introduction of ‘let’ keyword:

The var keyword that we used earlier in javascript had only function scope.  But es6 has introduced a ‘let’ keyword which brings block scoping to javascript like the other programming languages like php and java.

With block scope the problem of variable hoisting is avoided. Variable hoisting is a concept in which a variable declared within a function gets moved upwards towards the beginning of the scope which is the function block. One thing to note is that only the variable declaration gets moved to the beginning of the scope whereas the definition stays as it is.

Take the following example:

function test(flag)
{
    if(flag==true)
    {
        var variable1 = 'I am variable 1';
        console.log(variable2);//Undefined
    }
    else
    {
        var variable2 = 'I am variable 2';
    }
    console.log(variable2);//Undefined
}
test(true);

Here var variable1, var variable2 will be hoisted to the top at the beginning of the function. Hence when  we try to access the variables when it is not defined, it throws an undefined error and does not terminate the program. This can be dangerous and misleading.

ES6 has therefore provided a ‘let’ keyword which helps to resolve this scope related issues and issues due to variable hoisting. Simply replace the ‘var’ with ‘let’ keyword and the above code will  throw a reference error as expected like it does for other programming languages.

2. Constants:

ES6 allows you to define constant using const keyword which cannot be changed. Changing this will throw an error. Constants also have block scope. But you cannot redefine a constant within another block as well. But you can define a constant with the same name in another block since in this case it will be considered as an altogether new constant.

const test = 'John';

3. JavaScript Templating:

Templating in es6 makes code much neater. You can directly print the variable as using a back tick. You can also carry out computations like multiplication using templating.

let var1 = 10;
let var2 = 20;
document.write(`${var1} ${var2}`);
document.write(`${var1 * var2}`);

4. Dynamic functions with …

This is somewhat similar to the arguments array that javascript provided. You can define a function with 3 trailing dots before the argument

5. Repeat n number of times:

To repeat a string n number of times you can simple call the repeat function on it and provide the number of times to repeat as an argument

let name = 'John';
console.log(name.repeat(3));

6. Miscellaneous string functions:

startsWith function checks if the string starts with the string given in the argument. endsWith function checks if the string ends with the string given in the argument. Includes function checks if the string includes a string given in the argument.

let Fname = 'testab';
Fname.startsWith('ab');//False
Fname.endsWith('ab');//True
Fname.includes('ab');//True

These are just a few features. Will update this post soon. So keep tuned!

Design Patterns in Javascript

Design Patterns in Javascript

What is a design pattern?

A design pattern in general refers to a commonly accepted general solution to a wide range of commonly occurring problems. They are the best solutions known so far for specific types of problem scenarios. When these specific types of problems occur, the best way to deal with it is the application of that specific design pattern.

Design patterns help make our task easier by facilitating proper structuring of code which helps solve all the scenarios/test cases of that particular problem. Design patterns are not restricted to any language. They are a common practice which can be applied to wide range of languages mainly the language which supports object oriented paradigm. Though JavaScript is not a completely object oriented currently(It will be from ES6 onwards), it has powerful concepts like prototype inheritance and closures which help us in implementing design patterns effectively.

Read More Read More

Difference between apply, call and bind method in javascript

Difference between apply, call and bind method in javascript

Javascript provides various ways by which we can invoke a function. Some of the functionalities javascript provides is facilitating the use of apply, call and bind to invoke a function.

All these three are used to invoke a function with a set of parameters and a context of ‘this’ object. The difference between these types of invocation is the type of parameters supplied to the respective method.

Let us take a look in detail how these are implemented.

Read More Read More

Currying in javascript

Currying in javascript

Currying is a very important concept which is found in a lot of programming languages. For example, Scala has a native currying function. Currying of functions can significantly bring down the execution time of larger complex and repetitive function executions

What is currying?

Currying in programming language means partial execution of a function. In simple words, currying means breaking down a function which takes more number of arguments into series of functions which take lesser arguments. The results of these functions are stored so that the every time you want to add some more arguments in the processing of the main function, you don’t have to do it from scratch. You have the results of previous function executions to which you can add newer arguments and get your task executed.

Read More Read More

Promises in Javascript

Promises in Javascript

If you belong to the group of people who have heard about promises but do not know what it is, then you have landed at the right place.

What is a promise?

Promise is like a proxy object that represents a value that will be available at a future point of time. This object will be available as a result of some asynchronous computation, asynchronous call to an api or any operation that will happen in near future, the value of which is not known at the given point of time.

Read More Read More

Closures in javascript

Closures in javascript

Closures is a very important concept in javascript which you will find mentioned almost everywhere. Closures help you in achieving a wide range of features.

What is a closure?

Closure is a concept in which one function is enclosed within another function. This inner function has access to the outer functions variables and parameters. It has access to its own variables and parameters as well as the global variables. However it does not have access to the outer functions ‘this’ object and the arguments object.

Read More Read More