Finally, a real update after a long time. Here are the changes:

- Theme. Yes, it may look like I didn’t but I really did changed it. If you’ve been here before you’ll notice that it’s not so colorful anymore. I’ve also removed my picture on the sidebar. It was a hard decision but I don’t see the point of having my picture there. I also added Tags so people can quickly identify the nature of my posts which no one cares about.

- Syntax Highlighting. For nerds only. I hope you appreciate my new code syntax highlighting. It’s simpler than the old one with alternating row colors.

- WordPress. Updated to the latest WP version which is 3.0.1.

- Logo. Changed color to plain white and removed the distorted effect. Still kept the binary background and japanese text underneath.

- jQuery. Again, for nerds only. I updated my Javascript library to the latest version which is 1.4.3.
- jQuery back to top link should be working just fine. Tested and made sure it is compatible.

- Other stuff. Things even if I tell no one will see it.

Looking forward to more updates.

Been busy lately and no time to blog because my brain is always fried. I spent my time this weekend hanging out and meeting few people at Soshified. Other than that, I’ve been coding and thinking all day ^^

Nerd Talk

Search functionality can be done in two ways, (1) the usual form submit that reloads the page to submit the query and (2) through Ajax, doesn’t require a page reload because it sends the query in the background which is cool. If you’re working on a search functionality it is best to always optimize the process because every time the user hits the submit button your server gets hit in the head to perform the request. As we know, searching requires database query and we don’t want to request from the database that often because it’ll bite you in the ass when there’s a lot of searches going on. In this post I won’t be providing tips on how to optimize search queries or any caching methods but this is a start for an optimized search functionality. This is to help you save server requests if you’re working on a similar search functionality.

If you’re working on a search functionality that triggers onkeyup:

<input onkeyup="Search(this)" name="search" />

You know, the kind of search functionality where you submit the request to the server when the user stops typing the keyword to save them time clicking the submit button or if you don’t have a submit button at all. When doing this we must make sure that we only submit or send the request to the server once the user had stopped typing. So if the user wanted to search for ‘krispy kreme’, take note if you’re using onkeyup event, your Search() function will get triggered every time your user lifts his finger off the keyboard key. Imagine the amount of request you’re sending to the server when searching for ‘krispy kreme’, that’s 12 characters, 12 Ajax requests. Code below will help to only send a request to the server when the user had stopped typing, we assume that the user already finished typing the search keyword.

// initial interval value
var SearchTimeOut = 0;
// how long before the execution starts; in milliseconds (1000 = 1 second)
// just the value i'm happy with, not too fast or slow
// increase value if you think users type 1 ltr (letter per second) >:)
var Interval = 333;
 
// stores the search keyword
var CurrentSearchKey = '';
var Search = function(obj) {
	// get the keyword from the field
	var keyword = obj.value;
 
	// cancel the previous search
	// SearchTimeOut contains a value more than zero when assigned with
	// a setTimeout()
	if(SearchTimeOut > 0)
		ResetSearch();
 
	// we only start a request when the search keyword is different from
	// the current keyword
	if(CurrentSearchKey == keyword)
		return;
 
	// the magic, we attach the search process to setTimeout to put in an
	// interval every time the Search() is executed
	// setTimeout() returns a value assigned to SearchTimeOut everytime
	// it's called since SearchTimeOut now holds whatever StartSearch()
	// is doing when we do a keyup event, everytime we execute Search()
	// we will cancel SearchTimeOut and start a new one, that's what makes
	// sending a request to the server lesser because we only do a request
	// to the server when we stop typing a keyword
	SearchTimeOut = setTimeout("StartSearch('"+keyword+"')", Interval);
}
 
// the actual search function
var StartSearch = function(keyword) {
	CurrentSearchKey = keyword;
	// here is where you put your Ajax request code, regardless if you're
	// using jQuery, Prototype JS, or the conventional way of doing Ajax
}
 
// cancels the previous search interval
var	ResetSearch = function() {
	// this is what cancels the setTimeout interval assigned
	// to SearchTimeOut
	clearTimeout(SearchTimeOut);
	SearchTimeOut = 0;
}

There you have it, hope that helps! :)

If you happen to be working on a custom object and using the prototype property of JavaScript to add custom methods but it doesn’t seem to work, the solution is simple, you just need to instantiate your custom object by using the new keyword so all the custom methods through the prototype object are added.

// Sample custom object
var CustomObject = function() {
	this.props = {
			property: 'value'
		}
}
 
CustomObject.prototype = {
	CustomMethod: function() {
		alert(this.props.property);
	}
}

// Instantiate the custom object
var foo = new CustomObject;

// Doing that enables you to do this
foo.CustomMethod(); // alerts 'value'
 
// will not work because the object is not created as a new instance
// prototype methods not yet added to CustomObject
CustomObject.CustomMethod();

HTH :)

If you noticed I have a ‘Back to top’ link appearing at the bottom right everytime you scroll down the page. Wonder how it was made? I’ll tell you. It’s quite simple. What you need is a div containing the text, apply some css and add an event using jQuery.

First, create the div:

<div id="toTop">^ Back to Top</div>

Then add style to it, add this in your css file or inside <style> tag:

#toTop {
	width:100px;
        border:1px solid #ccc;
        background:#f7f7f7;
        text-align:center;
        padding:5px;
        position:fixed; /* this is the magic */
        bottom:10px; /* together with this to put the div at the bottom*/
        right:10px;
        cursor:pointer;
        display:none;
        color:#333;
        font-family:verdana;
        font-size:11px;
}

And last, the jQuery code:

<script src="path/to/js/jquery.js"></script>
<script type="text/javascript">
$(function() {
	$(window).scroll(function() {
		if($(this).scrollTop() != 0) {
			$('#toTop').fadeIn();	
		} else {
			$('#toTop').fadeOut();
		}
	});
 
	$('#toTop').click(function() {
		$('body,html').animate({scrollTop:0},800);
	});	
});
</script>

There you have it! Simple isn’t it? :)
This works in Firefox 3.0.10 – 3.6.13, Internet Explorer 7 (Strict Mode) and 8, Google Chrome, jQuery 1.4.3.

Remember: On IE 7, your page needs to be at strict mode, just add a doctype at the top of your page:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

Hope that helps :)

Sorry no IE 6 support and also I think it doesn’t work in Quirks Mode (will see if it’s possible) :(

Let me know if something is missing in the code sample, for some reason it always gets deleted every time I update the post in the visual editor.

Check a working sample here.

Comments closed due to spamming. If you have questions, please send me an email which can be found here.