Wayne Pan

2009 is ending, a year that started with Sequoia’s RIP: Good Times fresh in everybody’s mind. However, 2009 saw some major M&A activity.

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.

Apple needs to introduce a physical keyboard attachment for the iPhone. With the 3.0, Apple gave developers access to the connector and it’s inevitable that devs will want to start supporting physical inputs in their apps. This would be so much easier if Apple said okay here’s the keyboard and here is a standardized API to use. Consumers and developers both win.

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.

I saw a post on Ajaxian about how iPhone 3.0 might now include SquirrelFish Extreme so I did a quick and dirty using this. Here’s are the results (raw spreadsheet here).

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

Earlier this year, when I was developing the AdMob iPhone Ad Units, I ran into a curious bug involving iFrames and CSS Transforms. I didn’t think anything of the bug at the time other than it just seemed wrong. We abandoned some of our ideas because of this bug so I filed it away and moved on.

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.

All the recent rumors circulating of Pandora’s demise, I started worry that my favorite iPhone app would soon be deactivated. Today, I do not care.

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.

I’ve been doing a lot of work with the iPhone lately and I’ve been holding back on blogging about my experiences because I’m unclear as to the damn NDA stipulations. NDA be damn, here’s a first in a series of posts!

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.

(more…)

Is it just me or is there a definite lack of a good notes application on the iPhone. The built in Notes App is almost there except it doesn’t sync with MobileMe nor can I draw freehand on it! If the Apple Notes App did that I won’t have to look for an alternative, however, I do, and I did.

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.

Last Friday, at TC’s Mobile Wars, a couple AdMobsters and I were in attendance. Somewhere between the angry audience spectrum guy and Arrington looking up from his iPhone, my co-worker Josh was Twinkling around the room. He apparently struck up a conversation with a fellow audience member, Laura and they decided to meet up with each other.

All this is unbeknownst to me but soon after, while I was waiting in line for the August Capital after-party, Josh comes up and tells me that he met some guy named Joe Hewitt and that I might know him. Joe Hewitt? The Joe Hewitt? Mr. Firebug?

Josh offered to introduce us and, like a giddy school girl, I said, “HELL YES!” So we did. Nice guy that Joe is. We chatted about some iPhone stuff, firebug, webkit animations for a bit. Unfortunately, I didn’t get a chance to ask him about Parakey and what Facebook ended up doing with it.

Maybe next time…

We launched our AdMob iPhone ad units, developer contest, and publisher network. Shortly, if I can figure out if the webkit portion of the SDK is under NDA or not, I’ll be posting a postmortem on. If you watch the video below, you can see we did some amazing javascript and css stuff.