futtta's blog

A month ago I added BrowserMob to my toolbox. I’m sure I’m the last web-guy in the world to discover BrowserMob (or “Neustar Web Performance”, as of yesterday), but just in case you don’t know them either, it is an online service that provides availability- and performance-monitoring for websites and -applications.

Great stuff, really; create a simple script by providing a URL, choose what datacenters you want the test to run from, set the interval and there you go. After a couple of minutes you can start gazing at charts & reports or check your mailbox for alerts. You can create more complex tests using a JavaScript-based syntax or you can import Selenium-scripts (hello Selenium IDE for FireFox). The free account I started out with offers a substantial amount of pageviews/ month (40.000) that tests can generate.

AddToAny, one of the most popular sharing-widgets around, has had 3rd party tracking by Media6degrees for quite some time already. I wasn’t too happy about that, but it did have the no_3p option to disable this “functionality”. Half a year ago however AddToAny was acquired by Lockerz.com and it now includes tracking by Lockerz.com which cannot be turned off and does not check for navigator.doNotTrack either.

I’ve contacted the developer (Pat’s a swell guy, really) and he answered he would look into honoring the DoNotTrack header, which he wrote he’d love to include in Q1 somewhere. In the mean time, if you have AddToAny on your site, you can already hide the Lockerz “Earn” tab. And if you’re on WordPress, you could install (or upgrade) WP DoNotTrack, which I’ve updated to stop the Lockerz tracking (make sure lockerz.com is your blacklist).

If there’s a Drupalista out there that uses AddToAny and would like to stop Lockerz tracking; I’d be happy to co-author a Drupal DoNotTrack module, do get in touch!

I had to look into CDN’s some time ago, to find a suitable temporary solution for a problem at work. There are a lot of players in this field, Akamai and Amazon (Cloudfront) being market leaders of some sort, but there’s also Microsoft with their Azure CDN (which we already had some experience with), other big guns such as Rackspace and Level3 and specialized shops such as CacheFly, CDNetworks and NetDNA as well. So how to choose?

Well, if you’re in a hurry, you could compare price and features via cdnplanet.com. The info might not always be complete, but it does give you a good first idea and you can always visit the CDN’s proper site for more details, can’t you?

After comparing features & pricing, you really should get an idea of the speed of these CDN’s, of their performance relative to your customers. I found this CDN Speed Test on cloudclimate.com very useful; it performs a live test of approximately 20 CDN providers, requesting a 64 kilobyte file 10 times for each CDN from within your browser. So if you can get a sample of your customers to perform that test and provide you with the results, you’ll have some very useful information about performance. Together with your overview of features and price, you should be able to make at least a vaguely educated decision, no?

To have an idea about performance for our market (Belgium), I asked some Facebook-friends to provide me with the results of the CDN Speed Test. Most data I received was for Telenet or Skynet/Belgacom, not coincidentally the biggest ISP’s here. You can see the aggregated results in that ugly table on the left (or a couple of paragraphs up, if you’re subscribed to the RSS-feed).

My conclusion: as I was looking for a pay-as-you-go (no obligations, no monthly fee) CDN for static files, with support for Origin-Pull, HTTPS and some administration features (for example to purge the cache and watch nice graphs), MaxCDN fit the picture pretty well. With a great introductory price ($40 for the first Terabyte and even less if you find the coupon code) and performance that is at 113% of the fastest competitor, they seem to have found somewhat of a sweet spot for my specific context.

The only problem; I’ve got to wait for a “GO” from some people higher up the food chain. Maybe I should already implement it on my blog, just for the fun of it?

After almost a year of tinkering with my Donottrack-plugin for WordPress, I’ve requested it to be hosted in the WordPress repositories and uploaded version 0.1.0. So if you’re using Donottrack on your blog, or if you activated this “bonus feature” of WP YouTube Lyte, I propose you give WP DoNotTrack a try and let me know what gives here in the comments or via the contact form?

From the readme:

WP DoNotTrack stops plugins and themes from adding 3rd party tracking code to your blog to protect your visitor’s privacy. WP DoNotTrack uses (a slightly modified) version of jQuery AOP to catch and inspect elements that are about to be added to the DOM and renders these harmless if the black- or whitelist says so.

The current version is blacklist-based and stops tracking by media6degrees and quantserve. This can easily be changed in the javascript though. Future versions will include a WordPress admin-page to change these settings.

