Procedure

The initial weeks @ Yahoo was nice. Lots of things to understand and lots of basic stuff to know. There are many things that happen in an organization like Yahoo. The first thing is that no one explains things to you unless you trouble them. There are manuals and other docs that let you learn.

The levels of filtering that a web page access goes through is extensive. Performance is another thing. Your users would stop using your application if it has not been configured for great performance. Integration with the rest of the applications and single sign on implementation is another highlight. Load balancing and routing of requests has been done wonderfully.

Rest to come after I learn something !

Yahoo !

It was always my ambition to get into a good organization after I complete my education. I was not that great in studying but did pretty good. I was lucky mostly and had great friends who helped a lot. I was thrilled when Jayasu got into Yahoo! during those placement days and had thought of making him refer me at a later stage. Well that paid off ! Jayasu referred me and here I am @ Yahoo! The office is great but whats excellent is the work force. The people here are amongst the best in the industry. The architecture and maintainability of these huge chunks of code is something that I am very interested in knowing and understanding. The interoperability that components of Yahoo has and how they do scalability. How do they block attacks and where do they get great ideas. Tough times lie ahead as to understand them ill need a lot of time, but ill wait and take one day at a time.

Phew - Learning is hard

The last month had a learning curve to it. I had to learn and understand quite a bit of stuff. General http was one. These interview sessions require that you have the basic knowledge of stuff. The web is some thing that I thought I was comfortable with, but the sessions proved me wrong.

Javascript was some thing that I studied. I have used normal Javascript functions but not to the level as Closures. "Everyone uses closures, knowingly and unknowingly" was the statement of a friend of mine. Cross Side Scripting was another thing that I understood.

What are Sessions ? What are Cookies ? What are the different types of Cookies ? What do you do to maintain Sessions if Cookies are not accepted by your browser ? What is the access policy for a Cookie ?

Alternate Ajax techniques was also another topic that I went through. What happens if the Javascript in the browser is deactivated ? What is Accessibility and whats its importance ? What is Reverse Ajax ? Polling and Pushing ? What are iFrames used for and what are its disadvantages ? Whats JSONP ? What are the security issues ?

What are Javascript Events and how do you handle Cross Browser Event Handling problems ? What is Capturing and Bubbling ?

Why are CSS said to be Cascading ? What is the priority set by the CSS selectors ?

How would you improve the performance of a page ? What are Http Caches ? What are the Http Status Codes ? How would I track errors if accessed using Ajax ?

Why do I use Doctypes ? What are Semantic Markups used for ?

What is a Proxy ? What is a Reverse Proxy ?

Theres a vast array of questions but these troubled me a lot lately.

Wave similarities

I went through a presentation given by Lars Rasmussen for Google Wave. And I found striking similarities to a project I had dome with Enthiosys called Prune the Product Tree. The idea of PTPT (as we called it) was giving a roadmap to a product by live collaboration. This collaboration was done using manipulation of images (drag, drop of items in a canvas using SVG/VML) and chats between users. It also showed the online and offline activity of a user had revisions of the stuff he did.

Playback was some thing Luke had in mind. As in the users who see the entire collaborated content could playback the evolution of the product by just the click of a button. The playback would continuously get the data and then playback each and every action taken by the users. These action items may vary from adding, moving, and deleting the items(fruits/leaves) or comments. Cloning and editing of the product tree is also possible.

The difference was that it did not use HTML5 but used the native SVG (firefox/chrome/safari) or VML (IE)

Apache Passenger

This is a small entry which got me and Abhijith confused. We started Apache with Passenger installed as a module after configuring an app from a railscasts episode. Added the entry using the Passenger Pane. But it showed an access denied. Apache was running as a separate user. I gave permissions for the application directory, but still the result was the same. Abhijat then added permissions to the parent directory as well and the applicaion started running. Dont knwo why Apache needs the permissions for the parent directory as well.

Its written here ...

A Collection of Interviews

The last two weeks have been tiring. I was asked to look into the avatar system and see if an html implementation is possible. Now the complexity is not with the creation of the main avatar. This could be done using the combine command available with Image Magick. The problem is that the technique does not give you a perfect image. The preview is also a problem. Either we could create static images with all the possible combinations (eye style one, face style three etc.). Adding of another part is something that creates a problem.

Cartoonizing an image is also something that I was looking into. This is possible by various transformation using Image Magick, but the results where not upto industrial standards. Rotoscope is an application which facilitates the creation of an image which looks like a cartoon. But this does not have a command interface. I went through many algorithms as well which mae this conversation possible. I then stumbled upon an application which used the Open Source Gimp, called GMIC. I did all the required dependency installations using mac ports. But the main installation of GMIC got stuck because of the Imagick++ extension in C++. This comes with Graphics Magick, a C++ extension for Image Magick. The configure did not work even after this installation. I am still not able to compile it. Help required for this.

