<commit_before>һֻ+Website
1Issue Descirption--position:fixed ͷfixedios5豸ıfocusʱֶλʧܵ⣬
   
   Fixed Solutions
   1)һ֣metaǩtagert-denstydpi=device-dpi
       ֻandroidϵͳãרԡIOS֧ڼ

   2)ڶ֣лʱ䶨λ޸Ϊposition:absolute;ҳȻлȥԭá

2Issue Descirption--ǩptdh1-h6,spanȰʱֻmin-width:320px

   Fixed Solutions
   1)ҪʵһȻݱ... ҪΪ丸Ԫغͱcss.
    .xx{ overflow:hidden;text-overflow:eillipsis;white-space:nowrap;}

   2)Ҫڵcss   ----Ӣĵ
    .xx{word-breakbreak-all;}    ..xx{word-break:break-word;word-nowrap:break-word;}
    
   3)ǰ̨ݹʱjsȡԶַ+"..."Ҳں̨ȡ

3Issue Description--footer on the bottom forever.

   Fixed Solutions:
   ʹù̶htmlṹcssдʵfooterԶ ===Following example.
   Html Markup
   <div id="container">
        <div class="nav"></div>
        <div id="page">
            <div class="content"><p>test</p><p>test</p><p>test</p>
              <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
              <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            </div>
        </div>
    </div>
    <footer>
        <div class="copyright">There is nothing can tell you.</div>
    </footer>

   CSS Markup
   html, body {
     height: 100%;margin:0;padding:0;
     background-color:#000;
   }
   #container{
     min-height: 100%;
	 height: auto !important;
	 height:100%;
     background-color:blue;
   }
    
   #container #page { 
     padding-bottom: 75px;//equal footer height
   }
   footer {
  	 height: 75px;//footer height
     margin-top:-75px;//equal footer height
     clear:both;
     background-color:yellow;
   }
   .nav { width:100%;height:95px;background-color:green; }
   
   Ps:ʹʱhtmlṹ㲻Ҫ#containerfooter֮ǰԪأ뽫Ԫصĸ߶Ҳȥ
      ʹpadding-bottomֵԶmargin-topֵ

4html+css3ҳ湹ʱҪѭW3CıǩǶʹõĹ򡣴뾡࣬ҪʹùࡣעҪע͵

5þԶλԶλֻ趨positionԺz-indexárelative absolute fixed static(default value)

6ڲ֧Html5CSS3ĳЩԵ

	Fixed Solutions:
	1)ʹhtmlҳע html5shiv.jsԼزͬIE汾CSS
	<!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->
	<!--[if IE8]><link rel="stylesheet" href="ie8.css" type="text/css"/><![end if]-->

	2)ʹmodernizr.js⵱ǰֵ֧CSS3

	3)Բͬüд+ԣ===Following Example
	CSS Markup:
	-webkit-transition:all 0.4 linear 0.1;
	-moz-transition:all 0.4 linear 0.1;
	-o-transition:all 0.4 linear 0.1;
	transitionall 0.4 linear 0.1;

	4)ʹcss hackд<ôڳһЩǱڵΣա>
	_property==ѡIE6  
	+# *property==ѡIE7  
	\9 ѡIE6+  
	\0 ѡIE8+Opera15µ

7absoluterelativefixedindex໥Ƕʱִжʱbug

8ַfloat.
	1)#test{clear:both;}  #testΪԪصһֵԪ
	2)#test{display:block;zoom:1;overflow:hidden;}  #testΪԪصĸԪءzoom:1Ҳ滻Ϊ̶widthheight
	3)#test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}  #testΪԪصĸԪ

9֪߶ȵҳˮƽֱУ
	Solution#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

10˽CSSģʽOOCSSSMACSS
   1)OOCSS--CSS
   һĵдṹӦû HTML һҪЩ <a> ǩʽCSS дд .nav--main ul li a {}
   дȲЧϵ⣬ԿȵԪرǩĽṹп֮ HTML ṹı䣬 CSS ͱع
   ά϶ĳɱ
    ܽ᣺ٶ HTML ṹCSS classظԵʹ
   2)SMACSS
    BASE--Base 趨ǩԪصԤֵ reset д
    LAYOUT--Layout ָվġܹۣ .button СԪ classվͨһЩҪĴ飬 header  footerLayout Щܹ CSS
    MODULE-- Module ˼壬ǿطظʹ
    PARTIAL--Partial  Layout ͬҲ Module ͬ Layout ķΧСheader µĳԪء Moduleضһر趨
    STATE--State Ԫزͬ״̬£ֵʽǲָһԪص :hover  :active µ״̬˵һҳĿǰҳķҳҪ .active
    THEME--Theme  Layout һ𡸴ܹϵʽƤ

11дάCSS
    1)˳
       1Reset ֮Դ
       2Ԫ û class  h1ul 
       3Լ һ㡢ģʽ
       4Ԫ ɶչԪ
       5޲ 쳣״̬
    2)CSS 򼯷
       1class ַ-ӣᵽ BEM 
       2 4 ո
       3ֳɶУ
       4˳Уĸ˳
       5ǰ׺ʵӶֵ
       6ʽӶӳ DOM
       7һβķֺš
    3)淶
       1BEM--Block Element Modifier
	    .block{}
		.block__element{}
		.block--modifier{}
		У
		.block ĳĳԪأ
		.block__element  .block һһԪأ
		.block--modifier  .block ĳͬ״̬
       2Ϊȷ׶ԣ HTML ո class 磺<div class="foo--bar  bar__baz">
	   3ǧҪ CSS ʽ JavaScript ӡ JS Ϊʽһ޷ֱҪ JS ĳЩǰĻ
	   дһ JS רõ class򵥵˵ǻһǰ׺ .js- ռ䣬 .js-toggle.js-drag-and-dropζǿͨ 
	   class ͬʱ JS  CSS Ϊͻ鷳
	   4I18n-- CSS ʽƴ  $brand-color$highlight-color
	 4)ע
	 ʹп 80 ֽڵĿ״עͣ
	/**
	 * һĵ飨DocBlockע͡
	 *
	 * ￪ʼϸƪעġȻҪп 80 ڡ
	 *
	 * ǿעǶ HTML ǣҲǸİ취
	 *
		<div class=foo>
			<p>Lorem</p>
		</div>
	 *
	 * עǶıǵĻǰ治Ǻţᱻƽȥ
	 */
     עӦϸ룬Ϊ˵׶ݶ˿ܲˡÿдһִҪרдע⡣
	 עȽ÷磺
		1׼ѡ--/*html*/.product-page{} /*ol*/.breadcrumb{} /*p*/.intro{} /*ul*/.image-thumbs{}
		2ǩ--
		/**
		 * ^navigation ^lists
		 */
		.nav{}

		/**
		 * ^grids ^lists ^tables
		 */
		.matrix{}
		3̳б--
		ԪصĻʽУ
		/**
		 * Extend `.foo` in theme.css
		 */
		 .foo{}
		ԪصչʽУ
		/**
		 * Extends `.foo` in base.css
		 */
		 .bar{}
	5)OOCSS--CSS
	Ҫдһʱֳɽṹ()(չ)дṹʱͨ class Ա֤ԣдʱø class Ʒ
		.room{}
		.room--kitchen{}
		.room--bedroom{}
		.room--bathroom{}
		
