45 top examples of JavaScript

Advertisement

JavaScript creates platforms that can engage a user and ensure that they remember your site and continue to revisit. It can be used to create games, APIs, scrolling abilities and much more.

The web is full of great examples of JavaScript being used to bring a website to life and provide great user experiences. Here, pro web designers and JavaScript experts Jack Franklin, Rey Bango, Addy Osmani and Stephen Fulljames pick their favourite examples of JavaScript in action for your inspiration.

• See all our web design articles here

01. Panera Bread

The Panera Bread website was built by agency Luxurious Animals. "'Live Consciously, Eat Deliciously' was our second opportunity to work with Panera Bread and Cramer-Krasselt," explains technical strategy director Dan Federman, "and we wanted it to feel like part of the same family as our first collaboration for Panera Soup."

Federman and his team decided to head down the CSS3 animations route wherever possible, rather than using JavaScript. "GPU-accelerated CSS3 animations enabled smooth animation on desktops and tablets, with programmatic transitions and JavaScript fallbacks via jQuery Transit," he goes on. "Hammer.js helped (and sometimes hindered) touch events. The homepage uses Isotope for the responsive grid (with some randomised positioning for a more ‘handmade’ look)."

The agency also took advantage of other libraries to speed up development and organise the code. "Yeoman handled scaffolding, optimisation and build processes," says Federman. "Backbone.js provided data modelling and templating for the content we were wrangling. The content itself lived in flat HTML files (loaded via Ajax), which also served as static content for SEO."

02. Peanut Gallery

Peanut Gallery is a project from the Google Creative Lab. Valdean Klump, a producer at the Lab, explains the concept. "The Peanut Gallery is a Chrome experiment that lets users add intertitles to silent film clips by talking to their browser," he says.

"The technology behind it is Google’s Web Speech API, a JavaScript API that lets developers integrate speech recognition into their web apps." The project does a good job of demonstrating the new - and very capable - Web Speech API, which displays live text updates as it tries to understand a human’s speech.

"One of our favourite features of the API is that text updates in real time while you speak," Klump continues. "For example, if you say 'European Union' slowly, you can watch as the API begins by printing ‘your’ or ‘year’ and then corrects it to 'European Union'. "Another neat feature (for English speakers only at this point), is punctuation. Say 'question mark', 'exclamation point', 'comma', or 'period' and the API will insert the correct punctuation for you," adds Klump.

03. The Interactive Ear

The Interactive Ear was created by Leeds-based agency Epiphany Solutions for its client Amplifon, which specialises in hearing aids, tests and solutions for the hard of hearing, and is targeted at both primary and secondary school level education.

The website showcases the three major parts of the ear's complex systems, encapsulated within a smoothly transitioning interface which enables the user to find out where sound goes, what happens and how it travels to the brain.

We use JavaScript to place classes on an HTML element upon a particular action such as hover, which then applies a different style using CSS animations," says creator Bryan James.

"In older browsers without the support, you still get a swift experience which works, but we get the absolute best for the people who have modern browsers. With the power of modern technology, we were able to make the ear itself 'feel' more real with a rollover effect which draws separate 'pieces' in to where the user is browsing.

"We knew how we'd create the magnifying glass area from a previous project which also involved masking content inside a circle. The issue we had was that if you have numerous elements inside a CSS border-radius circle, the elements within still show as though they are contained within a square, so the image absolutely had to be what we used – an animated GIF."

04. Violin

Violin is a project by developer Philip Roberts that sets out to represent the structure of a JavaScript application and how the pieces interact by graphing them and animating them when they are used. Roberts explains: "I love thinking about how we can visualise code. It can help us spot performance issues and bugs, or help us better understand - and be more creative - with our code."

Violin is his experiment in visualising JavaScript. It takes an application and draws a graph showing all of the objects and functions in the app. "What’s really cool is that, as you interact with the application, the graph animates in real-time to show the creation of new objects and execution of functions," says Roberts.

He also used D3.js for the drawing of his graphs. "Violin automatically finds and rewrites code so that when functions are called they also update and animate the graph. This is nice as it means you don’t have to change how your code is written - Violin does all that work for you! In the demo, I’ve used Backbone to write a simple to-do list style app, and the graph is drawn using D3.js," he adds.

05. Glimpse

Glimpse Catalogs is a merging of TheFind’s shopping search engine and its successful social shopping app on Facebook. Items are displayed in a Pinterest-style layout, with the focus on image and minimal product details. Clicking the image provides a pop-up box containing full information. As part of the project, the team released the framework created as part of the development, which relied heavily on Turn.js, a flipbook library for JavaScript.

"Our goal, from the start, was to implement Glimpse as a web app and not just as a plain website," TheFind’s co-founder and CTO Shashikant Khandelwal explains. “This resolution led us to explore the depths of both JavaScript and CSS while building Glimpse. We employ a model-view-controller paradigm wherein both server-side and client-side templates render the model represented in Thrift or JSON, depending on the computational power of the client (desktop or tablet)," he continues. "We use both jQuery and custom-built JavaScript libraries in our application."

Khandelwal also describes the usage of Turn.js. "While developing magazine-style catalogues, we used Turn.js, an open source jQuery plug-in flexible enough to be adapted to our needs. We also liked that it was managing the page turn effect entirely with DOM elements."

Complex CSS and JavaScript was used to transform plain 2D images into a more immersive experience. "We converted the static 2D images into a more dynamic 3D experience by including shadows and stacking pages, to give it the appearance of a magazine," Khandelwal adds.

06. Tweetmap

