Trev's Travels

Firefox 3.5 not collapsing spaces in JavaScript className

Trevor — Sat, 18 Jul 2009 04:57:04 +0000

In JavaScript, to get all the classes on a given element, you call element.className, which gives a string with space-separated classes, such as “class1 class2”. You can also set this property directly, such as element.className = "class3 class4”. The norm here is that classes are separated by a single space, with no whitespace at either end, but since we are just setting a string directly, we can send in any whitespace we want. This is where things get interesting, because in Firefox 3.0, any unnecessary whitespace is removed, leaving the string the way you would expect it to be formatted. However, in the newly released Firefox 3.5, this does not happen, and the extraneous whitespace remains. Here’s a live example. Clicking this link sets its own className to " class1 class2 ", and then displays its newly set className:

Try me!
In Firefox 3.0 you will see "class1 class2”, but Firefox 3.5 will show " class class2 ".

I’m not sure if this is a bug or a feature, but it’s a bit of a gotcha if you are at all sloppy in setting classes, as it might mess up a class-recognizing regex later on, which exactly what happened at work today, in our Google Reader extension.

Secret Firefox Icons

Trevor — Thu, 20 Nov 2008 06:43:51 +0000

I discovered an interesting feature in Firefox today. When browsing in a local folder (Anything starting with file:///), small icons are shown to represent the format of each file. It turns out that you can access these icons with moz-icon://.ext?size=x, where ext is the extension of the file (mp3,txt, …), and x is the size of the icon to display (32 and 16 work well for me).

We can take advantage of this feature by including these icons on any web page. Simply use an img tag like this: . The beauty of this is that the icons will display natively on whatever platform they are running, taking on the look of the Operating System. Even changing your theme will change which icons are displayed. These subtle changes can make an application feel much more intuitive and familiar.

The obvious problem is that these icons only work in Firefox. However, if that is your target browser, this could be a nice little addition to a web application, which could easily be hidden in other browsers.

Here is a sampling of the icons, which will only appear if you are using Firefox. There is also a set of screenshots from several Operating Systems at the end.

Music (mp3):

Archive (zip):

Video (mov):

Picture (jpg):

Text (txt):

Document (doc):

Binary (exe):

Web (html):

Script (pl):

Presentation (ppt):

Spreadsheet (xls):

Screenshots

(Thanks to browsershots.org)

3D Modeling

Trevor — Sat, 18 Oct 2008 06:01:07 +0000

Tonight I started playing around with Blender, the free, open-source 3D Modeling application. Thanks to a great tutorial, this is what I came up with after only a couple hours.

Cooler/creepier models to come.

Calculus Fun

Trevor — Mon, 28 Jul 2008 04:55:58 +0000

This pretty much sums up my life right now:

On the midterm, we were expected to work this out by hand.

My Best Red Flag Deal

Trevor — Thu, 17 Jul 2008 19:51:48 +0000

For a while now, I’ve been wanting to buy the Orange Box set to play the widely acclaimed Portal. I kept putting it off until I found a great deal on RedFlagDeals: Future Shop had it for only $29.99. I picked up the last copy in the store, and now I’ll be happily enjoying Portal!

Band Names from “Lucy in the Sky with Diamonds”

Trevor — Sun, 11 May 2008 22:33:19 +0000

Some bands have no imagination.

Warning: Half of these will start playing music automatically.

Picture yourself in a boat on a river,
With tangerine trees and marmalade skies
Somebody calls you, you answer quite slowly,
A girl with kaleidoscope eyes.
Cellophane flowers of yellow and green,
Towering over your head.
Look for the girl with the sun in her eyes,
And she’s gone.
Lucy in the sky with diamonds.
Follow her down to a bridge by a fountain
Where rocking horse people eat marshmallow pies [Album],
Everyone smiles as you drift past the flowers,
That grow so incredibly high.
Newspaper taxis appear on the shore,
Waiting to take you away.
Climb in the back with your head in the clouds,
And you’re gone.
Lucy in the sky with diamonds,
Picture yourself on a train in a station,
With plasticine porters with looking glass ties,
Suddenly someone is there at the turnstyle,
The girl with the kaleidoscope eyes.

Lyrics from Lyrics Freak.

Facebook Large Photos

Trevor — Thu, 24 Apr 2008 23:34:26 +0000

Time for my second greasemonkey script.

Ever searched for a long-lost friend on Facebook, only to wish you had a magnifying glass for their profile picture? The ones shown in the search results are so small. Well, today’s your lucky day, because I have just the solution for you!

Make sure you are using Firefox.
Install Greasemonkey
Install Facebook Large Photos

Before:

After:

Caps Lock Warning

Trevor — Tue, 11 Mar 2008 00:24:09 +0000

I just wrote my first Greasemonkey script. It warns you if you are typing a password with caps lock enabled.
The caps lock detection code is complements of Stuart Langridge.
To install:

Make sure you are using Firefox.
Install Greasemonkey
Install Caps Lock Warning

Enjoy!

User-Relevant Timezones 0.1

Trevor — Fri, 17 Aug 2007 01:04:53 +0000

My friend Stephen and I have just written a WordPress plugin to show the times on your blog in the user’s timezones. Check it out!

Early Web Design Experiments

Trevor — Sun, 05 Aug 2007 03:06:29 +0000

From the earliest of my introduction to HTML and CSS (Thanks to my friend Stephen), I present these attrocities:
I was basically just trying to figure out basic HTML and CSS syntax.

Lovely stuff, eh? The logo on the first page was created with MS Paint, and saved as a gif. *shudder*

You can see how I’ve progressed by checking out my portfolio.