Useful HTML5 Resources

Collecting links for HTML5 resources, let me know if you found other good links as well. Enjoy!

W3Schools
http://www.w3schools.com/html5/default.asp

W3Fool  ( An anti-W3Schools campaign )
http://w3fools.com/

Dive Into HTML5

http://diveintohtml5.org/

HTML5 Glossary

http://html5doctor.com/element-index/

HTML5 - edition for web developers

http://developers.whatwg.org/

HTML5 WoW

http://www.htmlfivewow.com

HTML5 Rocks

http://slides.html5rocks.com/#landing-slide

HTML5 Playground
http://playground.html5rocks.com/

Latest in HTML5

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#1

Sites using HTML5 markup
http://www.html5arena.com

Accessibility
http://www.html5accessibility.com/

The Expressive Web

http://beta.theexpressiveweb.com/

Frontend Developer
http://www.front-end-developer.com/

HTML5 Canvas Tutorials
http://www.html5canvastutorials.com

Can I use

http://caniuse.com/

HTML5 Test / Browsers Compatibility
http://www.html5test.com

HTML5 Security
http://html5sec.org/

How to order you head section

http://blogs.msdn.com/b/ieinternals/archive/2011/07/18/optimal-html-head-ordering-to-avoid-parser-restarts-redownloads-and-improve-performance.aspx

Html5 headings and  accessibility 

http://www.brucelawson.co.uk/2009/headings-in-html-5-and-accessibility/

Building Apps with HTML5
http://html5center.sourceforge.net/building-apps-in-html5

Juude Blog about HTML5
http://juude.info/html5-layout.php

Best CSS3 Resources
http://www.linkedin.com/news?viewArticle=&articleID=784509223&gid=2071438&type=member&item=71538466&articleURL=http%3A%2F%2Fstylishwebdesigner%2Ecom%2F150-excellent-css3-tutorials-to-make-you-a-stylish-web-designer%2F&urlhash=U0xc&goback=%2Egde_2071438_member_71538466

Efficiently Rendering CSS

http://css-tricks.com/6386-efficiently-rendering-css/

HTML5 Layout
http://juude.info/html5-layout.php

Best CSS3 Utilities
http://iroylabs.blogspot.com/2011/09/best-css3-utilities.html

10 Tools to simplify HTML5
http://www.catswhocode.com/blog/10-online-tools-to-simplify-html5-coding

Make old IE to understand HTML5 
http://code.google.com/p/html5shiv/

HTML5 Polyfills
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills

TSG HTML5 Class Part 3

Today's our talk is focusing on CSS3, and here is the slide we have used in the class.

Readings

For those of you who wants a brush up on your css, you can take a look of this site -  http://www.htmldog.com/guides/cssbeginner/ , they have beginner, intermediate and advance level topics on html and css.

Samples
Here are some samples we've used in the class, feel free to change anything you want

• http://cssdesk.com/4GQxd
• http://cssdesk.com/suXVw

Note
Some people asked how come in chrome and firefox the animation is reversed?
That's because of the vendor prefix, I hope you all remembered.  You can make different browser use different css3 by using the vendor prefix.

• -moz-    (firefox)
• -webkit- (chrome)
• -o- (opera)
• ... etc

We have introduced another tool yesterday, it is http://jsfiddle.net/ , it is similar to cssdesk, but it will let you do javascript also and it is a good tool for developer to write testing code and play around with stuff.

There is a good link Edward has mentioned, take your time to take a brief look even though it's a little bit lengthy - http://html5center.sourceforge.net/building-apps-in-html5

Next Tuesday is our field trip to Linkedin, no class next week.
How to Make Your JavaScript Fast ( Linkedin Campus )
http://www.meetup.com/SF-Web-Performance-Group/events/37966322/

Homework! Homework!
Since we have quite a long time in between until the next class, and thus I have changed my mind and assign you some homework.