Tweetmap by Pete Smart and Rob Hawkes represents countries in the world proportionally based on numbers of tweets. Hawkes explains, "Tweetmap brings together lots of clever technologies, including TopoJSON, D3.js, Node.js, PhantomJS, and an algorithm to construct contiguous cartograms in real-time.

"We chose Node.js to power the server side of things as it's quick, flexible and we already had experience using it to scrape tweets. For rendering and animating the map (in TopoJSON format) on the client we use D3, which is a fantastic library for data visualisation. Specifically, we extensively used the geo module, which allows you to do some complex geographic calculations and conversions."

To prevent performance problems in the browser, Smart and Hawkes use D3.js on the server to render countries and generate contiguous cartograms. "However, we actually run it on the server using PhantomJS (a 'headless' WebKit rendering engine) and transmit the maps back to the client," says Hawkes. This prevents the performance hit experienced when generating the cartograms on the client. "The browser locked up for four seconds," explains Hawkes.

07. Nike M vs W

Nike M vs W uses running data from Nike+ to enable runners to compare runs and their performance. "In this website we collect the running data from Nike+, and allow the runners to compare their runs virtually," explains Henry Chu, designer at the Pill & Pillow studio behind the site.

"We used three.js to create the 3D visualisation: the motion was designed to display the data of two to six runners. We used two tweening libraries: tween.js and jstween to program the motions. Most 3D motions are controlled by tween.js."

08. The Trip

The Trip is an interactive film with audio, powered entirely through HTML5 and JavaScript (with Flash nowhere to be seen). The complexity of the project proved challenging, as developer Otto Nascarella explains. He says, "Most of the difficulties we had during the development process were due to the lack of cross browser/devices consistency of HTML5 new technologies, so it was decided we'd ‘recommend’ Chrome for a better experience on desktops," he says.

"The JavaScript code uses jQuery for almost everything - even though I flirted with the possibilities of using Zepto - I wrote two plugins for jQuery, [used] TextBlur to animate blur on fonts using text-shadow, that did not get used the end, and also TextDrop, the one that is responsible for the typographic animations."

09. Si Digital

This JavaScript site is Si Digital's new-look portfolio and blog. This grabs the attention via its intriguing homepage animations, all done through JavaScript. Lead developer Alex Crooks explains that the homepage "guides the user through our services, with liquid moving through tubes activating an animation at each stage.

"To achieve this effect I used jQuery .animate(), using its step() option to work out where the liquid was in the tube - and if it needed to activate any other animations on its journey," says Crooks. He adds, "Everybody reads at different paces, so we tried to find the right balance for the liquid speed. However, if it’s too fast for the user, it [the animation] will always wait at the next stage for them to scroll down.

Pointing the way

"To 'open' new stages for the liquid to flow through I used the jQuery Waypoints plug-in," says Crooks, "which was also used to trigger the text fading in, and other various loading/waiting animations so users that skip ahead still get a great experience."

The interactive timeline on the team page, which enables users to drag with their mouse to see some of the company’s past work and events, makes use of jQuery UI. "The team page has a timeline to highlight Si digital milestones and events, pulling in our social media accounts ranging from Twitter updates to Dribbble uploads," Crooks explains. "The timeline is generated entirely dynamically based on a database of our events loaded via Ajax. The primary way to navigate the timeline is by dragging with the mouse (using jQuery UI draggable), but keyboard navigation is also included."

10. Jean Helfenstein

Developer Jean Helfenstein’s personal site features an eye-catching canvas animation on the homepage. "I really had fun with the backgrounds," says Helfenstein. "I always love to experiment with new technology, so I decided to use my landing page as my playground and mess around with three.js and the canvas element.

"The idea was to create a site that follows the current minimalist design trend [but adds] something fresh. To achieve that, I decided to use click-and-drag navigation rather than the usual left/right arrows. With mobile devices becoming more popular, I feel that people are starting to be familiar with this type of interaction."

Everything about the site is impressive, including the subtle animations between pages - and in particular, the way you can drag between projects on the 'Playground' page. It's a brilliant showcase of what can be achieved with some of the newer technologies we have available.

11. Nick Jones

Nick Jones's redesigned site caught our eye with some clever animations. Jones has more experience in Flash, but tried the JavaScript route to see what it's capable of. "Once I got started, I realised the syntax is the same as ActionScript, so the transition felt totally natural after only a short time," he told us. "Access to the mouse wheel is something I never had in Flash, so it was a fun new interaction to play with."

Jones (who wrote a controversial article on responsive web design for our sister site, netmagazine.com) used JavaScript to capture events and enhance them. "I wanted a responsiveness I couldn’t achieve with CSS transitions between classes," he goes on, "so I relied heavily on JavaScript to dynamically update the CSS properties on mousewheel and mousemove events. Scrollbars are dead, so I made the page itself draggable."

Jones was pleased with his results. "If you’re thinking of jumping from ActionScript to JavaScript, don’t wait another second. I made this site using heavy JavaScript interactivity to see if it was capable of what I’ve come to expect from Flash. I was impressed."

12. KIKK Festival

The KIKK Festival site, produced by Dog Studio, needed a strong identity and immersive experience, which creative director Henry Daubrez set about delivering. "We had three main interactions needed to achieve this goal: falling feathers, a draggable timeline program and a nice and sleek page transition," he summarises. "The most touchy (but killer) JavaScript feature is probably the program timeline that can be linked from every page and loads a specific part of the program if needed."