12Ӵ߶ȵİٷֱ
	ĳԪصĶλСǻӴĸ߶ģе鷳ˣǶ˺ü
	css3ṩһvϵеĵλvhͱʾӴĸ߶ȣǰ׿4.3-֧֡Ǵrem֣ڿƼ⣺
	ͨjshtmlfont-sizeΪӴ߶ȵʮ֮һ1remͳӴ߶ȵ10%
	document.addEventListener("DOMContentLoaded", function(event) {
		document.documentElement.style.fontSize = window.innerHeight/10 + "px";
	});
  
Javascipt

1jsжPCƶ豸
	function IsPC() {
		var userAgentInfo = navigator.userAgent;
		var Agents = ["Android", "iPhone",
					"SymbianOS", "Windows Phone",
					"iPad", "iPod"];
		var flag = true;
		for (var v = 0; v < Agents.length; v++) {
			if (userAgentInfo.indexOf(Agents[v]) > 0) {
				flag = false;
				break;
			}
		}
		return flag;
	}

2autocompletechormeвãfixed solutions  رյڶԶıֵ
	(function(){
	if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
	var selectors = document.getElementsByTagName("input");
	for(var i=0;i<selectors.length;i++){
	if((selectors[i].type !== "submit") && (selectors[i].type !== "password")){
	var input = selectors[i];
	var inputName = selectors[i].name;
	var inputid = selectors[i].id;
	selectors[i].removeAttribute("name");
	selectors[i].removeAttribute("id");
	setTimeout(function(){
	input.setAttribute("name",inputName);
	input.setAttribute("id",inputid);
	},1)
	}

	}

	}
	})()

3ie9֧placeholder Best Practise Solution: jquery.placeholder.js)
	$(function(){  
	 
	  //жǷ֧placeholder
	  supportPlaceholder='placeholder'in document.createElement('input'),
	 
	  placeholder=function(input){
	 
		var text = input.attr('placeholder'),
		defaultValue = input.defaultValue;
	 
		if(!defaultValue){
	 
		  input.val(text).addClass("phcolor");
		}
	 
		input.focus(function(){
	 
		  if(input.val() == text){
	   
			$(this).val("");
		  }
		});
	 
	  
		input.blur(function(){
	 
		  if(input.val() == ""){
		   
			$(this).val(text).addClass("phcolor");
		  }
		});
	 
		//ַΪɫ
		input.keydown(function(){
	  
		  $(this).removeClass("phcolor");
		});
	  };
	 
	  //֧placeholderʱplaceholder
	  if(!supportPlaceholder){
	 
		$('input').each(function(){
	 
		  text = $(this).attr("placeholder");
	 
		  if($(this).attr("type") == "text"){
	 
			placeholder($(this));
		  }
		});
	  }
	 
	});

4jsֺ֧أضҪɲȡģʽ
	function test(){

	   if(arguments.length=0){
		  alert('!');
	   }else if(arguments.length=1){
		  alert(arguments[0]);       
	   }
	   else if(arguments.length=2){
		  alert(arguments[0]);
		  alert(arguments[1]);
	   }

	}
	test();
	test(10);
	test(10,20);

5contentTypetext/htmltext/plain
	1)text/html˼ǽļcontent-typeΪtext/htmlʽ
	PSڻȡļʱԶhtmlĽļӦĴ

	2)text/plain˼ǽļΪıʽ
	Ps: ڻȡļʱд

6ʹString.Split(new char[]('x'),StringSplitOptions.RemoveEmptyEntry)

7ʹjsЧȥĳarrylist顣
	Array.prototype.unique3 = function(){
	 var res = [];
	 var json = {};
	 for(var i = 0; i < this.length; i++){
	  if(!json[this[i]]){
	   res.push(this[i]);
	   json[this[i]] = 1;
	  }
	 }
	 return res;
	}
	var arr = [112,112,34,'',112,112,34,'','str','str1'];
	alert(arr.unique3());

8placeholder
	<select>  
		<option value='' disabled selected style='display:none;'>Please Choose</option>  
		<option value='0'>Open when powered (most valves do this)</option>  
		<option value='1'>Closed when powered, auto-opens when power is cut</option>  
	</select>  
	PS:һѡ֮ͻʧ,Ӱѡ

9Ajaxʱַʽ
	getƴurlʹݲʱҪע⣬Ҫֱӽؼֵַ
	url: 'renameTag?Id=' + id + '&tagName=' + $('input[name="tagName"]').val()

	ִ󣺾IE ݸ̨tagNameֵı
	취ʹdata data: { Id: id, tagName: $('input[name="tagName"]').val() }

10JSHint Error : This character may get silently deleted by one or more browsers
    ļʽȷUTF-8 BOMʽNotePad++תһ¸ʽ UTF-8 BOMʽɽ

