29
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:
- Cute Overload
- I Can Has Cheezburger
- Cute Obssesion
- Epicute
- Super Cute Kawaii
- 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.
11
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 
16
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.
21
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:
1
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!
3
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).
30
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:
27
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:
28
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
18
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>❅</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">❅</div> /* an entity for ❅ */
<div class="snowflake f2">❄</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:
