Assembling the web designer’s toolkit

Web designers need a lot of tools at their disposal. Mostly this comes in the form of commercial software. If you don’t own the full Adobe Creative Suite, you at least have Photoshop (or, if you’re a FOSS contrarian, GIMP). If you’re on a Mac, you probably have BBEdit (or its free sibling, TextWrangler) installed, and if you’re on Windows… well… I don’t know. Does anyone who takes themselves seriously as a designer use Windows? I’m sure we’ll hear from them in the comment section.

But what I’m talking about here is not the commercial software applications you have installed on your desktop. I’m talking about the free libraries you probably need these days to get a “Web 2.0” site up and running.

I’ve been finding myself lately starting each new project by cobbling together the same set of these libraries, so this morning I decided to save myself some time on my next project by putting together a template set with all of them in place. Once I’ve had time to review all of the requisite licenses, I may post the complete package in a zip file here, but for now, here are some pointers to get you started.

jQuery

Where better to start than with this easy-to-use, infinitely extensible JavaScript library? I can’t imagine working without jQuery anymore. It makes just about everything JavaScript-related several orders of magnitude easier to work with. And then of course there are a handful of plug-ins I like to bring along for the ride: color, dimensions, em, hoverIntent, lightbox, mousewheel and jScrollPane. (Actually, several of those are required just for jScrollPane, a complex and tricky-to-implement plugin, but if you need custom scrollbars, it’s worth it.)

Lightbox for jQuery

I especially want to call attention to Lightbox for jQuery, based on the original Lightbox for Scriptaculous (see below). It’s a great way to add some nice polish to your site. Whenever a user clicks on a thumbnail to see a larger version of an image, you no longer need to subject them to an ugly and confusing plain browser window with the image in the upper left corner, or trigger a new pop-up window to appear. Lightbox uses CSS and JavaScript to elegantly apply a translucent mask over the existing page and present the image in a centered layer hovering over the rest of the page, in the same browser window. Slick!

Scriptaculous

On the other side of the JavaScript library fence, we have Scriptaculous, built upon prototype.js. It’s not quite as slick or as powerful as jQuery, but it handles AJAX without additional plugins. Honestly, I haven’t tried much AJAX with jQuery, but since CakePHP‘s built-in AJAX helper relies on Scriptaculous, I’ll probably still have a place for it, for a while. The snag is that jQuery and Scriptaculous, with their default settings, don’t play nicely; they both want to use the $ variable for themselves. But jQuery’s noConflict() method makes it easy to get these two powerhouse libraries to get along.

IE7.js

This is my least favorite of the tools described here, for two reasons: 1) it’s essentially just a patch for Internet Explorer without adding any new functionality for general use, and 2) it reminds me that Internet Explorer exists.

That said, it’s indispensable. The issue here is simple: IE6 doesn’t support a lot of “modern” features that other browsers do, and that are becoming increasingly essential to how the Web works, but unfortunately, IE6 is still one of the two most-used browsers in the world (the other being IE7). Firefox is growing rapidly in popularity; Safari is ubiquitous among Mac users; and the Web is increasingly experienced via mobile devices, but for now, IE is still king of the hill, and a large percentage of IE users can’t, won’t, or don’t even realize they can upgrade beyond version 6.

IE6 can be taught new tricks, however, and that’s the purpose of IE7.js. It’s a JavaScript library that “teaches” IE6 to behave more like IE7, fixing some common and infuriating CSS bugs, adding support for alpha channel transparency in PNG images, and various other “magic” that pretty much all just takes place seamlessly, behind the scenes. Just call this library and let it do its stuff.

SWFObject

If you’re using Flash at all, it’s helpful to bring along SWFObject, another JavaScript library whose sole function is to relieve the attendant headaches of working with <object> and <embed> tags and the suckitude of Internet Explorer browser inconsistencies.

sIFR

