Badass JavaScript

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

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

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

1. Adobe proposes events for monitoring the downloading of Image resources which could be quite useful in many circumstances.
2. 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.
3. 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!
4. 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!
5. 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!
6. 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.
7. Zip.js is a JavaScript library that allows you to zip and unzip files in modern browsers (Chrome and Firefox).
8. Jed brings gettext style i18n localization support to JavaScript applications.
9. Ember.js 0.9.4 and Node.js 0.7.1 were released.
10. 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.
11. 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.
12. Enyo, the application framework behind webOS has been open sourced!
13. 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!
14. 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

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

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

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

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

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

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

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

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

2011: A Badass JavaScript Year In Review

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!

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

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

1. Maximiliano Firtman has put together a very nice mobile browser HTML5 compatibility table for iPhone, Android, BlackBerry, Symbian, iPad and more.
2. Dust looks like an interesting new templating engine.
3. 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).
4. Evan Wallace has released another awesome demo of his lightgl.js project, this time showcasing “ambient occlusion lightmap generation” in WebGL.  Awesome!
5. 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.
6. 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!
7. CoffeeScript 1.2.0 has been released.  Mostly a bugfix release.
8. Audiolib.js has a website now, and lots and lots of documentation.  Check it out if you’re interested in generating audio in JavaScript.
9. Passport looks like a nice authentication system for Node.js, with support for over 30 different authentication strategies.
10. 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!