views:

1256

answers:

23

I've realised that while JavaScript has a bad reputation, its actually a surprisingly powerful client-side language - the trouble is that the overwhelming majority of JavaScript written is quirky drop-down menus or form validation.

So called "Rich" client side platforms such as Flash and Silverlight are all about glitz and impressive graphics and animations, however there are far fewer examples of innovative and flashy things being done with JavaScript - I know for a fact that JavaScript is capable of far more than it is usually given credit for.

So, putting aside for the time being the fact that good accessible site design dictates that you use JavaScript to enhance the site, rather than drive the site - what is the most impressive or innovative thing that you've seen done with nothing more than good old html, css and JavaScript?

+64  A: 

jQuery, the awesome library written by John Resig. Could quite possibly be the most influential piece of code written by a single individual in recent memory.

Robert Harvey
+1 for a great answer; I'd give more for jQuery.
duffymo
I was going to say just that, but I'll vote you up instead. jQuery restored my faith in javascript. And it lets you do ajax without feeling the desire to harm someone, which is nice.
Meep3D
jQuery and Dojo alike, two phenomenal JavaScript libraries.
Magsol
+1 The number of jQuery tagged questions on this site is a great testimony to this answer. @Meep3D, fantastic comment! +1
jeerose
What about the Prototype library? I always felt that jQuery was a reinvention of that.
harto
@harto: Having used both I'd say that jQuery is building its own paradigm on top of and around the strengths of Javascript, while Prototype is just extending Javascript with a few convenience DOM functions and browser inconsistency fixes that should have been there from the beginning. Even if jQuery is a reinvention, it's doing a lot more than the "original".
deceze
+22  A: 

Plenty of stuff over at Chrome Experiments to check out. My personal favourite is the Depth of Field.

lomaxx
Wow, those truly are awesome - pretty much exactly what I was getting at! :-)
Kragen
+2  A: 

I once wrote a JavaScript OOP library with support for type-safe overloadable methods with default parameters and paramarrays, properties, events, enums, true inheritance with virtual methods, non-virtual base-method calls in complex inheritance trees, generic classes and methods, and more.

However, it had so much overhead (at runtime and in source) that it's not worth using.

Here are some examples:

jsObject.createFunction("doIt", "int a, String b='default'", function(a,b) { return [a, b]; }),


///<reference path="jsObject.IntelliSense.js"/>\