11Match Files  [Gulp learn note]
	1)* ƥļ·е0ַƥ·ָ·ָĩβ
	2)** ƥ·е0Ŀ¼Ŀ¼Ҫ֣ҲˡĩβҲƥļ
	3)? ƥļ·еһַ(ƥ·ָ)
	4)[...] ƥ䷽гֵַеһеһַΪ^!ʱʾƥ䷽гֵַеһ
	5)!(pattern|pattern|pattern) ƥκиһһµĶƥġ
	6)(pattern|pattern|pattern) ƥиһ0λ1Ρ
	7)+(pattern|pattern|pattern) ƥиһ1Ρ
	8)*(a|b|c) ƥиһ0λΡ
	9)@(pattern|pat*|pat?erN) ƥиһ1Ρ

ʵ⣺
	1)* ƥ a.js , x.y , abc , abc/ƥ a/b.js
	2)*.* ƥ a.js , style.css , a.b , x.y
	3)*/*/*.js ƥ a/b/c.js , x/y/z.jsƥ a/b.js , a/b/c/d.js
	4)** ƥ abc , a/b.js , a/b/c.js , x/y/z , x/y/z/a.bƥеĿ¼ļ
	5)**/*.js ƥ foo.js , a/foo.js , a/b/foo.js , a/b/c/foo.js
	6)a/**/z ƥ a/z , a/b/z , a/b/c/z , a/d/g/h/j/k/z
	7)a/**b/z ƥ a/b/z , a/sb/zƥ a/x/sb/zΪֻе**ֲƥ༶Ŀ¼
	8)?.js ƥ a.js , b.js , c.js
	9)a?? ƥ a.b , abcƥ ab/Ϊƥ·ָ
	10)[xyz].js ֻƥ x.js , y.js , z.jsƥ xy.js , xyz.js ȣֻһַ
	11)[^xyz].js ƥ a.js , b.js , c.jsȣƥ x.js , y.js , z.js

12Android 6+ֻ ļϴֶ֧ͼ֧muliputeԡ  
	Android 6+ֻ֧ļϴmuliputeԣֶ֧ͼϴʹõwebuploader֮ǰĬǶѡģô㶼ãΪѡ󣬾ʹˡ
	ڽĹзAndroid 6+ accept='image/*'֧Ҳ͵ĲͬͬСĵֻͲʶ𡣵HTCIOSʶ

13Javascript Math ȡ
	1)ַתΪ:parseInt(str);parseInt("7.6")**7
	2)ȡ,Сּ1:Math.ceil(number) ;Math.ceil(7.6) **8
	3)ȡ,ȥС : Math.floor(number) ;Math.floor(7.6) **7
	4) :Math.round(number) ;Math.round(3.4) **3, Math.round(3.5)**4

140ʼ
        1dbcc checkident('test',reseed,0)   testΪ
        2truncate table test()

15JSжַstringǲDate
function isDate(s) {
        // make sure it is in the expected format
        if (s.search(/^\d{1,2}[\/|\-|\.|_]\d{1,2}[\/|\-|\.|_]\d{4}/g) != 0)
            return false;

        // remove other separators that are not valid with the Date class    
        s = s.replace(/[\-|\.|_]/g, "/");

        // convert it into a date instance
        var dt = new Date(Date.parse(s));

        // check the components of the date
        // since Date instance automatically rolls over each component
        var arrDateParts = s.split("/");
        return (
            dt.getMonth() == arrDateParts[0] - 1 &&
            dt.getDate() == arrDateParts[1] &&
            dt.getFullYear() == arrDateParts[2]
        );
}

 String.prototype.isTime = function() {
            var r = this.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
            if (r == null) return false;
            var d = new Date(r[1], r[3] - 1, r[4]);
            return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]);
        };

		function isDate(s) {
        // make sure it is in the expected format
        if (s.search(/^\d{1,2}[\/|\-|\.|_]\d{1,2}[\/|\-|\.|_]\d{4}/g) != 0)
            return false;

        // remove other separators that are not valid with the Date class    
        s = s.replace(/[\-|\.|_]/g, "/");

        // convert it into a date instance
        var dt = new Date(Date.parse(s));

        // check the components of the date
        // since Date instance automatically rolls over each component
        var arrDateParts = s.split("/");
        return (
            dt.getMonth() == arrDateParts[0] - 1 &&
            dt.getDate() == arrDateParts[1] &&
            dt.getFullYear() == arrDateParts[2]
        );
}

 String.prototype.isTime = function() {
            var r = this.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
            if (r == null) return false;
            var d = new Date(r[1], r[3] - 1, r[4]);
            return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]);
        };
16jquery̬¼on()  
            ڶΪռ䣬ж̬ӵԪa.js-add-itemΪ¼
            $('.panel-body').on('click', 'a.js-add-item', function (e) {
                 addOption(e.target);
            });

            $('.panel-body').on('click', 'a.js-delete-item', function (e) {
                delOption(e.target);
            });
			
17jquery 'click' event doesn't work on iOS Safari.
			$('body').on('click touchstart', 'img',function(){
			   //something goes here
			})
			IosSafariʹclick¼ίУֻclick¼ôãִк
			Աͬʱtouchstart¼PSclick = touchstart + touchend
			
			Web/API--TouchEvent
			
			touchstart
			touchmove
			touchleave
			touchenter
	        touchcancel
			touchend
			
			New Solution:
	        var timestamp;
			$('body').on('touchstart', 'img',function(){
			    timestamp=new Date().getTime();
			});
			
			$('body').on('touchend', 'img',function(){	   
				var timestampEnd = new Date().getTime();            
				if (timestampEnd - timestamp < 300) {
					//something goes there
				}
			});
			
			Source link: 
			https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
			
			
18CMDAMDĽܺ
    1.AMD--(첽ģ鶨)ΪƵġAMD һ JavaScript ģ첽ر׼ͬص⡣

    淶ֻһȫֵdefine
    define(id?: String, dependencies?: String[], factory: Function|Object);
	
	instance:
	//һTestģ
	define('Test',['jquery'], function($){
	  return {
		sayHello: function(){
		  $('body').text('Hello World');
		}
	  }
	});

	// ʹTestģ
	define(['Test'], function(Test){
	  Test.sayHello();
	})
	
    2.CMD--CommonJS淶Ϊ˽ JavaScript ģʽʹÿģռִС
	ù淶Ҫǣģͨ module.exports ıӿڣͨrequire() ģǰģ
	
	淶ֻһȫֵdefine
    define(factory);
    úֻһfactoryΪЧֵfactoryΪģúķֵ
	ǰֱΪrequire, exports, module 
	* require: * requireһһģظģģû򷵻null 
	* require.async: һһģбһص(ѡ)úģΪ˳ģб˳һ 
	* exports: ӸģĽӿ 
	* module * module.uri: ģľ· 
	* module.dependencies: ģģб 
	* module.exports: ģ
	
	instance:
	// math.js
	define(function(require, exports, module) {
	   exports.add = function() {
		var sum = 0, i = 0, args = arguments, len = args.length;
		while (i < len) {
		  sum += args[i++];
		}
		return sum;
	  };
	})

	// increment.js
	define(function(require, exports, module) {
	  var add = require('math').add;
	  exports.increment = function(val) {
		return add(val, 1);
	  };
	});

	// program.js
	define(function(require, exports, module) {
	  var inc = require('increment').increment;
	  var a = 1;
	  inc(a); // 2

	  module.id == "program";
	});
	
	3.
	   1)ģ飬AMDǰִеģCMDӳִеġCMDƳͽAMDƳǰá
		CMD淶УǿԽдڴһС
		define(function(require, exports, module){
			var a = require(../a);
			a.do();
			var b = require(..b);
			b.do();
		})

	   еʱ򣬿ʼǲ֪ģڱеrequireҳмءΪȽеfunctionַ
	   ȻƥrequireؼֺĴ۾ܡ
	   AMDǰãڴ֮ǰģὫемء
		define(['./a', './b'], function(a, b){
		  a.do();
		  b.do();
		})
	    ǱڿʼʱʾָǵдĺܶʱͻȻҪĳҪͷнӣȻﲢƼһдùڳά 
		ǻһ󣬾ںִеʱ򲢲ǰ֪ģǷҪ
		if(status){
		  a.do();
		}
	    ڣaҲܲһģӲֲһǿԽӲ\
		˷ܵġҪһִʽ
		define(['require', './b'], function(require, b) {
		  // to do somthing

		  if(status){
			require(['/a'], function(a) {
			  a.do();
			})
		  }
		  b.do();
		})	
	 
	4.ܽ
	    jsʵ
	    1)ȣǰǰõ˼룬Ӳǰã첽صķʽ롣 AMD
        2)ɱ: ǰͽ˼Ƽ CMD

19JS Math.random()
    ԭrandom()ɷؽ0~1֮һ

	1)ϣ1ֵ
	// max - ֵ
	parseInt(Math.random()*max,10)+1;
	Math.floor(Math.random()*max)+1;
	Math.ceil(Math.random()*max);

	2)ϣ0ֵ
	// max - ֵ
	parseInt(Math.random()*(max+1),10);
	Math.floor(Math.random()*(max+1));

	3)ϣֵֵ
	// max - ֵ
	// min - Сֵ 
	parseInt(Math.random()*(max-min+1)+min,10);
	Math.floor(Math.random()*(max-min+1)+min);

͵Լ+

1ElementsҳмõĿݼ  [chrome dev tools]
	1)ѡ¼ٵҼչ
	2)enterٱ༭ԣ
	3)tabл
	4)Hdom֪ݼ֮ǰҪôɾdomЧҪôֹdisplay:noneHͷˡ
  
2npm
	װnpm [-g] [--save-dev]
	²npm update [-g] [--save-dev]
	жزnpm uninstall [-g] [--save-dev]
	ָ汾npm install @VERSION [--save-dev] VERSIONҪİ汾ţ

3ĿӦð
	1)ؿĳʼ node.js+npm   packge.jsonļ dev
	2)Ĺ
	3)Դļ
	4)Զ
	5)pipeline͸

4git
    1)git stash  ʱֳ
	  git stash list   鿴list
	2)git stash apply ָ֮ǰĹֳ
	3)git stash pop   ָɾ֮ǰĹֳ
	4)git branch -D <name> ǿɾûбϲķ֧
	5)git branch --set-upstream branch-name origin/branch-name ط֧Զ̷֧ӹϵ
	6)git tag -a v0.1 -m "version 0.1 released" <commit id>  PS:-a ָǩ -m  

ġWebȫ
1CSRF Cross Site Request Forgery --վα
   ԭûC¼εվwebA ûC¼ϢcookieûC¼˶⹥webBwebBCwebAcookieϢģʵûC
   
   
		 referrerУ ǳ򵥣֤һreferrerϷĲŸĿƻǺٱõģԭΪreferrerĲȶ˲ܱ֤ÿζȡreferrerhttpshttpкܶ취ģreferrer)
		 ֤ ţˣĵˮ©ϧףܷܲÿûһ֤ɣһֻĳЩضá
		 token  ӦڱȽͨõķȻtokenɷһ


<commit_msg>update new Experiences about jquery index()<commit_after>һֻ+Website
1Issue Descirption--position:fixed ͷfixedios5豸ıfocusʱֶλʧܵ⣬
   
   Fixed Solutions
   1)һ֣metaǩtagert-denstydpi=device-dpi
       ֻandroidϵͳãרԡIOS֧ڼ

   2)ڶ֣лʱ䶨λ޸Ϊposition:absolute;ҳȻлȥԭá

2Issue Descirption--ǩptdh1-h6,spanȰʱֻmin-width:320px

   Fixed Solutions
   1)ҪʵһȻݱ... ҪΪ丸Ԫغͱcss.
    .xx{ overflow:hidden;text-overflow:eillipsis;white-space:nowrap;}

   2)Ҫڵcss   ----Ӣĵ
    .xx{word-breakbreak-all;}    ..xx{word-break:break-word;word-nowrap:break-word;}
    
   3)ǰ̨ݹʱjsȡԶַ+"..."Ҳں̨ȡ

3Issue Description--footer on the bottom forever.

   Fixed Solutions:
   ʹù̶htmlṹcssдʵfooterԶ ===Following example.
   Html Markup
   <div id="container">
        <div class="nav"></div>
        <div id="page">
            <div class="content"><p>test</p><p>test</p><p>test</p>
              <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
              <p>test</p><p>test</p><p>test</p><p>test</p><p>test</p><p>test</p>
            </div>
        </div>
    </div>
    <footer>
        <div class="copyright">There is nothing can tell you.</div>
    </footer>

   CSS Markup
   html, body {
     height: 100%;margin:0;padding:0;
     background-color:#000;
   }
   #container{
     min-height: 100%;
	 height: auto !important;
	 height:100%;
     background-color:blue;
   }
    
   #container #page { 
     padding-bottom: 75px;//equal footer height
   }
   footer {
  	 height: 75px;//footer height
     margin-top:-75px;//equal footer height
     clear:both;
     background-color:yellow;
   }
   .nav { width:100%;height:95px;background-color:green; }
   
   Ps:ʹʱhtmlṹ㲻Ҫ#containerfooter֮ǰԪأ뽫Ԫصĸ߶Ҳȥ
      ʹpadding-bottomֵԶmargin-topֵ

4html+css3ҳ湹ʱҪѭW3CıǩǶʹõĹ򡣴뾡࣬ҪʹùࡣעҪע͵

5þԶλԶλֻ趨positionԺz-indexárelative absolute fixed static(default value)

6ڲ֧Html5CSS3ĳЩԵ

	Fixed Solutions:
	1)ʹhtmlҳע html5shiv.jsԼزͬIE汾CSS
	<!--[if lt IE 9]> <script src="html5shiv.js"></script> <![endif]-->
	<!--[if IE8]><link rel="stylesheet" href="ie8.css" type="text/css"/><![end if]-->

	2)ʹmodernizr.js⵱ǰֵ֧CSS3

	3)Բͬüд+ԣ===Following Example
	CSS Markup:
	-webkit-transition:all 0.4 linear 0.1;
	-moz-transition:all 0.4 linear 0.1;
	-o-transition:all 0.4 linear 0.1;
	transitionall 0.4 linear 0.1;

	4)ʹcss hackд<ôڳһЩǱڵΣա>
	_property==ѡIE6  
	+# *property==ѡIE7  
	\9 ѡIE6+  
	\0 ѡIE8+Opera15µ

7absoluterelativefixedindex໥Ƕʱִжʱbug

8ַfloat.
	1)#test{clear:both;}  #testΪԪصһֵԪ
	2)#test{display:block;zoom:1;overflow:hidden;}  #testΪԪصĸԪءzoom:1Ҳ滻Ϊ̶widthheight
	3)#test{zoom:1;}#test:after{display:block;clear:both;visibility:hidden;height:0;content:'';}  #testΪԪصĸԪ

9֪߶ȵҳˮƽֱУ
	Solution#test{position:absolute;top:50%;left:50%;width:200px;height:200px;margin:-100px 0 0 -100px;}

10˽CSSģʽOOCSSSMACSS
   1)OOCSS--CSS
   һĵдṹӦû HTML һҪЩ <a> ǩʽCSS дд .nav--main ul li a {}
   дȲЧϵ⣬ԿȵԪرǩĽṹп֮ HTML ṹı䣬 CSS ͱع
   ά϶ĳɱ
    ܽ᣺ٶ HTML ṹCSS classظԵʹ
   2)SMACSS
    BASE--Base 趨ǩԪصԤֵ reset д
    LAYOUT--Layout ָվġܹۣ .button СԪ classվͨһЩҪĴ飬 header  footerLayout Щܹ CSS
    MODULE-- Module ˼壬ǿطظʹ
    PARTIAL--Partial  Layout ͬҲ Module ͬ Layout ķΧСheader µĳԪء Moduleضһر趨
    STATE--State Ԫزͬ״̬£ֵʽǲָһԪص :hover  :active µ״̬˵һҳĿǰҳķҳҪ .active
    THEME--Theme  Layout һ𡸴ܹϵʽƤ

11дάCSS
    1)˳
       1Reset ֮Դ
       2Ԫ û class  h1ul 
       3Լ һ㡢ģʽ
       4Ԫ ɶչԪ
       5޲ 쳣״̬
    2)CSS 򼯷
       1class ַ-ӣᵽ BEM 
       2 4 ո
       3ֳɶУ
       4˳Уĸ˳
       5ǰ׺ʵӶֵ
       6ʽӶӳ DOM
       7һβķֺš
    3)淶
       1BEM--Block Element Modifier
	    .block{}
		.block__element{}
		.block--modifier{}
		У
		.block ĳĳԪأ
		.block__element  .block һһԪأ
		.block--modifier  .block ĳͬ״̬
       2Ϊȷ׶ԣ HTML ո class 磺<div class="foo--bar  bar__baz">
	   3ǧҪ CSS ʽ JavaScript ӡ JS Ϊʽһ޷ֱҪ JS ĳЩǰĻ
	   дһ JS רõ class򵥵˵ǻһǰ׺ .js- ռ䣬 .js-toggle.js-drag-and-dropζǿͨ 
	   class ͬʱ JS  CSS Ϊͻ鷳
	   4I18n-- CSS ʽƴ  $brand-color$highlight-color
	 4)ע
	 ʹп 80 ֽڵĿ״עͣ
	/**
	 * һĵ飨DocBlockע͡
	 *
	 * ￪ʼϸƪעġȻҪп 80 ڡ
	 *
	 * ǿעǶ HTML ǣҲǸİ취
	 *
		<div class=foo>
			<p>Lorem</p>
		</div>
	 *
	 * עǶıǵĻǰ治Ǻţᱻƽȥ
	 */
     עӦϸ룬Ϊ˵׶ݶ˿ܲˡÿдһִҪרдע⡣
	 עȽ÷磺
		1׼ѡ--/*html*/.product-page{} /*ol*/.breadcrumb{} /*p*/.intro{} /*ul*/.image-thumbs{}
		2ǩ--
		/**
		 * ^navigation ^lists
		 */
		.nav{}

		/**
		 * ^grids ^lists ^tables
		 */
		.matrix{}
		3̳б--
		ԪصĻʽУ
		/**
		 * Extend `.foo` in theme.css
		 */
		 .foo{}
		ԪصչʽУ
		/**
		 * Extends `.foo` in base.css
		 */
		 .bar{}
	5)OOCSS--CSS
	Ҫдһʱֳɽṹ()(չ)дṹʱͨ class Ա֤ԣдʱø class Ʒ
		.room{}
		.room--kitchen{}
		.room--bedroom{}
		.room--bathroom{}
		
