Archive for the ‘JavaScript’ Category

File Under: Browsers, JavaScript, Web Apps
Mar
28
2013

Mozilla, Epic Bring Unreal 3 Gaming Engine to the Web

By

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
Mar
21
2013

WebRTC Is Hard, Let’s Go Demoing

By

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.

Tags:
File Under: JavaScript
Mar
21
2013

How to Dynamically Generate a Table of Contents

By

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.

Tags:
File Under: HTML5, JavaScript
Feb
26
2013

Dropzone.js Adds Drag-and-Drop File Uploads to Any Site

By

New web technologies tend to travel a trajectory that moves from “amazing demo with fiendishly complex code”, to “very cool product feature” and finally to open source library that takes 10 seconds to add to your page. Today’s cutting edge demo is tomorrow’s jQuery plugin.

Take drag-and-drop file uploads for instance. The HTML5 File API ostensibly solves one of the most common complaints from web app users — why can’t I just drag and drop files like I do everywhere else? Well, then you could, but it wasn’t easy to build.

Then drag-and-drop file uploads became part of Gmail, which meant it was only a matter of time before a jQuery plugin appeared. In fact there are several jQuery plugins that cover this ground, but one particularly nice newcomer is Dropzone.js.

Dropzone.js makes it dead simple to add a drag-and-drop file uploader to any website, complete with previews of uploaded files. Dropzone also supports the traditional file-picker uploading as well; you don’t have to drag and drop.

Dropzone supports most modern web browsers, including Chrome 7+, Firefox 4+, IE 10+ and Safari 5.

If you’re interested, head on over to GitHub and grab the source code (obviously the plugin requires jQuery, but there is a version that will work with RequireJS as well). Also be sure to read through this Hacker News thread for some similar projects and possible alternatives for those who’d like to avoid the jQuery overhead.

File Under: JavaScript
Jan
17
2013

New ‘Registry’ Hopes to Simplify Finding, Sharing jQuery Plugins

By

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.

Tags:
« OLDER POSTS