The other task was to take interviews. Generally for Ruby on Rails and implementation aspects of a architecture. Conducting interviews is a fun thing to do. I got to learn a lot from the interviewees as well. Interaction with people, when to say what, great intellectual conversations etc. Its a little tiring to talk continuously for more than an hour, but its worth it.

The South Side

3 years and 2 months after I joined Globallogic, I decided to change for the better. Bangalore is my destination. Being idle for some time makes you grumpy and dull and thats what is happening to me now. Being in a big company also matters. Its different when you get up from your seat and you find people sitting around you working their butt off.

Now the environment is much more quiet. Too quiet actually and some what lonely. Changes happen for the best and getting over it is an art. An art people try to perfect. I still feel sad that GL did not even ask to me stay. They did not offer me anything coz they said they could not offer anything concrete. They are in a hiring spree now and they have nothing concrete ?

The traffic is a killer in Bangalore. It normally takes 10 minutes to reach my place. Due to the traffic it takes 30 minutes or more. Everybody is busy and no one even pauses for a second. I have not been able to find out a decent and cost effective place to eat yet and that troubles me a lot. Noida had its problems with the weather but I never felt alone.

Lets see how this works out !

Rails Style

I had this great conversions from 2 great people from Castle Rock Research yesterday. Very technically sound people and I had a great time talking to them. Some of the questions they asked were pertaining to Ruby on Rails. I jot some of the questions and the answers here.

Why Ruby on Rails ? Painless application development. Enjoy as you develop. Make changes to the core code even as per you liking and optimization. Clear cut Modal/View/Controller distinction and therefore less coupling. Great plugins which club with the application. Development of plugins made easy. No configurations at all. Scalability using extensive techniques like mongrel clustering, load balancing, sticky session management etc. Faster access by allowing local server routing, Memcached etc. Searching made easy with ferret. Instant messaging made easy with Juggernaut etc. Background processing using ap4r etc.

I started out with Java (by learning Java) and it has pros of its own. It is injustice to compare languages or technologies but their relevance is according to the business problem.

Add you own pluralization for the modals ? Action Support Inflector routines which let you add pluralizations easy.
ActiveSupport::Inflector.inflections do |inflect| inflect.irregular 'criterion', 'criteria'; end

Difference between nil and false ? I pondered on this question for a some time. But all I could get is that nil and false are objects which will evaluate to a false inside an if condition. But they are of different classes. NilClass and FalseClass.

