Friday, 16 January 2015

CSS specificity

Sunday, 11 January 2015


Saturday, 10 May 2014

Classical inheritance in JavaScript

There is already a lot of good stuff about JavaScript's inheritance on the web. So WHY another post?

The reason being, this post will not only answer HOW to achieve inheritance but also WHY it is done so.

Let's start by answering them:
  • HOW is inheritance achieved in JavaScript? and then
  • WHY is it achieved so?
Before jumping to HOW, we must know the ways of creating private and public members in a Class (which is actually a function in JavaScript.).  Referring to Crockford's article here this is how we create private and public members.

Private Members:

Parameters to a function and variables declared with vars become private.
function MyClass (privateMember1, privateMember2) {
    var privateMember3;

Public Members:

Public members can be added in two ways:
  • Method 1: In the constructor
function MyClass (privateMember1, privateMember2) {
    var privateMember3;
    this.publicMember1 = 'I am public';
  • Method 2: In the prototype
MyClass.prototype.publicMember2 = 'I am public, too';

Fine. Now let's answer HOW.
When you inherit from a Class you actually inherit its public members. Now, point to be noted is the one we have seen above that public members can be added in 2 ways.

Let's take an example.
// Shape: Superclass
function Shape(type) {
    // Adding public member using method 1.
    this.type = type;

// Adding public member using method 2.
Shape.prototype.fillColor = function (color) {
    console.log("Shape filled with %s color.", color);

// Rectangle: Subclass
function Rectangle(length, breadth) {
    this.length = length;
    this.breadth = breadth;

    // Call Superclass' constructor which will
    // inherit public members added using method 1., '2D');

// Set prototype to inherit public members added
// using method 2.
Rectangle.prototype = Object.create(Shape.prototype);

//Set constructor to SubClass
Rectangle.prototype.constructor = Rectangle;

// Add Subclass specific method.
Rectangle.prototype.getArea = function () {
    return this.length * this.breadth;

var rectangle = new Rectangle(8, 5);
console.log(rectangle instanceof Rectangle);
// Output: true

console.log(rectangle instanceof Shape);
// Output: true

console.log('Rectangle shape type is ', rectangle.type);
// Output: Rectangle shape type is  2D

// Output: Shape filled with Red color.

console.log('Area of rect is ', rectangle.getArea());
// Output: Area of rect is  40

Each part of the code has comments to explain what it does.

You must have already got to know the WHY part while reading the comments in the code. Let's repeat it for the sake of completion.

We did, '2D');
to  inherit public members added using method 1 and
Rectangle.prototype = Object.create(Shape.prototype);
to inherit public members added using method 2.

Much obvious but worth understanding and once you understand you don't have to remember it.

Sunday, 19 January 2014

CSS 'position' property

Have you ever happened to use rather play with position property? If the answer is YES, you must have understood the use of the word 'play' in the previous sentence.

You must have seen element(s) dancing in the window or playing hide-n-seek, as you change the values of position property from relative to absolute, absolute to fixed and so on, in firebug.

In order to enjoy the dance of these elements or play hide-n-seek with them, you need to know some of the basics of dancing or the rules of hide-n-seek.

Let's go into the details.

Before we start, an important question is WHEN to use position property? The answer lies in the name of the property itself position. Every element you specify has its own default (static) position in the document. If you happen to position the element in a different way from its default position you must use position property.

We have got an answer to WHEN to use position. Now the next question is, WHERE to position the element? By where I mean, 45px from top or 45px towards left or 45px from bottom or 45px towards right. Till now you must have understood only position property is not sufficient to position an element. The top, right, bottom and left properties specify the position of positioned elements. Confused...! If these properties specify the position of elements then what does position property specify?

Let's answer it this way. If someone says, I have placed (positioned) some object at a distance of say 45 units. Obviously, your immediate question to him will be 45 units from what, where? So, only distance is of no use unless you know the reference with which the distance is measured. position property tells you rather decides the reference.

position answers the questions HOW the element is positioned w.r.t. the reference and WHAT is the reference? Is it relatively positioned or absolutely positioned or is it fixed w.r.t. reference

Here are the values of position property:
  • static
  • relative
  • fixed
  • absolute
Below fiddle will make things more clear as you read.

  • static
It gives the element its default position. top, right, bottom and left have no effect if element is statically positioned.
  • relative
If the element is relatively positioned, then reference is its default (static) position. toprightbottom and left can then be used to position it w.r.t. its static position. "relatively positioned elements are in the normal flow of the document and they do take up space while placing other elements", this would be more clear once we discuss absolute value. 

  • fixed
If the element is positioned as fixed, then the reference is view-port or rather window. toprightbottom and left can then be used to position it. Once the element is fixed it will not leave its position even if you scroll.
  • absolute
If the element is absolutely positioned, then reference is its nearest positioned ancestor element. "absolutely positioned elements are taken out of the normal flow of the document and they do NOT take up space while placing other elements.". This means if in below example, one more element say #7 is added after #6, it would be placed exactly below #5 and to the left of #6 and not after #6 because #6 is absolutely positioned and so it doesn't take up space. Check out this demo. If you just position the #6 element as static, all of them would be placed one below the other. Check out this demo.

Now, are you ready to dance and play with the elements ? If YES, go dance and play.