ZENVERSE » Web Development

Fixing Javascript Error: Property ‘submit’ of object # is not a function

Zen — Sun, 01 Apr 2012 09:55:25 +0000

Property ‘submit’ of object # is not a function

If you come across this error in javascript, most probably you are trying to submit the form dynamically using javascript. Don’t worry, the solution is easy.

The Solution

Check your

How to Remove Facebook Cache of Your Page’s Metadata

Zen — Sun, 04 Mar 2012 14:14:21 +0000

Whenever Facebook visited a page (most probably when someone shared your URL on Facebook), your page’s metadata will be cached. I am not sure when the cache expires, but you can actually clear the cache easily by directing your browser to this address below:

http://developers.facebook.com/tools/debug/og/object?q=[YOUR_PAGE_URL]&fbrefresh=any

Of course, replace “[YOUR_PAGE_URL]” with your page URL and you are good to go.

I also created a quick page for you to clear facebook cache of any page in my WebTools Site. You can bookmark this page to use it in future.

Hope this helps :)

Reducing Image File Size (Compression) using PHP GD

Zen — Thu, 16 Feb 2012 09:11:23 +0000

Most of the time, photos uploaded by users are not optimized for web. In other words, they might not be using the best file format for their photos, thus taking much more spaces in your server than it actually need. Using PHP, you can easily reduce the file size of those uploaded images during upload time. But of course, when reducing the file size, we sacrifice the image quality. Therefore, if you are running image uploader website, this is not recommended.

The simple function

The best file format for photo is JPEG as it provides the best reduction in file size. The downside is losing details – your photo will be blurred depending on your quality setting. If your photo contains crisp texts, the text will most likely be blurred. Check out the code below.

This function below can load from PNG, JPEG or GIF file ($source_url) and save the compressed photo as JPEG in $destination_url.

^?View Code PHP


 
function compress_image($source_url, $destination_url, $quality) {
	$info = getimagesize($source_url);
 
	if ($info['mime'] == 'image/jpeg') $image = imagecreatefromjpeg($source_url);
	elseif ($info['mime'] == 'image/gif') $image = imagecreatefromgif($source_url);
	elseif ($info['mime'] == 'image/png') $image = imagecreatefrompng($source_url);
 
	//save file
	imagejpeg($image, $destination_url, $quality);
 
	//return destination file
	return $destination_url;
}
 
//usage
$compressed = compress_image('source.png', 'destination.jpg', 90);
 
?>

Explanation

imagecreatefromjpeg() is where PHP loads your source image.
imagejpeg() is the part where PHP output the image. In our case, we specified the second parameter (destination_url) therefore PHP saved the image instead of outputting it.
You can control the quality of the image. In the example above, we used 90/100 to maintain the quality of the photo while reducing file size. You need to try out various setting to suit your need.

A quick testing page

I have written a small PHP page to test the image compression. It put your original and compressed photos side by side so that you can compare the quality and file size. Save it as compress.php, change the image URL and quality setting then run it in your server.

^?View Code PHP


 
function compress_image($source_url, $destination_url, $quality) {
	$info = getimagesize($source_url);
 
	if ($info['mime'] == 'image/jpeg') $image = imagecreatefromjpeg($source_url);
	elseif ($info['mime'] == 'image/gif') $image = imagecreatefromgif($source_url);
	elseif ($info['mime'] == 'image/png') $image = imagecreatefrompng($source_url);
 
	//save it
	imagejpeg($image, $destination_url, $quality);
 
	//return destination file url
	return $destination_url;
}
 
$source_photo = 'uploads/source.jpg';
$dest_photo = 'uploads/testing.jpg';
 
$d = compress_image($source_photo, $dest_photo, 90);
 
echo '

	.$source_photo.'" alt="" />
	
'.filesize($source_photo).' Bytes

 

	.$dest_photo.'" alt="" />
	
'.filesize($dest_photo).' Bytes

';
 
?>

Hope this helps :)

PHP – Using oEmbed API to Embed Videos

Zen — Mon, 30 Jan 2012 08:53:09 +0000

oEmbed is a format for allowing an embedded representation of a URL on third party sites. Which means, if we have a video page’s URL, we can easily get the video thumbnail photo, video title, HTML code to embed it in our website and more. But of course, the video site must have oEmbed support in order for us to do that. Check out http://oembed.com for full documentation.

Let’s look at how YouTube oEmbed works

