West Wind Hero Image

Rick Strahl's Weblog

Wind, waves, code and everything in between...
.NET • C# • Markdown • WPF • All things Web
Contact   •   Articles   •   Products   •   Support   •  
Sponsored by:
West Wind WebSurge - Rest Client and Http Load Testing for Windows
advertise here

A cool use of Browser Client XML access on NetFlix

May 19, 2005 • 15 comments
On this page:

I use NetFlix to get movies. NetFlix has made quite the transformation from a marginal service to a highly usable Web site.

 

The latest feature that I really like is the ability to look at lists of movies and while you’re hovering over a title get more information about the movie without clicking into the detail. Here’s what it looks like in the browser:

 

 

This is not terribly novel – the code behind this uses XmlHttp to retrieve some XML and display the pull out data – but it’s an excellent use of the technology. It really makes movie browsing much more efficient and quicker.

 

Here’s what the XML they pull what they pull over the wire (retrieved with Fiddler):

 

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>

 

<MOVIES>

 

<MOVIE ID="60022626" POS="0" DS="0">

                <TITLE>Robert Thurman on Buddhism</TITLE>

                <SYNOPSIS>Robert Thurman is professor of Indo-Tibetan studies in the Department of Religion at Columbia University and one of the West's foremost scholars of Tibetan Buddhism. He is the translator of The Tibetan Book of the Dead and the author of Inner Revolution and Circling The Sacred Mountain.</SYNOPSIS>

                <DETAILS RATED="NR" RELYEAR="2002" GENREID="379" GENRENAME="Special Interest" CMURATE="0.0" CMPRED="3.0" CMWGTR="3.0" />

                <GLYPH REC="false" FRND="false"/>

                <STARRING>

                                <PERSON ID="20031195" NAME="Robert Thurman"/>

                </STARRING>

</MOVIE>

 

</MOVIES>

 

That part is pretty logical and easily hooked up.

 

What I’d like to know is how they are doing the cool popup effect with the shadows. I haven’t looked closely at the HTML to see how this overlay affect is accomplished. Notice that the shadow is transparent and it works both in IE and FireFox and it's smart enough to keep the display visible in various parts of the page without getting cut off.

 

Part of the appeal of the above mechanism is that it’s really pleasing to the eye (at least to me). It just feels right and is intuitive. And it's considerably faster than clicking on the link to get the movie detail the go back to the list etc. It's all about browsing and keeping your current context, something at which Web applications (including the NetFlix site's plain HTML interface) are bad at. For example, if you browse for movies and select or even view one you immediately loose the list you were just on. Making a selection drives you back to the base selection or a new list of choices based on teh current one.  For browsing staying in the current context surely is the better way to go and this is why this appeals to me so much - it's rare that you get that.

 

Somebody clearly understands user interfaces at NetFlix. If you’ve watched that site go from a so-so usable site to what it is now you can probably appreciate a number of the cool features they’ve implemented to manage your movie queues.


The Voices of Reason

Eric Echols
May 19, 2005

# re: A cool use of Browser Client XML access on NetFlix

It appears that they are using the following:

<img style="width:55px; height:101px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale src='http://cdn.nflximg.com/us/pages/bob/up-left-combo.png'); " id=bobarrowulimg src="http://cdn.nflximg.com/us/pages/bob/up-left-combo.png">


Using a DirectX Control to handle the display. I would be interested in knowing if the site works for Mac Users.
May 19, 2005

# re: A cool use of Browser Client XML access on NetFlix

Works on FireFox under Mac OS X (10.3.9) but not on Safari. Haven't upgraded to Tiger yet, but I'll try it in a week or so.

- Mike K
May 19, 2005

# re: A cool use of Browser Client XML access on NetFlix

It also works with Camino, but as Mike K noted, not with Safari.
May 20, 2005

# re: A cool use of Browser Client XML access on NetFlix

If you like that, check out Google Suggest:

http://www.google.com/webhp?complete=1&hl=en

Google Maps also uses XMLHTTP very effectively.

In the web design comunity, this has been dubbed AJAX. This article is a good read:

http://www.adaptivepath.com/publications/essays/archives/000385.php
May 20, 2005

# re: A cool use of Browser Client XML access on NetFlix

Also, if you like Google Suggest, it's been dissected:

http://serversideguy.blogspot.com/2004/12/google-suggest-dissected.html
No Ajax!
May 20, 2005

# re: A cool use of Browser Client XML access on NetFlix

please don't call it Ajax. Its the lamest name ever! I beg of someone to come up with a better name! ;)
ned
May 20, 2005

# re: A cool use of Browser Client XML access on Netflix

re: "please don't call it ajax": http://a.wholelottanothing.org/2005/04/note_to_geeks_l.html

Also, Netflix is a word with one capital letter.
No Ajax!
May 20, 2005

# re: A cool use of Browser Client XML access on NetFlix

Ned,

Hence the name of a better name. I don't intend to show up at some client's office with my rubber gloves on and a scrubby sponge. I just can't talk about it in professional conversations with a straight face. Give it an acryonym that isn't tied to a brand name of something everyone has under their sink. SOAP is at least generic. I'd even settle for calling it BLEACH. Just not Ajax (note that its not even written as a real acronym).

If someone listed Ajax on their resume right now, I would be inclined to think that they know buzzwords, but that's about it.
No Ajax!
May 20, 2005

# re: A cool use of Browser Client XML access on NetFlix

Obivously I didn't proofread my previous post. "Hence the name of a better name" makes absolutely no sense to me. :)

It should read "Hence the need for a better name." (based on that blog entry).
h
May 20, 2005

# re: A cool use of Browser Client XML access on NetFlix

another cool addition is when you add a movie to the queue, theres a side panel where you can click and drag the movie to somewhere in the top ten. really intuitive. i like to see them do that with the master queue as well.
bee
May 20, 2005

# re: A cool use of Browser Client XML access on NetFlix

re: "please don't call it ajax": So you'd prefer a TLA? :)
If you're more into ancient Greek history (i.e. Homer's Ilias) I can understand your disapprovement considering Ajax the Great's end. :)
May 23, 2005

# re: A cool use of Browser Client XML access on NetFlix

Can someone give details as to how they created the popup?
May 23, 2005

# re: A cool use of Browser Client XML access on NetFlix

It looks like it's just an absolute positioned HTML element with (in IE) a filter applied for the transparency. The HTML is then dynamically created inside of the element's innerHtml.

May 24, 2005

# re: A cool use of Browser Client XML access on NetFlix

You have to use the filter for IE to process PNG transparency properly; FireFox can handle it natively without a problem (and will ignore that style declaration for filter:progid:DXImageTransform.Microsoft.AlphaImageLoader)

There is a great website about the whole IE/PNG issue, as well as a simple JS include you can use on your pages to automatically fix up PNG images to work on most browsers.

http://homepage.ntlworld.com/bobosola/index.htm
Erwin
March 09, 2010

# re: A cool use of Browser Client XML access on NetFlix

hi,
I'm really interested in making this popup. somebody, can help me please.

This is my next task.

Thank you