JavaScript, Pinterest

Rendering pinterest buttons on the fly

Leave a comment

I started out googling  and soon enough I  found out a way to archive what I was after here.  The second method described was what I was looking for. Sadly it did not work, so I started debugging it, here is what I came up with.

 

!function(a,b,c){var d,e,f;f="PIN_"+~~((new Date).getTime()/864e5),a[f]||(a[f]=!0,a.setTimeout(function(){d=b.getElementsByTagName("SCRIPT")[0],e=b.createElement("SCRIPT"),e.type="text/javascript",e.async=!0,e.src=c+"?"+f,d.parentNode.insertBefore(e,d)},10))}(window,document,"//assets.pinterest.com/js/pinit_main.js");

Loading //assets.pinterest.com/js/pinit.js, just loads pinit_main.js that makes the jQuery onload callback fire before pinterest is loaded, from the setTimeout.

Secondly the function to get the pinterest instance was a bit flawed, when I tested this in my AJAX application I noticed that  when navigating around, adding/removing instances of pin buttons the objects gets cleaned up.

// Get the Pinterest instance
    get: function() {
      for (var i in window) {
         if (i.indexOf('PIN_') == 0 && typeof window[i] == 'object') {
            return window[i];
         }
      }
    },

So extra checks needed to find the active instance. Here is my take on it:

var Pinterest = {
    load: function(callback) {
        $.getScript('//assets.pinterest.com/js/pinit_main.js', callback);
    },

    // Get the Pinterest instance
    get: function() {
        
        var i;
        
        for (i in window) {
            if (window.hasOwnProperty(i)) {
                if (i.indexOf('PIN_') === 0 && typeof window[i] === 'object' && window[i].f.render.buttonPin !== undefined) {
                    return window[i];
                }
            }
        }
    },

    // Render Pinterest buttons
    render: function(el) {
        
        if (el.id.indexOf("PIN_") === 0) {
            return;
        }
        
        this.get().f.render.buttonPin(el);
    }
}

Try it out the JsFiddle here

Thanks sourcey for the initial code.

Uncategorized

Var statement and ie8

Leave a comment

Today I came across a weird bug in internet explorer 8 and downwards that is incompatible with standard javascript.

Internet explorer 8 threw exceptions about undefined variables when we were referencing third party dependencies like domready and yepnope.

SCRIPT5007: Unable to get property ‘yepnope’ of undefined or null reference

The error boils down to the following test case

myLib.js

window.myLib = {};

fault.js

var myLib;

console.log(myLib);
console.log(window.myLib);

Include myLib.js and fault.js with script.

myLib and window.myLib will be undefined when running this on ie8 for some reason.

Now if I declare myLib like this :

var myLib = {};

there will be no problem in fault.js.

Ie8 also has some known errors when it comes to using var, for example typing var window; will throw “SCRIPT5039: Redeclaration of const property” as an exception.

For now I would not recommend using var in the window scope at all if you are targeting IE8.

Google App Engine, Java

Creating portable owned JDO relations on Google App Engine

5 Comments

Background

We have an application that runs on a traditional J2EE environment and Google App Engine, with as identical code base as possible. We use JDO for persistance. In Google App Engine you need to use Key objects as the primary key for owned relations in an entity group. Obviously we can’t use the Key class as our primary key if we want to be portable, since it’s not available in a non Google App Engine class path.

Google App Engine supports encoded strings as keys, however this breaks automatic identity value generation in most RDBMS. To work around this you would have to handle Continue reading Creating portable owned JDO relations on Google App Engine →