An indepth article just out by Jon Tang on how to make @font-face work in IE. A recommended read for all interested in typopgraphy for the Web:

@font-face in IE: Making Web Fonts Work

We're one step closer to ditching sIFR and Flir et al.

This is a question a jQuery user asked recently. It's a simple question without a simple answer. There is no inverse equivalent to scrollTop=0 (i.e. scrollBottom=0) so the solution requires some thought.

The scenario is this — we have a fixed height div with overflow:auto and we want to use JavaScript to programmatically scroll to bottom and also to execute some code if we're at the bottom. Our div looks like this (using inline styles for the sake of this example):

 
<div id="box" style="height:300px; overflow:auto;">
  <!-- Your content goes here -->
</div>
 

To scroll to bottom programmatically we do:

 
$('#box').animate({scrollTop: $('#box')[0].scrollHeight});
 

And to check whether we're scrolled to bottom:

var elem = $('#box');
if (elem[0].scrollHeight - elem.scrollTop() == elem.outerHeight()) {
  // We're at the bottom.
}

That's pretty easy, right? As noticed scrollHeight is the key to this solution.

A bit of info about scrollHeight: First introduced by MSIE and supported since version 4, ^[1] scrollHeight gets the height of an element's content including padding but not margins. Though scrollHeight is currently supported by all major browsers it is not part of a W3C recommendation so still considered proprietary. ^[2]

Now, some of you reading this might not like scrollHeight because it's not a W3C recommendation. So for the interest of this group let's explore an alternative solution.

Your first stab at the alternative to check whether we're scrolled to bottom might look something like this:

 
if ($('#box').scrollTop() == $('#box').outerHeight()) {
  // We're at the bottom.
}
 

Novel, but that doesn't work! scrollTop is quite an arbitrary value. In our case depending on which browser you choose the answer could be anything from 244px (Safari) to 289px (IE7). Clearly this is not a viable solution.

To determine whether we're truely at rock bottom we have to get the height of the element's content and do a calculation based on that. Now we're immediately faced with another problem — there is no sane way of determining the actual height of an element's content because .outerHeight() always gives 300px plus padding as the answer. We could use an inner div to get over this problem:

 
<div id="box" style="height:300px; overflow:auto;">
<div class="inner">
    <!-- Your content goes here -->
  </div>
</div>
 

So now we have a way of determining content height we can scroll to bottom:

$('#box').animate({scrollTop: $('#box > .inner').outerHeight()});

And to check whether we're scrolled to bottom we use the offset method:

var elem = $('#box');
var inner = $('#box > .inner');
if ( Math.abs(inner.offset().top) + elem.height() + elem.offset().top >= inner.outerHeight() ) {
  // We're at the bottom!
}

Not as striaght forward as scrollHeight aye?

Here's a test page encompassing the stuff talked about in this article.

References:
[1] scrollHeight Property
[2] element.scrollHeight

I'm sure you will agree this is nothing new but I've been intrigued by the FON Free WiFi service for quite some time, just never got round to sharing my thoughts.

With the recent horror stories about wireless mobile subscribers racking up thousands of dollars in mobile data charges I thought I'd finally blog a bit about FON.

Martin Varsavsky founded FON on February 2006 in Madrid, Spain. FON’s mission is to stimulate the growth of WiFi around the world by creating a global Community of “Foneros”. FON is the largest WiFi community and recently reached 1 million members this September.

FON's goal is to provide Free WiFi access everywhere. To do this they had the idea that to receive you must first give — plant a small mustard seed and receive 10, 20 and 100 folds.

When I first heard about FON, the concept of opening my WiFi to public was a bit scary. For starters you're asking for trouble because it involves sharing on an unencrypted channel, leaving you vulnerable to malicous attacks. However, I later discovered to share a connection with FON you need their Fonero router. This router has two APs built-in, one for personal use (encrypted via WPA) and the other open to public (unencrypted). It was instant buy-in for me after that.

The potential for FON is huge, especially in a small city like Hong Kong. WiFi mobility is a key step towards the evolution of the Internet. To move from stationary workstations to mobile on-the-go always-on access the public needs affordable, available and reliable access with good coverage. FON might just have the right sort of ecosystem to provide for Hong Kong.

Some exciting news just came out — Microsoft plans to adopt jQuery making it part of their official development platform. So it will be shipped with Visual Studio and have all that intellisense goodness. I'm pretty excited about this news. Though I no longer use Microsoft development products it is a testiment to the world of jQuery's continual growth and rise as one of the best JavaScript libraries in existance.

Read the official annoucements:

• jQuery, Microsoft, and Nokia — John Resig
• jQuery and Microsoft — Scott Guthrie

Photo: Ryanne Lai

Like last year, this years' Barcamp Hong Kong attracted some amazing people. The sponsors have clearly grown too with big names such as Yahoo!, Adobe and Microsoft added to the pot.

