Developer-Tricks

I strongly support you to use a better browser, with the better browser especially technology of html5 and hardware acceleration you can experice better websites and it is a enjoy!

1.Native video and audio with keyboard enabled controls that can be styled and accessed like any other element in the page.

2.Forms with richer controls like colour pickers, calendars and autocomplete fields.

3.Rounded corners, gradients and drop shadows without graphics.

4.Local and offline storage to create real application experiences.

5.Geographical location and device orientation to give you a personalised experience of the web.

6.Rich graphs and visualisations using Canvas and SVG.

7.Games that don’t ask you to install plugins.

8.3D graphics and support for any font.

9.Drag and drop and touch support for tablets.

10.File upload and access to the file system like any other application.

As a developer , you know it is HTML5 and related technologies that pretty the web.
The html5 demo City Videos i find in http://ie.microsoft.com/testdrive/ have extremely beat my heart, it is Awesome!

Add some news about html5:
1.Adobe is doing an experiment called ‘Wallaby’ that is the codename for an experimental technology that converts the artwork and animation contained in Adobe® Flash® Professional (FLA) files into HTML. Although it is not a final product now, you can download it here.
2.Ie6countdown website for a final end of ie6 launched on 5th, Mar, 2011.Speed up the demise of ie6!

I am wondering of change a job.

It has been almost three years since i graduated from college, i learned about computer in my university, but nearly everything i used within my work was learned in this cormpany.To by a programer is not my desire,but besides that, i don’t know what to do, in my deep heart, i wish to be expert in communication, and i want to be the one in a novel i have read, who can talk and speak as he wants, and express himself clearly to everyone.

May be , this is childish or i do not express myself in the correctly way.So, i want to change a job, not to say any other reasons.

May be forign trade? I am trend to do so..actually i do know which position to be in the future, and i should think about it seriously!
But i will not give up what i have learned about coding, that is the baseline to live a life.

I mean this is an old topic, and i think it simple as mostly it just one line’s code to accomplish the function, may be you use a function to do it before, i will show you how to make it a selector of jQuery and use it just like as simple as :text, :checked ect do.

First, let us see samples in jQuery sourse:

		enabled: function( elem ) {
			return elem.disabled === false && elem.type !== "hidden";
		},

		disabled: function( elem ) {
			return elem.disabled === true;
		},

		checked: function( elem ) {
			return elem.checked === true;
		},

		selected: function( elem ) {
			// Accessing this property makes selected-by-default
			// options in Safari work properly
			if ( elem.parentNode ) {
				elem.parentNode.selectedIndex;
			}

			return elem.selected === true;
		},

		parent: function( elem ) {
			return !!elem.firstChild;
		},

		empty: function( elem ) {
			return !elem.firstChild;
		},

		has: function( elem, i, match ) {
			return !!Sizzle( match[3], elem ).length;
		},

		header: function( elem ) {
			return (/h\d/i).test( elem.nodeName );
		},

		text: function( elem ) {
			var attr = elem.getAttribute( "type" ), type = elem.type;
			// IE6 and 7 will map elem.type to 'text' for new HTML5 types (search, etc)
			// use getAttribute instead to test this case
			return "text" === type && ( attr === type || attr === null );
		},

		radio: function( elem ) {
			return "radio" === elem.type;
		},

		checkbox: function( elem ) {
			return "checkbox" === elem.type;
		},

		file: function( elem ) {
			return "file" === elem.type;
		},
		password: function( elem ) {
			return "password" === elem.type;
		},

		submit: function( elem ) {
			return "submit" === elem.type;
		},

		image: function( elem ) {
			return "image" === elem.type;
		},

		reset: function( elem ) {
			return "reset" === elem.type;
		},

		button: function( elem ) {
			return "button" === elem.type || elem.nodeName.toLowerCase() === "button";
		},

		input: function( elem ) {
			return (/input|select|textarea|button/i).test( elem.nodeName );
		}

All of these filters are one line code, So it will be very easy to custom your own expresssion.
To custom your own filter, here is the syntax:

	jQuery.extend(jQuery.expr[':'], {
		EXPRESSION_NAME: "EXPRESSION_RULE"
	});