A common trend is to use HTML5 pushState to allow the user to go back and forward between transitions. "The page transition is visually the most interesting feature," reckons Daubrez. "It’s been composed with a dynamic URL rewriting using the history.pushState feature, so it gives the impression of travelling in an horizontal single page."

Dog Studio made full use of some quirky jQuery plug-ins to produce the falling feather effect: "For that we simply used a Snowfall jQuery plug-in we modified to give the feather rotation effect, and get more control over the number of items and their speed. Those three main directions really make us think we managed to get a unique experience."

13. TakeOff Conference 2013

The website for this year’s TakeOff Conference deserves a mention for the way it uses 'bottom-up' scrolling. When you first visit the page, you are scrolled all the way to the bottom, and then are able to scroll upwards. It’s something unique that initially I didn’t think would work, but that in reality is perfectly usable.

"We created a disturbing yet stunning website for the 2013 edition of the TakeOff Conference," says developer Florian Le Goff, one of the conference organisers. "We have to pay a tribute to the modern web ecosystem for making this project a reality in such a short matter of time."

Le Goff utilised a number of projects, libraries and plug-ins: "A paid Typekit account was used to include uncommon fonts in two lines of code, while a few jQuery hacks and plug-ins were used to power our bottom-up reading pattern."

The work is largely done by the popular jQuery.scrollTo plug-in, which provides an intuitive API for page scrolling. Not all the animations were achieved with JavaScript, though: "A few CSS animations allowed us to quickly deliver an usual creative experience," says Le Goff.

14. MapsTD

MapsTD is a tower defence game, but with a difference. You tell it where your home is, and through the power of Google Maps, it will produce a game in which you’re defending your hometown, with the baddies relentlessly charging past the streets and houses of your neighbourhood.

Creator Duncan Barclay explains how it works. "It’s obviously built using the Google Maps API, with MooTools being used for the other aspects of the UI and as a general-purpose JavaScript library. It uses several bits of functionality provided by Google Maps. As well as the map itself, the biggest part is the route finder API, which is used to work out the paths the enemies follow. Once you’ve picked a start location, it does a lookup to get the latitude and longitude. It then looks for four routes by adding or subtracting a fixed number from that latitude and longitude (to get a point due north, due east, and so on), and uses Google to find a path between the two."

Creeps

As the game progresses, more enemies (or 'creeps' as he has called them) appear on screen. Barclay found himself battling to keep performance high and timings correct: "One of the biggest challenges – one that still isn’t quite right - was the timing. Firstly, if the page isn’t active, most browsers reduce how often they check if timeouts have reached the end, resulting in creeps moving in bursts rather than moving steadily. I ended up fixing that by pausing the game when the tab loses focus. The detection code was taken from David Walsh’s blog and is in the game credits.

"The other problem was that as you progressed, there were too many things happening, which resulted in the game slowing down a lot. The workaround ended up being to use harder creeps rather than more of them, and making the game incrementally more difficult each level after level 50."

15. Command and Conquer

This is an amazing example of how powerful today’s tools are. Aditya Ravi Shankar has used them to create an online version of classic real-time strategy game Command and Conquer.

Recreating the original 1995 game was a long and painstaking process, says Shankar. "Every little thing took time - things like selecting single units or multiple units; being able to select by drawing the box from left to right or from right to left; making sure the panning was smooth; figuring out a decent fog of war implementation; allowing for building construction, dependencies (the Power Plant is needed for the Refinery, which is needed for the Factory) and building placement (buildings cannot be constructed on top of other buildings); and depth sorting when drawing so units could move behind buildings and trees."

It’s only when the development tasks are itemised in this way that you realise just how much work went into the project, including some very complicated logic - making it even more impressive that the entire thing could be achieved using only HTML5 and JavaScript.

16. Glimpse Catalogs

Online shopping has been taken in a new direction following the launch of Glimpse Catalogs. Developed as a partnership between the Windows IE team and TheFind, Glimpse Catalogs is a merging of TheFind’s shopping search engine and its successful social shopping app on Facebook. As part of the project, the team released the framework created as part of the development which relied heavily on Turn.js, a flipbook library for JavaScript.

"Our goal, from the start, was to implement Glimpse as a web app and not just as a plain website," TheFind’s co-founder and CTO Shashikant Khandelwal explains. "This resolution led us to explore the depths of both JavaScript and CSS while building Glimpse.

"We employ a model-view-controller paradigm wherein both server-side and client-side templates render the model represented in Thrift or JSON, depending on the computational power of the client (desktop or tablet). We use both jQuery and custom-built JavaScript libraries in our application."

Page turn effect

Khandelwal also describes the usage of Turn.js. "While developing magazine-style catalogues, we used Turn.js - an open source jQuery plug-in flexible enough to be adapted to our needs. We also liked that it was managing the page turn effect entirely with DOM elements."

Complex CSS and JavaScript was used to transform plain 2D images into a more immersive experience: "We converted the static 2D images into a more dynamic 3D experience by including shadows and stacking pages, to give it the appearance of a magazine," Khandelwal continues. "Additionally we integrated product highlighting and hotspotting overlays to make the pages more interactive.

"Both of these together helped create an HTML5 magazine with interactive markup. It also gave us a great deal of satisfaction to contribute some of our code back to the developer community."

17. Golden State of Mind

Examples of JavaScript keep getting better. It’s fantastic that with advances in JavaScript, sites that two years ago would have been built with Flash can now be created using JS - and Golden State of Mind is a perfect example of this.

The site has been built by JUXT Interactive to showcase, "art, fashion and happenings live from California". JUXT Interactive’s creative director Jeff Whitney reckons its highlight is its, "unique, rotating brand showcase, allowing the user to explore the current season through images and video in an uplifting way... to a Golden State of Mind".

