Our logo being added to the front window

In the spirit of having some fun, we created a little video for the event. Hope you like Benny Hill!

Robbie and Eddie, Monster Media Inc. installers, hard at work.

Applying the zebra decal.

All of the artwork was printed by Monster Media, Inc., a large format printing company, and cutout with their vinyl router.

Zebra Kick would like to thank Robbie and Eddie, for doing such a great job. You can see their concentration and their steady hands at work in the pictures above. An additional thank you goes out to Monster Media’s graphic designer, Jon, for capturing it all on camera.

Object Literals / Static Objects

Object literals, or static objects, don’t require instantiation with the new operator and also behave like singletons. They are often used for providing utility classes since methods can be called statically, or as parameter packages to provide named arguments or lists to other functions. Consider the following example that illustrates this singleton property of object literals:

Example 1: Static object singleton behavior

var staticObject1 = {
    a: 123,
    b: 456
};

var staticObject2 = staticObject1;
staticObject2.b = "hats";
console.log(staticObject1, staticObject2);

Output:

Object a=123 b=456  Object a=123 b=456
Object a=123 b=hats Object a=123 b=hats

Notice that changing staticObject1.b also affected staticObject2.b. This happens because in JavaScript, when you assign an object to another variable, it simply creates a reference.

The singleton behavior may not always be the desired effect. Many libraries, such as Dojo, offer an object cloning method that can avoid this behavior if just you want to make a copy of a static object. Continuing the previous example, consider the following:

Example 2: Circumventing the singleton behavior

var staticObject3 = dojo.clone(staticObject1); // See the documentation in the link above
staticObject1.a = "pants";
console.log(staticObject1, staticObject2, staticObject3);

Output:

Object a=pants b=hats Object a=pants b=hats Object a=123 b=hats

Notice that the values of the members of staticObject1 and staticObject2 are the same, whereas staticObject3 is not affected by changes to these other objects.

Static objects are also useful for creating project or library namespaces, rather than filling up the global scope, and promote compatibility like no one’s business. This is useful when creating libraries that require portability or interoperability. This can be seen in popular libraries such as Dojo, YUI, ExtJs, and others where all or most methods are called within that library’s specific context (e.g.: dojo.examplMethod(), YUI().exampleMethod(), and Ext.exampleMethod() respectively).

One thing to remember is that in object literals, all members and methods are  necessarily public. Forever and always, so help me Douglas Crockford.  However, this is not the case for constructed objects, as you’ll see shortly.  Access restrictions notwithstanding, static objects can also be considered loosely analogous in purpose and use to C/C++'s struct type.

Constructed Objects / Instantiated Objects

Classes in JavaScript are based on prototypal inheritance, which can be a lengthy subject in itself and can be read about here, here, and here. For now, we will just compare the differences between instantiated and static objects and leave inheritance for another day.

As opposed to static objects, this method of object creation gives the unique opportunity for private scope object members and methods thanks to JavaScript’s closure property. Consider the following example of private class members:

Example 3: Private class members

var SomeObject = function() {
    var privateMember = "I am a private member";
    this.publicMember = "I am a public member";

    this.publicMethod = function() {
        console.log(privateMember, this.publicMember);
    };
};

var o = new SomeObject();
console.log(typeof o.privateMember, typeof o.publicMember);
o.publicMethod();

Output:

undefined string
I am a private member I am a public member

Notice that typeof o.privateMember is “undefined” and not accessible outside of the object, but is from within.

Private methods can also be defined. They are not as straight forward but are still simple to implement. The issue lies in that the value of this within a private method will refer to window if you try to execute it as if it were just any method. There are at least three techniques that can be applied to ensure that this refers to the object that we are working within, in this case, the instance of SomeObject. Consider the following example:

Example 4: Private class methods with call

var SomeObject = function() {
    var privateMember = "I am a private member";
    var privateMethod = function() {
        console.log(privateMember, this.publicMember);
    };

    this.publicMember = "I am a public member";
    this.publicMethod = function() {
        console.log(privateMember, this.publicMember);
    };
    this.privateMethodWrapper = function() {
        privateMethod.call(this);
    }
};

var o = new SomeObject();
console.log(typeof o.privateMethod, typeof o.publicMethod, typeof o.privateMethodWrapper);
o.privateMethodWrapper();

Output:

undefined function function
I am a private member I am a public member

Notice that within privateMethodWrapper(), privatemethod was executed using call and passing in this for the function’s context. This is all fine and allows us to use this within the private method as we normally would; however, the following technique is slightly more preferable as it simplifies the calling context. The previous example can be rearranged to the following:

Example 5: Private class methods with closure reference to this

var SomeObject = function() {
    var self          = this;
    var privateMember = "I am a private member";
    var privateMethod = function() {
        console.log(self.publicMember);
    };

    this.publicMember = "I am a public member";
    this.publicMethod = function() {
        console.log(privateMember, this.publicMember);
    };
    this.privateMethodWrapper = function() {
        privateMethod();
    }
};

var o = new SomeObject();
console.log(typeof o.privateMethod, typeof o.publicMethod, typeof o.privateMethodWrapper);
o.privateMethodWrapper();

Output:

undefined function function
I am a private member I am a public member

Notice that a new private member, self, was introduced and provides a reference to this within privateMethod via the closure property. This method is agreeable for most situations; however, my syntax highlighter doesn’t highlight self the same as it does this, so I prefer the following method.

The third method effectively “locks in” the value of this within the private method. It is the most preferable in that it allows you to have a normal definition using this with the private method as in example #4, and a clean calling context as in example #5. Both the Dojo and Prototype libraries offer utility methods to do this for us: dojo.hitch and function.prototype.bind respectively. I will show how to use these methods, as well as how write your own utility method for achieving the same results for those of you not using those libraries.

Example 6: Private class methods with context locking using dojo.hitch

var SomeObject = function() {
    var privateMember = "I am a private member";
    var privateMethod = dojo.hitch(this, function() {
        console.log(privateMember, this.publicMember);
    });

    this.publicMember = "I am a public member";
    this.publicMethod = function() {
        console.log(privateMember, this.publicMember);
    };
    this.privateMethodWrapper = function() {
        privateMethod();
    }
};

var o = new SomeObject();
o.privateMethodWrapper();

Output:

I am a private member I am a public member

Example 7: Private class methods with context locking using Prototype’s bind

var SomeObject = function() {
    var privateMember = "I am a private member";
    var privateMethod = function() {
        console.log(privateMember, this.publicMember);
    }.bind(this);

    this.publicMember = "I am a public member";
    this.publicMethod = function() {
        console.log(privateMember, this.publicMember);
    };
    this.privateMethodWrapper = function() {
        privateMethod();
    }
};

var o = new SomeObject();
o.privateMethodWrapper();

Output:

I am a private member I am a public member

Example 8: Private class methods with context locking using custom utility method

var lockContext = function(context, callback) {
    return function() {
        callback.apply(context, arguments);
    }
};

var SomeObject = function() {
    var privateMember = "I am a private member";
    var privateMethod = lockContext(this, function() {
        console.log(privateMember, this.publicMember);
    });

    this.publicMember = "I am a public member";
    this.publicMethod = function() {
        console.log(privateMember, this.publicMember);
    };
    this.privateMethodWrapper = function() {
        privateMethod();
    }
};

var o = new SomeObject();
o.privateMethodWrapper();

Output:

I am a private member I am a public member

Example 9: Private class methods with context locking using custom utility method (prototypal variation)

Function.prototype.lockContext = function(context) {
    var self = this;
    return function() {
        self.apply(context, arguments);
    }
};

var SomeObject = function() {
    var privateMember = "I am a private member";
    var privateMethod = function() {
        console.log(privateMember, this.publicMember);
    }.lockContext(this);

    this.publicMember = "I am a public member";
    this.publicMethod = function() {
        console.log(privateMember, this.publicMember);
    };
    this.privateMethodWrapper = function() {
        privateMethod();
    }
};

var o = new SomeObject();
o.privateMethodWrapper();

Output:

I am a private member I am a public member

