The HTML5 Web Notifications API (now available on Chrome) allows you to display the Growl-like notification windows outside of the web browser window. Unlike the alert dialog, the notification windows do not disrupt a user’s action, or requires extra user interactions.

Using the API is quite simple, so I tried to replicate the infamous webOS notification system in HTML5. (In case you are not familiar with webOS UI and UX, see it on YouTube).

Live demo: http://girliemac.github.com/html5-notifications-webOS-style

Basic Notifications

First, check if the browser supports the API, by looking for the Notifications property.

if (window.webkitNotifications)

Apparently, it is only supported by WebKit-based browser (well, Chrome, so far) so you need to add the vender prefix, instead of just webkitNotifications.

Next, your script needs to requests the user agent to ask a user for permission to show notifications. If you are already familiar with the geolocation API, you have seen the “Info bar” on top of the browser.

To request the permission by requestPermission(), you must invoke some event from a user, such as mouse click. See the example below:

document.getElementById('#someButton').addEventListener('click', function() {
  // check if a permission is set allowed
  if (window.webkitNotifications.checkPermission() == 0) { // Allowed
    // do show the notifications
  } else {
    // request a user permission
    window.webkitNotifications.requestPermission();
  }
}, false);

There are two ways to create the notifications – plain text or html.

1. Plain text- use createNotification function that takes three optional params, icon image, title, and text:

var notification = window.Notifications.createNotification(
  'avatar.png',
  'New tweet from @girlie_mac',
  'OMG, a glass of water! http://instagr.am/p/...'
);

2. HTML – use createHTMLNotification to include an external html file:

var notification = window.webkitNotifications.createHTMLNotification('tweet.html');

To show the notification:

notification.show();

Also, you can use the cancel method to close the notifications if you wish. This example below let the notification close by itself 5 second after it is displayed:

notification.ondisplay = function(event) {
  setTimeout(function() {
    event.currentTarget.cancel();
    }, 5000);
}

Besides the ondisplay, other event handlers available are:
onclick, onshow, onerror, and onclose.

In my demo, I used the HTML notifications because only the HTML notification style allows you to fully customize the UI with CSS and add some UX with JavaScript.
To create the webOS-esque “slide-to-dismiss” effect, I used jQuery UI’s draggable and droppable. (I attempted to use the HTML5 drag and Drop, but for some reasons, I could not successfully make my code work within the notification window, although the code does work in a regular window.)
The source code is on github.

Hopefully, this API will be available on other browsers. (And Klout will replace the modal dialogs from hell to something more subtle like the web notifications in future. Can you believe once they had me to close seven modals after logging in? This has to be stopped no matter what.)

References

W3C Draft
Chromium API Specification
HTML5 ROCKS

Well, now, I have lost my job at Hewlett-Packard (as they ditched Palm hardware then dumped the webOS software as open-source, they no longer need me and my hard-working teammates), so I should no longer excuse for not writing. So here I am, I decide to write up about CSS3 shapes from the fiddles I have written recently:

Shapes with CSS3 Part.1 – Heart

Heart-shaped chocolate live demo: http://dabblet.com/gist/2190614

This Valentine’s Day demo (I really did make this on Feb.14!) shows how to create a heart shape.
Basic idea behind is that creating two rectangles with round-corners on top-left and top-right, and rotate each object in either positive or negative 45 degrees. The trick of making two objects in one HTML element is using pseudo-elements, ::before and ::after.
This code snipet shows how to create a simple heart-shape:

.heart {
	position: relative;
}
.heart::before,
.heart::after {
	content: "";
	position: absolute;
	top: 0;
	background-color: red;
	width: 150px;
	height: 240px;
	border-radius: 75px 75px 0 0;
}
.heart::before {
	left: 0px;
	transform: rotate(-45deg);
	background-color: red;
}
.heart::after {
	left: 64px;
	transform: rotate(45deg);
}

In this example, I omit the vender prefix, but you do need to include them, for example, -webkit-transform to be able to make this code work on the current browsers.

Shapes with CSS3 Part.2 – Flower

Chupa-Chupsy live demo: http://dabblet.com/gist/2190662

This Chupa-Chups, or I’d call it Chupa-Chupsy candy, since I cannot replicate the actual design of the candy wrapper accurately. (Oh, by the way, did you know the logo was created by the surreal artist, Salvador Dalí? Seriously.)