"JavaScript was used extensively for the Experience portion of
the GSOM website," Whitney explains. "A custom scrollbar plug-in was found and rather heavily modified to allow for the infinite scrolling, and a lot of sweat and tears went into getting the reversed scrolling to work correctly. The movement and parallax of the elements on the page were easily handled with jQuery."

18. Chrome Web Lab

Chrome Web Lab launched as a partnership between Google and agency B-Reel. It's available online to all, but is also featured in the London Science Museum. The Lab relies heavily on WebGL but also features some complex JavaScript, in particular the use of the canvas element and heavy use of three.js, a lightweight 3D JavaScript library that supports both canvas and WebGL.

19. Red Bull Music Academy Radio

Red Bull is the energy drink that keeps fingers moving during late-night coding sessions: couple it with music and you have an awesome setting for code cranking. Looks like Red Bull gets this: its Red Bull Music Academy Radio brings kickass beats to your browser.

RBMA Radio is all about standards, and using Modernizr helps it get there. From a feature-detection perspective, Modernizr continues to be the best choice for enabling you to leverage new HTML5 and CSS3 features in a cross-browser manner, and the fact that it's continuously updated ensures that as new features come out, you can scale your code to handle them.

Client-side MVC has really generated a following, with Backbone.js (which the site uses) being a popular choice. It's well-designed, lightweight and well-maintained. All this leads to a nice fluid design that also includes dynamic loading of tiles (an endless page feel) as you scroll down: a cool effect, nd one of the best examples of JavaScript we've seen.

20. Electric Ikebana

Remember those days when we needed Flash to do fancy animated rendering on sites? Well it’s good to know that true browser-based features are being added that will give you that power without having to use a plug-in.

Helios Design Labs has created such a site for Bell Labs which really demonstrates how powerful in-browser can be. It’s created an animated ikebana (a Japanese method of flower arranging), which uses data provided by Bell Labs to render the arrangement dynamically.

Maths class

While jQuery, jQuery UI and Modernizr are all used, it's the use of the WebGL API and three.js that makes it stand out. Looking under the hood, you can see a ton of code being included to come up with the effect... also lots and lots of maths! You can use the keyboard arrow keys to control the position of the ikebana while it's being arranged.

Helios has done a really good job of creating a cool site and if you're into 3D animation, it's definitely worth checking out if you're looking for examples of JavaScript that make the most of animation.

21. One Millionth Tower

This breathtaking JavaScript, WebGL and HTML5-powered documentary tells the story of transforming physical spaces in a 3D virtual landscape. Born from the National Film Board of Canada's Highrise project, one of the main ideas behind the experiment was to bring together residents, architects, animators and web developers to demonstrate how communities can help build a better web together.

"We're exploring the human experience of vertical living in global suburbs over several years using many kinds of platforms," explains director Katerina Cizek. "In One Millionth Tower I was interested in harnessing the imagination of the people who live inside to re-envision the bleak spaces around the buildings.

"The other problem the project faced came when creative technologist Mike Robbins brought in the idea of putting a story about space into 3D space, so it became a story about transforming the physical world, by transforming the virtual world."

Weathered look

What got me excited about this site was that it both lives and breathes, a lot like the web - if it's actually raining in the Toronto Highrise, it's also raining in One Millionth Tower. If you've ever used weather APIs, you'll know this isn't a technically difficult feat, but integrating it into virtual landscapes is something I haven't seen done until now.

One of the core tools that made One Millionth Tower possible was Popcorn.js - a library by Mozilla featuring some work by Boston-based hack loft Bocoup. Popcorn helps link real-time social media, news feeds and other content directly into online video in real-time, enabling developers to easily create rich, interactive experiences that go beyond traditional static video on the web. Three.js was also used to help implement the 3D world around the high-rise neighborhood.

While a static video version of One Millionth Tower is also available, I recommend opening up a recent version of Firefox or Chrome to enjoy the complete experience the documentary has to offer. As examples of JavaScript go, they don't get much better.

22. Nouvelle Vague

Nouvelle Vague is a fascinating way to follow the journey of your tweets from French web design agency Ultranoir. In addition to being a useful tool implemented with JavaScript, Nouvelle Vague also features some gorgeous WebGL animations thanks to Daniel Salazar and Cedric Pinson. The fun HTML5 video used as an introduction is actually just a teaser for what the full 3D experience has to offer once you enter a hashtag to use a data source.

It took three people about four months to create, says Ultranoir's JB Grasset. "We were very interested in all the WebGL experiments running on the web and became convinced that Ultranoir had to try something with this new technology. The Ro.me project (ro.me) really astonished the whole team, so we decided to produce our own experience.

Interactive exploitation

"The basic idea was to exploit the atmosphere we created for the Ultranoir V3 video introduction. It was produced with 3D tools and we wanted to make it interactive.

"As we love Twitter, it seemed obvious to use its dynamic and concise content. The primary goal of this project is innovation. From HTML5, CSS3 and JavaScript to WebGL, we have to explore the latest technologies. We also believe that this language will become the 3D standard in the future, with its incredible quality rendering, rich interactions and responsive possibility."

23. The Convergence

Cynics may say HTML5 is still playing catch-up to Flash in the gaming world, but it's finally getting closer to matching the smooth, arcade experiences gamers have been desperately pleading for.

One such game that demonstrates this is The Convergence, a JavaScript and HTML5 game that will remind retro-gaming fans of Super Mario Bros on the SNES.

Sound idea

