Better living through bookmarklets; or, one-click switch between UW dev and production servers

Posted on Jun 16, 2010 in IT, Web Dev | 3 comments

The University of Washington’s primary web site lives at http://www.washington.edu and campus web developers often find ourselves jumping between it and the development version of the same site at https://wwwudev.cac.washington.edu. Separating production and development web servers is very common (and useful!), but it necessitates moving functional, tested pages from development (or just “dev”) to production—I think of it as “graduating” the code.

Some back-and-forth

As I develop new tools for student use, I constantly need to switch between dev and production versions of a page I’m poking around in. No big deal, right? Well, not really: just select the browser’s address bar, click or arrow-key over to the “www” and append “udev.cac” and hit return. Luckily, the development server knows to switch over to the secure (https) protocol, so that saves the hassle of entering that additional “s.” But it must be deleted when going the other direction (dev to production) to avoid security messages in IE on many pages. Just a scant couple of seconds if you’re using keyboard commands and have a little practice at it. But still… that time and hassle adds up.

“Just keep two browser windows open!” I hear some readers shout. Yeah, that works. But if you’re like me you’ve got multiple windows each with multiple tabs, so it can be tricky to keep locations straight. And keyboard commands to switch among browser tabs can vary between browsers and platforms, which is a stumbling block, however slight, for the finger muscle-memory that triggers the keyboard command.

There’s got to be a better way, right?

Of course there is! It’s this custom bookmarklet, written specifically for UW developers:

www2udev

Usage

1. Drag the link above (it’s the text titled “www2udev” but if you need this tool you certainly already knew that) to your browser’s bookmark bar.
2. Click the newly-added bookmarklet while viewing a UW page on the www cluster.
3. That’s it! You’re now viewing the opposite version of the page you were on. (In other words, if you were viewing a production page, you’ll see the dev version and vice-versa).

• Pro Tip: Safari has built-in keyboard commands to access bookmarks in the bookmark bar. So drag www2udev to one of the first nine positions on your bar and you can access it quickly. I’ve got mine in the first position, so I can switch between dev and production simply by pressing Cmd+1 on my Mac (and Ctrl+1 on my PC at work).

Some details

If you’re curious, the bookmarklet is written in regular javascript, though it could also have been done in jQuery. (The simplicity of this project didn’t justify loading that excellent framework.) I minified the code using JScompress.com to keep things as small and quick as possible, but that was more out of good coding habits than any real need; the script is only about 10 simple lines of string comparison and manipulation. The idea came from an article on the wonderful Smashing Magazine titled Make Your Own Bookmarklets With jQuery by Tommy Saylor.

I’d love to hear any feedback on this little tool, so let me know in the comments.

Related: If you liked this, check out:

1. Night of the Living Dead (kids) Kids, I know, are desensitized to violence thanks to the...
2. Kotekitae, or better living through bruising Martial arts, as I have written about, isn't about being...
3. Why no flags, OWA? First off: OWA is Outlook Web Access, the web-based version...
4. Mock-up to valid XHTML: how to build a web page – part 1 What an auspicious title! I recently had an opportunity to...
5. What color is your body? You’re sporting a killer hat. Wearing the best pants you...