I came away with a handy Javascript speed tip from an interesting post on Stack Overflow yesterday. Commonly you will see the following syntax for a self-invoking function in Javascript:

(function() {})();

As it turns out, you can replace the function wrapping parenthesis with a leading bang:

!function() {}();

Results from a jsperf.com benchmark test show that this is 9% faster than using parenthesis. Awesome!

Using the Andriod emulator on the Mac is a painful experience. Since it needs to perform ARM processor emulation it’s extremely slow. I’ve also taken a look at Andriod x86 which allows you to run Andriod as a virtual machine. As a VM it runs as smooth as butter since there’s no processor emulation. The showstopper is that I can’t seem to get the network to connect – rendering it completely useless.

I’ve decided to bite the bullet and get a cheap Android handset to test on – you can’t beat the real thing. Andriod 2.3 (Gingerbread) currently demands ~60% of Andriod usage share even though it’s more than a year old. It’s a symptom of manufacturers not upgrading their devices because of heavy customization, and of cheap handsets that can’t handle new Android releases.

Once such cheap handset is the Samsung Galaxy Y. It has a 240 x 320 resolution screen, runs Android 2.3.x, and is only 99 bucks SIM free. It seems like the perfect “average” device to test on.

One of the newest introductions to webkit in iOS 5 was overflow-scrolling: touch. This allows you to set overflow: scroll on an element and have it scroll with momentum using one finger. Previously you could only scroll these elements with two fingers, and there was no momentum.

I’m pretty excited about this new feature, and I’ve been using it in jQuery Mobile with an app I’ve developed (more on that soon). However, I’ve found a couple of frustrating implementation bugs in iOS 5.0.1.

Sticky Scrolling

The first bug causes the element to stop scrolling at random intervals. Sometimes the element will not scroll at all, and other times it will scroll very slowly, giving it a sticky feeling. It’s bizarre and there seems to be no pattern to it at all. Based on research and talking to some other folks, it looks as though it’s caused by child elements with position: relative; set, or with an :active pseudo-class. Removing these CSS properties will fix, or at lease reduce cases of sticky scrolling.

Click Events

If you have click or tap events bound to child elements then I’ve found that the firing of these events sometimes be suppressed if the parent scrollTop() value is zero. If you scroll the parent slightly, then try to click on a child element, the events will fire as normal.

Both of these issues have been reported to Apple, so the hope is that they will be fixed in the next version of iOS.

Lately I’ve been more and more excited about mobile development. More specifically, mobile web app development.

Mobile web app support in iOS improved significantly in iOS 5 with the introduction of position: fixed and overflow-scrolling: touch support in Webkit. It’s now possible to build an app using web technologies that is near indistinguishable from a native app. Android support is also improving all the time, and with the recent release of Chrome for Andriod, I think we’ll continue to see progress accelerate.

I’ve been working with a mobile development library called jQuery Mobile to build my first app. It’s a cross platform library that allows you to build a single HTML5 app that will work across all major mobile platforms. The real beauty is that if you’re a developer with jQuery skills then you’ll find it fairly straightforward to get started. The library is still only on version 1.0 (1.1 is due out very soon) but it’s been pleasure to work with so far.