Wayne Pan

Awesome CSS3 Buttons

Wayne — Fri, 27 Aug 2010 22:56:11 +0000

Posterous shows us how it’s done with some awesome css3 buttons.

Not So Fast, H.264 Still Not Free

Wayne — Fri, 27 Aug 2010 17:36:04 +0000

Not so fast, H.264 is still not “free forever”.

JS/CSS Compression via PNG

Wayne — Tue, 24 Aug 2010 00:31:13 +0000

Seems the xsphere, is all a buzz with js/css compression via png. Turns out gzip is still far better, research here by Cal Henderson.

Water Ripple Effect in Canvas

Wayne — Tue, 17 Aug 2010 00:58:25 +0000

Part of the 1k JS comp, water ripple effect done in canvas.

jQuery Mobile

Wayne — Sat, 14 Aug 2010 02:56:48 +0000

Official jQuery Mobile project was just announced. Now we’ll have quality open source and commercial mobile javascript libraries (see Sencha).

Imageless Animated Loader

Wayne — Sat, 14 Aug 2010 02:54:09 +0000

A few CSS hacks later and you have an imageless loader. Useful for Android version older than 2.2 (Froyo) since they don’t support animated gifs.

Rock Paper Scissors Strategy

Wayne — Sat, 14 Aug 2010 02:52:29 +0000

Rock Paper Scissors Strategy, it’s more than just guessing.

7 Security Experts Hold Keys

Wayne — Sat, 14 Aug 2010 02:51:38 +0000

7 security experts hold the keys to reboot the internet, sounds like this would make a great movie in about 10 years.

God and Devil Numbers

Wayne — Tue, 10 Aug 2010 19:16:34 +0000

God’s Number, the minimum number of moves required to solve and Rubik’s Cube position, has finally been proven to be 20. Alternatively, the Devil’s number remains unsolved.

JavaScript Pull to Refresh

Wayne — Fri, 30 Jul 2010 23:28:50 +0000

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.