Badass JavaScript

Looking to move from Flash to WebGL? IvanK brings the Flash API to JavaScript

Mon, 13 Feb 2012 11:39:16 -0800

Ivan Kuckir sent in a neat library to help Flash developers move to JavaScript.

I have made a graphics library to help people move from Flash to Javascript. It is something like EaselJS, but unlike EaselJS, all the classes, methods and properties come from Flash and unlike EaselJS, it uses WebGL (GPU) for drawing graphics (it is fast).

As he says, the API is heavily based on Flash so it will be very familiar to Flash developers. The library supports many common things, including a scene graph for mouse events over individual elements (not possible with plain WebGL without lots of work), text rendering, images, vectors and more. It’s all 2d at the moment but rendered on WebGL for speed. Perhaps it needs a 2d canvas fallback for IE9 though… The library touts its speed and mobile device support - things most Flash based apps can’t.

There are some library demos, but Ivan has gone even farther and made two fun games with it that certainly show the library’s power and performance. The first is “Crazy Bugs”, and it is a game where you must move a virtual net around to prevent the bugs from crossing paths. The second is called “Big Fish” and in this game you are a fish and you have to eat the smaller fish and avoid the bigger fish. Both are worth a play!

While the library is heavily based on Flash and he says Flash developers will have no trouble picking it up, it does have some documentation of its own for you to get started, and of course the demo source code. If you’re a Flash developer looking to move to HTML5, this library is certainly worth a look!

WebM and WebP Hand Ported to JavaScript for All Browsers

Tue, 07 Feb 2012 11:07:45 -0800

Dominik Homberger has been very busy over the last few months working on porting first, Google’s WebP image format to JS and today launching his WebM video decoder in JavaScript. No, these are not Emscripten compiled versions - these are hand ports directly from the original C++ source code. And yes, both of these ports work in all browsers, not just the latest Chrome and Firefox - all browsers. The WebP port works in IE6+ with a flash fallback for the canvas element, as well as, of course, Chrome, Firefox, Safari and Opera and the mobile browsers on Android and iOS. The WebM video port works in IE9+, as well as all the other browsers mentioned before including the mobile ones. That is seriously impressive!

WebP Decoding and Encoding in JavaScript

Let’s first discuss the WebP image port to JavaScript.

WebP is a new image format that provides lossless and lossy compression for images on the web. WebP lossless images are 28% smaller in size compared to PNGs. WebP lossy images are 25-34% smaller in size compared to JPEG images at equivalent SSIM index.

Unfortunately, at the moment the only browser providing native support for WebP is Google’s own Chrome, so if one wants to use WebP encoded images on the web they either have to encode PNGs or JPEGs as well, or use a library like WebPJS to fill the gaps in browser support. All one has to do to enable WebP support in all browsers is include WebPJS, and it takes care of replacing all the WebP images on the page with decoded equivalents on the fly.

Dominik told me that he didn’t know about Emscripten, the LLVM to JavaScript compiler at the time he started working on the project, so it is all hand ported, but that at one point he did try it just to see how it compared. He told me that the Emscripten version was actually much slower than he expected, as well as being 600KB in size. By comparison, the hand ported version is just 67KB minified, 27KB gzipped.

If you want to use the decoder in a more direct fashion rather than automatically replacing your images, you can check out the library behind it called LibWebPJS, which has a nice JavaScript API to the decoder. He has also ported the encoder to JavaScript as well, so you can encode a WebP image from a PNG or JPEG, as well as support for the lossless version of WebP.

WebM Decoding in JS

Wow, that’s a lot, but not enough it seems! He also ported the WebM video format to JS. WebM is a bit more popular than WebP so far (it is also older), and is already supported natively in Chrome, Firefox, and Opera. Dominik’s WebM port to JavaScript works in all modern browsers including IE9+ and mobile browsers, however your results in terms of actual framerate may vary across browsers and platforms. I get about 10fps in Safari and about 25-30 in Chrome and Firefox Aurora, so not too shabby for a first pass. On my iPhone 4S by comparison, while the video does play, I get about 1 frame per second, so certainly room for improvement there, but who expected it to even work at all?

We’ve seen H.264 and WebM playing in JavaScript before, but never hand ported - always Emscripten ports - and never working in all browsers. This is seriously impressive stuff! There is still some work to be done in terms of performance on some browsers, but the proof of concept is here. I can’t wait to see what comes next!

JS1k is back! Awesome JavaScript demos in only 1KB

Mon, 06 Feb 2012 09:13:30 -0800

