Some time ago I wrote an article about CSS PNG Fix for IE by Rogie King, from Komodo Media, which is a great fix. But whether you realized it or not, there are some issues with the script if you monitor it closely, and some observant people have also notified me about it.

The problem is it will make repeated background ‘none’ call to your server, which probably shown as page not found or server error message in your access log, though the transparency fix stilll works. And here are some possible scenarios that may trigger that problem:

• <img> tag linking to other image types other than PNG, e.g. JPEG or GIF images. This can be quite problematic if you use css selector to automatically fix all * html img tags found, you may get a lot of redundant background ‘none’ calls to your server if there are many tags which link to GIF or JPEG images.
• If you accidentally put 'png' class name from some your elements without stylesheet background image.

So I took closer look at the code, re-formatted so I knew what was going on. There two types of fixes, one for <img> tag, while the other for background images. And it seems background image fix are still called for some of the scenarios above, and calling this.runtimeStyle.backgroundImage="none" was triggering the “none” request to the server. And two fixes that I did:

• If it is <img> tag and it does not link to a PNG image file, do not perform background image fix, instead just ignore it.
• If it is a background image fix, and the background image is not a PNG file, ignore it as well.

Here are the updated codes:

* html img,
* html .png {
  azimuth: expression(
    this.pngSet?
      this.pngSet=true : 
        (this.nodeName == "IMG" ? 
          (this.src.toLowerCase().indexOf('.png')>-1 ? 
            (this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
                this.src = "/images/blank.gif") :
            '') :          
          (this.currentStyle.backgroundImage.toLowerCase().indexOf('.png')>-1) ?
            (this.origBg = (this.origBg) ? 
              this.origBg :             
              this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
              this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
              this.runtimeStyle.backgroundImage = "none") :
            ''
        ), this.pngSet=true
  );
}

Since Prof. Schubert Foo mentioned about BookJetty in VALA conference, there have been quite a number of requests from BookJetty users and librarians to link up their libraries with BookJetty.

And BookJetty welcomes the 10 most recent libraries that BookJetty links up with:

Australia

• City of Boroondara Library
• Corangamite Regional Library
• Stonnington Library
• Monash Public Library Service
• Darebin Libraries

Singapore

• Nanyang Technological University

United States

• Coastal Resource Sharing Network
• King County Library System
• Pascal Delivers
• Santa Cruz Public Libraries

So special thanks especially to Prof. Schubert Foo to create the awareness, and to people like Hazman Aziz, Anne Holmes, Elaine Hopper, John Ruddle, Caroline Ramsden, John Edstrom, Lianne Gee, Stuart Lutzenhiser, Neredowell, Jessica Goodman, and others I could have inadvertently missed, for their suggestions and help with the link-up.

There are a few libraries suggested by some users could not be linked up because their z39.50 gateway is not active. I’m really sorry for that, while there are a few others are pending their verifications on the availability of the gateway with their librarians.

I’ve also worked on a simple XML spec which libraries can implement to link up with BookJetty, but the spec I think still need improvement, and I’ve yet to find more time to do that. The idea is so that libraries that do not support z39.50 gateway, with their internal IT staff support, can help to build that simple XML interface. While on my side, I’ll need to create the adapter.

In all, I’m really glad to see people around the world are seeing the value of BookJetty, which was started off merely as my pet project and to solve my own problems. It has encouraged me a lot in my long and tiring journey for the last few months, relentlessly days and nights, to work on the new release of BookJetty.

I hope with the new release, BookJetty will help to make our life more fun as a reader, a book lover, and people who know that there are tonnes of knowledge and pleasures, hidden down there in piles of writings binded as books.

And it’s definitely gonna be more fun if you can link up with your friends and family bookshelves, on top of your reviews, libraries, and online bookstores, all put under one roof with simple and user friendly interface. That is what I hope to achieve for the next release.

And the good news, I’m almost done, so, stay tuned for the new BookJetty this April.

Sometimes I wished I could still be a kid.
When life was much simpler.
Closed my eyes, and I found peace.

The VALA Conference is the Australian forum where the use of technology in libraries is discussed. Held twice a year, this year’s conference is the 14th Biennial Conference, and it continues to draw participations from librarians worldwide.

The 2008 conference was just over, held from Feb 5-7, 2008, at Melbourne Convention Centre.

It featured keynote speakers, Prof. Schubert Foo (Nanyang Technological University, Singapore), Prof. Michael Geist (University of Ottawa, Canada), Prof. Peter Lor (University of Pretoria, South Africa), Andy Powell (Eduserv Foundation, UK), Stuart Weibel (OCLC Programs and Research, USA) and Luke Wroblewski (Yahoo! Inc & LukeW Interface Designs, USA)

Hazman Aziz, an ardent trainee librarian in Nanyang Technological University (NTU), who has initiated NTU library catalogue integration with BookJetty, was in the conference; he hinted that BookJetty was mentioned by Prof. Schubert Foo.

From his review of the conference, Prof. Schubert shared that library can play the role of an info-concierge, where individual info object is a self sustaining, self containing node unit, can be content or service, in any format. The connectivity can be attained in many ways and not necessarily in a single way such as a mesh (web) of information. This example can be illustrated on BookJetty.com, where libraries such as NTU, National University of Singapore (NUS) and National Library Board (NLB) have integrated the connectivity for user discovered contents.

References:

• VALA 2008 14th Biennial Conference and Exhibition, by Hazman Aziz
• VALA 2008 Conference - Day 2 - Schubert Foo - Plenary, by Connecting Librarian
• Prof. Schubert Foo’s Keynote
• VALA 2008 Conference Papers
• More about BookJetty integration with libraries

I know this is an old problem, but I was still not satisfied with the current way of testing flash.now messages. If you love writing test cases, I’m sure that you will bump into the problem of testing flash.now message in your controller.

We usually use flash.now to display a message for an immediately rendered page, meaning not redirected:

flash.now[:notice] = 'You gotta be kidding me!'

The :notice key-value pair will be cleared once the action has been performed, and when you perform your test, flash.now[:notice] will return null.

# flahs.now[:notice] returns nil
assert_equal 'You gotta be kidding me!', flash.now[:notice]

# or in rspec
flash.now[:notice].should == 'You gotta be kidding me!'

So, what do we do now? The good news is Rails Wiki suggested two ways, which I’ll probably add the third way shortly after this:

First is to use assert_select:

assert_select "div.message", "You gotta be kidding me!"

The problem with assert_select, it needs to render your view, but often we just want to test the message without rendering the view, rendering view may throw errors especially if you are testing with mock objects.

The second way was suggested by Justin Gus, through his flashblack plugin, pretty nifty I thought, because it meets the objectives in which he stated:

• The solution should only have effect in tests. It should not implicitly weave its way into production behavior.
• I should be conscious when the behavior is in affect.
• It should require very little effort on my part to enable the feature
• It should be simple

Sample codes with flashback plugin:

flashback
get :index
assert_equal 'You gotta be kidding me!', flash.flashed[:notice]

But there’s one problem I was facing, I don’t like the call the extra flashback method.

So here is my attempt through a simple monkey patching of FlashNow and FlashHash class. The patch will store flash.now messages into flash[:now], which can be easily referred in your test codes, through flash.now_cache.

1. Append this code snippet to your /test/test_helper.rb file or /spec/spec_helper.rb if you are using RSpec.
   

   module ActionController
     module Flash 
       class FlashNow
         def initialize(flash)
           @flash = flash
           @flash[:now_cache] = {}
         end
         
         def []=(k, v)
           @flash[k] = v
           @flash.discard(k)
           @flash[:now_cache][k] = v
           v
         end
       end
       
       class FlashHash
         def now_cache
           self[:now_cache] || {}
         end
       end
     end 
   end
   

2. And now you can test flash.now mesages through:
   

   # Unit Test
   assert_equal 'You gotta be kidding me!', flash.now_cache[:notice]
   
   # RSpec
   flash.now_cache[:notice].should == 'You gotta be kidding me!'
   

Would welcome suggestion to improve this further. Thanks, and hope it will be helpful to you.

You know it’s funny that I read a similiar article for last year’s nominations forwarded by a friend. He told me to check out some of the young entrepreneurs in the region. I remember how I admired them, yet couldn’t stop to envy them for starting out at such a young age.

At that time, I had just started Pluit Solutions, and BookJetty was still a pet project; deep inside, there was a slightest hope to be shortlisted before I pass the age limit.

And believe it or not, yesterday’s morning, on BookJetty shoutbox, Isaak said, he spotted me in BusinessWeek.com, shorlisted as one of the 25 finalists for Asia’s Young Entrepreneurs.

I couldn’t be more happy than this, I was ecstatic, close to jumping up and down, not just for being featured, but at least for the re-assurance that the steps I took are leading me forward.

