Spun

Great collection of Firefox extensions to set up the ultimate Firefox development profile.

Firebug’s creator, Joe Hewitt, demonstrates how he uses Firebug.

Note to self: get better at debugging JavaScript with Firefox.

Been awhile since I’ve spent the entire weekend happily coding in a haze, but that’s what happened yesterday and Saturday. The result is the Better Gmail Firefox extension, which packages up my favorite Gmail Greasemonkey scripts into one, standalone extension, with the help of the awesome Greasemonkey Compiler. Check it out.

I got all fancy-pants with XUL and Firefox preferences in the latest release of About This Site, a Firefox add-on that hooks you up with all sorts of meta-services when you’re researching a web site (like Alexa graphs, del.icio.us bookmarks, a WhoIs query, etc.)

The new release is only a minor point upgrade but feature-wise it’s major: now you can configure whatever meta-lookups your heart desires in the menu all by yourself. (This will also head off all that email I get from folks requesting that I add their new webapp to the menu.)

Current About This Site users can upgrade just using the auto-update feature; go to your Add-ons in Firefox, right click on About This Site and hit “Find Update.”

What’s more, the fine folks at Lifehacker are funding some of my whimsical open source development efforts, so the extension and some more little utilities I’ve got in the works will be hosted there, under the new Lifehacker Code tag.

A girl cannot subsist on blogging alone. Meep.

I wrote my first Firefox extension for version 0.9 in September of 2004. The development process was a huge pain in the ass, but I pressed on, powered by sheer delight that I could develop an interface within the Firefox chrome.

Two years and one point one version later, I’ve revisited Mozilla’s extension development docs, processes and community. What an improvement! You can actually make changes to your extension and see them without repackaging, uninstalling, restarting, reinstalling and restarting again! There’s a fabulous Extension Maker wizard that produces an extension skeleton starter file set, and batch scripts to do the packaging for you. It’s all very exciting. Here are some tools and reference links I used to update my extensions:

• The aformentioned Extension Wizard
• Setting up the extension development environment [Mozillazine]
• Getting started with extension development [Mozillazine]

When I was done updating all my extensions, I got all uppity and submitted one to the Mozilla Add-ons directory. To my surprise and dismay/happiness, an editor tested it and rejected the submission because the extension threw a Javascript error! (An error that didn’t keep it from working, mind you, just cluttered up the Error Console.) I was pretty impressed with their vigilance (and sheepish about my shitty code), so I fixed it and re-submitted. It just got accepted.

Here’s a final list of my completed (and very simple) extensions, now compatible with Firefox 2.0:

• About This Site (here it is on Mozilla Update)
• Show Screen Captures
• Text Area Word Counter

I’ve got a few more extension ideas in the works, especially for web writers.

Notes on Mozilla Update: The great thing about hosting your extension there is that they take care of the auto-update on new versions, count your downloads for you, have per-extension comments enabled and are generally considered a trusted source for extensions (because they, you know, actually test them, as I found out). The bad part is that to host on Mozilla Update, you have to remove your custom auto-update URL from the install.rdf file. So, if you want to host your own extension (like say, to run ads on the page or include them in your custom portfolio) in addition to making it available on Mozilla Update, you have to build TWO separate versions - one, without an updateUrl set for Mozilla Update and one WITH an updateUrl for your own hosted version. That part kinda sucks.

My poor, old and few Firefox extensions are falling into disrepair. I’ll have to revisit these tutorials to get myself and them back up to speed.

There’s no feeling quite as sweet as when you discover code you set a sail into the public domain ages ago was republished and improved upon by others. Thomas Upton took my del.icio.us Prettifier Greasemonkey user script and modified it to make del.icio.us even prettier. Nice work, Thomas.

Warning: Rambling about work ahead.

I went off on MovableType’s atrocious performance while posting to Lifehacker awhile back. Turns out that one of MT’s biggest performance pain points is the huge number of possible post categories the Gawker sites (including Lifehacker) use - a number that goes well into the thousands. (Why, you ask? Well, narrow topic silos and focused category pages make for good sponsorship opportunities and highly-targeted text ads and great Google-fu, and we’re an advertising-supported business.)

Anyway, we use a plugin for MT that turns categories into “tags,” allowing you to enter categories in a del.icio.us style input box versus the clumsy category dropdown. “Go nuts with tags!” was the editorial edict. So we did, adding categories at a clip. Sadly, we were shooting ourselves in the foot. Rendering the interface with a list of hundreds of tags slowed things considerably, specifically, the “suggest a tag” Javascript on the New and Edit Entry pages. Apparently MT’s not built to handle more than 250 2500 categories per site, and we’re the first to push this limit. (Buh? 2500 is a lot more reasonable than 250. Tx Anil.) Also, apparently MT’s database interface makes what only needs to be one query for one recordset one query PER CATEGORY - thus, hundreds of queries per page request, hence the slowdown. (As a developer, can I just say - WTF, 6A? Anyway.)

Gawker’s solution was to remove the helper Javascript from the MT interface and have us enter tags cold; for me and my co-editors this was unacceptable, given how prone we are to typos and crazy variations of the same tag (”Mac,” “OS X,” “Mac OS X”, “Stuff we like,” “Things we like,” “Books”, “book,” etc.)

Fortunately for Gawker, I don’t have any access to the MT installation or template editing/creation for Lifehacker, so I was a bit handcuffed, not able to do much except complain loudly. Finally, to stop the tag mess from getting worse editorially, I wrote a Greasemonkey script which includes the static category list Javascript from afar on those pages, which is super damn fast AND gives us back the past tag helper. I’d publish that script but it’s got a little too much information about our server setup and is specific to the tags plugin, so I won’t. But you get the idea.

If we can get a category template of that Javascript include publishing every few hours and including newly-created tags (the existing one doesn’t update with new tags, boooo), life will be good.

Now back to our regularly-scheduled programming. (Ha!)

The Greasemonkey user script that saves me several minutes of typing every day broke with Firefox 1.5 and Greasemonkey 0.6.4. But thanks to the ever-instructive Mark Pilgrim and his O’Reilly article about safe Greasmonkey scripting, it now works. Specifically the “Pitfall #3: Named Forms and Form Elements” section addressed the bit that was tripping up my old code.

If you too use Movable Type, my user script autofills in the upload directory with a date-based folder name - great for rapid-fire posting with tons of images, like on Lifehacker.

The makers of one of my favorite markup/text/code editors on Windows, HTML Kit, have made a web service available which creates favicons out of images.

Favicons are the small images just before the URL in the address bar of many web browsers.* The images are in the .ico file format, so this web service takes any graphic (like a jpg or gif), resizes it and converts it to the .ico format which includes both a 16×16 and a 32×32 pixel version embedded within it.

It’s a tough challenge finding an image that is recognizable at that size, but totally worth it for the visual branding it brings to your site on readers’ and users’ tab bars and bookmark lists.

Once you’ve created an unzipped your favicon.ico to the web server, include the following inside your pages <head> tag to activate the icon:

<link rel="shortcut icon" href="/path/to/your/favicon.ico" type="image/x-icon" />

* Firefox’s support is probably the best, displaying favicon’s on bookmarks, tabs and in the address bar. Internet Explorer’s support for favicons is pretty much nonexistent.

I don’t know how I did any development before installing Chris Pederick’s Web Developer Toolbar in Firefox, it does so much. The live as-you-type CSS editing is what I use the most for tweaking design, but code validation, the quick View Source button, toggling images on and off and viewing form information and div class names are also super-helpful.