12Ӵ߶ȵİٷֱ
	ĳԪصĶλСǻӴĸ߶ģе鷳ˣǶ˺ü
	css3ṩһvϵеĵλvhͱʾӴĸ߶ȣǰ׿4.3-֧֡Ǵrem֣ڿƼ⣺
	ͨjshtmlfont-sizeΪӴ߶ȵʮ֮һ1remͳӴ߶ȵ10%
	document.addEventListener("DOMContentLoaded", function(event) {
		document.documentElement.style.fontSize = window.innerHeight/10 + "px";
	});
  
13jquery.index()
    1)÷
      index()ָԪָԪص index λá
      ЩԪؿͨ jQuery ѡ DOM Ԫָ
      עͣδҵԪأindex()  -1
      
	  һƥԪص indexͬԪ
      õһƥԪͬԪص index λá
	  Syntax: $(selector).index()
	  
     Ԫص indexѡ
     Ԫѡ index λá
     Ԫؿͨ DOM Ԫػ jQuery ѡָ
	 Syntax $(selector).index(element)
     elementѡ涨ҪindexλõԪء DOM Ԫػ jQuery ѡ
	 
	2)ʵ
	<script type="text/javascript">
	$(document).ready(function(){
	  $("button").click(function(){
		alert($(".js-optionb").index('.js-option'));
	  });
	});
    </script>
	  <button>Check</button>
		<div class="js-options">
			<div class="js-opa"></div>
			<div class="js-option"></div>
			<div class="js-option"></div>
			<div class="js-option"></div>
			<div class="js-option js-optionb"></div>
			<div class="js-option"></div>
			<div class="js-option"></div>
			<div class="js-opa"></div>
		</div>
	 3==Ϊ˼ǵ.js-optionb.js-optionindexλ  index0
	 ֱ$(".js-optionb").index();
	 4==Ϊ˼ǻõһƥԪͬԪصindexλá
