Ian Lewis' Blog

Recently Google Chrome has been pretty popular with web folks and Google fans. It's fast and has only a little "chrome" or window trimmings which makes the overall screen bigger when viewing webpages. However it lacks a lot of features that are present in Firefox that I pretty much can't do without so today I set about making Firefox have all the small interface improvements that make Chrome so nice. Fortunately you can do this with existing plugins.

The first thing I did was try to reduce Firefox's "chrome" by tightening up the menus. I right clicked on the menu's in the top and hit "Customize" which lets me customize the menu bars. I put the navigation buttons (back, forward, stop, etc.), bookmark buttons, home, toolbar bookmarks, navigation bar and search bar all in the same toolbar. I hid all other toolbars. I hid the status bar by selecting the checkbox under View->Show statusbar.

I then realized that I almost never use the menubar (File, Edit etc.) and I could hide this. Unfortunately you can't get rid of the menubar in the default Firefox. This is where the Hide Menubar Addon comes in. This plugin is very simple as it simply allows you to hide he menu bar like any other toolbar. You can show it again temporarily by hitting alt. Very useful.

Hide Menubar

Next I went about adding a start page. I came across this blog post which suggested using the New Tab Jumpstart which is the most like Google Chrome's start page but the one I settled with was the Fast Dial which is more like Opera's speed dial.

Fast Dial

Chrome has dynamic context menus that change based on what yau have selected, what you are clicking on etc. This functionality was implemented in the FFChrome addon.

FFChrome

Chrome's omnibox is pretty cool. You can get similar functionality but not quite a good from the Omnibox Firefox addon. Firefox's omnibox ties into the registered search engines in firefox and requires that you type an @youtube or the like for search engines other than the default.

Omnibox

You can hide window trimmings to maximize window space a bit more by using the Hide Titlebar addon. This didn't work well for me in Linux however so I don't use it there.

For those that want to really make it look like chrome you can install the Chrome theme which is actually pretty darn good and beats the bulky, tall, tabs in the default theme.

Chromifox

When you put that all together it looks something like this:

Now I have a much more usable and productive browser and still have access to all the nice Firefox plugins that I use regularly Firebug and Delicious bookmarks.

So the last few days I've been playing around with MochiKit and working with Javascript. Until now I have done some Javascript here and there but not too much. MochiKit seems to make it a lot easier by providing you with lots of useful functions for things you do often. In fact it's so popular that I have a hard time explaining to myself why I hadn't tried to use it up until now. I'm certainly not on the bleeding edge here.

Anyway, like I said, MochiKit makes JavaScript less painful. I have a little mockup for a page that defers going to the server until the user has stopped entering data for 3 seconds. That cuts down on a lot of back and forth between the server and client. It's easy in MochiKit. Just use the callLater function.

In this example the callLater is used to call another function, deferredupdate, after 3 seconds. However, if the user enters data a second time before the three seconds are up then the deferred object will be cancelled and a new deferred object will be created. This has the effect of not calling the update function until a user is really done entering data.

The request object is created in the deferredupdate function.

The deferredupdate function calls loadJSONDoc which creates a deferred object as well however this deferred object doesn't wait for any time it simply does it's work in a separate thread and executes a callback when it's done. In this case I set the callback to be the pageupdate function. The pageupdate function does the work of putting the resulting data into a table and adding that table to the html DOM.

If you are wondering what the bind function does, it always ensures that the 'this' reference works. I'll leave the full explanation for another post.

Most people who program in JavaScript already know about MochiKit but if you are interested in it check out the screencast at http://www.mochikit.com/

In the same vein as my first post bashing Internet Explorer I wanted to point out a few CSS bugs/unsupported features that are notable in Internet Explorer. For those who are not familiar, CSS is a stylesheet language which helps you to layout your forms. It's used on basically every major website on the internet. But Internet Explorer, even though it is the most widely used browser, does not support many of the features of CSS and when it does, sometimes the layout appears differently than in other browsers because Internet Explorer doesn't follow the rules for how the CSS should work. This post will cover those issues where Internet Explorer simply doesn't work at all.

PNG Transparency

The first issue affects this website and actually causes the CSS used by this site at the time of this writing to be non-standard (shh!! don't tell anyone! I'll fix it sooner or later). That issue is that Internet Explorer doesn't support PNG transparency. PNG files have in them a transparency level which allows translucent images. When you click on an image on this site like below it pops up an image and the background is darkened by another translucent png image. This doesn't normally work in Internet Explorer.

Normally you should be able to just set the background image like the following and the png will be displayed with it's inherent transparency.

But Internet Explorer displays it as completely opaque.

Instead, for Internet Explorer's sake you have to do some wierd hack that is Internet Explorer friendly.

Notice the wierd call to some Microsoft method for displaying images with alpha. This is totally non-standard and broken but necessary in Internet Explorer to display a png with transparency (there are other ways to achieve the desired effect in javascript however).

Button Hover

The second issue is that Internet Explorer doesn't support the button:hover attribute in CSS. Normally you can make a particular piece of a page such as a link or button behave differently if you add the "hover" attribute to it in CSS. This has been used a lot with normal links. Indeed this site uses a:hover to show different color links when you hover over them. Try it. The link goes nowhere but you can see that it changes when you hover over it. The same should be true for buttons. You should be able to change a buttons properties when the user hovers over it using only CSS.

button:hover {
  /*Your CSS here */
}

In fact you can use this hover effect with pretty much anything, such as table cells and rows. However IE only recognises the hover for links so it requires javascript. Check out this test page. Hovering over the button does nothing in IE. In order replicate this functionality in Internet Explorer you have to write some wierd javascript that sets the behavior of the button when the page is loaded. There are a number of ways to do this but the most straitforward is to use the whatever:hover script so you can make use of the hover attribute in css. It has some important limitations however so be sure to read the limitations section. Essentially the scripts adds a onMouseOver and onMouseOut events to the button which change it's stylesheet class.

Both of these problems have added difficulty to my life. The first stemming from this website and the second stemming from work. While web browsers have become a quite complicated piece of software, time spent fixing bugs because of broken implementations of standards is a huge waste of time. This is somewhat true for Safari and Firefox but especially true for Internet Explorer. No argument could counter that it is a steaming pile of dung and that you shouldn't use it. PLEASE STOP. The world will be a better place if you do.