CSS Tricks | Maintaining proportionality in a element

This is a series of some css hacks and trick, I found worth sharing. See complete list of tricks.

2. Maintaining proportionality in a element


Many times we need a height of an element to be proportion to its width, where width is unknown or is in percentage, giving percentage value on height will not to do any help as it will be relative to its parent’s height (If only height is defined). Luckily due to counter-intuitive  CSS standard we have CSS only approach for this.

Continue Reading…

Token based module pattern

A token based module pattern to hide private properties and methods from an instance.

Its an another flavour of module pattern, where we
i) take advantage of scoping of module pattern to hide private data and method,
ii) take use of constructor pattern, so it should not take memory to create new function every time we construct an object or say create an instance,
iii) and third a token which act as key to get private data inside public method.

Lets consider, we have to create a Locker, which requires password (same password, which we give during creating instance), to save or access any data from Locker.

Continue Reading…

Two important ingredients of Object Oriented JavaScript

Javascript works on prototypal inheritance, so that object inherits from other object. To make prototypal inheritance flawlessly two important ingredients “this” and “__proto__” link comes in role, about which I will be discussing on this article.

Before going on this, I would like to give small overview of what objects are in JavaScript.

Well everything in JS are objects. Objects are group of key value pairs (properties) where value can be a number, string, function or any kind of objects. An object have their own set of properties and also can inherit from other objects.

While Function, String, Number, Math etc. are predefined objects, we can create our objects in three ways.

Continue Reading…

Things to take care while developing a phonegap app

Before my first phonegap app I worked on many web projects, and experience with my first phonegap app was completely different. I learned much about perceive performance and areas where to see for maximum performance. I also learned about content management in an app to reduce the load.

Mobiles have limited resources and you have to create one page app to have smooth transition between views, in other word you have to fit an elephant on a small box.

This article will be on my experience and what need to be taken care while developing a phonegap app. Many of this also make sense for any web project. Before starting about my experience and what I noted on it, I want to give a small overview what phonegap is and how phonegap app works.

Phonegap is powered by apache cordova which exposes device level API to JavaScript. Cordova uses web view to render views. So you are creating your project in HTML, CSS and JS which runs on a web view and communicating with device APIS using cordova as a bridge, empowering you to develop cross platform apps. But here the problem come, as you are using web view to render HTML, it gets a very limited resources making your app running much slower than a native application. Unfortunately web view is slower even from a mobile browser, so things which run good on a mobile browser, does not work same on  web view.  However web view is becoming more powerful on latest devices as mobile specifications are increasing. Hope in some day you will not be able to distinguish between a phonegap app and a native app.

So let’s see what I learned from my first app.

Continue Reading…

Why learn JavaScript

It’s not been long JavaScript was underestimated and criticized. People never opted JavaScript for their carrier. But now its completely changed. JavaScript is everywhere, web servers, rich web application, mobile, databases and platform like node.js. A lot of improvement had been done in JavaScript engines, security perspective and performance perspective. And believe life of JavaScript is not going to over, in fact it is growing now. So if you are going to depth of JavaScript, you will not die hungry :p .

Boost your page performance

  • Manage content loading

    1. Post loading content (Lazy load): Don’t load all of your stuff like JavaScript files, images, data, at first. Make a flow of which content your user should see first and load it in that order. This will reduce the user’s perceived waiting time because they will be able to look at the loaded parts of the site while the other stuff loads.
    2. Pre loading content:  Benefit from the user’s idle time. Load content in the backgroud using Ajax or image-caching tricks, so the user will not notice that the page is still “working”. Because files are pre-loaded into the browser’s cache already, when the user loads the next page or view, it will seem very fast because the data is already stored locally.(In short, the main idea behind post and pre-loaded content is to show the user what they want at first and then load other content in the background before they need to see that content. Use JavaScript or jQuery Ajax to load your content and cache them.)

Continue Reading…

Using jQuery selectors efficiently

Jquery selectors is a powerful feature of jQuery which made it very easy to find an element and operate on it. But as it is very simple and small we misuse it. For finding any element matching the condition ,wheather its JavaScript way or jQuery way it traverse through DOM element to find your element. This takes negligible memory and time. But if not used correctly it can give some performance impact.
Continue Reading…

A light weight modal window plugin (learn, create and use)

Modal window has become a very popular way of showing information in detail, and getting needed input while blocking the main application flow. There are large numbers of attractive plugin available over the internet with lot of options. But the question is do we need that all?

Fact is we only use 30 to 40 % of that plugin and for that 30 to 40 % we compromise to use a large size plugin. In internet world size matters a lot. Least the size of your page greater the loading speed.

So why not create our own modal window plugin which is much smaller and have options which we need the most. We will discuss and create it step by step so you can understand the whole flow of the plugin and edit it as your need.
In the end we have a very light weight plugin (around 7.05 kb and 2.7 kb minified.)
Continue Reading…

Pausing/blocking events of an element

There is no exact or predefined way to pause events in a DOM element. But we can achieve that using some tweaks.
1. Adding condition on event handler : This is the fastest way to pause any event. This requires a flag or class which can tell whether to allow event trigger or not, and one condition to check weather that condition or flag is set on that element.

Continue Reading…