Gotta have this picture of iPhone cupcakes here! Can’t resist.
These cupcakes by Nick Bilton and Danielle Bilton, took the 1st prize of The Cupcake Decorating Championship.

See more about the tasty cupcakes at daniellebilton.com

My big boss, Marco took to the keynote stage at CTIA at Moscone West today, to announce a few things including Blueprint update and (insert drum roll here) oneConnect iPhone application.

Yes, Yahoo’s iPhone app is finally out and available at iPhone App store now! Congrats iPhone app team! Go home and sleep!!!

Also, those who attended CTIA, hope you guys didn’t miss Roger Craig and Dana Stubblefield at Yahoo! booth.

OK, so now I am trying to clarify how to make the css animation works using class name swap.

The conclusion is that it does work! - but you need to apply the -webkit-transition to “destination” class not the “origin” as I first attempted. Thanks for Dave and Dean from Apple, who pointed it out.

Go to The Actual Example Page

HTML Markup used for these examles (from Apple’s doc):

			
<div class="box"
	style="width:100px;
	height:100px;
	background-color:blue;"
	onclick="this.className = 'boxFade'">
Tap to fade
</div>
			
		

What *Not* To Do

This worked on some older WebKit nightly builds, but not on the latest build.

The reason is the -webkit-transition properties into the newClassName definition.

			
/* *** This is a bad example *** */

div.box { /* this applies only to the 'before' transition state */
-webkit-transition-property: opacity;
-webkit-transition-duration: 2s;
}
div.boxFade {
opacity:0;
}
			
		

Click the box. On clicking event, the box’s opacity turns 0 immediately because the transition properties are not set for the “after” state.

What To Do - 1

This is the actual example snippet from Apple’s documentation, Safari CSS Animation Guide for iPhone OS page 13-14.
The reason this example works is that the -webkit-transition properties are defined in a generic <div> tag, not in a specified class that applied only for “before” state.

			
div { /* this applies for both 'before' and 'after' states */
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 2s;
}
div.fadeAway {
	opacity:0;
}
			
		

What To Do - 2

Move all the -webkit-transition properties into the newClassName definition.

			
div.fadeAway { /* give the transition rules to "after" state */
	opacity:0;
	-webkit-transition-property: opacity;
	-webkit-transition-duration: 2s;
}
			
		

Now really a JavaScript-free. Yay.

Regarding to the bug on CSS animation I mentioned on last blog entry, I got a reply from an Apple developer (Quick!)

The issue:
CSS animation doesn’t work with onclick=”this.className=’newClassName’” anymore on the latest WebKit nightly build

I filed the bug on WebKit Bugzilla, and got the answer already. See the ticket.

Basically, this bug was closed (invalid) because they have decided to change the animation implementaion, from “source transition” model to “destination
transition” model.
(Read the whole explanation)

Stay tuned for the new documentation from WebKit or Apple!

UPDATE / CORRECTION (July 23, 08) - please see “More Update on CSS Animation”

According to WebKit.org, the WebKit supports the simplest kind of animation called a transition.

Transitions are specified using the following properties:

• transition-property - What property should animate, e.g., opacity.
• transition-duration - How long the transition should last.
• transition-timing-function - The timing function for the transition (e.g., linear vs. ease-in vs. a custom cubic bezier function).
• transition - A shorthand for all three properties.

Last week, I’ve noticed that Apple had published some new documentations at Developer Connection, including
Safari CSS Animation Guide for iPhone OS and Safari CSS Transforms Guide for iPhone OS (Go to download page).
Since I read the WebKit.org blog entry last year, I was interested in the CSS animation so I finally decided to give it try.

I spent some time writing several CSS tests, ran on several different WebKit browsers. and my conclusion is that:

1. the animation and transforms are pretty buggy on current iPhone Safari.
2. the current WebKit nightly (as of July 19) has some bugs so animation doesn’t work when swapping class names

with oncick event handler attributes like, using this.className='newClassName'.

The className swap was working perfectly, until I installed the newer build, r35231.
I will file the bug to Webit.org soon.

On latest build, build r35075 - r35231 (the newest one I tested),
changing the values of style object properties, instead, as
onclick="this.style.opacity='0'"

I wanted to create the animation entirely absent of JavaScript, but now I need to use a function to handle multiple style properties…

UPDATE / CORRECTION (July 23, 08) - please see “More Update on CSS Animation”

I still haven’t gotten a chance to try iPhone 3G yet, and I tested only on my old iPhone with the latest upgrade.
Are there any differences in between two Safaris? I doubt it.

Anyway, Open the test page I wrote in a new window!

Animate Opacity

Opacity Transition Test

Expected result: When a user mouse-overs the box, an object appears smoothly (opacity=.5) in 2 sec.
On mouse-click, the image fades in completely (opacity=1).

	
.box1 img{
	opacity: 0;
	-webkit-transition: opacity 2s ease-out;   /* shorthand for all three properties */
}
.box1 img:hover {
	opacity: .8;
}
	

	
<div class="box1">
	<img src="images/apple.png"/>
</div>
	

Animate Position - Move to right

Position Transition Test

