Why haven’t I used IE in months?

Share on Facebook

---

I think I was conducting a training on “Windows programming using C” in a company called VeriFone Bangalore when I first saw Internet Explorer. Like Netscape, it had a logo on top right which would rotate as the page was loading. I was fascinated with the UI and thrilled that I could look up information so easily and quickly. On the other hand there was Netscape, a powerful browser which was the de-facto standard. I think Netscape was $50 while Microsoft started giving away its browser free with the operating system which led to a massive law suit and Browser wars. The browser war was good in a way because it made both companies bring host of innovation and rapid changes eventually helping the customers. Its another thing that Netscape lost the war and IE became the de-facto standard on the web. I was siding with IE thru the war as I found it to be a better browser than Netscape.

Phoenix rises from the ashes of Netscape

As Netscape lost the battle and made the source code open, the code base gave rise to another project called Phoenix (rising from the ashes of Netscape). Phoenix was however already a registered name so the team tried to rename it to Firebird, which too turned out to be registered so they finally called it Firefox. I have been using Firefox since Phoenix days but did not pay too much attention as it could not match the capabilities and features of IE. But I did keep an eye on the browser as it matured. Then one day it happened… I discovered add-ons and extension which allowed me to customize, configure and personalize the browser the way I wanted. Also, the new JS engine made its way into Firefox, speeding it way beyond IE performance.

Missing IE?

When people don’t like or use a software, they tend to remove or uninstall it. However, IE is one software which remains on every Windows installation that it there. Why? Because you never know when you will need it. There are hundreds of site which work with IE but not Firefox. This may not be intentional but due to the fact that IE did not enforce strict adherence to HTML and web standard while Firefox always did. So a missing closing tag would still render in IE whereas it would refuse to show up in Firefox. Imagine you test your web site in IE and a day before you go live, out of curiosity you open in it Firefox and you are horrified as the page is a mess. Can’t imagine? Ask Chandrasekhar “Netscape” Vyas who earned this moniker precisely for this reason

Stop switching between FF and IE

If you use Firefox regularly but have to switch to IE because of certain sites, now you can get IE Tab Plus. What this Firefox add-on does is it loads IE in one of the tabs in Firefox. I am not talking about emulating IE, I am talking about loading the IE engine in the tab so that you can open all those IE specific sites in Firefox without having to even launch IE. Go ahead and download IE Tab Plus from Firefox Add-ons site and lets roll.

Once you install IE Tab Plus, you will see and icon in the system tray. This icon toggles between FF and IE.

Lets get to work

The number of sites which work only with IE is reducing fast but there are still some sites which either refuse to work with anything other than IE or don't work well with non IE browser. Lets take a look at such sample site.

This site flatly refuses to work with Firefox. It clearly says “Sorry, this site requires Microsoft Internet Explorer 5.5 or later.” Now lets switch the site to IE by clicking the FF icon in status bar.

 

There are variety of ways in which you can switch the engine from Firefox to IE. The easiest way is to click in icon. Another way is to right click the page which brings up Firefox context menu which allows you to switch rendering engine. If you right click on the icon, it brings up a menu (as shown in the image). You can take a call if you want to switch the engine in the same tab or launch the page in IE.

 

Here is a screenshot of the same site, still running in Firefox but being rendered using IE engine. As this is not simulated (browser-agent switching), you get real experience of IE. As you can see in the screenshot, if you right click on the page, you get IE context menu and not FF. To switch back, simply click on the icon back. If you require full IE interface, you are welcome to use “View Link in Internet Explorer” which will launch IE and not use FF tab.

Configuration

You can configure IE Tab Plus to share cookies with FF or even allow AdBlock Plus. You can also decide in-tab switching or opening a new tab. It also allows a site filter where you can specify sites which will always open in IE (at one point of time windowsupdate was the most gruelling IE-only site).

Conclusion

So now you know why I haven't used IE in months

Happy switching

UI Candy or Visual Feedback?

Share on Facebook

---

I am a software junkie and try out lots and lots of software and utilities to see what works for me. It gives me a chance to discover new software which help make my life easy. I alternate between multiple browsers like Internet Explorer, Firefox, Opera, Chrome and Safari. My main browser currently is Firefox while I use IE and Chrome for testing my blog and ASP.NET apps I tinker with. One feature that I really liked about Safari is that its progress bar which is displayed as part of the address bar itself.

