Badass JavaScript

The JSConf 2012 videos are being released!

Wed, 25 Apr 2012 09:28:36 -0700

Well the title pretty much says it all, but I thought I’d let everyone know that the JSConf 2012 videos are beginning to be released. JSConf is one of the premier JavaScript conferences that always sells out within a few seconds, so if you didn’t make it this year, you’re in luck because they always record the talks and release them for free after the event. I wasn’t there this year, but I heard excellent things about the talks and the rest of the event as well. I’m sure more videos will be released over the coming days and weeks so watch the website and Twitter for details!

WebKit.js: Yes it has finally happened! Browser Inception is now possible.

Sun, 01 Apr 2012 10:14:00 -0700

I knew this was going to happen eventually, it was just a matter of time. WebKit has been ported to JavaScript, and no, this is not just some Emscripten compile, it is a full hand port of the popular browser engine to JS. WebKit.js uses WebGL as a rendering backend and basically enables developers to never worry about browser differences again since we can now control what browser our users are using on our site. Of course, it includes fallback renderers in 2d canvas and by generating PNG images on the fly for older browsers as well. The idea is a bit like Google Chrome Frame, except rather than a plugin that users need to install, it can be used by the developer to control the browsing environment of all users of a website - pretty neat. With no more cross browser differences, no more different prefixes for each browser, no more worrying about old browsers, and no more testing in 17 different browsers, I think WebKit.js could perhaps be the future of the Internet.

Of course, this has some standardistas on their soapboxes about why monoculture is bad for the web, but the ease of development that it enables for developers will probably win out in the long run.

WebKit.js is a full browser engine with full support for everything in WebKit including HTML, CSS and even a full JavaScript engine - written in JavaScript of course. Why do we need that? The same reason why we need it for HTML and CSS - cross browser compatibility. If the JavaScript engine is the same across all browsers, we won’t need to worry about cross browser differences again.

Of course, WebKit.js is fully opensource on Github, so you can go read its glorious 250,000 lines yourself. And don’t hesitate to start using it on all of your websites. All you have to do is include a script tag at the top of your page and it will be rendered using WebKit.js instead of whatever browser the user visited your site with. Enjoy!

Update: This was an April fools joke. Sorry if it got you. :)

SQL.js: SQLite Compiled to JavaScript via Emscripten

Tue, 06 Mar 2012 11:49:03 -0800

Alon Zakai, the creator of Emscripten is back at it again, this time releasing SQL.js, which is a compilation of SQLite to JavaScript using his own tool. The demo page shows it in use, and if you view source, just how easy he’s made it to use after it has been compiled.

var db = SQL.open();
var data = db.exec(command);

You can run any SQL queries you can think of and it will work just like it does natively. Pretty cool! Perhaps he can even get it to work such that data is stored in IndexedDB, giving us a WebSQL polyfill at some point? Anyway, I thought this was worth a quick mention! Nice work.

First Look: Blossom - A SproutCore Spinoff Using Only HTML5 Canvas For Rendering

Fri, 02 Mar 2012 09:10:51 -0800

SproutCore has always been an interesting project. It is the application framework behind Apple’s impressive iCloud apps, and the MobileMe ones before that, as well as many other high profile projects. The SproutCore view layer has gone through many revisions. At one point it used Ruby templates combined with CSS, and then it switched to a JavaScript only system, which still used embedded HTML and CSS to layout and construct views.

Erich Ocean, a SproutCore contributor since the early days, and others have been hard at work on a new fork of the SproutCore project called Blossom, which reimagines the view layer without the use of any HTML or CSS. How does it do this? It renders the entire view structure of your application on a giant HTML5 canvas element. Perhaps this seems crazy, but it has quite a few benefits over traditional HTML and CSS.

Firstly, it abstracts all browser differences away at the lowest level and makes more complex views that were not possible or very difficult to create with HTML and CSS much more manageable. Once this has been abstracted, building views on top of it can be much easier for both application developers as well as framework authors, leading to better, more maintainable applications.

Secondly, it’s fast. Modifying the DOM is about the slowest thing you can do in the browser, and unfortunately it’s probably the most common as well. There are some performance issues with drawing everything to one huge canvas, so they have separate canvas contexts for each view that then get composited back together at the final step in rendering using drawImage. This style is akin to the way Core Animation works in Apple’s Cocoa framework, and in fact, GPU accelerated 3D transitions are possible in Blossom as well.

Obviously, when not rendering to HTML and CSS, you have to manage everything yourself, from hit testing of views, to all the nuances of text handling including all the platform native keyboard shortcuts.

This isn’t the first time we’ve seen an attempt to create an entirely canvas based view pipeline, but it certainly the most ambitious. Back in 2009 when Dion Almaer and Ben Galbraith were working at Mozilla on the Bespin code editor (now Ace), they also started work on a framework they called Thunderhead, which worked like this. Ultimately, they didn’t get too far on it, so Blossom seems to be the next step in proving if this approach is viable.