It has not been easy to start on your own, to run a business, to build a product, to bootstrap, to be frugal, to be wise, to take risks, to make mistakes, to learn, and to endure.

There are days when you wake up in the morning, feeling afraid that you may not have made it. Thus it is comforting to be acknowledged once in a while, and let it be the extra fuel for more late nights to burn. :)

If you are a web designer, you know that PNG image rocks for its fine transparency support. But lacking of support on IE6 and below, probably has gotten into your nerve at some point of your life.

The journey for PNG image fix on IE has started long ago, and it all voices back to the use of AlphaImageLoader filter hack.

<div style="height:400; width:400; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale');"></div>

Some guys wrote Javascript codes to automatically reload PNG images found in image tags with AlphaImageLoader, an example would the pngfix.js by Bob Osola, the first you will find if you search for “PNG fix” on Google.

But the problems with Bob’s script, it fixes only the <img> tags, how about your <div> tags with PNG image background, and if you have small images, like an icon that I had with 12px height, the width and height will be distorted.

That will lead you to find a better solution to solve these two problems, and you may have bumped into TwinHelix IE PNG Fix or other similar solutions.

It fixes both <img> and <div> tags, and solve the width and height distortion through the use of blank.gif. On top of that, it uses a clever way of calling the javacript codes through CSS behavior attribute, supported only by IE, which gives you more choices on which element to fix.

img, div.img {
    behavior: url("pngfix.htc");
}

And human is definitely an amazing creature, whom can not be easily pleased. Two weeks ago, Rogie King from Komodo Media, published a clever way to PNG fix through CSS. Now you do not even need an external file, such as pngifx.js or pngfix.htc.

The concept is similar except it is neater and cleaner, and the javascript codes are compacted and called inline from behavior attribute. After all, PNG images are more of a styling issue, thus putting the fix under CSS seems to make more sense.

* html img,
* html .png {
  azimuth: expression(
    this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
    this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
    this.src = "/images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
    this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
    this.runtimeStyle.backgroundImage = "none")),this.pngSet=true
  );
}

This is the best I’ve seen so far to solve my PNG image transparency issue, probaby yours too. Thank you Roque.

UPDATE:

Here are the quick step-by-step instructions, as requested by some:

• Download pngfix.css, file created for your convenience.
• Download blank.gif, a transparent 1×1 pixel image to help out with the fix, mouse right click and save it to /images folder.
• If you store blank.gif in other folder other than /images, please edit pngfix.css to relect blank.gif location.
• Copy the following code snippet and paste it in your HTML source codes, inside <head> tag, to load pngfix.css only for IE 6 and below; IE 7 doesn’t have PNG transparency issue.
  

  <!--[if lt IE 7]>
    <link href="/stylesheets/pngfix.css" media="screen" rel="stylesheet" type="text/css" />    
  <![endif]-->
  

• That’s all, for all <img> tags with transparent PNG images will be automatically fixed, while for background images defined in stylesheet, you will need to add "png" class name to the respective elements, e.g. assuming that “flower_bg” defines a transparent PNG background
  

    <div class="flower_bg png">
       Hope you get a clear picture now.
    </div>
  

TIP:

On some cases if you have a lot of <img> tags with only a few of them are transparent images, you can choose to remove * html img selector for performance reason (remember to remove the comma as well). Without that, you would have to add "png” class name for <img> that needs the tranparency fix.

UPDATE 2:

Original script may cause redundant background ‘none’ call to the server, which may be shown as page not found or server error in the access log. I did some fixes which solve this issue, more about this issue can be found here. Here are the updated version, I’ve also updated pngfix.css, the downloadable version.

* html img,
* html .png {
  azimuth: expression(
    this.pngSet?
      this.pngSet=true : 
        (this.nodeName == "IMG" ? 
          (this.src.toLowerCase().indexOf('.png')>-1 ? 
            (this.runtimeStyle.backgroundImage = "none", this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
                this.src = "/images/blank.gif") :
            '') :          
          (this.currentStyle.backgroundImage.toLowerCase().indexOf('.png')>-1) ?
            (this.origBg = (this.origBg) ? 
              this.origBg :             
              this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
              this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
              this.runtimeStyle.backgroundImage = "none") :
            ''
        ), this.pngSet=true
  );
}

My grandparents migrated from China on a boat in the late 1930s. Grandma said they were still a kid, and they were running away from war.

They landed on a small village, southern east-coast of Sumatra. They got married in their teen, she has 11 children, 9 daughters and 2 sons. I always find it amusing whenever I told anyone about how many children they have, well, enough to form a soccer team.

