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.

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?

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?

Ring in the new year with a little PHP

I think this has happened to every web developer at one point or another: You complete and launch a site, revel in it’s glory, January 1st passes you by and suddenly, embarrassingly, the site proudly proclaims the previous year in the footer!

Ack! How’d you miss that? So unprofessional.

Many of you have probably used the following solution to combat this troublesome oversight:

<?php echo date('Y'); ?>

In PHP, this displays the current year. But what if you want to intelligently display a span of time, regardless if your project launched this year or five years ago?

Here’s a fun little function my good friend (and ace developer) Peter Wooley showed me some time ago:

function copyrightYear($start,$between='-',$echo=true) {
	$current = date('Y');
	$result = $current > $start ? $start.$between.$current : $start;
	if ($echo) echo $result;
	return $result;
}

The first attribute ($start) is the launch date of your site, the first year of the date span. $between is what goes between the start and end year (when applicable). If you set $echo to false, the value will be returned instead of echoed.

So if your site debuted in 2009, you would use the following:

<?php copyrightYear(2009); ?>

If the year is 2009, it will echo ‘2009′. In 2010, it will echo ‘2009-2010′.

Now sit back and rest easy next New Year’s Day knowing your footers shan’t go out of date again!

My Media Picks of the Decade

The inaugural decade of the new millennium proved to be as tumultuous, but no one can argue that it came and went without introducing gobs of fantastic media and entertainment. While by no means a definitive list, here are my personal favorites.

Favorite Web Site

Twitter (2006)

No online service has changed the way I communicate more radically. Twitter trained me to expect immediacy in my communication tools, and opened my mind to the possibility of manipulating public data on the web. While lacking the ubiquity of Facebook, it’s influence is felt far more perceptibly in nearly all competitors.

Hopefully 2010 will bring enough UI improvements to make me consider using the actual site instead of apps like TweetDeck.

Honorable mentions: Hulu (2007), Wikipedia (2001)

Favorite Gadget

iPhone 3G (2008)

I resisted the temptation of this device for quite some time, until a horrific experience with Verizon customer service pushed me into switching to AT&T. In hindsight, I should really thank that terrible service rep (with bad tattoos and a fake tan) for giving me the opportunity to experience one of the best devices ever. The iPhone almost single-handedly pushed the mobile web out of the dark ages (or at least got the ball rolling) into a period of relative optimism.

While devices like the Motorola Droid and Palm Pre may soften the novelty of the iPhone’s interface, we can’t overestimate how influential it continues to be, due in no small part to a bustling app store economy that pushes it’s capabilities on a weekly basis. The next decade will almost certainly belong to the mobile web, and few can argue that the iPhone wasn’t a catalyst for that progression.

Plus, Doodle Jump is wicked addictive.

Honorable mentions: Dell Studio Hybrid (My HTPC), Wii (2006)

Favorite Comic

Bone (1991 – 2004)

Although Jeff Smith’s tale of the lost Bone cousins exploring a vast and mysterious valley started in the 1990s, it wasn’t completed until 2004. While the gorgeous color editions consistently top children’s best seller lists, I’m partial to the black-and-white collection for preserving the prominence of Smith’s incredible brushwork. Few cartoonists alive can match this level of believable acting and effortless storytelling. Superb.

Honorable mentions: Scott Pilgrim (2004 – Present), Blankets (2003)

Favorite Game

Super Mario Galaxy (2007)

Leave it to Mario to remind me of why I love video games in the first place. Galaxy transported me to a fantastic, whimsical and positively surreal universe with exactly the right balance of fun and challenging gameplay. This game transcends mere entertainment and tiptoes into the realm of wondrous art and superb craftsmanship. No other title ate up more of my time this decade.

Honorable mentions: Shenmue II (2001), Shadow of the Colossus (2005)

Favorite Album

Wilco – Yankee Hotel Foxtrot (2002)

The band’s fourth LP has become nothing short of legendary, thanks in part to the drama played out between Wilco and Reprise Records (thoughtfully immortalized in an excellent documentary). While some of the album’s backstory has been unnecessarily mythologized, the attention it receives is beyond deserving. What songwriter Jeff Tweedy describes as “holes” in the songs can be truly challenging, but are never without reward. Perfect.

Honorable mentions: Radiohead – Kid A (2000), LCD Soundsystem – Sound of Silver (2007)

Favorite Film

The Incredibles (2004)

