IE voodoo doll by Cheryl Brind/Flickr.

Created to simplify the process of writing JavaScript and manipulating HTML, jQuery began life a mere seven years ago, but quickly found favor with developers sick of dealing with cross-browser JavaScript hassles. According to one survey published last year, jQuery turns up on roughly half of all sites on the web.

Will dropping support for older versions of IE change that? Probably not. If your site needs to maintain support for IE 8 and below (or even IE 9 and 10 running in compatibility mode) you’ll just need to stick with jQuery 1.9 or below.

“jQuery 2.0 is intended for the modern web,” writes jQuery’s Dave Methvin on the Query Foundation website. “We’ve got jQuery 1.x to handle older browsers and fully expect to support it for several more years.”

If you want the best of both worlds you can use a conditional comment to serve 2.0 to newer browsers and 1.9 to older ones, but the far easier way to go is sticking with jQuery 1.x. For now at least the primary use case for the 2.0 line is situations where IE support isn’t a consideration — think Chrome or Firefox add-ons, PhoneGap apps or node.js.

Hyperlapse: turning Google Street View into movies. Image: Screenshot/Webmonkey.

Hyperlapse is quite simply the coolest thing we’ve seen on the web in quite a while. Not only is it creative and beautiful, it’s a great reminder that there are still a few APIs left out there that allow you to make cool stuff.

Hyperlapse is a JavaScript library that stitches together Google Street View imagery to create short “hyper-lapse” movies (time-lapse movies with movement).

The code behind Hyperlapse consists of Hyperlapse.js, Mr Doob’s Three.js and “a modified version of GSVPano.js“. The project is the brainchild of Teehan+Lax, the same design firm that built the interface for Medium.

The site uses WebGL, so you’ll need a modern browser like Firefox or Chrome to see it and create your own.

The only thing Hyperlapse is missing is an easy way to embed your custom Hyperlapses in another page. In lieu of an actual Hyperlapse, here’s a video showing what’s possible.

Unreal 3 engine in Firefox.
Screenshot: Webmonkey.

Mozilla has partnered with Epic Games to bring the Unreal 3 gaming engine to the web. The result is a high-end gaming engine that could change the way you think of web-based games.

The Unreal 3 engine has previously been ported to Flash, but this is the first time a plugin-free (and therefore mobile-friendly) version has been built for the web.

Mozilla is hoping this project will help turn the web into a more serious gaming platform capable of running top-tier console titles.

Combining WebGL, Emscripten, a tool for compiling C++ apps into JavaScript, and the brand new asm.js, Unreal 3 for the web can, according to Mozilla, “rival native performance.”

While the Unreal 3 port is incredibly cool, there are still some stumbling blocks on the path to the web as a top-tier gaming platform, not the least of which is that load times for most games would be massive. Think hours, not minutes, to stream the complex graphics from a server to your mobile device — probably not something anyone particularly wants to sit through.

In other words, while Mozilla and Epic have made some impressive progress bringing Unreal 3 to JavaScript, it’s still going to be a while before you’re playing your favorite console games on the web.

However, Mozilla says it is “working with premium game publishers such as Disney, EA and ZeptoLab who are using the same technology to bring performance optimizations to their top-rated games.” The company is also hoping other browsers will make it possible to run the Unreal engine in their own JavaScript engines. The Chromium project is already discussing just how to do it.

For more on the project and to catch a glimpse of Unreal 3 running in the browser, check out the video below.

Conversat.io, simple video chat in your browser.
Image: Screenshot/Webmonkey.

WebRTC is changing the web, making possible things which just a few short months ago would have been not just impossible, but nearly unthinkable. Whether it’s a web-based video chat that requires nothing more than visiting a URL, or sharing files with your social networks, WebRTC is quickly expanding the horizons of what web apps can do.

WebRTC is a proposed standard — currently being refined by the W3C — with the goal of providing a web-based set of tools that any device can use to share audio, video and data in real time. It’s still in the early stages, but WebRTC has the potential to supplant Skype, Flash and many device-native apps with web-based alternatives that work on any device.

Cool as WebRTC is, it isn’t always the easiest to work with, which is why the Mozilla Hacks blog has partnered with developers at &yet to create conversat.io, a demo that shows off a number of tools designed to simplify working with WebRTC.

Conversat.io is a working group voice chat app. All you need to do is point your WebRTC-enabled browser to the site, give your chat room a name and you can video chat with up to 6 people — no logins, no joining a new service, just video chat in your browser.

Currently only two web browsers support the WebRTC components necessary to run conversat.io, Chrome and Firefox’s Nightly Channel (and you’ll need to head to about:config in Firefox to enable the media.peerconnection.enabled preference). As such, while conversat.io is a very cool demo, WebRTC is in its infancy and working with it is sometimes frustrating — that’s where the libraries behind the demo come in.

As &yet’s Henrik Joreteg writes on the Hacks blog, “the purpose of conversat.io is two fold. First, it’s a useful communication tool…. Second, it’s a demo of the SimpleWebRTC.js library and the little signaling server that runs it, signalmaster.”

Both tools, which act as wrappers for parts of WebRTC, are designed to simplify the process of writing WebRTC apps — think jQuery for WebRTC. Both libraries are open source (MIT license) and available on GitHub for tinkering and improving.