They lived in the village for many years, even after all their children had settled down in other towns, they insisted to stay. Until one day a thief broke into their house and grandpa was stabbed on his upper arm, they decided to move to my hometown.

Grandma is the more friendly and chatty type as compared to Granpa, her smile was wide and warm whenever I visited her. At 5-feet tall, probably shorter, she looks really small when she stands beside grandpa, who is towering at 6 feet.

I love talking to grandma, I like to ask her about the past, how was life like during the war and how they used to live their every day life.

One thing that she always said, we all are vey fortunate today. She said basic need like rice, which now we can get easily get from any neighbourhood market, triple AAA grade, imported from Thailand, some even pre-washed. For them, they had to plant themselves.

I remember how she smiled, recalling how tiring it was to plant paddy fields. She said, even after the harvest, they still had to winnow the rice grains, they had to wait for wind to blow the chaff way. How afraid they were many times, when they had to hide under the bed after a gun shot from a distance. How meals could be so simple by just eating tapioca.

Though life is much better today, it may not be always rosy. Not long after they moved to my hometown, grandpa got a stroke, and that left him with half of his body paralyzed, and he had to be wheel-chair bound. Being wheel-chair bound in a small town in Indonesia, where the roads and streets are not disabled friendly, that leaves you with no choice but being confined at home most of the times.

Granpa became really quiet, he hardly spoke more than two words when I visited them, one to acknowledge me when I arrived, and the other when I said good bye. He preferred to spend his days resting on his bed, or on his wheel chair behind an open gate, by the road side, watching people, vechicles and the crowd passed through the time. He always looked sad and weak, and that goes on for a few years.

Last week, when I went back, he seems to be a changed person, more energetic and lively than before, finally I was able to see him smile again when I greeted him.

When he wanted to go out to the yard, Grandma pushed him on his wheelchair, my wife, and I tagged along. We had small conversations, he replied with his soft husky voice, hardly audible, grandma had to bend down, put her left ear close to his lips, she would interpret for us when explaining what granpa had just said, often with small laughters.

I asked her who shaved grandpa’s beard, she proudly said I did, I asked her who cut granpa’s hair, she moved her fingers tidying grandpa’s short hair, she smiled and said I did.

Her small gestures showed how much she loves grandpa, I was proud with her, I saw before my eyes, what wedding vow means when we say through sickness and health.

It is sad that life has to ever grow old, and how I wish granpa is able to walk at his old age. Yet life is always unpredictable, bad things do happen at the unexpected times.

Maybe simple things in life, now I shall learn to cherish each day, to be able to stand up, to walk, to move my fingers, I shall learn to be grateful.

BookJetty is preparing itself to support the social elements so you can follow your friends’ or strangers’ bookshelves.

Did a face lift, opting for a simpler homepage, adding friends ala Twitter.com, with simple news feed to keep you updated of what’s new in your network.

This is probably the biggest change ever at one go, gonna tidy up some back-end codes as well, planning to go REST-ful with RSpec/Behaviour Driven Development (BDD), so it’ll be easier to maintain, as the functionalities get more complex.

So it’s going to take a while, but a sneak preview into what BookJetty will look like. Hope you will like it.

Home Page

Dashboard

User Profile Page

The Digital Movement guys are back in action with PopOut 07. Thanks to them for inviting me to share a bit about BookJetty, and I also look forward to learn from the sharing of other startups which have already made the cut, like Bezurk.com, Recruit.net and the others.

It’s a short meet-up, two and a half hours, this coming Thursday night, at Suntec City, do pop by if you have nothing else better do. To register, click here.

UPDATED (07 Oct):

Definitely a night to remember, for those who were there, thank you all for your warm response, for the whole TDM Team, thank you for the hard work put in, for the slot given, and for another great event.

For those who missed it, here are some reviews by fellow bloggers:

• Live Blog From Popout 07, by The Digital Movement (TDM)
• Popout Fizzles Out, by Ian
• Honestly, PopOut was good except for one thing, by Aen
• Live blogging from PopOut 07, by Singapore Entrepreneurs
• Post from PopOut, by ThoughtMonkeys
• A decent event @ Popout! 2007, by Priscilla
• PopOut! Singapore: The book nerd who wowed the crowd, by MediaSlut
• POPOUT ‘07′ - Emerging Web Startups, by
  Singapore infocomm Technology Federation (SiTF)
• PopOut! Singapore - Preview of Firefox 3.0, by Claudia