While I have a tremendous amount of respect and admiration for Pixar, I was not prepared for how much I would enjoy Brad Bird’s debut film at the studio. The Incredibles reaffirmed my belief in the power of cartoony, expressive character design by crafting believable human characters in spite of their abstract structures (a fact that must have been truly embarrassing for the dismal yet purportedly “realistic” Polar Express film which debuted the same month).

While it certainly didn’t hurt that the story combined my love for superheroes with a healthy dose of pure Pixar warmth, what really struck me was the underlying anti-mediocrity subtext.

“Everybody’s special, Dash,” Helen says to her son, who replies “…which is another way of saying no one is.”

Honorable mentions: The Dark Knight (2008), Thank You For Smoking (2006)

Not Quite 10 Years in Journalism

The latter part of this decade was when I finally started blogging regularly. I recently took a look at my site analytics to discover which journal entries had been most well-received since their publication.

Most Popular Entries

1. TweetDeck Replacement Icons
2. Remember the Milk Favicon Redesign
3. WordPress-Powered Portfolios: Slides & Snippets
4. cufón vs sIFR (A Visual Comparison)
5. New TweetDeck Replacement Icons

The WordPress-Powered Portfolios entry also received the most comments. My least popular entry? This WebVisions workshop reminder from May of 2008.

When I pushed an earlier iteration of this design live almost a year ago, one of the features I was most excited to introduce was the ability to comment on journal entries. I want to thank, in chronological order, each and every commenter who volunteered their thoughts, opinions, ideas and time to this space. I am humbled by your involvement, and I hope to hear from you again soon.

Names are taken from each comment author’s “name” or “URL” field and not from their email, out of respect for their privacy. If you’d like your name changed in this list, please comment or contact me. Each name links to the author’s first comment on this site.

Thank you Jason Grlicky, Matt Lohkamp, Bruce Colthart, John Brown, Erik Jung, Kristy, Amber Case, Michael Sigler, Terra, Matt Youell, Bryan, Peter Wooley, Vin Thomas, Mallory, Joshua Barton, Sandi Wooley, Michael Reese, Jordan Thompson, Noah Murphy, David Stewart, chimpchampion, Mason, yanblah, Jim Gray, Matt, Aaron Hockley, David Frey, Jeremy Meyers, Chris Kalani, Tac Anderson, J-P Voilleque, Jason Griffith, Frosty Goodness, Koes, Eric, Jacob Golden, Joey Yax, Martha Koenig, Justin Anderson, David Martschinske, Dennis Gutierrez, David Carroll and Fujilives.

It is truly an honor to continue to design, write and speak for an audience that appears to be growing steadily. I’ll continue to push myself to justify your enthusiasm.

Have a wonderful twenty-ten!

Implement 2.9’s thumbnail feature in your WordPress-Powered Portfolio

WordPress 2.9 was unleashed upon the world last evening with a pile of killer features (image editing, anyone?).  Perhaps my favorite new feature is built-in support for thumbnails associated with a page or post.

When I discussed building WordPress-Powered Portfolios earlier this year at WordCamp Portland, you may recall my rather obtuse solution for supporting thumbnails. Basically, you were required to upload an image, copy its filename, close the media browser, create a new custom field called “tn,” and paste the filename into it.

No longer!

With support in your theme for 2.9’s post thumbnails, simply upload an image and assign it as the thumbnail with a single click (or through the handy new “Page Image” box in the lower-right corner). No custom fields to mess with, no copying and pasting filenames.

Implementing this feature in a portfolio already using my WordCamp functions is a three-step process.

1. Tell WordPress that the feature is supported by adding add_theme_support('post-thumbnails'); somewhere in your theme’s functions.php file.
2. Log in to WordPress and assign each of your portfolio items an image. If you’ve already used the “Upload/Insert” tool to add them prior to 2.9, just click the “Add an Image” button, then “Gallery,” “Show” the image you want to use and click the “Use as thumbnail” link toward the bottom.
3. Adjust your functions to support the new feature. Refer to my updated list_work function snippet as an example.

Your mileage may vary depending on the volume of portfolio items you’ll need to switch over, but it took me roughly an hour to support the feature on this very site.

I recommend reading Justin Tadlock’s excellent blog post on the subject, which details the post thumbnails in much greater detail than WordPress’ documentation and was of great help to me in supporting them.

I do have one bit of extra theme development knowledge to bestow on other developers which I was unable to find elsewhere online. To echo only the URL of the thumbnail image file, use the following:

<?php echo get_post(get_post_thumbnail_id())->guid; ?>