QuirksMode on Mobile!

One of the recent awesome news for mobile web developer is that “the browser guy” Peter-Paul Koch, known as PPK of Quirksmode.org has jumped onto mobile world, backed up by Vodafone. (See his blog).

I have been working for mobile phones since I joined Nokia in 2005, then Yahoo! later, I have been frustrated with luck of information on mobile browsers. Although Nokia was pioneering sharing information on S60 WebKit browsers, still there was not enough so I had to run many tests by myself without much help from anybody else, and recorded some quirks found a little bit at the time. So PPK’s work on compatibility test table is the one of the best resource I can have!

Anyway, PPK made his visit to Yahoo! last week and the video of his presentation is now on YUI Theater!

Also, his slides are availabe at SlideShare:

• Yahoo presentation: JavaScript Events
• Google presentation: The Open Web goes mobile
  

Developing Applications for Palm webOS

The Developing Applications for webOS webcast is now available from O’Reilly.
Mitch Allen, Palm’s Software CTO, gives a preview into application development with the Mojo SDK, explaining the structure of webOS, and demonstrates how to build a simple app with using TextMate and Safari on Mac.

According to the Webcast, the Mojo framework is based on Prototype 1.6.3 is bundled with webOS. (Pssst. the rumor said it also uses Dojo and mootools! sounds pretty heavy. If it is true, this should be rather called Moojo). And apps can be written with simple html, css and javaScript just like any web development, also with HTML5 local db strage and Mojo extension for widget, with a special x-mojo-element attribute.

The SDK will come with Mojo framework and doc, an emulator with DOM inspector and JS debugger (I guess we can just use Webkit), and tool bundles including project generator and package tools.

Also, the first chapter of the book, Palm webOS: Developing Applications in JavaScript Using the Palm Mojo Framework” by O’Reilly is available at http://developer.palm.com. You can read it either html or download pdf.

Links:

• “Developing Applications for webOS” – O’Reilly Webcast
• Palm Developer Network by Palm
• Palm Developer Network Blog by Palm
• Prototype JavaScript Framework
• “Palm webOS Rough Cuts” Chapter 1 free download (pdf)
• Buy “Palm webOS Rough Cuts” by O’Reilly

Using Keyframes – WebKit CSS Animation Examples

Now WebKit supports explicit CSS animations! After seeing the new animation examples posted on WebKit.org, I needed to test keyframes by myself.
So I have created a dumb-downed version of the fallen leaves seen on webkit.org blog, called “Let it Snow”.

Unlike the fallen leaves example, I stick strictly with CSS only (means zero JavaScript). Also I tested on Webkit nightly and an iPhone (OS 2.0) Safari. On my iPhone (Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5G77 Safari/525.20), the animation is slow and some feature is ingored.

Well, let’s see the “Let It Snow” animation in action!

How to use Keyframes?

Keyframes are specified with the CSS “At-Rule” by using the keyword,@-webkit-keyframes, followed by an identifier (= animation-name)

	
@-webkit-keyframes animation-name {
 from {
   style definition ["Before"-state]
 }
 to {
   style definition ["After"-state]
 }
}
	

A keyframe defines the styles applied within the animation. To specify multiple frames, use “%” instead of “from” and “to” keywords.
Here’s an actual example I used for “Let it Snow”.

	
@-webkit-keyframes fade {
  0%   { opacity: 0; }
  10%  { opacity: 0.8; }
  100% { opacity: 0; }
}
	

This style is applie to create each snow flake appearance. A snowflake blurry appears (increase opacity) when 10% of the time elapsed (The total time is defined later. I’ll explain it next).
And at the end, the snowflake disappears (opacity back to zero).

Once the animation timeframe is defined, apply it using -webkit-animation-name and related properties.
I set total animation duration as 5 seconds, and the animatin goes forever (= infinite times. The default is 1).
See the simplified example below.

	
#snow div {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 5s;
  -webkit-animation-iteration-count: infinite;
}
	

	
<div id="snow" class="snow">
  <div>&#10053;</div> /* an entity for ❅ */
</div>
	

Using Transform