I always enjoy watching JS1k, which, if you haven’t heard of it, is a JavaScript competition to make the best demo in under 1KB of code. It has been running for a few years now, and every time, it gets better and better with cooler demos, more judges and of course better prizes. This time, the theme of the contest is about love given that Valentines day is coming up soon, and we’ve already got some pretty neat demos. Here are my favorites so far. You can expect us to post about more as they come in!

1K Procedural Rose

Román Cortés does it again, this time with a procedural rose rendering in just 1018 bytes. Another of my favorite things about JS1k is all the learning and sharing that goes on. Román has written a fantastic blog post about how he made the rose, including all the rendering techniques and more. Definitely a must read!

Campsite Firefighter

Paul Milham made a neat demo that renders a fire with particles on a canvas, and if you mash the keyboard, you can pee on the fire to put it out. Be careful where you aim though, as how much you mash controls how fast it comes out. :)

Tunnel of Love

Alexander Prinzhorn brings us a nice demo showing a tunnel of love in just 535 bytes. That’s all there is to it!

Modern Art Generator

Clocking in at just 735 bytes, this is a procedural modern art generator for the canvas element. Very neat!

Hidden Love

Manel Villar made a neat demo that reveals a message as you move your mouse over it in 1017 bytes. Can you read it?

The Love Helix

Chris Heilmann submitted the love helix in just 459 bytes. I could watch this all day!

It is amazing to see what can be done in such a small amount of code. I just love the creativity everyone brings to their demos! We’ve seen some great ones so far, and I can’t wait to see more submissions as they come in. Don’t forget to check out the whole list of demos on the JS1k website, and to submit your own if you feel so called. Enjoy!

Weekly Badass JS Roundup #7

Wed, 01 Feb 2012 09:30:00 -0800

Welcome back to the weekly Badass JS roundup! As always, there is lots of JavaScript news this week, so lets dive in.

Ehsan Akhgari has a neat blog post on automatically converting a native OpenGL application to run on the web via WebGL using Emscripten.
Iced CoffeeScript is a fork of CoffeeScript that brings two new keywords to the language: await and defer, which make asynchronous programming much easier. It is certainly a neat idea, although it has yet to prove itself in practice!
The prolific LearnBoost team has released two new modules for Node, up and distribute which make it possible to perform zero-downtime code updates in Node.js which is nice in development as well because it is annoying to have to start and restart your server all the time. There’s a blog post going into much more detail about it too.
Jens Nockert is continuing his WebCL work, this time with a JS library that bridges the gaps between the various WebCL prototypes that vendors have made.
Jed Schmidt has released a Amazon DynamoDB binding for Node.js that looks pretty nice.
The 140bytes contest continues, this time with a version of Tetris in less than 140 bytes. Wow!
In case you’ve ever wanted a workaround for the lack of tail call optimization in JavaScript, here you go!
Backbone.js 0.9 has been released and Jeremy says it should be considered a preview for 1.0!
Twitter’s Bootstrap library has been upgraded to 2.0 and it is just packed with awesome stuff. Go check it out!
If you missed it, Ryan Dahl has released the reigns of gatekeeper of the Node.js project to Isaac Schleuter, author of NPM so he can focus on research more. He will still be involved with the project of course, just not in the day-to-day of deciding what goes into each release.
Not sure if this is new, but Joseph Gentle who was an engineer on the Google Wave team has released ShareJS which is an implementation of the Operational Transform algorithms for Node and the browser allowing one to make collaborative realtime editable applications. The example shows how you could build an Etherpad clone in just 4 lines of code! Of course, you can find the source on Github.
Firefox 10 now has some pretty awesome looking developer tools built right in. Check out this video for a nice walkthrough!

That’s all for this week! Did I miss something? Did you make or find something that is Badass JS worthy? Don’t hesitate to submit it. I promise to read them all. Have a nice week!

psd.js: You Guessed It - A Photoshop Document Parser in CoffeeScript

Tue, 31 Jan 2012 08:38:42 -0800

Ryan LeFevre has been working on psd.js, which is as you might have already guessed, is a Photoshop Document parser that works in both the browser and Node.js.

psd.js is a general purpose file parser for PSD files created in Photoshop. Given a PSD file, it can parse out information such as image size and color modes, image resources, layer info, image contents, etc.

It is written in CoffeeScript and can currently be used to pull out all sorts of information from the file, such as its header, all of the embedded image resources, the structure of layers and groups in the file, layer masks and more. It is early days for the project (only a few days old it appears), but it already has an impressive demo showing the ability to parse many PSDs, although there were a few that I tried that did not work.

When you drop a PSD file onto the demo page (which mean’s you’ll need Chrome or Firefox), the structure of the entire PSD file is printed on the right. Here is an example of psd.js in use:

{PSD} = require 'psd.js'
 
psd = PSD.fromFile './path/to/file.psd'
psd.parse()
 
for layer in psd.layerMask.layers
  console.log "Layer: #{layer.name}"
  console.log "Size: width=#{layer.cols}, height=#{layer.rows}"
  console.log "Position: top=#{layer.top}, left=#{layer.left}"

The goal of the project is to eventually be able to render the PSD to a canvas element, but that may be a little ways off since PSDs can have all sorts of layer effects, filters, and other complex things that one would need to implement. For now, it is just a parser for you to get information about the structure of the PSD out, but I can’t wait to be able to render the PSD directly in the browser and even perhaps get to turn on an off layers and maybe one day even perform Photoshop-like editing directly in the browser.

No one likes Photoshop (am I wrong?) as it it crashy and bug-ridden, but there are so many existing Photoshop files out there that whatever the photo editor of the future is will need to support the format. If that editor happens to be in the browser, it looks like psd.js will be there to help!

As always, you can check out the demo here, and the code on Github!

Morning Star: An Impressive Audio Synth in JavaScript

Mon, 30 Jan 2012 08:54:46 -0800

Morning Star is a monophonic bassline synthesizer controlled by a step sequencer, designed to run on Web browsers and made entirely with HTML5 and JavaScript (no Flash).

It uses Mozilla’s Audio Data API, and Google’s competing Web Audio API to produce sound in real time abstracting them with a library called KievII, which is a library containing both an audio DSP as well as various GUI elements that one might need in various audio applications. These elements include knobs, sliders and more all build with HTML5 canvas as a rendering engine.

The synth itself has many features including a step editor, piano roll, pattern control, recoding and playback, various effects and more. Your changes automatically get saved into localStorage as you’re editing so if you close your browser and reopen it your work will be just as you left it. You can even export a URL to your song to share and collaborate with friends.

Another interesting thing to note is that the entire UI is a single canvas element, which is an interesting choice and certainly a good experiment. Obviously there are accessibility problems with this approach since screen readers and other assistive technologies know nothing about what is in a canvas element, but otherwise it seems to perform pretty well.

As usual, the source code for Morning Star is available on Github, there is a blog post that goes into great detail about each feature of the synthesizer, and if you haven’t already, check out the demo. Happy Monday!

Seriously.js: A Realtime, Node-Based Video Compositor for the Web

Fri, 27 Jan 2012 09:00:00 -0800

We covered a demo earlier this week showing real time video processing with WebGL, but Seriously.js taking this concept even further: seriously!

Seriously.js is a real-time, node-based video compositor for the web. Inspired by professional software such as After Effects and Nuke, Seriously.js renders high-quality video effects, but allows them to be dynamic and interactive.

It features an optimized rendering path that is built with WebGL making it entirely hardware accelerated at 60 frames per second. You can use videos, images, canvases and pixel arrays as input sources to the compositor and then apply various video effects to the resulting image, and apply 2d transforms to any layer (3d is coming). The available effects are numerous ranging from chroma key and night vision to edge detection and other common effects. Additionally, and perhaps the best feature of the library is that you can add your own effects as plugins and use them just as you would the built in effects… In fact, the built in effects are actually just plugins themselves!

The demo combines a number of different effects and sources. The video is chroma-keyed so that you can actually change the background as it’s playing in real time, and then various effects are applied on top of everything changing the feel of the music video dramatically. There is a underwater scene, a night vision scene, and a creepy black one. I think this idea of user modifiable music videos is a very neat one indeed!

So want to get started with Seriously.js yourself? Luckily for you, there is a tutorial to help you out and even some documentation! So how easy is it to apply effects to an HTML5 video? This easy:

var seriously = new Seriously(),
    video = seriously.source('#myvideo'), // get video element by CSS selector
    target = seriously.target('#canvas'), // output canvas
    vignette = seriously.effect('vignette');

// connect all our nodes in the right order
vignette.source = video;
target.source = vignette;
seriously.go();

Obviously you can connect multiple nodes together in a chain-like fashion, adjust effect parameters and more, so check out the tutorial for all of that!

Who knew that JavaScript was going to be doing realtime video compositing and effects even a few years ago? Seriously.js is seriously impressive, it is open source on Github, and you should check it out… seriously!

Weekly Badass JS Roundup #6

Thu, 26 Jan 2012 08:53:05 -0800

Welcome back to the weekly Badass JS roundup! Lots of JavaScript news this week, so lets dive in.