var jsTest = {
 TestResults    : jsObject.createClass(
  new jsObject.FunctionDescriptor("jsTest.TestResults", function() {
   this.successCount = 0;
   this.failureCount = 0;
   this.tests   = [];
  }), {
   events  : "testBegun, itemLogged, testFailed, testCompleted, testsCompleted"
  }
 ),
 TestingContext   : jsObject.createClass(
  new jsObject.FunctionDescriptor("jsTest.TestingContext", "string name", function(name) {
   this.name(name);
   this.tests = new jsTest.TestCollection(this)
  }), {
   toString  : function() { return "[TestingContext " + this.name() + "]"; },
   methods   : [
    new jsObject.FunctionDescriptor("runTests", "jsTest.TestResults results = new jsTest.TestResults()", function(results) {
     results.context = this;

     for(var i = 0; i < this.tests.length; i++) {
      this.tests[i].run(results);
     }

     results.testsCompleted(results);

     return results;
    })
   ],
   properties  : "string name"
  }
 ),
 Test     : jsObject.createClass(
  new jsObject.FunctionDescriptor("jsTest.Test", "string group, string name, function testFunction, string description = ''", function(group, name, testFunction, description) {
   this.group(group);
   this.name(name);
   this.testFunction(testFunction);
   this.description(description);
  }), {
   toString  : function() { return "[Test " + (this.context ? this.context.name() + "." : "") + this.group() + "/" + this.name() + "]"; },
   methods   : [
    new jsObject.FunctionDescriptor("run", "jsTest.TestResults results = new jsTest.TestResults()", function(results) {
     var retVal = new jsTest.TestResult(this);
     retVal.itemLogged.addHandler(results.itemLogged);
     results.tests.push(retVal);
     results.testBegun(this, retVal);

     retVal.begun = new Date;
     try {
      this.testFunction()(retVal);
      retVal.finished = new Date;
     } catch(ex) {
      retVal.finished = new Date;
      if(ex !== jsTest.testAbort)
       retVal.log(jsTest.LogLevel.error, "Unexpected exception: " + jsObject.toDebugString(ex));
      retVal.succeeded = false;
     }
     retVal.duration = retVal.finished.valueOf() - retVal.begun.valueOf();

     if(retVal.succeeded)
      results.successCount++;
     else {
      results.failureCount++;
      results.testFailed(this, retVal);
     }
     results.testCompleted(this, retVal);

     return retVal;
    })
   ],
   properties  : "string group, string name, function testFunction, string description",
   events   : "testBegun, testFailed, testCompleted"
  }
 ),
 TestCollection   : jsObject.createClass(
  new jsObject.FunctionDescriptor("jsTest.TestCollection : jsObject.Collection<jsTest.Test>", "jsTest.TestingContext context", function(context, base) {
   base(context.toString() + ".tests");
   this.context = context;
  }), {
   methods   : [
    new jsObject.FunctionDescriptor("add", "string group, string name, function testFunction", function(group, name, testFunction, base) {
     var retVal = new jsTest.Test(group, name, testFunction);
     this.add(retVal);
     return retVal;
    }),

    new jsObject.FunctionDescriptor("onItemAdded", "$T item, int index", function(item, index, base) { 
     item.context = this.context;
     base.onItemAdded(item, index);
    }),
    new jsObject.FunctionDescriptor("onItemRemoved", "$T item, int index", function(item, index, base) { 
     delete item.context;
     base.onItemRemoved(item, index); 
    }),
    new jsObject.FunctionDescriptor("onClearing", function(base) { 
     for(var i = 0; i < this.length; i++)
      delete this[i].context;
     base.onClearing(); 
    })
   ]
  }
 ),
 testAbort    : { toString: function() { return "[jsTest.testAbort]"; } },
 LogLevel    : jsObject.createEnum("jsTest.LogLevel", "success, info, warning, error"),
 TestResult     : jsObject.createClass(
  new jsObject.FunctionDescriptor("jsTest.TestResult", "jsTest.Test test", function(test) {
   this.test = test;
   this.logItems = [];
   this.succeeded = true;
  }), {
   toString  : function() { return "[Result of " + this.test.toString() + " - " + (this.succeeded ? "Success" : "Failure") + "\r\n" + this.logItems.join("\r\n"); },
   methods   : [
    new jsObject.FunctionDescriptor("log", [
     [ "string message", function(message) { this.log(jsTest.LogLevel.info, message); } ],
     [ "string level, string message", function(level, message) { this.log({ level: jsTest.LogLevel[level], message: message }); } ],
     [ "jsTest.LogLevel level, string message", function(level, message) { this.log({ level: level, message: message }); } ],
     [ "{ jsTest.LogLevel level, string message } item", function(item) { 
      item.timestamp = new Date;
      item.toString = function() { return this.level.toString() + ":\t" + this.message; };

      this.logItems.push(item);
      this.itemLogged(item);
     } ]
    ]),
    new jsObject.FunctionDescriptor("fail", "string message", function(message) {
     this.log(jsTest.LogLevel.error, message);
     throw jsTest.testAbort;
    }),
    new jsObject.FunctionDescriptor("assert", "bool assertion, string message = ''", function(assertion, message) {
     if(assertion)
      this.log(jsTest.LogLevel.success, "Assertion succeeded:\t" + message);
     else
      this.fail("Assertion failed:\t" + message);
    }),
    new jsObject.FunctionDescriptor("assertType", [
//     [ "string | Type type, *? value", function(type, value) { this.assertType(type, [ value ]) } ],
//     [ "string type, *?.. values", function(type, values) { this.assertType(jsObject.Types.parse(type), values) } ],
     [ "string | Type type, *?.. values", function(type, values) {
      type = jsObject.Types.parse(type);

      for(var i = 0; i < values.length; i++)
       this.assert(type.check(values[i]), type.toString() + ".check(" + jsObject.toDebugString(values[i]) + ")");
     }]
    ]),
    new jsObject.FunctionDescriptor("assertNotType", [
//     [ "string | Type type, *? value", function(type, value) { this.assertNotType(type, [ value ]) } ],
//     [ "string type, *?.. values", function(type, values) { this.assertNotType(jsObject.Types.parse(type), values) } ],
     [ "string | Type type, *?.. values", function(type, values) {
      type = jsObject.Types.parse(type);

      for(var i = 0; i < values.length; i++)
       this.assert(!type.check(values[i]), "!" + type.toString() + ".check(" + jsObject.toDebugString(values[i]) + ")");
     }]
    ]),
    new jsObject.FunctionDescriptor("assertEqual", "*? a, *? b, bool soft = false", function(a, b, soft) {
     if(soft)
      this.assert(a == b, jsObject.toDebugString(a) + " == " + jsObject.toDebugString(b));
     else
      this.assert(a === b, jsObject.toDebugString(a) + " === " + jsObject.toDebugString(b));
    }),
    new jsObject.FunctionDescriptor("assertUnequal", "*? a, *? b, bool soft = false", function(a, b, soft) {
     if(soft)
      this.assert(a != b, jsObject.toDebugString(a) + " != " + jsObject.toDebugString(b));
     else
      this.assert(a !== b, jsObject.toDebugString(a) + " !== " + jsObject.toDebugString(b));
    }),
    new jsObject.FunctionDescriptor("assertMatch", "string text, Regex expression", function(text, expression) {
     this.assert(expression.test(text), expression.toString() + '.test("' + text + '")');
    }),
    new jsObject.FunctionDescriptor("assertNull", "*? value", function(text, expression) {
     this.assert(value === null, jsObject.toDebugString(value) + " === null");
    }),
    new jsObject.FunctionDescriptor("assertUndefined", "*? value", function(text, expression) {
     this.assert(typeof value === "undefined", jsObject.toDebugString(value) + " === undefined");
    }),
    new jsObject.FunctionDescriptor("assertNotNull", "*? value", function(text, expression) {
     this.assert(value !== null, jsObject.toDebugString(value) + " !== null");
    }),
    new jsObject.FunctionDescriptor("assertDefined", "*? value", function(text, expression) {
     this.assert(typeof value !== "undefined", jsObject.toDebugString(value) + " !== undefined");
    }),
    new jsObject.FunctionDescriptor("assertArrayEqual", "Array value, *... expected", function(value, expected) {
     var message = jsObject.toDebugString(value) + " == " + jsObject.toDebugString(expected);
     if(value.length !== expected.length)
      this.fail("Assertion failed:\t" + message);

     for(var i = 0; i < expected.length; i++)
      if(value[i] !== expected[i])
       this.fail("Assertion failed:\t" + message);

     this.log(jsTest.LogLevel.success, "Assertion succeeded:\t" + message);
    }),
    new jsObject.FunctionDescriptor("assertValueEqual", "Object | Array value, Object | Array expected", function(value, expected) {
     var message = jsObject.toDebugString(value) + " == " + jsObject.toDebugString(expected);

     for(var cProp in expected)
      if(value[cProp] !== expected[cProp])
       this.fail("Assertion failed:\t" + message);

     this.log(jsTest.LogLevel.success, "Assertion succeeded:\t" + message);
    }),
    new jsObject.FunctionDescriptor("assertThrows", [
     [ "function func, *?[] args, string exception, *? context = null", function(func, args, exception, context) { 
      return this.assertThrows(func, args, function(ex) { return ex.toString() === exception; }, '"$$" === "' + exception + '"', context);
     } ],
     [ "function func, *?[] args, Regex exception, *? context = null", function(func, args, exception, context) {
      return this.assertThrows(func, args, function(ex) { return exception.test(ex.toString()); }, exception.toString() + '.test("$$")', context);
     } ],
     [ "function func, *?[] args, function validator, string message, *? context = null", function(func, args, validator, message, context) { 
      try {
       func.apply(context, args);
      } catch(ex) {
       message = message.replace("$$$", jsObject.toDebugString(ex));
       message = message.replace("$$", ex.toString());
       if(validator(ex))
        this.log(jsTest.LogLevel.success, "Exception caught:\t" + message);
       else
        this.fail("Exception mismatch:\t" + message);

       return;            //If we caught an exception, don't fail.
      }
      this.fail("Assertion failed:\t" + jsObject.toDebugString(func) + " didn't throw when given " + jsObject.toDebugString(args) + ".");
     } ],
     [ "function func, *?[] args, * exception, *? context = null", function(func, args, exception, context) { 
      return this.assertThrows(func, args, function(ex) { return ex === exception; }, "$$$ === " + jsObject.toDebugString(exception), context); 
     } ],
     [ "function func, *?[] args = [], *? context = null", function(func, args, context) { return this.assertThrows(func, args, function(ex) { return true; }, "$$$", context); } ]
    ])
   ],
   events  : "itemLogged"
  }
 )
};

