Dissecting Safari 4’s Welcome Screen

If you’ve downloaded Safari 4 Beta then you’ve seen a very cool welcome screen. If you haven’t seen it click the video above (or if you’re running Safari 4 you can view it again here). I was curious as to how this page was put together so I did some dissecting…

HTML 5 – Cleverly, Apple decided to use HTML5 and the <audio> and <video> tags for the sound effects and part of the animation. The only part that is a full blown .mov is the ending compass sequence. Here is the .mov.

CSS Animation – The first 2 animations, the Apple logo (plus lens flare) and the Welcome to Safari 4 are achieved by a combination of CSS animations (stylesheet) and a series of images.

The Welcome to Safari 4, is the simplest of the 2. It uses this image:
… and this scaling animation rule:

@-webkit-keyframes header {
	from {
		opacity: 0;
		-webkit-transform: scale(2.6);
		-webkit-animation-timing-function: linear;
	20% {
		opacity: 1;
		-webkit-transform: scale(1);
		-webkit-animation-timing-function: linear;
	77% {
		opacity: 1;
		-webkit-transform: scale(0.9);
		-webkit-animation-timing-function: linear;
	to {
		opacity: 0;
		-webkit-transform: scale(0.1);
		-webkit-animation-timing-function: linear;

The Apple logo animation is bit more tricky and is achieved with these four images:
apple_icon apple_flare apple_spots apple_flare_icon
… plus 4 different css animation rules that are similar to the rule above but each image’s opacity is changed from 0 to 1 at the appropriate time.

Works on an iPhone – What’s more impressive is that this page more or less works on an iPhone! The .mov and audio do not play, but everything animations properly. I removed the javascript that disables the page for non-Safari 4 browsers and put it here http://waynepan.com/s/safari4.

Bonus! – At the end of all the animation, the page redirects you to topsites://, which of course takes you to Top Sites.

The Safari Welcome screen is a peak into the future. It shows us what’s possible when you get to throw all backwards compatibility concerns out the window… (no pun intended.)

Macworld Keynote

My random reactions to Macworld Keynote announcements.

Face recognition in iPhoto is pretty slick tech. Tagging people on facebook is way too laborious right now, this will speed up the uploading of drunk blackmail pictures.

Music lessons in Garage Band is something I’ll personally be using. I’m excited for the prospect of guitar lessons by John Mayer. I can dream, can’t I?

New Keynote templates and transitions will enable more crappy slide presentations possible. I’m a believer in less is more for presentations. All those fancy transitions and animations should be used sparing.

iWork.com? Yeah, like me.com was a rousing success. I give it a year until it’s somewhat stable and another year until it has feature parity with Google Docs.

New 17″ MacBooks with crazy new batteries. Batteries are tough tech but I for one cannot wait for batteries that last 24 hours.

DRM-free iTunes is fantastic. Too bad Amazon.com is still 10c cheaper per song (and iTunes-Plus is $1.29, that’s 40c

That’s it? Oh wait… one more thing! That’s right, AAPL just took a dive.


2009 Predictions

Last year I was 50% accurate, let’s try for better this year. πŸ™‚

  • Twitter will not be acquired. They’ll have their first revenue stream keeping them independent for a bit longer.
  • Digg will not be acquired. There’s still a ton of crazy things they can do to become the center of news. I just hope they figure out how to get rid of the nerd factor. Just look at this list, it’s not exactly the things your mom would read.
  • Apple will open up iTunes infrastructure to developers to start accepting micro-payments. The biggest hurdle for mobile (in the US more than others) is how do you get users to pay you without help from the carriers. If Apple opens this up the industry will take a huge leap in the right direction.
  • Android phones sales will not exceed iPhones, maybe in 2010. Apple still has too much momentum and good Android phones (read: good hardware) still haven’t launched.
  • Facebook connect will become more ubiquitous than OpenID as a way to login to websites. I’m guessing here but there are way more Facebook users and OpenID users. I, for one, won’t be using it but then again I’m more paranoid about my online privacy than others.
  • IE6 marketshare will fall under 10% by years end. Millions of web devs will implode as they are overcome with joy.

2008 Predictions Retrospective

So 2008 is almost coming to an end and what a wild ride in the tech industry. In some cases we’re better off, no more start ups getting inflated valuations for putting a website (see crazy valuations of facebook apps). On the other hand the economy seems to be going to hell in a hand basket and most startups are going into survival mode.

In the beginning of the year I made some predictions. Lets see how those turned out….

Facebook will decline as people either go to the next hottest thing or advertisers realize their ROI on the FB ad platform isn’t the greatest.50% Wrong/50% Correct
I was wrong on the general consumer side as facebook.com has been increasing steadily on the one metric that matters these days, minutes spent. TC reported that Facebook is gaining on Google and passed MySpace back in March.

However, I wasn’t wrong on the ad platform side. Facebook’s ad platform has fallen flat on it’s face. Facebook Beacon hasn’t been relaunched since the original debacle. Most app developers have moved on as they realized their $0.10 eCPMs weren’t worth the headache. With it’s $15 billion valuation from the Microsoft round is a distant memory, they’re bleeding money.

Google will acquire at least two mobile companies to aid Android iPhone will continue to gain mobile browser market share stagnating the mobile web even more. Wrong
I couldn’t find an authoritative list of Google’s 2008 acquisitions but I don’t recall them making a single mobile one this year. Not surprising since nobody is in the M&A market these days.

Slide or RockYou will be acquired. If 07 was the year of widget, 08 will be the year they cash in. Wrong!
Nobody wanted to acquire these guys… low social network eCPMS with a bad economy equal no cash out.

Google or Microsoft will launch an Amazon AWS competitor Correct!
Google App engine was launched, with just a little fanfare. I think once they start supporting languages other than Python, it’ll do quite well.

Yahoo will close at least 4 more properties in an attempt to slim down. Correct!
I think the death count is somewhere north of 15 properties. This list used to be a LOT longer.

A web 2.0 company outside the US will eek out a new niche – Unknown
Honestly, I don’t know one “web 2.0” company that I currently use that is based outside of the US except for last.fm. If you use one please leave a comment… Is it because startups can’t break into the US market?

At any rate, stay tuned for my 2009 Predictions. Obviously I’m Nostradamus when it comes to these things (/sarcasm)

Apple Actually Fixes A Bug, How About Another?

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


Taking Full Advantage of CloudFront

We (AdMob) are exploring Amazon’s new AWS service CloudFront which is a simple CDN. Amazon built this services as a true CDN that people could use instead of using S3 what it wasn’t meant for.

There’s a few things I’ve discovered about CloudFront that bear repeating here. These points are important if you’re attempting to use CloudFront to serve up static portions of your website.

  • CloudFront pulls from S3 only if the CF node doesn’t already have a local copy. This means that the only way to push out a new file is to change the filename. (style.v1.css, styles.v2.css, etc.) This means that your framework will have to take advantage of this. Without file versioning you’re at risk of serving stale files from different nodes on CloudFront.
  • CloudFront doesn’t automatically detect if a browser accepts gzip encoding. You will have to keep separate versions of gzip files (and upload them pre-gzipped). The easiest way to do this is to keep a separate CNAME, eg static.domain.com and staticu.domain.com (u for uncompressed). Your website will then detect the Accept-Encoding header from the client and serve up the appropriate file. Gzipping could decrease your static content by 75% which not only speeds things up for your users but decrease your CloudFront costs.
  • You should set the appropriate headers when uploading content to S3. That means setting a far futures Expires Header and a Cache-Control header. You can read more about these here. There are two GUI programs that allow you to do this, BucketExplorer and jets3t. If you want to write scripts, I would suggest ruby and the AWS::S3 gem.

Here is some ruby code to do what I’ve described above.

require 'rubygems'
require 'aws/s3'
require 'stringio'
require 'zlib'

  :access_key_id => '[key]', 
  :secret_access_key => '[key]'

strio = StringIO.open('', 'w')
gz = Zlib::GzipWriter.new(strio)
AWS::S3::S3Object.store('[s3 location]', 
                        '[s3 bucket]', 
                        :access => :public_read, 
                        'Content-Encoding' => 'gzip', 
                        'Content-Type' => 'application/x-javascript', 
                        'Expires' => 'Fri, 16 Nov 2018 22:09:29 GMT') 


Somebody Explain to Me the Green Dot

You know the green dot on the upper left of all OS X windows? This one: .

I have no clue what it does. I’ve even been afraid to hit it 99% of the time because I have no idea what it’s going to do. I just clicked it for one of my Firefox windows and look what happened:

For all the good things that OS X does well, there’s still so many that it does wrong (see the ironically named “Finder”).


Yammer, Better Known as IRC for Your Company

We started using Yammer, the 2008 TC50 winner, at our company when they first launched.

Personally, I had high hopes for a work based private status updates. Open communication amongst your peers is never a bad thing. We actually had roughly the same idea back when I worked at SugarCRM. (What better pre-built network of colleagues than a CRM system that every worker already uses anyway?)

At AdMob, Yammer started out with some good status about actual work related items. I learned a bit about what everybody was working on and waited patiently for more and more people joined the network. About a week into the experiment the only active yammers were engineers. However, more disheartening was the fact that the core concept of Yammer (What are you working on?) completely went out the window. Soon it was a full blown chatroom.

What went wrong? It’s the stickiness of the app, more specifically the lack of stickiness. The number of active yammerers went down dramatically after ‘launch’ either due to lack of content or people simply forgetting about it.

I’m not sure how to fix that, perhaps it’s a problem that doesn’t need to be fixed. We’ve mostly resorted back to email.


I Think I Broke Google

The url for the above image is actually http://www.google.com/search?hl=en&client=firefox-a&rls=org.mozilla:en-US:official&hs=3AX&q=computers&start=360&sa=N. It’s supposed to be the 36th page of the query “computers”. You can test it yourself and if you happen to hit the same shard/bug as me, you can see the oddity too. (Keep refreshing if you don’t, roughly 1 in every 20 from my highly scientific test!) It definitely happens more often the deeper you go in the result set .

Interesting notes:

  • Obviously, should be displaying more than 1 result.
  • Wikipedia link some how survives what ever bug I ran into.
  • 59.6 million results and only shows results 1-4.
  • Supposed to be page 36, some how I’m back on page one.

A funny but harmless bug.


Apple (AAPL) Bargain at $90

I just shifted half my portfolio into Apple (AAPL). I think it’s a bargain at this price, why? Simple…

It was $90 pre-iPhone.

That’s right, AAPL was hovering around $80 before MacWorld 2007, where the iPhone was announced. What’s happened since then? Apple has launched 2 versions of the iPhone in 50+ countries and essentially created an entirely new business for themselves with the AppStore.

They’ve also hit a record high in PC market share (~8%) and that will only continue to grow as the iPhone’s halo effect continues.

We’ll see how much of a fool I look like in a year…


Hello Google Reader, Bye Bye Bloglines

I had it with bloglines.com and I’ve finally moved to Google Reader. Bloglines has been down a few times in the past month and I haven’t been able to log into the iPhone version of the site in a week. Also, I’m not sure when Google added the Expanded View to their interface (probably a long long time ago) but that was the one friction point for me when Reader first launched.

Along with my move, I reset my unread items to 0. There was no way I was going to catch up anyway.

It feels damn good to be at 0, now I just have to trim the fat on my RSS feeds.

Smush It – Easy Image Optimization

Just came across the ajaxian post about smushit.com which was presented at The Ajax Experience by Stoyan Stefanov and Nicole Sullivan. It’s a nifty tool that optimizes images on any web page you pass it by using doing lossless compression or stripping out image meta tags.

I had a little fun with this tool running it on Google.com and Yahoo.com. (Just ignore any png compatibility issues and caching while you read the following… πŸ™‚ )

Google.com has 1 image and SmushIt reports it can be compressed 507 bytes (5.92% savings!) by converting it to a png. Assuming a very conservative 200 million requests a month on google.com alone that’s a savings of … if my math is correct … 100 gigs of bandwidth!

Yahoo.com could save even more, 8310 bytes (12.04% savings). Using the same numbers above that’s 1,547 gigs of bandwidth in the US alone!

SquirrelFish Extreme – Quick Benchmarks

The recent javascript vm wars harken back to the video card wars of the early 2000’s where 3dfx, ATI, and NVIDIA where trading blows. Instead of we have Google, WebKit, and Mozilla trading blows by releasing a faster and faster vm at what seems like a weekly rate.

Yesterday WebKit’s latest salvo is SquirrelFish Extreme. After chuckling a bit at the name, I decided to run it through the same benchmarks as I ran Chrome through.


  • Dromaeo – 7067.20ms (this is what used to be v2.dromaeo.com
  • SunSpider – 1562.0ms
  • V8 Benchmark – 720

If you take a look at the previous results you’ll notice that the new SquirrelFish Extreme (SFX) preforms significantly better than Chrome or FF in their own benchmark, SunSpider. It comes within 363 points in the V8 Benchmark tests. Also it holds relatively steady in the dom head tests for Dromaeo.

All and all, SFX isn’t hardly ready for prime time and it appears that the WebKit team is making significant progress.

Ubigraph – Visualization Tool

I’ve been playing around with this awesome new visualization tool called Ubigraph. It is very easy to start producing something that looks stunning but it’s very hard to make it useful. I’ve taken out the labels in the following picture but it’s a mapping of objects in the AdMob system. The issue now is how to make it useful…

On a side note I highly sugggest using ruby + rubigraph if you want to start playing around with Ubigraph. It is incredibly easy.

V8, TraceMonkey, SquirrelFish, IE8 BenchMarks

After reading about the new JavaScript VM in Google Chrome (called V8) I was wondering how it would stack up against the new JS engines from Mozilla (TraceMonkey) and WebKit (SquirrelFish). I ran 3 tests across all the browsers, including IE8, and here are the results.


  • Chrome [Build 1583 –]
  • FireFox 3.1 Nightly [1.9.1b1pre/200809020331]
    w/ javascript.options.jit.* set to true except in the SunSpider tests, where jit.content was set to false because it crashes.
  • WebKit Nightly [r36012]
  • Internet Explorer 8 [IE8 v8.0.6001.18241]
    I doubt numbers are accurate, asked me once for Chrome tests if I wanted to stop the unresponsive script, about 50x for Dromaeo
  • Windows XP SP3, AMD Athlon 64 X2 3800+, 2GB RAM
  • Restart each browser after every test
  • SunSpider, V8 BenchMark, Dromaeo

Click continue for results and charts…

iPhone Web App Performance Tip – Use Inline Images

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" />
<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" />
<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:

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:');

  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.

Pandora Now Dead To Me, Simplify Media Full of Win

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.

Android SDK 0.9 Released – First Impressions

Google released the closest look at their new Android software today through SDK 0.9. I’ve been playing around the the emulator (my second time with the platform mind you) and my overall feeling is that they’ve got all their bases covered and it’ll be a solid platform. The question is will it be something special?



The first app I dove into was the browser. I was mainly interested in the CSS animations that WebKit has been implementing. I visited the test page on Surfin’ Safari and 2/3 the demos worked. The spinning div does not work. Animations ala iPhone, which I covered here, are not supported however. That’s to be understood since those were more Mobile Safari specific.


I noticed the notification system that appears if you swipe the title bar. Until Apple gets background apps working, this will be a huge competitive edge for Android. (Imagine all the chat applications that aren’t happening because you can’t background an App on the iPhone.)

Google Streetview

One feature that the iPhone Google Maps application is missing is Streetview. This is one feature where I can see Google telling Apple they are forbidden to implement thereby giving Android’s Google Maps a one up.

… and lastly

I’ll let the picture speak for itself.

iPhone CSS Animations Thoughts and Issues

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"
This div will do a fade when clicked only Safari 3.1 or on the iPhone!
This div will do a fade when clicked Safari 3.1 or on the iPhone

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.