Adobe proposes events for monitoring the downloading of Image resources which could be quite useful in many circumstances.
ES6, the next version of the EcmaScript standard that defines the JavaScript language has support for various types of collections beyond the standard Array and Object types. ES6 adds support for Maps, WeakMaps and Sets to the language. They aren’t available for use yet, but luckily Andrea Giammarchi has taken the time to shim them so you can use them today.
Drumkit.js looks like an interesting new framework for Node.js that allows you to share pieces of code between the server and client as well. Neat idea!
If you didn’t hear about it already, WebRTC has landed in Chrome! WebRTC is a new technology that brings realtime voice and video communication technologies to the web. Ever imagined building the next Skype without any plugins? Well now you can! You can enable it in the latest Chrome Canary builds in about:flags and then check out this demo!
We’ve been watching Mozilla’s PDF.js project with much interest, and they continue to pump out the Badass JavaScript. This time, it’s support for JPEG 2000 images using a handwritten JPEG 2000 decoder written in JavaScript. Very cool!
There are a couple of new slide decks for you to check out relating to new HTML5 features. Check out “The Edge of HTML5” by Eric Bidelman and “What’s New in HTML5 Media” by Paul Kinlan both of the Chrome dev relations team.
Zip.js is a JavaScript library that allows you to zip and unzip files in modern browsers (Chrome and Firefox).
Jed brings gettext style i18n localization support to JavaScript applications.
Ember.js 0.9.4 and Node.js 0.7.1 were released.
Mikeal Rogers of Node.js fame writes on “A new direction for web applications”, covering the history of the dynamic web and looking to the future of applications built with Node and other platforms.
Jens Nockert wrote two blog posts about various upcoming features of browsers that will make your computationally intensive apps much faster. The first, “Accelerating Javascript via SIMD”, covers a pet feature of his that may go into Firefox at some point. The second is an introduction to a series called “Tools for the next generation of Web Applications” and it covers lots of different technologies including SIMD, WebCL, RiverTrail and more.
Enyo, the application framework behind webOS has been open sourced!
The State of HTML5 Video is a nice site with various statistics about HTML5 video’s availability across devices and browsers that details some sub-features as well. Check it out if you do anything with HTML5 video!
Finally, JavaScript Jabber is a new podcast about everyone’s favorite language. I haven’t listened to it yet myself, but I’ve heard good things and the first episode has an all star cast!

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!

PhotoBooth Style Live Video Effects in JavaScript and WebGL

Wed, 25 Jan 2012 10:26:12 -0800

Ever spent hours in PhotoBooth just playing around with the cool live video filters and effects? Now you can do that in your browser as well thanks to Paul Neave’s cool HTML5 video effects demo! While you can’t yet use an actual webcam and perform the effects on your own image (although those APIs are coming - Chrome just released WebRTC and getUserMedia support a few days ago!), you can watch as the effects are applied to a prerecorded video using JavaScript and WebGL. Each filter appears to be a WebGL shader applied to a canvas element that gets its contents from an HTML5 video element. You can even take a snapshot, and just like in PhotoBooth there is a countdown, the screen flashes and you have your picture that you can download and share on various social networks. Pretty cool!

Perhaps the coolest part is that if you run the demo in the latest Chrome Canary build with the --enable-media-stream flag, WebRTC and getUserMedia support (added just a few days ago) are enabled and you can actually use your own webcam to take pictures of yourself and see the effects applied in real time. It is an impressive demo of the performance that WebGL gives us (I get over 100fps!) and the fact that soon we will be able to access the webcam in JavaScript without the use of any plugins like Flash!

Although the code does not appear to be open source, it is still a cool demo of what web technology is becoming capable of and I highly recommend you check it out (Chrome or Firefox are best)!

Resumable.js: Fault Tolerant Resumable File Uploads in JavaScript

Tue, 24 Jan 2012 09:00:06 -0800

Ever had an experience on a website where you’re uploading a really big file and its taking a while, you’re not quite sure how much its uploaded, and then after a few minutes of uploading, something fails and you have to start over again? With the new HTML5 file APIs and Resumable.js, this problem will be lessened thanks to our newfound ability to actually resume large file uploads where they left off if they fail rather than start over from the beginning.

Resumable.js works by splitting the file into multiple small chunks using the HTML5 file API and then uploads the chunks one at a time until the whole file has been sent. If any of the chunks fail to upload correctly, only that chunk needs to be re-uploaded. Additionally, it enables the user to pause and resume uploads without losing state, and even works if the user goes offline and then online again or even if the server crashes and restarts. Pretty cool! It supports both file inputs and drag and drop uploading, progress events, multiple simultaneous uploads and more. And the best part is that it isn’t some terrible flash uploader like we’ve seen for years. Awesome!

Here’s a video showing Resumable.js in use:

You can check out Resumable.js on Github here. Enjoy!

Font.js: A Powerful Font Toolkit for JavaScript

Mon, 23 Jan 2012 10:00:05 -0800

Mike Kamermans has been working on a little font toolkit for your JavaScript that is kind of akin to the built-in Image object but for Fonts. It gives you font loading events using a technique perfected in Mozilla’s pdf.js project, metrics information, and a better version of the canvas element’s measureText method with additional information such as height, bounding box, and leading.

A demo of the library shows that it’s pretty similar to the built in Image object in terms of usage. Here’s an example:

var font = new Font();
font.onload = function() {
    // measure some text
    console.log(font.measureText("some text", 14));
    
    // style an element
    document.querySelector("p").style.fontFamily = "'" + font.fontFamily + "'";
}

font.onerror = function(e) {
   alert(e);
}

// kick off the actual loading
font.fontFamily = "My Font";
font.src = "acmesa.ttf";

Feels right at home - a very nice API indeed! It works by downloading the font data with an AJAX request, parsing out some metadata to determine that it is indeed a valid font file and to pull out the metrics information. Then it inserts an @font-face rule into the page and a test DIV and polls the width of that DIV until it is no longer zero-width at which point it can determine that the browser has loaded the font and it is ready for use. Finally it calls your onload handler. See how much work you’re avoiding? :)

You check out the source on Github, and a demo here. Enjoy!

jsday, A Conference Dedicated to JS in Italy

Wed, 18 Jan 2012 11:27:00 -0800

Given the rising importance of JavaScript both in the development of web applications and as an all-purpose language, the Italian PHP user group GrUSP decided in 2010 to organize a conference fully dedicated to JavaScript, alongside the traditional phpDay conference. Much beyond any expectaion, the first edition has been incredibly successful, with over 300 visitors coming from all around Europe and sponsorship from big corporations and organizations, like Microsoft, Mozilla, Yahoo!, Opera and Sencha. The speaker list included Steve Souders (Google), Kyle Simpson (Mozilla), James Pearce (Sencha Touch, Facebook), Robert Nyman (Mozilla), Patrick Lauke (Opera) and many more. You can take a look at the videos of past talks at http://vimeo.com/grusp.

