Back in Jan. I wrote the following about Apple’s view of multitasking:

Normal users do not want to deal with resource management nor do they understand it.

Today, Steve Jobs confirmed it by saying, “In multitasking, if you see a task manager… they blew it. Users shouldn’t ever have to think about it.”

The problem is that, neither webOS and Android have a task manager (although the first thing that most Android users download is a task manager). Also, webOS has a much better implementation of app switching than iPhone 4.0. Quitting apps on webOS is a simple flick of the finger up while you have to tap and hold an app in the taskbar to quit an app in iPhone 4.0.

By restricting backgrounded apps to one of 7 services, Apple has solved the problem of resource and battery management. The 7 services, audio, VoIP, location, push notifications, local notifications, fast app, and “task” completion, allows for 90% of what most users will need backgrounding for. Sadly, though 4.0 won’t be hitting the iPad until Fall, 6 months or 1/2 the iPad 1.0′s life cycle.

Top 6 Nexus One/Android Pros

• Gmail – It won’t come as any surprise but if you’re a heavy Gmail user, Android should be your phone of choice. Labels, archive, search, and threads. Almost as good as the real thing
• Hot Spot – with a simple rom replacement and wifi-tether, my phone is now a mobile hot spot. (Hello iPad 3G without paying an extra $20).
• Widgets – News widget, foursquare widget, the homescreens of the Android are much more useful than the iPhone’s. Also, Maps has a live wallpaper that shows traffic for my current area, constantly.
• Turn by Turn Directions – Built in turn by turn directions allows you to toss your GPS.
• Widgets
  
  The power widget allows you to turn on/off power draining features of the phone from the homescreen. This is great since the Nexus One doesn’t seem to be able to make it through a whole day for me.
• Google Voice – Full Google Voice integration… if you’re a Google Voice user. I won’t use Google Voice until I can port my existing number to it.

Top 6 Nexus One/Android Annoyances

• Non-Gmail Email – I have serious issues with my company’s exchange account. For no discernible reason, the native Email app stops syncing mails. Refresh doesn’t help, deleting the account and recreating will solve the problem for a couple days. Infuriating. Also it’s not possible to search non-Gmail accounts. To top it off, there’s no way to access a Yahoo! mail account (except to pay for Yahoo! Mail Plus)
• No Exchange Calendar Sync – No explanation needed.
• Landscape mode only works turning left! – At first I thought many apps didn’t have landscape mode, but apparently turning the phone clockwise will not trigger landscape mode. This might be useful when reading in bed, but so far it’s been an annoyance.
• Touch screen is inaccurate – in the browser, I find myself clicking on a link only to have the link below register the click. Reports of the Nexus One’s touchscreen being inferior are not exaggerated
• No good Podcast listener – the best podcast app I’ve found is Google Listen. It auto syncs podcast but lacks double speed playback!
• Missing Mint.com and Scrabble/Words with Friends – There is no native Mint.com or Scrabble or the Scrabble rip-off Word with Friends.

Over the course of a couple weeks, friends have asked me “Hey, is that a better phone than my iPhone.” I have consistently said absolutely not. You give up quiet a bit to go full Android over the iPhone. The pros just don’t outweigh the cons.

The only reason I could recommend a Nexus over an iPhone is if you’re heavily invested in Google apps, Gmail, Google Voice, Picasa etc. With that in mind, Nexus is competing against the iPhone 3GS, not the iPhone HD (or 4g) and iPhone OS 3.2. We’ll see what Apple has up their sleeve on Thursday and this June.

I made some predictions at the beginning of the year, let’s see how they played out. Last year I was 50% correct…

• Twitter will not be acquired – Correct! Many people measure the success of Twitter in terms of traffic to twitter.com, but traffic isn’t what Twitter wants. Twitter is a platform and as Jack put it “Twitter’s a success for us when people stop talking about it”. I also predicted that Twitter would get their first sniff of revenue this year and they did in the form of search deals with Bing and Google.
• Digg will not be acquired – Correct! Digg’s appeal as an acquisition target went up threefold when they launched their innovate ad platform. No numbers have been released but as an avid Digger, the platform definitely works. I’ve clicked on my fair share of Digg ads simply because they appealed to me.
• Apple will open up iTunes infrastructure to developers to start accepting micro-payments – Wrong! Apple did do something around payments, they enabled app developers to charge or in-app purchases in free apps. One step closer to opening up their payment platform. If Apple did this, Square would be belly up.
• Android phones sales will not exceed iPhones, maybe in 2010 – Correct! AdMob’s latest metrics report, which measures ad requests not marketshare it’s clear Apple still has a substantial lead. Even based off ad requests it’s clear Android is no where near Apple and for this purpose, I’m calling it good enough.

  I guess I’m lucky that Google hasn’t released the Nexus One yet. Next year I definitely think Android will have a great marketshare than the iPhone purely based off the number of Android devices (low cost at that too) emerging.

