Emad Alashi's Blog

In this post I will show you an example of how smartly built controls and API’s can make the developers programming life extremely enjoyable, hopefully this example will urge you in giving such a smart effort when you build your own control or API.

Lately I have been playing around with a very nice tree control based on jQuery called jsTree. One of the nice features is that it allows populating the tree through asynchronous calls with JSON data representation. In order to achieve that, you needed to provide the data by JSON special format suitable to the tree. This format, regrettably, is open to the JSON vulnerability Phil Haack talked about in his two posts here and here.
So to avoid this vulnerability I had to change this default data format of the tree, at least until the very end of the data flow just before the tree populates the data, only then I can change it back to the default format, like the following:

The format I need to send from server to avoid the vulnerability, but the tree wouldn’t understand:

 { "d" : [ { attributes : { id : "2", balance : "0.00000" },  data : "Child",  state : "closed" }  , { attributes : { id : "3", balance : "0.00000" },  data : "AnotherChild",  state : "closed" }  ] }

The format the tree accepts, to which I should change back before populating:

[ { attributes : { id : "2", balance : "0.00000" },  data : "Child",  state : "closed" }  , { attributes : { id : "3", balance : "0.00000" },  data : "AnotherChild",  state : "closed" }  ]

That would not have been possible if the tree control wasn’t smart enough to provide the developer with the “ondata” event (line 45) that happens exactly before the binding to the tree, in which you can manipulate the data; in my case I am eliciting the data out by returning the “content” of the wrapper object “d” rather than the whole thing.

Such flexibility and clean structure in controls and API’s is one of the very important aspects a control-developer should keep in mind.

The other day at work I finally had the chance to get my hands on code (see here why I’m so anxious about it ).

We were using the jQuery’s Drag and Drop feature, where the droppable areas (DIV’s) are marked as droppable and registered for the events like the following:

 The issue was that those droppable DIV’s were created at client side, and they would change upon a user interaction with the page (old DIV’s disappear and new droppable DIV’s are created), all at client side.
The problem appeared when we tried to drag a “draggable” area AFTER changing the DIV’s the first time, the following javascript error showed:

 “Error: Unspecified error.”

After investigating, it appeared that the plugin preserves a list of the droppables objects, and when we drag the “draggable” object, a loop that traverses the droppable objects would be called. But  those DIV’s do not really exist any more, hence the error shows up.

So the solution was to empty that list of lost references of the droppables so we can make a new clean droppables list, I did the following: 

I couldn’t find better way to access the list, there was scarse information on the web for a solution, I hope this helps you just in case.

“is Code Convention important?”, I couldn’t find better time to answer this with a big, decorated, shiny, flashing “YES” more than now!

I was doing some coding with JavaScript in which I needed to create a Date object and add to it 30 days, simple job! So I did the following:

Great, when I checked the result it was: “Tue May 12 … 2009“! OMG why May?!, where did the additional month come from?! if I am in 12th of March and I add 30 days I expect it to be 11th of April, what is going on?!

God knows how much time I spent checking that cheesy 3rd line in my code, what could be wrong in it? maybe the “getDate()” doesn’t really return the proper type needed to set a new date? I tried all various ways doing it, checking many “solutions” scattered all over the web.

[Give your self sometime to figure it out before continue reading].

Well, the problem actually wasn’t in the 3rd line at all, it was in the 2nd! see that 2nd parameter with the value “3″? it is 0-based numeric! why on earth would it be 0-based?! any sane developer who never knew this fact would instantly deal with it “3 as March”.

Code Convention is as important as documentation; if I need documentation to know how to deal with piece of code and save me time to figure it out, Code Convention is as important.