Spun

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.

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

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!

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.

ObjectGraph’s define-as-you-type dictionary and Wikiwax’s dynamic Wikipedia lookup are my two favorite uses of Ajax.

The CPAN for Javascript, JSAN seems to offer a whole lot of useful Javascript code for download. An interesting bit in the FAQ:

[The Javascript] people seem to fall into two camps. The first are people who consider themselves programmers or application developers. They like JSAN because it allows you to develop in an application style. Thinking about modular components is important in software design. The second group of people consider JavaScript a scripting language, something you write small things in.

I’ve tended toward the ’something that you write small things in,’ but then I saw Gmail and Google Maps, and I changed my mind.

Javascript logging using the fvlogger library looks SO MUCH BETTER than sprinkling alert()’s through your Javascript code.

Every time I have to publish a clickable email address on a web page I wind up Googling Javascript tools that obscure the mailto: link and telltale user@example.com format so that spam bots can’t easily pick up the address and tsunami the user with junk.

There are plenty of tools out there, but none that do all that I wanted: namely, encode the ‘mailto’ bit and display a live preview of the link. So I’ve gone ahead and thrown one together of my own.

Go ahead and give it a whirl, it’s got exciting iframe cross-scripting going on for the preview. *

* For now it’s Firefox-only while I work out the IE and Safari compatibility issues. Tested and works now on Internet Explorer 6 with SP 2 on Windows, Safari on Panther and Firefox Windows and Mac.

A quick way to see all the cookies a web page has currently set is to type the following into your browser’s address bar (works in all browsers):

javascript:alert(document.cookie);

CSS guru Eric Meyer’s Color Blender tool takes two colors and a number of midpoints and returns all the shades in between. I used the Color Blender to calculate the blues in this site’s design. Neat, helpful Javascript widget for the color-dumb.

Tim Taylor’s drag and drop sortable lists with Javascript and CSS could be a useful dynamic control on a web page. I use it in the not-yet released Scribblish for authors to reorder custom fields on the article edit page. It would also work well to reorder photos in a gallery app. Here’s a few examples of the drag and drop lists in action.