At work we were stumped by a simple link that upon clicking didn’t have the browser request the target page. Our supplier investigated using VisualEvent, a bookmarklet-initiated javasript-tool that goes through a page and visualizes all events on DOM nodes. The developer released VisualEvent 2 a couple of days ago (also on GitHub), which I played around with for a bit and it really is great for debugging purposes!

The culprit for the “broken” link by the way was a bug in an old version of SmoothScroll, a jQuery-plugin by fellow Belgian Mathias Bynens which ensures smooth scrolling when clicking on a in-page link. The plugin did check if the link was to an anchor on the same page, but it had already prevented the default action before that check was made, resulting in the broken link. The current version of the plugin does the check before the default action is prevented, so all is well, your weekend can start. Enjoy!

It was always my intention to elaborate on my small donottrack plugin for WordPress, but it was only when Automattic upgraded to the new asynchronous Quantcast code that I was forced to look actually dig in.

The new Quantcast-code doesn’t use the old-fashioned document.write, but inserts the javascript asynchronously with an insertBefore on the parent of the first script-node (as popularized by the asynchronous Google Analytics-code). Variations on this method would include e.g. using appendChild or adding it to head (although that might not exist).

A couple of months ago I experimented with the DomNodeInserted event, but that isn’t supported by all browsers. And even when it works, I found no consistent way to stop the tracking script (which was already added to the DOM, as the event is triggered after) from being loaded or executed. But last week while searching for a better solution I found a reference to javascript AOP on StackOverflow and after following some links I discovered the JQuery AOP-plugin.

JQuery AOP allows one to (amongst other things) add an advice around a method. When the method is called, the advice kicks in before the execution. The advice is a function which can investigate and change the parameters used by the method. And that’s exactly what the current version of DoNotTrack does; it has AOP.around (I’ve removed the JQuery dependency) catch insertBefore and appendChild, investigates the src-attribute and replaces that value if it points to quantserve.com before allowing the method execution to proceed.

scriptParent=document.getElementsByTagName('script')[0].parentNode;

aop.around( {target: scriptParent, method: /[insertBefore|appendChild]/},
        function(invocation) {
                if ((typeof(invocation.arguments[0].src)==='string')&&((invocation.arguments[0].tagName.toLowerCase()==='script')||(invocation.arguments[0].tagName.toLowerCase()==='img'))) {
                        if (sanitizer(invocation.arguments[0].src)===true){
                             invocation.arguments[0].src='javascript:return false;';
                        }
                }
                return invocation.proceed();
        }
);

I’m working on a more generic version of an AOP-based WordPress Privacy plugin now. In a first stage it will probably be based on a blacklist, that is editable in the WP Privacy options-screen but at a later date a whitelist-based approach will be added (based on an integration with webpagetest.org). Let’s add that to my New Years resolution for 2012, shall we?

I uploaded a new version of WP YouTube Lyte to the WordPress SVN repository earlier today. The markdown parser seems to be in a bad mood today and the changes in the readme.txt (the changelog, first and foremost) aren’t visible, so here’s what’s new in this release:

• you can now change player size from the default one (as proposed by Edward Owen); httpv://www.youtube.com/watch?v=_SQkWbRublY#stepSize=-2 or httpv://youtu.be/_SQkWbRublY#stepSize=+1 will change player size to one of the other available sizes in your choosen format (4:3 or 16:9)
• added a smaller 16:9 size and re-arranged player sizes on the options-screen
• Bugfix: changed lyte-div ID to force it to be xhtml-compliant (ID’s can’t start with a digit, hat tip: Ruben of ytuquelees.net
• Bugfix: added version in js-call to avoid caching issues (lyte-min.js?ver=0.8.1) as experienced by some users and reported by Ryan of givemeshred.com
• Upgrade to the “bonus feature” to fix things (consider this beta though)
• Languages: added Hebrew (by Sagive SEO) and Catalan (by Ruben of ytuquelees.net) translations and added completed Spanish version (thanks to Paulino Brener from Social Media Travelers)
• tested succesfully on WordPress 3.3 (beta 2)

The (slightly smaller) lyte-embedded YouTube video to go with this release: “She wants” by Metronomy (very Japan-esque by the way):

As always, your feedback is welcome in the comments or via the contact form!