Eric Nakagawa and Kari Unebasami, co-founders of I Can Has Cheezburger were in Bay Area from Hawaii to meet with Lolcat fans this week, for HappyCat Happy Hour and LOLZoo at San Francisco Zoo, also made visit to Yahoo! Sunnyvale campus for LOL Talk too.

I have fixed some bugs on my ICHC Yahoo mobile widget, attended the talk, got an autographed ICHC book, participated LOLZoo at San Francisco Zoo, and now I am “capshun” ing for the animal pics.

Yes, I am officially a crazy cat lady.

See the LOLZoo pics at Flickr!

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

As you can guess by my style, I am actually a fan of the designer and both my Mac and iPhone have Tokidoki wallpapers. (So some guys working for this campaign had tipped off to me about this T-shirt before the launch.)

Also in this campaign movie, he expresses his purple passion!

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.

It is a WebKit-based with a brand-new V8 JavaScript engine, which supposed to be much faster than existing JavaScript interpreters. Also, Chrome currently supports almost as much CSS3 that Safari 3 supports.

Actually I haven’t really tested yet (cuz my main machine is a Mac of course, and my Vaio is dead now), but as long as I quickly took a look at the test page I made, some are not working quite right - e.g. text-shadow and box-shadow. Animation and Transform CSS work as expected. (Just like Safari 3.2)

So how about mobile? Current Android browser already uses WebKit engine, so Chrome Mobile will be the future browser for Android?

Yes. According to Sergey Brin, Chrome is going to be available for the platform later.

(This is not a real Android UI. I just photoshopped.)

In my case, I was working crazy for CES (deadline = Jan. 7, 08) since around Thanksgiving.
I had no single day off from the time project started. No Thanksgiving, Christmas or New year.
On Dec. 27, I was told to start over the entire code because the architecture needed to be completely re-written. I lost my sanity.
(Even after CES, I was still working on weekends for more trade shows… I didn’t even had a chance to visit any of the fun shows. What kind of a sweat shop I am working at?)

On mobile devices with Gears installed, Javascript functions grab the cell-ID of nearby cell towers or GPS (if either is available) to improve the postion fix.

The two methods:
getCurrentPosition() makes a single, one-off attempt to get a position fix.
watchPosition() watches the user’s position over time, and updates the position changes.

Also,
lastPosition get an approximate position fix

The bad news is that API is available on Internet Explorer, Firefox and IE Mobile (selected devices only - incl. Samsung Blackjack II, HTC Touch Dual, TyTN, Palm Treo750 etc.) and will be available on Android. I was going to try it with S60, until I read the line on the announcement.

The good news is that they are currently implementing the editor’s draft of the W3C Geolocation specification with Microsoft and Mozilla guys.

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.

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”