One example:

jQuery.extend(jQuery.expr[':'], {
    submitable: function(a) {
        return !a.disabled&&(a.selected||a.checked||(a.nodeName.toUpperCase()=='TEXTAREA')||(a.nodeName.toUpperCase()=='INPUT'&&(a.type=='text'||a.type=='hidden'||a.type=='password')));
    },
    nothidden: function(a) {
        return a.type&&a.type!='hidden';
    }
})

You can custom your own selectors with jQuery expressions whatever you can , that’s up to your site.

I belive many of you have used return false for an click event to prevent from visiting link address of ‘#’, do you know what have been happened when you code return false?
Look at this demo:

$('a').click(function(){
	# some code
	return false;
});

It seems to have done the right job, but it is misused this time,do you know what happened behind the screen when you click the link?First, you got your goal, you have prevent to visiting the link,here it is the event.preventDefault() make the sense, other more, you have also prevent event.stopPropagation and the callback function below the return false.

So , it has greatly increase the brittleness of your code to use return false at this time.
If you just want to prevent the default behavior of your click event, you only need to preventDefault, the right usage:

$('a').click(function(event){
	# some code
	event.preventDefault();
});

That is the event.preventDefault(), but what is stopPropagation?

$('a').click(function(event){
	event.preventDefault();
	event.stopPropagation();
	console.log('You have clicked the link.');
});

$('#demo').click(function(){
	$(this).toggleClass('yellow');
	console.log('You have clicked the demo div.');
});

The html is a div and inside it is a link address, with a yellow background class.You may find there is one line of event.stopPropagation(), the case you do not write this, when you click on the div or the link address, the div will be attach the yellow class, but with this line, when you click on the link address, the div will not change backgroud to yellow.It stops bubbling to the parent click event.

Another event here is event.stopImmediatePropagation:

$('a').click(function(event){
	event.preventDefault();
	console.log('Click on the link one time.');
});
$('a').click(function(event){
	event.preventDefault();
	event.stopImmediatePropagation();
	console.log('Click on the link two time.');
});
$('a').click(function(event){
	event.preventDefault();
	console.log('Click on the link three time.');
});
$('a').click(function(event){
	event.preventDefault();
	console.log('Click on the link four time.');
});

Above example will print ‘Click on the link one time.’ and ‘Click on the link two time.’,the third and forth print will not occur.Your page may have many plugin or event for one element, you can use stopImmediatePropagation to not fire the next operation.

Here you know what is the difference in event.preventDefault() and event.stopPropagation and event.stopImmediatePropagation.But where should i put them in my code?

Acctually, the last two events can be put in any place in your callback function, but positon of event.preventDefault can be different.

$('a').click(function( event ){
	event.preventDefault();
	func(); // undefined function
});
// use both these two snippets
$('a').click(function( event ){
	func(); // undefined function
	event.preventDefault();
});

After exam it, you will find that the first snippet will not visit the ‘#’ address, and then appear the error,but the next snippet will visit the address with the error notice comes first.
Summary:Use the Right Method of event.preventDefault() and event.stopPropagation and event.stopImmediatePropagation for the Job!

You may had seen .call or .apply in javascript code, do you wonder about them?That what you will know from this article.
As we know, each function as an object has many methods themselves, a toString() method will not be strange with you.
That’s it, you can invoke it without defining it, and so are .call and .apply methods in javascript.

One example of .toString():

	function bar(){
		# some code
	}

	console.log(bar.toString());

In my option, the call and apply methods is used to told what object to reference at the script runtime! That’s just it!

	var x = 'test',
		obj = { x: 'value' };
	function bar(){
		console.log(this.x);
	}

	bar(); // log 'test'
	bar.call(obj);  // log 'value'
	bar.apply(obj); // log 'value'

The above code show u how to use the methods, The apply() method is identical to call(), is it? NO, just different from the arguments!

	var x = 'test',
		y = 'name',
		obj = { x: 'value' };

	function bar(arg1, arg2){
		console.log(this.x, arg1, arg2);
	}

	bar.call(obj, x, y); // log 'value', 'test', 'name'
	bar.apply(obj, [x, y]); // log 'value', 'test', 'name'