How would you show the tree structure (like the 1st level, 2nd level, 3rd level links between 2 members in linkedin) when queried. As in what type of an approach would you use? A tree structure could be attained by using the acts as tree plugin. Now to show it would require you to parse the tree in some fashion. A BFS (Breadth First Search0 and DFS (Depth First Search) were 2 things which came into my mind. BFS seemed to be the logical idea as the search was with respect to the level.

What kind of an approach would be be using for a 'list of updates of friends' table ? A queue which gives you the update (filtered on and ordered) with respect to the relation of the user and the updater. We could also stored this in a table separately and then use some kind of backgroudn process to give the results so that the main server would be clogged.

These were some of the thoughts shared.

Talent

Off late the topic has been puzzling me. Three years of work and I still wonder sometimes that I have done nothing substantial. Somebody asks me something that I understood years back and I stutter and stammer. I had a couple of face to faces and it seems that I get confused when I encounter a question. It has a lot to do with attitude and skill. Does a resume successfully convey the type of person you really are ? Resumes just give a overall view. What you are is what you do. My presence on the net, the things I have done showcases the willingness to learn.

If a single face to face is enough to determine the talent that you have, then I would just have to go through every interview questions to get through an interview. But I feel that I learn from an interview and I am doing justice to the firm only by telling them what I really did. My style and my rules.

A Dedication

I didn't think twice to decide that I needed to write something for dear Shilpi. It was her last day yesterday and we had a nice get together in caffiiaa in the night. Just the usual dinner with coffee. The hookka was a bonus item which happened to be available. We smoked the damn thing using our mouth and even the nose after which it started giving out raw coal taste. Swati was still adement and wanted to smoke the thing. She gave up after she coughed her guts out.

It was nice to know what all the people who gathered - Gitesh, Swati, KD, Srinath, Manisha, Vineeth, me n' and Shilpi - thought about Shilpi (exculding Shilpi ofcourse). We went on saying the good and bad qualities that we thought we had. We were in total agreement that she was a decision maked and a situation handler. I thought about those times when she puked inside a car, I said I would come to play with her but did not etc. She talked sensible stuff and was not girly about it through out our friendship. Really nice friend to have.

Dedications are all for you Shilpi. Hope you lead a great life ahead. Ciao

Ajaxified Will Paginate

I added the will_paginate plug-in for my rails 2.3.2 application but quickly found that there was no way I could ajaxify it. So I made a renderer of my own by modifyind some code. It was fun and effective.

The will_paginate.rb file inside config/initializers look like this..

class PaginationListLinkRenderer < WillPaginate::LinkRenderer

  def to_html
    links = @options[:page_links] ? windowed_links : []

    links.unshift(page_link_or_span(@collection.previous_page, 'previous', @options[:previous_label]))
    links.push(page_link_or_span(@collection.next_page, 'next', @options[:next_label]))

    html = links.join(@options[:separator])
    @options[:container] ? @template.content_tag(:ul, html, html_attributes) : html
  end

protected

  def windowed_links
    visible_page_numbers.map { |n| page_link_or_span(n, (n == current_page ? 'current' : nil)) }
  end

  def page_link_or_span(page, span_class, text = nil)
    text ||= page.to_s
    if page && page != current_page
      page_link(page, text, :class => span_class)
    else
      page_span(page, text, :class => span_class)
    end
  end

  def page_link(page, text, attributes = {})
    if @options[:ajax].nil?
      return @template.content_tag(:li, @template.link_to(text, url_for(page)), attributes)
    else
      return @template.content_tag(:li, @template.link_to(text,'#', :onclick => ajax_url_for(page)), attributes) 
    end
  end
  
  def ajax_url_for(page)
    return @options[:fn_name]+'("'+ (page.to_s) +'")'
  end

  def page_span(page, text, attributes = {})
    @template.content_tag(:li, text, attributes)
  end

end

WillPaginate::ViewHelpers.pagination_options[:renderer] = 'PaginationListLinkRenderer'
WillPaginate::ViewHelpers.pagination_options[:previous_label] = 'Prev'
WillPaginate::ViewHelpers.pagination_options[:next_label] = 'Next'

The ajax_url_for page gives the javascript to be called for the link. The options added are

:ajax => true (to signify that it is an Ajax request)
:fn_name => some_function_name (The Javascipt function which has the Ajax call)

The view is a partial which requires these local variables to be passed

A collection of paginated records using will_paginate's Model.paginate(:page => page)
A base_url which has the url to which the page parameter should be added.
The container which should be populated after the Ajax call.

The partial looks like this ...

<script type="text/javascript"><br />var access_page_for_paginate = function(page_no){<br /> <%= remote_function(:update => container, :url => base_url, :with => '"page="+page_no') %><br />}<br /></script>
<div class="pagination_container">
<%= will_paginate collection, :ajax => true, :base => base_url,
:container => container, :fn_name => 'access_page_for_paginate' %>
</div>

And the partial is called like this ..

<%= render :partial => 'partials/ajax_paginate',
:locals => {:collection => @feeds, :base_url => show_service_url, :container => 'profile_all'} %>

The Face of the Web

It changes everyday. Trends change and so does the people who use them. We have all seen what a simple application like twitter did to the community. It made the community addicted to it. And millions of people find it important to use this service as a medium of communication. I still remember the incident when twitter was able to save a life.

The term 'service' is a very subtle but important thing to note here. Saumitri helped me understand the true role of an application. An application can be a utility or a service. Utility is something a user would come for a specific purpose. He might or might not choose to return to the application. But a service is something that pulls the user and makes him do stuff with the application. The success of twitter lies in the fact that it is a service. And this service has a large amount of marketting, driven by the common user. People who are part of this application sell the application. They are fully in control of what they want to publish, which might be even advertising themselves, and they have a greater reach.

Now applications like twitpic have solved something that twitter did not have. Store a picture in twitpic and we will post a link to your twitter account. Twitter having an open API made things easier. Think of the time when twitter would allow you to attach images from the main application itself. Twitpic becomes irrelevant. Twitpic for me is then a utility. It uses something and routes traffic into the application. Intelligent and effective but for a short term.

Most of those great applications, if you notice, have a very simple idea as their core. They facilitate a certain action and they render them in a unique style. Once we get used to a style, it is pretty hard to revert or use another one. The crux is not to develop UI intensive applications which serve multiple purposes, but to have an application simple enough which fulfils a purpose in a simple fashion.

These kinds of ideas are hard to come by. They just click at once. I am on the look out for an idea that would change my world and one that would leave a footprint on the net.

Search search search

I was wondering how searching 'dineshvasudevan' in those search engines would result. Attached are some results from Google, Yahoo and Bing.

I have a blog of my own and I expect it to come up some where on the first page. It comes up for Google and Yahoo. But for some ODD reason Bing does not even have it on any of the pages. Thats a load of crap.

My Linked In profile comes up for Google and Yahoo but not for Bing. Very bad indeed.

Slideshare seems to be a very popular site for all the three. Thats good.

My twitter profile comes up on the first page for Google, on the second page for Yahoo. I get other people's twitter pages when I search me on Bing. HAHAHA .

Google has a suggest option where as Yahoo includes the result and asks me if I want them excluded. Bing does nothing of that sort.


--

--

Jira Again

Its been some time since I have worked on Jira. Creating plugins and modifying Java/Velocity Template/jsp code was what I used to do earlier. It was fun earlier when you start of learning new things and understand the structure of the excellent code written for Jira. But then the work becomes monotonous and you feel that you have more to give. After having finished with Enthiosys but developing some high end stuff based on SVG, javascript and HTML, I was asked to do some work on Jira.

The idea is a simple one. try to build something that would let users chat about some Jira issue and then log the chat into the Jira issue as comments. :) . Simple as it sounds, I had to set up a Jabber server. I used the excellent OpenFire as the server. The LDAP credentials for the company, I managed to obtain and then configured it so that all the users of the company could log in. Jira 3.13.4 was downloaded and I managed to connect to LDAP as well with the help of Indraneel.

