Inheritance in javascript

Inheritance is the most widely used object oriented concept which finds it’s way in most of the programming problems. But what is inheritance and why is it so important? This post will answer all your questions.

Inheritance concept in object oriented programming

Inheritance is an object oriented programming paradigm which facilitates adaption or passing over of the properties and methods of one class to another class. The properties and methods of the base class can be used in the derived class. This saves us a lot of rework and facilitates reuse of the existing code.

Consider the scenario where you have a class called Vehicle. Now the Vehicle can have many ‘types’. It has a type of ‘fuel’ that is allowed to be used to run it. It has a ‘mode’ like land, water or air. It has a ‘color’. Apart from these ‘properties’ it also can have methods like run(), stop() etc.

Now consider a four wheeler ‘Car’. It can derive all the properties from the base class ‘Vehicle’ and can also add on its own specific properties or methods to it. Thus the derived class ‘Car’ inherits the base class ‘Vehicle’.

After having understood the basics of inheritance, lets dive into the details of what inheritance looks like in javascript.

Inheritance in Javascript

Unlike other classical languages where one class inherits from another class, javascript has Prototypal inheritance which means that here one object inherits from another object. This is so due to the fact that we do not have classes in javascript but have only objects.
We make use of prototype for inheritance in javascript.

var class1 = function()
{
this.name = ‘Roshni’;
};
class1.prototype.hello= function(){
console.log(‘Hello’);
};
var class2 = function()
{
this.surname = ‘Devadiga’;
};

//class2 will inherit class1
class2.prototype = Object.create(class1.prototype);

var objectClass2 = new class2();
//The getName function of class1 is inherited in class2
objectClass2.hello();

In the above example we first created class1. We added a method ‘hello’ in the prototype of class1. We then created class2. The prootype of class2 inherhited the prototype of class1. With this the properties and methods of class1 became visible in class2. In the last statement we called the hello method from the object of class2.

Google whacking: tips to get relevant results from Google

Google is the most widely used search engine in today’s time. But it gets a little annoying when we type something to search and do not get accurate and relevant results. So what do we do in such cases? Well, the answer to this is Google Whacking.

What is Google Whacking?

It is a trick by which we can get more relevant and accurate results from google. It resides on patterns which Google search engine understands well and using this you can quickly and effectively get the results that you are looking for.

Let me list down a set of tips that will significantly help you to quickly find your answers on Google:

  • Search pages of a particular website: To search the pages of a particular website you can type ‘site:website name’ in google search.

Example: site:www.policyrate.net

 

  • If you want to find out specific type of pages within a particular site, simply add the relative url after the website url

Example: to find all category pages within a website www.policyrate.net, you can use the following query

site:www.policyrate.net/category

 

  • We all love free ebooks, but finding them is a little difficult. But with google whacking it becomes an easy task. You can easily search for pdf for a particular topic using the ‘filetype:’ keyword

Example: filetype:pdf Abc

This will search for the book Abc and give results of all urls containing pdfs

 

  • Search for specific words in the results: For searching specific words in the results make use of quotes around that word

Example: To search for words abc, xyz and mno, type the query as “abc””xyz””mno”

 

  • Excluding certain words from the search, make use of hyphen before the word that you want to exclude

Example: To search for abc and exclude xyz type the query as abc -xyz

 

  • Find all the sites that link to a particular website: If you are a website owner it is always good to know from where your website gets back links ,that is, from where your website gets linked. You can make you of the ‘link’ keyword to find this.

Example: To find from where roshnidevadiga.net is getting linked from, use this in search results:

link:roshnidevadiga.net

 

  • Find sites that are of similar type: You can use the keyword ‘related’ to do this.

eg: related:amazon.com

 

 

 

 

Improve google pagespeed

A high speed webpage is the most essential factor for improving user experience. Is has been observed that page speed also plays a pivotal role to boost the search ranking of a page. It is also one of the first things to fix in any seo tech audit.

For any webpage you would easily get the pagespeed suggestions from the pagespeed insights tool of Google. Here is the url https://developers.google.com/speed/pagespeed/insights/ . Simply enter your webpage url in text box and you are set to go. Google will report all the points which can be improved on your webpage and finally give your webpage a score out of 100. It reports for both desktop and mobile webpages. Try to keep the pagespeed of your website above 90 as far as possible.