Visual Feedback

Wait, its not a UI candy thing but a very sensible feature. When we type a URL, our eyes are looking at the AddressBar and after hitting ENTER they do not automatically shift to the status bar to see the progress bar. In fact, they continue to gaze at the AddressBar and waiting for the page to load. So what Safari has done is put the feedback about the progress right in front of our eyes.

Here is a screenshot of Safari loading a page with visual indication of the progress.

Fission

Meet Fission, a Firefox add-on which not only mimics Safari in displaying progress bar inside AddressBar but goes one step further showing “Connection Status” of  Waiting, Connecting, Transferring too.

Check out the image above (click on it to enlarge if you like) and you can see that a yellow bar is indicating overall progress while on the right side of the AddressBar shows the current stage of “Connected”.

Needless to say, you can configure the colour of the progress bar and decide if you want to see connection status on the right side of the AddressBar or not.

The last option is interesting one too… When you move the mouse over links in a page, it does not obstruct your view by popping up the link url as a tooltip, rather, quietly changes the URL in the AddressBar temporarily.

Conclusion

Sometimes, User Experience is not about nice images and smooth fonts but about understand how users interact and providing visual feedback in the most natural way like Fission does.

Happy Browsing

Don’t read it now, ReadItLater

Share on Facebook

---

Information Overload

Have you noticed that the pace of life is increasing and we are always short of time? Our commutes are getting longer and information overload doesn't help either. Look at the sources of information we have in todays time – Newspaper, Television, Telephones, Car-radio, Messenger, Facebook, LinkedIn, Email, RSS Feeds, Stumble Upon and the list goes on. Wait, add my neighbour who is like BBC broadcast about the going-ons in my building.

Unutilized time

Imagine this scenario, you are getting ready to leave for work in the morning and checking your mail while sipping tea and you notice a great article someone sent you in mail. You want to read it but don’t have the time, so you keep the mail in the inbox and rush out to catch your bus and train. You are going to spend next 30-90 mins commuting but you aren't reading what you wanted to.

Better utilize you time

Now re-imagine the same scenario differently.. you open the mail, notice the link which is of interest. When it opens in your web browser, you simply click “Read it later” and it syncs the article to your iPhone, Blackberry, Android, PalmPre, WinMo etc. Once you are in your bus, you take out your phone and start reading the article you saved. You don't even have to be online on GPRS if the Wi-Fi sync at home transferred the entire article on your phone. After reading, the article is automatically marked “Read”. When you reach office, you start your browser and the browser shows you a list of articles still not read.

ReadItLater

ReadItLater is an add-on available for Firefox and other browsers (IE, Chrome, Safari) and also supported on SmartPhones (iPhone, Blackberry, Android, Windows Mobile, Palm Pre, Nokia N60). Once you install ReadItLater and create a free account, login from your browser. It adds an icon to your Toolbar and AddressBar. If you come across an article that you would like to read but don't have time at that moment, just click the icon in the AddressBar and it will sync the entire page into your reading list. This list can then be synchronized to your phone and even other browsers. If you turn of offline viewing, it can download web view or text view and keep it locally so that you can use it while using laptop in flight or on phone while travelling on a bus/train.

Reading It Later

Having marked all your articles, you can click on the ReadItLater button anytime to pop up a list of articles, choose one and it opens it in a tab (even if you are offline). Once you are thru reading, it can either automatically mark it as read or you can configure it to wait for you to manually mark it as read. You can configure multiple locations and multiple browsers so sync your links across.

Imagine this.. You are at home and logged into Firefox and mark a set of sites in ReadItLater. Now when you reach office, you login to ReadItLater using IE or Chrome and you will see the same list available to you there. Mark them as read and when you come back home, the reading list is automatically synchronized.

Google Reader Integration

There are many website we stumble upon while surfing but a lot of them could come from RSS Feeds. I use GoogleReader to keep track of things of my interest and ReadItLater integrates beautifully with GoogleReader too.