The 2012 edition of the jsDay (http://2012.jsday.it/) will be held in Verona on May 16th-17th. The call for papers will close on February 28th and we are still accepting submissions at: http://www.jsday.it/2012/call-for-papers.

Editors note: This was a guest post from the jsday organizers. If you are in the U.S., be sure you call your congresspeople about SOPA and PIPA!

Weekly Badass JS Roundup #5

Tue, 17 Jan 2012 10:59:00 -0800

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

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.
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!
Source Maps appear to have finally landed in Chromium.
Node-midi allows Node.js to do realtime MIDI I/O, for example to talk to an electric guitar or a keyboard. Very cool!
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!
Someone has implemented a .NET virtual machine in JavaScript. Wow!
Eric Bidelman of Google has released Filer.js, which is a wrapper around the HTML5 filesystem API with a nice UNIX-like API.
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!
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!
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!

2011: A Badass JavaScript Year In Review

Sat, 31 Dec 2011 07:21:00 -0800

2011 has been a great year for JavaScript. Web browsers have given us great new tools to use and we have taken web applications to new heights, competing with native applications and bringing sexy back to the web with countless impressive demos. A week or so ago, we put out a survey to all of you asking what you thought the most badass JavaScript demo of 2011 was. Of course, this would be a boring post if we just said what the outcome was, so we’re going to list the top JavaScript accomplishments of 2011 here, from demos to libraries and applications themselves. And to all of you in the JS community, Happy New Year and keep up the good work in 2012!

Coming in at the top voted JavaScript demo of 2011, we have JSLinux, the JavaScript PC emulator. I have to agree, JSLinux deserves the prize as it is very impressive. It emulates PC hardware entirely in JavaScript and includes a terminal to enter and run common unix commands. There is a file system as well, so creating directories works, as does writing text files with vi. There is even a built-in C compiler, so you can run your own programs in JSLinux as well! If you haven’t already, go check it out!

In terms of JavaScript tooling, JSHint has to get the award for this year. JSHint is a community driven fork of JSLint, Doug Crockford’s very opinionated JavaScript linting tool. Although Crockford may not like it very much, the rest of the JavaScript community has been very supportive of it, and I salute its developers for taking that risk to bring us great tools!

There have been many great WebGL demos this year, and in fact WebGL is even starting to see production use by big companies with the release of Google MapsGL. We saw glfx.js, which implements Core Image like filters in the browser using WebGL, impressively realistic water simulations, great music visualizations, Google Earth style 3d maps in the browser from Nokia, beautiful terrain generation demos and much much more. Libraries like Three.js and CSG.js continue to be invaluable tools to make these demos possible, and tooling is even coming along as well, with ThreeNodes.js, a visual WebGL scene editor in the browser. WebGL is bringing a whole new class of graphics applications, from games to Photoshop in the browser, and I can’t wait to see what 2012 will bring in this area!

Some of the most impressive demos of the year have been ported to the web using Emscripten, the LLVM to JavaScript compiler. This in and of itself is impressive, and shows that JavaScript is actually a pretty good compile target for the web. Byte codes? Who needs them! Anyway, we’ve seen some pretty awesome demos come out of this work including Broadway.js (H.264 in JavaScript at 30fps), Route9.js (WebM in JS), a speech-to-text engine, OpenJPEG (read: JPEG 2000 in the browser) and many more! Emscripten has brought about some awesome stuff, and I can’t wait to see what people do with it in 2012!

Another impressive demo and ongoing project of 2011 has been PDF.js which implements a full PDF reader using only web technologies. The PDF format is a conglomeration of many other formats, including image formats, font formats, compression and encryption algorithms and more, and thus PDF.js has become almost a repository of JavaScript implementations of these formats as well as just a PDF reader. It has gone from barely working to very full featured this year, and is not only a good demo of what web technologies are capable of, but a great learning tool for browser makers on the missing features of web browsers as well! Out of PDF.js, we have gotten dashed line support and even-odd fill rule support for canvas elements and probably even more bugs fixed, and coming down the pipeline are a better font loading API, and perhaps even a WebPrint API. I can’t wait to see what Mozilla does with PDF.js in 2012!

On the web audio front, we’ve seen quite a few great things in 2011. It all started with JSMad, the hand ported JavaScript MP3 decoder using the new Web Audio API from Google and the Audio Data API from Mozilla. After that, we saw an MP2 decoder, and the HTML5 Audio Test Suite from the fine folks at Soundcloud. And we saw Audiolet, which looks to be a very nice audio generation library, and Audiolib.js, which is a nice audio effects library. Finally, just recently my team at ofmlabs, released ALAC.js, the Apple Lossless decoder hand ported to JavaScript. You can expect more great things from us and everyone in the Web Audio community in 2012!

Well, this post is getting kind of long now, so I’ll try to summarize the remaining demos briefly though they are all super impressive and amazing! HTML2Canvas is a full HTML/CSS renderer in the canvas element which allows us to generate screenshots of live web pages for feedback purposes or otherwise. There are now multiple JavaScript VNC clients. Many image formats have been implemented in JS: PNG, JPEG, BMP, and GIF. My own PDF generation library PDFKit was released this year. A JVM has been implemented in JavaScript. Libraries like Backbone, Ember.js, SproutCore, and Cappuccino have gotten a lot better. The iCloud web apps have brought a high standard for native-like interfaces on the web. There is so much to love about the JavaScript community and things it brings us every year. You are the best.

Finally, make it your New Years resolution to watch Chris Williams’ excellent video, “An End to Negativity” and to better yourself and this community in 2012. Happy New Year, thanks for all your hard work this year, and keep it up in 2012 and beyond!

Happy Holidays From Badass JavaScript!

Sun, 25 Dec 2011 07:04:43 -0800

Merry Christmas and Happy Holidays from Badass JavaScript! I made an animated holiday greeting card for you all to enjoy, so check that out. It is built entirely with SVG and CSS animations, so it is entirely scalable and should even work great on the iPhone! I had originally animated the snowflakes as part of the embedded SVG document using JavaScript, but this turned out to be very very slow and used something like 98% CPU. I guess SVG performance is something browsers still need to work on in 2012! The result of this, is that I switched the snowflakes to image elements that load the individual SVG snowflake images, and are animated with CSS animations. This led to a very big performance speedup, especially in Safari.

Well, that’s all for now! Gotta get back to enjoying Christmas, and you should too! Once again, Happy Holidays from Badass JavaScript!

Weekly Badass JS Roundup #4

Wed, 21 Dec 2011 10:23:54 -0800

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

Maximiliano Firtman has put together a very nice mobile browser HTML5 compatibility table for iPhone, Android, BlackBerry, Symbian, iPad and more.
Dust looks like an interesting new templating engine.
Ariya Hidayat has released Esprima, a “blazing fast JavaScript parser” written in JavaScript. He claims performance gains over Narcissus and even parse-js (used in UglifyJS).
Evan Wallace has released another awesome demo of his lightgl.js project, this time showcasing “ambient occlusion lightmap generation” in WebGL. Awesome!
The discussion is going on about whether to include a huge pull request that brings await and defer keywords to CoffeeScript in order to help “tame” callback hell.
Vyacheslav Egorov of the Google V8 JavaScript engine team has written a blog post on how to optimize your JavaScript for performance in V8. Great resource!
CoffeeScript 1.2.0 has been released. Mostly a bugfix release.
Audiolib.js has a website now, and lots and lots of documentation. Check it out if you’re interested in generating audio in JavaScript.
Passport looks like a nice authentication system for Node.js, with support for over 30 different authentication strategies.
A LinkedIn engineer posted on “how to build a JavaScript VNC Client in a 24 hour hackday”. Out of this effort, came tcp.js, which is a Node.js proxy so that browsers can use real tcp sockets over the websocket protocol, and of course the actual VNC implementation, vnc.js.

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!

Additionally: We’re preparing a “best of 2011” post and we’d like your opinion on The most Badass JavaScript demo of the year! Please help us out. It doesn’t even have to be something written about on the blog. Thanks! :)

