This week I submitted an entry to 10K Apart, a contest sponsored by the fine folks at MIX and An Event Apart challenging web designers and developers to craft an HTML5-based application under 10 kilobytes in total file size (minus a few forgiven resources like jQuery and Typekit). Entries must be compatible with Firefox, either Safari or Chrome, and the Internet Explorer 9 Developer Preview, but thankfully not IE8 or below.

My entry, titled Surf by Osmosis, shows you the latest top content from Digg, Google News, Twitter and YouTube in as little as a minute, allowing you to absorb today’s trends quickly so you can get on with your life. You can view and comment on my entry on its 10K Apart page.

I took this contest as an opportunity to tackle a few challenges I hadn’t yet mastered, specifically:

• Quickly fetching feeds. I already do a lot of JavaScript feed-fetching on Portwiture and TweetPlus, but this one had to get the lead out.
• Time-sensitive events. For some reason, intervals and timeouts have always felt unintuitive for me to develop.
• Drawing with the canvas element.

Originally I struggled with normalizing the way data was retrieved from the four disparate services, until I realized I could use the speedy and versatile Google AJAX Feed API to grab all of them. This minimized my reliance on outside APIs while leveraging Google’s relative lack of down-time to achieve a speedier experience.

Time-sensitive events turned out to be much less frightening than I thought they would be, at least until I combined them with the initially perplexing canvas drawing methods. Thankfully, the Mozilla Developer Community offers an amazingly helpful animated clock demo I was able to reference and simplify.

Surf by Osmosis went through a few design iterations before I settled on the current look. Unlike most of my projects, I didn’t start in a sketchbook or Photoshop. Due to the technical constraints, I felt my usual design tools would only invite more complexity, and thus more file size.

The original layout was inspired by the simplicity of my friend and colleague Chris Kalani, but the open, fluid composition was more complex to style and animate. Additionally, the lack of a container made the transition between each step feel too jarring and dramatic.

The second iteration was at one time considered “finished.” The fixed container made transitions more predictable and defined a focal point for the viewer, and the multi-layered look of it gave me plenty of opportunities to play with CSS3 gradients and shadows. Much to my dismay, the verbose CSS3 gradient syntax (duplicated for both Mozilla and Webkit compatibility) coupled with the extra logic needed to craft a dimensional animated clock pushed the file size a few kilobytes over the limit, forcing me to simplify.

As is often the case, these technical limitations pushed me to focus my design. In lieu of fancy-shmancy effects, I was now forced to rely on color and typography (specifically FF Cocon Web Pro) to inject Osmosis with personality, and I firmly believe that the end product is better for it. Lesson learned!

Voting appears to be closed as of today. I’m honored to have received an average rating of 4.06 (out of 5) stars with a total of 396 votes, my sincerest thanks to everyone who voted. I’ve already received many wonderful suggestions for how I could expand the application once the contest has ended. If you’d like to see Surf by Osmosis revised and built upon, please let me know.

If you’re curious, my favorite competing entries are probably the addictive canvas game Sinuous and the dead-simple-yet-attractive Inspired By.

The original version of the Tyler Sticka experience you’re (hopefully) enjoying this very minute was crafted without a scrap of JavaScript when viewed in a modern browser. Sickened by the amount of designer portfolios reeking of gratuitous and uninspired Flash animation, I wanted my design to stand in stark defiance, crafted only with good ol’ XHTML and CSS (delivered via WordPress, of course).

But decisions born of principal, while challenging and rewarding, are not necessarily synonymous with actual experience design decisions. There was an opportunity to use the remarkable jQuery library to make the portfolio items more immediate and visually interesting, and I’d be a fool not to take advantage of that.

You can see the effect in action by visiting any portfolio piece with multiple images, such as this one. If you take a look around, you may notice one or two other changes as well.

I’ve also added support for Google Chrome Frame, which will allow users of Internet Explorer 6 who are unable (or unwilling) to upgrade to experience the new additions without entirely disrupting their browser. That being said, I highly recommend upgrading to a modern browser (such as Firefox, Chrome, Opera, Internet Explorer 8 or Safari) whenever possible.

See? I really can’t stop tinkering.

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!