So far I haven’t gotten any response from Facebook as to when they’ll get around to fixing this critical issue. I’ve created a question over at Stackoverflow; FB.login dialog does not close on Google Chrome. If you have any non-hacky work-arounds, please respond over at Stackoverflow. Also, be sure to vote-up the Facebook bugzilla ticket linked to in the question.

When I compiled and ran the poster maker with the new SDK, I was appalled to notice that all my BitmapImage’s were mirrored horizontally. After Googling around for a bit, and going through Flex bug-fix logs, I came across this bug which gave me a clue as to what might be wrong.

The culprit is the default value of the layoutDirection property of some elements. Sometimes, based on how an element is located in the DOM, the value of layoutDirection might not be set properly. You’ll need to manually set it to LTR (or RTL) so that your images show up correctly.

^*If you haven’t checked it out already, PosterMyWall is a great online poster maker that allows you to create posters and collages from your photos, which you can share online or get printed as large high quality posters.

Although it’s still too early to know if the new design will do better than the previous one in terms of conversion rates and user experience, it is still interesting to compare our goals for the original design, the problems we faced, and how it changed over time.

Problem 1: Facebook Lookalike

Back when the original design was being crafted an important requirement was that it should visually look similar to Facebook. The main reason was that we envisioned tight integration with Facebook down the road. Part of that was having the user go back and forth between Facebook and PosterMyWall. Hence, to reduce the jarring effect of landing on a site very different from Facebook, we chose to look like Facebook. This eventually came back to bite us, for two reasons:

• A prominent concern uncovered in user testing was that the site looks too much like Facebook. That gave the site an unreliable (and unoriginal) feel. A few reviewers even pointed out that some paranoid users might mistake it for a Facebook phishing scam. We certainly didn’t want that to happen. Lesson learned: Imitation might be the sincerest form of flattery, but don’t go and copy the visual theme of a popular product. Go for originality.
• Secondly, its really hard to do a social web product around an activity that is fundamentally not that social; poster making. We had originally envisioned that tight social integration with Facebook (providing social features such as comments, likes, and sharing via a user’s Facebook Wall) would help in maintaining a high coefficient of ‘virality’, thus bringing in lots of traffic and users via Facebook. Even with the presence of sharing and collaboration features that used the Facebook platform, and running a contest that promoted sharing on Facebook, we hit a dead end. Lesson learned: Unless your product or service offers something that’s innately social, don’t try too hard to give it a social twist. Or at least, don’t rely on social features to be the primary source of inbound traffic.

With the new design, the goal was to look dissimilar from Facebook and at the same time give the user a feeling of reliability and trustworthiness. That’s the main reason for going with a color palette with blues and grays in it. (ref: Color Theory for Designers)

Problem 2: Where’re the Posters?

Another noticeable difference between the two designs is the emphasis on poster content in the new design. There are a lot of a poster backgrounds visible to the user as soon as they land on the homepage. There are none in the old one. Visibility of content that the site provides does a better job of setting user expectations than textual descriptions of what the site has to offer.

We were always aware of the fact that our poster backgrounds were hard to get to, since they were hidden in a dialog in the Flash based poster maker; we just needed to invest some time in a solution that worked. Early on, we didn’t have a lot of poster backgrounds to offer the user in the first place, hence our focus was on explaining what the site did via slides and bullets.

Problem 3: Making Changes

When the original design was created, it didn’t take into account some of the features that would be added later on. That was because at that time, we were simply not sure what features would be demanded by users.

Because we had hired a UI consultant (a good friend) to do the Photoshop design work for us, it was sometimes time consuming to go back and forth on the design for newer features. Because of that, on many occasions we would just jimmy rig the UI of a new feature into the existing design without asking him to design it for us. That resulted in the design not aging gracefully. In the above screenshot, the list of blog posts, the ‘InstaCollage’ ad in the top right, and the footer are some examples of design elements that were added later on.

Hence we learned that for a fledgling startup, in which product evolution is inevitable, you need to have a designer with whom you can iterate designs with quickly and efficiently. The overhead of working remotely was just too much for us to properly harness the designer’s skills. This time around, we’ve got an in house designer, which is great.

Oh and if you have feedback on the design, I’d love to hear it!

A lot has happened since my last post, here’s a 30,000ft view:

