Web Platform Docs

If you guys didn't know, the W3C has started a project called Web Platform Docs ( currently in alpha release ) aimed at being the centralized resources for web developer.  This project has been and will continue be contributed by the main (and big) players in the web development industry.

http://docs.webplatform.org/wiki/Main_Page

If you haven't heard of that before, you can visit their "Getting Started" link,

http://docs.webplatform.org/wiki/WPD:Getting_Started

Reading List for June

My reading list for June :)

Twitter Engineering Blog
http://engineering.twitter.com/

Cross Browser Debugging
http://www.stubbornella.org/content/2012/05/02/cross-browser-debugging-css/#comments

Handling Multiple Ajax Call
http://lostechies.com/joshuaflanagan/2011/10/20/coordinating-multiple-ajax-requests-with-jquery-when/

Don't use Router handler in Backbone
http://lostechies.com/derickbailey/2011/08/28/dont-execute-a-backbone-js-route-handler-from-your-code/

You should read those if you are working on frontend

Frontend coding standard
http://na.isobar.com/standards/

Frontend development guidelines
http://taitems.github.com/Front-End-Development-Guidelines/

How javascript timers works
http://ejohn.org/blog/how-javascript-timers-work/

How prototype inheritance works
http://blog.vjeux.com/2011/javascript/how-prototypal-inheritance-really-works.html

Jquery Core Style Guideline
http://docs.jquery.com/JQuery_Core_Style_Guidelines

Jquery events misused
http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/

10 things I learn in Jquery video

Because the Web isn't Print

Dump Your "clear:both", an Alternative to Clearing Floats

One of the traditional ways to solve the clearing floats problem is by adding an extra element and make it "clear:both".

<div style="clear:both" />

However this method has some draw backs :-

1. The clear both contributes nothing meaningful to the markup besides it's used to fix a floating issue.
2. It adds extra bits to your html code.

...
Let me show you another way of solving this problem without using an extra markup, the only thing you need to do is :-

1. In your css where your container that contained the float elements, add
• min-width ( or width or height )
• overflow:hidden

That's all you need.  Well, I know if is not very intuitive, and if you still don't understand what I'm talking about,  here is the example, http://cssdesk.com/ZwJ7x.

Let me know your thoughts!

Note: Oh, btw, I believe everyone is using "clearfix" nowadays, it seems to be a standard method in the industry.  And I brought it up in this post is just in case someone out there is still using <div style="clear:both"> .

CSS4 first public draft

Can't believe it, CSS4 is on first public draft now. One of the long asking features was how to "select a parent", and it is coming to CSS4.

How you can select a parent in CSS4 ? Let me quote their syntax

$E > F

Yep, that's it.  So for example,

#roy $div >  .header { ... }

And the css definition inside is applying on parents of ".header", which is the div (please note there is a dollar sign).  Is that a cool feature?

There are also some new pseudo classes seems interesting as well

:only-child,  :nth-match, :matches ... etc

Here is the first draft link, if you are interested.  But I don't think it will be final until 5 - 8 years later :)

http://www.w3.org/TR/2011/WD-selectors4-20110929/

Note: For those who are curious why there is no parent selector in CSS so far, here is a very nice explanation :-

http://snook.ca/archives/html_and_css/css-parent-selectors

Best CSS3 Utilities

Most of these tools are pretty well known, but just in case you haven't used or heard of them, you can try to click and explore yourself.  If you know more CSS3 tools that is useful, please feel free adding those to the comments.

If you are interested in creating CSS3 tools for the community,  let me know, we can definitely figure something out.

• CSS3 Please- http://css3please.com/
• Ultimate CSS Gradient Generator - http://www.colorzilla.com/gradient-editor/
• CSS3 Generator - http://www.css3generator.com/
• CSS Desk - http://cssdesk.com/
• CSS Prefixer - http://cssprefixer.appspot.com/
• Normalize.css - http://necolas.github.com/normalize.css/
• CSS Crush - http://the-echoplex.net/csscrush/
• CSS3 Sandbox - http://westciv.com/tools/gradients/
• Ceaser CSS Easing Tool - http://matthewlein.com/ceaser/
• CSS3 Transformer - http://westciv.com/tools/transforms/index.html
• When can I use - http://caniuse.com/
• CSS3 Playground - http://css3.mikeplate.com/
• CSS3 Button Generator - http://css3button.net/
• CSS3 Maker - http://css3maker.com/
• Layer Styles - http://layerstyles.org/

