Leaflet, Augment.js, Anatomy of a Mashup, 3 Dreams of Black, WebGL Security

Alex R. Young





graphics css3 maps webgl security

Leaflet, Augment.js, Anatomy of a Mashup, 3 Dreams of Black, WebGL Security

Posted by Alex R. Young on .

graphics css3 maps webgl security

Leaflet, Augment.js, Anatomy of a Mashup, 3 Dreams of Black, WebGL Security

Posted by Alex R. Young on .


Leaflet (GitHub: CloudMade / Leaflet, License: BSD) from
CloudMade and maintained by Vladimir Agafonkin is a JavaScript library
for building tile-based maps that work with desktop and mobile browsers.

It's extremely easy to use, and includes most of the user interface
elements required to work with maps:

// initialize the map on the "map" div with a given center and zoom 
var map = new L.Map('map', {
    center: new L.LatLng(51.505, -0.09), 
    zoom: 13

// create a CloudMade tile layer
var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/YOUR-API-KEY/997/256/{z}/{x}/{y}.png',
    cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});

// add the CloudMade layer to the map

CloudMade are pushing OpenStreetMap as
their data source:

CloudMade are here to make using OpenStreetMap data easier and more accessible. We support OpenStreetMap by sponsoring mapping parties, providing public relations and legal support, hosting developer events and contributing to the OSM code base.


Augment.js (GitHub: olivernn / augment.js, License: MIT) by olivernn brings features from JavaScript 1.8.5 to other browsers. It
does this by patching missing functionality but leaving native methods

If you've ever got annoyed at the lack of
Array.prototype.indexOf or
Array.prototype.reduce in IE then this is the library for

Anatomy of a Mashup

Anatomy of a Mashup by Cameron Adams breaks down a six minute mix of Daft Punk

using a novel HTML5/CSS3 interface.

Cameron has written a post about it, Anatomy of a Mashup: Definitive
Daft Punk
which he says:

Hopefully it gives you a new insight into the artform of the mashup, otherwise you can just stare at the pretty shapes.

I definitely enjoyed staring at the pretty shapes...

3 Dreams of Black

3 Dreams of Black is a WebGL music video, developed by developers at

"3 Dreams of Black" is our newest music experience for the web browser, written and directed by Chris Milk and developed with a few folks here at Google

The mouse can be used to explore the scenes, and there's even a hidden
Mega Man and Reddit alien. Once the video has played out it's possible
to explore the last scene, flying behind
some birds in a manner reminiscent of

This video also includes heavy use of shaders -- it works well as a
WebGL showcase. I'm actually quite jealous of whoever got to work on

WebGL as a Security Problem

In WebGL - A New Dimension for Browser
Forshaw explores security issues relating to WebGL, including denial of
service and cross-domain image theft.

While there is certainly a demand for high-performance 3D content to be made available over the web, the way in which WebGL has been specified insufficiently takes into account the infrastructure required to support it securely.

It's interesting that there's already a history of low-level problems
with WebGL:

During the development of WebGL it seems that all the browser vendors supporting it have encountered issues with certain drivers being unstable or crashing completely.

This research got a lot of attention this week, so at least it will get
more eyeballs on WebGL security issues. If ever there's been a way to
break out of a sandbox and exploit a machine, I'd imagine the low-level
access WebGL potentially provides is a rich target.