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

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

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.

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

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

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, it’s more than just guessing.

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

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

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. :)

6 comments

IE9′s hardware accelerated text rendering – the text is rendered in a canvas tag. Impressive nonetheless.

If you’re interested in the intersection of extreme javascript programming, video gaming, and CPU architecture then read this GameBoy CPU Emulation in Javascript article.

Homeowners putting up spare rooms on startup airbnb.com to pay mortgages. Startups that actually make a real difference in the world get a thumbs up in my book.

Old Spice man gets social. Amazing how Old Spice was able to re-position the brand but retain the name. Remember when the mere mention of Old Spice conjured up images of crusty old men at sea?

CSS3 PIE allows for IE6-8 to use some popular CSS3 declarations. The library uses the little known Internet Explorer only behavior: rule.

Twitter’s Cassandra plans on hold, sticking with old faithful, MySQL.

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.

comment

Ars benchmarks iOS4 vs Android 2.2 javascript. Different chips, but 1 GHz vs 800 MHz definitely helps the Nexus One. Wonder how iPad with iOS 4.0 will fair.

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.

comment

Signup Form For VaultPress

An interesting signup form for Automattic’s new VaultPress service. Target audience is tech savvy so non-standard form inputs won’t cause confusion.

comment