If people are interested, I'll put it on Google Code.

SLaks
That is interesting, even if it is only as an exercise.
Robert Harvey
+31  A: 

DHTML Lemmings of course!

(Which has inspired me to write some multi-player networked JavaScript games using WebSocket, which I'm hoping to make even more impressive one day. I'm impressed at how much browser JS speed has improved in the last few years, since the alternative browsers started concentrating on it.)

bobince
+1 - that is really impressive
Russ Cam
Now that's impressive!
Zoe
Even more so for something created in 2003, when any mention of "Javascript" would require you to wash your mouth out with soap.
mahemoff
That's created by the head developer of Tweakers.net, Tino Zijdel. I would like to upvote this +10.
BalusC
Hi Bobince, why wouldn't you just vote up jQuery??? :P http://www.doxdesk.com/updates/2009.html#u20091116-jquery
Jason
Jings! Rumbled!
bobince
+19  A: 

GMail

Google pretty much invented the modern web app with that.

DisgruntledGoat
Or maybe Google Maps.
SLaks
The question is "what you have *seen* done" so no problem with answering Gmail
Felipe Alsacreations
While I like GMail, it didn't invent much. It followed Oddpost, which was a great mail app, years ahead of it's time. Basically Outlook functionality in an (IE only) browser. http://en.wikipedia.org/wiki/Oddpost
Pool
Gmail was fantastic when introduced, but 'the most impressive thing'? Not anymore.
Kirk Broadhurst
@Nick: Interesting, I didn't know that. However, Gmail was hardly based on Oddpost since the UI is totally different. Plus it was cross-browser ;) I still stand by my statement - web apps didn't take off until Gmail came along.
DisgruntledGoat
Does nobody remember that MS created the XHR object so they could do Outlook Web Access. Which pre-dates GMail by several years.
Josh
As far as I'm concerned, gmail invented AJAX, and web 2.0
hasen j
+7  A: 

