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.
Thursday, November 20, 2008
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: <img src="moz-icon://.mp3?size=32" />. 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):
-
-
Ubuntu 8.04
-
-
Mac OS X 10.5
-
-
Windows XP
Saturday, October 18, 2008
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.
This pretty much sums up my life right now:
On the midterm, we were expected to work this out by hand.
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!
My name is