Arthur Chang

Official Update from Olark: "hey folks, just posted up some new information about how we load Olark after all other parts of the page, hope this helps explain how we improved times. if you grab the latest code from www.olark.com/install you should be all set :)"

Olark has stalled my document ready event from firing one too many times!  Yes, they're pretty fast most of the time, but still, it's time I could shave off.

The problem
Olark gives you one code snippet to add to the bottom of your dom, right before the end body tag. It creates a div with some info in it, then loads an external js library and initializes olark.  The whole time it does that, your document ready bound events are still waiting.  If olark takes some time, anything you setup in the ready event handler will not actually work, including more event binds.  Most use cases for the document ready event handler are to attach more event handlers to the dom that's now rendered out.  Without the dom finishing, there's no way to attach these js event handlers.  Since Olark could potentially block these from binding, you're left with a limbo stage where your users aren't firing off the correct js events.

The Goal
Render the divs Olark requires at the end of the dom, but loading the external olark js and initializing should come absolutely last, even after all other js in other document ready event handlers.

The Tools
I'm using jQuery to do some nice javascripting here, you can probably find equivalent ways to do it with your own javascript library or you can write them by hand.  I'm also using the Rails framework, so you'll see me say partials and the gists also shows them, etc.

First step
Dissect the snippet of code Olark gives you into parts (in this case I'm using partials in Rails found in app/shared/_olark.html.erb and app/shared/_olark_script.html.erb).  Then use jQuery's awesome getScript function to actually fetch the script, and on success call the initialization function.

Second step
Put the script part right before the end head tag, basically after any other javascript that runs in the head.  It's just a bit of text, so it won't slow anything down on initial page render.  For Rails users, I have it in my application.html.erb layout file, after all the javascript_include_tags renders, right before the end head tag.  The purpose here is to make sure this runs after all other document ready event handlers.  Olark is probably the lowest priority for rendering on your page.  See gist after the third step for the code example.

Third step
Put the div part right before the end of the body tag as usual.  It's not going to be slow to just put in one div and one a tag here.  Example below 

Done
That should basically be it.  Olark js and initialization will now happen after all your other document ready event handlers.

(photo taken a few weeks ago when I went on a spontaneous shoot in San Francisco.  It was really windy so the cloud movement was perfect)

I had a good conversation today that brought up Javascript Closures, which was me mostly having no idea what closures were, and the concept just being pretty hard to explain right off the bat.  Anyway, that all lead me to go checkout what closures are.

In a nutshell, Javascript Closures are most likely used in everyone's code already, and the actual technical aspect is not new, it just has a name.  But knowing about closures can be a powerful tool to avoid using gnarly global variables and needing to keep track of variables, parameters, and such that aren't necessarily needed all the time, globally.

A closure can be seen as an inner function within an outer function, where the inner retains the local variables, parameters, and what not of the outer function, even after the outer function has returned.

Some other ways to see it is that the closure can be a stack-frame that's not deallocated when when the outer function returns.

Again, that might be totally confusing, but take a common occurance as an example (example is using JQuery helpers, got the example from here):

function SetClassOnHover(className){  $("td").hover(    function () {      $(this).addClass(className);    },    function () {      $(this).removeClass(className);    }  );}

What happens is, when the td gets a hover state, you add and remove the class names that were parameteres initially set in the SetClassOnHover function.  SetClassOnHover has already returned, yet when the hover observer is fired off, you still know the className.  That's how closures work!  Hope that makes sense, leave any comments feedback that you have to help clarify or correct.