Extra Tutorials

• HTML5 UI Components - http://nextgensim.info/uicomponents
• Canvas - http://www.whatwg.org/specs/web-apps/current-work/multipage/the-canvas-element.html

Re: The grey areas of progressive enhancement

Going through some articles about progressive enhancement and found this one - The grey areas of progressive enhancement.

Well, not everything has to follow the progressive enhancement rules, let's keep it flexible.  If it is something critical for a business or corporate, you don't want that to lose the design.  And I believe it is the spirit of progressive enhancement as well, keep critical elements the same in all platform and let's those non-critical to be enhanced progressively.  

Here are something I can think of at this moment about progressive enhancement:-

• Normal user won't look at your site using 2 or more browsers at the same time, so their user experience should basically be the same. But of course, those corporate identity design has to be kept as they are critical.
• The cost of making everything the same in all browsers could be huge. And if it is not critical, why not just save those resources for something else?
• You are punishing those users who are using older browser if we needs everything to be the same.  Because in order to achieve everything the same, client user may need to download extra images, extra js libraries.  

I came from the background of both "everything has to be the same" and "let's make it progressive enhance / gracefully degrade".  And each one has its good and bad, nothing is perfect honestly.

But for "making everything the same" method, here is my experience as a developer - You will learn the most out from it, but it could be a pain of the butt process.  Honestly if I have time and budget, I would do that, since it is fun. And a lot of famous libraries are coming out because some old browsers do not support certain features (maybe you could be the next one).  And again, if you have time and budget, just go for it :)

Extra

Ok, at the end, let me suggest you a graph and help you to decide when you should use "progressive enchantment" or not :)

The rule is "choose 2 and dump 1" :-

• If an element has to be the same, and you have limited budget, you need to give a lot of time to it
• If an element has to be the same, and you have short turn around time, you need to prepare a bigger budget ( hire more contractors, giving OT ... etc )
• If you have both time and budget limit, think about if an element has to be the same or not. If it is not critical, then why bother?

CSS Gradient test Gotcha, IE vs. other

Making some test cases for applying gradients on top of "something" for various browsers.  Since IE 7 - 9 doesn't  support gradient, so we will use the most compatible "gradient filter" for IE.  The test cases link will be at the end of this post.

In FF, Chrome and Safari, the result is the same as the following image :-

The above demo does not just only show you how to create different effects using gradients, but also includes some gotcha you may not know.  Please pay attention to box 3, 4, 7 and 8.

Box 3 and 4 - The background and the gradient is in the same box.  The order doesn't matter, the gradient will have more weight.  And the background will be covered by the gradient in both cases. 

Box 7 and 8 - Similar to the above, but we use "background-color" instead.  However, instead of being covered by gradient, the background color does show up.

So "background color" and "background image" could have different effects when used with gradient. And the next question will be why?  Since background color and background image both will fill the spaces, why background color will show up while background image won't.  I'm guessing this behavior is due to browser optimization, because calculating complex pixels in one shot could be slow.  But if you know the answer, feel free to let me know as well :)

Now it is IE's turn.  Actually IE's gradient filter play pretty well, and it doesn't have the background color and background image inconsistent issues.  Here is the screen shot, aIl E 7 - 9 looks the same.

See that?  The Box 3 and 4 background's image does show up.

So based on the above comparison, which gradient implementation is the correct one?  Is it the one covered the background image, or the one that doesn't?

My test cases page - http://jsfiddle.net/bf4hq/4/, you can test on various browsers and feel free to add more test cases to it that you found interesting and let me know :)

Extra
I created 2 more test cases, Box 9 and 10 .  What I tried to do is to see the result when I do some permutations on gradient, background-image and background-color.  And this is what I found here :-

For FF, Chrome and Safari

1. When you put background-image and gradient in the same box, gradient wins.
2. When you put background-color and gradient in the same box, both merges.
3. When you put background-image and background-color in the same box, background image wins.
4. When you put 3 together, background-color and gradient wins.

Below is what my Chrome browser told me, it's consistent with the results listed above, maybe it is the default behavior :)  Gradient and background image cannot lived in the same element ?!

And IE actually behaves a little bit different.  Well after all, IE's gradient-filter is not the same as css3 gradient.

That's interesting :)

For those who haven't known it yet, W3C gradient color code is sequenced as rgba, while IE gradient filter color code is sequenced as argb.  Be careful when you copy and paste color code around :)