1. First, send a request to YouTube’s Oembed API page with a video URL (must be urlencoded) as parameter and we also specified that we want it to be returned in json format.

http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch%3Fv%3DbDOYN-6gdRE&format=json

2. You will then see a long json-encoded string which contains all information about the video.

3. Next thing you need to do is just simply json-decode the string using your programming language, then you are free to use the information. We will see how to do that in PHP.

Using Oembed to Embed Youtube Videos in PHP

^?View Code PHP


 
$videourl = 'http://www.youtube.com/watch?v=gB4nwqNM190';
 
$json = @file_get_contents('http://www.youtube.com/oembed?url='.urlencode($videourl).'&format=json');
$decode = json_decode($json, true);
 
if ($decode == null || !$decode) {
	$error = true;
	//error control here
} else {
	$thumb = $decode['thumbnail_url'];
	$html = $decode['html'];
}
 
?>

It’s pretty straightforward and self-explanatory:

First, we send a url request to YouTube’s obembed API page using file_get_contents() function.
Second, we decode the response using json_decode() function which convert json format to array.
Third, if there is no error in decoding, we then assign $thumb and $html and use it in our website or program.

Extra: If you want to limit the embedded video’s width or height

You can specify the max height or max width by appending the maxwidth or maxheight parameters to the oembed URL. (Please note that this cannot resize a smaller video to bigger size)

For example, from our example above, to specify max width of 300 pixels:

http://www.youtube.com/oembed?url=http%3A//www.youtube.com/watch%3Fv%3DbDOYN-6gdRE&format=json&maxwidth=300

You should notice the video embedding code (iframe) is now limited to width of 300 pixels.

How do I embed videos from other video sites like Vimeo?

Most of the popular video sites has oEmbed support just like YouTube. For example, by googling “vimeo oembed” we found vimeo oembed documentation.

In vimeo, this is the URL we should send our request to:

http://vimeo.com/api/oembed.json?url=http%3A//vimeo.com/7100569

More details about oEmbed API page for other video sites will be covered in our next blog post (coming soon).

PHP MySQL – Get Next Auto Increment Value of a Table

Zen — Sat, 14 Jan 2012 06:05:14 +0000

We do not often need this but sometimes when we need to retrieve the next auto increment value of a table (without incrementing the auto increment value of course), this solution below will help.

^?View Code PHP


 
$query = mysql_query("SHOW TABLE STATUS WHERE name='your_table_name_here'");
if (mysql_num_rows($query)) {
	$result = mysql_fetch_assoc($query);
	echo $result['Auto_increment'];
} else {//error
	//error control here
}
 
?>

Just replace “your_table_name_here” with your mySQL table name.

As a Function

Furthermore, making it a PHP function would make the solution looks clean.

^?View Code PHP


 
function get_next_value($tablename) {
	$query = mysql_query("SHOW TABLE STATUS WHERE name='".mysql_real_escape_string($tablename)."'");
	if (mysql_num_rows($query)) {
		$result = mysql_fetch_assoc($query);
		return $result['Auto_increment'];
	} else {//error
		return false;
	}
}
 
//usage
$nextval = get_next_value('your_table_name_here');
 
?>

Hope this helps.

PHP Smart Date Function – Display Time Elapsed (Difference) Based on a Given Timestamp

Zen — Mon, 12 Dec 2011 04:43:29 +0000

As a web developer, we often need to display dates in our website. As a web user myself, I don’t like to read full dates like “26 November 2011 11:30PM” because it takes me a little while to interpret the date. I prefer reading smart dates like “1 hour ago” or “6 months ago”. Therefore, here I wrote a quick and simple function in PHP that display the time difference/elapsed based on a given timestamp value.

PHP Smart Date Function

^?View Code PHP

/*
Simple PHP Smart Date Function
by Zen (http://zenverse.net)
*/
function smartdate($timestamp) {
	$diff = time() - $timestamp;
 
	if ($diff <= 0) {
		return 'Now';
	}
	else if ($diff < 60) {
		return grammar_date(floor($diff), ' second(s) ago');
	}
	else if ($diff < 60*60) {
		return grammar_date(floor($diff/60), ' minute(s) ago');
	}
	else if ($diff < 60*60*24) {
		return grammar_date(floor($diff/(60*60)), ' hour(s) ago');
	}
	else if ($diff < 60*60*24*30) {
		return grammar_date(floor($diff/(60*60*24)), ' day(s) ago');
	}
	else if ($diff < 60*60*24*30*12) {
		return grammar_date(floor($diff/(60*60*24*30)), ' month(s) ago');
	}
	else {
		return grammar_date(floor($diff/(60*60*24*30*12)), ' year(s) ago');
	}
}
 
 
function grammar_date($val, $sentence) {
	if ($val > 1) {
		return $val.str_replace('(s)', 's', $sentence);
	} else {
		return $val.str_replace('(s)', '', $sentence);
	}
}