Javascipt

1jsжPCƶ豸
	function IsPC() {
		var userAgentInfo = navigator.userAgent;
		var Agents = ["Android", "iPhone",
					"SymbianOS", "Windows Phone",
					"iPad", "iPod"];
		var flag = true;
		for (var v = 0; v < Agents.length; v++) {
			if (userAgentInfo.indexOf(Agents[v]) > 0) {
				flag = false;
				break;
			}
		}
		return flag;
	}

2autocompletechormeвãfixed solutions  رյڶԶıֵ
	(function(){
	if(navigator.userAgent.toLowerCase().indexOf("chrome") != -1){
	var selectors = document.getElementsByTagName("input");
	for(var i=0;i<selectors.length;i++){
	if((selectors[i].type !== "submit") && (selectors[i].type !== "password")){
	var input = selectors[i];
	var inputName = selectors[i].name;
	var inputid = selectors[i].id;
	selectors[i].removeAttribute("name");
	selectors[i].removeAttribute("id");
	setTimeout(function(){
	input.setAttribute("name",inputName);
	input.setAttribute("id",inputid);
	},1)
	}

	}

	}
	})()

3ie9֧placeholder Best Practise Solution: jquery.placeholder.js)
	$(function(){  
	 
	  //жǷ֧placeholder
	  supportPlaceholder='placeholder'in document.createElement('input'),
	 
	  placeholder=function(input){
	 
		var text = input.attr('placeholder'),
		defaultValue = input.defaultValue;
	 
		if(!defaultValue){
	 
		  input.val(text).addClass("phcolor");
		}
	 
		input.focus(function(){
	 
		  if(input.val() == text){
	   
			$(this).val("");
		  }
		});
	 
	  
		input.blur(function(){
	 
		  if(input.val() == ""){
		   
			$(this).val(text).addClass("phcolor");
		  }
		});
	 
		//ַΪɫ
		input.keydown(function(){
	  
		  $(this).removeClass("phcolor");
		});
	  };
	 
	  //֧placeholderʱplaceholder
	  if(!supportPlaceholder){
	 
		$('input').each(function(){
	 
		  text = $(this).attr("placeholder");
	 
		  if($(this).attr("type") == "text"){
	 
			placeholder($(this));
		  }
		});
	  }
	 
	});

