Entries tagged “portwiture.”

Generating Flickr Short URLs with JavaScript

As of this past Saturday, users who click a “tweet this” link on an individual photo in Portwiture may notice a few extra characters available. By popular request, the app now takes advantage of Flickr’s URL shortening.

What’s unique about flic.kr URLs is that they are not directly tied to a database or fetch-able via the API, but derived from a photo’s unique ID using a variation of base58 compression. This is actually pretty neat, as it sidesteps the need for an additional database query, resulting in a faster experience for the end user.

The only problem is that you, the developer, have to do the work to generate the darn thing. If you need to create it on the fly using JavaScript (as Portwiture does), you may be disappointed by the relative lack of JS code snippets in the official base58 flic.kr dev discussion.

Fear not! Using their PHP example, translating this functionality to JavaScript is a straightforward process.

The only function used therein with no direct JavaScript equivalent is intval. Luckily, the amazing php.js project has us covered with a translation. Grab that function and include it in your source.

Now we simply rewrite the base_encode function, swapping out strlen for .length, [] for .charAt(), and so on.

function base_encode(num, alphabet) {
    // http://tylersticka.com/
    // Based on the Flickr PHP snippet:
    // http://www.flickr.com/groups/api/discuss/72157616713786392/
    alphabet = alphabet || '123456789abcdefghijkmnopqrstuvwxyzABCDEFGHJKLMNPQRSTUVWXYZ';
    var base_count = alphabet.length;
    var encoded = '';
    while (num >= base_count) {
        var div = num/base_count;
        var mod = (num-(base_count*intval(div)));
        encoded = alphabet.charAt(mod) + encoded;
        num = intval(div);
    if (num) encoded = alphabet.charAt(num) + encoded;
    return encoded;

Note that the default alphabet differs slightly from honest-to-goodness base58 encoding, omitting certain characters that are confusing in URLs (0 and O, I and l, etc.).

Assuming you’ve already fetched a Flickr photo ID, generating a short URL is now as simple as this:

var shortURL = 'http://flic.kr/p/' + base_encode(4379822687);
// Should alert 'http://flic.kr/p/7F2JGg'

That’s all there is to it. Reversing the process is a bit trickier (you need to fetch the author’s name), but this Flickr discussion should get you started.

Want a JavaScript file with intval, baseencode, basedecode and a few helper functions ready and raring to go? You’re one lucky son of a gun:

Download flickr-shorturl.js 1.0

Find where your Twitter friends blog with TweetPlus

In a matter not entirely unlike Isaac Newton’s obsession fascination with alchemy, I find it difficult to stop making mashups. I’m fascinated by the wealth of publicly-accessible information we have at our fingertips, and my gut tells me greater understanding may be earned should I discover the right combination. Like my Twitter/Flickr mashup Portwiture before it, this latest experiment was born out of both this desire and a healthy sense of play.

TweetPlusTweetPlus uses the Twitter and Google AJAX Feed APIs to find where your friends are blogging. Simply enter your (or any user’s) Twitter username and TweetPlus will find their friends, ask Google where they blog and show you the results. If you enjoy what your friends are saying in your Twitter feed, you may just discover a wealth of wonderful content that exists beyond the limits of 140 characters.

I’m certainly not oblivious to the potential criticisms of this application; one might call it a “Twitter inflater.” But unlike Portwiture, it is not without obvious utility; I’m happy to have found at least a dozen new blogs I continue to enjoy thanks to the service.

Take a look yourself, and be sure to let me know what you think in the comments. You may just find your new favorite blog!

WebVisions Epilogue (Slides, comics and more!)

Thanks to everyone who attended the Graphic Storytelling in New Media session at this week’s WebVisions conference. I couldn’t have asked for a better audience, both in the presentation’s reception and the thought-provoking Q&A that followed.

Attendees requested that I post the session’s slides with links to the comics I talked about. You deserve no less!

The Presentation

My slides are very visual, with nary a bullet point in sight. I’ve been told the session was recorded and will be available as a podcast; until then, these might be confusing out of context. I’ll update this post with a link to the audio when it becomes available.


Here are the best links I could find for the comics I mentioned, in order of appearance.

Warning: Many of these titles are not recommended for younger readers. Explore at your own risk!

Man, that’s a lot of comics! You can find my webcomics work in the extras section of this site.  Stan the Cat Goes Nuts!, Blip, Plod and Future Tale explore some of the infinite canvas techniques we discussed.

If you’re looking for comics in Portland, I would highly recommend the stores Floating World and Excalibur.

Other Stuff

I had a blast being interviewed on Strange Love Live. Cami, Kelly and Dr. Normal were all incredibly nice, and the tone was very relaxed and conversational. Allegedly, my interview exists somewhere in one of the two videos featured here, but my scrubbing did not reveal it. If you manage to unearth it, please post the timestamp in the comments!

Portwiture did not win the Mashup or Peoples’ Choice WebVisionary Awards. Luckily, we lost to a very capable adversary: the wonderful Twitter emotionscape-mapping Twendz. Congratulations to Waggener Edstrom for the double win!

img_0179The evening was not without it’s victories. Mallory and I had the chance to hang with Bram Pitoyo, Jason Grigsby, Amber Case and Matt Allen, which is always a good time. But perhaps most geektastic for me was finally getting to meet Dave Allen!

Dave’s an undeniably cool guy. He’s responsible for the excellent music and MP3 site Pampelmoose and the Director of Insights & Media at the always-impressive Nemo Design. But most importantly to me, Dave helped craft some of my favorite rock albums as the bass player for the seminal post-punk band Gang of Four. His thumping, primal sound is mimicked constantly by contemporary bands; it was thrilling to meet the man behind it, as evidenced by my goofy grin in the photo!

Your turn!

Did you attend the presentation? Jill Bruhn said it was her favorite part of WebVisions. Julie Cabinaw thought I was passionate, but wasn’t sure what to take from it. What’d you think? Better yet, what comics, film, music, art or web sites have moved you? Sound off in the comments!

Portwiture is up for a WebVisionary award

wva09I’m pleased to announce that my Twitter/Flickr visualization app Portwiture is a WebVisionary Awards finalist in the “Mashup” category!

I hope you’ll join me at the Baghdad Theater on Thursday, May 21st at 7:00pm for the free event. There’s even more to experience than Portwiture on the silver screen:

From virals and mashups to web apps and advertising, the Webvisionary Awards recognizes outstanding achievement in website design.

The event features videos and PowerPoint Karaoke, without long winded acceptance speeches. It’s an evening of fun with the big names in digital media, including host Ian Karmel (of The Groundlings improv group) and DJ Dave Allen (of Gang of Four). This is a free event that is open to the public (no minors).

The awards are judged each year by a cadre of visionary designers, technologists, strategists and other industry experts. Judges for 2009 include Lynne d Johnson, Jeffrey Veen, Molly Holzschlag, Brad Johnson, Indi Young, Roger Black and David Verba.

Visit Upcoming for more info and to RSVP for the event. If you’re also attending WebVisions, don’t forget to catch my presentation Graphic Storytelling in New Media at 2:45pm that same afternoon. I chatted with Stephanie Wagner about the presentation and Portwiture earlier this week on Blog Talk Radio.

Last year, my Flash physics game Ramps took home the WebVisionary Award for “Best Game.” Will my robot trophy learn to self-replicate this Thursday? Only one way to find out!

Portwiture Develops

portwiture_mascotThe latest iteration of Portwiture debuted last evening with shiny new features, including a slideshow view, query settings, RSS feeds, more linkable URLs and a little more design polish.

For the uninitiated, Portwiture grabs photography from Flickr that matches the content of your most recent Twitter updates. The result is a serendipitous visual representation of your Twitter profile.

The previous version was crowned Mashup of the Day for February 25. I’m extremely happy to see this much interest in such a spontaneous visual experiment, and I thank everyone who has given it a whirl so far. I must also extend a special thanks to Erik Jung, Matt Lohkamp and Peter Wooley for their assistance.

You can keep up with the occasional bit of Portwiture info on Twitter.