Your homework is - without using the cssdesk, try to create a simple page from scratch using HTML and CSS.  You can do whatever you want with only one limitation, your css must be less than 150 lines of code.

Feel free to ask any questions in the email thread or through the blog. Thanks and enjoy :)

One handsome guy

Thanks Pojen for sending me those pictures, I think I look handsome in there :)

TSG HTML5 Class Part 2

Today's our talk is focusing on web forms. Hopefully it is not too hard for you all. Please feel free to send me email or leave comments in the blog for any questions you have.

Today's Presentation
http://www.standardista.com/forms/
...

The following is the Linkedin talk I mentioned in the class, you need to signup first if you plan to go.  But it is optional, only go if you are interested, it is a field trip for our class.

How to Make Your JavaScript Fast ( Linkedin Campus )
http://www.meetup.com/SF-Web-Performance-Group/events/37966322/
...
Q&A
Someone asked in the class
"How do I know which browser support what?"

Ok, now below are some cool tools for your reference

• http://caniuse.com/  - Compatibility tables for support of HTML5, CSS3, SVG and more in desktop and mobile browsers.
• http://html5demos.com/ - HTML5demos will let you know instantly which property can be used on a specific browser.
• http://www.standardista.com/html5/html5-web-forms/

Also, someone asked this in the class

"Can we use the HTML5 form now? But not all the browser supports it?"

Well, yes, you can use it now.  For those browser that doesn't support the new form attribute will fall back to "text", and you will need extra javascript to do the validation and extra css for styling.  Meanwhile, there are already written tools to make HTML5 form cross browser and so you don't need to recreate the wheel again - http://code.google.com/p/webforms2/

...

Reading for this week
http://www.catswhocode.com/blog/enhance-your-web-forms-with-new-html5features

...

Homework
Create as many web forms as you would like and test different features.   ( Note: you don't have to use cssdesk, that's just a handy tool only. )

For your homework, here is a good example for you to take a look - http://www.useragentman.com/tests/html5Widgets/bradshawenterprises.com/index.html

And if you would like to explore more about how people do HTML5 in the industry, you can this tool to generate your own HTML5 template, just trial and error and play around with it - http://switchtohtml5.com/

See you all next week in the class.

TSG HTML5 Class Part 1

Thanks everyone for attending the TSG HTML5 Class Part 1.

Here is the link to the presentation tonight

https://docs.google.com/present/edit?id=0AbJjnup-9j6yZGQ4Y3Q3OTlfMTg5bmNxOTg3aDQ

If you want to read more about HTML5 new elements, here is the link

http://www.w3schools.com/html5/html5_new_elements.asp

[ Reading for this week if you have time ]
Difference between DIV, SECTION and ARTICLE

http://boblet.tumblr.com/post/130610820/html5-structure1

Please finish your homework if possible, see you all next week!

Feel free to ask any question either in email list or in this blog post.

Parallel Processing benchmark in PHP ( CURL version )

Introduction
There are so many tools that gives PHP the capabilities of parallel processing.  Well, not multiple threads, but multiple processes, the outcome is very similar though, it makes PHP do several things at the same time without blocking.

Tools you can find today that I can think of :-

• Gearman
• Fork (pcntl_fork)
• curl_multi
• rolling curl ( just another flavor of curl_multi )
• various Message Queue, like Rabbit MQ.

But this post is focusing on comparing / benchmarking "curl_multi" and "rolling curl",  since in general "rolling curl" is believed to be more efficient than "curl_multi" without doing the rolling. However, the benchmark result is quite confusing me.

Note: "Rolling Curl" at the end is still using curl_multi, but the difference is it swap out (roll out) finished job instead of waiting for the longest job to return.  For example, in this way, you don't need to wait for everything to finish before processing your returned data.

Benchmark Starts Here
I'm trying to do a benchmark between using Rolling Curl v.s. normal implementation of curl_multi (without the rolling).  The result is very close, but quite a number of time it shows that Rolling Curl is actually slower.