You can see from the image above that ReadItLater puts its faint yellow caret sign at the beginning of feed title which you can click to transfer that particular item into the reading list rather than the entire page.

Conclusion

Use ReadItLater to schedule and utilize your time better so that you have more time available for important thing. If you can configure you home pc browser, smart phone and office pc browser, you will not miss out on important article and keep track of things.

Happy Reading

Who NOT to follow

Share on Facebook

---

Right after I posted a blog on GreaseMonkey, I read Janakiramm vent his frustration on Facebook about how Twitter is mimicking Facebook. Twitter has recently started “Who to follow” section on its site where is suggests people you should be following. Its not only irritating but badly implemented too as the same names keep appearing repeatedly. Its ok for sites to implement new features but they should allow the user to disable it. The least they could do is let user specify “I do not know anyone from here”. For people like Janakinamm and me who probably prefer a clean interface (I think I have Interface OCD), GreaseMonkey can be of help. Install GreaseMonkey (if you don’t have it already) on Firefox (Download it if you aren’t using it) and lets fix the Twitter problem.

Who NOT to follow

If you are ready and armed with Firefox and GreaseMonkey, just head over to this link Remove Who to follow (Twitter) and click on the Install button (If you also have GreaseFire add-on then you can simply right click on GreaseMonkey icon and Click on “xx scripts available”and search in the GreaseFire window. Check my previous post on how to do that).

Once installed, simply refresh your twitter and Voila! Who to Follow is gone.

Seriously, if you haven’t got Firefox and GreaseMonkey yet, go get it now. It will reduce clutter and irritation you might be having with your favourite sites.

Happy Tweeting

Quit monkeying around and take control of the web

Share on Facebook

---

Web based applications are cool as you don't need to download software, maintain and upgrade them. However, web applications tend to target lowest common denominator of web standards as browsers have varying capabilities limiting the richness in User Interface.

As a user, one of the first things I do when I install any desktop software is rush to the Tools > Options menu to figure out what customization possibilities does it provide. It kind of gives you an inkling about the capabilities of the product and also richness of its UI. Most web apps lack extensive customization and hence GreaseMonkey.

What is GreaseMonkey?

GreaseMonkey is an add-on for Firefox browser which extends the capabilities of web sites in imaginatively endless ways. It basically works on the content Firefox receives from a web site and can rearrange, remove, add elements from the contents using small bits of JavaScript. There are thousands of readymade free scripts available which you can use as they are or even go an tinker with them to customize them to suit your needs.

Installing GreaseMonkey

GreaseMonkey is a add-on for Firefox browser, so head over to https://addons.mozilla.org and search for GreaseMonkey.

Click on Add to Firefox button and once installed, restart Firefox. Nothing spectacular happens as of now, just a small icon appears in the status bar.

What does it do?

Well, basically by itself.. nothing. Its an engine and host for fantastic user scripts which can completely transform websites without any help from the website itself. This can range from eliminating parts of the web page (like irritating ad sections) to rearrange elements (move Gmail chat from left to right) to completely skin the page (Better Gmail). The possibilities are endless. So let’s get some scripts. All these scripts are not written by the creator of GreaseMonkey but countless developers and even end users. Thankfully, rather than searching all over the web for these scripts, there is a central site called UserScripts.org which hosts these scripts and even allows you to install them in one click. Lets see what we can do with these scripts. We will take a list of popular websites and apply some GreaseMonkey Scripts.

Lets take a look at some sample sites and scripts.

Google FX

Let try a sample GreaseMonkey script on one of the most used sites – Google. GoogleFx is a GMScript which totally transforms Google home page and search page to add a set of useful functionality. The script is located at http://userscripts.org/scripts/show/31950.

Click on Install and it will pop up a dialog box giving you details of the script. This includes a short summary, sites the script runs on and even the option to view the Script source. All GMScripts are available in source form which is comforting as you can view the source to see if everything is above board and also becomes a source to learn JavaScript in case you want to write your own scripts.

Once you have installed the script, it will show up in the GreaseMonkey configuration. You can disable/enable/uninstall the script whenever you want. While the author of the script specifies which web sites it runs on, you can add more sites (e.g. Google.co.jp) or put certain sites in exclusion list (Google.co.in).