4jsֺ֧أضҪɲȡģʽ
	function test(){

	   if(arguments.length=0){
		  alert('!');
	   }else if(arguments.length=1){
		  alert(arguments[0]);       
	   }
	   else if(arguments.length=2){
		  alert(arguments[0]);
		  alert(arguments[1]);
	   }

	}
	test();
	test(10);
	test(10,20);

5contentTypetext/htmltext/plain
	1)text/html˼ǽļcontent-typeΪtext/htmlʽ
	PSڻȡļʱԶhtmlĽļӦĴ

	2)text/plain˼ǽļΪıʽ
	Ps: ڻȡļʱд

6ʹString.Split(new char[]('x'),StringSplitOptions.RemoveEmptyEntry)

7ʹjsЧȥĳarrylist顣
	Array.prototype.unique3 = function(){
	 var res = [];
	 var json = {};
	 for(var i = 0; i < this.length; i++){
	  if(!json[this[i]]){
	   res.push(this[i]);
	   json[this[i]] = 1;
	  }
	 }
	 return res;
	}
	var arr = [112,112,34,'',112,112,34,'','str','str1'];
	alert(arr.unique3());

8placeholder
	<select>  
		<option value='' disabled selected style='display:none;'>Please Choose</option>  
		<option value='0'>Open when powered (most valves do this)</option>  
		<option value='1'>Closed when powered, auto-opens when power is cut</option>  
	</select>  
	PS:һѡ֮ͻʧ,Ӱѡ