Unfortunately I missed most of the morning talks, including the HKSUA launch. I arrived just in time to catch the last few slides of Julien Wong's YUI Library talk. During the talk there were some interesting discussions on other JavaScript frameworks, a question that always pops up in such talks. I voiced my opinion saying that it is a matter of taste and in terms of core features, the offering amongst popular JavaScript frameworks are more or less the same.

Next I sat in the Making iPhone Apps (English) session. Wasn't too impressed with Objective-C, actually more disappointed by the many pitfalls and gotchas that William Taysom, co-founder of JadeTower was alluring to. Didn't get much out of this one unfortunately.

Photo: Ryanne Lai

The Open Source and Microsoft talk by Gary Sweeting, Platform Strategy Lead at Microsoft was very interesting. Gary tries to implant the idea of good business sense. What I got was Open Source Software (OSS) only makes sense to a certain degree in order for M$ to make an annual turnover of $60+ billion and that OSS and Proprietary can work together as mixed source (corrected from comment by Gary — was "can work together and converge at a neutral point"). In a way I could understand his arguments. Who wants to earn less when they know they could earn more? But on thinking about the philosophy of OSS it is not about making money but rather knowledge sharing and collective intelligence — much like the scientific world.

Photo: Belle Liu

The Twitter - Visualising Conversations talk was a real eye opener. I always found tweets very noisy; most tweeters use it to satisfy their own egos — who wants to know you're brushing your teeth or in your pyjams?!? Napoleon Biggs took us through a journey of meaningful aggregation of twitter conversations through analysing people's emotions. The highlight of his talk was wefeelfine.org which is an artwork of human emotions using visualisation movements — the Madness movements look a lot like code_swarm. Napoleon finishes off with a challenge for someone to create a Chinese version of wefeelfine.org. Is anyone out there up to the challenge? I'm tempted but don't have such time on my hands. If wefeelfine.org started aggregating conversations in Chinese their API would be very enticing [hint].

Edison Wong demonstrates Drupal theming. He gave us some useful tips on how to manage a single theme across version 5, 6 & 7. Hong Kong Drupallers have yearned for a meet-up and this talk is the catalyst! A Drupal meet-up will be happening sometime this month! Keep an eye on groups.drupal.org/hongkong and the Hong Kong Drupal User Group.

The highlight of the day must surely be the Start-up Lightening talks! Each person with a start-up idea had 4 minutes to pitch it to the audience. The winner gets an Xbox 360. I voted for no. 8 as it was similar to an idea that's been brewing in my mind for months! I hope he manages to pull this off!

Now that Barcamp is finally over all we could do is reminisce the past and look forward to the next Barcamp.

Niall Kennedy tells us the story behind Google Chrome. A facinating read and interesting karma behind staff hires and acquisitions that made Chrome possible. Whether by chance or calculation it is a Win win situation for all of us!

The guys at Mercurytide have released a new Django 1.0 cheat sheet. Thanks guys this will be very handy indeed!

Wohoo! OK, maybe not as big as Chrome but Django 1.0 released yesterday! Django is a brilliant Python Web framework designed to make our lives easier. Django takes DRY to its extreme and comes with myraids of documentation including an online book! Django is like Lego, first you start with many dispersed pieces; you then get an idea of what you want to build; pick up a few pieces from Django Plugables; and tada! Your masterpiece is near completion.

I know I sound like a salesman now but I'm really just trying to express my excitment to the 1.0 release

Now, it's time to get my hands dirty with Python!

As you may have heard Google Chrome (Chrome) went live yesterday. The Chrome team also released a comic explaining some of the innovations and ideas around Chrome.

After installing Chrome the first impression I got was it's a very slim-line and compact browser. The UI reflects this totally. There isn't the usual File menu above (personally I don't think it's needed in a browser anyway) and tabbing is at the very top. The Omnibox, Chrome's address bar, is very dominant and a very powerful. Much like Vista start search feature you don't have to remember where things are — just search for it. The default search engine of the Omnibox does not have to be Google either, use "Options -> Basics -> Default search" to change it.

I really like the Application shortcuts feature. Many a time I have wanted a shortcut on my desktop which opens up a web application much like a desktop app does. I know you could create a lnk file and place that on the deskopt but somehow it doesn't feel good. When you create an application shortcut however it creates for you a special shortcut which opens up Chrome in an even slimmer interface that looks just like a standard desktop application. It is excellent when used in twine with GMail.

Chrome is a muti-threaded browser, that means each instance (new tab, new window, plugin, javascript etc) runs a separate process, it sounds like a wasteful approach but quite a fascinating concept as explained in the comic. It uses the tried and tested WebKit engine for rendering web pages and the V8 JavaScript engine. V8 is a high performance engine written in C++ which compiles and executes JavaScript code. All are open source projects so not an inch of propreitary code inside!

I think Google is on to a winner, if not, they have once again set the bar higher for others to compete against.

The second coming of Barcamp Hong Kong has arrived. I'm a bit late to the party because somehow I've been dropped off the mailing list — someone does not like me

Anyway, do not fret! There is still one week left until the event so RSVP now!