What I did is having both doing the same thing, "curl" 20 different urls and count 0 to 500 after the job is done. I try to simulate 5 concurrent users to call the script for 10 times.   And here is the result I get back.

Rolling Curl

Transactions:            50 hits
Availability:        100.00 %
Elapsed time:         44.57 secs
Data transferred:         0.00 MB
Response time:          4.08 secs
Transaction rate:         1.12 trans/sec
Throughput:          0.00 MB/sec
Concurrency:          4.58
Successful transactions:          50
Failed transactions:            0
Longest transaction:         9.54
Shortest transaction:         1.78

curl_multi without rolling

Transactions:            50 hits
Availability:        100.00 %
Elapsed time:         39.11 secs
Data transferred:         0.00 MB
Response time:          3.51 secs
Transaction rate:         1.28 trans/sec
Throughput:          0.00 MB/sec
Concurrency:          4.49
Successful transactions:          50
Failed transactions:            0
Longest transaction:         8.96
Shortest transaction:         1.94

At first I'm thinking the Rolling Curl will be faster since it will do the counting whenever a particular "curl" is done and rolled out.  However, it looks like the benchmark is telling us that it is faster without rolling the curl.  The following is the testing script I'm using to compare with Rolling Curl.

Is there something I'm missing when I use this testing script??  Any thoughts??

// testing function
function multiple_curl_request($nodes){ 
        $mh = curl_multi_init(); 
        $curl_array = array(); 
        foreach($nodes as $i => $url) 
        { 
            $curl_array[$i] = curl_init($url); 
            curl_setopt($curl_array[$i], CURLOPT_RETURNTRANSFER, true); 
            curl_multi_add_handle($mh, $curl_array[$i]); 
        } 
        $running = NULL; 
        do { 
            usleep(1000); 
            curl_multi_exec($mh,$running); 
        } while($running > 0); 
        
        $res = array(); 
        foreach($nodes as $i => $url) 
        { 
            $res[$url] = curl_multi_getcontent($curl_array[$i]); 
            for($i = 0; $i < 500; $i++) {
                // just counting and do nothing
            }
        } 
        
        foreach($nodes as $i => $url){ 
            curl_multi_remove_handle($mh, $curl_array[$i]); 
        } 
        curl_multi_close($mh);        
        return $res; 
} 

Reply from Josh ( Author of Rolling Curl )

I bench marked Rolling Curl when I first wrote it and it was significantly faster.  Of course, since you're measuring things on the open web, there are lots of variables that come into play...  is the network just slow, are you overloading your own server, etc.  Keep in mind, the benefits of rolling curl mostly show up when you are dealing with large data sets.

I'd be interested to see the full code you used for your bench mark, although I won't have time to debug it for you.  

For a good benchmark, I would suggest you download the Alexia top 1,000 sites using regular curl_multi and compare the results with downloading the same list using rolling curl.  I think you will see the difference -- ie. regular curl_multi will probably choke on you.

jQuery Plugin Patterns

Here are some jQuery Plugin Patterns, the list is still expanding.  This post is mostly for my own reference, but just blog it here in case someone might be helped from this.

One note before you start doing your super fancy plugin.  The 'this' keyword in the immediate scope of the plugin is referring to the jQuery object, so there is no need to do $(this).  


Basic Form

  $.fn.yourPlugin = function(options, callback) {
    // ...
  };

Wrapped in Closure to create namespace

;(function($, window, undefined) {
  $.fn.yourPlugin = function(options, callback) {
    // ...
  };
})(jQuery, window);

Define multiple related functions (or related plugins) in one shot. 

;(function($, window, undefined) {
  $.extend($.fn, {
     yourPlugin: function() {
        // ...
     },
     yourSecondPlugin: function() {
        // ...
     }
  });
})(jQuery, window);

Prototype way

