Writing a JavaScript app in 10k (#aea10k)

Two weeks ago I discovered the 10k JavaScript contest organised by An Event Apart. It challenged developers to “inspire the web with just 10K”. I knew I’d be cutting things fine with just 11 days left before the deadline (including 5 at work and 3 on holiday!) but I was desperate to enter an application.

You can play with the final entry right here – http://10k.aneventapart.com/entry/details/243 – voting closes today so please be generous with your votes and comments. I’ve literally just now come back from holiday so I haven’t had a chance to badger everyone to vote yet. Go and vote! ;)

The idea’s been kicking around my head for a while: A desktop/bookmarking app with a google maps style interface. The general concept was that current approaches to bookmark management, navigation and retrieval focus on either tagging with keywords or hierarchical organisation into categories, but the idea of a “desktop” is a visual metaphor, and we tend to remember things better in visual and spatial terms. Also, with touch interfaces on the rise, reducing the keyboard’s role looked like a worthy goal.

So, ‘SkyTop’ is a mouse-navgiated landscape of icons which can be dragged, panned and zoomed. You can arrange clusters of similarly themed icons by dragging them closer together. In this way you can have all your work icons in one place, and when you’re done, zoom and pan across to your hobby icons. No need to type any tags or search through pages of bookmarks – just zoom right out and you’ll see where all your icons are. You’ll remember that you put google.com up to the right near the other search engines. I think it’s a powerful concept. I’m not sure I’ve pulled it off quite as perfectly as I’d have liked, but the basic interface is there and working in all major browsers, and for 10k I’m pretty happy.

In a future post I’ll do a technical write-up (lots of good stuff to talk about there!) and release the un-minified code, but for the moment just take a look over the app and let me know your thoughts on it. I think there’s definite room for improvement in the icon display, and I think having a background image which zooms and pans with the icons might help the user to understand the interface better. I’d love to hear what you think of the concept, and my implementation of it :0)

PS: Vote right now, then follow me on twitter.

Related Posts:

, , , , ,

Comments are closed.