Rendering Polygons with Canvas

This time I wanted to test the performance of the canvas rendering versus other technologies. Since Google Maps uses VML, SVG and image retrieval depending on which browser you are using, I compared the rendering times of the maps polygons to see the results.

In the end it wasn't the best environment to do the tests since it was impossible for me to split the actual rendering time of the polygons and the rest of the processes of the map code. In any case, I leave the experiment for you to see.

Canvas

I am releasing an experiment I made last October when I started playing with the canvas element.

One of the main reasons I started to play with this technology was that while I was trying to port a previous SVG experiment, I noticed it had quite a few cross browser issues. The final result with canvas was quite satisfactory and it gave me the chance to learn features beyond the basics such as drag and drop, event handlers and performance optimization.

Since that experiment in October my interests and prototypes in Canvas have been more and more challenging: Skewing techniques, VR emulation, polygon rendering, etc. There's a bunch of code to release though I am not allowed to release all of it right now. But I will do my best.

Update: Due to the interest and enhancement requests from friends and colleagues, I have created a project page where you can contribute and add items to the to do list.

Update 2: Check the Flickr and Picasa integration from Michael Johnston and Pamela Fox respectively.

JS Interpreter and Execution

Here is a quick (and tricky) mini challenge for those who usually work with javascript. Take a couple of minutes to think about the results of the alerts in each snippet.

// Snippet 1
x = 4;
function init() {
 alert(x);
 var x = x;
 alert(x);
}
init();
	

// Snippet 2
x = 4;
function init() {
 alert(x);
 // var x = x;
 alert(x);
}
init();
	

Walking the DOM

As an experiment I had the idea of implementing the iterative version of the walk the DOM recursive function (which uses firstChild and nextSibling DOM methods to walk the DOM tree as a binary tree). One of the conditions was I didn't want to use a stack in the iterative implementation. At some point, I had the hope that it could be faster than the recursive one due to the absence of the function-call overhead but that didn't happen.

With that said I will leave the code here for anyone who wants to spend more time playing with it or provide some feedback.

World Map Projections

As a big fan of world maps and also because I have been for a while programing some things on it, I am going to show my favorite world map projections:

This projection belongs to the equal-area projection category, which means it tries to represent countries in their correct proportional size. I think the first well known app using it was 43places.com.

For a long time, this map made in flash was the main map of the 43places application so the users were able to select countries and see which ones were visited, 'want to visit', etc. From my point of view this map was the best choice. However, they later switched to google maps maybe because of the specificity of the markers. Although you still can access the flash version from its users' profile.

This one belongs (among other categories) to the compromised projection ones. Its goal is to find a balance between different kinds of distortions.

That representation can be seen everywhere in the Wikipedia.

Probably the most popular of the Cyllindrical Equal-Area. However, similar projections like Behrmann or Hobo-Dyer make the countries look less strange. They all differ in the ratio of the vertical to horizontal axis, especially close to the pole areas

I haven't found any web app using them though.

Also called 'evil mercator' since it's the worst one in terms of distortion of the countries. Greenland is 554% bigger than its real size, Canada 258%, USA 68%, etc.

It's still commonly used in a lot of places. For instance, google maps uses it. Although my guess is that 95% of the use of google maps is not at the world view zoom level.

Acknowledgments

I have never been in the acknowledgments of a book before.

Ross Harmes from Yahoo! and Dustin Diaz from Google decided about a year ago to write a book about Javascript Design Patterns. As I have the honor of being on the team of the former, I was pleased to offer my feedback on his excellent lessons. Although one wonders who needs technical feedback when the beast Simon Willison is already doing that.

Javascript, being the first mainstream lambda language, has its very own features. It well deserves a good training not only to write better code but to use all the potential of the language. This book will really help you in both aspects and it will make your path easier to the mastery of the language.

If I feel happy to be mentioned in the book, I can't imagine how proud Ross and Dustin must feel to be the authors after months of work. In fact, it's a feeling that is worth a try.

Congratulations guys!

Image Transformations in Canvas with Slicing (by Ross Harmes and Ernest Delgado)

Published on the Yahoo! User Interface Blog

User registration patterns (URP)

In this article we will try to prove that some practices in current web apps have important privacy and security issues both for the user and for the application.

Read more...