While not without its flaws, The Convergence is a great proof of concept game implementation. If you enjoy playing it, you can look forward to more features in the future including extra levels and a particularly important addition - HTML5 audio.

I'd also be interested to see some support for the Web Joystick/Gamepad API Mozilla have been showing off lately; it's bound to make games like this even more entertaining!

24. Kindle Cloud Reader

Carrying all my books in a slim, lightweight tablet is amazing. So when Amazon announced its new web-based Kindle Cloud Reader, I was thrilled the convenience level had been pushed up several notches.

The new web app makes 'buy once, read everywhere' a reality. It utilises client-side technologies and libraries including HTML5 and its related JavaScript APIs, the jQuery and jQuery UI JavaScript libraries, several jQuery plug-ins and home-grown source code to finally piece things together.

For example, the team leveraged Kelvin Luck's jScrollPane plug-in to provide CSS skinning of scrollbars to match their UI. And continuing the consistent UI theme, the jQuery Templates plug-in was used for building and rendering standard templates of data.

Interim database

Amazon also elected to use WebSQL for offline support. While not the W3C standard, this web database implementation seems to have provided the team with an interim solution until IndexedDB is more widely used and implemented.

Being an avid Kindle fan, it's really exciting to see what Amazon has built and that it was able to do so using standard web technologies.

25. Les Enfants Terrible

Web design agency WeFail - known for its Flash work - has launched an HTML site and it's creepy, weird, and insanely cool. Les Enfants Terrible has edgy design with cool use of JavaScript for animation. One of the best features is the use of Ariel Flesler's jQuery ScrollTo plug-in, which allows easy scrolling to specific elements.

The use of the Shadowbox.js library for popping up videos is also a nice effect since it doesn't intrude on the user's experience like a normal browser popup would. It also has the added benefit of not being blocked by popup blockers.

Freak like me

One of other cool nugget is how they combined Shadowbox.js with the jQuery Cycle plug-in to create a flipbook of their work and also display some candid pictures. The guy in the creepy mask did freak me out a bit but I managed to look past him and check out some of their work.

"Les Enfants was put together to see how far you could push jQuery on the iPad before it ran into framerate issues," says site developer Martin Hughes. "It turned out that when combined with CSS Transform and GPU acceleration you could really get a lot of movement happening without running into trouble.

"It wasn't so long ago that this kind of UX would have been virtually impossible to create outside of Flash, but JavaScript's now a viable alternative that will keep getting stronger." It's one of the most original examples of JavaScript that we've come across.

26. Pinterest

Pinterest has got a lot of positive press lately and when you look at the site, you can see why. The layout allows users to 'pin' images to a virtual pinboard shared with the rest of the community.

This is made possible through the use of jQuery, jQuery UI and Jean-Sbastien Ney's PageLess jQuery plug-in, which allows endless page scrolling.

Pin head

PageLess is a vitally important to the UI as it keeps users engaged by providing a constant stream of pinned tiles on the screen as the user reaches the bottom. And as most sites do, Pinterest has included social sharing functionality to like, repin or comment on a tile.

There are other plug-ins being used for things such as tooltips but what stands out to me is the endless scrolling. It's really the secret sauce for keeping users wanting more.

27. Love Bomb Builder

How much do you love your friends? Do they do things that really rock but you're not sure how to express that to them? This is what Jess Klein and Atul Varma set out to help with when they created the Love Bomb Builder. It's a neat and simple website that lets you send a love bomb to someone who has done something really awesome.

Having worked with Atul before, I knew his code would be awesome and he didn't disappoint. In looking at the code, I immediately saw that he was using the Modernizr feature detection JavaScript library. I love this because it tells me he's being mindful of feature detection, which is the best way to take advantage of modern features such as the new HTML5 semantic tags.

But to me the coolest feature is the split-screen styling, which allows visitors to style up their love bomb in real-time. Don't like red? No worries. Go into the HTML and CSS source displayed on the left, make your changes and instantly see the results. This is rendered in an iframe and leverage's SVG for the dynamic redrawing. Very smooth and well done.

28. Smokey Bones

I'm definitely a meatatarian and I love me some ribs! Smokey Bones is actually one of my favourite places to hit up when I want a rib fix so it was great to see that it had a site worthy of listing in our examples of JavaScript. The design is great but I really like looking at code that powers the interactive side.

The first thing that caught my attention was the full-screen slider they're using to automatically switch between elements on the page. The code 3 slides divs in and out based on a timer, ensuring that a visitor will get a chance to see most pages on the screen.

Code and chips

Adding to this, they've also included keyboard navigation ensuring that not only can you scroll left or right but up and down! The really clever part of this up/down scrolling is that as you do so, it actually builds a canvas-based hamburger as well as showing a glass of beer being consumed. Seriously, you have to check it out. What I loved was that the team used the EXCanvas polyfill to allow non-modern browsers to have the same experience.

Definitely some great stuff going on here. Now I'm hungry!

29. Subjot

Trying to stand out in a sea of social networks isn't easy. The team at Subjot have worked hard to make sharing your interests easier through great use of client-side scripting.

They've included jQuery and jQuery UI to power dynamic UI changes that happen within the comment div elements. For example, clicking on the thumbnail of an image or video embedded in the comment box expands it and renders a bigger version of the image or a full-size, viewable video.

They've also used jQuery UI's modal dialog widget with drag-and-drop functionality to make entering new comments easy. And, to make it easier to choose a subject for your comments, they've added an Ajax-based select box, which dynamically offers you suggestions as you type.

Plug it in