You can see from the example that .call method’s argument are string and .apply method’s argument is an array, this is quit useful when there are many arguments to pass into the function.

To let you know more, here is another example:
Inside every function , you can use arguments as a collection of arguments, it feels like an array object, but arguments only has the length property, and no other methods , like pop, push methods.
So, what can we do with it?Look at the example blow:

	var o = { x: 15 };
	function f(message1, message2)
	{
	    alert(message1 + (this.x * this.x) + message2);
	}

	function g(object, func)
	{
	    var args = []; // empty array
	    // copy all other arguments we want to "pass through"
	    for(var i = 2; i < arguments.length; i++)
	    {
	        args.push(arguments[i]);
	    }

	    func.apply(object, args);
	}
	g(o, f, "The value of x squared = ", ". Wow!");

Awesome! I believe many of us had use arguments, and you can do more work with it! .call and .apply methods appear in many function and jQuery plugin.So learn it and use it!

I am used to work with jQuery framwork, but when it come to javascript, many words and expressions i have never heard of or used.This time i find the getScript method of jQuery, and someone had made a function to be used. I think it be useful , when you need to use jQuery within a tiny work. At this time, you can only use this function, and do the same thing as you did with jQuery.

For short, it is used to import script dynamicly, so the browser will not cache your script, and you can have a callback function ,when the script is loaded successfully.

Here is the getScript function:

	function getScript(url, callback){
		var head = document.documentElement,
		script = document.createElement("script");
		script.src = url;

		var done = false;

		//Attach handlers for all browsers
		script.onload = script.onreadystatechange = function(){
			if (!done && (!this.readyState || this.readyState === "loaded" || this.readyState === "complete")){
				done = true;

				callback();

				//handle memory leak in IE
				script.onload = script.onreadystatechange = null;
				if (head && script.parentNode) {
					head.removeChild(script);
				}
			}
		};

		//use insertBefore instead of appendChild to circumvent an IE6 bug.
		//this arises when a base node is used
		head.insertBefore(script,head.firstChild);

		//we handle everything using the script element injection
		return 'scriptinjected!';
	}

Usage:

	getScript('scriptsrc', function(){
		// some code
	});

Enjoy this article? Please leave a word about your options about this getScript function.

Actually i want to find solution for jQueyr.event for my problem, but i find one jQuery method i have not seen before, and i find the reason for why is it not very widely used is that the .live method. And i want you know .delegate method of jQuery.

About .delegate:

//Basic syntax:
.delegate( selector, eventType, handler )
.delegate( selector, eventType, eventData, handler )
.delegate( selector, events )

$("table").delegate("td", "hover", function(){
	$(this).toggleClass("hover");
});

 // Is equivalent to the following code

$("table").each(function(){
	$("td", this).live("hover", function(){
		$(this).toggleClass("hover");
	});
});

It is almost the same function with .live , to bind event to the selector now and the selector future.But what i want to show you is that let it support a delegate method that takes a map.Very simple jQuery delegate plugin.

	(function($) {
		$.fn.delegate = function(selector, types, data, fn) {
			if (typeof selector === "object") {
				for (var sel in selector) {
					for (var type in selector[sel]) {
						this.live(type, data, selector[sel][type], sel);
					}
				}
			return this;
			} else {
				return this.live(types, data, fn, selector);
			}
		};
	})(jQuery);

Simply Usage:

	$('#header').delegate({
		'img' : {
				'click dblclick':function(){
				console.log('clicked')
			}
		},
		'li' : {
			mouseover:function(){
				console.log('over')
			},
			mouseout:function(){
				console.log('out')
			}
		}
	}, {foo:123 , bar:456});

May be it is not very perfect, and can not meet your need, and you can modify it for yourself.

Many developer had encountered that the psd of your site consists of images, and you had to cut a lot of images in your page.This is not search engine friendly.Because most of the spiders can not recognize image exactly.

Image replacement is a technique for search engine friendly.
Here are some tips for these cases:

