Welcome Mr. Future JavaScript Programmer

Your mission: You are a Web 4.0 programmer from the future. For some reason we cannot possibly comprehend, you have come back to 2008 to impregnate your grandmother.

While you’re here it’s crucial to your mission that you also write a Web 2.0 app. Difficulty? Working in our ancient dialect of JavaScript. Solution? Mascara.

No, you don’t wear it, you use it.

Mascara is a program that translates tomorrow’s JavaScript into today’s JavaScript.

It’s been mentioned in some of the big JS venues like here and here, but I’ve been watching since and the author is really knocking the cover off the ball with new releases. I want to make sure he gets the attention he deserves.

Here’s the site:


And here’s the blog where you can read his changelist:


What’s This All About?

JavaScript moves slowly. Programmers are hesitant to use new features of the language until it shows up in all major browsers. You can’t just decide one day to move to the latest version. The version of JavaScript you have available depends on the browser that your client has installed.

Now, if you’re working on an Intranet, or on a Point-of-Sales system, you can mandate the browser. But for applications written for the web, you have to wait, and wait, and wait. Even after all that waiting, some people still haven’t managed to upgrade from IE6 yet. So you roll your eyes and wait some more.

One solution is to check to see if some language features are missing and provide them yourself (there are JavaScript libraries designed to help you out). That works fine when methods are missing, but it doesn’t work for new syntax.

What Mascara does it take future JavaScript (ECMAScript 4) and translate it into current JavaScript. It also does compile-time error checking.

Way to go We can all be future JavaScript programmers now.

Chain Chain Chain

I have always been interested in tiny code–the clever solution that seems too small to work.

In the 1970s, Atari game programmers crammed games into 1 or 2k cartridges. They used tricks that would never occur to us today, like scanning through the binary code data to see if any of the code could be repurposed (perhaps with a few tweaks) to be used as graphics. For the Atari Chess game, they went scanning through the logic code to try to see if any strings of bytes looked like a rook, or a bishop.

Another trick was to write your machine language code so that it did one thing if you executed the code starting at one byte, and another thing if you jumped in at the next byte. (Remember the processor was the 6502. Instructions were either one or two bytes long. Writing code interleaved in such a way was a puzzle, but could pay off in a big way if it meant the difference between a 1k ROM and a 2k ROM game cartridge.)

As computers got more powerful, the things you could do in 1k of code got more impressive. The 1k competitions for multimedia computers like the Amiga and the Atari ST were amazing, sometimes featuring 3D objects whirling about over starfields.

(We game programmers always wondered if the guys who won these competitions could write a decent videogame. That’s how we judged whether you were a good programmer or not. I don’t think we ever found out.)

But Seriously…

Aside from the “demo scene,” there have always been more serious programmers who admired pithy one-liners. Anyone who really digs APL or Perl is a candidate.

Yeah, Mine’s Big

We rarely think about code size any more. Our code is dwarfed by the multimedia assets we pull in. Does it matter how big your JavaScript is? It does matter, because the JavaScript code is being served over and over and over, but mostly you want it to work right, and you can get so wrapped up in the nightmares of compatibility that it’s easy to ignore your code size. “I’ll just gzip it later” is the universal thought.

But, thankfully, someone still cares about code size.

This story at Ajaxian caught my interest. It’s about an entry (by coder Mathieu ‘P01’ HENRI) in a 20-line JavaScript contest, which comes from this thread over at OzoneAsylum.

If you have a modern browser that supports Canvas (Firefox, Safari, or Opera), this short program dazzles you with a growing, rotating, glowing pattern. Here is the official link to the entry…


Chain Chain Chain

The effect is a great one, but what really got me excited was the source code. Especially this bit…

//chain a bunch of CanvasRenderingContext2D methods
for( chainThat in {set:1,switchTo:1,clearRect:1,save:1,
     beginPath:1,closePath:1,stroke:1,fill:1,arc:1} )
  window.fx.CanvasRenderingContext2D[chainThat] =

And here’s the code for the “chain” method…

//  chain( func )
//  make func chainable by making it return
//    its ReturnValue || this
  function chain( func )
    return function()
      return func.apply(this,arguments)||this;

This clever bit of metaprogramming turns a bunch of Canvas functions into functions that can be chained (also known as a cascaded). I don’t know if p01 came up with this trick, or whether he stumbled upon it somewhere else, but it’s a great idea. It lets him perform a whole series of operations in one line.

/* 15 */ fx
	.set( 'globalCompositeOperation', 'source-over' )
	.clearRect( 0, 0, 256, 192 )
	.translate( 96, 96 )
	.rotate( (now/5841%2)*Math.PI )
	.scale( 1+2*((now/1274)%1), 1+2*((now/1274)%1) )
	.drawImage( fx.fooCtx.canvas,0,0,192,192, -288,-288,576,576 )
	.drawImage( fx.fooCtx.canvas,0,0,192,192, -96 ,-96 ,192,192 )
	.drawImage( fx.fooCtx.canvas,0,0,192,192, -32 ,-32 ,64 ,64  )
	.set( 'globalCompositeOperation', 'copy' )
//	prepare for hypnoglow
.switchTo( fx.renderCtx )
	.set( 'globalCompositeOperation', 'source-over' )
	.clearRect( 0, 0, 192, 192 )
	.drawImage( fx.logicCtx.canvas, 0, 0 )
	.set( 'globalCompositeOperation', 'lighter' );

See the dots (the periods) that chain the methods together?

That whole bit counts as one line of JavaScript (line 15, as you can see by the comment), for the sake of this contest (it would be uglier on one physical line, but it’d work).

Users of the jQuery library are used to this chaining. It works if you return this instead of letting the default value undefined be returned.

Next time I use Canvas, I’m stealing this trick.

True story.

When I took Numerical Methods in college, our APL programs were graded based on the number of characters in the program. This was hardcore APL, on a timeshare DEC computer with dedicated APL Greek-letter keyboards and special video terminals that could display the Greek APL symbols (this was back in the days of monochrome text displays–before graphics terminals were common).