Have a great week, and Merry Christmas!

Introducing ALAC.js: An Apple Lossless Audio Decoder in JavaScript

Mon, 19 Dec 2011 10:12:00 -0800

Recently, Apple open sourced the original encoder and decoder for the Apple Lossless audio codec which is written in C/C++. ALAC is, as its name implies, a lossless codec, which means that it is compressed but does not lose any quality. When decoded, ALAC audio files are bit-for-bit identical to the original uncompressed audio file.

When our team at ofmlabs saw ALAC open sourced a few weeks back, we thought it might be fun to try to port it to JavaScript so one could listen to ALAC files in the browser. After all, some of us were also on the team that brought you JSMad, the JavaScript MP3 decoder a few months ago.

Besides porting over the decoder (by hand, not with a tool like Emscripten), we have been working on a little framework called Aurora.js, which handles the boilerplate of writing a codec in JS, from actually streaming the file from the server and implementing the bitstream classes, to finding the correct demuxers and decoders and playing back the audio through the browser’s audio API as abstracted by Sink.js. There are currently two competing audio APIs and a third in the works, so an abstraction like Sink.js was necessary.

We couldn’t do anything without a cool demo, so we built a site showcasing our two audio decoders, JSMad and ALAC.js, side-by-side. If you notice your CPU usage a bit higher than expected, that is actually not the audio decoder but the visualizer. You can click on the visualizer to disable it and see for yourself.

Because only Chrome and Firefox have an API for writing audio data, those are the only two browsers that the demo will work in. We are hoping that some agreement can be reached soon so that we have a standard API that other browsers will implement. However, these demos show that even if a browser does not implement a particular format, JavaScript is powerful enough to do the job and fill in the gaps. The HTML5 element is great in theory, but browsers all implement different codecs, which means that website authors must encode their audio files into a few different formats to get cross browser support. Because we can implement audio codecs in JavaScript, once we have a cross browser audio data API, this will no longer be the case and we can have just about any audio format in browsers without waiting for them to implement. Hurrah!

You can check out the code for ALAC.js on Github, and see our side-by-side demos here. Enjoy!

Weekly Badass JS Roundup #3

Thu, 08 Dec 2011 10:27:37 -0800

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