Then came the difficult part. The application which was to be in AIR. I first thought to try to build it using flash. Actionscripting is something that I could do. But to have frames build movie clips is something that I could not do. I was good with HTML and Javascript and thought I would do it my way using HTML Ajax. I decided to build the required files to communicate with Jira and Jabber in flash so that I could use them in HTML using the window.runtime object provided by Adobe AIR.

Jira offers 2 ways of external communication. SOAP and XML RPC. I downloaded a bunch of those classes which facilitated the SOAP communication, because SOAP was well documented and XML RPC was crude, but did not have much luck getting information from Jira. The envelope and the structure of the xml was not being detected by the class for some reason. I had success with XML RPC and decided to go on with that.

The communication with Jabber was done with the excellent XIFF library. It is one of the best libraries that I have seen but is a little less in documentation. That is ok as long as it has all the necessary stuff required to develop.

I tried compiling the libraries into swf files, but for some reason they were not included in the file. I had just used an import statement. Ashish suggested to use a function and after using a function which initiated the class, I managed to get all the libraries for access. Event listeners were something that needed to be taken care of. At first the idea was to call Javascript from the Actionscript but the sand box had restrictions. This made me create event handlers in javascript and attach then using javascript. That worked fine.

With all the things setup, the next step was to build the interface. The interface would be simple with a list of contacts, an option to search, find and add contacts and chat with a contact. To create a native window with the chat was the next big step. I managed to populate the list of contacts with online and offline contacts (this list would change as and when the user logs in).

The native window creation according to the chat was tricky. It was tricky because to show the window was not a big deal, but to load chats in it was a pretty big deal. The handle for the window must be maitained by the main window and the chats must be sent as well. As of now I am working on this and I hope Ill make progress.

Long Break

March 10th was the last day I blogged. It has been a month now. Mostly because of the roaming around that I do and partially because of the work. I managed to convince my manager that I had to go home even though I had no leaves. Ravindra was lenient enough to give me some leaves. I went home on the 27th of March. As usual the visit was mainly concentrated on meeting family members and relatives. I also managed to celebrate the retirement of a close family friend. The weather in Kerala was trying. Very humid and dry. I managed to play some badminton with some elderly guys but was pathetic at it. We celebrated Surbhi's birthday with style after reaching the office. It was a smooth month anyway !!!

Holi @ the office

The previous year we were on our way to Mukhteshwar when it was 'Holi'. This time around I celebrated the day before holi at the office !!

Dull Times

These are dull times and therefore the urge to write posts just faded away. The month of February was a very dim one except my birthday part. I thoroughly enjoyed the party and the temple visit. By work caught up as usual. The economy is going through a bad time and companies, including mine, have shown this adverse effect affecting them. Still you will have to work to stay alive and as for me I honestly do not know any thing else to do. The project seems to be going smooth and we certainly seem to be delivering more than is expected. The SVG stuff and the javascript associated with it sometimes makes me go a little crazy but overall it was a learning experience. I managed to catch up some Selenium stuff which I liked doing. I also had the good fortune to interview a 6 year experienced person ! Overall Life's OK.

