Spun

Spent a few days playing with the awesome Ubiquity Firefox extension, and yesterday I dove into developing my own command. Here’s the result: a Google search of Lifehacker’s archives that shows up in-panel in Ubiquity, like this:

The code itself is Javascript that uses a jQuery template for results. It’s heavily ripped off from the existing Google search command (with the site:lifehacker.com operator thrown in). If you haven’t tried out Ubiquity, here’s my introductory tutorial.

The first indicator that a design trend is on the way out is when there’s a Javascript toolkit for it. Here’s image reflections.js. (via pb)

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

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

To do: Pore through this great-looking Javascript Boot Camp tutorial.

I just adore the Lightbox JS v2.0 photo gallery Javascript library. It’s flashy but usable, it degrades nicely sans Javascript, it looks search engine friendly AND it’s optimized for performance with pre-loading as well. I must hook this up; I’ve already got a couple places in mind.

Social timeline maker Dandelife is really cool but I’m anti-social, and anti-hosted data. Happily, with the open source, fancy pants SIMILE Timeline one can create and host their own timeline. Fabulous.

After reviewing about 17 dozen dynamic RSS reader homepages on Lifehacker (like Google’s Personalized Homepage and Netvibes and Protopage) - which are all basically the same - it warms my heart to see a tutorial on how to build your own.

Hopefully this means these “desktop” homepages have jumped the shark and everyone move their “WebOS” dev efforts onto something a bit more innovative (and useful!).

I was really sad to miss Simon Willison’s Javascript tutorial at ETech this week, but happily he’s posted all his slides and detailed notes. Thanks, Simon! Definitely gonna brush up on the Javascript with this.

FileChucker’s a $15 Perl script that provides an Ajax-y file upload interface for your web site, complete with progress bar. Haven’t tried it, but looks pretty cool.

The words “Ajax” and “Unit testing” spoken in the same how-to article make me all warm and tingly inside. If JSUnit is actually workable, I’ll have a lot less mental blockage around dev’ing Ajax functionality for sure.

The Yahoo! User Interface Library’s got a bunch of open source Ajaxy UI components, including a Calendar control, Drag and Drop, a Slider and Tree View. Neat.

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!)

A few Ajax links I’ve been hoarding:

• Ajax Tutorial: Ajax What Is It Good For?
• 24 ways: Edit-in-Place with Ajax
• Mastering Ajax, Part 1: Introduction to Ajax
• Mastering Ajax, Part 2: Make asynchronous requests with JavaScript and Ajax
• Mastering Ajax, Part 3: Advanced requests and responses in Ajax

Updated with one more link.

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.

Here’s a really neat DHTML expand and collapse tree view for list items. Simply include a javascript and CSS file into your page, then apply the appropriate ID’s to your list. Check out my quick and dirty demo.

Thanks, Su!

Here’s some useful edit-in-place Flickr style DHTML.

Just because you can doesn’t mean you should.

I’m building this thing with some buddies. My current responsibility is the prototype. This thing’s going to use some DHTML and AJAX, and I can envision the screens in my mind, all working in beautiful, usable form, a culmination of all the good interface techniques I’ve seen without all the ones that suck.

So I start to prototype, and I decide I want to totally wow my friends with a nearly-working front end. I’ve only got a few days, mind you - we’re working in 3-day dev cycles. And like an idiot, I wind up getting totally bogged down in writing and debugging Javascript for one little minor piece of functionality that we’ll probably throw out in the end anyway because this is a quick and dirty prototype. End result? Instead of a flashy, nearly-working proto, I had NOTHING to show for all my Javascript screwing around.

Lesson? There is no room for anal perfectionism in rapid prototyping.

Forget XMLHttpRequest, this Ajax method sets the src of an img dynamically to pull data from the server.