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

How WordPress 3.0 will rock your portfolio

I couldn’t be happier that my WordCamp Portland 2009 presentation, WordPress-Powered Portfolios, will likely have the shortest shelf life of any presentation I’ve given. It’s a testament to the WordPress team (and open source projects in general) that the “hacks” I proposed only months ago have already blossomed into honest-to-goodness features.

In December, WordPress 2.9 introduced support for post thumbnails, eliminating the need for my custom meta hack. WordPress 3.0 (which should be released around May) will solve the problem of secluding portfolio content from your blog with the introduction of custom post types.

Instead of corralling your portfolio content with tools like “category excluders” or relying solely on nested pages (as I suggested), you’ll soon be able to create a custom “portfolio” post type in a supported and predictable fashion.

As Frank Bültge details on the WP Engineer blog, adding a whole new section to your WordPress sidebar will be a straightforward and extremely flexible process you can bake right into your theme. No crazy plugins or hackery required!

This change is exciting not only for the impact it will have on  sites like my own, but because it increases WordPress’ prospects as a hardy CMS solution.

All that’s left to render my presentation completely obsolete is a more robust and customizable gallery solution. I’ll be crossing my fingers.

Some Welcome Variation In Our Increasingly Mobile World

The iPhone may be my favorite device of the last ten years. No other gizmo since the PC has so fundamentally altered the way I interact with the web and my social circle.

But the iPhone’s ubiquity in the mobile space scares the living daylights out of me.

It frightens me the same way I’m frightened by the deceptive feeling of serenity that blankets me as I continue to surrender more and more of my data to Google (current buddy, future megalomaniac). The thought leaders at Apple have crafted an experience so warm and fuzzy it’s nearly impossible to escape its allure, even as it wallops all of its competitors.

I simultaneously sing the praises of the Semantic Web (often at the expense of rich media plugins such as Flash and Silverlight) while gleefully supporting dozens of apps delivered via the iPhone’s closed, draconian marketplace. The irony (hypocrisy?) therein is not lost on me.

It seems pretentious to avoid these products solely on insular, geeky principal, so I continue to champion competitors in hopes that a superior device will emerge or, at the very least, keep Apple under enough pressure and scrutiny to maintain their innovation and avoid sinking into mediocrity (remember?).

I had extremely high hopes for Palm’s WebOS, but a still-floundering app ecosystem coupled with some truly strange hardware choices appear to have sabotaged its chances. While I have much more confidence in the Android OS as a powerful and capable mobile device standard (especially in the long-term), the platform seems troubled by a lack-of-consistency between devices and the same snore-inducing, incremental release cycle that eventually tempered my excitement for ambitious open source projects like Ubuntu.

It could just be my ignorance of the platform, but as the iPhone becomes increasingly capable at performing business tasks I begin to look upon Blackberry users as I did AOL users ten years ago—with a feeling of solicitude generally reserved for endangered species.

What we need is a platform with a distinctive and decidedly un-iPhone-like user experience (an iPhone killer killer), produced by a company with experience facilitating ecosystems yet still capable of supporting a wide range of hardware and service providers.

Did you just say Windows?

That’s right, Microsoft showed off Windows Phone 7 Series this week, and it looks great. The minds responsible for the well-reviewed Zune HD have re-designed the mobile operating system from scratch. Designers like myself who admire the HD’s interface are thrilled, but considering the Zune’s marketshare could be very generously described as having a “lack of ubiquity,” it’s a brave (and admirable) move to hand them the keys to Microsoft’s mobile future.

Instead of forcing the user into disparate applications specific to function (iPhone) or allowing the user to multi-task until their poor little phone grinds to a halt (Android), Windows 7 Phones establish contextual hubs of interest. If you want to see what your cousin has been up to this week, you don’t have to check email, Facebook, Twitter and chat in separate apps; simply tap “People,” then select your cousin’s profile. This style of traversing your media and social circle is extremely thoughtful and appears to be well-executed. I know it won’t please everyone, but I’m certain a percentage of the population will instantly prefer it.