First person shooter in your browser:
http://www.benjoffe.com/code/demos/canvascape/

Joel Coehoorn
Textured version is cool: http://www.benjoffe.com/code/demos/canvascape/textures . Although it's not an FPS since there's nothing to shoot ;)
DisgruntledGoat
+5  A: 

Super Mario in JavaScript is pretty sweet.

Marcus
Honestly, that's the least impressive game I've seen in Javascript. It's buggy, randomly speeds up and slows down, and sometimes it won't let you walk forward.
DisgruntledGoat
Friggin' right.
jeerose
+10  A: 

I'd say (with much trepidation) Outlook Web Access. It was the birthplace of XHR.

Jeremy Ross
True that. All the current ajax trickery is thanks to Microsoft implementing proprietary standards. :)
Meep3D
A: 

I vote to MailChimp, very impressive.

Rose
A: 

The Google Web Toolkit.

http://code.google.com/webtoolkit

Writing web apps today is a tedious and error-prone process. Developers can spend 90% of their time working around browser quirks. In addition, building, reusing, and maintaining large JavaScript code bases and AJAX components can be difficult and fragile. Google Web Toolkit (GWT), especially when combined with the Google Plugin for Eclipse, eases this burden by allowing developers to quickly build and maintain complex yet highly performant JavaScript front-end applications in the Java programming language.

