Gmail logo new look

Gmail,  Gmail is …, ah I really don’t need to explain this. So, continue reading

The Facts

Gmail ignores . (dot) in username

If you have Gmail account example@gmail.com, actually you also have ex.ample@gmail.com, exam.ple@gmail.com, and so on until all characters in the username are separated with dot. These all have same inbox, and you can login using each of them. Also, emails come to that address will be received into one inbox example@gmail.com See: Gmail Dot Trick Bug or a Feature ?

Gmail ignores all character after + (plus sign) in username

While you think the dot feature is not enough, Gmail also has another feature; you can add acceptable character in your username, separated by + (plus sign). It can be example+one@gmail.com, example+two@gmail.com, etc. An email sent to example@gmail.com or example+one@gmail.com or example+two@gmail.com will all be redirected to one common email address and that is example@gmail.com. See: GMail Easter Eggs: Dot Blindess & Email Aliases.

Gmail does not recognize characters after the PLUS symbol but the gmail search filter can distinguish between the different address and you can therefore redirect these email to separats gmail folders or apply different labels.

Gmail user can use @googlemail.com instead of @gmail.com

Again, example@gmail.com can be replaced with example@googlemail.com as well as if it combined with dot and plus.

The Problem

Spammer in SMF forum

Besides the advantage of filtering, this feature has disadvantage for website owner, eg Community Forum and or website that requires unique membership. Yes, persons with Gmail account could have as many as possible duplicate accounts in our website. Of course this is very undesirable. Moreover, this way mostly used by spammer to register in our forum as they only need one Gmail account to register their hundreds clone. Imagine this, how many accounts can be generated from one Gmail account? It almost infinite, if I can’t say unlimited.

The Solution

If you think Gmail feature is bad for membership website, the only solution is to strip all gmail aliases and leave only original example@gmail.com during member registration process. The following lines of code is a PHP functions for this task.

Implementations

In WordPress

wordpress logo

It’s easy to call this function in WordPress platform, using user_registration_email filter hook. This function will be invoked immediately while user perform registration. Place this code in functions.php in your WordPress theme file or can be packaged into a plugin.

In SMF (Simple Machines Forum)

SMF Forum Logo

Unlike WordPress, SMF needs more attention while doing modifications. Yes, you need to hardly editing existing file, so don’t forget to backup before you do anything with files in SMF.

1. The file you will edit located in /Sources/Register.php
2. Open file with code editor, eg. Notepad++
3. Find this set of codes:

4. DO NOT edit anything inside the code above, yet add this code after it:

   As you see this is a direct code, not a PHP function, since it’s already in another SMF function, Register2()

5. Save file and re-upload it to server.

In Custom PHP

If you using custom PHP code or CMS other than WordPress and SMF, call strip_gmail_email_aliases() right after registration form is submitted. Example:

Conclusion

Your comment are welcome.

What Is jScrollPane?

jScrollPane is a cross-browser jQuery plugin by Kelvin Luck which converts a browser’s default scrollbars (on elements with a relevant overflow property) into an HTML structure which can be easily skinned with CSS.

jScrollPane is designed to be flexible but very easy to use. After you have downloaded and included the relevant files in the head of your document all you need to to is call one javascript function to initialise the scrollpane. You can style the resultant scrollbars easily with CSS or choose from the existing themes. There are a number of different examples showcasing different features of jScrollPane and a number of ways for you to get support.

What Is Facebook ScrollableArea?

Facebook Scrollable Area

Recently, Facebook ScrollableArea can be found in many part of Facebook user interface to handle overflow content. One is in the activity feed in the top right area with a cute scrollbar that can be scrolled by dragging and mouse scroll.

Yes, it can be done nicely — with little CSS and JavaScript customization — using jScrollPane I mentioned above

jScrollPane + (JavaScript + CSS) = Facebook ScrollableArea

Don’t worry, there is no pain coding needed to do this, just follow this steps:

1. Include jScrollPane library and jQuery (if not yet) to your page

<!-- styles needed by jScrollPane -->
<link type="text/css" href="style/jquery.jscrollpane.css" rel="stylesheet" media="all" />

<!-- latest jQuery direct from google's CDN -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>

<!-- the mousewheel plugin - optional to provide mousewheel support -->
<script type="text/javascript" src="script/jquery.mousewheel.js"></script>

<!-- the jScrollPane script -->
<script type="text/javascript" src="script/jquery.jscrollpane.min.js"></script>

2.Initialize jScrollPane to your selector.

By default, the following code is ready to convert your scrollbar to  jScrollPane.

$(function() {
	$('.content-area').jScrollPane();
});

But here, we need more settings. It’s should look like this:

$('.content-area').jScrollPane({
	horizontalGutter:5,
	verticalGutter:5,
	'showArrows': false
});

