Sunday, June 17, 2012

Guest Blogger: Alfonso Gómez-Jordana

Guest Blogger: Alfonso

Alfonso (aka alfongj) is one our newest members, and is already making a big splash. Having joined just weeks ago, Alfonso has already won his first challenge, and it happened to be the first one he ever even submitted on! That’s like hitting a homerun in your first ever Big League at bat! Well, we couldn’t pass up an opportunity to get Alfonso in for a guest blog, and luckily he was willing to take time out of his busy schedule to participate. Coming to us all the way from Spain, please welcome Alfonso to the CloudSpokes community, and check out his first (of many more to come) ever Guest Blog!

Hello everyone! My name is Alfonso Gómez-Jordana and I am 20 year old spanish university student.

I discovered this incredible website thanks to the CodeSchool promotion, and just a couple of weeks later, here I am, having already won my first CloudSpokes challenge! I had such a sense of pride after finding out I had won, I couldn’t reject the opportunity to write up a post about it! So let’s get to it! 

Challenge Description:

The challenge I took was called ‘Visualize’ javascript graphing library tweaks, which I will briefly describe: 

Visualize is a jQuery plugin that picks data from HTML tables and represents it in the form of line, area, bar or pie graphs. It is very easy and automatic to use, and at the same time it is very powerful: highly customizable, compatible from IE6 onwards... but it isn’t the Holy Grail unfortunately.

Speaking exclusively about line graphs from now on, when plotting too many lines the into them, the information gets cluttered easily, and it is very difficult to differentiate one line from another. But a picture is worth a thousand words, so to better understand it, use the following image to see how the original graphs looked, and the annotations of what had to be done to complete the task.








As you see it is very clear what needed to be done but in spite of that, gackerjr - the contest admin - also included a quite entertaining and detailed explanation of everything. I seriously recommend reading it if you still haven’t (and by the way, I wish my university assignments were as half as clear!)

The Job:

Well, the truth is that I didn’t rack my brains with it: I simply did everything that was asked! All without any tricks or bribery being involved!
Besides the basics, other things I did, and I would recommend you do too, are:
Include a few useful extras, such as settings for customizing the shapes used, which, although they were not asked for, surely make it a better ‘product’.
Put a lot of effort into documenting the project (I included both a pdf tutorial, and a video screencast on how to use it). No coder likes to do so, I’m sure! But hey, the reviewers, or people that would in the future use your code probably prefer a good documentation or tutorial than diving into code!

And well, this was the result:


The Internal Guts:

Ok, now for the interesting stuff you coders might be wondering about: the languages/ frameworks/ APIs used, and the main difficulties involved. As ‘Visualize’ is a jQuery plugin, all the code I needed to change was pure javascript (and some bits of CSS for styling). And inside the javascript world, I mainly used some jQuery features (selectors, appending, prepending... nothing really fancy was needed), and also the HTML5 canvas API. All the actual plot (the white rectangle with the lines) is an HTML canvas, so most of my time was spent with it, for changing the vertices to custom shapes. For these shapes I could have simply used .png’s or .gif’s, but that would be a dirty trick which would make the process of using ‘visualize’ more tedious both for the computer loading it, and the web designer importing it... So I finally decided to draw them in code. I had to apply my geometry skills from school to draw them more or less accurately and, well, on the one hand some were obvious such as the square or circle, but on the other, I spent quite a lot of time (maybe half an hour, if not more) with the damn star only! Finally, I also drew the shapes in the ‘legend’ under the plot using little canvases for each one you see. 
Apart from that, not much... the labels at the top and right weren’t really difficult to implement, and the scrambled legend problem was fixed changing a bit of the CSS and layout.

The only final thing that is worth mentioning is, guess what...?

IE6 (and IE7 and IE8) Compatibility:

First of all, some of you might have noticed that before IE9 canvas wasn’t supported in Internet Explorer (this is not Microsoft’s fault! this is because the HTML5 Canvas API has started to be implemented more or less recently). But the original ‘Visualize’ worked from IE6 onwards, using a very interesting library you should take note of: ExCanvas, which brings Canvas functionality to lower versions of IE... or most of it at least. And well, although it worked fine with the original Visualize, when I tested it in my modified version I almost sh*t my pants off: everything was broken. Luckily, most of the problems were solved simply changing a bit of the HTML layout, but one didn’t! For some reason, the little canvases that I used for drawing the shapes in the legend didn’t display anything!

*I hope this gets well indexed in Google, as I couldn’t find anyone that had solved this problem before me:*

To draw more than one canvas using ExCanvas you need to add them one by one to the DOM. 

What do I mean? That you can not create yourself an HTML node with a list of many canvases and then append it using jQuery to wherever you want it. Instead, you need to create one canvas, draw on it, append it to the DOM; create another one, draw on it, append it to the DOM, etc. What a pain!

And with that, I finish my post.

I would like to thank again, firstly you for taking the time to read this, and secondly the CloudSpokes staff that made all this possible! Count me in for lots more contests!
- alfongj

No comments:

Post a Comment