Badass JavaScript

Weekly Badass JS Roundup #5

Welcome back to the weekly Badass JS roundup!  Here is my link dump for this week.

1. I’m not sure this is new, but it was new to me… Grant Galitz has released a full Gameboy Color Emulator in JavaScript using the canvas element for graphics and the Web Audio API for audio.  Pretty awesome.
2. Popular iPhone game Cut the Rope has been ported to JavaScript by Microsoft of all companies and it is pretty darn impressive.  They’ve also written a little about their process and even open sourced a pretty cool looking resource loader as well.  You can expect a more in depth analysis of the game and how it was made in a future post right here on Badass JavaScript!
3. Source Maps appear to have finally landed in Chromium.
4. Node-midi allows Node.js to do realtime MIDI I/O, for example to talk to an electric guitar or a keyboard.  Very cool!
5. I think I’ve mentioned this before, but Fabric.js from the widely known and prolific Kangax has gotten some updates.  It now supports both importing SVG to canvas and outputting back to SVG, some complex text effects and more.  One to watch!
6. Someone has implemented a .NET virtual machine in JavaScript.  Wow!
7. Eric Bidelman of Google has released Filer.js, which is a wrapper around the HTML5 filesystem API with a nice UNIX-like API.
8. Yehuda Katz thinks JavaScript needs blocks, as in the blocks that Ruby and other languages have.  I disagree, but it is an interesting article none the less!
9. Google is working on a Speech API spec that they have submitted to the W3C, which would allow JS developers to incorporate speech recognition and synthesis into their apps. Sounds good to me!
10. I’ll leave you with a few podcasts to listen to.  First we have Chris Williams and Matthew Podwysocki talking about the JS community and other cool stuff - a good listen.  Of course we have the latest NodeUp episode all about databases and how they relate to Node.  Finally Mikeal Rogers of Node fame has been interviewing other people of Node fame on CurlyBraceCast.  The interviews are very in depth and highly worth a listen!

That’s it for this week!  As always if you have something you’d like to tell us about - something you think is Badass JS worthy - don’t hesitate to let us know!

P.S. JSConf tickets will go on sale tomorrow at 3PM EST (UTC-5).  Don’t miss them!

LimeJS: A New HTML5 Game Engine

What follows is a guest post by Olavi Tonisson from Digital Fruit, the makers of LimeJS.

Only few days ago web and mobile developement company Digital Fruit has released under Apache open source licence HTML5 game engine LimeJS. Our desire to create game toolkit was initially driven from lack of tools for developing HTML5 based games generally and specially for touchscreens (iOS, Android). LimeJS’s goal is quite clear and simple: to provide an easy way to build good game experience without thinking about inner workings.

There were two main questions what we tried to solve. First, how to make HTML5 based game experience so close to any Flash game or native game on modern smartphone that regular user will not see difference. Secondly, how to bring development time (and therefore cost) of game to similar level what Flash games enjoy today. I think we succeeded in both of our goals. 

You can go and check it out from Lime JS webpage http://www.limejs.com. 

From the editor: LimeJS looks like another great entry into the HTML5 gaming space.  It is based on the Google Closure library, and supports rendering to both the DOM and to the HTML5 Canvas element.  There are some nice demos of LimeJS here, and an excellent programming guide here.  The code is availalble on Github.

Today in JS Episode Four: iOS 4.2, HTML5 Canvas, and More!

Welcome to Today In JS, a list of the best JavaScript news since the last installment.  Enjoy!

1. jQuery Mobile 1.0 Alpha 2 was released
2. Node-Inspector - like Firebug for Node.js
3. SproutCore 1.4.4 was released
4. EcmaScript Harmony Proxies are going to be awesome!  Creator of JS, Brendan Eich discusses them in detail on his blog.
5. IE9 platform preview 7 is out with MAJOR JavaScript speed gains. It may even be faster than Chrome’s V8 engine now.  Impressive.
6. Online HTML5 book from the Chrome team, 20 Things I Learned.
7. Processing.js has reached 1.0! Now with full 3D context support
8. Nudity detection with JavaScript and HTML5 <canvas>
9. CoffeeScript 0.9.5 was released with 1.0 planned for release by Christmas.
10. WebGL Inspector - like Firebug for WebGL. Awesome!
11. Safari on iOS 4.2 has support for capturing accelerometer/gyroscope data, websockets, printing support, Typed Arrays, onhashchange and HTML5 history support, canvas ImageData support, and more.  Awesome release for mobile web development!
12. Gtk3 vs HTML5
13. Browserling: Interactive cross-browser testing in your browser based on StackVM.  Very cool work!
14. xc.js is a framework for building HTML Canvas games in JavaScript with backends for HTML5 Canvas and iOS.
15. HTML5 for game developers, a talk by Michael Mahemoff of Google.
16. Paren-Free - Brendan Eich discusses the possible removal of parenthesis around control structure heads.
17. “When can I use…” got a massive update including mobile browser information.
18. Video of “Don’t write spaghetti code in server side JavaScript” by @sh1mmer from JSConf.eu.

Bonus: Example Applications using Accelerometer Data in iOS 4.2

