Open Web Camp III

I had this wonderful opportunity to speak at OpenWebCamp III at Stanford University on this weekend, and I feel very honor to be there with so many great speakers and attendees.

Apparently, I have been doing mobile development longer than most of people, I picked the subject on developing mobile web, and how it has been changed and what we can do next.

I covered the topics including:

• How the mobile development has changed from WML, XHTML-MP, HTML4 and finally HTML5 with CSS3
• Legacy to HTML5: using input attributes to make easier for a user to type on phone
• Dealing with smarter phones: Viewport and Media-queries
• High DPI display: CSS pixel != Device pixel
• Device API

My slides, “WAP to HTML5: Mobile web – past, present, and future” is available in html5, not Powepoint or Keynotes so I couldn’t post it on SlideShare!

Simulating MacOS Dock-like menu with CSS3

Since my original “CSS Aqua button” written last year, I have seen more and more fan CSS3 UI mimic of MacOS components around! I think I have seen some Mac docks too, but as I remember they all use jQuery.
So I was thinking about making one only with CSS.

Initially I thought it was easy – let’s make an hovered icon larger like 200%, and make siblings in 150% of the original size using CSS sibling selector, and done! A piece of cake, huh? – Then I realized I made a mistake. The adjacent-sibling selector apply to an element which is immediately after the element in markup, not both before and after.
Oh well, so I needed to write a minimal JavaScript (so you don’t need to import a whole JS library) to add a class name to the element comes before the hovered object.

Anyway, here’s the live-demo! (Try it with the the latest Webkit Nightly or Safari 4) for the best experience!), and I’ll show you how I did-

Markup (Simplified)

Let’s create menu items as a list.

<div id="dock-container">
  <div id="dock">
  <ul>
    <li><a href="http://android.com"><img src="images/dock-icons/android.png"/></a></li>
    <li><a href="http://palm.com"><img src="images/dock-icons/palm.png"/></a></li>
    <li>...
  </ul>
  <div class="base"></div>
  </div>
</div>

The list should be displayed horizontally by setting the style to #dock li {display:inline-block}. Please see the source code from the demo for the details.

Magnify the icon with CSS transform

First, let’s define the dock icon animation with css transition.
The origin of the transform has to set to bottom, so the icon doesn’t scale from the middle of the icon. (Diagram #1).

I used only a webkit extension for this example but you can use -moz and -o extensions, for Firefox and Opera respectively.

Then, set the hover state – use css transform to scale the icon image up to 200%. Also you need to add some margin otherwise the enlarged icon overlaps with neighboring icons!

#dock li img {
  width: 64px;
  height: 64px;
  -webkit-box-reflect: below 2px
		    -webkit-gradient(linear, left top, left bottom, from(transparent),
		    color-stop(0.7, transparent), to(rgba(255,255,255,.5))); /* reflection is supported by webkit only */
  -webkit-transition: all 0.3s;
  -webkit-transform-origin: 50% 100%;
}
#dock li:hover img {
  -webkit-transform: scale(2);
  margin: 0 2em;
}

Magnify adjacent icons

#dock li:hover + li img,
#dock li.prev img {
  -webkit-transform: scale(1.5);
  margin: 0 1.5em;
}

To magnify the icon at the right hand side of the hovered icon (Diagram #2), all you need to do is define the scale with using a CSS adjacent-sibling selector, E + F (an F element immediately preceded by an E element).

For the icon at the left (Diagram #3), ss I mentioned earlier, there is no css to get the previous sibling, so I need to rely on JavaScript.
I used the DOM node interface, previousElementSibling to access the sibling node. previousElementSibling should be supported by Webkit, Opera and Firefox.

Basically what I am doing here is that get the mouseovered object (should be an img element), find the parent li element (the immediate parent should be an a-alement, not a li, so get a’s parent! Check the HTML code again!), find the previous sibling li, then give a classname “prev” so I can apply the style.
Don’t forget to remove the class name as mouseout, otherwise the icon stays large.

function addPrevClass (e) {
  var target = e.target;
    if(target.getAttribute('src')) { // check if it is img
      var li = target.parentNode.parentNode;
      var prevLi = li.previousElementSibling;
      if(prevLi) {
        prevLi.className = 'prev';
      }

      target.addEventListener('mouseout', function() {
        prevLi.removeAttribute('class');
      }, false);
  }
}
if (window.addEventListener) {
  document.getElementById("dock").addEventListener('mouseover', addPrevClass, false);
}

For more details with the fancy CSS3 effects (e.g. the gradient and 3D-transform to create the “base” of the dock), please see the source code of the demo page!

I Can Has iPhone App on App Store

Finally, I have my app, called iCanHasLOL published on App Store!
Actually the app was reviewed within 24 hours by Apple, although I’ve heard it would usually take 2 weeks.

I mentioned that I had been writing an iPhone app using Appcelerator before, and an app was almost ready to go. However, I was not able to publish it with the particular contents so I re-wrote the app and re-created some graphics to finish up this brand-new app.

This is free of charge also ad-free (for now, at least!) so get your copy now!

iPhone Cocoa App development with JavaScript

Hello, I have neglected my blog since September although there have been some blog-worthy events like N900 meetup (plus Droid experience and new Fennec demo. See the videos by Tnkgrl from the link!), California Data Camp, release of Net2Streams Pro (the streaming radio app for Palm WebOS I helped writing) etc… Well, I keep microblogging on Twitter almost daily basis so follow me if you’d like!

One of the interesting I have been independently doing is that writing an app for iPhone with JavaScript, and this time, not an web app but a “native” Cocoa app. Yes I said a native iPhone app in JavaScript! But how? -I used this excellent open-source platform, called Titanium by Appcelerator! Without bothering Obj.C or Java, Titanium allows developers to write iPhone and Android apps with the familiar web technology.

So, as a test run, I have created the iCuteoverload app for iPhone again. (Originally, I made the web app for iPhone, using iUI in 2007)
I will not release this app on AppStore -not because of the technical issue but the agreement with the business decision. (Yes, this app contents are not mine and copyrighted!) But I should be able to show the video capture as a demo to tell you what Titanium can do for web devs like me!

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

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!

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

Mobile Safari for iPhone 3 includes Geolocation

Although W3C’s document, The Geolocation API Specification is still in draft state and not yet finalized, major browsers are working to support this functionality and as we all expected, Mobile Safari is not an exception.

According to ComputerWorld blog, the geolocation API has been implemented for the upcoming API. Apparently, Seth of ComputerWorld tried the test webpage, built by Doug Turner for Mozilla on a 3.0B5 iPhone’s Mobile Safari.
This screenshot is grabbed from the CompWorld’s blog.

Obviously I don’t have access to the new iPhone so I just tested the test page (http://people.mozilla.org/~dougt/geo.html) using Geolocation API watchPosition() method, on Mozilla 3.5. (And this should works similarly on Fennec too. I wish I could try on an actual device!)

I am using my old PowerBook G4, with Comcast,. Since this Mac is not equipped with GPS device, Firefox gathers information about nearby wireless access points and computer’s IP address.

Nice! I can’t wait to see this working on iPhone!
Especially, NextMuni.com with location enabled, that tells me where I am and where the nearest bus stop!

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