;(function($, window, undefined) {
  var pluginName = 'yourPlugin', pluginDefaultOptions = {};

  function Plugin(el, options) {
    this.element = el;
    this.options = $.extend({}, pluginDefaultOptions, options);
    this._name = pluginName;
    this.init();
  }  

  Plugin.prototype.init = function() {
    // ...
  }

  // make sure only one instance is instantiated
  $.fn[pluginName] = function ( options ) {
    return this.each(function () {
       if (!$.data(this, 'plugin_' + pluginName)) {
           $.data(this, 'plugin_' + pluginName,
           new Plugin( this, options ));
       }
    });
  }

})(jQuery, window);

Object Literal way

;(function($, window, undefined) {

    $.fn.pluginName = function(method) {

        var methods = {
            init : function(options) {
                this.pluginName.settings = $.extend({}, 
                                             this.pluginName.defaults, 
                                             options);
                return this.each(function() {
                    var $element = $(this), 
                         element = this;  
                    // ...
                });
            },

            my_public_method: function() {
                // ...
            }
        }

        var helpers = {
            my_private_method: function() {
                // ...
            }
        }

        if (methods[method]) {
            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
        } else if (typeof method === 'object' || !method) {
            return methods.init.apply(this, arguments);
        } else {
            $.error( 'Method "' +  method + '" does not exist in pluginName plugin!');
        }
    }

    $.fn.pluginName.defaults = {
        foo: 'bar'
    }

    $.fn.pluginName.settings = {}

})(jQuery, window);

Modified Object Literal way

;(function($, window, undefined){
    $.fn.packagename = function(options, callback){
        
        var params = $.extend({},
                        $.fn.packagename.default_options, options), 
                        $that = $(this);
        
        if($.isFunction(options)){
            callback = options;
            options = {};
        } 
        
        var methods = {
            init: function() {
               // ... 
            }
        }
        
        methods.init.apply(this,[]);      
    }
    
    $.fn.packagename.default_options = {
       src: ".data" 
    }
})(jQuery, window);

Caching with Memcache and APC

If you are doing PHP, you should be knowing what is cache and different type of cache strategies.  I bumped into this slides when I was comparing (or precisely documenting) different type of cache strategies.  This slide is focusing on Memcahe and APC, and when/why/how to use them.

How to hack Apache Server

Got an internal email about a "security thread" in Apache Server, and someone send me this link as well.

http://www.theregister.co.uk/2011/10/06/apache_webserver_attack/

There is another one, "Reverse Proxy Bypass"

http://www.contextis.com/research/blog/reverseproxybypass/

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"> .

TSG HTML5 Class for Beginners

Want to learn the current hottest buzz in web development - HMTL5 ??  Yes , it is very hot out there now!!

http://www.theriverflows.org/tsg/

I will be teaching an HTML5 class for Beginners.  I will cover HTML5 new elements, CSS3 and  javascript API ( e.g, canvas, geo-location and more ).  For more details, please visit their website.  You should see HTML5 in their "Current Classes" section.

Please go to TSG website to register if you are interested.

Date & Place

10/25, 11/1,8,15,22 total 5 meets from 7:30 pm to 9:30pm at G10, ROLCC

Course Detail

1. HTML5, CSS3 Introduction and Survey
2. New HTML5 elements and Structuring a page
3. Dwelling Deeper in CSS3
4. HTML5 javascript APIs introduction
5. Projects Demo, and what other thing you should know before going to interview

Each Session will have 30 mins hands on practice lab, so please do bring your laptop. This course is trying to get you understand the basic of HTML5 stack and how the industry is utilizing this hot tech buzz currently. It will be helpful if you have basic experience in HTML and CSS, but not required. See you there!

What will be the gift this year?

Every year God will give me a gift around my birthday, wonder what He will give me this year?  I'm looking forwarded to that.  Thanks God.  I still remember the gift He gave me for every year, and I'm very thanksgiving for that.

I praised God for His providence.

Funny Bugs Make Good Interview Questions

I'm currently collecting my set of standard interview questions for future candidates.  The following is one of the those which would be in my list, and it is coming from a bug that I found recently.

