Tyler Sticka

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);
alert(shortURL);
// 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, base_encode, base_decode and a few helper functions ready and raring to go? You’re one lucky son of a gun:

Download flickr-shorturl.js 1.0

Introducing the Ice Cream Social Icon Pack

This week’s web site redesign came with a set of custom-tailored social networking icons for easy sharing of articles and portfolio items. Inspired by Rogie King’s excellent social media network icon pack, I wondered if I, too, should unleash these little sixteen-pixel lovelies into the web design wilderness. With encouragement from Peter Wooley, Jim Gray and Vin Thomas, I’m doing just that!

The Ice Cream Social Icon Pack is a set of twenty 16 square pixel PNGs representing your favorite social networks, including Delicious, Digg, Facebook, Flickr, Google, Lala, Last.fm, LinkedIn, MySpace, NewsVine, Reddit, Stumble Upon, Technorati, Twitter, Vimeo, Virb and YouTube. Generic icons for feeds and email are also included.

Update: Ice Cream Social Icon Pack 1.1 is now available with even more icons.

Portwiture Develops

The 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.

Introducing Portwiture: Your Twitter status, in photos

Twitter (a mass-messaging service) and Flickr (a photo-sharing community) are both stunning examples of audience-powered communication. One thing they both have in common: open APIs.

I hadn’t experimented yet with either interface, so I thought to myself: “Why not try both at once?”

The result is Portwiture, a little jQuery-powered web app that finds and displays Flickr photos based on the most common words in your last twenty tweets.

Typically I start my projects with a problem to solve. Portwiture is the product of a more artistic temperament, created out of the simple desire to see what would happen.

So go see what happens, and let me know what should happen next on the UserVoice forum or in the comments. Dig it!

CyborgCamp’s transparent design process

I averted my gaze from the composition adorning the Adobe Illustrator artboard in front of me, purposely avoiding the brunt of its stare and the intense starkness that came with it. I attempted to focus again on the chicken scratches dotting my sketchbook pages (to no avail), or perhaps the multitudes of contradictory feedback which had been offered by disagreeing (yet evenly passionate) volunteers.

The embrace of crowd-sourced editorial direction is of unpredictable comfort and temperature.

To say that designing the logo for CyborgCamp was a unique challenge would be an understatement. Identity design is typically an intimate process (wherein the logo is a relatively small part) in which the designer attempts to know and express both the character of the brand and the needs of the audience. Educating oneself about those needs is often collaborative, but the actual act of design, of applying that knowledge, is quite introspective by comparison.

But then, CyborgCamp was not an ordinary event. Concocted by Amber Case, Bram Pitoyo and their cadre of evil geniuses, CyborgCamp managed to exude purpose in spite of its organic growth and direction, amorphous in scope. This appealed to my artistic sensibilities, and I quickly realized that a transparent design process would be the sincerest approach. Previously, I would have predicted that prolonged transparency would lessen the final product’s impact. Since this hadn’t occured for the event itself, I discarded that concern.

After an initial meeting/sketchbook-jam with Amber, Bram and others (gorgeously captured on film by Mark Colman, one of the coolest guys in Portland), the first round of sketches was posted on Flickr, the CyborgCamp planning wiki and several Twitter feeds. I should give Bram credit for picking the concept (plant circuitry) that would ultimately be deemed the most sensible, and from there the entire world was privy to each and every obsessive adjustment.

I’m proud of the final product; I think it suited the grassroots-meets-geekery mindset of what became an awesome event. I certainly made mistakes along the way, but these experiences led to a series of simple, guiding principals that may help other designers interested in attempting a similar process:

• Be a director and mediator before a designer. Otherwise, you’ll slip into tweaking endless minutae in lieu of a guiding vision.
• When possible, give a few variations of a design at once. “Civilians” and non-designerly folk shouldn’t have to learn your industry’s vocabulary; comparitive observations are much more intuitive.
• Ask relevant questions of specific people. Bram Pitoyo has a strong typographic skill set; why not ask him for extended assistance in type selection and kerning?
• When no conclusive “next step” is provided from the community, take responsibility for that decision. These are volunteers who, unlike your clients, do not have an obligation to nudge you along. Avoid work stoppage and ignite the conversation by moving a step forward or back as you deem necessary.

It’s hard to say if I would recommend this process to other designers. In early stages, the feedback of enthusiastic Twitterers is nearly immediate and immensely satisfying. Later on, things can slow to a crawl as community members struggle to find passion for every minute detail.

Overall, transparency is a worthy option for projects as unique as CyborgCamp. For more traditional identities? Probably not. That being said, lessons learned in this experience can certainly be applied to more focused, narrowly-collaborative endeavors. In that, this experiment was monumentally successful.