Web Monkey

Bootstrap the Frontend Framework for Non Designers.

2013-04-26T05:56:00.001-07:00

So you are a Web Developer having an exciting idea flourishing in your mind.

And you rush to your machine and start writing that awesome code that was never written before.

And now you are ready to show it to your friends with all excitement.

Your friends think the idea is fine but it doesn't looks good and then you get a number of suggestions.

There should be proper use of Typography.
Your Site should be responsive to work in various devices.
You should use proper colors, fonts, paddings, margins.
You should have proper images.....

And you get an endless list of advises all telling you to go and find a designer.Someone who can wrap this brilliant idea of yours in a nice package and make it look like pretty cool thing.

And believe me you have to be lucky enough to find someone who can design that frontend for you. But if you are not that lucky here is Bootstrap for you.

Bootstrap is a sleek, intuitive and powerful frontend framework from Twitter for faster and easier web development. You just need to concentrate on your Development parts and not much on the looks part.

You just need not to worry about how boxes arrange on top of each other or why one css code works in one browser and doesn't works in another one.

It gives you several features like

A 12 column resoponsive Grid.
Several javascript components like tabs, navigation etc.
Standard Typography.
Reset CSS. etc.

For details on Bootstrap's you can visit it's website http://twitter.github.io/bootstrap/index.html

It has some examples which will get you started. All you need to take care is apply proper classes as described in the some of the examples.

Just One thing "JavaScript"

2013-03-23T00:27:00.000-07:00

So i am a Web Developer, and like most of you I know a bit of java, php on the server side. A bit of css, html, javascript, jQuery on the client side. Oracle and MySQL on the Database side. And this technology stack is never ending. Every now and then you will have to learn something new. Some new framework may arrive. Some new Library or another cool language.

Now with this so demanding and challenging Market How does the idea of learning just one thing sounds?

What if all you have to learn and understand more or less is just one thing and become a master of it.

What if that one thing is javascript. ? Yaa you heard me right.
"Javascript" - The same language you have been validating your forms with from Years.

So if i have to write Server Side Code i will write something in Node.js
If i will have to do make a wonderful frontend i will do jQuery.js
If my Frontend javascript is becoming to messy i will use some Frontend MVC framework like Backbone.js
If i need to go Mobile I will learn jQuery Mobile and PhoneGap.js

Wait Wait all that is fine but what about database? You cannot do your databases in Javascript. That seems to much.

Ah well i agree on that but have you heard of MongoDB. Now that is a NoSQL database and uses something called BSON to store the data. Now BSON is nothing new its just Binary form of JSON the javascript Object Notation. So again your data is saved as a javascript object.

With so much focus of Market leaders like Google, Amazon, Microsoft and Yahoo! on these technologies and with ever growing demand of real time Applications Javascript looks to be the future of Web and is no more a toy language to validate your forms. I have started my journey to learning JS what are you waiting for?

Creating Apps by extending LinkedIn API.

2012-12-22T03:53:00.000-08:00

Last few days I have worked with two small applications that extend power of LinkedIn platform using LinkedIn API.

LinkedIn has opened its platform through its REST API and Javascript API. The platform allows you to

Get Profiles Details
Get Jobs.
Get Details of Companies.
Get Groups.
Get Connections.
Do a People Search.

Idea of the First Application was to find the Job Openings by distance when a user enter his skills.

So if you enter "Java" in skills. You get the Jobs list. Starting from nearest to farthest.

Idea of Second Application was to display Profile Information of users of a company.

So if you enter FirstName LastName and Company Name then you can get detailed profile of a person. If you already have a company intranet where you have firstname and lastname of most of its users you can directly see the profile details without the need to enter the basic information.

Though the steps to connect to linkedin API and documentation is available on http://developer.linkedin.com/ site but i will write the generic steps that i took for using the API.

The REST API allows you to access protected resources available with linkedin with the help of REST URL's for example if you want to search a User with FirstName = "Sushil" LastName="Bharwani" Company="XYZ" then you will send a REST URL request like...

http://api.linkedin.com/v1/people-search?first-name=sushil&lastname=bharwani&company-name=xyz.

But before hitting this URL and accessing the resources you have to authorize your App through OAuth (An open protocol to allow secure authorization in a simple and standard method from web, mobile and desktop applications).

There are several OAuth Protocol implementations available in Market. I tried first using the PHP_OAuth.dll file but could not configure it so i decided to move to java implementation and found. Java Scribe Library.

The sample application didnt worked fine in the starting since i had to apply some hacks for people search as suggested in some of the similar questions.

The suggestions were on Extending the LinkedInAPI class to add r_fullprofile and r_network fields in the authorization url.

When i did performed these changes and ran the code. It gave me a authorization URL. The URL was supposed to be pasted in browser to get a token. When the token is typed in the desired location an XML based result is returned with details asked in the REST call.

So with a few small modifications i was able to query the Linkedin platform using the REST API services that it has provided.

In the Job search application similar call was made to LinkedIn Job search API which returned me a list of locations with their lat long information in JSON Format. I utilized this info and combined it to google distance API to find the matching jobs by distance.

Finding your user's location through HTML5 Geolocation.

2012-08-17T05:09:00.001-07:00

Geolocation is a HTML5 interface that helps in identifying which part of the world you are
located in and sharing this information with people on your wish. The location is identified based on a number of ways like IP Address, WI-FI networks, Cellular Towers, or Specific GPS hardware in your Device.

Though sharing your location to Web seems like a risky thing, you can share the information on your wish to trusted sites and always opt not to share if you dont trust a site. Their are many Websites that use this API to serve products and services near you.

One most popular and widely used site is FourSquare which is a social Networking Site where people can publish their location by check-in into the places of their interest. Each Check-in awards users some points and some of these points can actually be converted into goodies.

Similiar App's can be created using combination of Geo-location API and some of the Map's API's to offer services like Stores, Hospitals, Restaurants in users nearby location.

Some of the Map's API that can be used to find distances, places, driving directions etc are:
Google Maps API.
Microsoft's Bing API.
OpenStreet Maps.
OVI Maps API by Nokia.

Lets quickly look at how to get Users location with the help of Geo-location.

