2011 has been another fascinating year for those of us who build things for the browser. Here web developer Phil Hawksworth looks at some exciting and ambitious uses of JavaScript on the web
Let’s face it. Those of us who consider ourselves to be adventurous frontend developers are pretty spoilt at the moment. Browsers are getting beefier and stocked full of all kinds of bells and whistles, and have new capabilities that most of us would never have imagined coming to the lowly browser a few years ago. Along with these new abilities, we have an audience who are more sophisticated and who expect and understand more complex or imaginative user interfaces. This all creates opportunities to really push the boundaries and create sites with user interfaces which can surprise and delight.
Sometimes this can mean something subtle, some crafty piece of genius which goes unnoticed but makes our experience better. Sometimes the result is as subtle as a mouthful of popping candy washed down with cherry cola.
So here then, are 20 sites which caught my eye this year, with either their ambition, their subtlety, or simply their JavaScript craftsmanship.
Clever shizzle and demos
Let’s start off with some fun stuff. These sites use JavaScript in conjunction with a variety of emerging browser technologies such as Canvas, WebGL, CSS3 and a whole host of HTML5-flavoured friends. Mostly these are just intended to delight the user, or to show off a new feature in a modern browser. While most are well behaved, some may result in some huffing and puffing from your processor or graphics card, so laptop users may want to keep an eye on the temperature of their thighs, lest they be turned to pork crackling.
1. Baroque.me
This simple but hypnotic site, Baroque.me, makes use of the HTML5 Canvas element, cleverly controlled by JavaScript to render a simple visualisation of a Bach Cello suite (which you can’t fail to recognise once it gets going). The audio is provided by Flash, which is controlled by the JavaScript. You can interact with the animated points which ‘pick out’ the notes, but I found that I was hard pressed to improve on Bach’s sense of timing.
Its creator, Alexander Chen, works at Google Creative Labs and was behind the lovely Les Paul Google Doodle, also brought us a fabulous time-lapse visualisation of the NY subwayssystem earlier in the year.
2. Beercamp
The fun, zoomable interface of Beercamp 2011 made clever use of CSS3 and JavaScript to grab quite a bit of attention ahead of the South by Southwest conference in March. Mostly using CSS3 transitions and transforms, you’ll also find this site uses JavaScript to hijack the browser scroll event in order to control the zooming effect. You can find a detailed explanation of how David DeSandro created this effect as he kindly shared the technique with us earlier this year. I also rather like the slightly geeky reference to Inception at the limit of the zooming. Look out for it!
3. Three.js
There is quite a buzz about the powerful rendering opportunities that technologies such as Canvas and WebGL bring to the browser. Three.js, a project from Mr. Doob (of snazzy Flash and ActionScript fame), to create a 3D JavaScript engine which can render using these new browser features. A quick look at the examples of Three.js performing tasks like particle animations or 3D modelling really gets the imagination going.
4. Windows Phone Demo
Breaking news: the web is on mobile devices too these days! To be honest, this list may be a little light on examples of exciting JavaScript optimised for the mobile market. Here though, is the first of a few examples of great work for mobile.
As a means of demonstrating the interface on the new Windows Mobile devices, Microsoft created this nicely executed example of a user journey on Windows mobile. Many of us have seen the Tiles interface with its smooth animations and crisp user feedback. This is replicated beautifully on this site with CSS and JavaScript (best viewed on your iPhone or Android device – not supported on a Windows phone!).
Utilities
This collection of sites isn’t about looking cool or giving you a nice “ooh” moment (though some of them do), but rather, they do a job for us. Some of them are JavaScript resources that we’ll use again and again as developers, while some use JavaScript as their weapon of choice for delivering a service to us through the browser.
5. Workflowy
Workflowy is a tool to help you “organise your brain”. Launched into beta in November of 2010, this clever mega-list in the browser took just 30 days to reach the milestone of having one million lists. Created by Jesse Patel and Mike Turitzin, Workflowy uses JavaScript for some crafty and elegant DOM manipulation and storage, and enables some rapid searching across large amounts of local list content. Well worth trying out if you like organising youself with lists or finding new GTD tools. Recent support for mobile and tablet devices along with sharing parts of your document for collaboration make this an interesting and powerful tool.
6. jQuery Mobile
While it is true that the ratio of mobile to desktop web users is moving in the mobile direction, developing for mobile devices is still tougher than a cheap steak wrapped in bacon and shoe leather. The goal of the jQuery JavaScript library was to normalise common JavaScript tasks across browsers. jQuery Mobile has an even more ambitious goal: to simplify web development across a staggeringly diverse mobile landscape. With the library recently reaching version 1.0, the jQuery Mobile site is a living example of how jQuery Mobile can be used to create usable interfaces for a large range of mobile and traditional browser devices. An amazing achievement.
7. Spritecow
Spritecow, built by Jake Archibald, is a simple solution to a fiddly and time-consuming problem. I’m going to make a leap and assume that if you’ve read this far, then you’re either interested in frontend development, or a member of my family. Many in the former of those groups will be familiar with the task of creating spritesheets as a means of making interfaces more responsive and reducing the number of expensive HTTP requests. Spritecow uses a combination of JavaScript, Canvas and some clever maths and logic to provide an easy to use tool which helps you generate the CSS for your spritesheet.
(Disclaimer: I worked with Jake at the time he put this together … in his spare time … on the train. Freak!)
8. Cloud 9 IDE
It is a sign of our times that entire development environments are now possible in the cloud and in your browser. Cloud 9 have been steadily developing their integrated development environment (IDE) over the last few years, but this year it really became an exciting prospect and a viable development resource on the web. Founder and CTO, Rik Arends explained that using JavaScript to manipulate the DOM to control the document in the editing environment (along with a giant sackful of crafty techniques) allows much better performance than similar projects that went before such as Bespin. Configurable and extensible with JavaScript, there are huge possibilities for this as a development environment. Exciting to watch.
9. Reveal.JS
Reveal.JS is a tool for creating gorgeous-looking presentations with HTML and publishing them on the web. This is the kind of thing that I’ve started building myself more times than I can remember. With Reveal.JS though, Hakim El Hattab has done it right. Making beautiful use of CSS3 transforms and JavaScript to provide a tool which any web developer would enjoy using to make a professional-looking presentation.
10. Pusher
I’ve been tempted to make more mention of awesome JavaScript resources such as Node,Modernizr, or jQuery but have tried not to let the JavaScript utilities dominate this little hit-parade. Pusher though, is too good to resist. Although it has been around for longer than a year, recent improvments for Web Sockets support in browsers, and the meteroic rise of Node have made Pusher more relevent and attractive than ever.
Pusher is a hosted service which provides an API to power your real-time apps and services. A great site with lots of thoughtful documentation makes getting started simple.
Originally developed by some clever folks at New Bamboo, a small, but smart development shop in London, Pusher itself was built with Node when New Bamboo spotted a need for easy real-time communication to power all manner of web applications games and tools.
11. Speakerdeck
Simple and rather easy on the eye, Speakerdeck, from Ordered List – who have recently been acquired by Github – does a wonderful job of displaying your presentation decks with JavaScript and web technologies. While other popular services for this kind of thing make heavy use of Flash, Speakerdeck is comparatively light touch and uses JavaScript to enable previews of slides as you scrub over the presentation timeline. Lots of features and nice touches to be found here.
12. Gauges
Since we’re talking about Speakerdeck, we should also take a look at Gauges which is another yummy service from Ordered List. This analytics tool, similar to Google Analytics, uses the well-worn route of a small JavaScript drop-in to enable the capturing visitor statistics to your site. Gauges has a rich and well documented API and a beautiful rendering of real-time analytics data. Mmmm. JavaScripty. Very cool and rather beautiful.
Evolving interfaces
13. BBC homepage
There has been some debate about the recent refresh to the BBC homepage. Some love it, some hate it. Personally, I find it goes a little bit carousel-crazy and I’m struggling to find it very loveable at the moment. That said, there are some cool interactions here and it’s good to see that things have been built with an understanding of progressive enhancement. The hinting of the ability to floop in more content, and the way that the carousel controls scale are rather gratifying. The homepage also seems to handle a lack of JavaScript quite nicely and demonstrates a good deal of care. I still find it’s a bit busy and boxy though.
14. BBC iPlayer
I know that we already looked at the BBC, but the BBC iPlayer really does deserve a mention. Yes, the iPlayer site also show signs of a love of carousels in the BBC, but I’d argue that it has an ambitious, JavaScript-driven interface which does a nice job of getting rich content (and I’m thinking of the images, not just the video content) into our eyeballs rather efficiently. Use of the BBC’s homegrown and open sourced Glow JavaScript library does a lot of the snazzy work.
15. Facebook
Ok, I admit it. I’m one of those web snobs who is a bit down on Facebook. But I can’t ignore the sophistication and the scale of the work that has gone into bringing the Facebook interface to life. It is rammed full of ‘real-time’ messages, notifications, chat features and goodness knows what other kinds of rich user interfaces which, while not aesthetically to my taste, have a huge impact on the web and its citizens.
Under the radar and hidden beauty
I have to confess that even though I’m a sucker for a shiny new visual effect or a crafty piece of library code (that second one is what really gets the girls), what I enjoy the most is subtlety, craft and a thoughtful use of technology. These last few examples fall into that camp.
16. Github
Github is full to the brim with interesting user interactions and thoughtful attention to detail. From the navigable code tree, which smoothly swooshes you through the directories in a project while taking care of the page address so that your location is correctly bookmark-able, to the in-line code editor which enables code commits from the browser (powered by theCloud 9 editor, as it happens). Look-ahead searching, stunning popup menus and interface elements, a code network visualiser built in Canvas, the list goes on and on. Bravo Github. Bravo.
17. Google Doodle
I’ve always enjoyed the playful animated Google Doodles which you can often interact with. Sometime we grin as we discover them, sometimes we don’t even notice them, but after just one day, they are gone. Recently I got to speak to Marcin Wichary who is one of the team at Google responsible for these one-day “delighters” which through necessity of scale, have to push the boundaries in JavaScript optimisation techniques. I particularly loved the sprite-crunch technique that the team evolved to minimise the size of their sprites used in theiranimations. Very clever stuff. These Doodles regularly tap in to an emerging browser API or use JavaScript in very imaginative way. Clever Google boffins!
18. Nike Better World
This campaign site for Nike has been much copied and discussed. A single page site which uses a combination of JavaScript and CSS to deliver an interesting parallax effect as you scroll your way down through the page. While this site also works pretty well without JavaScript as it gracefuly degrades to a version that simply has the parallax effect removed, I rather wish that the navigation links could have been retained by simply using links to good ol' HTML hashes. JavaScript could simply have hijacked those links so that the navigation could have worked with or without JavaScript.
19. Mobile Beetle
In a talk I gave earlier this year, I made quite a few criticisms about the new site for theVolkswagen Beetle. I’ll not continue that here other than to say that the site certainly could be said to have pushed JavaScript to the limit. It’s another of those fancy layered scrolling effect sites, but with three shots of espresso. I must however, tip my hat to those who made the mobile version of the site. When viewed on an iPhone, the reduced version makes clever use of the touch and scroll events to deliver a nice experience (although the images are a little heavy if you’re not on WIFI).
20. Twitter mobile site
The fact that there are so many good Twitter clients for mobile devices means that many of us didn’t notice the rather excellent mobile-optimised web client that Twitter rolled out this year. The Twitter engineering team took many of the UI conventions of leading iPhone Twitter apps and recreated them in their own web framework. The result is a very impressive, app-like feeling in the browser on your smartphone. Android and iPhone do particularly well here. Lovely work.
…and that’s 20
So that’s it. Those were 20 sites which I think have pushed JavaScript in some way this year. Of course there are others which should have been on the list, but the web is a big place and 20 is a small number. There are plenty among them that I love, but there are things that I’d criticise too. JavaScript is empowering developers to do wonderful things in the browser, but some of our 20 do this at the expense of the things like accessibility, address-ability and other things that we need to safegaurd for the good of the web. Nevertheless, there is much to inspire us in the developments that have happened this year.
No comments:
Post a Comment