CgodLEY
That's kind of the *opposite* of JavaScript... after all it's not written in JavaScript, it's a compiler, written in Java, that compiles Java code into a JavaScript runtime.
NickFitz
+21  A: 

Google Maps

Devtron
Google Maps blew the floodgates open for me. The first time I saw it was (IIRC) a *day* after I had actually stated to my professors in my thesis defense (demonstrating a route finder) that a draggable map could NOT ever never EVER be accomplished on the web, due to the overhead of "downloading a big file" (or something to that effect). Then I came home and Google maps was released. I spent the next 15 hours (literally, up all night) reverse engineering that thing and saw things that I never knew possible with JavaScript. Holy hell what an education I got that night.
Crescent Fresh
I sometimes think that the people at Google have supernatural powers. I blame the gourmet food they get. ***Jealous***
ItzWarty
+8  A: 

Javascript ZX Spectrum Emulator

http://jsspeccy.zxdemo.org/

An entire computer from 1982 emulated in JavaScript.

The link above has several classic games from the era available as snapshots.

Alan
On a similar note, JSNES http://benfirshman.com/projects/jsnes/ A Javascript NES emulator.
ephemient
I was just about to post this myself! Auwsome piece of sofware.
James Anderson
Dear Lord! Here's me remaking Jet Set Willy in JS, and this bloke's skipped all that simply by emulating the thing! OK, not quite at full speed, but still: impressive. And insane, obv.
bobince
And, from the same author (Matt Westcott), Canvastastic: a 3D graphics library in JavaScript. Here's his Dancing Robot demo: http://matt.west.co.tt/files/canvastastic/canvastastic_beta_1/eg/robot.html
NickFitz
A: 
OscarRyz
+6  A: 
OscarRyz
+1, Definitely. The fact that hardly anyone realises it is testament to how seamlessly the JS works in this case.
Edmund
Ohhhh, so *that's* why Firefox is so slow!
DisgruntledGoat
+11  A: 
mahemoff
And so is the WebKit's web inspector.
GameFreak
A: 
michael
+5  A: 

I think Cappuccino is pretty impressive. http://cappuccino.org/

Not pure JS, but they developed an entire language built on top of JS so it would execute in the browser.

EMK
+5  A: 

Bespin is a text editor from Mozilla Labs that's written in JavaScript and does all its own drawing using a custom canvas-based graphics toolkit.

Matthew Crumley
A: 

Doom clone in JavaScript: http://canvex.lazyilluminati.com/83/play.xhtml

It uses the canvas, similar to the Wolfenstein clones already posted.

Marius
+3  A: 

Content Aware Image Resizing http://labs.pimsworld.org/wp-content/uploads/2009/04/demo-content-aware-image-resizing-2/

Grace
A: 

The World of Solitaire is pretty impressive - I think it was written using the YUI framework: http://worldofsolitaire.com/

Ian Oxley
+1  A: 

QuakeLive at http://www.quakelive.com - I know the graphics aren't written in Javascript but damn it brought back some good memories.

Anthony Forloney
Definitely impressive. See http://fragged.org/quakelive-beta-test-impressions-as-a-developer-jquery-flash-and-3d_397.html for details.
Pascal Thivent
great link, it was definitely worth reading.
Anthony Forloney
A: 

I know I'm late to the game, but I thought I would share anyways.

http://games.bradlis7.com/ - The card games work, but don't play Sudoku, I couldn't quite get the puzzles to be generated with any level of difficulty.

http://tools.bradlis7.com/ip/ - IP calculator tool. If I had 128-bit numbers at my disposal, I might implement an IPv6 calculator.

bradlis7