JavaScript Pull to Refresh

After seeing Leah Culver’s blog post entitled “iPhone Pull to Refresh“, I was disappointed when I clicked through to find out that it was an ObjC library and not a javascript library. So I set out to see how hard it would be to replicate the UI pattern in javascript.


DEMO | javascript source

This is a prototype/proof of concept which gives a good idea of how to implement pull to refresh in javascript. It uses no javascript libraries so you could easily port it over to your favorite.

To implement the UI pattern properly, javascript must take over the browser’s default scrolling functionality. Any touch javascript framework already does this (PastryKit, jQtouch, etc). Mobile browsers block rendering when the user is scrolling so exposing the “Pull and Release to Refresh” hint is impossible. This limitation also makes it difficult to develop a plug and play javascript library because each framework handles scrolling differently.

This code works on iOS/iPhone and Android. Please don’t abuse this UI pattern too much. 🙂

iPhone/iOS 4/Froyo Browsers and Concurrent Connections

Every web developer knows that browsers have a max number of concurrent connections that can be opened to a host at a time. Modern browsers have anywhere from 6-8 per host. You can test this on my simple concurrent connections test page. Open the link and wait ~3 seconds and count the number of boxes you see with content. If you’re in Chrome or Firefox 3+ you’ll see 6 boxes fill up at a time.

Mobile browsers are exactly the same except iOS 4 and Android 2.2 (Froyo) allow 4 concurrent connections. Surprisingly, iPhone OS 3.x allows for 6 (this includes the iPad with 3.2). I’m not exactly sure why Apple decided to drop the max concurrent connections but 2 less connections per device would lessen the load on operator networks (*cough* AT&T).

I don’t have any older Android or iPhone 2.x devices lying around. If anybody has any, feel free to use my concurrent connections test page and post the results in the comments. I’ll update once I get my hands on some more devices next week.

Firefox Heatmap

Mozilla released a Firefox Heatmap which provides some insight into how they arrived at some of the Firefox 4.0 UI decisions (such as combining the stop and reload button or making the search button not button-y).

You can also glean some interesting conclusions by comparing users across Windows, OS X, and Linux. For example, the horizontal scrollbar is only used by 20.5% of OS X users vs 44.1% of Windows users. This could be attributed to either Macs coming with wider resolution screens or most Macs coming with mice/trackpads that allow built-in horizontal scrolling.

RSS Icon is clicked on by Linux users 13.8% vs 5.7% for Windows users. Linux users more tech savvy? Definitely.