Classification of Mobile Browsers

Today, I am not going to post some CSS3 tricks on Webkit, or stuff like that. Instead, I post a list mobile browsers, since I am often asked about mobile / WAP browsers by engineers, product managers, and mobile-curious or mobile-newbie people.

I gathered 30+ major browsers I have worked with (plus a few I have never even seen), and categorize by the markup that browsers can render – WML, CHTML, XHTML-MP, and HTML4.

So, here you go. If you find some mistakes, let me know!

I have categorized only with the markup type, and did not sub-categorize these browsers. However, if I would, I may want to grade XHTML-MP devices with page memory size (=”deck size”, yes I said deck size), and screen resolution for UI design purpose.

To grade full-HTML browsers, you need to spend massive time and effort on testing rendering capability with CSS, and Javascript DOM compatibility, events, etc. Actually, PPK has done excellent work on mobile browser testing, so you can simply visit Quirksmode.org!

Webkit CSS 3D + Local DB Demo

Ever since I heard of Snow Loepard’s hardware-accelerated CSS, I wanted try some cool CSS animation for Safari 4.

So after installing Snow Leopard, I spent about a day and half to try creating my first 3D animation with Flickr API.
Honestly, I wasn’t sure where to get started to make some cool 3D effect, so what I did was I tried to reproduce the one on webkit.org example and modify a lot by trial and error approach.
Also, I have been freqently asked about how I did with “My Favorites” feature on my Palm Pre app (which is also a WebKit-based), so I throw the HTML5′s local storage demo with this 3D demo.

So here, you can try my CSS 3D and Local DB Demo!!!
Be sure to view this demo on Safari 4, iPhone Safari, or WebKit Nightly! This doesn;t seem to work on other Webkit-based browsers such as Chrome and Palm.

I am not going to write a whole tutorial how to replicate this animation but I try to explain some examples.

Spin a Wheel!

Look at one of the flicke photo wheel on my demo. This is a combination of a few different animation.
Let’s focus on the small wheel inside. This is the snippet of HTML of the wheel:

<div id="gallery">
  <div id="pic01"><img src="..."/></div>
  <div id="pic02"><img src="..."/></div>
  ... (10 more imgs)
</div>	

OK, for now, let’s ignore how each photo is rendered to form a loop, and just focus on the animation of one div, #gallery (= a wheel). A band of photos is ratating clockwise around Y-axis.
This means the animation starts as -webkit-transform: rotateY(0); and goes around an circle for a whole 360 degree. -webkit-transform: rotateY(-360deg);.
Use positive if you want to rotate in opposite direction.
I set the whole circle completion span as 60 seconds in linier motion and the animation goes infinite.

This diagram from Apple’s Safari Reference Library explains coordinates.

So the css for this movement is defined as:

#gallery {
  -webkit-transform-style: preserve-3d;
  -webkit-animation: spinY 60s linear infinite;
}

@-webkit-keyframes spinY {
  from { -webkit-transform: rotateY(0);}
  to   { -webkit-transform: rotateY(-360deg);}
}

Use 3D style, -webkit-transform-style: preserve-3d;to give 3D illusion. I set the initial perspective in its parent div as -webkit-perspective: 380;.
It gives you an illusion of the depth. You can make the value lower to make it look more up-close to you.
The unit of perspective should be “px”, but it looks like you’d better remove it for iPhone.

To figure out how to render each photo in loop, also other animations, please look at the source code of my demo.

Also, I will write about how to use HTML 5′s local storage sometimes later!

References

• 3D Transforms by Webkit.org
• CSS Transforms (2D) by Webkit.org
• CSS Animation by Webkit.org
• CSS 3D Transforms Module Level 3 W3C Working Draft
• Safari Reference Library -Transforms by Apple

PREtty Cute Suite -Another Cute app for Pre from me!

Can’t have enough cute!
Instead of upgrading my previous app, iCuteOverload for Palm, I have created this power-up version of cute app called, PREtty Cute Suite.

This app is more offensively and obnoxiously cute with more cute-related rss feed and flickr pics.
Included feeds are:

1. Cute Overload
2. I Can Has Cheezburger
3. Cute Obssesion
4. Epicute
5. Super Cute Kawaii
6. Cupcakes Take Tha Cake

Also, a bunch of cute picture streams from Flickr.


This app allows you to save the pix/feeds you like as your favorites, also share the links via email.

Currently available as a “Homebew” app on PreCentral.net for free.
I have no plan to submit this to the Palm official app store in this moment, at least for this version 0.9.

My First WebOS App – iCuteOverload for Palm v1.0

As a front-end web developer, also a mobile-web developer, the Palm’s new WebOS SDK for Pre sounds very attractive, and I could not wait to create some applications although I am still a iPhone user and haven’t been convinced to switch a service provider.

Then I felt like, I already got this web app, iCuteoverload for iPhone but yeah why not for Pre? So I decide to re-create the same app from scratch. Sure, the existing app is a web app that wrote with JavaScript framework iUI and PHP, does run fine on Pre’s web browser since Pre is based on Webkit browser. However, I wanted to make this app a standalone client with Mojo framework so I needed to code from scratch.

Anyway, here it is, iCO for Palm is now available at PreCentral. The official store is not yet open, so the installing the app may require a bit of geeky skills, but if you happen to be a Pre user and would like to try, follow this tutorial on how to install homebrew apps on Pre for Mac users (And this is for Windows users instruction).

By the way, I keep this app name begins with i, because I already have named so for iPhone and wanted to keep it for consistency. However, in Pre community, this seems to be a pretty bad thing to do. People see me as a clueless Apple fan

iPhone App – MuniApp for San Francisco Muni riders!

Ta-da, finally there’s an app for that! – I mean an iPhone native app that I involved is available on App Store!

This app is called, MuniApp, and this gives you access to San Francisco’s MUNI transit system on the go with real time predictions for buses, metro and cable cars.

I have worked on some UI and icons, while my friend Alberto has coded all the Obj.C. We are both SF residents and rely on MUNI pretty frequently and we do use this app on daily basis. Honestly, this is really simple and useful app

The official website for MuniApp is at www.obapp.com/muniapp

To directly go to App Store on iTunes, go to this link!

Finally, the official Mojo SDK for all!

After I was rejected for the early access then struggled with the “leaked” version of Palm Mojo SDK without a documentation, today Palm finally made the official SDK available for all!!!

I haven’t playing around with it long enough to blog much about it, so I just post my “cheat sheet” that I keep on Stickies.

Emulator Key for Mac

• Esc – acts as “Back”
• Left / Right arrows – Switch between applications

Emulator Navigation

“Host” = Right Ctrl in Virtual Box

• Host + F – Toggle full screen view on/off
• Host + N – Display session info
• Host + S – Take a snapshot (will be placed the Snapshot tab of VirtualBox)
• Host + Q – Close the emulator

Commands

Create a package (.ipk file)

$ cd palm-package myapp

Install the .ipk file on emulator

$ palm-install com.yourdomain.app.myapp_1.0.0_all.ipk

Launch the app on emulator

$ palm-launch com.yourdomain.app.myapp

Launch the inspector with the app

$ palm-launch -i com.yourdomain.app.myapp

Then, open Palm Inspector app (comes with SDK) from your Application by double-clicking the icon. This should open the Safari inspector.

Find Your Tweeting Neighbor on iPhone with GeoLocation

iPhone OS 3.0 is now available, and developers can take advantage of the newly introduced geolocation feature in Safari browser.

To try it out quickly, I used Twitter Search API again to create a tiny test app called, NeighborTweet, which enable you to find out who are tweeting in your neighborhood. Basically, what it does is that obtain your location, and pass the latitude and longitude data to Twitter search and display the result tweets.

Try it out on your iPhone with:
Short URL http://bit.ly/K0ZaE
or
This QR Code with scanning app like BeeTagg.

If you are interested in learning more on Twitter search API and geocode, please read Twitter Wiki.

OK, now here’s the code.
To find out your location with Geolocation class is simple – you just call getCurrentPosition() method. This initiates an asynchronous request to detect the user’s position.

navigator.geolocation.getCurrentPosition(someFunction)

Get latitude and longitude, by using coords instance:

latitude = position.coords.latitude;
longitude = position.coords.longitude;

Here’s an actual code I used to create the sample app:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(function(position) {
    callback(position.coords.latitude, position.coords.longitude);
  });
} else {
  alert("Geolocation services are not supported by your browser.");
} 

function callback(lat,lon){
  // twitter search json-p callback
  var geocode = "&geocode=" + lat + "%2C" + lon + "%2C1mi";
  var fullUrl = url + geocode;
  ...
}
var url = "http://search.twitter.com/search.json?callback=getTweets";

function getTweets (json) {
  // display json data
  ...
}

References

Geolocation References:

• Safari Reference Library – Getting Geographic Locations – Apple Developer Connection
• Using geolocation – Mozilla Developer Center
• Geolocation API Specification – W3C Working Draft

More References:

• Twitter Search API Wiki
• Remote JSON – JSONP

TweetTrendDunno – Played with APIs

I had a plenty of time to stay home and play with code right now so I mashed Twitter trend API, mixed with some BOSS news and image search stuff I used before, also Microsoft’s new Bing search results to create some silly and handy web app called TweetTrendDunno.

Basically, this grabs Twitter “trending topic” terms, and as a user click on each term you want to know about, it displays news articles, images, and Bing results (usually summary from Wikipedia helps you to figure out what the term means in general).

If you are Twitter user and ever wonder what people are talking about, give TweetTrendDunno a try!

Matrix Animation with WebKit CSS3

I tweaked the WebKit CSS3 Animation example I made last time to create this “Matrix” animation for fun.

This is the screen capture of the animation on Safari 4.

You can try
the actual HTML page and see it working on current WebKit Nightly build or Safari 4.

To display the Katakana characters, I used @font-face rule to embed a Katakana dingbat-like font, rather than using an actual Japanese input.
Although I wanted display the kanakana vertically with using writing-mode: tb-rl, which I believe has been proposed for CSS2, this is not supported on Webkit so I had to use -webkit-transform to rotate each div to 90 degree to display vertically.
This way, each letter faces 90 deg angle too, but oh well, this Japanese letters are random, used only for visual purpose and don’t mean anything so I guess this doesn’t matter for now.

Let’s take a look at some of the CSS3 code, I am showing only important parts so if you would like to view the entire code, just open up the htmlpage and use Webkit’s inspector!

Embed A Katakana Font

@font-face {
  font-family: Katakana;
  src: url('MoonBeams-katakana_.TTF');
}

#matrix{
  font-family: Katakana; /* use the embedded font */
  position: absolute;
  ... (more styles here) ...
}

@font-face rule is not supported by older Safari including iPhone.
On supported browsers, you should be able to use either TrueType (.ttf) or OpenType (.otf).

Define Animations

@-webkit-keyframes fade{
    0%   {opacity: 1;}
    100% {opacity: 0;}
}
@-webkit-keyframes fall{
   	from {top: -250px;}
	to 	{top: 300px;}
}

I used both % and from/to keywords. But with %, you can define in-between state.

Rotate the Katakana Strings

#matrix div{
  position: absolute;
  top: 0;
  -webkit-transform-origin: 0%;
  -webkit-transform: rotate(90deg);
  ...

By setting -webkit-transform-origin as 0%, the div block rotates 90 degrees at the far left.
If you don’t set this, by default, it rotates at center axis.

…and Use the Defined Animations

#matrix div{
  ...
  -webkit-animation-name: fall, fade;
  -webkit-animation-iteration-count: infinite; /* use 0 to infinite */
  -webkit-animation-direction: normal; /* default is normal. use 'alternate' to reverse direction */
  -webkit-animation-timing-function: ease-out;
}

For more detailed info on -webkit-animation properties, read Apple’s Developer Connection

Again, this example is currently working only on the latest WebKit and Safari 4 (not iPhone).
Google Chrome does not support @font-face or animation. (-webkit-transform:rotate... works), and I assume it does not work on Android either.
(And I have no intention to try on other WebKit-base browsers like S60).

CSS3 Gradients: No Image Aqua Button

Note (Jan 28, 2010): I added a Firefox support to this tutorial. Please visit the “revisited” article too!

Boooo, Yahoo! just had the 3rd round of layoff within a little over a year period, and this time I was axed with several more fellow excellent engineers of Mobile team. So now I have free time to spend on more coding!
My job function needed full focus on products and it prevented me to have experiments and testing as I wanted to, so I always spent my own time to do. Now I can do whatever I want to while I am still on payroll. Yes! I am still paid my regular salary for a while, thanks for the new regulation

OK, enough blah about the stupid corporate stuff.
Anyway, I played around with WebKit CSS3 gradient and created a useless but fun stuff – an Aqua button with no images!
Back in the time when Mac OS X was first announced, there’re a plenty of web tutorials that describe how to create the sexy aqua button with Photoshop, and now I can show how to create one with CSS!

Here’s a screen capture of the rendered button. You can see the actual HTML page too.

OK, let’s take a look at the code:

<div class="button aqua">
  <div class="glare"></div>
  Button Label
</div>

Create a Button Base and Styling Label

.button{
  width: 120px;
  height: 24px;
  padding: 5px 16px 3px;
  -webkit-border-radius: 16px;
  -moz-border-radius: 16px;
  border: 2px solid #ccc;
  position: relative;

  /* Label */
  font-family: Lucida Sans, Helvetica, sans-serif;
  font-weight: 800;
  color: #fff;
  text-shadow: rgba(10, 10, 10, 0.5) 1px 2px 2px;
  text-align: center;
  vertical-align: middle;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

The first part to render a rounded-corner rectangle. Set the position as relative to place “glare” inside of the button later.
The second part is for styling the label.
Give text-shodow with alpha-transparency. (Believe or not, Chrome and Android do not support text-shadow!)

Button Color and Shadow

.aqua{
  background-color: rgba(60, 132, 198, 0.8);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 90%, from(rgba(28, 91, 155, 0.8)), to(rgba(108, 191, 255, .9)));
  border-top-color: #8ba2c1;
  border-right-color: #5890bf;
  border-bottom-color: #4f93ca;
  border-left-color: #768fa5;
  -webkit-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px;
  -moz-box-shadow: rgba(66, 140, 240, 0.5) 0px 10px 16px; /* FF 3.5+ */
}

Now, specify the appearance of the button and shadow at bottom.
Here. I use the -webkit-gradient to create a nice-looking aqua gradient.

Notice that I use -webkit-gradient as a background-image, although there’s no physical graphics are added there.
You can use gradients in background-image, border-image, list-style-image and content property.
On Firefox, this is ignored and you see only Background-color.

The syntax for linear gradient is as follows:

-webkit-gradient(lenear, left top, right bottom, from(start color/alpha), to(end color/alpha))

In this example, starts with dark blue from straight top to bottom (no angle) at 95%, not all way down, to blended into lighter blue.

Then, I specified color on each border (so the css looks pretty messy).

Finally, give a nice shadow at bottom, with -webkit-box-shadow.
Firefox 3.5+ supports it too, so duplicate it with -moz-box-shadow.

Syntax is as:

[color/alpha] [horizontal offset] [vertical offset] [blur radius]

Give it shine

.button .glare {
  position: absolute;
  top: 0;
  left: 5px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  height: 1px;
  width: 142px;
  padding: 8px 0;
  background-color: rgba(255, 255, 255, 0.25);
  background-image: -webkit-gradient(linear, 0% 0%, 0% 95%, from(rgba(255, 255, 255, 0.7)), to(rgba(255, 255, 255, 0)));
}

The class glare renders the glossy look on the button.
First, give absolute position to the parent container, button to give shine in the right position.

<;li
Again, use -webkit-gradient to create the glossy look, by playing with alpha-transparency.
Start with the white (alpha 0.7) and end with complete transparent (alpha 0).

Honestly, I do not like to have this non-semantic empty div block to only get this visual effect.
I need to figure a better way to do.

References:

• Safari Reference Library – CSS Property Functions by Apple
• Surfin’ Safari – Introducing CSS Gradients
• Mozilla Extensions