Firefox 7

Mozilla... Seriously? Really? :) I like auto updates (despite the crazy versioning), but this way of informing me I have an update is way too aggressive. This crazy window just popped while I was browsing and freaked me out. Yes, I clicked restart... and as with every update, I lost half of the plugins due to incompatibility with this glorious new version. Plx, next time could you instead put a nice little balloon with "update ready" notice or something, for crying out loud!

Firefox 4 fancy window border issue

The long awaited release of Firefox 4 is behind us. It's faster, slicker and by all means just better than his predecestor. But, just after installing it a week ago, something was bothering me. It took me couple of days to figure out what it was.

The new fancy windows7/vista style window border introduced in Firefox 4 has a nasty habbit of "jumping" (resizing) when status bar appears. Status bar appears every time you hover a link, which basically happens all the time.

Check left and right window gradients while I'm hovering the links:


Oddly enough, this does not happen if browser is in fullscreen, maximized or very small:


update 30.3.2011. Bug ID 633282.

Inconsistent behaviour of default browser tooltip

I've had some spare time before bedtime to put into digital form something what I discussed with the guys at the office - inconsistent cross browser behavior of default tooltip functionality.

First, a little introduction to the subject of tooltips:

The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small "hover box" with information about the item being hovered over. (Wikipedia)

In your regular computer usage, you see tooltips every day (all day) and chances are that you don't even notice them anymore. All browsers display the title attribute of an HTML element as a tooltip when a user hovers the mouse cursor over that element. Some browsers will also display the alt attribute of an image as a tooltip in the same manner (if a title attribute is also specified, it will override the alt attribute for tooltip content).

On the wide spaces of world wide web you can also find custom generated tooltips (eg. in javascript or Flash or just by absolutely positioning of elements via css), but they are not the subject of this post. I did my fair share of tooltips in different Flash projects I was working on, and each time we did a new tooltip type, we tried to make tooltips an integral part of visual part of design having in mind usability.

From user stand point - I never paid too much attention to browser tooltips. Probably because I got used to them. If website I am visiting is done well, if I hover something (probably an image) - a default browser tooltip will appear over that element. That usual and expected behavior was enough for me to put browser tooltips somewhere in back of mi mind. But, recently something about tooltips started to bother me and I couldn't pinpoint it.

Just around the time when we were working on release of Globus portal, I finally did figure out what was wrong with tooltips - tooltips in Firefox to be exact.

Firefox (tested on 3.5.5) has a nasty bug which causes hovered element to fire up onmouseout event when you rollover a default browser tooltip which that element invoked. When you rollout of the tooltip (because tooltip disappears), the browser element fires onmouseover event again, and that can cause some really nasty behavior.

Firefox 3 tooltip bug
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)
(i've recorded this behaviour. you'll need flash player to see the video. if you can't - try MOV or AVI file.

On Globus that bug caused so much problem in elements which change layout when you hover them - that we had to remove title tags completely. And that from SEO standpoint is a BIG inconvenience. I've tested tooltips in all browsers, and AFAIK only Firefox 3.5 (Win) tooltips are "working" that way. I've submitted this bug to Bugzilla so will see what they'll say about it.

While doing tests in browsers I had around (Firefox, Safari, Chrome and IE8), I've noticed another inconvenience. Not a single browser did not displaying the tooltip the same way.

I've put up a little html demo for you to test by your self (ignore my css 'skills'). The 'demo' contains one div with image inside it with a link. If you hover the image, the link's title will show up in a default browser tooltip. Take notice how tooltip:

  1. appears when you roll over element
  2. disappears when you roll out
  3. behaves when you move around element
  4. behaves when you try to rollover the tooltip it self

You will notice that not a single respected browser currently available on Windows is not displaying tooltip the same way.

Chrome 3 toolip
- lazy (shows and dissapears with an delay), you can rollover it with your mouse without any side effects. The fact that you can rollover tooltip in combination with rather long hide delay can be inconvenience.
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Internet Explorer 8 toolip
- pretty standard windows based tooltip behaviour. if you hover a tooltip - it will disappear which I think it's best behavior.
- has a nasty habbit of blinking two times when you hover an element. it doesn't produce other nasty effects to dom events
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

Safari 4 toolip
- has a nasty habit of disappearing and reappearing while you are still hovering the element. it doesn't produce other nasty effects to dom events
(Either JavaScript is not active or you are using an old version of Adobe Flash Player. Please install the newest Flash Player.)

I haven't tested Opera on purpose. It's market share is just too low. :-(

I have no idea why not a single web browser doesn't have tooltip behavior configuration setting like follow mouse, delay in ms, different show/hide effects etc. I think that would be cool. :)

Feedback is welcome!

Page Speed a YSlow alternative for FireBug

If you have been using YSlow for client side website benchmarking and you upgraded to Firefox 3.5, you must have noticed that it's not working any more. I guess YSlow development died at some point - I noticed couple of bugs some months back, mailed developers but nothing happened.

A pretty good alternative to YSlow is Page Speed from Google- also FireBug addon Firefox extension.

I am missing couple of pieces of information which YSlow reported but it will do for now. It has couple of interesting features for css gurus. My frontend code guru colleague said that he doesn't believe them but but addon is definitely worth checking out. :)

Fix firefox memory leak

It seams that the firefox 2 release has memory leak problems. I discovered the problem recently when I saw that my firefox was using more than 150 mb of ram after starting with 30 mb of ram. After some surfing I came across this fix, it basically clears the memory on firefox window minimize actions. The method is as follows:
Type about:config in to your address bar (these are firefox hidden settings), then right click and create a new boolean variable with the name config.trim_on_minimize and give it a value of true. That's it, every time you minimize your firefox window it will free the memory it uses.

Pimp my google

After reading seven's post about how a black variant of the google home page would actually save energy I decided to do some research in hopes of doing just that, changing the skin of google. How hard can it be I thought to myself, a little bit of css in conjunction with firefox and a mean plug in, would do the trick. So after playing around a bit a found the solution and here it is.
Things you will need:

  1. Firefox
  2. Stylish firefox plug in
  3. A bit of css knowledge

With the stylish plug in you can actually alter the css of any site including google. After installing the plug in and restaring firefox you will have a new little icon in the bottom right corner of firefox, this is the stylish plug in settings. Next download this file to your desktop. Open up that file with notepad and search replace your google location, for example: replace .com with .hr depending on your location and then save the file.
Next go to your google home page, right click the stylish settings icon and choose write styles > for this url and copy paste the file you just tweaked and paste it to yo the console. That's it you should now have a pimped out version of google that saves energy too.
The original article and more customizations can be found here.