• My MSE program at Carnegie Mellon University wrapped up in December 2009. After waiting for the holiday season travel insanity to die down, I and Nida flew back from Pittsburgh in January 2010. Being at CMU was a great experience, one I will cherish forever. The MSE program was really grueling, but rewarding at the same time. A big shout out to my CMU team mates, Sam, Soo-Yung, Benjamas, and Guido! You guys rock!
• Since coming back (actually a little before that) I’ve been working on PosterMyWall with a partner in Silicon Valley. Working independently on a new product where you make every decision (and thus are responsible for it) has been an interesting experience. I’m glad I took this route, as its been a lot of fun and I’ve learned a lot. All we need to do now is start selling posters …
• I’ve got a sweet home office setup. Much better than before. Will upload pictures one of these days.

That’s all the personal stuff I’m willing to divulge on the Internet for now :p

Stay tuned for more Web/Usability/Tech posts!

We primarily looked at the Yahoo! Design Pattern Library and tried to enhance patterns with more details, rationale for why they work, and more importantly, back our claims with credible references.

I didn’t find an equivalent design pattern in Yahoo’s library for the method of encouraging contribution that I was thinking of. I’ve seen this pattern used a lot on the Internet. I thought it might be good to give it some rigor and analyze why it works, in what situations it would work well, and how can it be improved. Below is the description of the Community Activity Awareness design pattern that I proposed (yes I know, I’m not good with names). The gist of the pattern is “When providing a user with the opportunity to contribute to the website, show information about how other users have responded (positively) to that particular contribution action”.

I hope this is useful for you if you’re designing the social features of your site. Recommendations for improvements are welcome!

My solution mostly builds on top of these solutions but it also provides the ability to clone classes which have properties that are custom class. And it also works with inheritance.

I’ve placed all helper methods in a CloneUtility class for better modularity. We’ll be using these methods in the code examples below.