If you are looking for how to apply background image and gradients on the same elements, I found a post - http://www.heresonesolution.com/2010/09/using-a-css-gradient-and-a-background-image-on-the-same-element/

Another Approach to Box Model and Responsive UI (CSS)

Recently came across a "new" approach to create box in html.  Honestly, it is not a new thing, but just not many people have used it or talk about it so far.

After doing a little research and testing on it, I can think of there are quite a number of practical use cases  by using this "new" approach.  Let me show you that and let's later discuss it a little bit.

Traditional Box Model
The traditional box model is created by defining the box width, margin, padding and border ... etc.   Please read it again, "width, margin, padding and border", I'm not crazy, it is related.

If you give it a second thought, the box is created from the inside out.. First by drawing one or two line(s) (width / height ), you created a space. And then you use the padding, margin as "fillers" to expand the space.

Well, I'm not saying the box model is not good.  Honestly, I think the current box model is the correct approach to your problems.  However, what I'm mentioning here is a potential theoretical alternative.


New Approach to Box Model (CSS)
The new method I'm talking about is something very similar to coordinate system in your photoshop.  A box is being drawn by providing 2 coordinates, for example,

pointA  ( 100px, 200px )
pointB  ( 150px, 250px )

With 2 points, you can define a rectangular shape.  But how do you create 2 points in css?  Well, it is easy, position attribute has 'top, left, right, bottom', and the 2 points is just (top, left) and (bottom, right).

But the points we are going to define, instead of exact coordinates, are offset.  What does that mean??  Well, glad that you ask!  Offset is the distance from your browser window.

It also means that your box do not need a width at all, because it is drawing from outside (or defined by the offset in other words ).  Plus, you don't need to put IE hacks for this box, since the padding won't affect the box in this case. Yep, it works on even IE 5.5, cool, huh?

And for the Responsive UI part, you can mix and match the @media query, and I believe you can achieve certain degree of  Responsive UI even without much help from javascript side, since this model is using offset to calculate the box.  Try to view the demo from your smartphone and change the viewport.  Imagine what you can do with @media query in the demo.

Well, I'm talking too much, let's do a demo then :)

Note: This demo is a simple demo for drawing box model using offset.  There are so many use cases on that, and it is only limited by your imagination!!

Note: This new approach by no means is better, it is just a different approach to solve the same problem, used it as you will.

  

CSS3 Maker

I bet you guys who are doing CSS3 stuff will definitely love this tool :)  It generates CSS3 with vendor prefix with just a few clicks, and it will also tell you the browser support for each definition.  Enjoy :)

http://css3maker.com/

High Performance CSS

Recently I looked at some people's code, and found out this css rule.

table.captain tbody tr td input[type="text"] { ... }

Do you see anything wrong here??  Well, not wrong, it is still valid and running fine. But in terms of efficiency, this one could not be very good. Why??  Please first read the following and try to understand how browser engine parse your css.

The browser render your css from left to right, and when it hit each "parent", it will asked a question "Does it match or not match?".  So the longer your rule is, the less efficient it will be.

Let me translate how the browser filter or render your css above.

1) input[type="text"] | Is there anything matched?  Yes, go to next step

2) Is the above element contained in a "td"? Yes, go to next step

3) Is the above element contained in a "tr"? Yes, go to the next step

... blah ...

And if you plan to write efficient (or high performance) css, you should first ask yourself a question:  Do I need all those category or selectors?  Can I simplify it and still get the results?  In other words, are the rules all necessary?


How about if I rewrote the above rules like the following?

table.captain td input[type="text"] { ... }

or even this one

.captain td input[type="text"] { ... }

Any of these rules will be much faster than the first one.

Note: 
There is a good blog entry about Efficient use of css - http://css-tricks.com/6386-efficiently-rendering-css/

CSS: Style Smartphone using @media query

There are several ways to target handheld devices.  For example, you can use javascript ways by checking the navigator.useAgent like the following

if(navigator.userAgent.match(/Andriod/i)) {
  // add a className to your <body>
}

But among those methods, I found the CSS @media query is my most preferable and generic ways to detect and style the page. However, if you want to target a specific one handheld system, the userAgent way (or the http_user_agent in server side ) will be more useful.

The CSS @media query method will style your page based on your screen size.  And the following is probably what you need most of the time.

/* Smartphones (portrait and landscape) -----------  */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
    / Styles /
}

/* Smartphones (landscape) -----------  */
@media only screen
and (min-width : 321px) {
    / Styles /
}

