Notes
Take them as Lorem Ipsum
Car Navigation Map in Canvas
Nov 24, 2008After browsing through the code of Jacob Seidelin's Super Mario Kart demo, I was inspired to take the code and attempt to create a GPS-navigation system experience using publicly available roadmap tiles. The final result is a proof of concept that works pretty damn well in Firefox (and not quite that well in other browsers :).
After passing it around to a few friends, I've already heard some cool suggestions for taking the demo to the next level. So, please, if this inspires you, feel free to experiment further with the code. Enjoy!
JS Puzzle
Oct 09, 2008Write a function getMax(a,b) that takes two integers and returns the maximum value. None of the following are allowed: >, <, ==, !=, Math.max, Math.min.
function getMax(a, b) {
...
return max;
}
Send your answers here. I will post the solution in a few days.
Chromeflow
Sep 10, 2008Based on the Rafi Adnan's coverflow+canvas sample posted in Ajaxian, I created a bookmarklet which will add more fun to the Most visited preview of your home page.
Simply drag the link below to your bookmarks bar in Chrome, open up a new tab (with the default home page), and click the bookmarklet to see your history displayed iTunes-style.
(Press CTRL+B to make the bookmarks toolbar show up)
Drag and Drop without Drag and Drop
Aug 31, 2008While experimenting the other day, I found out about a special behavior of input fields in web browsers. Mixing it up with images and the previous canvas experiment, I came up with a proof of concept that emulates image drag and drop behavior.
As a bonus, it also allows drag and drop between documents.
Update: Testing the demo in Google Chrome shows a funny highlighting effect when dragging images. Also, they can be dropped only in a small area on the top left of the text area.
Moving Forward
Aug 23, 2008I think it's worth mentioning this graph shown by Vic Gundotra at the last Google IO when talking about the evolution of the web browser and how to "Move the web platform forward":
"(...) There have been recent improvements in the browser. Things like the canvas tag in the latest generation of browsers"
SXSW 2009
Aug 16, 2008The canvas element has been generating increasingly more interest and broad web acceptance in the past year - noticeably more than similar technologies like SVG or VML that have been around for much longer.
Martin Kliehm has kindly offered me the opportunity to participate in a dual presentation at the next SXSW to talk about canvas and demonstrate some interesting uses.
If you are interested in the canvas element, you can cast your vote for this presentation (until August 29). And while you're at it, you might also want to cast your vote for canvas support in IE8.
Rendering Polygons with Canvas
Jun 22, 2008This 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
May 31, 2008I 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
Apr 29, 2008Here 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();
See the answer
.
.
.
The explanation of the behavior of the snippet 1 (undefined, undefined) is that the line var x = x; is doing a declaration var x; and an initialization x = x; at the same time. But each of these processes happen separately, one after the other, when the javascript code is interpreted and then executed.
First, when the code is interpreted, before any code is executed, the var x; declaration makes the variable x available within the scope of the entire function, no matter what line it is written on. It would have the same effect whether var x; was written at the very end of the function or at the very beginning. However, the variable won't be initialized, i.e., assigned to any value, until the code is executed. Until then, its default value will be undefined.
Second, when the code is executed, any x inside that function will refer to the declared local x instead of the global x as one may think at first sight. Therefore, the x = x; initialization won't throw any run time error because the variable x exists but it has never been assigned to any value other than the default undefined.
Walking the DOM
Mar 11, 2008As 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.
Source codeView all notes...
Articles
It doesn't hurt
Image Transformations in Canvas with Slicing (by Ross Harmes and Ernest Delgado)
Jun 23, 2008Published on the Yahoo! User Interface Blog
User registration patterns (URP)
Nov 24, 2007In 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.
About
I am a workaholic Front End Engineer working in the Silicon Valley and living in San Francisco doing what I like to do best by creating new ways to access, visualize and organize information.
More...


I am a workaholic Front End Engineer 