1.Always add alt attribute to your image
The search engine can recognize image only by it’s alt attribute, for example google image seach. So it is important to add this.Besides that, the attribute will replace image if it is not found in the server or for those who have turn off image display of their browser.

2.Display the image as background if possible and use the css image replacement technique
Another way to be friendly to the search engnie is to use a image as background and make the text which is not visible in the page to be grabed by the spider.The most common way i used is to add a text-indent to the css file.

#logo
{
	width: 350px; height: 75px;
    background: url("images/header-image.jpg");
    text-indent: -9999px;
}

Of course , you can do this by other methods, here i will show you some:
Use margin:

#logo
{
	width: 350px; height: 75px;
    background: url("images/header-image.jpg");
    margin: 0 0 0 -2000px;
}

Use span:

#logo
{
	width: 350px; height: 75px;
    background: url("images/header-image.jpg");
}
	#logo span{ display:none; }

Use image with alt attribute and span

	
	company name or some keywords

#logo
{
	width: 350px; height: 75px;
    background: url("images/header-image.jpg");
}
	#logo span{ display:none; }

Use padding:

#logo
{
	width: 350px;
	padding:75px 0px 0px 0px;
    background: url("images/header-image.jpg");
}

Use span and overflow:

	#logo{ width: 350px; height: 75px; background: url("images/header-image.jpg"); }
		#logo span{ display:block; width:0px; height:0px; overflow:hidden; }

Push the text to hide it with relative and absolute:

	#logo{ width: 350px; height: 75px;  postion:relative; }
		#logo span{ background: url("images/header-image.jpg"); with:100%; height:100%; position:absolute; }

3.replace div tag with the header tags rightly
Some place when you need to tell the spider there are important text words there , you can replace it with the header tags.Make sure you can do it well, otherwise this will result in problem to your site.

These tips are focus on image replacement for seo, if you use them at the right place , your site may be more friendly to the search engine.
To improve your site more friendly , you should do more than this!

I have been heard of php’s curl for many time from my workmate, then i have read the articles about curl many times , tody i will show you how does it affects my site.
Usually i use it to fetch content from other websites, and this is the basic use of it.
You can download the php curl class here.

$ch = curl_init();

curl_setopt($ch, CURLOPT_URL, "http://www.baidu.com");
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_HEADER, 0);

$output = curl_exec($ch);

curl_close($ch);

The syntax is almost the same with the code above:1.initialize it;2.set the options;3.execute and fetch the resulting HTML output;4.free up the curl handle.
You may want to know what you can do with curl,yeah, there are so much use of it,for example detect redirection based on browser,do post action with curl,make a file upload,friend links or website links check, http authentication, ftp upload, visit website with a proxy and so on.

Besides these you can also get the curl information by using culr_getinfo(), and do multi handles or do with your returned content with a callback function.

So wonderful! is it?

Next i’ll show a curl post and curl file upload demos.

Curl post:

$url = "http://www.test.com/post_output.php";
$post_data = array (
    "foo" => "bar",
    "action" => "Submit"
);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
// we are doing a POST request
curl_setopt($ch, CURLOPT_POST, 1);
// adding the post variables to the request
curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);
$output = curl_exec($ch);
curl_close($ch);
echo $output;

File upload:

$url = "http://www.test.com/upload_output.php";
$post_data = array (
    "foo" => "bar",
    // file to be uploaded
    "upload" => "@C:/wamp/www/test.zip"
);
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, $post_data);
$output = curl_exec($ch);
curl_close($ch);
echo $output;