Basically I defined 2 functions above:
smartdate – calculates the difference between given timestamp and current time, then returns the correct sentence
grammar_date – modifies the returned sentence to plural form or singular form

Usage

The usage is simple and straightforward.

^?View Code PHP


 
//example 1
echo smartdate($yourtimestamp);
 
//example 2
echo 'Posted on '.smartdate($yourtimestamp); 
 
?>

By default, this function returns the floor() value, i.e: instead of returning “1.7 years ago”, it returns “1 year ago”. Anyway, the function can be easily modified to suit your specific needs.

Give users the choice to view the full date

1 disadvantage of smart date is of course, it reduces the level of detail and granularity of the date information. For example, dates of 13 months ago or 19 months ago will both be displayed as “1 year ago”.

The most common way to let user view the full date is to add a “title” attribute with full date as the attribute value. Now, when user mouseover your smart date, they can see the full date popping up as tooltip. Facebook uses this approach.

^?View Code PHP


 
//from example 2 above
echo 'Posted on . $originalfulldate . '">' . smartdate($yourtimestamp) . ''; 
 
?>

Hope this helps.

Cannot Access Localhost After Editing etc/hosts and Flushing DNS Cache

Zen — Mon, 21 Nov 2011 16:23:42 +0000

I was developing a new website that uses Facebook Login as the membership system. I came across this situation where I needed to create a “fake” domain by editing the etc/hosts file. Somehow, after editing the etc/hosts file (following an online guide), I cannot seems to browse http://localhost in my browser anymore. However, I can still browse my local apache server using http://127.0.0.1

NOTE:
This is not XAMPP / apache issue
This is not browser-specific issue

In fact, this is a simple problem with simple solution. However, this problem occurs when I am getting frustrated with the Facebook integration problem (after 12 hours of debugging). Therefore, I missed some simple but important steps to solve this problem. Here I list them down below:

1. Ping Localhost

For Mac OS users, open up your Terminal. For windows users, open up your command prompt.

Type the “ping localhost” and press enter.
You should get error messages like “unknown host” since you are having this problem.

Next, type “ping 127.0.0.1″ and press enter.

If you saw something like this, the ping is successful:

^?View Code CMD

PING 127.0.0.1 (127.0.0.1): 56 data bytes
64 bytes from 127.0.0.1: icmp_seq=0 ttl=64 time=0.118 ms
64 bytes from 127.0.0.1: icmp_seq=1 ttl=64 time=0.171 ms
64 bytes from 127.0.0.1: icmp_seq=2 ttl=64 time=0.167 ms

If you get “unknown host error”, please check whether you have started your local server service.

2. Clear your browser cache

Modern browsers cache a lot of stuff, including DNS cache. They may have cached the erroneous DNS setting in etc/hosts, so you might want to clear your browsers cache and try loading localhost again. Clearing cache alone would already be sufficient, you can skip clearing cookies, saved session, etc.

If it still doesn’t work, try #3 below.

3. Did you just flushed the DNS cache?

I ran this command in terminal (Mac) to flush my cache before I get into this mess: “dscacheutil -flushcache”
For some reason, after I flushed the cache, the DNS setting is not being rebuilt – I cannot ping localhost but I can ping 127.0.0.1

After restarting my laptop (to rebuild the DNS settings & cache) and clearing all browser cache once again, I finally get my localhost displayed again.

Now I hope this helps some of you.

Legacy Facebook “Share” Button Codes (Bubble Count, Box Count and More)

Zen — Wed, 16 Nov 2011 16:12:32 +0000

Few months ago, Facebook removed the page that allow us to generate codes for their official “Share” button. They replaced it with “Like” button instead. While “Like” button is fast and easy but we cannot add our comment along with the “Like” action. Therefore, in some cases, we still need the old Share button. Fortunately, the sharer.php still exists, so we can add the Share button using Facebook’s official script.

Here are the complete codes for all sizes of Facebook share button for those who are interested:

Box Count

Share *count will only visible when there is at least 1 share

Codes:

^?View Code HTML

Share