3. Scrollbar should be hidden if no mouse over on it.

So, we use .fadeIn() and .fadeOut() jQuery effects:

$('.jspDrag').hide();
$('.jspScrollable').mouseenter(function(){
    $('.jspDrag').stop(true, true).fadeIn('slow');
});
$('.jspScrollable').mouseleave(function(){
    $('.jspDrag').stop(true, true).fadeOut('slow');
});

4. Last but not least, add custom CSS
-

/*scrollpane custom CSS*/
.jspVerticalBar {
	width: 8px;
	background: transparent;
	right:10px;
}

.jspHorizontalBar {
	bottom: 5px;
	width: 100%;
	height: 8px;
	background: transparent;
}
.jspTrack {
	background: transparent;
}

.jspDrag {
	background: url(images/transparent-black.png) repeat;
	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;
}

.jspHorizontalBar .jspTrack,
.jspHorizontalBar .jspDrag {
	float: left;
	height: 100%;
}

.jspCorner {
	display:none
}

We use a 1×1 pixel PNG transparent image for jspDrag background, Download it here (right click, save link/target)

 Live Demo

Click Here to See Live Demo

Hooks ilustration, image courtesy of lookingglassoutfitters.com

Probably you have known this, WordPress code is pretty good, especially when compared with other CMS or what we ever found on PHP tutorials. The one I like is how WordPress uses hooks.   If you ever created WordPress plugins, you may experienced that you don’t need to modify any of core code just to add something in the header and footer. Or even for more complex task, add additional menu and page on WordPress admin.

Things you need to do is to know what hook related to that, and add actions or filter with your own callback function. WordPress hooks divided in to two sections; Action hook and Filter hook. What is the difference? In simple, actions is to add functionality or output, where filter is to manipulate existing output. WordPress hook code stored in wp-includes/plugins.php

Err, I am not going to deeply explain about WordPress hook. But, in case you’re wondering how it works or may be you want implement it in your own CMS or PHP script, here is the step by step .

$cms_filter = Array();

Declare do_action() function, the task of this function is to call custom functions stored in $cms_filter, uses  call_user_func_array();

function do_action($tag){
global $cms_filter;
if(isset($cms_filter[$tag]) AND function_exists($cms_filter[$tag])){
call_user_func_array($cms_filter[$tag], array());
}
}

Declare add_action() function, the task of this function is to store custom function to $cms_filter global variable.

function add_action($tag,$callback){
global $cms_filter;
$cms_filter[$tag] = $callback;
}

And………. you’re done. What..? Yes, that code is already to use.

Ok, let’s go. Place this code in wherever you like, for example in your core CMS file, or in your header’s template file between <head> and </head>

do_action('cms_head');

Whenever you want to add something to the location, just call this function:

add_action('cms_head','script_in_my_head');

cms_head is hook name, and script_in_my_head is must exists callback function that refer to your custom code. See example below:

function script_in_my_head(){
echo '<script>alert('Hello world!')</script>';
}

Note: This is only a simple working code, not a replacement nor has same capability as actual WordPress hooks. You may edit or improve it to meet your need.

function find_file($dirs,$filename,$exact=false){

	$dir = @scandir($dirs);
	if(is_array($dir) AND !empty($dir)){
	foreach($dir as $file){
	if(($file !== '.') AND ($file!=='..')){
	if (is_file($dirs.'/'.$file)){
		$filepath =  realpath($dirs.'/'.$file);

		if(!$exact){
			$pos = strpos($file,$filename);
			if($pos === false) {
			}
			else {
				if(file_exists($filepath) AND is_file($filepath)){
				echo str_replace($filename,'<span style="color:red;font-weight:bold">'.$filename.'</span>',$filepath).' ('.round(filesize($filepath)/1024).'kb)<br />';
				}
			}
		}
		elseif(($file == $filename)){

			if(file_exists($filepath) AND is_file($filepath)){
				echo str_replace($filename,'<span style="color:red;font-weight:bold">'.$filename.'</span>',$filepath).' ('.round(filesize($filepath)/1024).'kb)<br />';
			}
		}
	}
	else{
		find_file($dirs.'/'.$file,$filename,$exact);
	}
	}
	}
	}
}

The function accepts three parameters:

1. $dir (string), absolute path of the directory to start the search, to use current directory use dirname(__FILE__).
2. $filename (string), the keyword to search for.
3. $exact (bool), true/false, default is false. If you set it to true it will find the exact ‘index.php’ not ‘anotherindex.php’ for keyword ‘index.php’.

How to use this function?

This will find all file name contains content within current directory and all it’s sub directories.

< ?php find_file(dirname(__FILE__),'content');
?>

And the search result will be like this:

Search file using PHP functions

Another Approach

Another way to search file in directory is using PHP glob function, as written here.