The interface itself looks completely unique, at least if you’ve never used a Zune. Subtleties like highlights, shadows, soft corners and texture are completely absent, allowing only color, typography and your content to show through. While occasionally abrasive (especially in the calendar application), it’s a striking choice that’s extremely memorable and looks beautiful in motion.

It isn’t all sunshine and rainbows, though. The browser is still Internet Explorer, albeit the improved (but sluggish) version found in the Zune HD. Until Mobile IE supports the same sort of HTML5 features that have enabled web app developers to deliver rich mobile experiences to the iPhone and Android devices, Windows Phones will still be an obstacle in the evolution of the mobile web. Perhaps most depressingly, hardware actually supporting this OS probably won’t debut until Christmas, and who knows what may have changed by then.

Aside from the platform itself, what excites me most about this announcement is that another Apple competitor has finally shown they’re awake. Watching Apple merrily stomp ahead with Android slowly gaining ground and Palm off in the distance is becoming tiresome.

But an Apple/Google/Microsoft/Palm slugfest? I’d pay to see that.

Fragments: Great Comics For a Great Cause

Fragments is a unique comic book anthology that donates its proceeds to those in need, but not without your help.

We’re now accepting submissions for comics and artwork to be featured in the first volume, benefiting the victims of the catastrophic earthquake in Haiti. If you’re an artist, please consider contributing. If you know an artist, please direct their attention to this project.

With our combined creativity, we can make this an amazing book that actually saves lives.

For more information, please visit the project’s web site or follow @FragmentsComic on Twitter.

Spider-Man Drawings

My favorite superhero is, without question, Batman. His is the simplest premise with the richest psychological results.

But just as certainly, my favorite to draw is Spider-Man.

When I was a very young comics fan, I was drawn to John Romita’s flawless brushwork. But as I grew older, I became increasingly enamored with Steve Ditko’s Spidey. It felt quirky, jittery, jerky. The opposite of graceful. In a world of sweeping capes, bold shapes and dynamic lines, Ditko’s Spider-Man (and to some extent, Peter Parker) was hopelessly broken and askew.

I would guess at least half of American cartoonists go through a phase of romanticizing superhero comics, and I was no different. I never thought I was very good at drawing superheroes, mind you, but they were really fun.

I recently stumbled upon some Spider-Man drawings I did as a freshman in college. It looks like I was reading a lot of comics by Sam Kieth and Humberto Ramos. I was obviously avoiding the “hassle” of rendering settings or backgrounds (something many young artists struggle with). But these drawings make me smile in spite of their flaws because I had so much fun making them.

And my Spider-Man is definitely quirky, jittery, jerky.

The iPad Is Not Revolutionary

Near the end of yesterday’s unveiling of the iPad (that’s really the name, cue middle school jokes), Steve Jobs presented this slide (Gizmodo):

While I cannot weigh in on the magical properties of the iPad until it flies from Hogwarts on its broomstick into the hands of perspirating Apple fanboys the world over (narrowly missing its chance at catching the Golden Snitch), I believe we have enough information to contest how revolutionary it actually is.

Princeton’s WordNet defines revolutionary as “markedly new or introducing radical change.” How so?

The device uses an improved version of the iPhone OS, and its apps are written using the same SDK. Applications are accessed via a paginated grid of icons (as on the iPhone). Like the iPhone, only one application may run at a time with occasional, Apple-sanctioned exceptions (such as iTunes playback).

It connects to the web via WiFi or, if you pay for a premium model and a monthly subscription, a 3G connection (just like the iPhone or Kindle, minus the subscription fee in the latter case).

The hardware is essentially a cross between a first-generation iPhone and the top half of a unibody MacBook. The screen is capacitive multitouch, with an onscreen keyboard larger than that of the iPhone or Windows 7. The display size is 10 inches (about the size of an average netbook). The display resolution is 1024 by 768 pixels, the same as Lenovo’s Thinkpad X61 Tablet (released in 2007). It is roughly the same thickness as the MacBook Air.