"Subjot relies heavily on jQuery and plugins to make it responsive," says developer Becky Carella. "We use plug-ins such as validate, noblecount, autoresize, and infieldlabels. The mobile site was put together quickly using jQuery Mobile.

"We update notification counts in the background and will continue to add similar background loading to keep pages fresh. Our custom jQuery plug-in suggests subjects your friends already write to as you type. It helps keep similar jots grouped together and makes it easier to pick a subject."

The site is still fairly young and it's off to a great start. I can't wait to see what they'll add in the future to make the UI pop even more.

30. Chill

Finding new videos to watch is pretty easy nowadays. Just spark up YouTube or Vimeo and you'll have a wealth of 'stuff' to look at. But what about if you'd like to find videos that match your specific tastes? Wouldn't it be great to have a site that allows you to use the social aspects of the web to find videos that are specifically up your alley? Well, that's where Chill comes in.

Taking a cue from Pinterest, they've set up an amazing site that allows people to pin and categorise videos they find interesting.

Entering dialogs

To make the site look as great as it does took a lot of great JavaScript coding to provide the right user experience touches. Using the Dojo JavaScript framework, the Chill team was able to add some very cool dialogs based on Dojo's Dijit UI framework. Dojo doesn't get enough credit, but rest assured it is an insanely feature-rich JavaScript framework with an equally impressive UI sister library.

Michael Viamari, a web developer at Chill, says: "The bar for user experience in the modern consumer internet is now extremely high. That means that building great experiences on the internet is not just about working with and meeting today's standards, but also building for the future."

31. Wunderkit

Sometimes you just come across a site that makes you say, "Damn that is gorgeous!". That's how I felt when I came across Wunderkit.

Working like an app and not a website, Wunderkit aims to help you be a little more organised when it comes to your tasks. It's broken down into three apps; Dashboard, Tasks and Notes. Under the hood, you can see that a lot of thought went into optimising the performance of the site. RequireJS, a must-have for dynamic JavaScript resource loading, is being used to optimise the site.

DOM jolly

For DOM stuff, the team is using the ubiquitous jQuery (which is a great choice of course). And you can certainly see a lot of DOM interaction going on. For instance, when you create a new list, a new DIV is added to the panel and a form field is enabled for you to name your list.

In addition, an image is added that allows you to delete your list, which when pressed, creates a fly-out dialog prompt to ensure you want to actually delete it.

32. The Michelberger Booze

I may not be a drinker but I can certainly appreciate a cool site. The Michelberger Booze site is very neat in that it makes excellent use of the new trend in vertically scrolling sites.

From the very beginning, you see a preloader being used that would leave you to believe it's Flash-based. It's not! The preloader, a glass that gets filled with beer as the page loads, is actually an HTML5 canvas-based rendering that gets loaded via JavaScript.

Infinite probability

Infinite scrolling seems to be the new black in terms of site design. The site uses it to navigate users through a number of scenes that offer interactive features as you scroll down. The infinite scroll was made possible using the jQuery Waypoints plug-in, which lets you execute a function when you scroll to a specific element. In this case, scrolling down the page brings up different scenes that trigger off everything from rotating masks to glasses being filled with booze.

One part that I thought was just awesome was the forest scene. By clicking on the mask, you're taken to another section of the site that displays a man in the forest in front of a campfire. You actually see animated flames with smoke, rolling clouds and a rising moon: very cool effects done using jQuery's animate() method. Couple that with really beautiful artwork and you have one of the most aesthetic treats in our examples of JavaScript run down.

33. Air Jordan 20

Love 'em or hate 'em, sites with scrolling-based animation are all the rage at the moment. One of the most impressive and unique experiences recently has been the 2012 Air Jordan promo for Nike, developed by Blast Radius.

Laden with deconstructed trainers and hubristic metaphor, getting something like this to work smoothly without a huge load time is not an easy task. "This was tough," explains senior technical experience director Steve Bond. "The key piece of the puzzle was loading images at 50 per cent resolution for the main animations and then loading the full-resolution shoe images only after a user stopped scrolling."

Page behaviour

And it's not just the technical feats that take time to figure out. Actually planning the way the page is going to behave as the user scrolls is an iterative process between technical and creative. "The best work is done in collaboration," says Bond. "Our creative teams challenge our developers with a concept, or key interaction, usually accompanied with a few examples or sources of inspiration.

"Our development team starts prototyping, which helps suss out limitations. Instead of static mock-ups we worked with a motion designer who composed a detailed video in After Effects CS6 for us to work against."

34. Trello

Showing the polar opposite of cutting-edge JavaScript, Trello is a Kanban-style collaboration tool created by Fog Creek. Users can create task boards with 'to do', 'in progress' and 'done' states and share progress with teams in real- time. The stack on the server side is Node.js with MongoDB, with Backbone.js and Mustache templating on the client, so it really is JavaScript from end to end.

Trello developer Daniel LeCheminant explains how an all-JavaScript environment has given them an advantage: "It's easier to get new team members running because there's only one language to become familiar with."

Socket to them

Near-instant communication between Trello users is achieved using Web Sockets. Although they are seeing wider browser support, this still presented a few challenges.

"Web Sockets are a relatively new technology," says LeCheminant, "and the libraries we're using had some issues when being used at a large scale. It took us a few months after launch to get them working reliably enough.

"Fortunately, Trello is able to run using fast Ajax polling, so we were able to fall back to that while we were resolving the issues we had with the library, and we're currently using Web Sockets on all browsers that have support."

35. Remote Tilt