Developers have been busy checking out the new accelerometer/gyroscope events that can be captured in iOS 4.2, and have built some pretty cool apps.  Here are some examples (load them on an iOS 4.2 device like an iPad, iPod touch, or iPhone).

1. A population projection visualization using SVG and the accelerometer.  Here is a video of the app in use if you don’t have an iOS 4.2 device.
2. Zachary Johnson has created a CSS 3D physics simulation using the accelerometer data.
3. Robert Dougan used the data to build a autoscrolling list using Sencha Touch that scrolls based on the accelerometer data.  Awesome!
4. Daniel Rapp has a tweetable-sized bookmarklet that enables dynamic page rotation thanks to the new iOS web-accelerometer API.

Am I missing something?  If you have a project or article that you think should be included here or as a full article, please let me know by submitting a link.  Thanks!

Face Detection in JavaScript via HTML5 Canvas

You have probably seen face detection at work in programs like iPhoto and Picasa, but what if you could do that performantly in JavaScript?  Chinese developer Liu Liu has done the honors, and implemented the algorithm using the canvas element.

The algorithm is implemented on top of a JS port of a C-based computer vision library by the same author.  It works off a grayscale version of the image, and seems to be quite reliable in detecting faces in photographs.  The demo then draws a red box around each face in the picture, but the library could be used to do much more interesting things with this data.

You can imagine the likes of Facebook using something like this to help you tag photos sometime in the future, and if the algorithm could figure out who each face in a picture belonged to, the possibilities would be endless - and maybe a bit scary!  With faster JavaScript already here, and awesome APIs like canvas, we will soon see even more cool things like this in the wild!  It is an exciting time to be a JavaScript developer.

You can check out a demo of the face detection algorithm, for which the only server-side code is a PHP proxy.  The code is also available on Github.  Impressive work!

Biolab Disaster and the Impact Engine: Build Incredible Games With Canvas

Dominic Szablewski has created an awesome canvas game called Biolab Disaster, which is extraordinarily performant.  It works in all modern browsers (including IE9) with varying framerates, but never much below 30fps except on mobile devices (very acceptable).  It was built using Dominic’s own Impact Game Engine which includes a level editor to make designing games very easy!  While Impact and the level editor are not yet released, Dominic has recorded a short video showing how the game was made.

Be sure to check out Biolab Disaster, the Impact engine, and a more detailed post about the creation of both technologies on Dominic’s blog.  Awesome work!

PaintbrushJS: Client Side Image Filtering For The Masses

Dave Shea, who you might remember as the guy behind the CSS Zen Garden, has written an interesting JavaScript library that makes it easy to apply Photoshop-like image filters on the client side using the magic of the canvas element.  Once you’ve included the script on the page, all you need to do to get the effects working is apply some classes and HTML5 data attributes to the images that you want effects applied to.  PaintbrushJS automatically takes care of rendering the effects and sending the processed image back into the element.  It works on both image elements and background images alike, so no matter how you’ve built your HTML you should be all set to add effects right away.  Here is an example showing how to apply a gaussian blur effect to an image:

<img src="image.jpg" class="filter-blur" data-pb-blur-amount="0.5">

As you can see, you add effects through class names and set their attributes through HTML5 data attributes.  The filters currently available are:

1. Gaussian Blur
2. Greyscale
3. Noise
4. Posterize
5. Sepia
6. Tint

As you can see in the demo, PaintbrushJS is pretty fast, applying filters on all 24 of those images before the page is even finished loading.  The most impressive of the filters is the Gaussian Blur implementation, which is generally quite a processor intensive filter, but can be done very quickly and efficiently by PaintbrushJS.  Even on slower devices like the iPad, the effects render quickly enough so that the user hardly even notices.  Very impressive!

You can check out a PaintbrushJS demo here, the documentation here, and the code on Github.  It is exciting to see more and more traditionally static effects come to the browser thanks to the magic of JavaScript!

jQuery Mobile: A New Mobile Framework That Shows the True Power of the Web

The jQuery Project has just announced a new mobile framework called jQuery Mobile to be available later this year.  The project is really aiming big, since it will not only support iPhone and Android like some projects, but a full spectrum of devices including devices running iOS, Android, Blackberry, Samsung Bada, Windows Phone 7, Palm WebOS, Symbian, and MeeGo.  To me, this is the most exciting aspect of the project, and it shows off the power of the web as a write once, run anywhere platform.  As more devices come out and support is added to jQuery Mobile, your app will automatically just work on those platforms - no work necessary for you!

The following paragraph is an excerpt from jQuery’s Mobile Strategy, and it says really well why a true cross platform framework like this is absolutely necessary.

It’s important to note that in the jQuery project we see no reason to limit ourselves to a few of the top mobile browsers (the iOS Browser and Android, most notably) simply because it doesn’t take into account the full scope of the mobile market. The Blackberry browser, Opera Mobile, Fennec (mobile Firefox), and Mobile Internet Explorer are all very actively used; ignoring them would be a great disservice not just to those that wish to develop for those browsers but to the larger mobile open web.