9Ajaxʱַʽ
	getƴurlʹݲʱҪע⣬Ҫֱӽؼֵַ
	url: 'renameTag?Id=' + id + '&tagName=' + $('input[name="tagName"]').val()

	ִ󣺾IE ݸ̨tagNameֵı
	취ʹdata data: { Id: id, tagName: $('input[name="tagName"]').val() }

10JSHint Error : This character may get silently deleted by one or more browsers
    ļʽȷUTF-8 BOMʽNotePad++תһ¸ʽ UTF-8 BOMʽɽ

11Match Files  [Gulp learn note]
	1)* ƥļ·е0ַƥ·ָ·ָĩβ
	2)** ƥ·е0Ŀ¼Ŀ¼Ҫ֣ҲˡĩβҲƥļ
	3)? ƥļ·еһַ(ƥ·ָ)
	4)[...] ƥ䷽гֵַеһеһַΪ^!ʱʾƥ䷽гֵַеһ
	5)!(pattern|pattern|pattern) ƥκиһһµĶƥġ
	6)(pattern|pattern|pattern) ƥиһ0λ1Ρ
	7)+(pattern|pattern|pattern) ƥиһ1Ρ
	8)*(a|b|c) ƥиһ0λΡ
	9)@(pattern|pat*|pat?erN) ƥиһ1Ρ