SproutCore 2.0 has been renamed to Amber.js to avoid confusion since the project has significantly diverged from the goals of the original SproutCore project. SproutCore 1.x will continue to be developed as a native-style application framework along side Amber.js’s more lightweight approach.
The “Move the Web Forward” initiative launched. If you ever wanted to get more involved with the web standards or browser communities, this is your guide!
The Opera developer blog rounded up some of the best Efficient JavaScript tips. Read this if you write JS!
Elm is another interesting language that compiles to JavaScript. It actually compiles to HTML and CSS as well as one of its goals is to abstract those completely such that they become like the “assembly” of the web. Its main distinguishing feature is its support for reactive programming, which looks really neat!
WebPJS is a JavaScript implementation of the WebP image format for browsers without support, going back all the way to IE 6. It also seems to have an encoder available which is pretty cool. Unfortunately, I couldn’t find the source code anywhere so if you find it, let me know!
David Calhoun wrote an excellent “Mobile Performance Manifesto” recently, which summarizes a lot of research that has been done. Read this if you do any mobile web development.
The fight to keep Google Dart out of WebKit is going strong. Google wants to enable multiple language runtimes in the browser, but most others are saying that this would fragment the web platform and that Google should make Dart compile to JS like so many other languages out there.
Paul Irish summarized some of the awesome new features in the Chrome developer tools. There are lots of hidden gems in there, so check this one out!
An interesting anonymous essay about Google’s possible intentions to take over the world with Native Client, which appears to be the new ActiveX. Remember, this is just a theory at this point, but it is an interesting read none the less.
PDF.js has finally gained text selection support. Check out the demo: it works surprisingly well!
JavaScript engines keep getting faster and smaller, and that is no exception for Firefox this week. We saw their type inference support that enabled the 30 fps rendering demo of H.264 in the browser recently, and now they are focussed on reducing the memory usage of JavaScript objects. A project called ObjShrink was just merged into Firefox this week which makes all JavaScript objects use up to 50% less memory! Pretty awesome.
The 4th IE10 preview is out with support for cross-origin XHRs, BlobBuilder support, typed arrays (YAY!), CSS user-select and video captioning. The IE team has been doing great work to bring IE back into the modern age, and it keeps getting better and better. Great work!
Speaking of IE10, it appears as though a bunch of proprietary IE technologies that have been available for quite some time are finally being disabled in IE10. These include VML (replaced by SVG support) and CSS filters. This is a very good thing!
And finally, my team at ofmlabs has written an article on “Why HTML5 Media is not Enough”, which is a call to browser makers and standards bodies to give us great low level media APIs. Please read it and tell browser makers to step it up!

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!

Have a great week!

csg.js: Constructive Solid Geometry 3d Modeling in JavaScript and WebGL

Mon, 05 Dec 2011 11:57:48 -0800

Evan Wallace, the same guy who brought us that amazing WebGL water simulation is back at it again, this time with a library called csg.js for doing Constructive Solid Geometry modeling in JavaScript.

Constructive Solid Geometry (CSG) is a modeling technique that uses Boolean operations like union and intersection to combine 3D solids. This library implements CSG operations on meshes elegantly and concisely using BSP trees, and is meant to serve as an easily understandable implementation of the algorithm. All edge cases involving overlapping coplanar polygons in both solids are correctly handled.

From the sounds of it, he wants to eventually build a 3D CSG level editor in the browser similar to UnrealEd (used by the amazing Unreal engine) and Hammer (from Valve). Very cool!

Here is an example of its usage:

var cube = CSG.cube();
var sphere = CSG.sphere({ radius: 1.3 });
var polygons = cube.subtract(sphere).toPolygons();

As you can see, this creates a cube and subtracts a sphere from it. A more complex example creates the following 5 solids:

With this code:

var a = CSG.cube();
var b = CSG.sphere({ radius: 1.35, stacks: 12 });
var c = CSG.cylinder({ radius: 0.7, start: new CSG.Vector(-1, 0, 0), end: new CSG.Vector(1, 0, 0) });
var d = CSG.cylinder({ radius: 0.7, start: new CSG.Vector(0, -1, 0), end: new CSG.Vector(0, 1, 0) });
var e = CSG.cylinder({ radius: 0.7, start: new CSG.Vector(0, 0, -1), end: new CSG.Vector(0, 0, 1) });

And then combines them all together into the final image:

With only this code:

a.intersect(b).subtract(c.union(d).union(e))

Pretty impressive if you ask me. Be sure to check out the demos, where you can actually drag the rendered output around to rotate it. The code can be found on Github and even annotated by Docco. Check it out!

Route9.js: A VP8/WebM decoder in JavaScript

Wed, 30 Nov 2011 09:51:34 -0800

The codecs keep being implemented in JS. We saw Broadway.js implement the H.264 codec in JS recently, and now we have a WebM decoder as well. Ben Schwartz was inspired by Broadway and wanted to learn more about the WebM format so he decided to modify Broadway to support VP8 as well. The result is Route9.js.

Like Broadway.js, Route9.js was compiled with Emscripten the LLVM to JS compiler. After decoding the clip, I get very good frame rates (about 30 fps) in Chrome while rendering to WebGL. So what about browsers without native support for WebM, where this would be most useful? Well, unfortunately there is still a little work to be done. At least in Safari, Float32Array does not exist and this hampers the demo. Luckily this can be shimmed with a regular array, and perhaps they will consider this in the future.

For now though, it is still another amazing demo of what JavaScript is now capable of in cutting edge browsers, and perhaps an outlook on the future of the web where browsers don’t need to implement tons of formats and codecs because they will be implemented in JavaScript instead. This is yet another example of why we should “always bet on JS” as Brendan Eich likes to say. Browsers just need to give us great low level tools and we will do the rest!

You can check out the demo here and the code on Github. Enjoy!