Useful articles for mobile dev.

Part 1: The viewport metatag

Part 2: The mobile developer’s toolkit
Part 3: Designing buttons that don’t suck
Part 4: On designing a mobile webpage
Part 5: Using mobile-specific HTML, CSS, and JavaScript
Part 6: Dealing with device orientation
Part 7: Mobile JavaScript libraries and frameworks
(source: http://davidbcalhoun.com)

[CSS3] media query template for mobile friendly version

/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
}

/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
}

/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
}

/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
}

/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
}​

A fix for iPhone viewport scale bug

source code
var viewportmeta = document.querySelector && document.querySelector('meta[name="viewport"]'),
ua = navigator.userAgent,
gestureStart = function(){
    viewportmeta.content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";
},
scaleFix = function(){
  if (viewportmeta && /iPhone|iPad/.test(ua) && !/Opera Mini/.test(ua)) {
    viewportmeta.content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";
    document.addEventListener("gesturestart", gestureStart, false);
  }
};
scaleFix();​

source: http://www.blog.highub.com/mobile-2/a-fix-for-iphone-viewport-scale-bug/

Free flash mp4 player for html5 video fallback

Here is list on mp4 player without watermark while you are playing the video.

http://www.webestools.com/flv-player-free-flash-mp4-mov-h264-put-videos-on-your-website-streaming-video-player-flv.html

http://gokercebeci.com/dev/f4player

note: if you find any useful resource please tell me.

[JS] Easy way to detach browser

source code
// browser detection
$('html').removeClass('no-js');
$.each($.browser,function(a,b){
    if(a!='version'){
        if(a=='msie'){
            var v=Math.floor($.browser.version);
            $('html').addClass('ie ie'+v);
            for(var i=v;i<=10;i++)if(v<i)$('html').addClass('lt-ie'+i);
        }
        else $('html').addClass(a);
    }
});​

example (http://jsfiddle.net/NV5k6/)
<!-- before run js -->
<html class="no-js">
<head>....</head>
<body>....</body>
</html>​

<!-- after run js (running on ie8) -->
<html class="ie ie8 lt-ie9 lt-ie10">
<head>....</head>
<body>....</body>
</html>​

[JS] Jquery sorting json

source code
$.fn.sort = function(){
    return this.pushStack([].sort.apply(this,arguments),[]);
};​

example (http://jsfiddle.net/wMzXL/)
function sortLastName(a,b){
    if (a.l_name == b.l_name){
        return 0;
    }
    return a.l_name> b.l_name ? 1 : -1;
}
function sortLastNameDesc(a,b){
    return sortLastName(a,b) * -1;
}
var people = [{
    "f_name": "john",
    "l_name": "doe",
    "sequence": "0",
    "title" : "president",
    "url" : "google.com",
    "color" : "333333"
},{
    "f_name": "michael",
    "l_name": "goodyear",
    "sequence": "0",
    "title" : "general manager",
    "url" : "google.com",
    "color" : "333333"
}];
var sorted = $(people).sort(sortLastNameDesc);

source: http://stackoverflow.com/questions/881510/json-sorting-in-jquery