Cautionary Tales of Science

I just heard one of my all-time favorite authors, Michael Crichton, just died after a bout with cancer.

I loved Crichton's books ever since I read The Andromeda Strain as a child. Despite it being written before i was born, it still read as current and futuristic at the same time.

Chriton's books always managed to get the right mix of suspense, science and opinions thrilling the reader thrilled, while educating him at the same time. When you finish a Crichton novel, you always feel like you've learned something new about the world.

Mixing cautionary tales of science running amok (Jurassic Park and Next), with his own political and personal agenda (A State of Fear - a book that reads from beginning to end like an anti global-warming manifesto, to the point the story devolves into long, tedious speeches), Crichton always managed to grab my interest. I found myself reading his books with a pad (and later a laptop), jotting down names and facts for further reading.

Despite my disappointment with A State of Fear, the epilogue of the book stands on its own, and should be read by every scientist out there. Using some samples from history, Crichton demonstartes what happens to the scientific community, and indeed, the entire human race, when everyone decide to blindly follow a single voice in science, to the exclusion of all other voices.

I'll miss Crichton's unique writing style. Here's my Michael Crichton must-read list:

1. The Andromeda Strain - his first, and one of his best, dealing with a possible alien pandemic
2. Jurassic Park - watch Spielberg for the effects, read Crichton for the science
3. Sphere - what IS real?
4. Congo - just a great adventure book
5. Next - read my review
6. Airframe: a Novel - what lengths would a corporation go to, to hide its culpability in an accident?

How to Add a Web Slice your Blog

One of the cool new features in IE8 is called Web Slices. It allows users to subscribe to a part (slice) of a web page, and get notified when it changes.

Think about the following scenario: suppose your only reason browse to CNN's homepage to get the Dow index. Rather than point you browser at the address, load te entire page every time (including countless images, flash files etc.) and hit F5 every couple of seconds, you mark the area of the page that interests you, the browser adds a live link to it in the links bar, it prompts you when the contents of the slice change and actually shows you the content.

So, on the last day of PDC I took a hands-on lab on Web Slices and found out they're extremely easy to implement - just 3 HTML tags needed. I planned to add one experimental slice to the Twitter area of my blog (lower left side on the home page).

The way a Web Slice manifests itself in IE8 is by showing a green frame and icon when you hover over the area where the slice is:


Clicking the green icon, adds a live bookmark to your toolbar, that shows the slice's content when pressed:
Another nice feature is a drop-down menu that shows you all subscribable content on a page, including slices and RSS feeds - so you don't have to hunt them down by hovering over the page:
So, here's what I thought I needed to do: go to the Twitter Page element, add 3 HTML tags and publish. Here's the HTML code of the Twitter element:

<div id="twitter_div">
<ul id="twitter_update_list"></ul>
<a id="twitter-link" style="display:block;text-align:right;"
href="http://twitter.com/TravelTechGuy">follow me on Twitter</a>
<script src="http://twitter.com/javascripts/blogger.js"
type="text/javascript"></script>
<script src="http://twitter.com/statuses/user_timeline
/TravelTechGuy.json?callback=twitterCallback2&count=5"
type="text/javascript"></script>
</div>

To make this into a Web Slice, you need to do the following:

1. Surround this section with a <div> with a class="hslice"
2. Add another element (a span or an h1 or h2) with class="entry-title" - to give the slice its name
3. Surround the rest of the content with a <div> (or a <span>) with class="entry-content"
   

And that's all. Wrong!

Problem 1
As you can clearly see, this HTML invokes a JSON call, using JScript to the Twitter site to get content for the list. That means that if you subscribe to the slice as is, you'll get an empty page. For security reasons, a slice will not execute the code for you, to prevent a security attack known as XSS (Cross Site Scripting).

It took me awhile to realize that I have to serve the slice with the content already in it - so I actually had to serve the user another HTML page. Luckily, Microsoft prepared for such an eventuality, and you can define your content provider to be another HTML page, by including an invisible a element, with a rel="entry-content":

<a style="display:none;" href="http://www.travelingtechguy.com/forblog/twitter.html"
rel="entry-content"></a>

The user will never see the tag - it's there for IE's sake.

Problem 2
Since the page was disconnected, none of my pages design carried over, and the element looked like a simple bullet list. I had to dig through my Blogger template and copy some CSS over to that page (Blogger doesn't make it easy to copy its CSS, since it's full of macros and variables, that serve the GUI template editor). I finally was able to de-reference all variables and get a similar design.

Problem 3
The Web Slice is displayed in a square by IE8 - and you cannot control its dimensions. Think of trying to show your page in an iframe of a certain size that you don't control. This resulted in a cut list - you could only see 2 items instead of 5, and they were cut at the edges.

I solved that by adding a scrollable div around the list (as you can see in the image above).

You can see the source of the page on my site.

So, it took longer than the 3 minutes I thought it would take - but now I know how to turn the rest of my elements to Web Slices. I know Microsoft has a list of sites that have already started implementing Web Slices and I hope more will take it up.

For the FireFox purists, rumors are that FF 3.1 will start support for Web Slices as well. In the meantime, enjoy my Twitter Slice and expect more in the future.

PS: showing HTML code in a post is such a hassle. You have to code the whole thing by hand (i.e. change every < to &lt;). Next time I'll just copy-paste an image of the code from my editor .