Remote Tilt is an incredibly useful development utility created by JavaScript wizard Remy Sharp. It offers a polyfill for detecting motion events on a desktop browser, by creating a connection between that browser and any mobile containing an accelerometer. Just embed a JavaScript file in the site you're testing and you're away.

If you don't have a mobile device to pair with there is also the option of using an emulator in a pop-up window, but obviously it's harder to get a feel for orientation that way.

Suspect device

Remy said that it wasn't particularly tough to get a consistent level of support across devices. "But I did have to do some hard (or hard for me) maths to get the number right, and I did spend several hours with a mobile phone in one hand tilting in all directions trying to ensure my numbers matched up correctly!

"I was made aware of a bug in older iOS versions whereby one of the axes in the Device Orientation event gives a reversed value. Luckily, however, I forgot which older iOS it was, so was never able to confirm the bug first hand!"

36. BrowserQuest

Created by Little Workshop for Mozilla, BrowserQuest is a loving homage to RPG video games designed as a demonstration of HTML5 and technologies such as WebSockets, which can support hundreds or even thousands of simultaneous users interacting.

As well as its purpose as a demo, it's quite a complex little game in its own right, with combat, achievements and a power-up system. "The primary goal was to show the capabilities of HTML5, JavaScript and especially WebSockets," Guillaume Lecollinet of Little Workshop explained to .net.

Retro appeal

"Creating a multiplayer game appeared to be a good way to showcase these technologies working together," he continues. "The classic top-down view and retro look is a tribute to games that amazed us as players - our favourite Easter egg is probably the clever reference to Valve's Portal."

Making it all work on the server side with thousands of players is a job for JavaScript too. "BrowserQuest relies on several Node.js servers," Lecollinet adds, "each running multiple instances of the game world. To balance server load players get directed to the least populated server, and then to the least populated world instance. This way, everyone gets to experience the game in roughly the same conditions, no matter how many players are currently online."

37. JS1k

JS1k is a (now) annual contest to build the most awesome JavaScript thing you can in just 1kb.

The 2012 theme was 'love', and has been won by Philip Buchanan with a beautiful, procedurally generated falling leaves demo. Amazingly, it was also Philip's first piece of JavaScript programming. "I'd been meaning to learn JavaScript for a while," he recalls, "so when I saw the JS1k competition it seemed like a great opportunity to get started."

Significant shrinkage

His first version, initially a luxurious 8kb, took an afternoon; weeks of tweaking and optimising got the size down. "The procedural generation of the tree was influenced by optimisations I used to get the demo under 1k," Buchanan explains. "Often a change to one meant re-writing the other."

To reach that byte target involved "clever abuse" of the language. "One tactic is avoiding in-built keywords. If there's an 'if (a) b else c' statement, using the ternary operator a ? b : c saves 8 bytes."

"Optimisations often become confusingly convoluted," Buchanan continues, "and writing code in the shortest form possible comes at the cost of performance, readability, and accuracy."

38. Timeline

Creating a usable visualisation of a timeline in a web browser isn't easy, with Flash typically being called upon for a smooth experience. But newer development techniques and the rise of HTML5 are making inroads into reducing the headache.

The timeline builder by Vrit.co for the Knight News Innovation Lab, is billed as being easy and intuitive to use. Users can pull in tweets and media from YouTube, Flickr, Vimeo, Google Maps, and SoundCloud. Timelines can be defined in JSON or, if you'd rather keep it simpler or let a non-technical author join in, use special Google Docs templates.

Embed a hosted version of your timeline or grab the files and host it yourself. By default, Stamen's duotone map tiles layer is used if you want to add mapping, but there are other options. The project is released under the GNU license and hosted on GitHub, so contributions are welcome.

39. jsPerf

When writing JavaScript for an application, we ideally want our code to perform as optimally as possible. Benchmarking performance has been a challenging (and sometimes unreliable) process in the past, but jsPerf helped changed that. Over the past year jsPerf has grown from strength to strength and now offers a wide range of new features to make benchmarking and learning from other developer's tests even easier.

A project by a 2011 .net Award nominee for developer of the year, Mathias Bynens, jsPerf provides us with an easy way to create and share test cases that benchmark the performance of different JavaScript snippets.

Backing up

What gave him the idea in the first place? "Frankly, I got tired of there being so much talk about JavaScript performance without any numbers or tests backing up those claims," he says. "So I decided to make it easier to create and share these test cases.

"The few performance test cases that were available at the time weren't easily comparable: some measured the operations per second, others measured the number of seconds per 10,000 operations, and then there were tests that displayed the results in the form of a score. All tests on jsPerf use the same benchmarking algorithm and output the results in a standardised way."

Some of the new features now supported include rich, interactive graphs and browser filters. We can now select from bar, column, line, pie and tables for displaying our results and then filter them down using different families of browser such as desktop, mobile and so on.

Direct results

Benchmarks can now (for the first time) also be easily embedded in external sites, so gone are the days of reporting a piece of code as optimal and including a screenshot of our results: we can now easily include the results directly in our pages so they're always up to date.

Searching for other developers' test cases, in case someone else may have already created a test we may wish to learn from, is now also a lot more straightforward with queries and syndication feeds being supported.

Finally, all of the PHP for the site has been open- sourced on GitHub, so you can easily make changes to it if there's a feature you'd like to add or improve. "So far the response has been great," says Bynens, "lots of pull requests with code improvements. I recommend checking jsPerf out as I find it an invaluable resource daily."

40. Nokia Maps 3D

By far, the most impressive example of WebGL I've seen so far this year is Nokia Maps 3D. Not only does it allow us to view the Earth in an astonishing level of detail, but almost everything on the map is rendered in 3D, complete with terrains, buildings and lighting.