Of course, Blossom is a fork of the original SproutCore project, and so it brings over all the foundation frameworks that underly it including the famous support for bindings and observers that have now made the other more lightweight fork of SproutCore, Ember.js popular as well. It also contains the datastore frameworks as well as some new build tools written entirely in JavaScript using Node.js.

The number one question people ask about creating applications in canvas is about accessibility. Screen readers don’t know what’s going on within a canvas element, but luckily, the framework can take advantage of WAI ARIA by embedding a DOM subtree inside the canvas element specifically to enable this, however nothing is rendered via this DOM and it is invisible to the user. I’ve long thought that JavaScript needed an API to directly communicate with assistive technologies, and perhaps frameworks like this will shed light on a use case for that.

So how does this perform on mobile browsers? Unfortunately, the answer is not so well, so mobile browsers are unsupported. However, Blossom does have another strategy for mobile, which is to package up the applications as native iOS and Android apps. This doesn’t mean simply wrapping the application in a WebView and shipping. For performance reasons, and since the canvas API is easily reproducible on these platforms, all rendering will use the native rendering pipeline on those platforms. This is the result of not having any DOM to worry about, all you need is a JS engine, and seems like it could be pretty cool!

As for desktop browsers, Blossom will run on all modern browsers supporting the canvas element, which in practice means everything except IE8 and below. IE9 is not currently working (IE10 is), but there is no reason why it couldn’t in the future.

SproutCore has turned into many things, and there are now at least 3 different frameworks based directly on it. The original SproutCore 1.x line is still in use at Apple and many other places, but SproutCore 2.0, now Ember.js is perhaps gaining even more traction as a lightweight version of the framework with only the most powerful features baked in. Blossom joins the party, staying much more heavyweight than say Ember, but also containing a lot more features and a powerful view layer for desktop-class applications in the browser - SproutCore’s original goal.

Blossom has just reached beta status and if you were a hardcore SproutCore 1.x developer you should definitely check it out. There is also lots of cool code to read in the Blossom repo on Github, and some demos to check out if you install it on your own machine. A full release for end users is scheduled for May at JSConf. There’s lots of cool stuff coming down the pipeline for Blossom, including a Cassowary constraint solver that will be useful for layout, so we’ll be watching for sure!

CoffeePhysics: A Fast New Physics Engine Written in CoffeeScript

Wed, 29 Feb 2012 11:15:00 -0800

Justin Windle has just released a new physics engine called CoffeePhysics, which as it’s name states, is written in CoffeeScript. It is quite lightweight (minified, it’s just 8KB), but also very powerful.

There are a number of demos that show the performance and features of the library, including attraction, collision, cloth simulation, a balloon of balls around your mouse, and a chain following the mouse. I’m getting around 60 frames per second or more in most of the demos in Firefox and Chrome, which is pretty darn impressive.

The source code is very readable, as CoffeeScript often is, and seems very modular and well architected. There are multiple renderers available as well, the most important of these being WebGL, but there is also a canvas 2d renderer as a fallback, and perhaps a DOM renderer in the works (for really old IE?). It sounds like 3D support is in the works as well. In the demos posted online, only the WebGL renderer is used, so make sure you check those out in Chrome or Firefox (it does not appear to work in Safari). The demo source code is all in the repo, so make sure to check that out as well!

I reached out to Justin earlier this morning and asked a few quick questions. Here are his responses:

Did you have any particular reason for building CoffeePhysics, or was it just for fun?

I was working on some visual demos of genetic algorithms for my presentation at FITC Amsterdam and found myself writing the same simple particle / spring physics over and over, so decided that abstracting it out to an engine would be a good idea. I’ve been keeping an eye on CoffeeScript for some time now and had actually started using it to build the slide engine for the presentation. It felt like a good fit for the physics engine, mainly because of the ease with which I could implement classes and inheritance; allowing me to give the engine a more formal structure which would come in handy when extending the core functionality though new integrators, renderers and particle behaviours.

I’ve wanted a simple physics engine for JavaScript for some time. With a basic point-mass and spring system, it’s possible to create a lot of different effects, all without the need for more complex, processor intensive features. I plan on extending the engine to 3D (it was designed with this in mind since all the math is done with vector operations and so swapping out the 2d vector class for a 3d one will be almost all that’s required at first). I’ll also work on performance (particularly in collision detection) and a more extensive library of particle behaviours, but the main philosophy was simplicity of use and a clean, intuitive API, so keeping it lean and nimble will remain the focus.

What was the most fun/challenging part of building the library or related demos?

