Online Aspect

Posts tagged ‘edge cases’


Pinterest’s 25 edge cases

I was snooping around the JavaScript that Pinterest uses for their “Pin It” button. No real reason. I’m just nosy.

Most of the code is what you would expect, but what jumped out at me were the 25 websites that get special treatment. In fact, Pinterest’s JavaScript is riddled with special handling for edge-cases on third-party sites. As a developer, I have the tendency to always search for the universal solution – one piece of code that works everywhere. While universal code is arguably “better”, this more often than not is what code looks like in the “real world”.

lookup: {
        artsy: {
            page: {
                seek: [/^https?:\/\/(.*?\.|)artsy\.net\/artwork\//,
                    /^https?:\/\/(.*?\.|)artsy\.net\/post\//
                ]
            },
            img: {
                seek: [/^https?:\/\/(.*?\.|)artsy\.net\//],
                act: "lookup"
            }
        },
        behance: {
            img: {
                seek: [/^http:\/\/behance\.vo\.llnwd\.net\//],
                act: "lookup"
            }
        },
        dasauge: {
            img: {
                seek: [/^https?:\/\/cdn?[0-9]\.dasauge\.net\//],
                act: "lookup"
            }
        },
        dailymotion: {
            page: {
                seek: [/^https?:\/\/.*?\.dailymotion\.com\//],
                act: "lookup",
                via: "id",
                multimedia: true,
                doNotCrawl: true
            }
        },
        dreamstime: {
            img: {
                seek: [/(.*?)\.dreamstime\.com\//],
                act: "lookup"
            }
        },
        etsy: {
            page: {
                seek: [/^https?:\/\/.*?\.etsy\.com\/listing\//],
                patch: {
                    img: function (g) {
                        return g.replace(/il_(.*?)\./,
                            "il_570xN.")
                    }
                }
            },
            img: {
                seek: [/^https?:\/\/.*?\.etsystatic\.com\//],
                patch: function (g) {
                    return g.replace(/il_(.*?)\./, "il_570xN.")
                },
                act: "lookup"
            }
        },
        fivehundredpx: {
            page: {
                seek: [/^https?:\/\/500px\.com\/photo\//],
                act: "lookup",
                via: "id",
                doNotCrawl: true
            },
            img: {
                seek: [/pcdn\.500px\.net\//],
                act: "lookup"
            }
        },
        facebook: {
            page: {
                seek: [/^https?:\/\/(.*?\.|)facebook\.com\//],
                act: "close",
                msg: "privateDomain",
                patch: function (g) {
                    return g.replace(/%privateDomain%/, "Facebook")
                }
            }
        },
        flickr: {
            page: {
                seek: [/^https?:\/\/www\.flickr\.com\//],
                act: "lookup",
                via: "id",
                doNotCrawl: true
            },
            img: {
                seek: [/staticflickr.com\//, /static.flickr.com\//],
                act: "lookup"
            }
        },
        geograph: {
            img: {
                seek: [/^https?:\/\/(.*?)\.geograph\.org\./],
                act: "lookup"
            }
        },
        googleReader: {
            page: {
                seek: [/^https?:\/\/.*?\.google\.com\/reader\//],
                act: "close",
                msg: "privateDomain",
                patch: function (g) {
                    return g.replace(/%privateDomain%/, "Google Reader")
                }
            }
        },
        googleList: {
            page: {
                seek: [/^https?:\/\/www\.google\.com\/search(.*&tbm=isch.*)/],
                patch: function (g) {
                    g.f.debug("patching Google Image Search results");
                    var i, j, a, b, c, d;
                    if (i = g.d.getElementById("ires")) {
                        i = i.getElementsByTagName("A");
                        j = 0;
                        for (a = i.length; j < a; j += 1) {
                            d = c = "";
                            if (i[j].href) {
                                b = i[j].href.split("imgrefurl=");
                                if (b[1]) c = b[1].split("&")[0];
                                b = i[j].href.split("imgurl=");
                                if (b[1]) d = b[1].split("&")[0]
                            }
                            if (c && d) {
                                b = i[j].getElementsByTagName("IMG");
                                if (b[0]) {
                                    g.f.set(b[0], "data-pin-url", decodeURIComponent(c));
                                    g.f.set(b[0], "data-pin-media", decodeURIComponent(d))
                                }
                            }
                        }
                    }
                }
            }
        },
        imdb: {
            img: {
                seek: [/^https?:\/\/(.*?)\.media-imdb\.com\/images\//],
                patch: function (g) {
                    return g.replace(/@@(.*)/,
                        "@@._V1_SX800.jpg")
                }
            }
        },
        kickstarter: {
            page: {
                seek: [/^https?:\/\/.*?\.kickstarter\.com\/projects\//],
                act: "lookup",
                via: "id",
                multimedia: true
            }
        },
        pinterest: {
            page: {
                seek: [/^https?:\/\/(.*?\.|)pinterest\.com\//],
                act: "close",
                msg: "installed"
            }
        },
        polyvore: {
            page: {
                seek: [/^https?:\/\/(.*?\.|)polyvore\.com\//],
                act: "lookup",
                via: "id",
                doNotCrawl: true
            },
            img: {
                seek: [/^https?:\/\/(.*?)\.polyvoreimg\.com\//],
                act: "lookup"
            }
        },
        shutterstock: {
            img: {
                seek: [/^https?:\/\/image.shutterstock\.com\//, /^https?:\/\/thumb(.*?).shutterstock\.com\//],
                act: "lookup"
            }
        },
        slideshare: {
            page: {
                seek: [/^https?:\/\/.*?\.slideshare\.net\//],
                act: "lookup",
                via: "id",
                multimedia: true,
                doNotCrawl: true
            }
        },
        soundcloud: {
            page: {
                seek: [/^https?:\/\/soundcloud\.com\//],
                act: "lookup",
                via: "id",
                multimedia: true,
                doNotCrawl: true
            }
        },
        stumbleuponFrame: {
            page: {
                seek: [/^https?:\/\/(.*?\.|)stumbleupon\.com\/su/],
                act: "bustFrame",
                serviceName: "StumbleUpon",
                frameId: ["tb-stumble-frame", "stumbleFrame"]
            }
        },
        ted: {
            page: {
                seek: [/^https?:\/\/(.*?)\.ted\.com\/talks\//],
                act: "lookup",
                via: "id",
                multimedia: true,
                doNotCrawl: true
            },
            img: {
                seek: [/^https?:\/\/(.*?)\.ted\.com\//],
                act: "lookup"
            },
            iframe: {
                seek: [/^https?:\/\/(.*?)\.ted\.com\//],
                act: "lookup",
                via: "id"
            }
        },
        tumblr: {
            img: {
                seek: [/^https?:\/\/.*?\.media\.tumblr\.com\//],
                patch: function (g) {
                    return g.replace(/_(\d+)\.jpg$/, "_1280.jpg")
                }
            }
        },
        tumblrList: {
            page: {
                seek: [/^https?:\/\/www\.tumblr\.com\/tagged/, /^https?:\/\/www\.tumblr\.com\/dashboard/],
                patch: function (g) {
                    g.f.debug("patching Tumblr search or index");
                    var i, j, a, b, c, d, e, h;
                    i = g.d.getElementsByTagName("LI");
                    j = 0;
                    for (a =
                        i.length; j < a; j += 1) {
                        h = g.f.get(i[j], "data-tumblelog-content-rating");
                        b = i[j].getElementsByTagName("A");
                        e = "";
                        c = 0;
                        for (d = b.length; c < d; c += 1)
                            if (b[c].id && b[c].id.split("permalink_")[1]) {
                                e = b[c].href;
                                break
                            }
                        if (e) {
                            b = i[j].getElementsByTagName("IMG");
                            c = 0;
                            for (d = b.length; c < d; c += 1)
                                if (h === "adult") {
                                    g.f.set(b[c], "data-pin-nopin", true);
                                    g.f.debug("do not pin per Tumblr content rating: " + b[c].src);
                                    g.f.log("nsfw_per_domain", b[c].src, e)
                                } else g.f.set(b[c], "data-pin-url", e)
                        }
                    }
                }
            }
        },
        vimeo: {
            page: {
                seek: [/^https?:\/\/vimeo\.com\//],
                act: "lookup",
                via: "link",
                patch: function (g) {
                    g.f.debug("patching Vimeo page");
                    var i, j, a, b, c, d;
                    i = g.d.getElementsByTagName("LI");
                    j = 0;
                    for (a = i.length; j < a; j += 1) {
                        if (i[j].id && i[j].id.match(/^clip/)) {
                            b = i[j].id.split("clip");
                            if (b[1]) {
                                b[1] = b[1].replace(/_/, "");
                                g.f.thumbMedia("http://vimeo.com/" + b[1], "vimeo", "link")
                            }
                        } else {
                            b = i[j].getElementsByTagName("A");
                            if (b[0])(b = g.f.get(b[0], "data-id")) && g.f.thumbMedia("http://vimeo.com/" + b, "vimeo", "link")
                        }
                        b = i[j].getElementsByTagName("IMG");
                        c = 0;
                        for (d = b.length; c < d; c += 1) g.f.set(b[c],
                            "data-pin-nopin", true)
                    }
                }
            },
            iframe: {
                seek: [/^http?s:\/\/vimeo\.com\/(\d+)/, /^http:\/\/player\.vimeo\.com\/video\/(\d+)/],
                act: "lookup",
                via: "link",
                patch: function (g) {
                    var i = null;
                    g = g.split("#")[0].split("?")[0].split("/").pop();
                    if (g > 1E3) i = "http://vimeo.com/" + g;
                    return i
                },
                att: "src"
            }
        },
        youtube: {
            page: {
                seek: [/^https?:\/\/www\.youtube\.com\/watch/],
                act: "lookup",
                via: "link",
                multimedia: true,
                extended: true
            },
            video: {
                seek: [/^https?:\/\/(.*?\.|)youtube\.com\/videoplayback/],
                act: "lookup",
                via: "link",
                att: "data-youtube-id",
                patch: function (g) {
                    var i = null;
                    if (g) i = "http://www.youtube.com/embed/" + g;
                    return i
                }
            },
            iframe: {
                seek: [/^https?:\/\/(.*?\.|)youtube\.com\/embed\//],
                act: "lookup",
                via: "link"
            },
            embed: {
                seek: [/^http:\/\/s\.ytimg\.com\/yt\//],
                patch: function (g) {
                    var i = null;
                    g = g.split("video_id=");
                    if (g[1]) {
                        i = g[1].split("&")[0];
                        i = "http://www.youtube.com/embed/" + i
                    }
                    return i
                },
                att: "flashvars"
            },
            img: {
                seek: [/^https?:\/\/(.*?\.|)ytimg\.com\/(vi|li)\//, /img.youtube.com\/vi\//],
                act: "lookup"
            }
        }
    }
 2 comments

Edge cases

A few months ago, the parking garage at the San Jose airport ate my credit card. There was noone at the exit so I parked and went hunting for someone who could help me. When I finally found someone, they kindly ejected my card and explained that their machines use a light to detect when you insert your card. Since my card is made of clear plastic, the light shone right through causing the machine to think the slot was still empty.

It’s an obvious oversight, but who do you blame? American Express? The company that made the parking garage payment system? I’m not sure, but I don’t use that card in automated machines anymore.

That experience reminded me of the importance of thinking though edge cases. Most people don’t have clear credit cards, but for those that do, it’s important that they work everywhere. A good software developer can build an application that works 95% of the time. A great one will think of all the unique edge cases (like clear credit cards) and build systems that are smart enough to handle them. At Torbit, we automatically transform websites so they load faster. It’s a tricky process and there are hundreds of edge cases that could trip us up. I often get asked how we compare to various competitors. For us, the big differentator is that last 5%. It’s being smart enough to know what to do with broken CSS or how to handle JavaScript that’s missing a very important semi-colon. It means we do the right thing even when you send us a JPEG with a “text/html” content type.

The last 5% is the hardest part, but oftentimes, it’s the most important.

 14 comments
All Rights Reserved. ©2017 Josh Fraser.