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 – performance. No surprises really, IE 7 has been around a lot longer than many of the other browsers we currently support as our level 1 tier group.

The problem manifested itself mainly as a one second or more delay when hovering over images. Generally 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 checking the usual things such as incorrect binding of javascript events, possible html issues, CSS selectors run wild and so on. A search on Google yielded no usable results that helped either. Since nothing was improving the performance of the page so I started to get a bit more aggressive.

I removed all the images from the page and this worked, although that wasn’t really a solution. After carefully working through it turned out to be the backgrounds that we were using.

Now there was nothing really special about the backgrounds, just simple PNG images 1 pixel wide with repeat-x on them used to form a gradient. Standard stuff.

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

Technically they are all bundled together in one image and then positioned using CSS, but perhaps I’ll talk more about that system later. One of the options of the image bundling system that I developed was the ability to have the images split up and served independently – but that had no effect so I was able rule that out.

After realising that this was the issue I used the gradient generator to output wider images of around 20px, and voilà, performance issues sorted. So basically 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