I was tracing some bugs few weeks ago and found out the following code snippets ( well, it is a modified version ).

Can you spot any potential problems for the following code?

filterResult: function(query, collection) { 
  var matches = [];
  var resLen = collection ? collection.length : 0;       
  for (var i = 0; i < resLen; i++) {            
    var item = collection[i];
    var itemStr = (item.name + com.search.ResultCache.PIECE_DELIM + item.id).toLowerCase();          
    if (itemStr.indexOf(query) != -1) {
 matches.push(item);
    }
  }
  return matches;
}

And my next question would be asking from performance and best practice points of view, how they could enhance this code.

Actually fixing this bug doesn't take that long, but the process of hunting this bug and tracing the logic is tedious.  The function works 99.9% of time, but it failed on a small number of test cases.  And the process of collecting failed cases and understanding the relationship among those failed test cases took quite some patience.  But seriously, it is fun :)

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

Status Code 204 Bug in older jQuery

Recently debugging an old tool written partially in jQuery ( version 1.3.2 ), and found out that the ajax call always ends up going to the error() callback.  But when I ping the web service, it is returning 2XX which is totally fine.  And I kept tracing until I found out a bug in that version of jQuery, aha!

Hope this post help those who may have a chance maintaining tools that are developed using older version of jQuery.

Some blogs mentioned that it is the jQuery doesn't accept 204 as success. But when I traced the jQuery code, I saw that it actually accepts 204 as a success.  So "204" is not the main reason.  Look at the following code snippets :-

        httpSuccess: function( xhr ) {

                try {

                        return !xhr.status && location.protocol == "file:" ||

                                ( xhr.status >= 200 && xhr.status < 300 ) || xhr.status == 304 || xhr.status == 1223;

                } catch(e){}

                return false;

        },

The main reason is not the http code 204 itself, but it is about what 204 actually means.  HTTP 204 means No Content.  It seems like "No Content" is something not correct at the very first impression, but think about this way, what about people who wants a web service to response a success but they don't need a body or message (well, they just want to know it is a success and that's all).  And that is what HTTP 204 means, success but no content.   

