Category Archives: Design

Testing your website in different browsers- Cross browser compatibility

There are many services available on the internet which will let you know how you website/ webpage will appear on different browser or different version of same browser or same browser in different Operating systems. I tried looking for some free services for a project. Two services that look good

http://browsershots.org/

Pros- FREE, supports 100+ combination of browser and OS, No Registration required- you are good to go by just providing site link

Cons- Slow, incomplete results for some cases

https://browserlab.adobe.com/

Pros- Free, Fast, Chose browser at runtime and change

Cons- Limited browser selection, Registration required, Did not work for some of the mentioned browsers(may be temporary issue)

Creating a website, in less than an hour, for free

Over the weekend a friend discussed his idea of creating a web portal for some specific services with me. The failed entrepreneur in me liked his idea and encouraged him to go ahead (anyone, who is trying, should be encouraged). He shared some wireframes for his portal, but he was not sure how will it actually look on the web. So after returning home, I decided to get some basic version of the website up on the internet to help him. Resulting in the journey mentioned below.

Step 1: I knew I will have to share my email address with service providers (hosting space/ domain name etc.). And as I am looking for free stuff, it would be more than possible that I come across some fake websites. So I thought of creating a dummy email id which could be used to register to all these websites.

Step 2: Now I needed a domain name. I could buy, but as this was just a dummy site, why waste money. Next option is using subdomain from web hosting provider. Here I had to look for a free web hosting provider, and my past experience with free hosting providers is ‘don’t trust them’. The site can go down anytime without notice (its for free. What were you expecting?). So I thought of getting a free domain name, yes, a co.cc domain. I registered a domain with http://www.co.cc/, which I could use with any service provider.

Step 3: Now I needed web hosting. I googled around some free web hosting sites, zeroed upon one (checked features and reviews), registered, and bam, it is not working. Moved to second one, registered, and this time it worked. It was awardspace.com. I got Linux hosting with Apache, PHP, MYSQL. Basically all I needed, for free. I set up the nameservers for the domain and all is good. (Ofcourse I tried a hello world example, I am still the same old fashioned developer at heart).

Step 4: Now we have all set to host our web pages. I had the wireframe with me, and I had frontpage, I could easily create the HTML pages. BUT, from my past experience, I knew designing web pages is a sin for a developer (“Are you colorblind! Why are all the pages grey?”). So instead I pinged a designer friend and asked for some templates. Who suggested checking http://projectw.org for free html/ php templates (you will find more interesting stuff on the forum, but handle with care :D). Ok so I had a template with me, now I needed to customize it for my pages. Actually this was the part which took most of the time. Once done! I just had to upload the pages to my website using ftp. And we are done.

Wasn’t it simple. If instead of a website you are trying to create a blog, you can simply upload the blogging software. Infact most of control panels come with blogging softwares, so that is actually simpler.

If you don’t have your website yet, what are you waiting for? Go ahead! Get your hands dirty.

Difference between visibility hidden vs display none

I spent almost an entire day on this, so wanted to share the information in case it might be helpful for others. We at times need to remove a DOM object (textbox/ label/ dropdown etc) from the UI. For which we use two things object.style.visibility=”hidden” and object.style.display=”none”. Though both of them can remove the object from UI, yet there is a significant difference between these two approaches. Whereas visibility hidden will “hide” the object, it will still leave the object on the UI (in hidden format). On the other hand display=”none” will completely remove the object from UI.

The differentiation is more important in a case, where the css being used here does not specify the x and y coordinates for DOM objects, it instead places one object after another. So the trick here is, if I make an object invisible by hiding it (visibility=”hidden”), it will still occupy that one space in the flow, and a blank cell will appear on the screen. Whereas if display is none, then the next object will take place of this object and hence no empty spaces are shown on the screen.

So both the approaches can be used as per ones requirement