Last time i get a curl class, you can download it here curl php download.

	class cURL {
		var $headers;
		var $user_agent;
		var $compression;
		var $cookie_file;
		var $proxy; 

		function cURL($cookies=TRUE,$cookie='cookies.txt',$compression='gzip',$proxy='') {
			$this->headers[] = 'Accept: image/gif, image/x-bitmap, image/jpeg, image/pjpeg';
			$this->headers[] = 'Connection: Keep-Alive';
			$this->headers[] = 'Content-type: application/x-www-form-urlencoded;charset=UTF-8';
			$this->user_agent = 'Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.0.3705; .NET CLR 1.1.4322; Media Center PC 4.0)';
			$this->compression=$compression;
			$this->proxy=$proxy;
			$this->cookies=$cookies;
			if ($this->cookies == TRUE) $this->cookie($cookie);
		} 

		function cookie($cookie_file) {
			if (file_exists($cookie_file)) {
				$this->cookie_file=$cookie_file;
			} else {
				fopen($cookie_file,'w') or $this->error('The cookie file could not be opened. Make sure this directory has the correct permissions');
				$this->cookie_file=$cookie_file;
				fclose($this->cookie_file);
			}
		}

		function get($url) {
			$process = curl_init($url);
			curl_setopt($process, CURLOPT_HTTPHEADER, $this->headers);
			curl_setopt($process, CURLOPT_HEADER, 0);
			curl_setopt($process, CURLOPT_USERAGENT, $this->user_agent);
			if ($this->cookies == TRUE) curl_setopt($process, CURLOPT_COOKIEFILE, $this->cookie_file);
			if ($this->cookies == TRUE) curl_setopt($process, CURLOPT_COOKIEJAR, $this->cookie_file);
			curl_setopt($process,CURLOPT_ENCODING , $this->compression);
			curl_setopt($process, CURLOPT_TIMEOUT, 30);
			if ($this->proxy) curl_setopt($process, CURLOPT_PROXY, $this->proxy);
			curl_setopt($process, CURLOPT_RETURNTRANSFER, 1);
			curl_setopt($process, CURLOPT_FOLLOWLOCATION, 1);
			$return = curl_exec($process);
			curl_close($process);
			return $return;
		}

		function post($url,$data) {
			$process = curl_init($url);
			curl_setopt($process, CURLOPT_HTTPHEADER, $this->headers);
			curl_setopt($process, CURLOPT_HEADER, 1);
			curl_setopt($process, CURLOPT_USERAGENT, $this->user_agent);
			if ($this->cookies == TRUE) curl_setopt($process, CURLOPT_COOKIEFILE, $this->cookie_file);
			if ($this->cookies == TRUE) curl_setopt($process, CURLOPT_COOKIEJAR, $this->cookie_file);
			curl_setopt($process, CURLOPT_ENCODING , $this->compression);
			curl_setopt($process, CURLOPT_TIMEOUT, 30);
			if ($this->proxy) curl_setopt($process, CURLOPT_PROXY, $this->proxy);
			curl_setopt($process, CURLOPT_POSTFIELDS, $data);
			curl_setopt($process, CURLOPT_RETURNTRANSFER, 1);
			curl_setopt($process, CURLOPT_FOLLOWLOCATION, 1);
			curl_setopt($process, CURLOPT_POST, 1);
			$return = curl_exec($process);
			curl_close($process);
			return $return;
		}
		function error($error) {
			echo "
cURL Error$error

";
			die;
		}
	}
	$cc = new cURL();
	$cc->get('http://www.php.net');
	$cc->post('http://www.example.com','foo=bar');

I wish it will be helpful to you.Have a good work!

I happen to realize that when validating username in my site, i should control the request time of the ajax request, my validation was that when user click on the keyboard, this will trigger the javascript keyup event, then do the ajax validation within the event.
Assume the case , when user just trigger the keyup function and the script is doing validating, but he has not finished writing , one again he input another letter, so it will duplicate that step.It result in so much request unnecessary request to the server, as everyone knows that you don’t want the extra request to your server.
What you can do is to throttle the Ajax request after your input immediately, this step is very important, but how many of you have done so?
You can do like this:

function throttle(fn, delay) {
  var timer = null;
  return function () {
    var context = this, args = arguments;
    clearTimeout(timer);
    timer = setTimeout(function () {
      fn.apply(context, args);
    }, delay);
  };
}

// so when you do this with jQuery, here is what you should do
$('input.username').keypress(throttle(function (event) {
  // do the Ajax request
}, 250));

Above code is my solution, the validation will be fired in delay micro-seconds, and if there are a series of event , it will throttle the extra requests.