The iPad introduces an iBooks store that sells basically the same catalog as Amazon and Barnes & Noble offer for their respective e-readers, though slightly more expensive. The books are downloaded in ePub format, the standard for most reading devices with the exception of the Kindle.

The cheapest iPad model starts at $499, a few hundred dollars more expensive than a typical netbook. The most capable model is priced at $829, a couple hundred dollars more than a multitouch laptop.

What’s “markedly new?”

I anticipate many will respond “the product category,” but that’s a flimsy explanation at best. The iPad is basically a giant iPod Touch with optional 3G, no phone service, no camera and no additional storage. Apple continually questions the legitimacy of the netbook category, but they’re in a glass house on this one. If “giant iPod Touch with optional 3G” is a product category, then so is “cheap, tiny laptop” (also with optional 3G).

Even newly-introduced features like iBooks barely surpass the competition, largely through the use of superfluous interface niceties like page turns and three-dimensional bookshelves.

In nearly every respect, the iPad is a strictly evolutionary product. Cool-looking, probably fun to use, but not revolutionary in any sense.

What could have been

Like many, I had high hopes for the iPad. I was enamored with the possibility of the additional screen real estate coupled with multitouch and a 3G connection.

I thought for sure that iBooks would include support for periodicals. As nice as the iPad’s screen looks, what a waste for it to render page after page of black-and-white text! I want to flip through WIRED or Communication Arts on this thing. Steve Jobs is Disney’s largest shareholder, which just bought Marvel Comics for crying out loud! Support for the magazines and comics I love without having to wastefully plop them into the recycle bin each month would have made this a no-question purchase for me.

Video on the iPhone is impractical due to a dearth of storage space, with tiny screens banishing playback to the realm of mere novelty. The iPad has a gorgeous screen, but no additional storage and no subscription-based service or even Hulu/Netflix integration to circumvent it. In foregoing these possibilities, Apple may have inadvertently allowed a natural successor to the Apple TV pass them by.

I’m not shocked that they didn’t include a front-facing camera for video conferencing via iChat or Skype, but the exclusion of any camera at all is quite baffling.

iPossibility

While the iPhone innovated both as a device and as a platform, iPad’s future seems wholly staked in the latter. As mentioned earlier, it shares an operating system with the iPhone, and for good reason. As much as I love my tablet PC, traditional desktop paradigms do not translate gracefully to a touch interface. Apple wisely decided to force developers to create touch-friendly interfaces through a familiar SDK rather than offer clunky support for more open OS X applications. The unfortunate side effect of this is that the iPad’s usefulness is reliant on developers and the App Store approval process.

An iPad version of the Adobe Creative Suite would be a killer app for artists and designers, but creating a device-centric version of necessary scope would require a daunting amount of time and money to develop for a market largely dominated by 99-cent applications. This makes the future of these platform-specific productivity apps uncertain at best.

This doesn’t mean the iPad isn’t right for anyone. If you were planning on buying a netbook in addition to an e-reader and a 3G card for your laptop, the iPad is a usable and comparatively affordable convergence of all three. If you find desktop computers scary but enter a calm, trance-like state while using your iPhone, you might avoid a Mac or PC in favor of one of these puppies.

Otherwise, my verdict is to hold off. In a year or two we’ll likely see more revisions of the device, and developers will have either breathed life into the platform or let it die on the vine. Personally, I’m hoping for the former.

HTML5 and CSS3 for the sake of tomfoolery

One of the biggest disappointments I continually encounter when teaching web design is losing students to rich media plugins, most commonly Flash. These closed, proprietary sirens singing talented designers and developers out to sea rob the Semantic Web of some truly creative minds.

Students often look at the Web and see a minefield of limitations. Several times I’ve approached students with stellar HTML/CSS/JavaScript-based work to ask about their career plans, only to hear “I’d rather pursue Flash work.” No matter how many times I offer tomorrow, many students are only interested in now.

