Recently blinkbox pushed a new release of the site onto the live environment which adds a number of quite cool features that we have been working on over the last few months. As the UI lead engineer I’m quite excited by these so I thought I would share.

Perhaps my favourite change is that now any of the free movies or TV icons have a ‘Free’ overlay applied to them automatically. This is great at calling out how much free content we have, which is actually quite a lot now (loving the snowboarding titles we have)! We also are using the same system for showing off trailers, in case you notice the similarity. Additionally for trailer titles we also show the date they are to be released in the cinemas, or if they are currently showing, underneath the player (for example Avatar).

Free titles shown with a blue overlay

For those wanting more than free content we have a number of improvements for purchasing our premium content. Firstly the browse catalogue now supports price filters, which is quite handy for finding cheap flicks. Secondly we now have box sets and bundles – so you can buy a whole TV season or a movie bundle (Godfather Trilogy perhaps?). And lastly we are now securely storing credit card details for repeat purchases, much like Amazon. Using this I think you can go from browsing to watching in under a minute if the title is available for streaming – which is much quicker than trekking to the local rental store.

We have also updated the Games area and added a new video jigsaw. This is good fun on the easy a medium skills, although the hard setting can take a little while – you’ve been warned. All the current competitions are now listed on a dedicated competition page for all the competition junkies.

Last but by no means least is the member referral system – pass on your invite code after a purchase and you’ll get £1, while your mates will get £5 credit each! That is more than enough for even the latest rentals. I think this is a great deal for everyone so get it while it’s hot.

blinkbox, games, rental Hide

Recently I have been investigating the web capabilities of the Playstation 3 NetFront browser, and for the most part it works as expected. There are a few caveats however, and in my case this was enough to prevent the Prototype JavaScript library from loading. So far I have discovered the following issues:

• Ajax works, however it will only do a GET request – POST returns immediately with no data supplied.
• General browser model most closely follows Internet Explorer, however the accessors for the CSS opacity is like other browsers (Mozilla).
• Currently can’t read the opacity, gives a value of 1.0 always.
• Can’t fire custom events as the method for creating an event does not work (document.createEventObject).
• Since there are no custom events some functions do not work, such as Prototype’s document.observe('dom:loaded').

The event firing issue is a bit of a nasty one if you rely on custom event for updating page elements. To work around Prototype’s dom:loaded issue I have added a new method: Event.domLoaded(), that takes a function and stores it in an array. Once the DOM is ready the array is iterated through and each function is called. I have also enhanced the method to call the function parameter if the DOM has already been marked as ready, thereby preventing race conditions caused by a delayed function call. In other words it makes it safe to register a function to be called as soon as possible, regardless of the present state of the page.

I have uploaded an updated version of Prototype with the fixes applied – download here. Let me know if there are any issues.

Javascript, Playstation 3 Hide

While updating the visual design of blinkbox.com a few months back we noticed something wasn’t right in IE7 – the performance was terrible. IE 7 has been around a lot longer than many of the other browsers we currently support in our level 1 tier, and is starting to show its signs of age.

The problem manifested itself mainly as a one second or more delay when hovering over images. Typically this would be a trivial operation for a browser, as it was simply applying the :hover classes for the element.

A bug was raised and I started the investigation by checking the usual culprits, such as incorrect binding of javascript events, HTML issues, CSS selectors that had run wild, and so on. A search on Google yielded no usable results that helped, either. Since none of these had improved the performance of the page, I started to get a bit more aggressive with my bug hunting.

I removed all the images from the page and this worked, although that wasn’t a solution that we could use. After carefully working through it, it turned out to be an issue with only the background images that we were using.

Now there was nothing really special about the background images, just simple PNGs, 1 pixel wide with repeat-x on them, which are then used to form a gradient. Standard stuff for a web page.

Notice the hover state on the Fast and Furious icon - that was where it was most noticable.

Technically, all of our gradients are bundled together into one image and then positioned using CSS, so I checked to see if that was the cause of the problem. One of the options of our image bundling system is the ability to have the images split up and served as separate files. After giving that a go it was apparent that it had no effect.

My next thought was that perhaps the number of repeating images were to blame. I made a quick check by disabling the repeat-x, and the site started running like normal. Realising that this was the issue I used the gradient generator to output wider images (20px), and voilà, the performance issues were sorted for good. So, if you are going to use a lot of gradients, and would like to keep your site running smoothly, then make sure they are more than 1px wide, as IE7 just can’t handle it.

*Of note blinkbox.com uses over 4ooo pixels of vertical gradients site wide, so this might be an extreme case

CSS, IE7, Performance Hide