Having installed the script, now lets head to Google and see what this script does. Remember, these changes are not coming from the server but happening locally AFTER the page contents are received by Firefox.

As you can see that the script has changed the look and feel of the main Google page. (Click on the image above to see a bigger preview). The links on the top are now tabs with icons, there is a colour theme chooser at extreme right. FX has also added its own preference Icon “Fx” so that you can customize what you like.

The search page has also been modified. Don’t be taken aback with the amount of information. Most of it is actually quite useful and if you don't like something, you can always customize it to remove the options you don’t like. Some of the things this script does

• You can switch between tabs (Web, Images, Video etc.)
• The scrolling is auto paging.. just keep scrolling down
• Select time ranges (last hour, day, week month)
• Switch search engine (Bing, Ask, AllTheWeb..)
• Displays related searched on top right prominently
• Displays Wikipedia articles if any
• Display Twitter, YouTube, Maps, Books etc.

Don't like it? No worries.. Just right click GreaseMonkey in status bar,uncheck GoogleFx from the popup menu and refresh your page and everything will be back to normal. No need to uninstall or restart the browser.

Here are some more popular sites “Before” and “After” photographs

GoogleReader

Google Reader is online RSS aggregator and reader which has the standard look and feel of Google

When applied with Mac OSX SnowLeopard skin available on  http://userstyles.org/styles/16900 transforms the site to mimic OSX look and feel.

GreaseMonkey scripts are on userscripts.org but userstyles.org is the home for another Firefox add-on called Stylish. Stylish scripts are compatible with GreaseMonkey and hence can be loaded by GreaseMonkey without requiring Stylish add-on.

BetterFaceBook

This one is my favourite as I got sick and tired of all the StupidVilles (FarmVille, PetVille, FishVille) and Notifications like “So and so has become a friend of so and so or joined this or that group, which used to fill my news feed. BetterFaceBook script allows you to control virtually any aspect of Facebook. Just follow this link to install GreaseMonkey script for Facebook http://betterfacebook.net

Who is going to spend so much time searching scripts?

I agree.. While the scripts can do amazing things, who has the time to wade thru thousands of scripts on userscripts.org and userstyles.org? How about this scenario – You visit a website and somehow GreaseMonkey could tell you how many scripts are available for that site, their popularity, rank by downloads AND allow you to install the script right there in Firefox? Sounds great? Well, then what we need is another Firefox extension called GreaseFire. It adds a menu item to GreaseMonkey menu indicating the number of scripts available for the site.

The image shows that there are 32 scripts available the current site and clicking it brings up a dialog box which lets use browse, preview and install the script with a single click.

But what about other browsers?

GreaseMonkey was developed Primarily for Firefox given its extensible architecture and pluggable add-ons. The testimony for GreaseMonkey is that many sites actually implemented the features GreaseMonkey script tired to add on client side (e.g. Right click preview in GMail).

Google Chrome

GreaseMonkey creator Aaron Boodman now works at Google and has added GreaseMonkey capabilities to Chrome natively. This means that most of the 40,000+ scripts can be added directly to Chrome without having to first install any add-on. Chrome directly converts GreaseMonkey script into Chrome Extension (.crx).

IE, Safari and Opera

While GreaseMonkey was created for Firefox and now the creator has added native support for Chrome, there are other ways it is possible to run GreaseMonkey script with varying degree of success in browsers like IE, Safari and Opera. Check them out here.

Conclusion

GreaseMonkey is one of the most popular Firefox add-on and has amazing abilities to transform web sites in their look & feel as well as functionality. I am sure you will explore, browse and try out GreaseMonkey scripts, if you like any drop me a mail or a comment on this post.

Happy Monkeying

Aero Effect in browsers

Share on Facebook

---

People have been asking me how I am able to get Aero effect on browser like Chrome after they saw the screenshots in the previous post). I kind of like the transparency effects in Windows 7, especially the change from Vista where maximizing the window no longer makes it title bar opaque. While transparency is built in and automatic for some applications, you need to tweak or even install add-ons and utilities to bring transparency in some applications.

Enabling Transparency