The devices supported by jQuery Mobile are determined by the project’s Mobile Graded Browser Support Chart which assigns a grade to each browser based on a test suite.  The browsers graded A or B will be fully supported by the framework.

The framework itself will combine jQuery Core and jQuery UI to create a touch framework that works across all devices.  This means that you will be able to use the jQuery you know and love (the selector engine, the DOM manipulation, the animations, etc.) without having to worry about it working across all of these wildly different browsers and devices.  Additionally, the jQuery UI project is working to create touch enabled widgets and layouts that not only work across all devices, but look good and fit in with the surrounding environment of the device.  If you know how difficult it is to build a cross browser UI framework for 4 or 5 desktop browsers, you can imagine how difficult it is to build and test a cross platform UI framework for more than a dozen mobile browsers, all with major limitations.  Not a task for the feint of heart!

The project has already released some initial UI designs for controls that work across smartphones, tablets, and the desktop.  Besides having a great looking default theme, all of the UI controls will be completely themeable and customizable using the jQuery UI Themeroller tool which makes this task incredibly easy to do.

I am very excited to see where this project takes the mobile web.  It has the potential to unite all of the modern mobile platforms under the sun with a single development tool.  This is great for both developers and users, and it is a great step in the right direction for the open web as the platform of the future!

You can check out the announcement of jQuery Mobile here, the jQuery Mobile website here, and jQuery’s Mobile Strategy here.  Exciting work!

DeviantArt Muro: An Awesome New HTML5 Drawing App

DeviantArt has a brand new drawing app called Muro, and no it isn’t a desktop app or even a Flash or Silverlight based one, it is written entirely using standard web technologies.  This is a great showcase of the power of HTML5’s new canvas element to do both vector and pixel based image manipulations.

Muro has many of the features of professional desktop drawing applications such as Adobe Illustrator, including 21 different brushes, layers, Photoshop like filters, undo/redo and the ability to export your drawings as image files or save them directly to your DeviantArt account.  Another cool feature is its ability to interface with a Wacom tablet that many artists use.  It does this through a plugin that gives JavaScript access to data from the tablet.  Chances are, if you have a Wacom tablet you already have this plugin installed, so you don’t need to worry about installing anything extra.  Muro has a basic and a pro mode, both of which are free, however, if you want to get more brushes, you will have to pay a small fee.

Because Muro is a web application, it also works on the iPad.  This gives you a more direct experience with your art since you are touching the screen exactly where you want something to appear.  The cross platform nature of the web is what makes it a powerful computing platform.

It is exciting to see full-featured HTML5 applications get developed.  Muro is a testament to the power of these new technologies not just as a platform for shiny technology demos, but for full-blown applications that compete with desktop and plugin based apps.

Very impressive work, and from a well known site to boot!  Be sure to check out Muro and view some impressive examples of art created with the new tool, as well as dive in and start drawing yourself.  It will be exciting to see the art created with this new tool!

Water Ripple Effect in Canvas

Sergey Chikuyonok has another cool HTML5 canvas demo, this one his submission to the JS1K competition that we covered last week.  The effect is implemented in 1003 bytes of uber-compressed badass JavaScript for the JS1K competition, however, he also has another demo using the image you see above on his website.  The code is a port of a Java version of the same algorithm, and is 186 lines uncompressed.  

Very impressive!  You can check out the JS1K entry here, the version with an image here, and the uncompressed source code here.

Get Your Badass JavaScript Hat On - Enter a Contest and Win Fame and Fortune!

There have been a surprising number of JavaScript related contests popping up in the past week, so it is time to get out your Badass JavaScript hat and code up an awesome demo, maybe winning fame and fortune while you are at it!

The first of these contests is the Nettuts HTML5 contest (meaning you can use every cool new web technology under the sun!). There is a total of $7000 in prizes in this competition with the gold prize at $600 plus a bunch of other stuff, as well as two runners up getting $200 apiece along with other cool swag. To enter the contest, you must create an awesome demo using some of the cool new HTML5 APIs and submit by August 23rd. Get to work!

The second contest currently accepting submissions is 10k Apart, which is all about seeing what you can build in less than 10 kilobytes of HTML, CSS and JavaScript. This contest is sponsored by Microsoft and An Event Apart, so they expect that your app work and take advantage of the features in the new IE9 platform preview release. There are over $10k at stake here, with the grand prize winner receiving a $3000 visa cash card, registration to any “An Event Apart” event, and a copy of the new book, HTML5 for Web Designers by Jeremy Keith. There will also be three runners up in this competition, each one receiving a $1000 visa cash card along with the other aforementioned non-cash prizes. Fame and fortune are to be had here, and the deadline is August 25th so get cracking!

The last contest has less fortune but possibly just as much fame involved as 10k apart, but as it’s name, JS1K implies, it is about what you can do in only one kilobyte of JavaScript. There are currently no prizes at stake here, but fame lies in the smallest and the coolest JavaScript demo - extra points for fitting it within a single tweet! The deadline for JS1K is September 10th, and the winner will be announced at JSConf EU.

I think it is really cool that there are so many awesome contests for JavaScript developers, and I can’t wait to see the cool projects that come out of them. You can be sure that we will be posting about the cream of the crop here!