Here comes Fennec!!! (Release note)

It’s been a whole year since Firefox first announced that they were developing for their mobile version, after the not-so-successful Minimo for WinMo, and they finally released this public alpha for Nokia N810, whose default built-in browser is already Mozilla-based MicroB.

Unfortunately neither I or my beloved DeviceAnywhere has N810 device, so I tried the one for Mac OS.
Because this is for N810 WVGA screen, so the browser window is set 800×480 pixel, and support touch screen (so you need flick the screen to navigate). I am wondering how comfortable with the UI on other smaller screen devices, or how non-touch screen UI would look like. (Or are they even planning to support one?)

Anyway, I was playing around and tested some pages quickly:


(left) Startup screen, and (right) Yahoo! search.



(L) My twitter home page. Editting was a bit pain because I don’t see a cursor on this emulator. (R) Run Acid3 test. 90/100 is good (better than iPhone Safari but doesn’t beat the latest Webkit which gets perfect score).



(L) iCuteOverload. Looks like it supports iUI nicely. I need to take out the “-webkit” prefix to see if border-image works on Fennec. (R) Some tests on event - not seems to support (both results “true” on iPhone Safari)


Anyway, overall I think this is pretty sweet. I am excite to see the battle among Webkit - Apple vs. Google, and vs. Mozilla.Also, if you are lucky enough own N810, try install it on your device!

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

Yay! As a part of “Start Wearing Purple” campaign, Simone Legno has designed the purple Sandy T-shirt for Yahoo! (Yep. Just as most of other Y! tees, this is made by sweat-shop-free American apparel.)

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.

So Google has just released Chrome browser, which Mac user still have to wait for its Mac release. I tried to install on VMWare to see how it is like.

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

I hear ya. I feel the pain. Really.

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

Google launched the Gears Geolocation API for mobile on last week on their official Goolge code blog, and Mobile Blog, with a screenshot of a sample mobile site, Rummble and video demo of lastminute.com of UK.

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.

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”