Expected result: the image moves to the right as fading out.

	
.box2{
	opacity: 1;
  	-webkit-transition-property: opacity, left;
	-webkit-transition-duration: 1s, 1.5s;
	transition-timing-function: ease-in;
}
	

	
<div class="box2" onclick="this.style.opacity='0'; this.style.position='relative'; this.style.left='500px'">
	<img src="images/apple.png"/>
</div>
	

Animate Letters - Letter-Spacing

Letter-Spacing Test

Expected result: When the text is clicked, each letter spaces out as fading away.

It is pretty cumbersome to handle multiple style properties with onclick, so I added a JavaScript function to take care:

	
function switchStyles(style,obj) {
	for(var prop in obj)
		style[prop] = obj[prop];
}
	

UPDATE / CORRECTION (July 23, 08) - You don’t need this hassle with JS. Please see “More Update on CSS Animation”

	
.box3{
	color: green;
	opacity: 1;
  	-webkit-transition-property: opacity, letter-spacing;
	-webkit-transition-duration: 1.5s, 2s;
	transition-timing-function: ease-out, linear;
}
	

	
<div class="box3"
     onclick="switchStyles(this.style,{
	    color : 'lime',
	    opacity : '0',
	    letterSpacing : '3em'
});">
	some text to be clicked here.
</div>
	

Transform - Click to spin the image and fade away

Position Transition Test

Expected result: the image rotates twice (360 deg x 2) around the Z axis, as fading.

	
.box4{
  	-webkit-transition-property: -webkit-transform, opacity;
	-webkit-transition-duration: 2s;
	transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1.0); /* equivalent to ease-in-out */
}
	

	
<div class="box4"
	 onclick="switchStyles(this.style,{
	    webkitTransform: 'rotate(720deg) translate(1000px,0px)',
		opacity: '0'
});">
	<img src="images/apple.png"/>
</div>
	

Also, I tried CSS gradients. These still don’t seem to work on iPhone but worked on all recent WebKit nightly.

CSS Gradients - Linear and Radial

Gradients Test

Expected results:
Linear - Green to white top-to-bottom linear gradient
Radial - White to pink center-to-outer radial gradient
Actual results:
Nicely working on WbKit nightly builds. Failed miserably on both Mac desktop and iPhone Safari 3.1.

Screenshot of the results on WebKit nightly


The syntax is as follows:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)

	
#gradientLinear{
	float: left;
	width: 180px;
	height: 180px;
	border: 1px solid #11276c;
	background:
		-webkit-gradient(linear, left top, left bottom, from(rgba(158,192,0,.85)), color-stop(1, #fff));
}

#gradientRadial{
	float: left;
	margin-left: .5em;
	width: 180px;
	height: 180px;
	border: 1px solid #11276c;
	background:
		-webkit-gradient(radial, center center, 3, 80 80, 100, from(rgb(255,255,255)), to(rgba(228,56,132,.85)), color-stop(0%,#fff));
}
	

Resources:

1. Surfin’ Safari - CSS Animation
2. Surfin’ Safari - Introducing CSS Gradients
3. Safari CSS Animation Guide for iPhone OS
4. Safari CSS Transform Guide for iPhone OS

Well, this is because Yahoo! Japan is owned by Softbank. This would never happen for the US market :-p

I wasn’t involved any of this Japanese version of Y! Mobile site, but one of my colleagues in Sunnyvale, who should be busy preparing for his wedding now, has been crazy busy for this. Congrats on the launch!

More info: 誕生！ iPhone にピッタリの Yahoo! Japan

On your iPhone, go to http://ipn.yahoo.co.jp

By the way, I haven’t gotten a new iPhone yet. I thought my new boss would give it to me but it didn’t happen. Thank you very much. 

The cult leader Steve Jobs unveiled new iPhone 3G at WWDC.

The main highlights of the new Jesus phone are:

• Faster 3G (over 2x faster than EDGE)
• A built-in GPS
• Discounted price - $199 for 8GB, $299 for 16GB
• Thinner design
• comes with black and white (not red as shown in the “leaked photo”…)
• native apps, incl. Mobile Me email app.

OK, I’ve got my (RED) iPod, and now Apple is going ship it for the next-gen iPhone?

Although not sure about the credibility, according to the leaked photos posted on MobileCrunch, the iPhone 2 is 22% thinner than the current iPhone and comes with a front-facing camera for video-chat.

The color variations include black and red. Do I need to wait for iPhone 3 for pink??? (besides ordering a custom-made from ColorWare).

Last time I made CuteOverload into Apple iPhone WebApp, “iCuteOverload“, so this time I made I Can Has Cheesburger? into Yahoo!Go mobile widget.

Try it on Yahoo! Go client, or open up an web browser in your mobile device and go to http://beta.m.yahoo.com, login, go to “widget” by clicking the icon looks like a tool on top and add “I Can Has Cheezburger?”. Works on iPhone at the URL too!

Today, Opera launched Widget SDK, enabling web developers to deploy web apps on desktop, TV and mobile devices. Unlike Apple’s iPhone $99 SDK, it is free of charge.

Watch the step-by-step instruction video:

More Mobile App/Widget SDKs:

• Apple: iPhone SDK
• Google: Android SDK
• Yahoo!: Blueprint SDK (this is what I am working for)
• Nokia: Widset
• Openwave: Mobile Widget
• Plasmo: Widget