The JavaScript blog.


animation google opera webgl

Milkshake, An Introduction to WebGL, MapsGL

Posted on .


Milkshake (GitHub: gattis / milkshake, License: LGPL)
by Matt Gattis is a WebGL audio visualiser that uses SoundCloud's API to
play audio. It'll play lots of tracks and cycle through tonnes of
visualisations based on

I particularly like the way the visualiser presets are JSON files, and
how everything is client-side -- this thing can be uploaded to GitHub
Pages or Dropbox and shared easily.

The choice of tracks really made me want to get some Girl
out (Feed the Animals is a great
way to start the weekend!)

An Introduction to WebGL

In An Introduction to
Luz Caballero explains the basics behind WebGL, including: browser
support, the rendering pipeline, WebGL libraries, and example code using


MapsGL from Google
is a new way to view Google Maps using WebGL. To use it, load up Google
Maps in the latest Chrome or Firefox 8+ and look for the "What to try
something new?" button on the bottom left-hand-side:

MapsGL uses new technology called WebGL (Web-based Graphics Library) to enhance the Google Maps experience. WebGL brings 3D graphics to your browser without the need to install additional software. This allows us to provide seamless transitions between various levels of imagery and different map views.

I really like the 45 degree view mode, but I could only get it working
around Rome for some reason. It's also slightly weird that when MapsGL
is enabled the Google Earth option still requires a plugin. However, it
does feel extremely slick, particularly zooming right in which
automatically transitions to street view mode.


frameworks libraries server games opera node android

Crafty, Opera Widgets for Android, Exceptional and Node

Posted on .


Crafty (dual MIT and GPL license) is a JavaScript game engine by Louis Stow with a jQuery-inspired API.

Crafty.init(50, 580, 225);

var player = Crafty.e('2D, DOM, gravity, controls, twoway, image')
    .attr({x: Crafty.viewport.width / 2, w: 16, h: 16})
    .image('favicon.png', 'no-repeat');

var floor = Crafty.e('2D, floor')
    .attr({x:0, y: 225, w: 580, h: 5});

As you can see, the API uses chained calls like jQuery. At the moment
Crafty is an early release (version 0.1), but the Crafty
has a post about upcoming

The author is keen to point out that the project is a game framework,
rather than an engine. Typically game engines are less general than the
types of frameworks we're used to working with as web developers, so
this probably suits our way of working (and should suit many types of

Opera Widgets for Android

Opera Labs has announced an Android runtime that can run WAC
(Wholesale Applications Community):
WAC 1.0 - Supporting runtime for Android: Installation instructions and release
. This
means Android devices can now run a type of widget that's designed
around open, standardised specifications.

More details on about WAC Widgets can be found in: Introduction to
Widget Handset APIs in WAC

It's not just a superficial cross platform library, however:

Using these new APIs we can take pictures, check GPS location, browse our address books, access accelerometer information, and even send SMS, MMS and E-Mail messages

Exceptional and Node

Exceptional, a service that manages exception notifications from web
applications, now supports Node. In Exceptional and
the developers announced a new library called
exceptional-node that makes exception reporting a breeze:

var Exceptional = require(./'exceptional');
Exceptional.API_KEY = **YOUR-API-KEY**

process.addListener('uncaughtException', function(err) {

try {
  // Your Code
} catch(error) {
  // Your own error processing

It has a package.json file so you should be able to install it with
npm. It's released under the MIT license.


performance opera

Opera JavaScript Performance in 10.5

Posted on .

The pre-release of Opera has a new JavaScript engine called Carakan
(read more in Jens Lindström's post). This changes
Opera's approach slightly, because previous versions attempted to
minimise memory usage, whereas Carakan aims to focus on execution speed.
According to SunSpider, Carakan is about 2.5 times faster than their
previous engine.

One of the main reasons for the new engine's performance improvements is
native code generation. This is indicative of Opera's new approach in
general -- they've been attempting to Cocoaify their Mac version for

Other major changes in Carakan are register-based bytecode generation
and automatic object classification. According to Jens:

In the new engine, each object is assigned a class that collects various information about the object, such as its prototype and the order and names of some or all of its properties. Class assignment is naturally very dynamic, since ECMAScript is a very dynamic language, ...

... We use this to cache the result of individual property lookups in ECMAScript programs, which greatly speeds up code that contains many property reads or writes.

Carakan is bringing some radical changes to Opera's engine. It's
possible that the native code approach was also partly inspired by V8's
approach, and Jens doesn't mention any deeper changes to areas like
garbage collection or threading.