Designing the structure of the engine was the most interesting challenge. I’d worked out most of the math required in previous experiments, so in this respect it was simply a matter of combining those techniques. The API and code structure on the other hand was something I wanted to focus on keeping clean, modular and easy to understand. CoffeeScript helped with this, since (much like writing Python) the syntax feels to me almost like writing pseudo-code - I can ‘sketch’ out the class structures, logic and interfaces and then very little is required after that to actually have working code.

How was your experience with performance? What challenges did you face in getting CoffeePhysics or its demos to run fast?

I released it perhaps too early - I wanted to demo it at FITC and so what’s out there now only amounts to the first draft. Therefore, performance hasn’t yet been a huge priority; instead as I mentioned I wanted to create a stable, easy to use and simple engine first then worry about optimisations later. Currently there are a number of issues across browsers and for practical purposes during the (very quick) first development cycle I’ve only been targeting and testing with Chrome.

The physics though is generally very fast to calculate, especially in JavaScript engines like V8. Rendering is always the significant bottleneck and so I quickly moved from canvas to a simple WebGL renderer (with a canvas fallback). This is why (in Chrome at least) the demos run at a solid 60fps. The engine is also a fixed time step engine, meaning that it’s accurate even if some frames are dropped, so unless there’s a huge lag (something I’m working to eradicate in some browsers) then the simulations will run smoothly and the interactions will feel responsive.

There is a lot of controversy around CoffeeScript in the JS community. How was your experience with it?

I think that CoffeeScript does some important key things very well. Coding is fun and quick, which to me is very important. As I mentioned, easy classes with inheritance are great to have and the compiler is fast enough to make this intermediate step almost unnoticeable. The aspect I like the most though, is the ability to dive in and start writing logic without having to worry about some of those little JavaScript quirks we all code around on a daily basis. The less time between thought and working code, the easier it is to be creative and expressive; something which to me programming is largely about.

I understand the reservations people have and I’ve certainly come across aspects of the language I would like to be different, but when you consider the time and effort that goes into making JavaScript behave sometimes, I’d happily trade that for ease and pleasure of use, in the right circumstances of course.

Anything else you think we should know?

CoffeePhysics is a personal project I decided to release somewhat prematurely and so is not yet in the state I want it to be in for version 1. That said, the whole point of opening it up to the community is to get early feedback and have help with tracking down issues, so I’m not worried about it being unfit for immediate use. I’m also keen to stress that it isn’t intended to be a full blown engine. I’ll be interested to see what I (and hopefully others) can eventually do with it, but my intention is to focus on doing a few basic things well, keeping it fun and easy to use and exchanging features for speed and usability.

Nice work, Justin! Now, go check it out on Github, and play with the demos!

Badass JavaScript Roundup #8: Mobile, mobile, mobile!

Mon, 27 Feb 2012 09:17:39 -0800

Welcome back to the Badass JavaScript roundup series. Been busy recently, so sorry about the lack of posts. Let’s jump right in!

PhoneGap has become an Apache incubator project called Cordova, with a nice website and everything. Be sure to check that out if you’re into developing mobile web apps.
Tower.js is an interesting take on frameworks for Node.js, and in fact looks almost exactly like Rails, but in CoffeeScript. It is a full stack framework too, so it works on both the client and server sides.
iPhone app Clear came out a few weeks ago, and it is a beautifully minimal todo list app. Someone has taken a few days to port the entire thing to HTML5, and it is pretty impressive how realistic it is compared to the original. Smooth touch gestures and everything! Try it here.
Microsoft, Google and Netflix have proposed an HTML5 video extension which would allow for a DRM of sorts for web video. Of course, there has been a lot of backlash from the fans of the “everything open” nature of the web platform so far, but in my opinion something in this space will be necessary if we want big companies like Netflix and Hulu to switch to HTML5 from Flash. You can read the proposal here.
If you’re using Amazon’s DynamoDB service with Node.js, you’ll want to check out this module from Jed Schmidt which has a pretty nice API for it.
Someone has implemented the rsync algorithm in JavaScript for Node.js.
Socket.io 0.9 was released.
Mathias Bynens has written about what constitutes a valid variable name in JavaScript. It turns out that var π = Math.PI; is valid JavaScript!
JS-Imagediff is a neat utility for diffing images written in JavaScript.
And finally, this morning we had a ton of updates on Mozilla’s Boot2Gecko project, which aims to build an entire phone operating system using only web technologies, the Gecko rendering engine from Firefox, and a small linux kernel. They have a partner in Teleónica and the screenshots of the OS on actual devices show that it is starting to look pretty good! Finally, check out the Moz Hacks post for more developer-y info on B2G and a video demo.

That’s all for this time. If you have something I missed, or something you think Badass JS should be covering, please don’t hesitate to let us know. Have a good week!

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!