Quick Win: Zendesk

I was given a chunk of code from a client today to add a tab on a site for Zendesk. You know, those tabs you see everywhere like GetSatisfaction.

Now, I don’t know anything about Zendesk, but I know a JS snippet when I see it. And I also know I can make it better. Here’s my quick win of the day:

First, the original code sample:

  @import url(//asset0.zendesk.com/external/zenbox/zenbox-2.0.css);


  if (typeof(Zenbox) !== "undefined") {
    Zenbox.init({
      dropboxID:   "123456",
      url:         "fake-user.zendesk.com",
      tabID:       "help",
      tabColor:    "black",
      tabPosition: "Right"
    });
  }

Ok, not bad. I like that its fairly clean, and that they’re using protocol-relative paths. However, I know from Steve Souders that IE double-downloads stylesheets when they’re protocol-relative. So the first thing I do is specify https (for my use) or use Ruby to switch on the fly. Then, I moved that CSS to the

</code> and dropped the @import part. Just made it: Now onto the Javascript. I really hate seeing inline code in my html, so I moved it to a new file that I include with my other scripts at the bottom of the



</code> (for high-performance reasons).
The first

About Daniel Morrison

Daniel founded Collective Idea in 2005 to put a name to his growing and already full-time freelance work. He works hard writing code, teaching, and mentoring.

Comments

Brian Ryckbost
November 03, 2010 at 9:35 AM

Any idea where they were using @import for the stylesheet?
Daniel Morrison
November 03, 2010 at 9:56 AM

I can’t think of any good reason. From what I remember, @import makes it a non-parallel download.
Daniel Morrison
November 03, 2010 at 13:02 PM

Did some reading to refresh my memory. @import won’t get seen by old browsers (Netscape 4, IE 5) so you can hide stuff from them. For most uses, that isn’t necessary.
James A. Rosen
November 03, 2010 at 16:11 PM

I can tell you exactly why we were using @import for that stylesheet, since I wrote that template ;)

The problem is that IE7 wouldn’t apply the styles when they they were included in a tag. I had tried the version but found it rendered quite poorly on many customers’ sites. Changing to an @import worked fine. I’d love to see some reasoning on why this would be true.

As for the asynchronous Javascript import… if you already have jQuery, then I think your solution is good. I’m certainly interested in WebKit’s support of the “defer” attribute on Javascript tags. I think that is definitely worth pursuing for the broader audience.
Daniel Morrison
November 04, 2010 at 12:06 PM

Thanks for the info, James!

I like your code snippet for being simple and concise. Much easier than telling people to install jQuery just for this. defer will definitely be cool eventually.
Emanuele
November 05, 2012 at 6:46 AM

great man. you made my day!