So I tried to mimic the signature yellow flower-shape, with one HTML element using the pseudo-element. This shape is made with a combination of two rounded-corner squares. One of the square is rotated to 45 degrees.
This is how to create the basic flower-shape:

.flower-shape {
    position: relative;
}
.flower-shape,
.flower-shape::before {
    width: 200px;
    height: 200px;
    border-radius: 25%;
    background: yellow;
}
.flower-shape::before {
    content: "";
    position: absolute;
    transform: rotate(45deg);
}

In this example, I used only ::before pseudo-element, instead of both before and after. Although I used both for the heart-shape example (which is made with two rectangles), technically, you can include three objects into one HTML element by inserting each object before and after the object on the element.

So if you’d like to have a flower with 12 petals, you can define .flower-shape::after, which is rotated in 30deg. Make sure to make the .flower-shape::before in -30deg.

To mimic the candy logo, I used the most similar web-font I found on Google Web Font. Once you see the real Chupa-Chups logo, you’ll see this web-font is actually nothing resembling it. But, hey.

Shapes with CSS3 Part.3 – Speech Bubble

Klout Score Flag demo: http://jsfiddle.net/girlie_mac/2uk6U/

This is a no-image replica of the Klout score flag! Creating this speech-bubble style shape used the same technique using ::after pseudo-element.
The method of making the triangle shape is the good’ol CSS2 border shading trick using border-width and border-color. Giving think borders around a box with zero width and height. The triangle size is determined by the border-width, with the given color on the one side and transparent on the rest of the sides. You can read more about how to create a triangle on CSS-Tricks.

The basic shape can be coded like this:

.speech {
    background-color: orange;
    width: 200px;
    height: 160px;
    border-radius: 10px;
    position: relative;
}
.speech:after {
    content: "";
    display: block;
    width: 0;
    height: 0;
    border-bottom: 28px solid transparent;
    border-right: 58px solid orange;
    position: absolute;
    right: 0;
}

Click the images to view in the full size.

This is a default google.com screen.
No filter added.

blur(radius) to create Gaussian blur

-webkit-filter: blur(2px);

The default is 0, no blur.

brightness(amount)

-webkit-filter: brightness(30%);

The default is 100%. Values of amount over 100% are allowed.
Updated: I am not sure when it has modified, but it seems that not the accepted value is the range between -100% (dark) and 100% (light), and the default is 0.

contrast(amount)

-webkit-filter: contrast(30%);

The default is 100%. Values of amount over 100% are allowed.

grayscale(amount)

-webkit-filter: grayscale();

The default is 100%.

sepia(amount)

-webkit-filter: sepia();

The default is 100%.

invert(amount)

-webkit-filter: invert();

The default is 100%.

opacity(amount)

-webkit-filter: opacity(30%);

The default is 100%, no transparency.

Saturate(amount)

-webkit-filter: saturate(50%);

The default is 100%.

Saturate(amount) – the amount over 100% is also allowed.

-webkit-filter: saturate(300%);

hue-rotate(angle)

-webkit-filter: hue-rotate(90deg);

The default is 0deg.

hue-rotate(angle)

-webkit-filter: hue-rotate(300deg);

drop-shadow(<shadow>)

/* Adding Drop-shadow on the toolbar at the top */

#bg {
  -webkit-filter: drop-shadow(rgba(0,0,0,0.5) 0 5px 5px);
}

I thought my biggest achievement of 2011 was the (un)successful launch of HP TouchPad, and the European tour to advocate the webOS development… but I should nominate the seizing the InterWeb before the government does (SOPA), for my greatest achievement of the year.

I got the certified cat geek lady status on the InterWeb, after my HTTP Status Cats went viral on Dec. 13th.

Within 24 hours I posted the pictures on my Flickr page and tweeted, it has spread all over the InterWeb, and now the status kittehs are officially an Internet meme.

What the meme does? It results the secondary and ternary awesome creations-
What made my day was Rogério Vicente has create the API with the cats.
And Heroku actually made it available. (This was made #2 spot on Hacker News on Dec.14th).
This is awesome. I love when fellow geeks make things into the higher level.

In case you have not seen the HTTP Status Cats:
See my Flickr set at http://www.flickr.com/photos/girliemac/sets/72157628409467125/detail/
I will post the missing status soon.

More Links

The HTTP Status Cats is featured on:
BoingBoing – HTTP status cats by GirlieMac: classic server error codes, now with cats
LaughingSquid – HTTP Status Cats, HTTP Status Codes Displayed Using Cat Photos
Neatorama – HTTP Status Codes Illustrated by Cats
CNN Money Tech – HTTP Status Cats
Mashable – HTTP Status Cats: Hilarious Motivational Posters [PICS]
I Can Has Cheezburger? – HTTP Status Cats

Translated to Japanese media:
らばQ – なんてわかりやすい…猫で覚えるネットのあの表示
Idea*Idea – HTTPステータスコードを猫で表現してみた

HTML5 specifications come with a full of goodness that make web devs’ lives easier.
The one of the goodies, the client form validation is the one I like a lot, because, for example, by adding required attribute to an input, I don’t need to write any additional JavaScript to warn a user, when the user submits a form without filling out the required fields. The interactive warning UI comes with browsers.

The “Speech bubble” UI is built in with HTML5-enabled browsers. (This screenshot is taken on Chrome. Other browsers like Firefox and Opera have their own interface.)

Pattern Matching

You can also validate against patterns that defined by you. The pattern attribute specifies a regular expression against the control’s value.

<input type="text" pattern="[0-9]{13,16}" title="A credit card number" />

A user is required to enter values to match a regular expression pattern, in this case, a 13 to 16 digit number.

CSS3 User Interface Selectors

There are numerous user interface state pseudo-classes. You’ve probably already known :hover, :active etc. According to this W3C Candidate Doc, there are additional pseudo-classes defined, such as :valid, invalid, in-range, out-of-range, required, optional, read-only and read-write.

So I played a bit with :valid and :invalid to check against the regular expression pattern.

The diagram shows: 1) The entry is displayed in red when the entered text is not matched.
2) The built-in HTML5 message is displayed when the user submits the form while leaving the invalid entry. No additional CSS is used.
3) The entry is in green when it matches with the defined pattern. Also, a check mark is used as an indicator to tell it is valid.

The simplified code is below. Also you can view the entire code and the working demo on jsFiddle.

<input id="cc" type="text" pattern="[0-9]{13,16}" required />
<div class="input-validation"></div>
<input id="payButton" type="submit" value="Pay Now" />

input[type="text"]:valid {
    color: green;
}

input[type="text"]:valid ~ .input-validation::before {
    content: "✓";
    color: green;
}

input[type="text"]:invalid {
    color: red;
}

I was too lazy to create an image, so I just used the unicode checkmark. Actually, what I wanted to do was that inserting the unicode content after the input with this CSS- input:valid:after. However, it is not possible to add contents to the input with the CSS since input has no document tree content. Therefore, I used the extra div after the input. (So I am using the sibling selector, ~, to specify the div).

If you would make it prettier, I suggest you should place some icons as a background-image of the input, instead of just dumping some unicode char!

input[type="text"]:valid {
    background: url(thumb-up.png) no-repeat top right;
}

References

HTML5 Form Validation on SUMO (Mozilla Blog)

CSS3 Basic User Interface Module by W3C

The pattern attribute by WHATWG

HTML5 Patterns

Summary: Use oninput event handler (or input event handler event type) when you register an event to the HTML5 input[type="number"], instead of onchange, onkeyup/down (although you may want to include them as the fall-back).

The Whole Story

When I participated to compete for Node.js Knock-out in the end of the summer, I have learned one thing (besides all the node.js coolness) in a bitter way, from the comments by judges: “the app UI is confusing.”
Actually, I believed that the app user-interface overall was intuitive enough, however, the one mistake I made with an HTML5 form killed the user-experience – I used a wrong event handler, something that doesn’t trigger when it needed to…

So here, I explain what I didn’t know; the newly introduced event handlers for HTML5.

The screenshot above is a number input control, the input element with a type attribute which value is “number”. It represents a precise control for setting the element’s value to a string representing a number.

Simply, you can write this in html like this:

<input type="number" placeholder="Pick a number" id="numPeople" />

You can add some more custom attributes like, required, autofocus, pattern, etc, and the number-specific attributes, min, max, and step. If you are not familiar with the html5 form input attributes, I recommend you should read New form features in HTML5 by Dev Opera.

So what I wanted to do in the particular app was that populating new fields as the user chooses a number. The simple user-flow is:

1. “How many people would you like to add?” – e.g. a user picks 5
2. n-number of new fileds are populated – e.g. 5 text fileds are displayed
3. the user fills out the text fields
4. the user submit the form

To make the flow #1 and #2 work, what I did was that I registered an event listener to the number input element, and used an event type to listen for.
OK, so which event type? – Well, I initially thought of change, however, it requires the user to unfocus (blur) the field once, to get the event captured. So, I decided to use keyup so as soon as the user finish typing a number, the event is fired and the function to display the extra fields is called.

OK, it sounds fine – well, only as long as the user only enter the number manually!

Remember, the HTML5 input field type="number" has the special user-interface, a spinner control, which allows a user to increment and decrement its value. And here is the problem – the keyup event does not get triggered when the spinner up/down arrow is clicked, at least on Chrome (which the judges were using)! So when some judges tried the app for the first time without much knowing what it does, and picked a number with the spinner control, nothing happened. The app’s UX was killed right there!

So, really, which event did I need to use?

The answer is input. I did not know about the newly introduced HTML5 oninput event handler until I found this article.

Now, the action is triggered when a user manually type a number, or when the user increment/decrement with the up/down spinner!

var numPeople = document.getElementById("numPeople");

numPeople.addEventListener("input", function(e) {
    var num = numPeople.value;
    ...
}, false);

Please see the entire code snippet and working demo!

Also, I made another small demo here so you can see when the input, keuyp, and change are captured.

onsearch Event

Additionally, there is another HTML5 event that you probably want to know – the search. The action is invoked when a user hits the enter key or clears the query (by clicking the (x) in a search control.
I can’t find any references in WHATWG or W3C, and apparently, its upport Level is the Apple extension. I tested it work on the latest Chrome, but not on Firefox 9 or Opera 11.5.

<input type="search" name="username" placeholder="Enter a Twitter username..." results="5" id="search" />

var s = document.getElementById("search");
s.addEventListener("search", function(e) {
    var q = s.value;
    showTweets(q);
}, false);
...

The code snippet and demo is at jsFiddle, too!

References

whatwg.org – Web Forms 2.0
whatwg.org – oninput Event Handler
Effectively detecting user input in JavaScript
Safari HTML Reference (onsearch)

I wrote this article, Creating Usable UI—Buttons and Interactive Dialogs, for Palm webOS Developer Portal. I walk through the Enyo button setup, the proper use of color and text, and how best to use buttons in intuitive, consistent user dialogs.

This is written for the webOS’s very own enyo.js framework, however, the major contents should apply to any web and app development so please take a look!

Thanks!

p.s. In case you don’t know – I am a developer relations engineer at Palm (acquired by Hewlett-Packard). As you may know, the best-yet-most-unfortunated mobile-platform, webOS’s future is unknown in this moment…

As a die-hard Apple Fan-girl, I started my very first web site on college web server (@csun.edu domain) in 1996, when people were speculating Apple was going out of business.

At that time, the Mac community was small but very supportive and exciting – I was particularly involved in the Mac desktop customization email lists, including Japanese ones where I help people with translation.
The Mac-user group in Northridge (maybe it was in Reseda) had a wonderful crowd, and I remember that everybody tried to help me out when my Performa died after installing OS 8.

When Steve Jobs came back to Apple, we, the community was truly delighted. We all believed that Apple would revive and become bigger than ever.

In 1998, the Bondi-blue iMac debuted with the catch-phrase “Say Hello to iMac”. Our mind was truly blown away. Steve totally did think differently!

After I graduated from college in the year, I moved to Boston and became a environmental microbiology researcher. Around the time, Mac OS X came out and I decided to do more “pro things” (LOL) on my Mac – I started studying computer science.

The funny thing was that a professor at my first comp sci class was also a die-hard Mac fan so I learned I could program in Java on Mac! I still remember his joke about our computer lab, which was entirely donated by Bill Gates, who used to study at the school.

Years past, my web site has been transformed from Mac-fan site to a web tech blog, I decided to keep the name GirlieMac! to show my origin, because without Macs, I would never decided to become a web developer.

Thank you, Steve, and good bye.

Anyway, in case you are not familiar with webOS and Enyo – webOS is a mobile platform running on Linux kernel/ webkit UI with V8 engine, so most of core apps are either written in JS and CSS, or native C/C++. And the JS framework for 3.0 is called Enyo. Basically working on the webOS framework and apps is just like developing web (in fact, I use Chrome for development). So here, I want to share some cool CSS tracks used in the framework!

1. Flexible Box Model

Enyo’s basic UI is created with using the CSS3 flexible box model.
You no longer have to worry about all the float craziness. I actually have written an article, CSS 3 Flexible Box Model and Enyo Flex Layout for webOS Developer Blog too, so please read it too!

Example:

When you want to achieve a layout that has an avatar at the left, and two lines of a person’s info at the right side like this,

You can create this UI without float if the browser support flex-box:

<div class="tweet">
  <div class="tweet-avatar"><img src="avatar.png"></div>
  <div class="tweet-contents">
    <div class="tweet-username">@n00b_css3_user</div>
    <div class="tweet-text">Hello, world. CSS3 Flexbox is cool.</div>
  </div>
</div>

.tweet {
  display: -webkit-box;
  -webkit-box-orient: horizontal;
}

.tweet-contents {
  margin-left: .5em;
  display: -webkit-box;
  -webkit-box-flex: 1;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
}

Note: this is an original spec from 2009 and this is what browsers currently support (if they do), and likely to keep supporting. I have no idea why the spec has been completely re-written recently, but so far no browsers support the new specs.

2. Root Em

There is a new unit in CSS, rem unit, which stands for “root em”. The sizing only with em could be troublesome because how it relates to the parent’s font-size. However, the rem is relative to the root, which is html.
In Enyo framework, the root font size is set to 20px. So by using rem, you can set its children font-size easily without being affected by their parents.

Here’s a comparison of em and rem:

<div class="container">
  <p class="subdue">48 minutes ago</p>
</div>

With em

html {font-size: 20px;}
.container {font-size: .8em}
.subdue {font-size: .75em} /* the font size = 12px (20 x .8 x .75) */

With rem

html {font-size: 20px;}
.container {font-size: .8em}
.subdue {font-size: .75rem} /* the font size = 15px (20 x .75) */

3. Pointer-events

This is a little obscure and simple trick not everybody has known, and a secret(?) trick I have been using since the earlier webOS framework called Mojo.
The pointer-events property was originally defined for SVG content, and later adopted as a CSS property.
For CSS, there are only two values: auto or none.
You can control the target of the mouth event, and by setting this value none, the element is no longer a target of mouse events, so when a user click the element, it pass through to its descendant during the event bubbling.

<div style="position:relative">
  <div class="overlay"></div>
  <ul>
    <li><a href="">link 1 on fading list</a></li>
    <li><a href="">link 2 on fading list</a></li>
    <li><a href="">link 3 on fading list</a></li>
  </ul>
<div>

.overlay {
  pointer-events: none;
}

The screenshots at left indicates that when the pointer-events property value is not set (default), the first link underneath of the visual overlay is not clickable, and when it is set none, the element becomes clickable (right).

The demo: http://jsfiddle.net/girlie_mac/7TvVY/

4. border-image with sprites

You have seen some demos how to use the CSS3 border-image.
But making multiple assets used for border-image is trivial because how an image needs to be “sliced” into 9 tiles with css.
However, if an each asset in the sprites only requires into 3 tiles. (For example, [static-left] [stretchable center] [static-right], and top and bottom borders are zero, you can create a single sprite image of multiple states of a button, and still be able to achieve the border-image.

.alert-button {
  /* notice the fat border-bottom */
  -webkit-border-image: url(images/alert-button.png) 0 14 111 14 repeat repeat;

  /* notice that border-top and bottom are set zero */
  border-width: 0 14px;

  /* some visual styling here */
  -webkit-box-sizing: border-box;
  height: 37px;
  line-height: 37px;
}

.alert-button:active {
  /* the fat border-top and bottom adjusted */
  -webkit-border-image: url(images/alert-button.png) 37 14 74 14 repeat repeat;
}

The demo: http://jsfiddle.net/girlie_mac/89C2T/

5. Hardware acceleration

WebKit enables hardware-acceleration to render CSS 3D transforms. Although some WebKit (like webOS) may not render 3D visuals correctly, it still uses the GPU to speed up. So all you need to take advantage of this is to use the -webkit-transform CSS property!
The easiest possible way to achieve it is using translate3d instead of translate (also scale3d instead of scale), although you are not intend to make your web in 3D visual effect.

.toaster {
  -webkit-transform: translate3d(0,0,0);
}

or just set only the z-axis:

.toaster {
  -webkit-transform: translateZ(0);
}

I hope some of the stuff I just wrote are new to you!
There are more fun stuff I can write about Enyo JS framework, but I keep them for the official HP webOS Dev Blog!

Bye now!

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!