/* Smartphones (portrait) -----------  */
@media only screen
and (max-width : 320px) {
    / Styles /
}

/* iPads (portrait and landscape) -----------  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
    / Styles /
}

/* iPads (landscape) -----------  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
    / Styles /
}

/* iPads (portrait) -----------  */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
    / Styles /
}

/* Desktops and laptops -----------  */
@media only screen
and (min-width : 1224px) {
    / Styles /
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
    / Styles /
}

/* iPhone 4 -----------  */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    / Styles */
}

For more robust and latest media query, please check out the following blog :)
http://www.stuffandnonsense.co.uk/blog/about/hardboiled_css3_media_queries

Super Easy Sprite - Sprite Cow

Ever struggle creating Sprite as well as finding the right background-position, width and height values for that Sprite?

Now here is the tool that helps you saving tons of time from now on -  The Sprite Cow.  This service let you to upload a sprite image and then it will tell you the dimensions of each image when you select.   And better yet, for each of your sprite context, you don't need to align those at all.  Just put it wherever you like, and the Sprites Cow will tell you the position that you should put in your css.  That's easy!!!

Go to their website, and you will see a screen like that. All you need to do is to click "Select Image" and upload your sprite image.  That's all, is that easy??

Other Resources
http://spritegen.website-performance.org/

CSS Hacks Mix and Match

Still remember the old days CSS hacks?  No problem if you don't remember, here is a super short syntax for you to review.

Different browsers will respond to the following css differently.

#content p { color:blue; }  // older browser
html>body #content p { color:red; } // modern browser
* html #content p{color:green;}  // IE6   ( star hacks )
*+html #content p { color:#bada55; } // IE7 (star+ hacks )
*:first-child + html #content p { color:pink; }  // IE7 ( star+ hacks variation )
html>body #content p { *color:black; }  // IE7 ( star attribute hacks ) 
#content p { color:blue\0/; } // IE8


Since developer nowadays are talking more about conditional statement, and those hacks are pretty much long gone.  However, is it possible to do a mix and match with old hacks and new methods, and is there any benefit of doing so??

If you use a conditional statement ( I'm not talking about the separate css files method ), you will have something like the followings,

.ielt9 .myClass {
   ...
}

.ie8 .myClass {
  ...
}

.ie7 .myClass {
  ...
}

Do you see that when using the conditional statement, you may end up having bunch of lines that look likes the above.  And through mix and match old css hacks with this modern method, you could take advantage of the benefits of conditional statement, but it could also save you more than several lines.  For example,

.ielt9 .myClass {
    color:orange;
    *color:green;
     color:red\0/;
}

The above one will target browser less than ie9, and it is also taking care of ie8, ie7 and ie6 just in one shot. So in this way, you will save at least 2 definitions by using this mix and match hacks.

Latest jQuery plugin - HTML5 Spin Wheel

Just created a new jquery plugin just for fun recently. Part of the algorithms are taken from some other places. What I did here is just playing around with the HTML5 canvas, but somehow I also package that as a jquery plugin.

Here is the demo below:-
Try to enter the things you want to put on the wheel, for example,

• Where to go to lunch today
• Who is going to wash dishes today
• Who is paying for lunch today
• ... etc

Press Add to add more items.  After adding all your items, you can click the spin.



Note:
Feel free to modify the source as you will.  There is an array of applications that can be based on this plugin.  For example, you can integrate that with Yelp to create where to go to lunch today.  This plugin is just a simple demonstration of what HTML5 is capable of, but HTML5 is far powerful that just that.

IE User Note: 

It is recommended you use the latest (modern) browsers, like Chrome / Firefox / IE9, because HTML5 is still relatively new stuff, older browser may not support those at this point.  There are some libraries that can make your browser to recognize HTML5 tags, in our case of canvas, you can take a look at the Google's ExplorerCanvas.    

Another Post about IE7 z-index bug

Yep, this is about the well known IE7 z-index bug, and some people called it a stacking bug.  I'm pretty sure there are a lot of posts out there will tell you how to fix the problem. And in this post I will briefly explaining my experience dealing with this bug, and my observation of this bug's behavior.

Imagine a Scenrio
Imaging you have a image gallery ( let's say a 3X3 grid ).  And in each grid, besides the image, there is another hidden div (position : relative) in which the div will appear when you mouse-over the image (let's call this hidden div an overlay div). Since you want that hidden div, when it appear, to be on top of the grid, so you use the "z-index" attribute, let's say you put "z-index:99999" for the hidden div.

Image the 3X3 grid looks like the following :-
1, 2, 3
4, 5, 6
7, 8, 9

Well, it's all working great in FF and Chrome, but when you test that in IE7 ... you found out that the overlay div is above the image in the same grid, but the same overlay div now goes below the image of the right grid. On the other hand, the overlay div on the right always  goes on top of the image of the left grid. And no matter what z-index you use, this behavior is still the same.

Well, let's put it in this way in order to make it more visualize :-
G = Grid

G(1).Overlay > G(1).Image
G(1).Overlay < G(2).Image


Why this behavior??
After reading some articles and do some testing, in IE7, these are the behavior

• IE7 will reset z-index when you have declare "position" in your elements
• In IE7, children's z-index will never be higher than the parent

Since it re-assign z-index at run time when it sees appropriate, so it means it will overwrite whatever is in your css. 

So in our case, the IE7 has assigned the 3X3 grid with the following z-index value

0, 1, 2

3, 4, 5

6, 7, 8

And since the Children's z-index value will never be higher than the parent, so in Grid(1), even though my overlay div has z-index:99999, it nows become irrelevant because of the z-index rearrange rule.

So the item from Grid(2) is always having a higher z-index value than all elements inside Grid(1), and item of Grid(3) is always having a higher z-index value than all element inside Grid(2) and Grid(1) and so on. 

How to fix that issue?
Well, there are so many ways, and just be creative. The way I fix it is using javascript like this

• count how many Grids
• reassign z-index value starting the largest number

8, 7, 6

5, 4, 3

2, 1, 0

In this way, we just un-do what IE7 has done to our 3X3 grids.

There is another solution seems much easier, since IE treats a position like a z-index reset, so you can declare position of static on the parent element containing the z-indexed elements to have them respond to z-index correctly.

There are so many solutions,  and are totally depending on your needs and your creativity :)  

