All posts tagged ‘JavaScript’

File Under: JavaScript

JS1k Contest Highlights Tiny, Powerful Code Experiments

JavaScript sometimes gets a bad rap. Accusations of page size bloating, superfluous effects and failure to gracefully degrade are common gripes. But the truth is that none of those things are inherent in JavaScript, they’re just common in bad web design.

Take page size for example. Sure, JQuery is big, but even tiny scripts can do some pretty amazing stuff. Proving that claim is exactly the point of JS1k, a recent contest to see what developers could create in less than one kilobyte of JavaScript.

Among the rules of JS1k: The files size must be under a kilobyte, the demo must work in Firefox, Safari, Chrome and Opera and external libraries were forbidden — short scripts that reference 30MB worth of external scripts were disallowed.

The contest winners were announced Tuesday at the JSCONF event in Berlin. The experiments are really incredible given the files size restrictions. The winner Legend Of The Bouncing Beholder, is an old-school arcade game reminiscent of early Mario Brothers games.

Other winners include a Tetris game, a multiplayer pong game and our personal favorite Mother Fucking Lasers. Head on over to see the rest of the demos and be amazed at what you can do with just 1k of code. Be sure to view source so you can see how these tiny scripts work.

Note that, as of this writing, the site is experiencing ridiculous traffic, so if you get a 503 error, check back later when things have calmed down.

See Also:

File Under: Browsers, JavaScript

‘Kick Ass’ Bookmarklet Turns the Web Into Asteroids

Thanks to his presence as a background image, W.T. Monkey is immune to ass kicking.

Sometimes you just want to kick the web’s ass. Destroy it with tiny dots blasted from your Asteroids-style space ship floating above all the paragraphs and images and semantically meaningless wrapper divs.

Or maybe that’s just me. But if you find yourself feeling the same way, well, you too can kick the web’s ass.

Kick Ass is a JavaScript bookmarklet created by Erik Andersson that turns the entire web into a game of Asteroids. Just head over to the site, drag the bookmarklet into your tool bar and start destroying stuff.

Kick Ass will add a triangular spaceship to any page. Use the arrow keys to steer and the space bar to shoot. And remember, like the site says, “it’s cooler if you make your own sound effects.”

See Also:

File Under: JavaScript

Zaphod Gives JavaScript Developers Two-Headed Power

What’s become so complicated you need two heads to figure it out? JavaScript of course.

Mozilla Labs recently launched a new project dubbed Zaphod, named for the two-headed President of the Galaxy in The Hitchhiker’s Guide to the Galaxy. Zaphod is a Firefox add-on that has two “heads” of its own.

Zaphod’s primary head, in this case, makes it simple to switch JavaScript rendering engines. Zaphod’s other “head” is the Narcissus JavaScript engine, which is a JavaScript engine written in JavaScript. Narcissus is great for experimenting with JavaScript, but it lacked an easy way to run your code within the browser, which is where Zaphod comes in.

The add-on lets you run the Narcissus engine instead of SpiderMonkey, Firefox’s default JavaScript engine. Just install Zaphod and put some “application/narcissus” script tags in your page, and Firefox will render your scripts using Narcissus.

You may be wondering why in the world anyone would want to run JavaScript code through a JavaScript Engine written in JavaScript (you may also be thinking that “the Escher” would have been an equally compelling name for the project). The answer is because you can change how the actual interpreter and compiler work. Sure you could re-write SpiderMonkey in your spare time, but that’s quite a task compared to modifying a few lines of JavaScript in Narcissus.

So, why modify the actual rendering engine? It could help the community reach decisions about what new features should be added JavaScript, what those features should look like and how they should behave. Or perhaps you’d just like to experiment with the JavaScript language itself, rather than what you can do with the language.

If you’d like to experiment with Narcissus, just add this meta tag to your HTML page:

<meta http-equiv="Content-Script-Type" content="application/narcissus" />

Then install the Zaphod add-on and reload your page. From there you’re just a few experiments away from revolutionizing the web. If you’d like to see a few of Mozilla’s experiments to get some idea of what you can do, head over the Narcissus page and take a look.

Don’t Panic photo by Jim Linwood/Flickr/CC

See Also:

File Under: JavaScript, Web Standards

The Kraken Awakes to Test Your Browser’s JavaScript Powers

Mozilla has unleashed the Kraken, a new JavaScript benchmark test.

It joins similar efforts like Google’s V8 and the WebKit project’s SunSpider tests, which are widely used to measure browser performance. However, unlike V8 and SunSpider, which are more general stress tests to measure overall capability, Mozilla’s Rob Sayre says Kraken focuses mainly on “realistic workloads and forward-looking applications.”

Among the real-world things Kraken tests are Mozilla’s new beat detection scripts, which uses experimental audio APIs, and image processing tools like the ones that apply a Gaussian blur or desaturate a JPG using JavaScript.

“These are the things that people are saying are too slow to do with open web technologies today,” Sayre writes, “and we want to have benchmarks that reflect progress against making these near-future apps universally available.”

While real-world tests are important and Kraken offers a way to measure browser performance in ways that aren’t really possible without it, in terms of an overall performance benchmark test, Kraken seems unlikely to supplant V8 or SunSpider.

Of course, supplanting doesn’t seem to be the goal of Kraken. Rather, Mozilla wants to shift focus from generalized benchmarks to tests that reflect what’s actually happening on the web — both today’s web apps and those that are pushing the boundaries and paving the way for a new generation of apps.

The goal of Kraken is less about proving how “fast” a browser is overall and more about offering a way to test actual, everyday tasks that mirror the things we all do with web browsers.

To test Kraken you can head over to the new site and run it yourself. In Mozilla’s testing Kraken shows that Firefox 4 (with its new JaegerMonkey JavaScript engine) is already more than 2.5 times faster than the current release of Firefox 3.6.

See Also:

File Under: Browsers, JavaScript

Firefox JaegerMonkey Builds Are Available

Not the official JaegerMonkey logo

Mozilla has shipped a new pre-release build of Firefox 4 with its latest JavaScript technology, JaegerMonkey, baked in.

To try it out, you’ll need to install one of Mozilla’s nightly JS Engine Preview builds. The JaegerMonkey-equipped browser was made available Thursday. Keep in mind, this is pre-release software and should be used only for testing.

JaegerMonkey has a dramatic impact (in the positive direction) on Firefox’s core JavaScript engine, TraceMonkey, which shipped with version 3.5 of the browser.

“We knew we needed another major upgrade for Firefox 4.0,” says Mozilla’s David Mandelin in a blog post about the release.

It’s a welcome addition. Chrome, Safari and Opera have all made significant enhancements to their JavaScript capabilities since Firefox 3.5′s release. Internet Explorer 9, due to arrive as a beta this month, is on par with those browsers when it comes to script execution. If all goes well, this new code will be included in Firefox 4 when it ships later this year.

In my informal testing, the new build is much, much faster at running script-heavy websites and demos than the current Firefox 4 beta. It’s about as fast as Chrome on my Mac, which says a lot, considering how much of a speed demon Google’s browser is. All of those JavaScript demos and games that were only really smooth enough to impress in Chrome and Safari are now nice and fluid in Firefox.

You can see some of Mozilla’s recent test data on JavaScript benchmarks (here and here) to get a clearer picture of how JaegerMonkey is helping close the gap to the other browsers.

See Also: