Trev's Travels » Geekery

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.

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.

Lego Robotics Invention System on Ubuntu Linux

Trevor — Sun, 15 Jul 2007 18:41:43 +0000

This is how I managed to get NQC working for the Robotics Invention System on my laptop, running Ubuntu 7.04 Feisty Fawn, with the USB Lego Infra-red Tower. Anything with a black background should be executed in a terminal.

Plug in your USB IR Tower
sudo mkdir /dev/usb/
sudo ln -s /dev/legousbtower0 /dev/usb/lego0 (Edit: For the latest versions of Ubuntu, the first path may need to be /dev/usb/legousbtower0, according to Scott.)
sudo chmod 666 /dev/usb/lego0
echo test > /dev/usb/lego0 (Look for a green light to flash on the IR Tower. If you see it, then all is well.)
Download the latest source of NQC from the NQC Website.
Put it in its own folder, and untar/gzip it: tar -xvzf nqc-[Hit tab to fill in the rest]
Open the Makefile: gedit Makefile
Remove the ‘#’ before this line: USBOBJ = rcxlib/RCX_USBTowerPipe_linux.o
Save and close the Makefile.
mkdir rcxlib/LegoUSB/
cd rcxlib/LegoUSB/
wget http://legousb.cvs.sourceforge.net/*checkout*/legousb/LegoUSB/drivers/linux/include/legousbtower.h
cd ../../
sudo make
sudo make install
export RCX_PORT=usb (You should also add this line to the bottom of the .bashrc file in your home folder: echo export RCX_PORT=usb >> ~/.bashrc
Try it out: nqc -msg 7 (You should see the green light come on on the IR Tower, and you shouldn’t get any message in the terminal.
If it works, you should be ready to use NQC! If you need to install the RCX Firmare, insert the Robotics Invention System CD, and run this command: nqc -firmware /media/cdrom/firm/firm0309.lgo
Download the test program: nqc -d test.nqc (This should put a program in slot 1 of the RCX which will just turn on Motor A.

Edit: Mike has a followup article where he explains how to set up the first three steps so they happen automatically when you plug in the IR Tower.

Kudos to this article for putting me on the right track.

Pranketh

Trevor — Sun, 20 May 2007 03:11:19 +0000

This past weekend, I collaborated with my friend Stephen Weber on what is my first stand-alone web application. This project we have affectionately christened Pranketh. By using it, you can send an email which looks like it came from someone else, whether a celebrity, or one of your friends. As we state in the “Fine Print”, you may not use this for malicious purposes. So, feel free to fool your buddy into thinking that hot celebrity wants to hang out with him, but don’t do anything stupid which will hurt someone. Just keep it fun. That said, do enjoy, and start prankething your friends and family.

New Wordpress Plugin: Per-Post CSS

Trevor — Sat, 05 May 2007 04:19:41 +0000

So, I’ve just created a new plugin, Per-Post CSS, which allows you to specify some CSS which will only show up when it’s particular post is being displayed. You can find out more, and download it here: Per-Post CSS.