public class CloneUtility
{
    /**
     * This method registers an alias for a class. This registration is required for writing and reading the
object in AMF format. If the object is not registered, a runtime error will be thrown when the object is written
in preparation for a clone.
     *
     * @param object The object to register.
     * @return void
     */
    public static function registerClass(object:Object) : void {
        var qualifiedClassName : String = getQualifiedClassName(object).replace( "::", "." );
        registerClassAlias(qualifiedClassName, getDefinitionByName(qualifiedClassName) as Class );
    }

For an example of how to make your classes cloneable, I’ll go with the example of class A and its subclass B. (B extends A)

This technique of making a deep copy works by writing the object to a bytestream, and then reading it back in as a new object. To facilitate this process, the super class (A) will need to implement the IExternalizable interface, which requires the implementation of two methods:

public function writeExternal(output:IDataOutput):void
public function readExternal(input:IDataInput):void

The parent class would look something like this (explained with inline comments).

public class A implements IExternalizable
{
    private var prop1:String;
    private var prop2:int;
    public function A()
    {
        // we need to register class to be able to write and read it back successfully
        CloneUtility.registerClass(this);
    }
    /**
     * This method is responsible for returning a deep copy of this object.
     *
     * @return the cloned copy of this object
     */
    public function clone():A {
        var bytes : ByteArray = CloneUtility.writeObjectToByteArray(this);
        return bytes.readObject() as A;
    }
    /**
     * All properties of the class must be written to output.
     *
     * @param output The stream to which to write to
     * @return void
     */
    public function writeExternal(output:IDataOutput):void {
        output.writeUTF(prop1);
        output.writeInt(prop2);
    }
    /**
     * All properties of the class must be read from the input, in the same order as they were written out.
     *
     * @param input The stream from which to read from
     * @return void
     */
    public function readExternal(input:IDataInput):void {
        prop1 = input.readUTF();
        prop2 = input.readInt();
    }
}

Note that the writeExternal() and readExternal() methods will be invoked when the clone method is invoked (by the write and read calls).

The sub-class, B, would look something like this.

public class B extends A
{
    private var prop3:uint;
    /**
     * The constructor registers this class to enable it for cloning.
     */
    public function B()
    {
        super();
        // subclasses need to register themselves as well
        CloneUtility.registerClass(this);
    }
    /**
     * This method writes all properties of this object to output.
     *
     * @param output The stream to which to write to
     * @return void
     */
    public override function writeExternal(output:IDataOutput):void {
        super.writeExternal(output);
        output.writeUnsignedInt(prop3);
    }
    /**
     * This method reads all properties of this object from input.
     *
     * @param input The stream from which to read from
     * @return void
     */
    public override function readExternal(input:IDataInput):void {
        super.readExternal(input);
        prop3 = input.readUnsignedInt();
    }
}

Note that the sub-class doesn’t need to override the clone method, just the writeExternal() and readExternal() methods.

So far it’s been pretty simple. The cool thing however is that you can also easily clone classes that have a custom class (which supports cloning) as a property. Below is code of a class C that has a property of type B.

public class C implements IExternalizable
{
    private var customProp:B;
    /**
     * The constructor registers object to enable cloning.
     */
    public function C():void
    {
        CloneUtility.registerClass(this);
    }
    /**
     * Make a deep copy of this object.
     *
     * @return A duplicated object of type C
     */
    public function clone():C
    {       
        var bytes : ByteArray = CloneUtility.writeObjectToByteArray(this);
        return bytes.readObject() as C;
    }
    /**
     * This method writes all properties of this object to output.
     *
     * @param output The stream to which to write to
     * @return void
     */ 
    public function writeExternal(output:IDataOutput):void {
        output.writeObject(customProp);
    }
    /**
     * This method reads all properties of this object from input.
     *
     * @param input The stream from which to read from
     * @return void
     */
    public function readExternal(input:IDataInput):void {
        // note that you should cast as the parent custom class (if there is one)
        customProp = input.readObject() as A;
    }
}

Note that you will use output.writeObject() and input.readObject() for custom classes. These methods will invoke the writeExternal() and readExternal() methods that are implemented by those custom classes.

Let me know if this works for you or if you have any suggestions for improvements!

By construction the book means the actual writing of code. It is the central part of software development since the requirements elicitation that precedes it is aimed at finding out what is to be constructed, and the testing phase that follows aims to verify the construction.

After going through the table of contents and skimming some chapters, I was amazed at why I wasn’t taught anything like this in my undergraduate Computer Science degree. In fact, I think one of the reasons why programs such as the MSE program at Carnegie Mellon exist is to fill in the deficiency of sound software engineering skills in CS undergrads. During my undergrad program, even though we had a ‘software engineering’ course, we were still not taught about basic construction techniques such as version control, peer reviews, and managing quality at the code level. I’m pretty sure this is the case for a lot of other programs out there as well.

Perhaps it is due to the fact that software engineering is still a very young field, but there is a huge gap between what is being taught in Computer Science undergraduate courses and what is required out there in the industry. I’m not sure about the statistics on how many undergrads get jobs in the industry right away, but in countries like Pakistan where research is not a priority, I’m willing to bet a majority of CS undergrad students look for jobs in the industry instead of pursuing higher studies and research.

This is exactly why programs need to prepare students for writing industry ready code. Books such as CC2 are vital tools for polishing your skills as a software engineer. I firmly believe that we would have a lot less failed projects and more happy customers if people looking to write code for a living would catch up on their reading first.

I installed 7 on my Dell Vostro 1500, and the first thing that amazed me was that it downloaded and installed all the right drivers. And not generic OEM drivers, official vendor drivers that I had had to manually install in Windows XP.

The new taskbar in my opinion is the best of both worlds; the Mac dock and the old taskbar. Pinning applications to the taskbar is really handy, and now I never have to worry about how many windows I’m going to open.

HomeGroups and the ability to share and stream media across Windows 7 machines is something that I’m looking forward to using on a home server setup. The concept of libraries is also very handy, although perhaps a little unintuitive at first.

Performance, especially hibernate and restore times have been vastly improved, especially if you compare with XP.

Microsoft has been working on some really cool stuff lately. Live Mesh, Windows Live Essentials, IE8, MEDV, and now Windows 7. I’m waiting impatiently for their vision of 2019 to come true.

I remember seeing and touching some of these old dinosaurs, and it’s amazing how fast we’ve progressed. I was wondering what people 20-30 years down the line will think of our Macbook Pros, our Netbooks and our HP Dragons. I wonder how quaint our operating systems and software will look to them.

Even today we can see change happening as the concept of the PC being the sole repository for everything is becoming antiquated as more and more things are getting pushed to the cloud. I’m really impressed by some of Microsoft’s new Live services, particularly Live Mesh. It will be interesting to see what role Windows 7 plays in this transition of everything to the Web and how Windows as an operating system will evolve over the decades.

Exciting times indeed.

Rant ends here. Now I’m going to enjoy spring break!