If you’d like to learn more about SimpleWebRTC and signalmaster and see some example code, head on over to the Mozilla Hacks blog for the full details.

Image: Penn Provenance Project/Flickr

Some sites no doubt generate their TOCs by hand, or assemble them server-side somewhere in the CMS, but building a table of contents doesn’t need to be complex or low level. In fact, so long as your HTML is well structured, you can easily generate a table of contents on the fly, using JavaScript.

Chris Coyier, of CSS-Tricks fame, recently posted a nice tutorial walking you through the process of creating a table of contents like the one used on Coyier’s CodePen site. The tutorial uses jQuery, but, with a little tinkering, you should be able to adapt the code to work with your favorite JavaScript library (or no library at all).

Here’s Coyier’s take on the benefits of using a dynamically generated table of contents:

1. It’s easier – write the JavaScript once and it can create the table of contents on every page you need it.
2. It’s more reliable – the JavaScript isn’t subject to authoring errors.
3. It’s still accessible – A table of contents is good for the general concept of accessibility, but it is a bonus (not having it doesn’t ruin the page) and nearly all screen readers run JavaScript.

For all the code, and a detailed explanation of what’s going on, head on over to CSS-Tricks.

JQuery, the crown king of JavaScript. Image: Roberto Verzo/Flickr.

JQuery greatly simplifies working with JavaScript, particularly for newcomers, and that has long made it a favorite with developers — roughly half of all sites on the web are using it. However, while jQuery itself simplifies things, finding plugins on the site has always been a huge pain.

In an effort to clean up and simplify the process of finding the perfect jQuery plugin, the jQuery project is launching a new site, the jQuery Plugin Registry. In a blog post announcing the new registry site, developer Adam Sontag says that the goal is to “reduce the… obstacles for plugin developers and consumers.”

Based on what’s currently available, the jQuery project has done a good job of building better back end tools for developers, but finding a plugin isn’t much easier than it was before.

Most of what’s new about the jQuery Plugin Registry is for plugin developers — namely Git support and very nice integration with GitHub. Developers can now publish their code to GitHub and the jQuery Plugin Registry will automatically be updated.

Unfortunately for those trying to find the perfect plugin to use on their sites the new Registry site has little in the way of new tools.

As with the old, much-neglected plugin site, each plugin gets a basic page that offers a download link as well as a link to past versions, documentation, the issue tracker, and the source code repository. However, actually browse through the site and you’ll discover that much of that info is often missing. Most jQuery plugins offer little in the way of documentation and the site still lacks any kind of preview images (if available there will be a link to a demo page).

The new site also ignores what could be helpful social tools — there are no user ratings, download counts, likes or anything else to indicate whether or not people actually like using a plugin. Of course now that the plugin registry code is on GitHub, it’s easy to see that issues regarding the site search and lack of screenshots have already been filed. When, or even if, they’ll ever make it to the site remains to be seen. For now the new site remains rough around the edges.

Amiga pinball wizard.

To view the emulator, which was written by developer Rupert Hausberger, you’ll need a browser with support for WebGL and WebAudio, as well as a few other HTML5 APIs. I tested the emulator in the latest version of both Chrome and Firefox and it worked just fine.

If you’d like to see the code behind the Scripted Amiga Emulator, head on over to GitHub.

Happy Friday afternoon time wasting.

This post with tweetable sentences highlighted by Save Publishing. Image: Screenshot/Webmonkey

Save Publishing is a bookmarklet that highlights any tweetable sentences on a given page. You can grab it from SavePublishing.com or head over to GitHub if you’d like to see the source (Save Publishing is written in CoffeeScript).

The bookmarklet is the work of former Harper’s editor Paul Ford, perhaps better known as @ftrain. Ford says the project started as a joke, but “now it’s serious and I use it all day.”

I expected the novelty to wear off quickly after I used it a few times, but now it’s been a few days and I still find myself using it. Sometimes the faintly ridiculous manages to become useful. What would make Save Publishing more useful is a way to use it within Twitter clients like Tweetbot, but thus far that’s not possible.

WT Monkey is in your photobooth.js, changin’ hues. Image: Screenshot/Webmonkey

The latest WebRTC hotness to catch our eye is developer Wolfram Hempel’s Photobooth.js, a JavaScript library for working with a device’s camera. Photobooth.js allows users to take pictures directly on your website, for example, to add an avatar. It also acts a bit like the OS X Photobooth app, offering real-time adjustments for hue, saturation and brightness (one word of warning, hue can really slow down Firefox).

Want to add a Photobooth-style camera app to your site? Just download Photobooth.js and add this code to your page:

myPhotobooth = new Photobooth( document.getElementById( "container" ) ); 

That’s it. Of course there’s a little more to do if you actually want to do something with your newly instantiated Photobooth — like capture images or resize and save them. But Photobooth.js makes the whole process pretty simple; see the documentation for more details.

Photobooth.js works in current versions of Chrome, Firefox, Opera, and any other browser that supports the WebRTC getUserMedia method. You can see a complete list of browsers that support getUserMedia over on caniuse.

Hempel’s code is available on GitHub (BSD license) and can be used as a standalone app or a JQuery plugin.