Scalable Vector Graphics - The Next Generation?

I had the opportunity of working in a relatively new (supposedly cutting edge) technology called Scalar Vector Graphics in my new project. IT has been great up until now. SVG is a language for describing two-dimensional graphics and graphical applications in XML. This XML could be either an external file or an inline XML. SVG has some primary inbuilt support in Firefox and for the lousy Internet Explorer there's the Adobe SVG Viewer.

When we started out with the project which was about drawing stuff(shapes and figures) in a canvas collaboratively, we were unsure about what to use. Since we needed the users to draw polygons and drag and drop objects (images that represent objects) to these polygons (and identify this region ), we were looking for some high end stuff. Indraneel suggested the use of SVG and before that I had very little or no knowledge of SVG. Reading about SVG and understanding it took some time but when it was known that the programming would be done in Javascript I was quite comfortable.

Javascript is used to manipulate the drawing of regions and dragging and dropping of items on these regions. The first wrapper Javascript library I saw was based on JQuery. I started out doing some POC using this library, but JQuery is not my style of coding. I like the operator/operand/manipulation style of coding which I think Prototype provides. So I went on to find another library thats based on Prototype called Prototype Graphic. I found this library excellent and fulfilled all of my needs. The sample files helped a lot in understanding the things I could do with this wonderful library.

The server side of the application was done by Dan and the client side (HTML/ Javascript/ CSS) was done by me. I tried to structure the application code in a class style as done with Workstreamer. Base application, managers like Layermanager, Layertreemanager, Usermanager etc. I had to also do a lot of changes in the main Prototype Graphics Javascript files, like adding node elements to the base SVG.

The Application.js file has all the base methods and initialization. This also meant uderstanding the stage of the game (plan, play, postprocessing) and setting up the item necessary for each stage. It also had hooks (event methods) so that all the data structures could be updated. This might be something like when a new object is created what methoids must be called so that the data is updated in the server.

The application dealt with the creation of layers (a collection of regions) and regions (with is a polygon shape). A Layermanager.js file was created with maintains the list of layers which inturn would have a list of regions. Each region would have a shape associated with it so that highlighing ( displaying the border with a different color) is possible. The regions would essentially have a set of co-ordinates (x and y) and this co-ordinates would be feeded to the server when the user is reday to create his game. Methods for hiding a layer(which meant hiding all the regions inside a layer), showing a layer etc were added.

The layers and regions had to presented to the user in some way. I felt a tree would be fit this requirement perfectly. Each layer would/could have regions as children and they could be renamed (labelled). An id (generated from inside the layermanager) would bbe assigned to each layer/region on creation and that would be its base identifier. Now for the tree I started out with the Yahoo! tree, but soon had to change it because of its clash with the JQuery code which was inserted by the server. The clash with Prototype was solved using jQuery's no conflict option. Aditya did his POC and gave me the TafelTree implementation which was based on Prototype. Hooks were added so that on selecting a region, the region would be highlighted on the canvas and on selecting a layer, that layer (ie the regions inside that layer) would show and all the others would be hidden.

The Draggablemanager.js file was the base file used to create the objects on dragging and dropping. The canvas would have a palette (an area which will have objects which could be initialized by dragging and dropping into the droppable area). Dragging from the palette would actually clone the object being dragged, add all the necesaary classes to identify the newly created object and after the drop was done would issue the create object command. To identify the object moved to created a class was added. All the updates to the canvas was done using a full refresh of the canvas. The server implemented using a framework called Lift would facilitate this. The refresh is done by lift comet calling a pre defined Javascript function which would refresh (redraw) the game board. The selection of items (for delete, lock, unlock) was done by drawing a circle around it after the object (which is in the canvas) was clicked. Double clicking on the item would fire a modal window inside the browser where the user could update the label and description for the item.

The regions inside a layer would have a fill ( color inside the polygon) which is the same. ie Different layers would have different fill colors. This color was maintained byt inserting this information in cookies. As the canvas was constantly refreshed, randomizing the color everytime felt odd. Therefore the code was stored inside cookies and therefore cookie,js was used.

A carousel control was used to show the backgrounds/objects available to the user during planning. The coding done for this control was one of the best I have seen. It took me some time to actually understand what Victor had done with this.

A gamecreator was created so that the game definition JSON could be generated and passed to the server during the game plan phase. This also had methods to update the background image, game name and description.

The chat feature was one feature that I felt increased the level of collaboration in this product. The comet from the Lift made this possible. The Usermanager was created to maintain the list of users, identify the current user and his privileges, and populate the chat messages in the necessary container.

Ill be writing more about the coding aspect in the next post !