As you can see, all four of these context locking methods (examples #6 – #9) allow you to keep the executing scope of your private method clean,  freeing you to write the body of your private method as you would any other, and removes the superfluous <tt>self</tt> reference. I’ll let you decide which method works best for you, but I think the prototypal approach is the cleanest. For more information on how context locking works, see the MDC references for apply and call.

Wrapping it Up

There are definite roles that static and instantiated objects fill. For me, part of the joy of writing in JavaScript is knowing when to use which, and how to get the most milage out of their differences. What about you? Let me know if you have any preferences or guidelines when it comes to creating and using objects in JavaScript.

Any good SEO knows the number one rule of research, “don’t tip your hand.”  I feel this news is less of a secret method or technique, and more of a verification that Google is headed in a specific direction with search.  Plus, we have been using this method for a while now, and I would hope that every website applies this method where it makes sense.

How to Get a Jump-To Link in Google Results

If you visit the page directly you will find a table of contents, which links to anchor tags farther down on the page.  Notice the use of keywords in question format for the hash link.

Farther down the page, name="Is_there_a_multiplayer_mode.3f" shows up in an anchor tag.  This is where the page will load when linked to directly.  By using keywords in the anchor name, and having a link at the top of the page for engines and people to follow, the site is clearly showing that various parts of the page have various question answer combos, or more generally a table of contents.

Tips for Ranking Hash Links in Google

First, I would recommend checking out Googles advice on hash linking.

Second, make sure your pages are semantic.  Properly use your H-n level tags to create good page structure.

Don’t keyword stuff the content.  It is easy to be overzealous when creating titles and subtitles.  Stay away from keyword stuffing!

Create a table of contents at the top of the page and also at the bottom (if its a long page).   I have seen some people make the table of contents slide with the scrolling of the page.  If done right, it can be pretty nice.

Link to the page with hashmarks when it makes sense.  If you are referring to a specific section of the page, use hashmarks to direct the browser directly to that section.  I wouldn’t recommend doing this with aggressive link building, as it may trip a filter, but I do recommend hash linking when it makes sense.

FAQ SEO – One Page per Question or One Page per Topic

A few years ago, I was tasked with creating the SEO plan for a regional clinic.  One of the goals of the site was to rank on some long tail FAQ questions about various procedures.  At the time, long tail wordpress posts seemed to be the key to ranking for specific key phrases.  As a result, one topic with 20 questions would have required 20 individule pages.  The benefit of which is that you can really focus on the keywords in the URL and titles of each post for each question.  This allowed smaller, beginning websites to rank for specific long tail terms with very little page authority or link building.

The downside to building multiple pages is that your pages can become a bear to manage, and category pages were then linking to 20 pagers per topic (think watered down link authority).

As a result, I decided to create a single FAQ page for each topic and use hash anchors and hash links for navigation of the long pages.  The pages preformed fairly well, although we had no control to compare to ranking speed.  This method did require some creative link building to rank for competative terms; however, it is much easier to build the authority of a single page than of twenty.

Semantic Microformat Markup and SEO – hCards and vCards

Use semantic markup, even if it doesn’t have any proven direct ranking value right now.   For instance, to date, Google is not using hCard information in its search results, but I still recommend using hCard in SEO campaigns. It doens’t hurt, and nothing feels better than informing your client that the latest Google change puts their website ahead automatically and with no extra work.  Check out this site on microformat markup if you want to dive deeper into microformats.

Also, I would like to thank Andrew Murphy and Juston Johnson (Justin is also a Principal here at Zebra Kick).  Justin and Andrew taught me the importance of semantic markup a few years ago, and were deadset on making pages as semantic as possible.  Thanks guys!

Finally, what semantic tricks do you use on your pages that you don’t see often elsewhere?  Do you have pages that outpreform competition based partially on better markup?  I’d love to know.

Basically this is how Google records street views for Google Maps on streets that can’t be driven on.  Pretty cool huh?

Here are a few links if you found this tricycle interesting.

Google Street View

Video explaining Street View (also embedded in link above).

Site were people post interesting street view images.

This strategy is often used in all forms of persuasion.  Think about the tip jar at your local coffee shop.  When it has a few dollars in it, you are more compelled to drop in a buck.  If a blog post has three comments, you are more inclined to read it and even comment yourself, then if it had no comments.

So how do we apply this strategy to online marketing?

Get creative

Create vanity badges for your website.  why would a company create something if no one was going to use it, therefore they must be popular.  (SEOmoz is a great source for SEO news, and a great example of positive brand popularity building.

For blogs, if you have no comments, then hide the counter.  Don’t bring attention to a lack of community involvement.

If you are trying to recruit Twitter followers, create a button that links to your Twitter and below that display the last three Twitter users that followed you.

Work on your SEO strategy to return your site first for your brand name followed by 9 “discussion” type listings in the results.  Better yet, get Google to auto complete your brand name after the first word or term.

How have you taken measures to increase your brand’s perceived popularity?  Have you ever been “tricked” and realized it after?

The possibilities are endless. The trick is to get creative, be subtle (don’t post fake blog comments), and focus on building brand value in the long term rather than short term.

Somehow, when I opened up my email and saw Hannah Montana in the latest eblast from Redbox, I just knew I had to take a screen shot. Here are a few observations about Redbox and their email campaign that bother me a bit.

Redbox’s DVD Vending Machines are Slick

For those of you who are not familiar with Redbox, it is a DVD rental vending machine that is popular many of the  best grocery stores in Southern California.  The system is fairly impressive.  You browse the selection via a touch screen, swipe your debit card and out pops your DVD.  The movie is yours for a dollar a day.

Redbox Uses E-mail for Communication

Seemingly as impressive as the physical units is the email receipt system.  Within 2-3 min. of renting or returning a DVD you are sent an email for your records.  Fairly slick if you ask me.

Part of being a Redbox user, of course, is being on there email list.  They have done a pretty good job of keeping there email blasts subtle enough that you won’t remove yourself from the list, but once a week you are “informed” of the newest movies in the box.

Redbox, however, has missed a huge opportunity with their direct marketing campaign.  The same weekly email is sent out to every person on the email list.  This means they choose one movie to push hard in the main slot and send it to all the people on the list.

Focus Your Target Demographic

Since Redbox knows every movie that you rent from them, it would be a fairly simple task to assign a “most common genre” tag for each customer.  By doing this, they can send an eblast focusing on action and comedies to the action and comedy fans, while sending The Land Before Time XVI promos to people who tend to rent a lot of Disney films.

Although this does create the need for multiple email promos each week, it is all but guaranteed that the conversions would increase dramatically.  One alternative, however, is to reduce the email list into two groups.  Those who like movie genre A and those who hate movie genre A.  The only thing worse than sending a bland or boring e-blast out is sending an eblast that alienates your customers from your product.

Another reason for Redbox to focus their email marketing campaign is that they are limited to how many rentals of each movie they can have in stock.  This is why promoting 15 movies a week will have a better turn out that promoting their three biggest.

Try Redbox

Lastly, if you haven’t tried this movie vending machine, find a Redbox and try it out.

I uncovered this bug after I had changed the template in app/design/frontend/default/default/layout/checkout.xml in the following block:

<checkout_onepage_index>
    <!-- Mage_Checkout -->
    ...
    <reference name="root">
        <action method="setTemplate">
            <template>page/2columns-right.phtml</template>
        </action>
    </reference>
    ....
<checkout_onepage_index>

The default template specifies 2columns-right.phtml. When I switched to a different template (2columns-left.phtml in my case), onepage checkout broke.

Line 49 of opcheckout.js requires that the progress blocks (that summarize the user’s checkout information on the side) be within an element with the class col-right, which is how it references those blocks to update them when the user progresses to the next checkout step. col-right is part of the template 2columns-right.phtml, which as we saw is what the checkout process uses by default. This works out of the box, but unfortunately makes the onepage checkout process dependent on the 2columns-right.phtml template.

As you may have seen, if the template is changed, the onepage checkout accordion does not automatically expand to show step 2 after the user presses “continue” from step 1. More importantly, the user is not able to proceed past step 3 of the checkout process because of a silent JavaScript error(s).

The bug stems from a poor design choice in basing this sidebar’s functionality on a specific CSS class selector that is part of the global 2columns-right.phtml template rather than on a selector that is directly related to the progress blocks (one which is already being created by that module).

The fix is to replace .col-right on line 49 with .one-page-checkout-progress, a class that is specifically used for the progress block content.  This makes updating of the progress blocks independent of the template, and designers can change the template without having to change the JavaScript or having the checkout process break.

A simple fix for a simple bug, but I have the feeling designers without knowledge of JavaScript would have had a hard time cracking it.  Hope that helps.

Lets get started, piece by piece.   First off, we need a means of storing instances internally.  To do that, we need a static variable within our function.

var getInstance = function(objectName) {
  if ( !getInstance.instances ) {
    getInstance.instances = {};
  }
}

It doesn’t do much, but there you have it.  Now that we have somewhere to store our instances, lets finish out the function by instantiating new objects (only once of course) and returning those singleton instances.

var getInstance = function(objectName) {
  if ( !getInstance.instances ) {
    getInstance.instances = {};
  }

  if ( !getInstance.instances[objectName] ) {
    getInstance.instances[objectName] = new window[objectName]();
  }

  return getInstance.instances[objectName];
}

And that’s it.  Notice the new window[objectName]();.  In JavaScript, all objects are contained within/are relative to the window object.

Consider the following two example classes:

// Normal, globally accessible object
var object = function() {
 this.property = "zebras!"
};

// Static object acting as a namespace
var com = {
  project: {
    widgetAbc: function() {
      this.xyz = 1010101;
    }
  }
};

Basic usage of our new generic singleton factory is as follows:

var instance = getInstance("object");

So far, getInstance works in most instances, but if you’re in an environment where you’re using static, nested objects to create your own brand of namespacing (as in getInstance("com.project.widgetAbc")), then this method falls a little short as is; however, there is solution.

var getInstance = function(objectName) {
  // Static instances container
  if ( !getInstance.instances ) {
    getInstance.instances = {};
  }

  // If an instance hasn't been created yet...
  if ( !getInstance.instances[objectName] ) {
    // All instances are relative to the window object
    var object = window;
    // Handle static object nesting/chaining by splitting on the
    // object separator "."
    var parts  = objectName.split(".");

    // Traverse through the nested static objects until we reach
    // the last one in the chain.
    for ( var i in parts ) {
      object = object[ parts[i] ];
    }

    // Create and store the object's instance
    getInstance.instances[objectName] = new object;
  }

  // Return the stored object's instance
  return getInstance.instances[objectName];
}

I think the comments spell out the changes fairly well, but lets give it a once-over just to be sure.  The major change is that objectName is split on the member operator (.), yielding any array like ["com", "project", "widgetAbc"].  We then iterate through that array, nesting each member within itself starting from the window object until we reach the end of the chain.  This gives us an instantiable reference to the requested class.

Lastly, you’ll notice that on the line, getInstance.instances[objectName] = new object;, I omitted the ().  It works with or without the parenthesis, but I prefer to omit them to distinguish the fact that we are not instantiating an object called “object”, but instead, are instantiating the object referenced by the variable “object.”

Now that we have all that settled, we can use our factory as follows:

var someObject = getInstance("object");
var someWidget = getInstance("com.project.widgetAbc");

I hope that shed some light on the subject.  Feel free to ask a question or two, and don’t hesitate to tell me if I made any mistakes that need correcting.

In June, one of our SEO clients had some development work done by a third party vendor. Once the site update was launched, it was our job to monitor the changes in indexing and make sure that everything was running smooth in the engines.  The work that had been done was on an e-commerce site, so you can imagine how important it is that things go smoothly.

After a couple weeks of collecting data we realized that our sales numbers were low. Given our recent increase in traffic we knew something was wrong. So, time to dig into Google Analytics. 

Diving into Google Analytics

First we ran down all of the steps in our conversion funnel to try and identify were the hitch was.  Our bounce rate was fine, in fact it had improved over the past weeks.  It turned out that we had no major drop in page to page conversion when looking at our whole userbase.

Since we were not able to identify any major problems in our gross user base, the next step was to break down the users into groups that would have specific bugs. We decided to split groups into browsers because that would address any CSS or Javascript errors.

At first glance all browsers appeared to be fine at the top of the funnel, however on closer inspection it turned out that IE6 was not converting compared to pre-launch.  Upon closer inspection it turned out IE6 was having issues during the checkout phase.

Needless to say, once the problem was pointed out to the vender, it was fixed right away.

Lessons Learned

When working with a third party, always do independent testing.

It is important that when you work with a third party vendor that you make sure there testing methods live up to your standards.  It is natural to assume that a company will catch there own bugs; however, the truth is that bugs can pop out of nowhere, which is why it is important to constantly test for them.

Continually test and retest

Just because something is live and has passed internal testing doesn’t mean that it is foolproof.  Make it a habit to constantly check your sites in all browser, as sometimes a bug can slip through.

Always browser test, even small changes.

Just because the layout looks okay on IE6 doesn’t mean that all functions work right.  Justin can attest to the fact that browsers can be just as much trouble for JavaScript as CSS.  Even if you only are changing HTML, adding new content, etc  check the page in various browser.  It is better to spend extra before the bug happens than after it goes live.

Dig DEEP into Analytics at least once a month.

Many SEO’s get stuck in the habit of checking Analytics at least daily. This is a good practice for catching major changes when they first show up.  However, if all you do is check bounce, traffic and referrals, then you can miss out on some major chances to increase conversion. Narrow down your user sets starting with large groups and continue trimming until you are as specific as possible.  It is important, however, that your user groups are large enough to account for margin of error and randomness.

A quick comment on bugs and testing

It is important to remember that bugs do happen.  Yes, as developers, it is our job to polish a product as much as possible before it goes live.  But it is equally as important to keep tabs on a project post-launch so that any minor bugs can be fixed the moment they pop up.  One of the things about designing a website, as compared to print media, is that we create in a world with changing context and parameters.  It is important as designers and developers that we accept this and learn to roll with the punches instead of getting frustrated with old browsers.  That said, if you are still using Internet Explorer 6 or 7, please upgrade.

In what ways has deep site analysis helped you improve your site?