tjduavis.JourneyMan

weblog dedicated to software development, philosophy, and theology


Leave a comment

The Coop with Twitter Support: Release 0.3

For release 0.3, I performed another “polishing” iteration on what I had produced from the previous release.

This iteration was divided into two objectives: The first was to resolve known bugs or unexpected results that carried through from the previous releases and the second was to continue enhancing the user interface / user experience.

The following is an outline of the changes with additional personal comments describing my overall process, experience and lessons learned during this release. For information on obtaining the source code and installation please refer to the Desktop Social Networking Integration project wiki page.

Bugs that have been resolved based on release 0.2:

timestamp-fix.jpg

  • The timestamp is now synchronized with twitter.com. I originally thought that the timestamp of their messages were converted into local time but I believe they are all converted into UTC format. The problem that I did in the previous release was not include the timezone into my Date.parse function.
  • Logging into Twitter upon a first install caused the the main panel to be blank. The user would have to close/hide the side bar and re-open it in order to populate their list of friends. This problem forced me to further investigate how Ajax processes events. Although I have a solution, I still do not fully understand how events work with Ajax. It seems to be like a stack that is generated from a recursive function, as the next line of code can be called and processed despite not completing.
        this._fbs.updateFriends(); //uses an ajax call that processes based on events
        this.buildFriendsPane();
  • Logging into Twitter on the same browser and profile but with a different account would create a problem of displaying the previous logged in users friends. This has been resolved and been tested. I ensured that the correct user id drove the relationship of data being used in the database upon logging in.

User interface and user experience enhancements:

main-console-release03.jpgfriend-console-release03.jpg

  • Replaced the textbox xul element used for displaying the status update messages of the user’s friends with a description xul element. This was the original design but I had stuck in trying to wrap the text value. The problem was that I was setting the text value as an attribute instead of a children of the description xul element. I researched examples on programmatically creating a child “node” for an xul element and the a little snippet can be seen below:
          var timeStampDescripElement = createXULElement("description", { width: "80" } );
          var timeStampTextNode = document.createTextNode(msgTimeStamp);
          timeStampDescripElement.appendChild(timeStampTextNode);

          statusMessage.appendChild(timeStampDescripElement);
  • Once the description element was in place, I noticed that it needed to further esthetics enhancements as it was very plain and dull. The textbox revealed how it looked with straight borders so I wanted to try something new. To be consistent with the theme I used the existing design scheme of the fade and added that CSS class for the description xul element.
  • The last touch up was the aligning / spacing of the messages and the timestamp. For the main friends view I placed the timestamp from the bottom and aligned it to the right as it seemed like a more pleasing appeal and balanced the existing composition. For the friend view I made the timestamp and messages structured row by row, with the timestamp being the first column and the second is the actual message. I wrapped both timestamp and messages in order to have a clean spacing desite the length of the content.
  • During my testing I noticed that my friends in Twitter posted hyperlinks on their status messages. I noticed that these hyperlinks did not wrap around despite it being included as text node. I thought that the problem was the hyperlink needed to be set in a proper anchor tag element so then I did so more overtime work. I have to give credit to Start IT Up and a couple of MozDevs (Ted and Mfinkle) for helping me generate ideas and tips to solve my dilemma. Despite the solution for setting the hyperlink in an anchor tag the problem still occured. So my next idea for a solution was to determine if the hyperlink was greater than the space allowed and if so I would cut in half the text and appended a “…”. The code for this is really ugly but I just wanted to mockup this up and see if it provides any value or could be elaborated.

coop-release03-hyperlink1.jpgcoop-release03-hyperlink2.jpg

I recognize that there still needs to be a lot more testing and further feedback on the existing user interface / usability is needed, so please feel free to try to break my release or butcher me with comments on the overall appeal and usability… Happy “hacking”!