All we will be writing is simple html and javascript to read the location of a User.

<!doctype html>
<html>
<head>
<title>My Geolocation App</title>
<script>
function getLocation(){
if(navigator.geolocation){
navigator.geolocation.getCurrentPosition(showPosition,showError);
}else
{
alert("Geolocation API is not supported by your Browser");
}
}

function showPosition(){
// implementation below
}

function showError(){
// implementation below
}
</script>
</head>
<body>
<script>getLocation();</script>
</body>
</html>

In the code above we have called a getLocation function which we have defined in the script.

The getLocation function first checks if navigator (Browser) supports the GeoLocation API
If it does not supports it alerts the same.

If browser supports the GeoLocation then we can call the method getCurrentPosition on the geolocation object. The Method takes two callback functions showPosition and showError.

showPosition is called when the cordinates are available.
And showError is called when there is some error in finding the location.

showPosition gets the position object, with the help of which we can get latitude and longitude of users current position. This latitude and longitude information can be further converted into actual name of the place using what we call as reverse Geocoding.

function showPosition(position)
{
lat = position.coords.latitude;
lng = position.coords.longitude;
alert("You are located at Latitude: " + lat + " and Longitude " + lng );

}

showError gets the error object. Based on the error code. Different

function showError(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED:
alert("User denied the request for Geolocation.");
break;
case error.POSITION_UNAVAILABLE:
alert("Location information is unavailable.");
break;
case error.TIMEOUT:
alert("The request to get user location timed out.");
break;
case error.UNKNOWN_ERROR:
alert("An unknown error occurred.");
break;
}
}

Lets modify showPosition method to apply Reverse Geocoding to get the exact name of the place.
This can be done with the help of Maps API's. We will use Google Map's API for the same. To use google Map's API will fist need to include the javascript api. Using the script tag in the head section.

Then we will modify the showPosition function.

So using simple API's we can find a user's location and by combining it with Map's API's
extend this idea to create wonderful app's to let user find particular services, products and places around him.

Notes From Multi-Speaker Session on Joomla Selenium Mobile Apps and Online Marketing at Delhi IT Meetup

2012-06-21T00:29:00.000-07:00

This Saturday on 16th of June 2012 I gave an Introductory Session on Joomla 1.5 in Delhi IT Meetup group at YMCA Delhi, It was a Multi-Speaker Meetup. There were 3 more topics other than mine and here are my notes from other three Sessions.

Mobile Apps: First Presentation was on Mobile Apps and was given by @sumitjolly . Here are my notes on that.

Mobile Apps are of Three Types Native Apps, Web Apps, Hybrid Apps.
Native Apps are custom to a particular Device are less portable but have the best of the ability to interact with the Device Hardware.
Web Apps runs in Browsers, These are a cut down or responsive version of your Website.
Hybrid Apps are like native apps residing on your System with a special icon, but utilize some of the Web technologies like JavaScript html5 and css3 that have created a wrapper over the native language of Mobile and are able to make some of the native calls.
phonegap is a widely used api which gives you a set of javascript Objects and methods to interact with device. There are libraries like Sencha Touch, JQuery Mobile etc which forms the presentation layer in the Hybrid Mobile App.
Sumit Demonstrated a Guess Who Application Developed with the help of Microsoft.Phone.controls and have also created Unit Test Cases for his functions using nunit.
A unit test must first fail then you should run it to see if it passes.

Online Marketing: This was third presentation by @Gireesh_Sharma Here are my notes.

First and Foremost things to market and sell your website is - To define your offering you should be very clear about what do you want to sell, until you haven't defined it your all other efforts on SEO or Site Optimization are vague.
Develop sensible Content? If you have poured your heart in writing your content people will also definitively love to read it.
Spread a word about your content emails,blogs,Campaigns, SEO, Social Media.
Research the keywords, Modify your content based on Keywords, Define your keywords in the Meta tags, Keep a Keyword Density of 5-6 keywords per page.

What is Selenium: This was fourth and last presentation of the day by @ThinkFutureTech. Here are my notes.

Selenium automates Browsers and is mostly used for functional Testing of Web Applications.
Support Multiple Browsers Platforms and Languages.
Can be deployed in Mac Windows and Linux.
Selenium comes in three Variants Selenium 2.0 (selenium webdriver) Selenium 1 (Remote Control) and Selenium IDE.
QTP is a competitive product to selenium but is a paid software.
Selenium IDE just records steps on Firefox, it does not have programming Constructs and is sequential in Execution.
Selenium Remote Control or Selenium RC was a improved version in which you could write programs in different languages and injects a javascript into browser to automate the functionality of a Web Page.
It had some limitations, One is javascript that is injected into web page can have limitations like it could not execute due to same origin policy, or javascript is disabled into the browser.
selenium webdriver or selenium 2.0 works on this limitation by directly working with the browser using native support for browser.
SauceLabs is a company owned by creator of Selenium who provides selenium automation at Cloud. The benefit of this is that you do not need to to setup different machines with different OS and Browsers to test functionality of your Web App.
Think Future Technologies is working out to on some of the issues that are present with Selenium Web Driver, One of the main issue is that Testing Resources do need to learn programming Languages in order to write a Functional Test. TFT is creating a layer over Selenium Web Driver where they allow Test Engineers to write Test Cases in Excel Files with a well formed set of instructions that can create Functional Tests.

Loosely Typed v/s Strictly Typed Languages and a Code Bug

2012-05-04T16:54:00.001-07:00

If somebody has worked in in a strict type language like java he would definitely know that function in java have to return type.

So lets say we need to define a function for sum of two numbers.

We would say:

public int add(int a,int b){
return a + b;
}

Here we are very sure that we will be returning a value of type integer. but in cases we may want to return a integer and a boolean or a string.

For example say a very common function in String Manipulation indexOf the function returns the index of matching substring.

int indexOf(String str)

The return type is integer. So to find "Fox" index in "One Sharp Fox" you will write.

"One Sharp Fox".indexOf("Fox"); and will get 10 index.

But what if the match is not found. In these cases you might want to return "No Match Found" or false. But you cannot because the return type is an integer. And therefore you will have to return a number and in this case it is "-1".

and your no found comparision goes like