ICANN, the organization in charge of domain names, is planning a dramatic rewriting of the rules for web addresses that could reduce the overwhelming importance of the .com extension. Under new ICANN rules, groups and organizations will be able to apply for new Internet extensions (the part after the “dot” in a web address). The new domain extensions are officially called “new generic top level domains” (new gTLDs).

Consider the opportunities that new domains will offer organizations, businesses, and individual domain owners, as well as end-users. Registering a .green domain for your brand sends the unmistakable signal that your company is dedicated to preserving the environment. New eCommerce organizations are assured of data security with a .secure domain for their checkout processes. And new musicians can launch their careers with .music domains. We estimate that the first group of new gTLDs (“first round”) will be available by October 2012.

Pre-register now!

Secure your chance to own one of the upcoming new top-level domains by pre-registering your desired domain name now. We will attempt to register your reserved domains as soon as this becomes possible thereby increasing your chances of owing one of the new TLDs. Additionally, by pre-registering, you won’t miss any of the registration deadlines. The pre-registration process is free; no processing fees will apply. Only in the case that you do wish to register any reserved domains will you be charged a fee. Unfortunately there is no guarantee that we can successfully register all desired, pre-registered domains.

New TLD Timeline //source: uniteddomains.com

Lists of New Top Level Domains:

1. .africa
2. .bank
3. .bayern
4. .bcn
5. .berlin
6. .bike
7. .board
8. .bzh
9. .california
10. .cymru
11. .earth
12. .eco
13. .eng
14. .eus
15. .fam
16. .film
17. .florida
18. .free
19. .gal
20. .gay
21. .gmbh
22. .green
23. .hamburg
24. .health
25. .hiv
26. .horse
27. .hotel
28. .irish
29. .ker
30. .koeln
31. .kurd
32. .london
33. .love
34. .madrid
35. .moscow
36. .money
37. .miami
38. .mls
39. .movie
40. .music
41. .naples
42. .ngo
43. .nyc
44. .one
45. .pad
46. .paris
47. .peace
48. .phone
49. .quebec
50. .radio
51. .real
52. .riga
53. .roma
54. .saarland
55. .secure
56. .sfo
57. .shop
58. .sco
59. .scot
60. .sic
61. .site
62. .skate
63. .ski
64. .sport
65. .surf
66. .val
67. .vegas
68. .versicherung
69. .ven
70. .web
71. .wine
72. .x-x-x (without dash)

Source: Sedo, UnitedDomains.com

Youtube Screenshot

Hello, sometime we need to parse Youtube URL to get video ID, thumbnail image, or embed code automatically with PHP. To do so, I have created a function parse_youtube_url();

With this function we can:

- Get video ID
- Get Embed code
- Get Thumbnail or HQ Thumbnail URL

Check this out:

/*
* parse_youtube_url() PHP function
* Author: takien
* URL: http://takien.com
*
* @param string $url URL to be parsed, eg:
* http://youtu.be/zc0s358b3Ys,
* http://www.youtube.com/embed/zc0s358b3Ys
* http://www.youtube.com/watch?v=zc0s358b3Ys
* @param string $return what to return
* - embed, return embed code
* - thumb, return URL to thumbnail image
* - hqthumb, return URL to high quality thumbnail image.
* @param string $width width of embeded video, default 560
* @param string $height height of embeded video, default 349
* @param string $rel whether embeded video to show related video after play or not.

*/

function parse_youtube_url($url,$return='embed',$width='',$height='',$rel=0){
	$urls = parse_url($url);

	//url is http://youtu.be/xxxx
	if($urls['host'] == 'youtu.be'){
		$id = ltrim($urls['path'],'/');
	}
	//url is http://www.youtube.com/embed/xxxx
	else if(strpos($urls['path'],'embed') == 1){
		$id = end(explode('/',$urls['path']));
	}
	 //url is xxxx only
	else if(strpos($url,'/')===false){
		$id = $url;
	}
	//http://www.youtube.com/watch?feature=player_embedded&v=m-t4pcO99gI
	//url is http://www.youtube.com/watch?v=xxxx
	else{
		parse_str($urls['query']);
		$id = $v;
		if(!empty($feature)){
			$id = end(explode('v=',$urls['query']));
		}
	}
	//return embed iframe
	if($return == 'embed'){
		return '<iframe width="'.($width?$width:560).'" height="'.($height?$height:349).'" src="http://www.youtube.com/embed/'.$id.'?rel='.$rel.'" frameborder="0" allowfullscreen></iframe>';
	}
	//return normal thumb
	else if($return == 'thumb'){
		return 'http://i1.ytimg.com/vi/'.$id.'/default.jpg';
	}
	//return hqthumb
	else if($return == 'hqthumb'){
		return 'http://i1.ytimg.com/vi/'.$id.'/hqdefault.jpg';
	}
	// else return id
	else{
		return $id;
	}
}