Let’s rotate and move around snowflakes by using -webkit-transform.
rotate, of course, rotate the element, and translate specifies a 2D translation by the vector [tx, ty]. (For more explanations, please see CSS transform spec page).
I used percent, 0 and 100% here, but of course you can use “from” and “to”.
Also note that transform doesn’t seem to work on current iPhone Safari yet.

	
@-webkit-keyframes spin{
  0%   { -webkit-transform: rotate(-180deg) translate(0px, 0px);}
  100% { -webkit-transform: rotate(180deg) translate(10px, 75px);}
}
	

You can just add the amination-name to the #snow div selector, separating with comma.

	
#snow div {
  -webkit-animation-name: fade, spin;
  ...
}
	

More

For the “Let it snow” example, I also include the cheesy “accumulate” keyframe to make snow accumulate on ground. Kinda ugly though.
Moreover, I gave the -webkit-animation-duration to individual snowflake so all flakes don’t fall all together!

	
.snowflake {
  color: #fff;
  font-size: 2em;
  position: absolute; (Note: The parent container is set relative positioned!)
}
.snowflake.f1 {
  left: 40px;
  -webkit-animation-duration: 5s;
}
.snowflake.f2 {
  font-size: 1.8em;
  left: 120px;
  -webkit-animation-duration: 7s;
}
...
	

	
<div id="snow" class="snow">
  <div class="snowflake f1">&#10053;</div> /* an entity for ❅ */
  <div class="snowflake f2">&#10052;</div> /* an entity for ❄ */
  ... (add two more snowflake-div in the actual sample)
</div>
	

To view the entire markup and CSS, just view source of the sample file!

Resources:

• Surfin’ Safari – CSS Animation
• Surfin’ Safari – CSS Animation 2
• CSS Effects proposed specifications – Animation
• CSS Effects proposed specifications – Transforms
• Safari Supported CSS Properties – “Visual Effects”
• Apple Web Apps Reference Library “CardFlip” (Registration required)

Tried Fennec Milestone Release for Windows Mobile

Last week, Mozilla has released the early version of Firefox Mobile, “Fennec” for Windows Mobile (pre-alpha).
Just like the earlier release was only for VGA Nokia devices like N800, this WinMo-release targets only one device, HTC Touch Pro.

Unfortunately I could not borrow an actual HTC “Fuze” (AT&T version of Touch Pro), so I tested via DeviceAnywhere service.

Just typed in the Mozilla’s ftp address directly on PIE (I have no reasons why I didn’t use the default Opera Mobile), downloading and installing was fine (Pic.1).
I got a pretty Fennec icon on screen. Nice. But I hope Mozilla will make it less jaggy for the next release. (Pic.2)
Clicked the icon and wait, wait, wait… pretty slow. When I almost lost my patience, the browser finally launched… its title bar. Let’s wait for more. -nothing happened.
Quit and relaunched. – the same result.
Re-installed. – the same result. (Pic.3)

Pic.1 – Installing Fennec	Pic.2 – Fennec icon
Pic.3 – WTF

Conclusion: Somebody please help me. I can’t make it work!!!

Links:

• Download URL: http://ftp.mozilla.org/pub/mozilla.org/mobile/fennec-0.11.en-US.wince-arm.cab
• Mozilla FTP Index for mobile
• Brad’s Blog – Fennec Milestone Release for Windows Mobile

WebKit Comparison on CSS3

Bitstream has launched a new mobile browser called Bolt, which is a J2ME browser and use WebKit as a rendering engine.

Instead of writing a review on this new WebKit browser, I decided to just do some quick CSS3 test on variety of WebKit browsers!
If you rather read the review, I recommend WAP Review. There’s a very detailed great article on Bolt there.

WebKit browsers I used

1. WebKit Nightly for Mac OS X (as a Control)
   Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_4; en-us) AppleWebKit/528.11+ (KHTML, like Gecko) Version/4.0dp1 Safari/526.11.2
2. iPhone Safari
   Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_2 like Mac OS X; en-us) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5G77 Safari/525.20
3. Chrome by Google
   Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/525.19 (KHTML, like Gecko) Chrome/1.0.154.43 Safari/525.19