Here are a few tips that can help you to improve pagespeed:

  • Image optimization : Lossless compression of all the article and site images goes a long way in boosting the pagespeed. There are many free online tools which help you do this. One such popular and tested one which I would recommend is https://kraken.io/.
  • Lazy loading of images: If you have a huge page having a lot of images. So it it not necessary to load all of them in one go. You can gradually load the images when the user scrolls the page. Initially only the images in the first fold would be visible. As the user scrolls down, gradually the images coming in the viewport would be visible. This concept is known as lazy loading. There are a couple of javascript plugins which help you do this. If you are running a wordpress site, your task is much easier since wordpress has some plugins for lazy loading which if installed you may not have to tweak the code much.
  • Defer loading of javascript: Javascript created a lot of render blocking issues. Until the entire js is loaded completely the rendering is stopped. So if we have a big js file then this creates a problem and affects pagespeed. So what we can do is, separate the js file, one containing the js which is needed on initial load and second which contains the ones which can be loaded later. The second file can be defer loaded
  • Create image sprites: Instead of wasting a network call for loading each image, we can combine smaller images to image sprites. With this, instead of multiple calls of multiple images, we can settle down with a single call which saves network bandwidth
  • Implement caching: Rather than going through the entire php procedure we can cut it off for similar type of requests using the concept of caching. When a result is cached and a similar request comes, then instead of using the php engine to process the request, we can simply pick up the data from cache. This saves a lot of time and tremendously boosts the pagespeed.

Usage of traits in php

Introduction to traits:

Traits were a concept introduced into php since PHP 5.4. Traits are mainly to improve code reuse. If there are a set of methods which needs to be used in a set of classes you can combine those methods in a trait and then ‘use’ that trait in your desired class.

 

Why not use abstract class?

This would be a valid question that you would ask. But there are differences in the context in which a trait is used against an abstact class. An abstract class is used in scenarios where we have ‘is a’ relationship between the base class and the derived class. An example of such a relationship is base class ‘Car’ and derived class ‘Maruti’. In this case ‘Maruti’ ‘is a’ type of car. So we can make use of an abstract class ‘Car’ and let the derived class ‘Maruti’ extend it.

Multiple inheritance is not allowed in php. So you cannot inherit more than one abstract class.

 

Difference between traits and interfaces:

One of the main reasons why interfaces were introduced is to support multiple inheritance. Similarly multiple traits can also be used in a class. But the difference between an interface and trait is, in an interface we only have function declarations and the class that implements that interface should provide definition to these functions. Whereas a trait has functions along with the function definition.

Usage of traits:

The context in which a trait is used is different from an abstract class. Traits are used when we do not have any relationship between the base class (trait) and the classes using that trait. The purpose of trait is not to satisfy inheritance but to re-use a set of functions or code. An example would be suppose we define a trait ‘Move’ having functions like walk(), run(), glide() etc. This trait can be used in disjoint classes like ‘Mammal’, ‘Reptile’ etc. These classes do not have any relation with the trait but are simply using its methods since they require a similar functionality and traits help them in code reuse.

Code sample:

trait Move

{

function run()

{echo ‘It is running’;}

function glide()

{echo ‘It is gliding’;}

}

 

Class Mammal

{

use Move;

}

Class Reptile

{

use Move;

}

Building a custom plugin in wordpress

WordPress is a very powerful CMS with a huge set of features. What makes WordPress extremely powerful is its ability to modify, extend and add new features using plugins. The wordpress repository is full of a large variety of plugins to satisfy almost each and every requirement of a website owner. But there are cases where you need certain functionalities for which a plugin has not been written.  In such a scenario you can always write your own plugin and add the functionality as per your requirement.

Below is a step-by-step guide of getting started with WordPress plugin development:

  • The plugins in wordpress are stored in /wp-content/plugins folder. To create a new plugin, create a folder inside the plugins folder. Here we will name it as test. So now we have a folder /wp-content/plugins/test. Our plugin code will reside inside this folder.
  • Now we create the main php file containing our plugin code. We name it as test.php
  • For the file to be recognized as a plugin file, we need to add a few comments at the beginning of the file:

/*

Plugin Name: test

Plugin URI: www.test.com

Description: Test plugin description

Author: abc

Version: 1.0

*/

 

  • Once this is done, save the file and log into the wordpress admin panel. The url would be something like www.yoursite.com/wp-admin

 

  • Navigate to plugins option and activate your plugin.

With this you have created your basic custom wordpress plugin. You can go ahead and add the functionality that you want in your test.php file.

 

Stay tuned for more information on these topics