ʵ⣺
	1)* ƥ a.js , x.y , abc , abc/ƥ a/b.js
	2)*.* ƥ a.js , style.css , a.b , x.y
	3)*/*/*.js ƥ a/b/c.js , x/y/z.jsƥ a/b.js , a/b/c/d.js
	4)** ƥ abc , a/b.js , a/b/c.js , x/y/z , x/y/z/a.bƥеĿ¼ļ
	5)**/*.js ƥ foo.js , a/foo.js , a/b/foo.js , a/b/c/foo.js
	6)a/**/z ƥ a/z , a/b/z , a/b/c/z , a/d/g/h/j/k/z
	7)a/**b/z ƥ a/b/z , a/sb/zƥ a/x/sb/zΪֻе**ֲƥ༶Ŀ¼
	8)?.js ƥ a.js , b.js , c.js
	9)a?? ƥ a.b , abcƥ ab/Ϊƥ·ָ
	10)[xyz].js ֻƥ x.js , y.js , z.jsƥ xy.js , xyz.js ȣֻһַ
	11)[^xyz].js ƥ a.js , b.js , c.jsȣƥ x.js , y.js , z.js

12Android 6+ֻ ļϴֶ֧ͼ֧muliputeԡ  
	Android 6+ֻ֧ļϴmuliputeԣֶ֧ͼϴʹõwebuploader֮ǰĬǶѡģô㶼ãΪѡ󣬾ʹˡ
	ڽĹзAndroid 6+ accept='image/*'֧Ҳ͵ĲͬͬСĵֻͲʶ𡣵HTCIOSʶ

13Javascript Math ȡ
	1)ַתΪ:parseInt(str);parseInt("7.6")**7
	2)ȡ,Сּ1:Math.ceil(number) ;Math.ceil(7.6) **8
	3)ȡ,ȥС : Math.floor(number) ;Math.floor(7.6) **7
	4) :Math.round(number) ;Math.round(3.4) **3, Math.round(3.5)**4

140ʼ
        1dbcc checkident('test',reseed,0)   testΪ
        2truncate table test()

15JSжַstringǲDate
function isDate(s) {
        // make sure it is in the expected format
        if (s.search(/^\d{1,2}[\/|\-|\.|_]\d{1,2}[\/|\-|\.|_]\d{4}/g) != 0)
            return false;

        // remove other separators that are not valid with the Date class    
        s = s.replace(/[\-|\.|_]/g, "/");

        // convert it into a date instance
        var dt = new Date(Date.parse(s));

        // check the components of the date
        // since Date instance automatically rolls over each component
        var arrDateParts = s.split("/");
        return (
            dt.getMonth() == arrDateParts[0] - 1 &&
            dt.getDate() == arrDateParts[1] &&
            dt.getFullYear() == arrDateParts[2]
        );
}

 String.prototype.isTime = function() {
            var r = this.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
            if (r == null) return false;
            var d = new Date(r[1], r[3] - 1, r[4]);
            return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]);
        };

		function isDate(s) {
        // make sure it is in the expected format
        if (s.search(/^\d{1,2}[\/|\-|\.|_]\d{1,2}[\/|\-|\.|_]\d{4}/g) != 0)
            return false;

        // remove other separators that are not valid with the Date class    
        s = s.replace(/[\-|\.|_]/g, "/");

        // convert it into a date instance
        var dt = new Date(Date.parse(s));

        // check the components of the date
        // since Date instance automatically rolls over each component
        var arrDateParts = s.split("/");
        return (
            dt.getMonth() == arrDateParts[0] - 1 &&
            dt.getDate() == arrDateParts[1] &&
            dt.getFullYear() == arrDateParts[2]
        );
}

 String.prototype.isTime = function() {
            var r = this.match(/^(\d{1,4})(-|\/)(\d{1,2})\2(\d{1,2})$/);
            if (r == null) return false;
            var d = new Date(r[1], r[3] - 1, r[4]);
            return (d.getFullYear() == r[1] && (d.getMonth() + 1) == r[3] && d.getDate() == r[4]);
        };
16jquery̬¼on()  
            ڶΪռ䣬ж̬ӵԪa.js-add-itemΪ¼
            $('.panel-body').on('click', 'a.js-add-item', function (e) {
                 addOption(e.target);
            });

            $('.panel-body').on('click', 'a.js-delete-item', function (e) {
                delOption(e.target);
            });
			
17jquery 'click' event doesn't work on iOS Safari.
			$('body').on('click touchstart', 'img',function(){
			   //something goes here
			})
			IosSafariʹclick¼ίУֻclick¼ôãִк
			Աͬʱtouchstart¼PSclick = touchstart + touchend
			
			Web/API--TouchEvent
			
			touchstart
			touchmove
			touchleave
			touchenter
	        touchcancel
			touchend
			
			New Solution:
	        var timestamp;
			$('body').on('touchstart', 'img',function(){
			    timestamp=new Date().getTime();
			});
			
			$('body').on('touchend', 'img',function(){	   
				var timestampEnd = new Date().getTime();            
				if (timestampEnd - timestamp < 300) {
					//something goes there
				}
			});
			
			Source link: 
			https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
			
			
18CMDAMDĽܺ
    1.AMD--(첽ģ鶨)ΪƵġAMD һ JavaScript ģ첽ر׼ͬص⡣

    淶ֻһȫֵdefine
    define(id?: String, dependencies?: String[], factory: Function|Object);
	
	instance:
	//һTestģ
	define('Test',['jquery'], function($){
	  return {
		sayHello: function(){
		  $('body').text('Hello World');
		}
	  }
	});

	// ʹTestģ
	define(['Test'], function(Test){
	  Test.sayHello();
	})
	
    2.CMD--CommonJS淶Ϊ˽ JavaScript ģʽʹÿģռִС
	ù淶Ҫǣģͨ module.exports ıӿڣͨrequire() ģǰģ
	
	淶ֻһȫֵdefine
    define(factory);
    úֻһfactoryΪЧֵfactoryΪģúķֵ
	ǰֱΪrequire, exports, module 
	* require: * requireһһģظģģû򷵻null 
	* require.async: һһģбһص(ѡ)úģΪ˳ģб˳һ 
	* exports: ӸģĽӿ 
	* module * module.uri: ģľ· 
	* module.dependencies: ģģб 
	* module.exports: ģ
	
	instance:
	// math.js
	define(function(require, exports, module) {
	   exports.add = function() {
		var sum = 0, i = 0, args = arguments, len = args.length;
		while (i < len) {
		  sum += args[i++];
		}
		return sum;
	  };
	})

	// increment.js
	define(function(require, exports, module) {
	  var add = require('math').add;
	  exports.increment = function(val) {
		return add(val, 1);
	  };
	});

	// program.js
	define(function(require, exports, module) {
	  var inc = require('increment').increment;
	  var a = 1;
	  inc(a); // 2

	  module.id == "program";
	});
	
	3.
	   1)ģ飬AMDǰִеģCMDӳִеġCMDƳͽAMDƳǰá
		CMD淶УǿԽдڴһС
		define(function(require, exports, module){
			var a = require(../a);
			a.do();
			var b = require(..b);
			b.do();
		})

	   еʱ򣬿ʼǲ֪ģڱеrequireҳмءΪȽеfunctionַ
	   ȻƥrequireؼֺĴ۾ܡ
	   AMDǰãڴ֮ǰģὫемء
		define(['./a', './b'], function(a, b){
		  a.do();
		  b.do();
		})
	    ǱڿʼʱʾָǵдĺܶʱͻȻҪĳҪͷнӣȻﲢƼһдùڳά 
		ǻһ󣬾ںִеʱ򲢲ǰ֪ģǷҪ
		if(status){
		  a.do();
		}
	    ڣaҲܲһģӲֲһǿԽӲ\
		˷ܵġҪһִʽ
		define(['require', './b'], function(require, b) {
		  // to do somthing

		  if(status){
			require(['/a'], function(a) {
			  a.do();
			})
		  }
		  b.do();
		})	
	 
	4.ܽ
	    jsʵ
	    1)ȣǰǰõ˼룬Ӳǰã첽صķʽ롣 AMD
        2)ɱ: ǰͽ˼Ƽ CMD

19JS Math.random()
    ԭrandom()ɷؽ0~1֮һ

	1)ϣ1ֵ
	// max - ֵ
	parseInt(Math.random()*max,10)+1;
	Math.floor(Math.random()*max)+1;
	Math.ceil(Math.random()*max);

	2)ϣ0ֵ
	// max - ֵ
	parseInt(Math.random()*(max+1),10);
	Math.floor(Math.random()*(max+1));

	3)ϣֵֵ
	// max - ֵ
	// min - Сֵ 
	parseInt(Math.random()*(max-min+1)+min,10);
	Math.floor(Math.random()*(max-min+1)+min);

͵Լ+

1ElementsҳмõĿݼ  [chrome dev tools]
	1)ѡ¼ٵҼչ
	2)enterٱ༭ԣ
	3)tabл
	4)Hdom֪ݼ֮ǰҪôɾdomЧҪôֹdisplay:noneHͷˡ
  
2npm
	װnpm [-g] [--save-dev]
	²npm update [-g] [--save-dev]
	жزnpm uninstall [-g] [--save-dev]
	ָ汾npm install @VERSION [--save-dev] VERSIONҪİ汾ţ

3ĿӦð
	1)ؿĳʼ node.js+npm   packge.jsonļ dev
	2)Ĺ
	3)Դļ
	4)Զ
	5)pipeline͸

4git
    1)git stash  ʱֳ
	  git stash list   鿴list
	2)git stash apply ָ֮ǰĹֳ
	3)git stash pop   ָɾ֮ǰĹֳ
	4)git branch -D <name> ǿɾûбϲķ֧
	5)git branch --set-upstream branch-name origin/branch-name ط֧Զ̷֧ӹϵ
	6)git tag -a v0.1 -m "version 0.1 released" <commit id>  PS:-a ָǩ -m  

ġWebȫ
1CSRF Cross Site Request Forgery --վα
   ԭûC¼εվwebA ûC¼ϢcookieûC¼˶⹥webBwebBCwebAcookieϢģʵûC
   
   
		 referrerУ ǳ򵥣֤һreferrerϷĲŸĿƻǺٱõģԭΪreferrerĲȶ˲ܱ֤ÿζȡreferrerhttpshttpкܶ취ģreferrer)
		 ֤ ţˣĵˮ©ϧףܷܲÿûһ֤ɣһֻĳЩضá
		 token  ӦڱȽͨõķȻtokenɷһ



{'fraction_non_alphanumeric': 0.18602254629485057, 'fraction_numerical': 0.02485713393498423, 'mean_word_length': 2.775079570906519, 'pattern_counts': {'":': 0, '<': 167, '<?xml version=': 0, '>': 159, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2809107', 'n_tokens_mistral': 16678, 'n_tokens_neox': 15967, 'n_words': 2427}