Blog

Image Saving In Watir

So I got the chance to use Watir again on a short project at work. The last time I used it was about 1.5 years ago, and I was glad to find out that Watir is still a nice library to use. Watir simply works without much hassle.

The only issue I had was with image saving. From Image class documentation (Watir 1.6), it wasn’t obvious that save can only be called when image element is directly contained within a browser element.

I was trying to save the first image within a div,

$browser.div(:id, 'foobar').images[1].save('d:\\temp')

which resulted in this error
NoMethodError: undefined method `goto' for #<Watir::Div:0x3fa5d7c>
d:/dev/ruby/lib/ruby/gems/1.8/gems/watir-1.6.2/lib/watir/image.rb:113:in `save'


Looking at the implementation of save in image.rb,

def save(path)
  require 'watir/windowhelper'
  WindowHelper.check_autoit_installed
  @container.goto(src)
  begin
    thrd = fill_save_image_dialog(path)
    @container.document.execCommand("SaveAs")
    thrd.join(5)
  ensure
    @container.back
   end
end

it shows that save relies on the existence of goto and back methods within the container of the element, meaning that calling save method will tell the browser to go to the image src value, save it, and then click the back button. Hence image must be contained directly within a browser element.

I ended up having to use XPath because the image element doesn’t have any id or class that allows me to directly reference it from a browser element.

$browser.image(:xpath, "//div[@id='foobar']/img").save("d:\\temp")

I don’t have much experience with Ruby so I don’t know if it’s common with Ruby libraries to assume variable type, but I thought it would be nicer if @container can be replaced by something like find_root_container or something that traverses the ancestor container elements and eventually finds a browser element.

Another nice improvement to the save method implementation would be instead of going to the image src and then clicking back, which could potentially lose the state of a page, it would be nicer to open a new window and close it afterward.

Three Years Running A Mini Content Sharing Web Site - Part 2

One interesting ‘challenge’ that I haven’t had much success on since day one is on promoting Wish to the masses. By nature, Wish is a web site with a very low returning visitors rate. Most visitors would only stop by the site once, browse around, probably submit a wish, and completely forget the site. There is no reason to revisit the site unless if you’re interested to know what other people are wishing for, or if you need to wish for something, really really really hard (to which I sincerely wish it would come true).

I didn’t think too much on what was going to work and what wasn’t. Mainly because Wish had always been just a hobby site, plus it’s never going to make money [tm]. So I took it as an opportunity to experiment with various things.

The Goodies

My first brilliant idea (NOT!) was… t-shirts. Everybody loves them t-shirts.

I ended up getting cheapo low quality t-shirts at a bargain price, I ordered two dozens of them during my trip to Jakarta back in 2006. And as I’ll explain below, doing it on a very low budget was a bad decision.

The t-shirts came in 2 flavours. The first one had ‘I wish for world peace.’ on the front and Wish URL on the back, that’s the plain flavour. The second one was more playful with ‘I wish for world peace and all I get is this lousy t-shirt’ on the back and the URL on the front.

Having the URL printed on the shirt turned out to be a blunder because I changed my domain name last year (the old one was too hard to remember), and Wish URL was changed along with it as a subdomain. The message about world peace wasn’t a great idea either, obviously it was too cliche. I should’ve gone with something catchy and funny instead.

It’s not obvious from the picture, but the printings on the t-shirt were quite messy. It didn’t give you the slightest confidence that it wasn’t going to ruin your other clothes if you wash them along with a Wish t-shirt.

And the biggest problem of all was… those t-shirts didn’t look nice. Some friends in Singapore told me that they only wore the t-shirts at home or nearby places, in short, it’s not something anyone would wear on an outing.

Friend: ‘Hey Cliff, I wore the t-shirt outside the house just now!’
Me: ‘Where to?’
Friend: ‘Tiong Bahru Market‘ (warning: pig’s head on Flickr)
Me: … - . -
Get the idea?

I gave out the t-shirts to a number friends and some Wish site fans from various countries. I still have 3 t-shirts left, if anyone is interested, let me know and I’ll be happy to send one over.

Lesson learned: when it comes to promoting your site, you can be cheap, but not too cheap.

The Pixel Ad

Just like any other web sites, identifying the target audience of Wish was something that I tried to figure out early on. In terms of the site visitor in general, I was sure that there’s no specific age group, young and old, everybody would eventually wish one thing or another, it’s only a matter of surfing the Internet and finding the site.

So what’s more important was getting incoming links from various sites. IIRC, 2005 and 2006 were the years when blogging really took off (i.e. my Internet-ignorant friends suddenly had blogs), and I knew I had to take advantage of its popularity. I was thinking about who would be interested to click on a link to visit Wish site, who would be interested to put a link to Wish on his/her blog.

After considering the possibilities, I decided on purchasing a pixel ad on Xiaxue’s blog. For those who don’t know much about South East Asia’s blogosphere, Xiaxue can be considered as the blogging queen of Singapore, and her site boasts about 10,000 unique visitors per day. Her blog readers are mostly teenagers and those in their 20s, who (1) would have owned a blog at that time, and (2) might be interested in linking to Wish. My only worry was about whether anyone would ever click those little pixels. There was a hint of skepticism when I purchased the most expensive 300 pixels square ever in my life and slap the word ‘wish’ on it, as simple as that.

The pixel ad worked quite well. For 9 months, the vast majority of the site visitors were from Singapore (by ‘vast’ in Wish context, I meant out of 100 visits per day), and there were plenty who linked to Wish from their blogs. There were many wishes about exams and studies, depicting the pressure in Singapore education system.