• Facebook connect will become more ubiquitous than OpenID as a way to login to websites – Correct! Facebook says 80,000 websites have implemented Facebook Connect. The best number I can find for OpenID is 25,000. Yahoo will soon use Facebook for it’s social features, Facebook’s platform will only continue to grow.
• IE6 marketshare will fall under 10% by years end – Wrong! IE6 still holds at 22%, and I still cry everyday.

Let’s imagine Apple doesn’t do an OEM keyboard. A third party manufacture is going to fill the space but who will it be? Which apps support it? What if there are multiple keyboards that each work with different apps? Am I, as a consumer, going to have to decide which one to buy and hope my favorite apps support it?

The scenario above could be absolutely avoid if Apple puts out their own keyboard. If Apple is serious about the iPhone being a gaming platform then a gamepad would be nice too.

iPhone 3.0 definitely has something, (whether it’s SquirrelFish or Nitro), but it’s 3x-10x faster than iPhone 2.2.

Update: Dear Apple, if this is against the NDA shoot me an email waynepan at me dot com

Fast forward a few months to the iPhoneDevCamp where I met John Resig for the first time. We chatted a bit about the iPhone and mentioned off hand about the bug I ran across. He, excitedly, wanted to see the bug in action and I whipped up a small demo page and showed him. Later on that day he caught up with me and mentioned that he discovered that it was far more severe than he had originally thought and that he filed a bug against Apple.

That bug has now been fixed in iPhone 2.2 and Resig has a full write up here. (I don’t think Apple would’ve fixed this bug if I had been the one to report it so I’m happy that Resig was able to bring it to their attention.)