I evangelize the Semantic Web clearly and passionately in my lectures, but arguments of principal, search engine optimization and accessibility often flounder in view of visually-engaging, rich web media. There is a fine line between designer and artist; in order to appeal to these minds, we must impress them on a more visceral level.

Given time, I think HTML5 and CSS3 are up to the task. My arsenal of compelling examples has been growing exponentially.

Mouse over the DVD cases when viewing For A Beautiful Web in Safari 4 and you’ll encounter some gorgeous and purposeful rotation-based animation that degrades gracefully for less-abled browsers.

In Mac OS X Snow Leopard, Guillermo Esteves has recreated the Star Wars Episode IV marquee for Webkit users (perspective and all).

Firefox 3.6 introduces support for the File API, making drag-and-drop file selection possible (thereby trumping Flash’s previously-superior selection capability).

Webkit users who opt-in to bleeding edge features can now experience YouTube and Vimeo sans Flash players using only HTML5’s built-in media support. The result is stunningly indistinguishable from Flash video playback.

These examples may appear to be small victories, but their importance cannot be overstated. We are watching the capabilities of HTML and CSS progress more rapidly (and with farther-reaching effect) than their rich media cousins. In a Web where the capabilities of Flash and HTML are roughly equivalent (or perhaps even lopsided), the choice will be abundantly clear.

Address all audiences via the Semantic Web, or keep playing in your sandbox. Which sounds more fulfilling to you?

Designing for the Greater Good, a new book showcasing the best in cause-related design

In just a few short days, Collins Design (an imprint of HarperCollins Publishers) will release Designing for the Great Good, a new book celebrating the best in marketing and design for nonprofit and organizations (incidentally the first of its kind).

I’m extremely pleased to be included in the publication. The logo I created for the Vancouver-based music and dance organization Luceo is featured therein. Luceo taught me to play an A, B and G on my guitar before I moved back to Oregon, so seeing their logo in print is extra special for me.

From the publisher’s press release:

Created as a comprehensive resource for designers, creative professionals, marketers, corporate communications departments and nonprofit leaders, Designing for the Greater Good is based on authors Peleg Top and Jonathan Cleveland’s nearly 40 years of combined experience working with nonprofits and corporate communications departments across the country.

“After nearly a decade of studying cause marketing campaigns, I know that strong design is absolutely critical to success,” commented David Hessekiel, president, Cause Marketing Forum. “As a unique showcase of campaigns that stand out from the crowd, Designing for the Greater Good is a valuable addition to the cause marketing literature. This collection of work, often created in spite of low budgets and organizational impediments, should be an inspiration to creatives, nonprofit and corporate marketers alike.”

The official release date is January 26th, but you can pre-order the book now from Amazon, Barnes & Noble and Borders. I’d want a copy for my shelf even if I wasn’t in it!

Update (January 28): I received my copy today, and it looks amazing! The cover has a beautiful metallic finish to the type that has to be seen to be appreciated.

I’m very glad that my name is spelled correctly and even happier at how nice the logo looks (on page 227 if you’re curious). I am a bit puzzled as to why they listed my city as Newberg, Oregon. I’m sure Newberg is lovely, but seeing as I’ve never been there, my association with the town is grossly inaccurate.

Abolishing “Click Here” on Thinkers & Doers

Most of you know that I’ve been a Senior Experience Designer at Waggener Edstrom since August, and today I began writing for their recently-redesigned Thinkers & Doers blog.

My debut entry declares with gusto that It’s Time to Abolish “Click Here to…”. It should interest anyone who creates content for the web.

This is not a shift away from my journal here at good ol’ Me Dot Com, but merely a chance to speak to a subtly different audience. If anything, it’s re-invigorated my passion for writing in general.

I encourage you to read the post and, if you dig it, let me know.

Oh, and stop writing “click here.” Sound good?