4. HTC Dream Android
   Mozilla/5.0 (Linux; U; Android 1.0; en-us; dream) AppleWebKit/525.10+ (KHTML, like Gecko) Version/3.0.4 Mobile Safari/523.12.2
5. Nokia N95 8GB
   Mozilla/5.0 (SymbianOS/9.2 U; Series60/3.1 NokiaN95_8GB/10.0.021; Profile/MIDP-2.0 Configuration/CLDC-1.1 ) AppleWebKit/413 (KHTML, like Gecko) Safari/413
6. Bolt 0.74 on Nokia N95 8GB
   Mozilla/5.0 (X11; 78; CentOS; US-en) AppleWebKit/527+ (KHTML, like Gecko) Bolt/0.741 Version/3.0 Safari/523.15

CSS3 Styling I tested

.opracity {opacity: .5;}
.textShadow {text-shadow: #777 2px 2px 2px;}
.textShadows2 {text-shadow: rgba(0,0,255, .7) 3px 3px 2px, rgba(255,0,0, .7) -3px -3px 2px;
.ellipsis{text-overflow: ellipsis; width: 200px; overflow: hidden;}
.borderRadius {background-color: #666; color: #fff; width: 200px; padding: 10px; -webkit-border-radius: 10px;}
.boxShodow{-webkit-box-shadow: #000 3px 2px 6px; width: 200px; padding:5px;}
.strokeAndFill{-webkit-text-stroke: 1px green; -webkit-text-fill-color: #ccc; font-size: 2em; }
.borderImg{-webkit-border-image: url(button.gif) 0 13 0 13 stretch stretch; border-width: 0px 13px; padding: 5px 0 7px;}

Results

Summary

* Basic feature is spported, but not multiple shodows.
** Not degraded gracefully. Contents become unreadable so should be avoided.

Additional Notes

Besides the CSS3 test, it is noticeable that Bolt does not honer css font size, weight and header with H tag. This is happening to another J2ME browser, Opera Mini 4 (not tested here since Opera Mini is not WebKit-based). Additionally, like Opera Mini, Bolt uses proxy for rendering and compression. Data is passed through proxy before sending to device.

Palm Got its Mojo

Happy new year, and happy new government, America!
I am still recovering from flu I got while visiting freezing New York City, and finally feel like blogging again.

The first topic I write in this year, besides Whitehouse 2.0 and Steve Jobs’ health is a whole new Palm.

I know it is not a new news anymore, but I was shocked when they announced Palm Pre at CES (although I have not been there since nobody sends some lowly engineers to Vegas). Honestly, after Blackberry then iPhone, I though there’s no way Palm can win the market again, so it is shocking to see their stock price rising after the announcement.

As a web developer, great news for me is that Palm will switch their web browser engine to Webkit. Since 200 when Palm acquired Handspring, their standard web browser was Blazer, running on Palm OS.
Now Palm OS has become legacy and, will have a completely new OS, called “WebOS”. which is based on Linux.

Palm webOS applications are easy to write using Mojo – a new application framework based on the HTML5, CSS, and JavaScript
Yesh! HTML5! – means you can even use offline database!
Also, reportedly Adobe is working on a Flash plug-in for the webOS browser.

Interestingly, Ajaxian has reported that Dojo is used as a base for Mojo.
The Mojo Framework source code can be found on Palm’s site.

The official Palm Mojo SDK is not available yet, but stay tuned by following the developer’s blog.

Additionally, unlike iPhone, which uses Samsung’s S3C6400 processor, Pre even has wicked fast processor, TI OMAP 3440, which embeds Imagination Technologies’ POWERVR SGX graphics core, suitable for advanced multimedia.

Links:

• Palm Pre
• Palm Developer’s Network (oooh, all the legacy blazer stuff were gone!)
• Palm Developer’s Network Blog
• High-Performance: OMAP3440 by Texas Instruments
• Axaian on Mojo
• The Mojo Framework source code

Meet Fennec, a little brother of Firefox

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!

Another WebKit browser – Chrome by Google

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 (Correction: box shadow works with webkit extension, as -webkit-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.)

Hug a developer

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 announced API for LBS on Mobile

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.