Even though the above jQuery snippets says that 204 is a valid response, and treated it as success;  however, somewhere later, jQuery has this function to throw a "parseerror" when there is no content.

        httpData: function( xhr, type, s ) {

                var ct = xhr.getResponseHeader("content-type"),

                        xml = type == "xml" || !type && ct && ct.indexOf("xml") >= 0,

                        data = xml ? xhr.responseXML : xhr.responseText;

                if ( xml && data.documentElement.tagName == "parsererror" )

                        throw "parsererror";

                . . .

So this is what jQuery ( older version ) says, "We accept 204, but if it is no content, we will throw you an error".

In order to fix the issue, you will need to do something in your error() callback

error: function(xhr, errText) {
   if(xhr.status == 204) {
       _successHandler(what, ever);
       return;
   }
   _errorHandler(what, ever);
}

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

Basic Linux commands for LAMP developer

Came across this blog recently, and found it's quite useful.  It covers some basic useful commands that a LAMP developer may need to use from day to day.


http://www.addedbytes.com/blog/basic-linux-command-line-tips/


Besides the list above, let me include some of which I think all LAMP developer should have known.  [ Note:  I'm not including any advanced commands here, since this post is about basic only. ] 


wget - for retrieving stuff

wget http://somewhere.com/release/stuff-0.0.13/stuff.tgz

scp - copy stuff in ssh way

scp fileA.tgz me@yourhostname:/path/you/want

rsync - it keeps an index of sync files which decrease the bandwidth usage when transferring ( yes, dump ftp )

rsync -avu  -e ssh ~/path/to/stuff me@hostname:/path/to/sync-with

top - check running process status, the basic usage is to check which process is taking the most memory, for example.


tar - backup by creating tarball, and you can use with other params to create tgz ( tar gzip ), for example.


alias - create alias for your commands, this will save you tons of time.


export - export a shell variables in your current session.


find - find files

find /mp3-folder -name 'Celio*' -and -size +10000k 

Please don't ask me why you don't see "mv, ls, rm, mkdir ... etc".  Those are not should know, those are MUST know for LAMP developer.


Please feel free to add (comment) what you think the basic commands that we all should know and is not listed above. 

US Debt Crisis and Impacts

The video maybe exaggerated the consequences of the debt crisis, but it's definitely something we need to think about for this country and our consumption habits in general.

The following is a fiction video of what happen if one day the dollar crashes. Well, it is fictional, I don't think the leader in our country will let this happen.  But that's still scary.

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/

Web Designers v.s. Web Developers

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/

The war between Developers, Designers and Project Managers

 

HTML5 video player comparison

Here is the link

http://praegnanz.de/html5video/

High Performance HTML5 Slides

Get Start with CoffeeScript

What is CoffeeScript?
For starter, it is a language that compiles to JavaScript prior to execution, so there’s no compilation at runtime. And let's quote from their website:-

The golden rule of CoffeeScript is: "It's just JavaScript". The code compiles one-to-one into the equivalent JS, and there is no interpretation at runtime. You can use any existing JavaScript library seamlessly (and vice-versa). The compiled output is readable and pretty-printed, passes through JavaScript Lint without warnings, will work in every JavaScript implementation, and tends to run as fast or faster than the equivalent handwritten JavaScript.

For example

square = (x) -> x * x
cube   = (x) -> square(x) * x

will translate to

var cube, square;
square = function(x) {
  return x * x;
};
cube = function(x) {
  return square(x) * x;
};

There are some useful links you can take a look in order to understand or get familiar with it, if you will.

http://net.tutsplus.com/tutorials/javascript-ajax/rocking-out-with-coffeescript/

http://dailyjs.com/2011/05/30/code-review-coffeescript/

http://jashkenas.github.com/coffee-script/

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/

HTML5 - Correct way to use section element

I found this link recently, it's a pretty good article talks about the correct way to use section element.  Since there are so many developers have mistaken the usage of this element, and I think it worth a blog entry on that :)

http://html5doctor.com/the-section-element/

In a nutshell, here is the basic rule of thumbs

• Don’t use it just as hook for styling or scripting; that’s a div
• Don’t use it if article, aside or nav is more appropriate
• Don’t use it unless there is naturally a heading at the start of the section

For more HTML5 resources

HTML5 Glossary

http://html5doctor.com/element-index/

HTML5 - edition for web developers

http://developers.whatwg.org/

Can I use

http://caniuse.com/

HTML5 Test
http://beta.html5test.com/

How to order you head section

http://blogs.msdn.com/b/ieinternals/archive/2011/07/18/optimal-html-head-ordering-to-avoid-parser-restarts-redownloads-and-improve-performance.aspx

Html5 headings and  accessibility 

http://www.brucelawson.co.uk/2009/headings-in-html-5-and-accessibility/

Efficiently Rendering CSS

http://css-tricks.com/6386-efficiently-rendering-css/

Dive Into HTML5

http://diveintohtml5.org/

HTML5 Rocks

http://slides.html5rocks.com/#landing-slide

Latest in HTML5

http://html5-demos.appspot.com/static/html5-whats-new/template/index.html#1

The Expressive Web

http://beta.theexpressiveweb.com/

HTML5 WoW

http://www.htmlfivewow.com

Frontend Developer
http://www.front-end-developer.com/

Juude Blog about HTML5
http://juude.info/html5-layout.php

Best CSS3 Resources
http://www.linkedin.com/news?viewArticle=&articleID=784509223&gid=2071438&type=member&item=71538466&articleURL=http%3A%2F%2Fstylishwebdesigner%2Ecom%2F150-excellent-css3-tutorials-to-make-you-a-stylish-web-designer%2F&urlhash=U0xc&goback=%2Egde_2071438_member_71538466

10 Tools to simplify HTML5
http://www.catswhocode.com/blog/10-online-tools-to-simplify-html5-coding

The A to Z of Trending Web Development Technologies

WRITTEN BY AHMAD PERMESSUR.

This doesn’t mean you need to learn and use all possible web technologies and techniques listed in here. Mixing everything together eventually leaves holes big enough to drive a truck through. Instead, it’s common wisdom to use a technology only when it solves an issue.

If you’re curious about new web development technologies and techniques to use for your projects, then grab a cup of coffee and enjoy our A to Z of Trending Web Development Technologies & Tools.

A - Azure

Azure is Microsoft’s cloud services operating system that provides developers with on-demand compute and storage to host, scale and manage web application through Microsoft’s datacenters. The Windows Azure platform supports multiple languages including ASP.NET, Java, PHP and Ruby along with standards and protocols like SOAP, REST and XML. Other than its scalable hosting environment, Windows Azure also provides durable storage in the cloud and a content delivery network (CND).

B - BBC’s Glow JavaScript Library

BBC’s Glow JavaScript library allows developers to easily manipulate web pages, create animations and add sophisticated widgets to their web pages. It simplifies DOM manipulation and event handling by abstracting common tasks, hiding cross-browser issues, and providing a set of user interface widgets.

C - Closure

Closure is a set of tools developed by Google that help developers build rich web application with JavaScript that is both powerful and efficient. The Closure Compiler for instance, compiles JavaScript into a compact (minified version) and high-performance code. It also checks syntax, variable references, and types, and warns about common JavaScript pitfalls. These checks and optimizations help you write apps that are less buggy and easier to maintain.

D – Dragonfly

Dragonfly is a built-in debugging environment for the Opera browser. You can debug JavaScript, inspect or edit CSS / DOM elements on-the-fly and view errors on either your mobile or computer. It also supports monitoring for network activity. If you are a developer, or a designer, Opera Dragonfly has the tools to keep you covered. It is comparable to Firefox’s Firebug or Safari’s Web Inspector.

E - Erland

Erland is a programming language that was initially developed to create massive real-time telecom applications. However, it is slowly paving its away to power more web services. Facebook, for example, uses Erland to drive its chat system. There are several Erland frameworks aimed at developing web applications that are worth checking: ErlyWeb, Erland Web and the Nitrogen Project. http://sergioveiga.com/index.php/2009/12/02/erlang-on-nitro-erlang-web-development-tutorial-part-13/

F - Flash Catalyst

Flash Catalyst is interaction design software that allows designers to create user interface for Rich Internet Applications (RIA) easily without requiring extensive programming knowledge. Flash Catalyst supports import of graphics from graphic software and once the interface is created, it can be exported to Flash Builder. It is a pretty decent tool that aids in architecture applications prior to development.

G - Git

Git is a free, open source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git clones are full-fledge repositories with complete history and revision tracking capabilities. With Git, branching and merging repositories is fast and easy to do.

H - HipHop

HipHop is a runtime compiler for PHP that transforms your PHP source code into highly optimized C++ to improve performance of server’s CPU usage. It was created by Facebook to save resources on its server and while it can substantially increase the speed of PHP applications, it is going to be only beneficial if you have a large-scale application.

I - ICEfaces

ICEfaces is an open source Ajax framework that enables Java EE application developers to create and deploy server-based rich Internet application using the Java language.

J - Jsoup

Jsoup is a Java library for working with real-world HTML. It provides a very convenient API for extracting and manipulating data, using the best of DOM, CSS, and jquery-like methods. You can for example use it to scrape data from a URL and find and extract data using DOM traversal and CSS selectors.

K - Kodigen

Kodingen is a cloud development environment combining an online code editor, cloud hosting along with both web-based access to file-system and FTP. It is free and provides developers with a feature-rich collaboration and social coding tools along with integration with a wide variety of existing frameworks and third party APIs. Kodingen also offers one-click installs for popular open source scripts like Drupal, Joomla and WordPress – great for testing something in a safe sanbox.

L - LightSwitch

LightSwitch is a new development tool in the Microsoft Visual Studio family that allows developers to build business applications for the cloud and desktop. By using pre-build templates and tools, you can quick create applicatison for Windows Client or Windows Azure without focusing much on writing code. LightSwitch creates Silverlight applications that can run in the browser, out-of-the-browser, or in the cloud.

M - MongoDB

MongoDB is a scalable, high-performance, open source, documented-oriented database. It is a NoSQL database whereby which data is not stored in fixed table schemas, but rather as collections of JSON-like documents. Many applications can thus model data in a more natural way, as data can be nested in complex hierarchies while being still query-able and indexable.

N - Node.js

Node.js is a server-side JavaScript environment based on Google’s V8 JavaScript engine. Unlike web server which establishes thread-based connections, Node.js is event-driven which helps execute a lot of requests concurrently very quickly without using much server resources.

O - OAuth

OAuth is basically an open protocol that allows secure API authorization in a simple and standard method from desktop, web and mobile applications. This technical definition may bamboozle many of you, but in a nutshell it is an authorization method that allows you to share your private information like photos, videos, contact list stored on one site with another site without having to disclose your username and password.

P - Plupload

Plupload is an upload handler that allows you to upload files using HTML5 Gears, Silverlight, Flash, BrowserPlus or normal forms, providing some unique features such as upload progress, image resizing and chunked uploads. It has a powerful API that will allow you to further customize it.

Q - Qooxdoo

qooxdoo is a universal JavaScript framework that enables you to create applications for a wide range of platforms. With its object-oriented programming model you build rich, interactive applications (RIAs), native-like apps for mobile devices, lightweight traditional web applications or even applications to run outside the browser.

R – Redis

Redis is an open source, advanced key-value store, often referred to as a data structure server. Similar to MongoDB featured above, Redis is a NoSQL database with great performance and scalability. It can read and write really fast opening huge possibilities of new features for resource-constrained web applications.

S - SimpleGeo

SimpleGeo is a web service that allows developers to easily add location-aware features to their applications. They offer three geo services for developers: storage, context and places. All are priced depending on the number of API calls you make, but they have some free plans based on limits as well.

T - Titanium

Titanium is a free and open source framework for building native desktop and mobile applications using open web technologies (JavaScript, HTML and CSS). It also has support for PHP, Python and Ruby. You can create great applications for desktop and mobile without learning a new programming language. Through its SDKs, this tool does all the hard work under the hood and even provides interfaces to access native desktop and mobile APIs.

U - Umbraco

Umbraco is an open source ASP.NET content management system with the flexibility to run anything from small campaign to brochure sites right through to complex applications. It is easy to learn and use, making it perfect for web designers and developers alike. Unlike traditional CMS solutions, Umbraco has a powerful API and integrates well with .NET controls.

V - Varnish Cache

Varnish Cache is an open source, state of the art web application accelerator. You install it on your web server to cache your content that will eventually reduce your website’s load time. It does so by storing web pages in memory so web servers don’t have to create the same web page over and over again.

W - WebP

WebP is an open source image format created by Google. This new image format is aimed at further compressing lossy images to make them load faster all the while preserving quality and resolution. Google believes that images not compressed properly can significantly slow down a user’s web experience, especially on mobile devices.

Y - Yahoo! Query Language

Yahoo! Query Language, most commonly known as YQL, is a web service platform that provides an easy way to query and manipulate data across several API providers. It borrows its syntax from SQL and through a set of predefined data storage and mapping, it eliminates the need for you to learn how to call different APIs, thus making it easier to build and run applications with fewer line of codes. With YQL, you can for example easily pull list of images for a FlickR account, geo-locate businesses based on your user’s IP address or return weather results for a particular location.

Z - ZK

ZK is a highly productive open source Java framework for building amazing enterprise web and mobile applications with no JavaScript and little programming. ZK supports all major patterns of development such as MVC, data-binding, templating, among others.