Install Compass and Sass in Ubuntu 11.04

Here is a tutorial on setting up your environment to use compass and sass in Ubuntu 11.04 ( should be the same as previous version )

1) Install Ruby
sudo apt-get install ruby-full

2) Install Gem
sudo apt-get install rubygems1.8

3) Install Rails, sqlite3 ( optional, but usually I install that as well )
sudo gem install rails
sudo gem install sqlite3

Try to run this to make your system up-to-date
sudo gem update --system  

4) Install Compass
sudo gem install compass

5) Install Sass
sudo gem install sass

6) Create your first project
(If you want to use normal css syntax, scss)
compass create <myproject>

(If you want to use sass syntax)
compass create <myproject> --syntax sass

How to create your first project

1. cd /path/to/projects_folder
2. compass create my_test_project
3. compass watch my_test_project

Now you can open your favorite IDE, and look into the just created "my_test_project".  You will see a bunch of files are created.  By default, the "sass" folder is the place for holding the sass files, while the "stylesheets" folder is the place for the generated css files.  And you can configure those by changing the  "config.rb" if you will.

Some "extensions" that you may want to install after you setup your project

• (CSS3 PIE)  compass install  compass/pie

Some "gems" you may be interested 

• https://github.com/sporkd/compass-html5-boilerplate
• https://github.com/chriseppstein/compass-960-plugin
• still adding ...

For more information on Compass and Sass, please visit the official documentation - http://compass-style.org/install/ and http://sass-lang.com/.

CSS selectors combined behavior

Have you ever seen rules like that?
#home .row.boxes { ... }  // note that .row.boxes  2 classes are combined

Here is another example,

div.foo.bar[title^="Test"] { ... }

And when I played around with it, it is used for targeting an element that has "row" and "boxes" at the same time.

Let's using the same rule here:  #home .row.boxes { ... }

<div id="home">
    <div class="row boxes">This will pick up that css rules</div>
    <div class="boxes row">This will pick up that css rules</div>
    <div class="row">This will not pick up that css rules</div>
    <div class="boxes">This will not pick up that css rules</div>
</div>

You can think about this "combined" rules as "AND", in other words, the rule mentioned above says, only if "row" AND "boxes" are in the same element.

It is quite useful in some cases.  Think about the following case, without the combined rules, how can you only targeted the "bold" element?

<div class="boxes">
    <div class="row box">Hello World</div>
</div>
<div class="boxes">

    <div class="box">Hello World 2</div>

</div>

<div class="boxes">

    <div class="row">Hello World 3</div>

</div>