Thursday, November 30, 2006

America Calling

Within the coming week, I shall be leaving for Los Angeles, California for (at least) a three month period. I'm going to be there to do the ground-work towards the launch a product that has been very close to my heart for the last year, and has been taking up all my time. Finally, it looks like the product has now matured enough for real people with real businesses to start playing with.

I'm also looking forward to catching up with old friends, and other bloggers in and around LA. If there's anyone staying around the LA area, please leave me a comment, or email me, and we can take it from there.

Wednesday, February 15, 2006

Interviewing UI Designers

Since we are in the process of building a team of UI designers at work, I have been assigned the task of conducting interviews to decide on potential candidates. Today, I held my first few rounds of interviews. Until today, I have never realized how entertaining an interview can be.


Me: So, on a scale of 1 to 10, how do you rate your CSS skills?
She: 6, at least. (smile)
Me: Nice. 6 is not bad. So, what does CSS stand for?
She: Cascading Style Sheets
Me: Ok. Why are they called 'cascading' style sheets?
She: Because you can cascade it onto multiple pages.
Me: So, I need to write a JavaScript snippet that can read a user's inputs in a form, prepare a text file, and save it on the user's desktop. Can I do this using JavaScript?
Him: Sure!
Me: (understandably surprised) Can you show me the code?
Him: Sure! (starts scribbling something down, but gets stuck)
Me: (probing) Are you sure this can be done using JavaScript again?
Him: Yeah, I'm pretty sure.
Me: Have you seen any examples of this before?
Him: Yeah. We have used similar things in our previous organization.
Me: How do I add a style sheet to my HTML document?
Him: Simple. You click on 'Insert' on the menu bar, and click on "Style sheet".
Me: No, I meant by hand-coding in markup
Him: Yeah. You can do it that way too.
Me: Yeah, that's what I'm asking. How do you do it?
Him: You should use the right tag for that purpose.
Me: Which is the right tag for this purpose?
Him: (thinks for some time, but can't come up with anything)
Me: (trying to help him out) Are you familiar with the link and style tags? What do they do?
Him: You use the style tag for attaching style sheets, and the link tag for creating links.
Me: Allright, how good are you at JavaScript?
She: Very good.
Me: That's quite a relief. So, what is the DOM?
She: (thinks for some time) I'm not really sure. I've heard that for the first time.
Me: Is JavaScript an Object Oriented language, or is it a Procedural language? Or is it some weird mix of both? Or is it neither?
Him: I did not understand the question. Could you please tell me what is 'Object Oriented'?
Me: So, about image editing, when would you use the GIF format, and when would you use the JPG format?
She: I'll use the GIF format for making animations, and the JPG for static images.
Me: I meant static images itself. Which format will you use, and on what basis will you decide?
She: Static images? I'll use the JPG format.

Tuesday, January 24, 2006

Say Hi To JSON

At least one good thing about getting low site hits is that every small spike in traffic is noticeable. One such spike I got recently was from the Off Topic forum at Joel On Software. Mark Warner agrees that using JavaScript as the return value of an Ajax call is a great way to exchange data between the server and client.

At Iventa, I'm currently working with a team of very talented individuals in developing a next-generation Web 2.0 application that does some really cool stuff. Needless to say, Ajax technologies are an important part of our interface design. Even if we don’t realize it, we have turned out to use exactly the same architecture that Jessie James Garret had talked about some time ago in his now-famous article. With one significant difference, though. We are still not using XML for transferring data. We don't need the X in Ajax!

What we are using, though, is JSON. JavaScript Object Notation might not be new to most people here, and it isn't rocket science either. Unfortunately, there's not enough information on the Internet that talks about using JSON well. So, well, here goes: A short tutorial on using JSON for Ajax.

We are using ASP.Net 2.0 as the core server-side technology. Personally, I hate anything to do with Microsoft, but I guess business decisions prevail over personal preferences. However, this blog is mine, and I will talk about whatever the hell I like to talk about, and I hate Microsoft, so we are not going to talk about ASP.Net here. We shall just talk about the JavaScript side of things here.

That said, the server is just as important in an Ajax call as the client. Usually, one would use a framework that would let one make "client callbacks" on the server, but this is not necessarily the only way to transmit Ajax data. One could use a more barebones language like PHP directly without any frameworks to do just that – in fact if your site uses very few Ajax calls it is probably better to avoid an Ajax framework anyway.

Back to JSON. So, when we make an Ajax call using JavaScript, the server side script fetches the data we have requested (which could be from a database or from XML files, or any other kind of storage medium). The next step would be to convert it to a format that we can use on the client. This is where JSON kicks in.

Here’s how a typical JSON string would look. I’ve added line-breaks for clarity.

{
 "UserInfo": {

  "id": "100",
  "firstName": "Rakesh",
  "lastName": "Pai",
  "emailAddress": "spamme@spammer.net"
 },
 "MembershipInfo": {

  "JoinDate": "2/31/2006",
  "MemberType": "3"
 }
}

Now, let’s say that I have a JavaScript function defined on the client, already available in a JavaScript include that uses this function as a parameter. Most frameworks will let you define which function will be called. If not, an approach similar to what I had talked about before can be used.

So, the function will look as follows:

function showUserDetails(serializedObject) {
 objResponse = eval("(" + serializedObject + ")");

 // objResponse can now be used as an object with its properties set.
 alert("User’s first name is " + objResponse.UserInfo.firstName);

 // Process the object as required
 ...
}

See how easy it is to use the data coming from the server? JSON makes it amazingly easy to get the data down from the server, create a neat object out of the data that has come in, and consume it the way you want to. The object, of course, can be rather complex, allowing for exchange of very complex data between the server and the browser.

This might not be the most efficient way of doing things. The comments are open for opinions.

ShareThis