if("One Sharp Fox".indexOf("Lion") == -1 )

In Case of loosely typed languages we do not have this restriction and we can have more then one type in return.

I was working through one particular bug in our code where we have used a php function

array_search()

Now php being a loosely typed language can have more than one return type.

Array_search function returns the Key of the Search String in the array in case the match is found. But in case the match is not found it will return false instead of -1 as we have seen in case of java code example.

So for example if we have an array storing car brands.

$cars=array("Saab","Volvo","BMW","Toyota");

and if we do

array_search("BMW",$cars);

It will return 2 as a search index.

But if we search "Hyundai" in this array

array_search(" Hyundai",$cars);

We will get false as a return value.

The interesting bug that i found in our code was we had to find the Role of a user.Roles were available in an array having several values and we had to return true if user had "Business Admin" role. The function that we have used was like

function adminType($arr){

if(array_search(" Business Admin",$arr)){

return true;

}else{

return false;

}

At first glance it looked perfect to me and was working fine. Until a user complained that She is a Business Admin and is not able to see a particular functionality.

On debugging the code I found that She just had one role and that was "Business Admin"

So now if we go through the function.

-> $arr = {"Business Admin"}

array_search(" Business Admin",$arr)

will evaluate to 0 the index of the "Business Admin" and

if(0) will let enter into else statement and return false. So the code will not work as desired.

On searching further I found that there is another function in_array($arr) which will just return true of false if a match is found or not. And i corrected our function by replacing array_search with in_array.

Overall I believe working in two different programming languages shows you features and their advantages and disadvantages both. Here in PHP though being loosely typed gives us an advantage of having any return type. But then we have to take care of our comparisons very well.

An Apple in a Developers Day

2012-03-17T11:53:00.000-07:00

There is an increase in rage on internet around the articles on "Flash not working on IOS" Steve Jobs in 2010 has clearly indicated that ios devices are not going to support Flash and is going with open standards like HTML5 and css3 and javascript for multimedia content on Web.

At the same times you can read a number of articles saying "Flash is Dead", articles from ios users complaining "They can't see some sites properly because of no support from Flash" and articles from Flash developers that HTML5 can never compete with flash.

In the middle of it all one day a developer completely unaware of the the political or technical reasons behind this is given a task to support videos playing on his intranet on ios devices as well.

Developer Story

Day 1 (The Excitement):
Oh Well I will learn to support videos on idevices.
Awesome man awesome it will be so much fun.

Day 2 (Moment of Realization 1):
Lets see why videos are not playing on ipad.
Though on my windows machine they play in all browsers.
It should be matter of minutes.
Lets search around it.

errr "Steve BABA" says
"Flash is not supported on iDevices" "HTML5 is the new Game"
My goodness but all my video files are .flv. What to do know?
There must be a workaround, Flash should be supported in some way?
I have been playing Flash Games since Childhood.
I will search the whole web and find out something.

Day 3 (Moment of Realization 2):
There is no workaround. I need to use html5 video Tag, So will video tag play .flv files? Not Sure lets try. Try but where Man I don't have an IPAD to try? Ah- Non issue there should be simulator lets just try it there.

Day 4 (Understanding H.264 ):
No Results. Now what...
Oh Dont Worry i am the ninja.
i think i need to convert these .flv files.
lets search some more. What format they need to be converted into?
Oh thats H.264.

Day 5-6-7 (Alien "FFMPEG" enters):
let me figure out how i will convert the files through ffmpeg the supported exe in my system which converts uploaded videos to .flv format.What the heck i am stuck understanding ffmpeg, There is no proper documentation available and i am not very sure what i am searching for. Somebody rescue me.

Day 8-9-10 (Superman Returns) .
I am the son of Almighty. I am like superman i found the command line of ffmpeg for converting the video files into h264 format. I will create a script to convert existing files into this format. Will modify upload logic to convert uploaded videos to have h264 format.

Day 11 (It works It works).
I have figured out everything.
Lets just remove the hardcoding and replace it with the php script..
Yes it works it works.

Day 12 (The RTMP Mess)
Hey whats this RTMP thing.
Some of the my media url's are having RTMP protocol why isnt it working.
Let me post this on Stackoverflow, There will be an answer soon.
Refresh Refresh Refresh After two hours the answer "RTMP not supported with video tag" Now what ? Should i search more ? Will read the file from the Server and output it in a php file, looks like there is no other option.

Day 13 (The Browsers Mess) Ok it works on IPAD simulator, It works on Safari too. But chrome, mozilla and IE7 are having some issues. I think i would go with the old way in Desktop browsers and do it just for ios. Will figure the issues later. Let me just fix this.

Day 14 (Moving to Staging Server)

Now when its all working fine locally. Let me move it to staging server and then test it on a real ipad from a friend.

Day 15 (Death is a Truth)

How can something go smooth in a Developers life.On Staging server on a real ipad. Its not working, Now what it could be how long will i keep searching and what should i search now? I am short of keywords. What is it? What is it?

Am i the most useless creature on this planet.

What is the purpose of life?

Should i stop eating chicken?

Are they sending there curse from heavens above?

Bullshit, Oh man i miss KFC.

Day 15(In the night) I must not loose senses, it happens all time, i am the likes of Einsten, I belong to the land of Ganga. I will do it for sure.

Day 16 (Tried on Another ipad)

Lets see it on another ipad. Oh wait there is an error message that i earlier ignored. It has something to do with SSL Certificate. Looks like its because on staging we are using a self signed certificate and that can be an issue.

Day 17-21 (Installing The Certificate and Various things)

Try installing the certificate on friends device and various things dont know what i am doing but just want it to play on one ipad first, thats the only thing i want to do in this life and then i will go to Himalayas.

Day 22 (It works again):

So all browsers on Windows, IPad simulator and real ipad all are fine. But i can smell it. How can it leave me so early. (My Evil Karma) Shut up Man your done send it across for testing (The Good Karma).

Day 23 (It works on my System)

I knew it, Its still there.How can it go so soon.Client Saysa it not working.Well What it is now? Forget it? Lets read some random articles "How to die in 100 ways" "How to Control your anger" "100 worst Jobs".

Day 24 - 32 (End of Story)

ios 4 is different from ios 5. Need to try different things , Developers life is Hell, It works on Production, Everything is fine, client Verifies it. I can think about life again.

Day 33 ( A new Beginning)

New Task Arrived : Media player is not correctly displaying play back bar. There is no marker for position (time), and the times are not showing (total time or time elapsed).

Happy Republic Day : First Dabbling with CSS3

2012-01-26T03:09:00.000-08:00

I recently read a post from Lea Verou on css3 Gradients http://24ways.org/2011/css3-patterns-explained and discovered that she has also created this wonderful tool http://www.dabblet.com/ which is a gift for lot of frontend developers like us. On this Indian Republic day i created my first dabblet with css3 and here is link to that http://dabblet.com/gist/1682222

Wishing you all a Happy Republic Day....

Edit: The dabblet link will not work in IE versions below 9 and Firefox version below 3.6.

The importance of writing Semantically Correct HTML.

2011-11-18T12:32:00.000-08:00

Few days back i had a discussion with a Web Master around use of h1 h2 h3 tags in a web page. He explained what importance these tags have and what would the impact be if instead of using a h1 i use a span tag with some bigger font size. Here i am going to share what he described and what all i read after this conversation.

The Conversation...

When you read a newspaper you scan through the headlines of the paper. And then the subheadings sometimes. The h1 h2 tags are like headlines of a web document. So you should use heading tags wherever you are giving a heading to your content. This helps Web Crawlers also when they crawl your page they can read the headlines and index them and may help you in a better page ranking.

Why with the Heading Tags only.

Then i thought why just with the heading tags Web Crawlers will work. Googling around and asking questions on Stackoverflow i found that from the very beginning the Web was desgined to be written semantically correct. Every tag had a meaning and it should be used according to its meaning. So that when someone else is reading your html he could draw the semantics around it by reading the tags. This someone can also be a web crawler cause most of the Web Crawler Algorithms should try to get meaning of your web page from the Sematically Correct HTML Tags.

Here is a snippet of one of the answers on Stackoverflow.

I guess it's just a logical thing. If I read HTML with my human eyes I can clearly see where there are headings which represent a block of content. Why should a search spider thingy be any different? I have a feeling that the more logical the markup for your content is, the better your content will be indexed. I wouldn't index content if it was too hard to tell what each segment of content is meant to be. <span>s tell me nothing.

How Sematic HTML helps with Web Accessibility.

This is also because of the same reason. Think of a Visually Impaired person who is using a Web Page designed by you. He would definitely be using a Screen Reader to read your Web Page. And the Reader will be able to help him only when it could understand the semantics of tags also. One classical example used in this context is of image tag. If the image tag is having the alt attribute describing the image. The screen reader can read the text in alt attribute and explain your user about the image. There are lot of Studies and Standards being worked upon to make web accessible to differently-abled people. You can read more around Web Accessibility here http://www.w3.org/WAI/intro/accessibility.php

So next time when your are writing your html. Try also to make it semantically correct as well. It will help your code understandable to other readers to web Crawlers and of course make it more accessible.

Facebook's Infinite Scrolling page.

2011-11-08T03:06:00.000-08:00

I must admit I am a Facebook addict. I personally like to see what my friends have shared on the “News Feeds” page. And if you have currently been very active on Facebook you might have noticed some set of user interface changes they have been doing.

I would in this write up like to talk and take your views about the “infinite scrolling” or “bottomless paging” behavior on this page. I would like to discuss what particular advantages it has over few other ways of presenting content, what gets compromised and what else Facebook guys could do to improve upon.

Why “Infinite Scrolling”?

Media content rich sites like facebook want there users to adhere to there site. It’s a well studied fact that Users want to keep their content on one page give them a “read more” link which takes them to different page and they will start loosing their interest. So “infinite scrolling” has started getting acceptance as a valid UI design pattern. Users keep scrolling down and they get more and more content to read It’s like driving on a smooth road without much roadblocks. One similar example one can think from his everyday life is “Think that you are watching a movie on HBO and its just started building the interest and suddenly they show advertisements what you do you move to a different channel and many a times loose the initial content you were viewing”. So is with website give users a roadblock and they would switch to something else. The earlier patterns like pagination, read more etc stops users to take decisions and their normal flow is disturbed..

What’s wrong with it?

Keep in mind that infinite scroll is not for every site and not for every page. It’s just a way of removing “Road Blocks” from a users view while he is enjoying watching the content.

With infinite scrolling in place you won’t touch the bottom of the page of your site. So if there is some footer containing some important information or link you are sacrificing that content.

User sometimes get annoyed while he is moving the scroll bar down to read down it moves up because some more content has loaded.

Also if you are somewhere in the middle of reading content you will have to scroll quite high up to find the navigation.

How to do it right?

Let’s start with Header and Footer First if you have some important information in your header and footer it must be easily accessible with least scrolling. But since we are dealing with an infinite scroll we can design out header and footer with fixed positioning. See Facebook has a fixed layout for its header. So even if you have scrolled a lot down. You will always have the header near your eyes. But I am not sure why Facebook has done injustice to its footer by keeping it nearly inaccessible to its users. A fixed positioning for footer or moving of footer links somewhere at the top might solve this problem.

The problem of scroll bar annoyance can only be dealt with introducing correct timing. By timing I mean scrolling should be smooth enough so that even when more content is loading the user is aware of it. I believe twitter does the same more smoothly than Facebook. Here are few more suggestions of how to do it right on http://uxmovement.com/navigation/infinite-scrolling-best-practices/

Printer Friendly Version

2011-08-30T01:40:00.000-07:00

There are number of content heavy sites that you might be visiting each day. Reading articles of your interest and at times print this article. At times you may find a small button at the top/bottom of article "Printer Friendly Version" when you click on that item. You just get the desired article escaping all unwanted things that does not make sense on the printed page.

Lets see how is that achieved and how do we make our document printer friendly.

To get started you need to first write a CSS file. And include it in your page.
You might already know that we include CSS files in our page by using link tag. Here is a small example of how a css file is included in a HTML page.

<LINK href="special.css" rel="stylesheet" type="text/css">

Here in the example a css named special.css is included in a html document. When you view the document the CSS get's applied to the document's element to give it the look you wanted.

Link tag has a extra attribute media. Applying it's value to media="print" makes the css available only when you are printing the document. So all the styles that you write in your print.css does not apply when viewing on the browser. This way you can show parts of the page which just makes sense for printing.

Things you can/should do while printing.

1. You should hide the Header Footer and site Navigation as getting it on the print page doesn't makes much sense. (Typically just show the content portion)
2. You will have to whitewash your Content Background. Since printers do not print white and there can be some leaked background-images. In my case it was a gray background prevalent and i had to set to none. And apply the white background color.
3. You might need to increase the font size a little because you may want to read it clear.
4. Links on print media doesn't gives much help. But you can show some distinction to them to tell that they were links on screen.

Few other things that you should check out.

Browsers have setting for printing options. Like in case of Internet Explorer if you go to Tools>Internet Options>Advanced>Printing. There is a check for print background colors and images. How you content will look on printed page will depend a lot on this. If your article is using a lot of background-colors and images you would need to find a trade-off for it. For example we had used images for bulleted list in our Web Page. But while printing it disapeared because of the option selected.

Reset Stylesheet: Handling Cross Browser Differences.

2011-07-18T22:55:00.000-07:00

I discovered a file reset.css in one of our Project's css folder. I went ahead googling the purpose of this file and found it's interesting use. Browsers as we all know are different in their interpretation of certain things. Default line-heights, margins font-sizes being some of them. What this means is that a header on your IE would not be exactly same in appearance in your chrome or firefox.

Reset Stylesheet is used to handle these discrepancy. It is included as the top css in your project and has style rules that will make default styles same on all the browsers. Helping you achieve a consistent look of your site across browsers. The link below takes you to original explanation http://meyerweb.com/eric/tools/css/reset/

Book Review: Programming HTML5 Applications by Zachary Kessin.

2011-06-30T04:36:00.000-07:00

This is a small book that introduces you the world of HTML5. It gives you brief overview around what's happening on the web these days in relation to change in some of the key specifications and all new concepts that are being introduced into the browsers to make them able to support robust Web Applications.

It has got the one of the best chapter I ever came across in any book on evolution of Web.Starting from static pages to today's highly interactive Web pages.
It introduces us with How javascript and some of its libraries like jQuery and extJS are gaining fame and how the world of web development is changing.

I enjoyed going over the book the chapters on Testing javascript applications,Introduction to localstorage and How implementing Offline Storage can be useful in Web Applications when you dont have access to web are quite good.

It also introduces the concept of Web Workers as javascript's process that can perform computations and pass messages back and forth with the main process and other workers and help writing complex web applications.

I would recommend this book for anybody who is willing to get an introduction to HTML 5 and how the new Web will be in the coming years. However it should not be taken as a HTML 5 reference book as it does not covers many of the other important things that are being introduced as a part of HTML 5 like canvas, video, Geo-Location etc. And the example given and small and not very detailed.

http://oreilly.com/store/complete.html

Jumping to a section of a Page.

2011-06-05T01:31:00.000-07:00

In long pages having large content divided into sections, it’s a good usability practice to provide links to different sections on the top of the page.

See this beautiful Site.

Here in this one page site News | About Me | Portfolio etc are links that jump you to a section on the page.

Also need for jumping (or better to say placing user’s eyes to right place) becomes necessary in some other cases as well. Let’s see a specific case here.

See this small usability issue in case of forbe’s list of world’s billionaires. There is pagination to see them in the order of there net worth. Now when you are on page 1 and are watching billionaire no 10. On clicking page 2 you would expect to see billionaire no 11. But you see billionaire no 16-20. This is just because page didn’t jump to the top of the list and since page links were down it just remained there.

We will see three different ways by which you could make your page jump to sections.

1. The classical

Anchor Fragment Way

.
In the method the Section should have a named anchor as shown below

<a name=’aboutus’>About Us</a>

<div>

Your Content Goes Here…….

</div>

Now to jump to this particular section all you need to have is a link to same page with hash value “aboutus” appended to it.

<a href=’#aboutus’>About Us</a>

2. Using scrollIntoView.

Second way is using javascript to scroll to a particular element on page you identify the page element using document.getElementById and then use scrollIntoView method. You may use this in cases where using the above method is not an option.

document.getElementById(‘yourElement’).scrollIntoView();

3. Using jQuery.scrollTo.

And if your comfortable with jQuery you can use jQuery.scrollTo plugin the details of which are described well in the link below.

http://flesler.blogspot.com/2007/10/jqueryscrollto.html

Creating Tabs and making a Tab link shareable

2011-05-26T09:14:00.000-07:00

Tabs are used to show data of same context. Below we will discuss how to create Tab's using simple HTML CSS and Javascript and then we will discuss a behavior users demanded from these Tabs and how we applied "Fragement Identifier Pattern" a frontend design pattern to modify the functionality. You can skip the code if you are just interested in understanding the design pattern.

Here in the Code we are trying to create Tabs for describing a Car.

*******************************CODE***********************************

HTML

<div id='tabs'>

<ul>

<a href='#Overview' >Overview</a> Overview Tab

</li>

<a href='#Specification'>Specification</a> Specification Tab

</li>

<a href='#Features'>Features</a> Features Tab

</li>

<li class='inactiveTab' id='ColorsTab' > Colors Tab

<a href='#Colors' > Colors </a>

</li>

</ul>

<!—Tab Content-->

<div id='Overview' class='inactive' > Overview of the Car XXXXX </div>

<div id='Specification' class='active' > Basic Specification XXXX </div>

<div id='Features' class='inactive' > Features XXX </div>

<div id='Colors' class='inactive' > Colors XXXXX </div>

</div>

CSS

#tabs ul {

list-style-type: none;

margin: 0px;

padding: 0px;

}