<?php
echo parse_youtube_url('http://youtu.be/zc0s358b3Ys','hqthumb'); //return http://i1.ytimg.com/vi/zc0s358b3Ys/hqdefault.jpg
echo parse_youtube_url('http://www.youtube.com/watch?v=zc0s358b3Ys','embed'); //return embed code (iframe)
?>

Note:
Please report if there any error in the code you copied from here, because it might has changed by WordPress during saved/published.
Thank you.

Domain Name

The following is the list of available domain name you may want to register. Please use google or online dictionary to find out each word meaning.

Once you find the name you desired, you can register it through popular domain name registrar such as Godaddy, Name, Enom, Dynadot etc.

There is no guarantee about this domain availability since everyday people looking for a domain name. (I check this at Dec 06, 2010).

azoted.com
azoths.com
begazed.com
begazes.com
benzins.com
benzyls.com
blowzed.com
bortzes.com
braizes.com
bromize.com
brulzie.com
buzukia.com
buzukis.com
chazzen.com
clozes.com
coryzal.com
coryzas.com
cozener.com
crozers.com
defuzes.com
dezincs.com
diazole.com
ditzier.com
donzels.com
dozened.com
ectozoa.com
evzones.com
feazed.com
feazes.com
feazing.com
feezed.com
feezes.com
feezing.com
fozier.com
foziest.com
frazils.com
frizers.com
frizing.com
furzier.com
fuzils.com
gauzier.com
gauzily.com
gazars.com
gazumps.com
ghazies.com
glozes.com
glozing.com
grecize.com
hamzahs.com
hazans.com
heezed.com
heezes.com
heezing.com
hutzpas.com
huzzaed.com
jezails.com
khazens.com
kolhozy.com
kolkozy.com
mahzors.com
matzas.com
matzoon.com
mazards.com
mazedly.com

Tooltip on desktop application

Basic

• This tooltip would replace title attribute of an HTML element.
• This tooltip text is extracted from the title attribute.
• This tooltip is compatible with common modern browser.
• This is not a jQuery plugin.

Logic

When cursor over on an element with title attribute, normally it will display a tooltip. Extract that title attribute, save it to a variable and remove original title attribute (to prevent original title being displayed).
Create a div element next to current element with position absolute, hidden, and fill it up with extracted title text. Finally, display that div when mouse over on it.

Then what happen when mouse cursor leaves the element? Simply, restore title attribute, and hide or remove tooltip.

Do it your self

Below is the code with explanation comment.

Mouse Enter

$('.poptip').mouseenter(function(){
var text = $(this).attr('title'); //extract title, save to "text" variable
var posi = $(this).position();
var top  = posi.top; //top position
var left = posi.left+5; //left position
var wid	 = $(this).width(); //element width
$(this).attr('title',''); //remove original title
$(this).parent().append('
'+text.replace('|','')+'

'); //create div element with class .poptext, and fill with extracted title.

//some css styling
	$('.poptext').css({'left':(left+wid)+'px',
				'top':(top-$('.poptext').height())+'px',
				'background':'#fffeee',
				'border':'1px solid #f7a229',
				'display':'none',
				'position':'absolute',
				'z-index':'1000',
				'padding':'5px',
				'font-size':'0.8em'
	});

//show tooltip, slowly
	$('.poptext').fadeIn('slow');
});

Mouse Leave

$('.poptip').mouseleave(function(){
	var title = $(this).parent().find('.poptext').html(); //restore title text from tooltip
	$(this).attr('title',title.replace('','|')); //place it back to title attribute
	$(this).parent().find('.poptext').fadeOut('slow'); //hide tooltip
	$(this).parent().find('.poptext').remove(); //remove element.
});

Usage/Example

You’re done.

Pictures mean a thousand words:

Yahoo.com:

Ask.com:

Google.com:

Bing.com:

Note: Please try it at home.

Facebook Friend Selector

Facebook friends selector is one of important thing when you develop a Facebook application. It will simplify the way your visitor select their Facebook friend’s instead of manually find friend’s user ID.

Just type part of the friend’s name, the matches name will appears below the field and select one you want.

This is not just another Facebook friend selector you might found somewhere, because it’s not using FBML or iframe, there’s only JavaScript and PHP.

1. Once you logged in, the script will ask your permission to access your account (friends list etc).
2. If you choose allow, then the script fetchs your friend data from https://graph.facebook.com/me/friends and get your friend lists in JSON format.
3. Some PHP function convert it into PHP array and simplify it, do some filtering based on user input, then encode back to JSON format so it will compatible with the jQuery autocomplete plugin.

Can’t wait to see it in action?
Just follow the links below: