Archive for the ‘JavaScript’ Category

File Under: JavaScript

Web’s Most Popular JavaScript Library Drops Support for Older Versions of IE

IE voodoo doll by Cheryl Brind/Flickr.

The popular jQuery JavaScript library has hit a major milestone with the release of jQuery 2.0. The 2.0 release is some 12 percent smaller than its predecessor, but the big news is that jQuery 2.0 drops support for Internet Explorer 6, 7 and 8.

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.

File Under: JavaScript, Location

‘Hyperlapse’ Turns Google Street View Into Beautiful Short Movies

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.

File Under: Browsers, JavaScript, Web Apps

Mozilla, Epic Bring Unreal 3 Gaming Engine to the Web

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.

File Under: JavaScript, Web Standards

WebRTC Is Hard, Let’s Go Demoing

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.

File Under: JavaScript

How to Dynamically Generate a Table of Contents

One of the great things about structured content like HTML is that you can manipulate the structure to generate little extras like a list of links or a table of contents. With long form writing making something of a comeback in the last year or so, we’ve started to notice more tables of contents on the web, offering a quick way to jump down the page to the sections you want to read. Check out developer Steve Losh’s blog for a great example of a table of contents.

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.