Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

2011: A Badass JavaScript Year In Review

December 31st 2011

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!