Tyler Sticka

Surf by Osmosis, a 10K Web App

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 Brizzly Favicon Is On the Map!

Icons of the Web is a cool little app that visualizes the web’s top sites via their favicons. The larger the favicon, the more popular the site.

I was delighted to find my Brizzly icon hiding only a little ways into the pixel forest. It’s above and to the right of the MSN butterfly, nestled between SFR and the SparkFun icon. Neat!

Fragments Comic Anthology Available Now! Proceeds Go to Save the Children

I’m so wicked proud to announce that Fragments (the comic anthology I’ve been organizing to benefit the amazing charity, Save the Children) is finally available for purchase! If you like comics, or if you just like doing something awesome for a good cause, you should purchase a copy.

The book features awesome comics by Tram Ngo, Kristen Bailey, Pav Kovacic, Theodore Taylor and many more. The cover was illustrated by Tony Papesh, with a logo by Marc Roman. It’s thanks to all the contributors that this book exists.

The Fragments web site is the first time I’ve published a site written in HTML5 with liberal use of CSS3. Safari 5 users should notice a cool three-dimensional transform on the cover, accomplished via some CSS Transforms and a bit of JavaScript.

If you don’t have Safari, you can see the effect in this screencast:

A special thanks to everyone who has supported the project by tuning into its progress via Facebook or Twitter. Please continue spreading the word; with your help, this project will be a resounding success.

Bing Education mentioned by Jimmy Fallon, USA Today

I was on vacation all last week exploring the unparalleled beauty of Yellowstone National Park (more on that later), so I was surprised and delighted to see that, in my absence, a site I worked on has been getting a fair amount of press.

Bing Education recently debuted a new Teacher Appreciation feature. Share a story of how a teacher impacted your life, and (once moderated) receive five bucks to donate to any Donors Choose project of your choice.

Jimmy Fallon gave the site a shout out on his May 26 show, and USA Today wrote about it as well.

I’m overwhelmed by the amount of positive vibes being generated by the site’s participants and supporters. I encourage you to participate yourself, and to learn more about the site’s creation in my portfolio.

Better Brizzly Social Icons

Now that the awesome Brizzly web app has integrated my revision of their 16-pixel icon, I’d be lying if I said I didn’t feel a responsibility to its continued iconographic success.

Sometime last week, the folks at Thing Labs debuted a nifty new navigation paradigm with the addition of service-specific tabs. My pal Calvin Ross Carl hepped me to their inclusion, and we both noticed two oddities in their implementation.

The Twitter and Facebook icons are being sized down to fit the height of the tab, resulting in some degradation of quality as the browser struggles to choose the right pixels to maintain or omit. Secondly, if Helvetica Neue is not installed, a CSS bug may cause a serif font family to display instead of a sans-serif.

Since my Ice Cream Social Icon Pack seemed visually harmonious with the revised bear, I decided to remedy both of these problems via a quick user script. The result is much more consistent with the rest of the Brizzly header:

Firefox users must install the Greasemonkey extension to use the script, Chrome users can install it like any other extension. It has been tested in Firefox 3.6, Chrome 5 and Opera 10.5 on a Windows 7 PC.

Install Better Brizzly Social Icons 1.1

1.1 Update: Fixed to work with the Picnic update, though no Picnic icon has been created… yet!

TweetPlus Wins WebVisionary Award

I was surprised and happy this past Thursday to take home an adorable little robot trophy from the WebVisionary Awards for my Twitter/Google Feed API mashup, TweetPlus.

I’m humbled to have been selected by such an amazing panel of judges (including Armin Vit and Brad Smith) in a competition dominated largely by accomplished companies like ISITE, Pop Art, eROI, Fashion Buddha and many more. It’s an honor to have even been nominated.

My succinct acceptance speech went something like this:

Since I created TweetPlus by myself, I have no co-conspirators to thank. So instead, I’d like to thank every other web nerd out there who creates apps just for the fun of it.

Thanks to everyone who offered words of encouragement and praise. Maybe now I’ll have to think about a TweetPlus update with OPML support for mass subscribing. What do you think?

How I improved 4.379% of Brizzly’s home link

Brizzly is my favorite web-based Twitter application. Regular readers of this blog may remember my redesign of the service’s favicon for Peter Wooley’s Brizzly Favicon Alerts script for Greasemonkey.

Shortly after the script’s debut, I was contacted by the folks at Thing Labs (they make Brizzly) to talk about integrating my icon into the app.

A few months later, a new Brizzly interface debuted. Hidden in plain sight among the numerous UI and feature improvements, my 16 square pixels of glory perched unassumingly at the top of the page.

This is why I love the Internet. If you release a compelling product, you’ll inspire users to contribute ideas, feedback, or even design assets. Keep your ear to the ground, and you’ll swiftly reap the rewards.

TweetPlus Nominated for WebVisionary Award

I’m thrilled that TweetPlus (my other Twitter app) is a finalist in the “Mashup” category of the 2010  WebVisionary Awards.

Sometimes, 140 characters just isn’t enough. TweetPlus uses the nifty Twitter and Google Feed APIs to show you where people you follow are blogging.

A companion to the excellent WebVisions conference, the WebVisionary Awards Show is open to attendees and non-attendees alike. Join me this coming Thursday at the Someday Lounge for food, drink, PowerPoint karaoke and to witness the fate of TweetPlus.

Tune In to the Friends Electric Podcast

Peter Wooley is one of my most frequent co-conspirators. A while back we started working together on a super secret project (sorry, can’t talk about it yet) and had to think up a name for ourselves.

We deliberated without much success for weeks until my girlfriend Mallory suggested “Friends Electric.” Since Peter and I are friends, we make stuff that would be impossible without electricity, and we happen to be Tubeway Army fans, it just made sense.

We’ve kicked around the idea of recording a web designerly podcast for a while, so I was overjoyed when things actually came together. Recorded last Saturday, the inaugural Friends Electric podcast debuts today. We talk about Apple versus Flash versus HTML5. You can listen right away; if you dig it, consider subscribing via iTunes.

This is our first foray into podcast creation, and there are definitely things I’d like to remedy in future episodes. That being said, I’m actually pretty pleased with the end result. We had a blast making it, and we intend to make more, hopefully bringing in guests from in and outside our little Portland design circle. We hope you enjoy it.