Button Count

Share *count will only visible when there is at least 1 share

Codes:

^?View Code HTML

Share

Button only

Codes:

^?View Code HTML

Share

Small Icon only

Codes:

^?View Code HTML

Share

Custom URL?

All codes above “shares” the current page. If you want to share another page or a specific page, you need to add a “share_url” attribute to the tag. You need this too when you have multiple share buttons in a single page.

Example below shares our main website http://zenverse.net instead of this page.

Here’s how:

^?View Code HTML

Share

Multiple Share Buttons

If you have multiple share buttons in a single page, you just need to include the

4 Must-Have Google Chrome Extensions for Web Developers

Zen — Sat, 03 Sep 2011 09:59:23 +0000

Web developers often need to do repetitive works such as taking screenshots, turning off javascript or images, check backlinks or ranking of websites and more. Fortunately, with these 4 totally free Google Chrome extensions, web developers can save a lot of time on these repetitive works, thus increasing productivity.

Awesome Screenshot: Capture & Annotate

As the name suggests, this awesome extension can do more than just screenshot. At a glance, it provide 3 ways to capture screenshots: visible area, entire page or selected area. Furthermore, it allows us to crop, annotate the screenshot with shapes and texts as well as blur sensitive info. Most importantly, it comes with undo feature.

Pendule

This is an essential extension for web developers. Below are some key features of Pendule I find it useful:

View all css and javascript codes with syntax highlighting
Reload css without refreshing the page.
One-click disable or enable external/inline CSS
One click hide all images / background images
Color picker and ruler to measure an element in pixels
Links to validate html / css / feed
Added “View Selection Source” feature (when you right click a highlighted area), just like in Mozilla Firefox.

Resolution Test

This allows web developers to test their website in all common screen resolutions, as well as user-defined size. With this extension, we do not have to update our screen resolution manually anymore. All common screen size can be applied and tested with only one click, Google Chrome will then changed its windows size, without changing the screen resolution.

SEO for Chrome

This extension can display information such as page rank, number of backlinks, social media stats, traffic stats and more within seconds. It can also show all nofollow links, if enabled, by highlighting them with border. The keyword research tool sounds useful too, although I can’t seems to use it at the moment.

If you know other good extension, feel free to share with us in the comment section.

How to Fix FTP Login Problem in WordPress in XAMPP for Mac OS (Localhost)

Zen — Tue, 12 Jul 2011 15:44:29 +0000

If you are using XAMPP for Mac OS like me, and was asked to enter FTP login information when you upgrade WordPress core and download themes or plugins, then this guide is for you. After searching for solution online, I found that this is a permission problem due to your Mac’s username is different compared to the default user name in XAMPP for Mac, called nobody.

As far as I understand, this has nothing to do with FTP settings. This problem occurs because the Apache HTTP service was being run as “nobody” while your Mac user name is a different name. Thus, it has no permission to add/edit your server files so WordPress attempted to use FTP to perform its job.

Editing httpd.conf as Admin

First of all, editing this file is not as easy as using a text editor program and edit it because this read-only file can only be changed by root or superuser, not even administrator. There are 2 or more methods that you use to edit such file:

1. Edit using vi editor in sudo mode using Terminal
2. Run Mac OS TextEditor in sudo mode using Terminal and edit the file

- Terminal is a command line tool just like Window’s CMD.
- Sudo mode refers to running the file as superuser or root.
- Vi editor is a command line editor that is very not user-friendly to use, edit and save (at least for beginner)

Thus we will use Method 2 to perform this task.

1. Run Mac OS TextEditor application in sudo mode using Terminal and edit the file

First of all, open up your Terminal by typing “Terminal” in your Spotlight search box (upper right corner)

Once the terminal is loaded, type this in: (copy and paste if possible)

^?View Code TERMINAL

sudo /Applications/TextEdit.app/Contents/MacOS/TextEdit /Applications/XAMPP/etc/httpd.conf

- sudo command will run the TextEdit application as root
- Seperated by a space after the application path, is the path of httpd.conf (the file to edit)

Press enter, a TextEdit window should pop up and you can then freely edit the file as root.

2. Change the user name and group name

Now, look for these 2 lines:

User nobody
Group admin

Change them to:

User your-mac-username
Group staff

- Staff is the non-admin user group in Mac.
- If you are not sure about your mac username, open Finder > go to Macintosh HD > Users > Look for your folder’s name.

Now restart your XAMPP apache server and it should be working perfectly.