First of all you need to enable Aero in your Vista or Windows 7 by going to Desktop > Right Click > Personalize menu and choosing “Enable Transparency”. I tend to choose the lightest colour (Frost) for Windows borders, start menu, and taskbar. It gives almost clear glass like transparency effect. You can also adjust the colour intensity which will adjust the opaqueness of your title bar. Least intensity will make it look like clear glass whereas max intensity will make it look like frosted glass. Once you are done with adjusting aero, we can start looking at applying aero capabilities to various applications.

Transparency in browsers

I use 4 browsers for testing – Firefox, Chrome, Internet Explorer and Opera. Each of these browser requires a different method to make their toolbars transparent.

• Internet Explorer – Built in transparency with Windows 7
• Opera – Transparent skins available for download
• Firefox – Add-on available for making the toolbar transparent
• Chrome – Hacking the theme to convert the toolbar transparent

Lets take a look at each of these one by one.

Opera 10.x

Opera, like many other applications, has the concept of skin (theme). All you need to do is browse online themes from Opera menu and apply a glass or transparent theme. Opera comes with 2 built in themes – “Opera Standard” and “Windows Native”. While Windows Native provides standard windows colour to the toolbar.

Opera Standard applies glass effect to the tab area as well.

Applying Opera Standard Theme by itself give you transparency effect on Opera toolbar but if you want to extend it, there are a number of transparent theme available which can make the tabs and even empty page totally transparent. To browse and install these themes, go to Opera Menu > Appearances > Skins. Click on “Find more skins” radio button and browse for skins online.

 

Applying this skin makes the ENTIRE opera transparent, but don't worry, its only for the blank page and not when you open web sites

Firefox 3.x

Firefox is the most customizable browser out there and you don’t have to rely only on Mozilla to provide you with the feature you are looking for, you can browse thousands of add-ons available on the site and you are most likely to come across an add-on which satisfies your requirement. In this case, and add-on called “All Glass” which can be applied to Firefox to make its toolbar glassy like Internet Explorer or Opera. To install, go to Tools > Add Ons > Get Add Ons > Search for All Glass.

When you find it, click on the Add on name and select “Add to Firefox”. You will be instructed to Restart Firefox for the add-on to have the effect.

Restart and Voila! Your Firefox is all glass now.

 

Chrome 5.x

Chrome is the trickiest of the lot to glassify. Though if you were to search for Transparent themes, you will find them on Google site and these themes even show the white/gray square indicating transparent background (as depicted in PhotoShop/Gimp and other editing product). If you excitedly apply the theme hoping that the gray/white areas will be transparent, well.. they will be gray and white.

Chrome installs extension and themes and stores them under User profile. The theme contains a JSON file which specifies the theme attributes. It takes a simple micro surgery to remove the frame attributes altogether forcing Chrome not to apply ANY colour to its frame, leading to transparency.

First apply a theme you would want before making rest of the toolbar transparent. Having done that, lets find out where Chrome stores its theme attributes. To do this on Windows 7 you need to go to \Users\<YourLoginName>\AppData\Local\Google\Chrome\UserData\Default\Extensions as shown in the image below.

These are all the extensions that have been installed in Chrome. Unfortunately, Chrome does not use the extension name for the directory name making it difficult to figure out which extensions these are and more importantly, which of these directories is the theme directory. You need to search the directory which contains a folder called “i” and that’s the one in which we are going to modify the attributes. For me, its located in this folder

Now, edit the JSON file using any text editor and knock off the lines referring to the frame. For example, my current theme specifies:

We are going to take this modified extension and create a new theme (extension) out of it. So save the file and copy the version number folder (1.0_0)  to another location, say on desktop. Next, in Google Chrome, go to Menu > Tools > Extensions. Make sure the developer mode is on and click on pack extension to create an extension file (.crx).

This will generate a file on the desktop 1.crx. Now just drag and drop the file anywhere on Chrome. Chrome will give a warning at bottom of its window that installing extension can be harmful.. blah.. blah. Just go ahead and click on continue.

 

And Voila!

Conclusion

Most applications either support transparency naturally or have tweaks and extensions to achieve it. There are 3rd party apps which are capable of applying transparency to any application, but the don't do it selectively, rather to the entire window.. which is not what you may be looking for.

Happy Glassing