In the past, whenever web designers needed text to appear in custom fonts (that is, any fonts that are not already installed on the user’s computer), there was only one option: make an image out of it. Maintenance nightmare. Enter sIFR, a JavaScript-and-Flash-based solution. You’ll still need a copy of Adobe Flash (the full application, not the browser plug-in) to make it work, but the end result is your font encapsulated in a SWF file, and some very clean JavaScript that seamlessly swaps your custom font in place of regular, plain vanilla HTML, and degrades gracefully to a standard font if the user is lacking either JavaScript or the Flash plug-in. And it’s fully semantic and validating.

The only downside of sIFR is that finding the latest version is a bit of a mess. But here’s a good place to start.

TinyMCE

And finally we come to TinyMCE. At last we have a decent solution to the dilemma of allowing users who probably don’t know HTML to enter styled content on your site. It’s not without problems, especially where pasting from Microsoft Word is involved, but TinyMCE is a great WYSIWYG solution, a word processor in a browser window.

Unless you’re a web geek, you probably don’t know what this means…

whitehouse.gov…but it’s a good thing.

From kottke.org: The country’s new robots.txt file.

Well, it’s probably easy to read too much into this. But the short story of it is that President Obama’s new whitehouse.gov website is blocking a lot less content from search engine “spiders” than that of Ex-President Bush (oh, that has a sweet ring to it).

Now there are plenty of reasons for putting things into your robots.txt file, and most of them have nothing to do with trying to withhold information from the public.

It’s rather odd, though, the set of directories Bush’s site was blocking from the spiders. I find expectmore and help especially amusing. The others aren’t quite so funny. What exactly about omb (Office of Management and Budget) did they need to hide? And… uh… well… 911 kind of goes without saying.

Why block these pages from being indexed by search engines? Good question. And here, I think, is the answer: to make it harder for the average citizen to keep track of changes that have been made to those pages by accessing Google’s cached versions (or, perhaps even more damning, the indefinitely-archived snapshots on the Wayback Machine).

But, it’s a new day. President Obama has promised a much more open and transparent White House, and if the visible underbelly of its website is any indication, he intends to keep his promise.

Also of interest: Here’s a comparison of the old and new whitehouse.gov sites.

Yes he is. (Well, almost.)

President Barack ObamaIn just 3 short hours, as I write this, Barack Obama will be sworn in as 44th President of the United States of America, ushering in a new era in more ways than I can describe. I’ll be watching the proceedings on MSNBC.

No president in recent memory has entered office with such a high approval rating (83%), but no president ever has entered office with as many hopes and expectations riding on his shoulders. He’s uniquely qualified to be the man in this time, in this place, however, and if anyone can do it, he can.

We can.

It’s going to be an interesting four years…

The Birds re-enacted in a Rochester, MN park

Last night while walking to 300 First in Rochester for dinner, SLP and I were greeted by a disturbing, nay, terrifying sight and sound. Hundreds, nay, thousands of crows, all converging to roost in the tops of the trees of Central Park, home of the mysterious Heritage House.

We asked our server about the crows and she informed us that they arrive every night around 5 or 6 PM. We’re not sure if it’s more scary to think they do this every night, or if we were witnessing (and perhaps somehow implicated in) a one-time occurrence. Or maybe it’s just lame that we were going out to dinner at 5 PM. But we have kids so, enough said.

I managed to snap the following photo of the birds in action, though it fails to convey their staggering numbers or the freight train volume of the cacophony they were producing. But what’s even creepier is that when we left the restaurant around 7 PM, there were dozens, if not hundreds, of these birds perched on the upper branches of every tree in the park… and they were totally silent. Paging Tippi Hedren…

Crows in Central Park, Rochester, MN

Marble Madness… uh… madness

This one’s making the rounds… Daring Fireball and Cabel Sasser at the very least, but it bears sharing.

I’ve had this game on both the PC and the NES, and I’ve tried it in MAME. It’s way cool… way ahead of its time… and way crazy-hard. But I loved it, even though I was never any good at it.

I’ve never actually had the opportunity to play it the way it was meant to be played — with a trackball in an arcade cabinet. But I have a feeling that even if I did it would require years of practice for me to play it this well: