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.

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!

Now I started using jsfiddle for code snippets so I can show the code AND the actual results on browsers.

This fancy avatar frame is created pretty easily by using CSS box-shadow inset values.
Basically, what I did is that giving a div container (with an avatar picture as a background image) an inset shadow to bottom/right, and glare to top/left. Oh and added border-radius for the rounded corners.

This works without the vendor-specific extensions on latest Firefox, Chrome, Webkit Nightly, and Opera. Safari 5 still requires -webkit extension to make the box-shadow work.

Really easy and practical!

So, this is what has been keeping me busy (not blogging) these days. Announcing HP TouchPad!

I have been working as a part of the development team for the secret weapon, which was just announced at the HP’s press event at Fort Mason, San Francisco on Feb. 9th, for a while (especially hardware development take a lot longer than software!). Literally, my heart was beating during the live demo but when the crowd applauded, I felt great and so relieved.

At the evening’s developer event after the press event, we have announced the new and better JavaScript framework, Enyo. I probably write up something on HP/Palm’s developer blog later (yes, the site still has the Palm brand!), so stay tuned if you’re interested developing for webOS!

The photo is by HP Startup Central, on Flickr