There was another bug I ran into regarding iFrames and touch events. Curiously enough, touchevents do not register properly in iFrames. This first test [http://waynepan.com/iphone/] demonstrates that you first must touch the parent document before touching the iFrame for the iFrame to register your touch event. The second test [http://waynepan.com/iphone/touchtest2.html] shows that touch events only register in an iFrame for the top ~100px of the entire page. The problem is best illustrated by visiting those links on your iPhone.

These bugs are not security showstoppers, like the click-jacking bug, but they do prevent web app developers from doing cool things in iFrames. We were originally going to use touch start, change, and end events to cycle through ads or give the user the ability to hide them. Ultimately, it was not possible because the iFrame was not receiving the proper events.

So far these have not been fixed in iPhone 2.2 and I still have bug into Apple for this (radar id: 6089245).

Inline images use the data: URL scheme to embed the image data in the actual page. This can increase the size of your HTML document. Combining inline images into your (cached) stylesheets is a way to reduce HTTP requests and avoid increasing the size of your pages. Inline images are not yet supported across all major browsers.

Performance Best Practices at Yahoo!

Reducing the number of connections is critical for client side performance. Due to the nature of mobile and mobile networks the problem is only amplified. A low hanging fruit has always been moving to css sprites for all your graphical resources. A lot of developers haven’t moved to inline images because not all browsers support it. However, web app developers on the iPhone have it much easier. We only have one browser to worry about, and luckily for us, it’s a good one.

It means that we can safely inline images and reduce the number of requests an iPhone user has to make across EDGE/3G.

Let’s take a look at the newly launched iphone.cnet.com:

There are 26 requests total for this page. If we take all the img tags and replace the src with the base64 encoded inline image we can reduce the number of requests to 13.

<img src="http://i.i.com.com/cnwk.1d/i/wdgt/ipr/back-button-tip.png" border="0" align="left" />
to...
<img src="data:image/png;base64,iVBORw0KGgottA ... SuQmCC" border="0" align="left" />

If we do this for all C|NET owned assets (css and js files) then we can get it down to 6 requests!

<link rel="stylesheet" type="text/css" href="http://i.i.com.com/cnwk.1d/css/rb/wdgt/iphone/iphone-reviews.css" />
to...
<link rel="stylesheet" type="text/css" href="data:text/css;base64,Ym9keSB7CglvdmVyZmsb2F0OiBs...YmxvY2s7Cn0%3D" />

You can view these on your iPhone (or your browser) and see the performance difference:

• Original C|NET – 26 requests
• Inline Images C|NET – 13 requests
• Inline (almost) Everything C|NET – 6 requests

Any iPhone web app developer can do this right now in less than 30 mins. I used Grey Wyvern’s tool, but here’s some down and dirty php code I whipped together for local files that does the same thing:

< ?php
$options = getopt('f:');

if(empty($options['f']))
  die("\nUsage: php base64encode.php -f >filename<\n");

$ext_map = array(
  'png' => 'image/png',
  'gif' => 'image/gif',
  'jpg' => 'image/jpg',
  'css' => 'text/css',
  'js'  => 'text/javascript',
);
$file = $options['f'];
$ext = explode('.', $file);
$ext = $ext[count($ext) - 1];
if(empty($ext_map[$ext])) die("\nUnknown extension\n");

echo 'data:' . $ext_map[$ext] . ';base64,'
     . urlencode(base64_encode(file_get_contents($file))) . "\n";

So get out there, optimize, and save your users some valuable time!

Update: There have been some questions of busting the iPhone cache with this technique. As was documented on the YUI Blog the iPhone does not cache items over 25kb pre-gzip. If you’re going to use this technique just be aware that external resources linked are less than 25kb.

Why? Because I downloaded and set up SimplifyMedia. Now I can stream home iTunes library from anywhere! EDGE, 3G, WiFi, in my car, at the office, waiting in line… anywhere. My decision to save a $100 by going with the 8gb is going rather well.

Some tips for those with large iTunes libraries. Be patient and wait to Simplify to index all your music on your “server”. After that’s complete open up SimplifyMedia on your iPhone and keep it open. I was having trouble seeing all my songs on my iPhone but after I left the app open for 5 mins I was able to see my entire library.

If you aren’t familiar with the new animation framework that’s built into Mobile Safari you can read about the closest thing on WebKit, CSS transitions. Here is an example of a CSS transition:

<div style="-webkit-transition: opacity 2s ease-in"
  onclick="this.style.opacity='0'">
This div will do a fade when clicked only Safari 3.1 or on the iPhone!
</div>

Essentially you tie a timing function and duration when a css property is changed. CSS animations allow for more complex rule transitions. For example, if you want to have a card flipping effect show in this video, you will need to use CSS animations.


CSS animations consist of a combination of 2 rules, one to define the animation timing, duration, and animation name. The second to define the actual animation.

/* the following rules make something shrink from 50px */
/* to 10px then grow to 100px in 2 seconds */
.shrink-n-grow {
  -webkit-animation-name: 'shrink-n-grow-animation';
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-duration: 2s;
}

@-webkit-keyframes shrink-n-grow-animation {
  from {
    height: 50px;
  }
  50% {
    height: 10px;
  }
  to {
    height: 100px;
  }
}

There are a few issues with the Mobile Safari CSS animation implementation and I urge Mozilla, the IE team, Opera, and W3C to consider these before writing their own spec.

CSS means no syntax checking

Jonathan Snook wrote about this last year and until I actually started using them I didn’t feel the pain. Since all the rules are written in CSS there is no error checking. Figuring out that you’re animation is broken because you misspelled -webkit-transition: is painful enough. When you start working with perspectives for translateZ, it will drive you utterly insane.

Access through javascript problematic

Also, because the rules live in CSS world, modifying existing rules on the fly in javascript requires you to use this ridiculous function to scan through CSS rules and find the one you want and then modifying a value.

  var findAnimation = function(name) {
      var ret_rule = null, sheets = document.styleSheets;
      for(var i = sheets.length - 1; i >= 0 ; i--) {
        var sheet = sheets[i];
          for(var j = sheet.cssRules.length - 1; j >= 0; j--) {
            var rule = sheet.cssRules[j];
              // 7 means the keyframe rule
              if(rule.type === 7 && rule.name == name) {
                ret_rule = rule;
                break;
              }
            }
      }
      return ret_rule;
    }
  findAnimation('shrink-n-grow-animation').findRule(
     '50%').style.height = '25px'

Needlessly complicated

To use an animation, not only do you have to apply the final value of the animation if you want it to stick, but you have to perform some software olympics.

  // Add shrink-n-grow animation to a div
  var remove = function() { // we'll need this later
    // first, set final values
    theDiv.style.height = '100px';
    // then remove shrink-n-grow classname so that
    // it can be applied again animations are only
    // triggered when classnames are first applied
    theDiv.className = '';
    // remove this listener because webkitAnimationEnd
    // is triggered on every time ANY animation ends on theDiv
    theDiv.removeEventListener('webkitAnimationEnd', remove);
  };
  // listen for animation end
  theDiv.addEventListener('webkitAnimationEnd', remove);
  /// FINALLY, start the animation animation
  theDiv.className = 'shrink-n-grow';

That is just way too much code.

My personal preference is to have everything accessible in javascript so that the entire workflow of animation can live in javascript (instead of just modifying styles).

I downloaded a promising looking app called EverNote. It stores everything up in the cloud and all notes are completely indexed and searchable. You can save notes by taking a picture and it will OCR them. You can even save audio notes. All this, a OS X client, and iPhone client, and it’s FREE. I’m sold so I fire up the AppStore, download EverNote, and try to enter my first note. This is what I get:

There seems to be a bug where the note you’re typing is covered which makes the primary function of the app completely useless. My bar for usability is definitely higher than the average joe, but considering this app is competing against an Apple pre-installed version EverNote’s bar should be just as high.

Meanwhile, I’ll just have to keep looking.