I was pretty happy with this outcome, not only the little pixels generated visits and incoming links, they also led to content. For a while, I toyed with the idea of purchasing ads on other popular blogs, one from each country, pick 20 countries with the most Internet-literate population. But I didn’t pursue this option, and stopped placing the pixel ad on Xiaxue’s blog after it expired.

Lesson learned: ad really works, as long as it’s targeted correctly.
I stopped becoming an ad-skeptic.

To be continued…

Three Years Running A Mini Content Sharing Web Site - Part 1

To celebrate 3 years of Wish‘ existence on teh web, I’ve been meaning to write up some behind-the-scene stories about Wish and some lessons learned so far from running a mini content sharing web site.

The Beginning

Wish was started back in 2005. The idea was simple, I’ve always believed that having a wish is an important part of life, so why not share it? I thought it would be interesting to know what other people are wishing for.

The very first question that was asked to me was “Why would anyone bother sharing his/her wish on the internet?” And from time to time I got the question “Why did you do it? The site is never going to make any money and it will never be popular. ”

The Feedback

But I did it after all. And after 3 years, there are now 9,358 approved wishes on the site (out of 10,610 submissions, yes, evil spammers do attack Wish), not popular, but not too shabby either considering that I didn’t think the site would even get 1,000 submissions ever.

The statistics are nice, but what’s more important to me is the feedback I’m getting from strangers via email. I’ve received emails ranging from “Hey, I like your site,” to “I have a lot of problems in my life at the moment, I stumbled on your web site and it made me realize that wishing keeps me going with life. It gives me hope. Thanks.”

The Launch

Soon after finishing the site and making it available on the web, I emailed the editor of a web site called Lifehacker as my first attempt to spread the word. Back then, Lifehacker wasn’t even a year old and the idea of sharing content wasn’t as popular as it is now, so lo and behold, they put up a post titled Clear your head: Make an anonymous wish. I was lucky to start Wish years ago because Lifehacker would never post anything as simple as Wish web site nowadays with all the uber-cool web2.0 sites around.

So Lifehacker post was the good news. Now, the bad news was that I set up the site in the most cheap arsed way. I thought that since it’s never going to make any money, then I should spend the least amount of money, after all it’s just a simple web site that would never attract people’s attention.

I hosted the site on an old spare box I bought in 1998, running Pentium II 350MHz with 256 Mb RAM. Yea, I know, WTFFF??? And not only that, I hooked it up to my home Internet connection with 512 Kbps downstream, 64 Kbps upstream, shared with 3 flat mates.

I didn’t bother monitoring the ’server’ and went out for several hours instead after that Lifehacker post was up. This was another big mistake because when I checked the log later on, there were thousands of error 500 responses, the site only managed to get about 300 wish submissions before literally crapping out.

Losing eye balls, content, and potential incoming links weren’t fun. I tweaked some server and app configs the next day, but the storm already passed and there’s no second chance. Lesson learned: no matter how small a site is, a launch is a launch.

To be continued…

Testing Reflection Plugin

I spent several train rides this week putting together Reflection Plugin for WordPress. This plugin applies reflection effect to images on a blog. The reflection effect is done on the client side using the excellent Raphael JavaScript library. You can use normal image on your posts as usual, and you’ll get the reflection effect by simply adding ‘reflection’ to the class value.

Here are some examples of the effect…

Wide movie poster:

Album covers, aligned, with wrapping text:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut pede ut mauris varius ultricies. In a dolor non risus dapibus faucibus. Etiam tristique pellentesque ligula. Cras tempus nunc vel turpis. Vivamus congue. Nullam hendrerit tincidunt metus. Pellentesque bibendum dapibus felis. Suspendisse risus magna, placerat id, malesuada eget, pellentesque quis, felis. Sed dolor lectus, vehicula rutrum, venenatis et, fringilla vel, tellus. Curabitur mi. Donec ligula pede, vulputate vitae, bibendum ac, pharetra in, elit. Pellentesque et mauris ut pede mattis commodo. Mauris massa odio, egestas eget, luctus id, suscipit sit amet, velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ac sem. Cras nec dolor a ipsum consectetur lobortis. In blandit erat. Fusce mollis ultrices ipsum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ut pede ut mauris varius ultricies. In a dolor non risus dapibus faucibus. Etiam tristique pellentesque ligula. Cras tempus nunc vel turpis. Vivamus congue. Nullam hendrerit tincidunt metus. Pellentesque bibendum dapibus felis. Suspendisse risus magna, placerat id, malesuada eget, pellentesque quis, felis. Sed dolor lectus, vehicula rutrum, venenatis et, fringilla vel, tellus. Curabitur mi. Donec ligula pede, vulputate vitae, bibendum ac, pharetra in, elit. Pellentesque et mauris ut pede mattis commodo. Mauris massa odio, egestas eget, luctus id, suscipit sit amet, velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse ac sem. Cras nec dolor a ipsum consectetur lobortis. In blandit erat. Fusce mollis ultrices ipsum.

Obligatory browser screenshot:

For more information, please have a look at Reflection Plugin web page.

Update (07/12/2008): I’m starting to think that this plugin can actually be an image effect plugin. Not only reflection, something like rounded corner effect can easily be done with Raphael, along with many other effects. The underlying work is basically to apply client side image effect by using class attribute values as meta data (hmm, shouldn’t future version of CSS support this?). Oh well, let’s see how Reflection Plugin goes.

BuildMonitor v0.9.1 - Oui!

BuildMonitor v0.9.1 was released yesterday. This is the first version with French l10n bundled, thanks to Eric Lefevre who submitted the translations.

I added a new ‘Build’ menu to trigger the build of a particular job. This menu item only comes up on a job feed.

Another little improvement is a new option on the preference window to hide the feed name on Firefox status bar. This is useful when you need to monitor many feeds.

… starting to look like a weather forecast.