#tabs ul li {

position: relative;

display: inline;

margin: 0px;

z-index: 2;

}

div.inactive {

display: none;

width: 300px;

padding: 0px;

background-color: white;

}

div.active {

border: 1px solid black;

width: 300px;

padding: 0px;

background-color: white;

margin-top: -1px;

}

li.activeTab

{

border-bottom: none;

border-top: 1px solid black;

border-left: 1px solid black;

border-right: 1px solid black;

background-color: white;

margin-bottom: 1px;

z-index: 1;

}

li.inactiveTab

{

border-bottom:1px solid black;

line-height:2px;

border-top: 1px solid black;

border-left:1px solid black;

border-right:1px solid black;

background-color:#cccccc;

top:-1px;

}

Now we will add a little jQuery to be able to switch between tabs.

jQuery(document).ready(function(){ // document load function

jQuery("#tabs ul li").click(function(){ // registering the tab click event

$(this).addClass("activeTab"); //making this tab active

$(this).removeClass("inactiveTab");

$(this).siblings().addClass("inactiveTab"); //making all other tabs inactive

$(this).siblings().removeClass("activeTab");

$('#'+$(this).html()).addClass("active"); //making container active

$('#'+$(this).html()).removeClass("inactive");

$('#'+$(this).html()).siblings().addClass("inactive"); //making other container inactive

$('#'+$(this).html()).siblings().addClass("active");

});

************************************************************************
Read More for Enhanced Tab and Fragement Identifier Pattern

User wanted to share Tab Links with other users so in case if he wants somebody to read the specifications or show somebody the colors available he could send him a link and the person with the link lands on the specification or color tab.

The Fragement Identifier pattern uses Hash that can be appended to a link.The hash is then read by the client script and based on what is in the Fragement corresponding Tab is shown.

So If the URL is like
http://www.example.com/tabs.html#Colors
the hash value colors will be captured by the client script and corresponding Tab will be shown.

jQuery(document).ready(function(){ // document load function

var currentTab = window.location.hash; // reading the Fragment

currentTab = currentTab +"Tab";

if(currentTab) // Based on the Fragment activate the Tab

{

jQuery(currentTab).addClass("activeTab");

jQuery(currentTab).removeClass("inactiveTab");

$(currentTab).siblings().addClass("inactiveTab");

$(currentTab).siblings().removeClass("activeTab");

$('#'+$(currentTab).html()).addClass("active");

$('#'+$(currentTab).html()).removeClass("inactive");

$('#'+$(currentTab).html()).siblings().addClass("inactive");

$('#'+$(currentTab).html()).siblings().addClass("active");

}

jQuery("#tabs ul li").click(function(){ // registering the tab click event

$(this).addClass("activeTab"); //making this tab active

$(this).removeClass("inactiveTab");

$(this).siblings().addClass("inactiveTab"); //making all other tabs inactive

$(this).siblings().removeClass("activeTab");

$('#'+$(this).html()).addClass("active"); //making container active

$('#'+$(this).html()).removeClass("inactive");

$('#'+$(this).html()).siblings().addClass("inactive"); //other container inactive

$('#'+$(this).html()).siblings().addClass("active");

});

Megaflyouts speed and jQuery hoverIntent Plugin.

2011-04-28T07:52:00.001-07:00

Our Intranet Project uses Megaflyout for displaying our site Navigation which was suggested as

a better replacement of simple drop-down menus. The benefits of using megaflyouts are well described

in jacob nielsen's article http://www.useit.com/alertbox/mega-dropdown-menus.html The article talks about speed considerations in megaflyout as:

Don't make response time too fast, though: the mouse should remain stationary for 0.5 seconds before you display anything that's hover-dependent,

such as a mega drop-down or a tooltip. Violating this guideline will make the screen flicker insufferably when users move the mouse. Only after 0.5 seconds

of resting the pointer on a navbar item can you assume that a user actually wants to see its associated drop-down.

Thus, the timing should be:

1. Wait 0.5 seconds.

2. If the pointer is still hovering over a navbar item, display its mega drop-down within 0.1 seconds.

3. Keep showing it until the pointer has been outside both the navbar item and the drop-down for 0.5 seconds. Then, remove it in less than 0.1 seconds.

The above recommendations from Jacob Nielsen are very useful in order to develop a usable megadropdown. But to implement suggestions on speed you will have tough time if you are using simple javascript or jQuery. Luckily enough for targeting this specific problem a wonderful jQuery plugin hoverIntent can be used. The use of the plugin is quite simple. The js library for hoverIntent needs to be included after the jQuery main library.

Now you can select a particular element on which you want to have hoverIntent behavior.

jQuery(‘#menuItem’).hoverIntent(config);

Where menuItem is the id of the object on which you want the behavior and config is the configuration object which has predefined properties and behavior for example:

var config = {

sensitivity: 3, // number = sensitivity threshold (must be 1 or higher)

interval: 200, // number = milliseconds for onMouseOver polling interval

over: waitChange0, // function = onMouseOver callback (REQUIRED)

timeout: 500, // number = milliseconds delay before onMouseOut

out: nothing0 // function = onMouseOut callback (REQUIRED)

};

As we can see the config object has interval and timeout properties for defining delays onMouseover and Mouseout respectively and over and out are the two callback methods that happens after these delay intervals.

Where is My Home?

2011-02-19T05:32:00.000-08:00

This year we released our much awaited Intranet Project. We had engaged the best Usability Consultants to provide us designs and believe me they had done pretty good job. But one of the usability feedback that we received was "Where is My Home?" link.

People tend to use "Home" link as their panic button. Whenever they feel they are lost somewhere in the site they feel like clicking the "Home Link" and starting all over again. So a very prominent "Home" link somewhere near the header makes sense. Our site used the generic pattern of making the company's logo link to Home page and to make it more obvious we also provided a Hover over tooltip that says “Home Page” very much like one my favorite site’s link http://www.smashingmagazine.com/ .

The logo is a link to home page and also shows tooltip about what it is.

But if your user’s don’t spent much time on Internet and are not accustomed to this behavior they will probably have the same question. We wanted to dig more into this so we observed few of the popular sites to see where they have kept there Home link.

On “Facebook” both Logo and Home Link points to “Home Page”.

When you are on Amazon’s Home page it shows normal “amazon” logo. As soon as you go on any other page and roll over Amazon.com it shows a hover behavior and a Homepage link.

Accenture Uses Logo as well as its breadcrumb's starting point as Home Link (Also notice the small image)

UPS includes Home Link in its global footer

HBO is having home link in its Side Links Utilities Menu.

Over this journey of digging in we found this link http://www.webdesignpractices.com/navigation/globalhome.html

The link talks about various pages and the presence of Home Link although the study has been done in 2002 it is still very much valid.

After all this digging in we can conclude on following things.

User definitely looks for a Home Link in your site.
The intuitive design of making Site’s Logo as a link to Sites Home page is well understood by many users and should be carried forward to avoid confusions.
Breadcrumbs on the site should start with “Home Link” they can augment the cause but never should be present alone as a link to Home Page.

Best Buy’s Breadcrumb the initial link to Home Page.

If your “main Navigation” where “traditional users” will most probably be looking for the Home page link allows (in terms of space) the placement of link it should be very well a part of it. But if you have space crunches find an alternative.

Home Link on LinkedIn is available on the main navigation.

If you do not have space in your “main Navigation” place your Home Link somewhere at the top and if possible use a Home image as well.
Users very well receive the Hover over effect. If you are making your sites logo as a link to home page make something change on Hover of the Logo image.A very good example of this is with Amazon’s Logo.

How we learned about “Quirks” Mode.

2011-02-08T02:17:00.000-08:00

Our web design consultants provided us the static pages for one of our projects. It consisted of HTML CSS and Image files. We had to use these pages to create dynamic Intranet site. We started writing logics around the layout and converting the static site into a dynamic one. We had then a scheduled meeting with the design consultants to tell them if we have any questions or concerns with designs they have provided and believe me we had a number of them. We applied their CSS and HTML very diligently and compared several times using mozilla’s firebug and IE’s debugbar our dynamic code with their static one. We couldn’t figure out the differences however our layout was so poor than theirs.

Finally we presented them with a list of issues and guess what they solved it all by saying just “did you apply the doctype!!!”

<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

And we were wondering what on earth a doctype is and as they told us we copied the very first line in the html page in our template and aha we had our issues resolved.

We later found that by applying doctype we tell our browser to follow the standard conformance that browser developers are supporting against latest css and html specifications. When we do not apply the doctype declaration the page renders in quirksmode this allows pages designed for older browsers or pages that were not designed with standard conformance to render properly in the latest browser version.

One wonderful example of this can be IE’s interpretation of width of an element in BOX model with and without applying the doctype. Let’s try it with an example

First we create a boxModel.html file with a plain div.

<div class=’content’>

test

</div>

Then we apply CSS on this div.

.content {

padding: 10 px;

margin: 10 px;

width:50 px;

border: 1px solid red;

}

Now we first test this code in IE7 without the doctype declaration. The result appears like this.

Next we test this code with the doctype declaration. The results appear like this.

If we compare both the boxes we can see the difference in their width’s as.

This simply occurs because IE’s BOX Model is different from W3C (Standard) box model read this (http://en.wikipedia.org/wiki/Internet_Explorer_box_model_bug)

In IE Box Model the Width attribute is taken as Width of Entire Box and Width of Content will be calculated as:

50 -10(padding left) -10 (padding right) -1(border left) – 1(border right) = 28 px.

Where as in W3C Box Model the width of Content will be 50px;

So box 1 (in quirks mode) is 22 px smaller in width than box 2 (in standard Mode).

My Top 10 Web Development Widgets/Control

2011-01-25T00:14:00.000-08:00

1. TinyMCE

We wanted our users to contribute web content and found tinyMCE as tool of our need. .TinyMCE is a javascript tool which provides an easy to integrate WYSIWYG editor. It can be integrate into content management systems for providing users ability to contribute web content.

A simple example of tinyMCE integration is

1. <script language="javascript" type="text/javascript" src="/js/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

2. <script language="javascript" type="text/javascript">

tinyMCE.init({

theme : "advanced",

mode: "exact",

elements : "elm1",

theme_advanced_toolbar_location : "top",

theme_advanced_buttons1 : "bold,italic,underline,strikethrough,separator,"

+ "justifyleft,justifycenter,justifyright,justifyfull,formatselect,"

+ "bullist,numlist,outdent,indent",

theme_advanced_buttons2 : "link,unlink,anchor,image,separator,"

+"undo,redo,cleanup,code,separator,sub,sup,charmap",

theme_advanced_buttons3 : "",

height:"350px",

width:"600px"

});

</script>

<body>

</body>

In the code sample above first we are actually including tinyMCE.js in the next line we are calling tinyMCE init method to initialise tinyMCE and we pass some parameters on the basis of what behaviour we expect. The most noticeable property is “elements” which defines which textarea element needs to be converted into a tinyMCE control.

2. Colorbox

Colorbox is a customizable lightbox. Lightboxes can be used in several ways.

1. In Showing Image SlideShows.

2. In preventing popup windows and providing a better alternative for showing intermediate warnings, confirmations or extra information.

Colorbox is a jQuery plugin the example page is at http ://colorpowered .com /colorbox /core /example 1/index .html.

3. FFMPEG

I came to know about FFMPEG.exe in one of the joomla components “seyret” which is basically a component for uploading,downloading, playing of Multimedia files. In its core seryret uses ffmpeg.exe for conversion of one video format to another and for creation of thumbnails for videos and images. Since joomla is a php cms it uses shell _exec command to execute a ffmpeg.exe command.

An example of ffmpeg command line is:

ffmpeg.exe -i "imageLarge.jpg" -y -f mjpeg -s 72x92 -vframes 1 -an thumbnail7292.jpg

As the command suggests a larger image's thumbnail of size 72*92 is generated in this command.

Another example where conversion from one video format to other happens

ffmpeg.exe -i video1.avi -ab 56 -ar 44100 -b 200 -r 15 -s 320x240 -f flv video2.flv

The command converts avi format to flv format.

for a more compiled list of ffmpeg command read http ://www .catswhocode .com /blog /19-ffmpeg -commands -for -all -needs

4. SWFUpload

This is again another control we learned from Seyret. Seyret uses SWF Upload as flash based file upload tool. It’s a small JavaScript/flash based library which uses upload capabilities from flash and combines the strength and beauty of JavaScript events and HTML/CSS. SWF Documentation is available at http ://demo .swfupload .org /Documentation /.

5. AutoComplete or SAYT.

While searching Content on Google you start getting Suggestions based on what you are typing this helps users in many ways, A user can have certain words on mind and he is not aware of exactly what to type AutoSuggest helps him certain matching results based on what he has typed and eases the search. Search as you Type or as popularly called SAYT is an open source script from Google which provides Auto Suggest behavior the SAYT implementation guide is available at http://code.google.com/p/search-as-you-type/wiki/SearchAsYouTypeInstallationGuide . Another similar implementation is with jQuery UI plugin and is called AutoComplete.

6. Star Ratings Control

We wanted our users to rate articles contributed by business and we wanted the rating system to be natural and intuitive.

We found star rating control as a wonderful idea for doing this.
Technically star rating can be implemented in a number of ways. One way is to use a set of LI elements and beautify those using CSS to look like stars. Each LI element will have an anchor as a child in it and anchor will point to a JavaScript function to support AJAX hit capture. Another method can be to setup a set of radio buttons and beautify radio button with CSS to look like stars.

7.Date-picker or Calendar Control
When on a HTML form you need your user to enter date in a particular format. It’s better to provide him a date control jQuery-UI provides a comprehensive api for using date control and using its variations in different ways.

8. Data-Grids.

We are having a metrics site which shows some tabular data in a grid. Quite recently we had to modify some of the information in this grid and we found that the grid is basically a jQuery plugin named flexigrid, what I found wonderful about flexigrid was its clean approach for fetching and populating data inside it. Flexigrid has a Constructor in which a settings object is passed. Settings object takes several parameters important of which are “URL” which tells which url to hit for getting the data. “dataType” which tells what kind of dataType its expecting like JSON XML etc.

Ext-JS is another JavaScript library provides most robust set of grids. However its open source license must be read carefully before starting to use it.

9. Carousels.

Carousels are great UI component to show a series of thumbnails in a small space on your web page. Several JS Libraries provides implementation of Carousels. The one we have used is from jQuery http://plugins.jquery.com/project/uicarousel .

10. Graphs.

Graph are great way of doing quick analysis of your data to gain to understand trends and retrieve information. There are various api’s available in different programming languages for drawing graphs based on certain input parameters like in php we have API’s like jpgraph and graphpite in java we have JgraphT and EasyCharts. We used jQuery’s sparkline plugin for creating graph.

My 13 Web Development Tools

2011-01-05T08:28:00.000-08:00

1. Firebug

A detailed info of what is Firebug can already be found at http://getfirebug.com/whatisfirebug but some of its features i enjoy the most are:

Javascript debugging: Javascript debugging has never been so easy as its with firebug you can add breakpoints. Do line by line debugging of code.

Javascript Logging: Firebug provides a console object. So whenever we write in our javascript code.

console.log(“the value of var is:” + i);
it will log it to the console tab in firefox.

Firefox Extendibility: Yes you got it right. Firefox can be extended to add further functionality in it Jan Odvarko talks about this in his blog http://www.softwareishard.com/blog/firebug-tutorial/extending-firebug-hello-world-part-i/

2. YSlow
The major challenge in your web project is your sites performance. YSlow is a tool from yahoo that analyses web pages and gives you suggestion on the basis of http://developer.yahoo.com/performance/rules.html which is a set of rules highly effective for improving your sites performance. Remember that YSlow is a firebug addon so you need to first first have firebug added into your Firefox browser to add YSlow. Another Tool of the same category is pagespeed from google.

3. Debugbar
Debugbar is a IE plugin. Which has features like DOM Inspector, HTTP Inspector, Javascript Inspector and Javascript Console and much more read it at http://www.debugbar.com/. The feature of debugbar i enjoy the most is its javascript console.

4. www.jsfiddle.net
JSFiddle contrary to others is a online tool which they prefer calling as online tool for web. The most wonderful thing about JSFiddle is that it allows you to include various javascript libraries in the code you are writing and test your code alongside. The other beautiful thing is you can save your fiddles and share them with others.

5. Browsers
Mozilla Firefox, Internet Explorer, Netscape Navigator and Google Chrome are the browsers which i have installed on my machine and I like playing with the various DOM Models and CSS releases they support. One piece of code which works on Mozilla wouldn't necessarily work on IE and i keep referring to http://www.quirksmode.org/compatibility.html for browser compatibilities.

6. GIMP 2
GIMP is the best freeware image editing tool that i have few of the things i use gimp for is Scaling, Cropping, rotating, rotating, adding text on a image, joining two or more images etc. Its a wonderful tool with lots of basic capacities like layering, conversion from one format to another, adding alpha channels etc.

7. Editplus
Editplus is a wonderful text editor which can be used for purposes like editing of html,php, java files as well it has powerful search and replace functionality and allows you to make search based on your regular expressions.

8. Eclipse Europa
Eclipse is my favorite IDE for years. What i like most about it is if i want to write java or php i need not to switch between IDE’s. Its connection with CVS and numerous plugins make me a fan of it.

9. Http Analyzer
Http Analyzer is a IE Plugin. It helps me anaylse web traffic. Read cookie and header information, request response post data etc.

10. Beyond Compare
In a distributed team when people are working on a single file. Modifying it for different functionalities what you need to do have is a tool handy where you can merge your code with fellow developers code. There are several tools available for that but the one that i use is beyond compare for its functionalities like comparing files and folders. Showing line by line differences.

11. CVSNT
This is again a tool very useful in a distributed team although not a perfect fit to be categorized in web development tool. But i wanted to mention it as most of the web development occurs in distributed teams only. My love for it increase for the fact that its client can be easily configured with my Eclipse IDE and i need not to switch from my IDE to synchronize my files to the CVS Server or get a update or merge my changes. Other similiar products are SCCS Subversion etc.

12. CSSTidy
CSS Tidy is a parser and a optimizer. It helps you optimise you css page to gain faster loading times of your Styled Web Pages and it helps you in also formating your CSS source code.

13. YUI Compressor
YUI compressor is used to compress the javascript files and is used to retrieve a minified version of the file the compressed JS files help acheive performance benifits as size of the data transeffered from the webserver is much less than before. Its a java based tool developed by yahoo.