Most major cities can be viewed on the map and we can zoom, pan and tilt without relying on any plug-ins. You'll need the latest version of Google Chrome to view it, but it's worth taking a look at just to see where the future of maps may look like.

41. Lights

Following hot on the heels of Nokia's foray into WebGL is Lights, an interactive music experience for singer-songwriter Ellie Goulding by Brighton-based company HelloEnjoy.

The WebGL-based site (powered by three.js) takes users through a vibrant-coloured terrain that vibrates and reacts to your mouse movements and acceleration.

You're in for a visual feast of light particles, explosions of colour and more, all set to the tune of Goulding's latest track Lights. Check out the site in the latest version of Google Chrome for the best experience.

42. Pandora

In a testament to how important HTML5 and JavaScript are becoming, music site Pandora recently announced a major overhaul to take advantage of client-side scripting.

Doing the typical view-source, it's amazing to see how many really great libraries are used to make the site run smoothly. Right off the bat, I found jQuery and jQuery UI. This makes sense because jQuery makes working with the DOM trivial, and jQuery UI has a great suite of UI controls and effects.

Frameworking

It makes a lot of sense for all of these libraries to be leveraged. Shifting from a Flash-based solution to a pure HTML, CSS and JavaScript implementation takes time and effort, and using well-established and proven frameworks is a great way to cut down on the work.

The decision to switch from Flash is an incredibly important indication of how powerful standards-based web technologies have become.

43. Memolane

Ever wanted to go back in time and remember what you said or thought at a certain moment? Wouldn't it be great if there was a place where you could look at everything you've said or done on all the sharing services you use?

That's where Memolane comes in. It enables you to link with most major social networks, including Facebook, Twitter and YouTube, and view your updates in a cool timeline. This is ordered by date and each bit of information hangs down from it like a leaf on a branch.

Using a navigation bar, you can scroll back and forth to see what actions you made on a specific day. The scrolling is also mouse enabled, so you can just click in the middle of the timeline to move around.

Walk on the client side

The site takes advantage of jQuery UI for a lot of its great interface features, as well as Mustache.js for client-side templating. It's great to see more sites using client-side templating engines to increase the maintainability of their code.

The site provides a great UI, made simpler by the 3 powerful code under the hood. "Without the push by browser manufacturers to improve JavaScript interrupters, we'd have to resort to Flash for such an advanced UI," says developer Cody Lindley. "In fact, if you look at timelines on the web, most people have done exactly that.

"Memolane squeezes all that it can out of the advances made with CSS3 and HTML5 and, in my opinion, we've created a UI that was once only doable with Flash."

44. Draw a Stickman

Lots of sites are all about being serious, but it's also important to have fun. The team at Hitcents has created a whole lot of fun via Draw a Stickman.

The basic idea is that you're given a virtual drawing pad, on which you can use your mouse to create little doodles. But it goes way beyond that. Once you've created your stick figure, it becomes animated and walks around until it finds a box. You then have to draw a key to open the box, revealing a surprise and... Well, I'm going to leave you to look at the site and find out what happens next. It's definitely worth it.

Vector it in

The ubiquitous jQuery JavaScript library is used, along with the incredibly versatile Raphal.js vector graphics library. The latter was critical because it helped ease the functionality needed to enable users to draw their stick figures. It also allowed the team to provide fantastic and fun animations.

Phil Williams, a developer at Hitcents, explains: "We used the Raphal JavaScript library to create SVG vector animations that run smoothly on the iPad, while falling back to VML graphics for older versions of IE. That enabled us to create an animated website that can be enjoyed on the vast majority of browsers and devices."

It's a really neat experiment, and something that kept me engaged for a long time. Granted, my drawing skills are terrible, but you shouldn't judge the website based on my lack of artistic talent.

45. Zui

As a parent, I'm always looking for a quality kids' site that's safe, entertaining and visually cool. Zui.com has these qualities and makes great use of JavaScript. Under the hood, the trusty jQuery JavaScript library powers DOM updates, almost par for the course nowadays, with so many sites utilising jQuery's easy-to-use API and terse syntax.

Also awesome is Mustache.js, an incredibly powerful client-side templating library. You define how your templates should look, use tokens to define where pieces of data will be filled in and then pass it over to Mustache for processing. It handles the heavy lifting, enabling you to build consistent UIs without needing a ton of code to generate the results.

In this case, it was used with home-grown code to produce a 'bento-style' UI, making it easy to place elements of various sizes within your page while still maintaining a consistent layout size. "We call the mixed-media search results bento boxes," says Will von Reis, CTO of KidZui. "The name is inspired by the Japanese lunch trays made up of different-sized rectangles."

Bin packing

"For the bento layout, mixed-media search results required us to implement a solution to the bin packing problem," says Von Reis. "We had to decide between doing this logic server side or client side. We played with different algorithms and eventually hand-rolled a JavaScript layout engine that achieves our bento layout bin packing using bit masks and bit wise operations. It enables us to serve more pages with the same backend servers and provide dynamic layout to our visitors."

I like seeing this kind of site making use of client-side technology to enhance the user experience.

These examples of JavaScript were originally published in .net magazine. To explore more examples of JavaScript visit their JavaScript content today.

Read these for more web design inspiration:

• CSS and JavaScript tutorials to power up your skills
• Amazing examples of HTML5
• Web design training: The top online tools

That's it for now! Keep checking back for more awesome examples of JavaScript. Have you come across a great example yourself? Let us know in the comments box below!