Problem with Current Email Obfuscation

Manual Obfuscation

Some of the more common examples used quite frequently have been listed below

emailme[at]domain.com
emailme [at] domain [ . ] com
emailme(at)domain(dot)com

Posting email addresses with obfuscation like in the above example is counter productive and non-intuitive. Not only are users are expected to copy the email address and manually edit it but an assumption is made that the user who sees the Obfuscated email knows where to edit it the Obfuscated email.

Using Images

Another very common method to solve this problem has been to use images which display the email addresses. This again is counter productive and non-intuitive as it requires the user to manually read out and type the email addresses.

Using JavaScript/PHP

JavaScript or PHP has been one of the most widely used methods of Email Obfuscation. One drawback of the method is that it requires you to Obfuscate the email address and use that in your HTML code, when the page loads a JavaScript function fires which de-Obfuscates the email address. This method/trick works most of the time since Spammers and email harvesting bots make use of raw HTML to harvest email addresses and are not smart enough to parse out the JavaScript code. Users with JavaScript disabled (a very rare percent) will not be able to see the email address since the email is presented in the Obfuscated form.

Semantic Anti Spam Email Obfuscation Solution

A simple solution is to use HTML Character Entity to Obfuscate the email address.
For example for the email address emailme@domain.com we could encode each letter with their respective HTML Character Entity to give us the following HTML code given below.

emailme@domain.com

The code above will render as emailme@domain.com when viewed as a HTML page in any browser.

Semantic Email Obfuscation For Better User Experience and Usability

Using Semantic Email Obfuscation not only helps acts as an anti-spam protection measure against spammers. But is also helpful from a User Experience and usability point of view. You can easily use it in anchor tag with href="mailto:". See the example below. A user can easily copy or click on the link to get your email address.

<a rel="nofollow" title="My Email Address" HREF="mailto:&#101;&#109;&#097;&#105;&#108;&#109;&#101;&#064;&#100;&#111;&#109;&#097;&#105;&#110;&#046;&#099;&#111;&#109;">
Email Address
</a>

You don’t have permission to access /MAMP/ on this server.

Solving the MAMP Start Page Error

After hunting around a lot for a solution, I found a very simple fix. For some reason there was a .htaccess file in the root folder of the my hard disk. All you need to do is delete the .htaccess and presto your MAMP Start Page is back. If you are using WordPress then you might have to update your Settings -> Permalinks again to make Permalinks functional again.

Viewing and Deleting Hidden Files On MAC OS X

To view hidden files on a Mac you can use a program like Houdini which you can use to browse hidden files or to enable viewing of hidden files. Download Houdini here.

If you are geeky enough to type out commands on the terminal you can use the following commands.

To view hidden folders:

1. Open the Terminal (located in /Applications/Utilities/)
2. At the command prompt type

     defaults write com.apple.finder AppleShowAllFiles -bool true

3. Press return to execute the command.
4. For the changes to take effect, either log out then log back in again, or relaunch Finder (this can be done from the Force Quit Window or by typing ‘killall Finder’ in a Terminal window).

To hide the hidden files again:

1. Open the Terminal
2. At the command prompt type

     defaults write com.apple.finder AppleShowAllFiles -bool false

3. then press return to execute the command.
4. Log out then back in again, or relaunch Finder (explained above).

Glyphish Icons for iPhone & iPad apps

Created by Joseph Wain and shared under a Creative Commons Attribution license. Designed and carefully optimized for use on toolbars and tab bars in iPhone & iPad apps, they’re also perfect for Android apps, websites, t-shirts, tattoos and more.

Download Glyphish Icons.

Glyphish Vector Icons Set

Iconic Icon Set

Iconic is a minimal set of icons consisting of 114 marks in raster and vector formats — free for public use.
One main goal for these icons were to have them maintain high legibility over a large scale range. Most of the icons in this set will work from 8×8 pixels to however large you need to go. To give the greatest flexibility, the icon set packages all icons in PNG, SVG, SWC and Omnigraffle stencil formats. Iconic tries to work with various tools/workflows to make your life a bit easier.

Dowload Iconic Vector Icons

Iconic Vector Icons

Android Icons

The Android Icons package includes 30 PNG menu icons plus the additional source files for further customization.

Download Android Icons

Android Icons

Token Vector Icons Set

Simple and minimal, Token was created as a sequel to Mnml and was originally designed to add uniformity to Windows 7 taskbar. A bunch of very commonly used applications and tasks.

Download Token Icon Set

Token Vector Icons Set

Pictoico: scalable vector Pictograms

Full preview of over 100 hand crafted unique pictograms available for free download. Over 100 fully scalable pictograms/icons free to download. You’ll love their simplicity, while at the same time improving project’s usability. Use them in your online, print, mobile and software applications. They will work good even for signs in real world around your street, campus, resort or even city: possibilities are unlimited.

Download Pictoico Pictograms

Pictoico Pictograms

Vector Social Media Icons

This free set includes 50 icons of the most popular social media networks on the internet. The icons are designed in 32px and 16px vector format. With the vector format, you can scale the icon to any size to fit with your design or use it in high quality print materials. What you will get from the zip package: 32px and 16px in three different file formats: vector EPS, PNG, and GIF.
Download Vector Social Media

Vector Social Media Icons

FreshPixel Vectors

A bunch of various different vector icon sets.

Download Fresh Pixel Vector Sets

FreshPixel Vectors

Symbol Signs

The complete set of 50 passenger/pedestrian symbols developed by AIGA is now available on the web, free of charge. Signs are available in EPS and GIF formats.This system of 50 symbol signs was designed for use at the crossroads of modern life: in airports and other transportation hubs and at large international events. Produced through a collaboration between AIGA and the U.S. Department of Transportation (DOT), they are an example of how public-minded designers can address a universal communication need.

These copyright-free symbols have become the standard for off-the-shelf symbols in the catalogues of U.S. sign companies. They are now available on the web for the first time.

Download AIGA Symbol Signs

Other Vector Icons Pictogram, Symbol Sets

1. 30 Free Vector Icons By Dezinerfolio. Download Icons here.
2. BrightMix Vector Icon Set. Download Icons Here
3. 108 Mono Icons: Set of Minimal Icons By Jason Cho. Download Icons here.
4. Simple & Bold Social Media Icons By WooThemes. Download Icon Set Here.
5. Symbol Signs collection By designworkplan. Download Icons Here
6. Map Symbols & Patterns for NPS Maps. Download Icons Here
7. 165 Lovely Vector Icons by gosquared. Download Icons Here
8. Web 2.0 Services Icon Package By uberpiglet. Download Icons Here
9. Picol Pictograms. Download Picol Pictograms
10. Ecomo Pictograms. Download Pictograms here
11. Collection of 27 authentic warning signs. Download Warning Signs here

One of the advantages of using this function is that, it makes use of WordPress inbuilt Caching mechanism for data called Transients API which make sure that the twitter statues are loaded fast from the cache, also it makes use of the in built HTTP API in WordPress to get the best possible method to do a HTTP request.

Adding Twitter In WordPress

Copy and paste the two functions given below into your wordpress functions.php theme file, in case that file is not there create it and paste the code.
Call getTwitterStatus('arpitjacob', '5'); where you want to show the twitter status.

• The first value is your Twitter UserName.
• The second one is the number of tweets to show.

Customizing the Twitter Status

While the functions outputs just the statues wrapped in a DIV you can configure it to show the following list of items. To get these values take a look at the comments in the functions. for more values take a look at the Twitter-REST-API-Method

• The time the status was created
• User Profile Image URL
• User Screen Name
• User Name
• User Location
• User Website URL
• Follower count

function getTwitterStatus($name, $count)
{

	$transient = "$name"."_$count";
	//Get Tweets From the Cache
	$getTweets = get_transient($transient);
	if ($getTweets)
	{
		echo $getTweets;
	}
	elseif ($name != false)
	{
		$site = "http://twitter.com/statuses/user_timeline.json?screen_name=$name&count=$count";
		//Perform Http request to get JSON feed of Twitter User Status
		$result = wp_remote_get($site);
		$json = $result['body'];
		//Convert JSON String to PHP Array
		$tweets = json_decode($json);
		$getTweets = '';

		foreach ( (array) $tweets as $tweet)
		{
			/*
			Use these values to customize your output.
			//gets twitter status
			$tweet->text;
			//gets the time the status was created
			$tweet->created_at;
			//gets the User Profile Image URL
			$tweet->user->profile_image_url;
			//gets the User Screen Name
			$tweet->user->screen_name;
			//gets the User location
			$tweet->user->location;
			//gets the User Name
			$tweet->user->name;
			//Get the follower count.
			$tweet->user->followers_count;
			//Get the User Website URL.
			$tweet->user->url
			*/

			// Convert twitter Usernames and links to Hyperlinks
			$tweetcontent = linkify($tweet->text);
			$getTweets .= "<div> $tweetcontent </div>";
		}

		//Set Cache if it does not exist
		set_transient($transient, $getTweets, 10);
		echo $getTweets;
	}
	else
	{
		return false;
	}
}

/* Credit Jeremy Parrish http://rrish.org/  */
function linkify($status_text)
{
  // linkify URLs
  $status_text = preg_replace(
    '/(https?:\/\/\S+)/',
    '<a href="\1">\1</a>',
    $status_text
  );

  // linkify twitter users
  $status_text = preg_replace(
    '/(^|\s)@(\w+)/',
    '\1@<a href="http://twitter.com/\2">\2</a>',
    $status_text
  );

  // linkify tags
  $status_text = preg_replace(
    '/(^|\s)#(\w+)/',
    '\1#<a href="http://search.twitter.com/search?q=%23\2">\2</a>',
    $status_text
  );

  return $status_text;
}

I have made use of some of these elements while designing ZetaLight, its hard to achieve Cross Browser Support for CSS 3 since only the latest browsers have implemented the most of CSS 3 features correctly. One rule of Web Development and Design is progressive enhancements, the key factor here is a website should not break down if a browser doesn’t support any of CSS 3 features. Hence the adoption of CSS3 Shadow, Rounded Corners using CSS Border Radius and Gradients have become widespread since these are purely aesthetic enhancements and if a browser lacks support it still renders in some form without breaking the layout or design.

CSS 3 Shadow

CSS3 Text Shadow

Most browsers support Text Shadow by default except for IE. No version of IE supports text shadows

     p.test { text-shadow: 3px 2px 1px #444; } /*FireFox 3+ Opera 9+ Safari 2+ Chrome*/

In CSS 3 text-shadow has four values

1. The First Value is the X-Coordinate of the Text-shadow (3px), relative to the text
2. The Second Value is the Y-coordinate of the text-shadow (2px), relative to the text
3. The Third Value is blur radius of the Text-shadow (2px), this is the amount of space the shadow text is ‘stretched’, causing a blur effect. 0 means: no blur.
4. The fourth Value the color of the Text-shadow (#444)

Using Text Shadow.

Keep the shadow value subtle and use a color that is slightly darker than background this effect looks good only on a light background. this helps give your text a subtle shadow which is easy on the eye. You can see my site as an example of it on ZetaLight. Example code is given below, do not position the shadow more than 2px away from the text.

Drop Shadow Inset Embossed Apple text

 body { text-shadow:#AAA 1px 1px  1px; }

Embossed Inset effect using Text Shadow.

If you are a mac user, you’ll know that Apple loves to use the embossed inset effect on all its text, a perfect example is the main Apple.com site, the Menu on top uses the same effect. To achieve this effect use a color that is lighter than the background this effect looks good only on a dark background. Example code is given below, do not position the shadow more than 2px away from the text.

Apple Inset embossed Text CSS 3.0

 body { text-shadow:#FFF 0px 1px  0px; }

CSS3 Box Shadow

Box-Shadow is similar to Text-Shadow except it can be used to apply a shadow to all block elements. You can have box shadows in IE too but they make use of non – standard CSS syntax using Microsoft Filters.

.box_shadow
 {
	-moz-box-shadow: 1px 2px 4px #ffffff; /* Firefox F3.5+ */
	-webkit-box-shadow: 1px 2px 4px #ffffff; /* Safari3.0+, Chrome */
	 box-shadow: 1px 2px 4px #ffffff; /* Opera 10.5, IE 9.0 */
	 filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff'); /* IE6, IE7 */
	-ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff')"; /* IE8 */
}

1. The X-Coordinate of the Box-shadow (1px), relative to the Box
2. The Y-coordinate of the Box-shadow (2px), relative to the Box
3. The blur radius of the Box-shadow (4px), this is the amount of space the shadow box is ‘stretched’, causing a blur effect. 0 means: no blur.
4. The color of the box-shadow (#345)

CSS 3 Rounded Corners : Border-Radius

Rounded corners using CSS3.0 is pretty straight forward, you just need to specify a value for the radius of the edges of a box.

.box_round
{
	-moz-border-radius: 4px; /* FireFox 1+ */
	-webkit-border-radius: 4px; /* Safari 3+, Chrome */
	 border-radius: 4px; /* Opera 10.5, IE 9 */
}

Try to keep the value of the radius less, a slight subtle radius looks much better. Use it sparingly in your design elements.

CSS 3 Gradient

Thee CSS 3 gradient syntax is the only one that is different for different browsers. the one used by FireFox seems to be the easiest

.box_gradient
{
	/* FireFox 3.6 */
	background-image: -moz-linear-gradient(top, #444444, #999999);
	/* Safari4+, Chrome */
	background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999));
	/* IE6,IE7 */
	filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999');
	/* IE8 */
	-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')";
}

Resources and Links css3please css3.info

WordPress Short URLs In Twitter

Here is a small trick that is very useful in helping you maintain the link juice to your site and also to helps in avoid sending people to a third party URL shortner. Its very common to use a link shortner to reduce the number of characters a link takes up when you tweet.

If you care about SEO you will most probably be using WordPress Permalinks in the form of http://somesite.com/some_random_post/. You will notice, if Permalinks are not enabled, then by default your site links are in the form of http://somesite.com/?p=44 . The trick is to get the post id of whatever link you want to post on twitter and post it in the form of http://somesite.com/?p=44 this link will automatically redirect to your actual blog post as this is an inbuilt feature in wordpress called canonical URLs, not only does this reduces the character count but it also helps your twitter followers to go to your site directly without using any third party URL shortners.

Automatically Post Latest WordPress Articles To Twitter

We will use the tip I explained above to write a wordpress theme function that automatically posts a tweet to your twitter account whenever you write a new post or update any of your posts or articles. Before we use this function we’ll check if CURL is enabled on your server. All you need to do is to paste the function  given below into a blank PHP file and call the function with some random inputs, somewhere on the same page like this twitterUpdate("some random post", "http://zetalight.com", true); . Make sure you uncomment the last few lines where it says to uncomment to test for CURL support. In the rare case your web host does not support CURL you will have to make use of fsockopen for PHP 4 or the much easier stream_context_creat for PHP5. Next make sure you have file called functions.php in your theme directory. I put comments before every line explain what is happening in the function. There are basically two functions one is the twitterUpdate function which take care of posting to twitter, the other one is postToTwitter function which is a function that calls the twitterUpdate only when a new post is created or updated. copy paste both these functions in your functions.php file and enter your twitter UserName and PassWord in the appropriate places.

function twitterUpdate($postTitle, $postLink, $isNew)
{
	// Enter Your Twitter ID Here
	$username = 'Twitter_ID';
	// Enter Your Twitter Password Here
	$password = 'Password';

        # text into a twitter friendly text
	$code_entities_match = array('--','"','!','@','#','$','%','^','&','*','(',')','_','+','{','}','|',':','"','<','>','?','[',']','\\',';',"'",',','.','/','*','+','~','`','=');
	$code_entities_replace = array('-','','','','','','','','','','','','','','','','','','','','','','','','');
	$postTitle = str_replace($code_entities_match, $code_entities_replace, $postTitle);

	// Check if New or Updated Post
	if($isNew)
		$postTitle = 'New Post: ' . $postTitle;
	else
		$postTitle = 'Updated Post: ' . $postTitle;

	// Calculate Twitter Msg and keep it under 140 Chars
        if(strlen ($postTitle) > (140 - strlen ($postLink)))
		$postTitle 		= substr_replace($postTitle, '...', (140 - 3 - strlen ($postLink)));

	$message = $postTitle . $postLink;

	// The twitter API address
	$url = 'http://twitter.com/statuses/update.xml';
	$curl_handle = curl_init();
	curl_setopt($curl_handle, CURLOPT_URL, "$url");
	curl_setopt($curl_handle, CURLOPT_CONNECTTIMEOUT, 2);
	curl_setopt($curl_handle, CURLOPT_RETURNTRANSFER, 1);
	curl_setopt($curl_handle, CURLOPT_POST, 1);
	curl_setopt($curl_handle, CURLOPT_POSTFIELDS, "status=$message");
	curl_setopt($curl_handle, CURLOPT_USERPWD, "$username:$password");
	$buffer = curl_exec($curl_handle);
	curl_close($curl_handle);

	// Uncomment the lines below to check if
	// CURL is enabled on your Web Server
	// check for success or failure
	/*
	if (empty($buffer))
		echo 'message';
	else
		echo 'success';
	*/
}

function postToTwitter($post_ID)
{
	// Create your Short URL replace with your blog url
	$postLink = ' http://zetalight/?p=' . $post_ID;
	// encode the URL to fix Post to Twitter issues
        $postLink = urlencode  ( $postLink ) ;
	// Get the Post Object
	$get_post_info 	= get_post( $post_ID );
	// Get the Post Title
	$postTitle = $get_post_info->post_title;
        // Get the Post date
	$postDate 		= date('U', strtotime($get_post_info->post_date));
	// Get the post Modified date
	$postModified 	= date('U', strtotime($get_post_info->post_modified));

	// Check if the post is new or modified
	if($postModified == $postDate)
	{
		twitterUpdate($postTitle, $postLink, true);
	}
	/*  If You want to fire everytime You update
	      a post remove these comments around the else.
	else
	{
		twitterUpdate($postTitle, $postLink, false);
	}
	*/
}

// Post to twitter when you publish or update a post
add_action('publish_post', 'postToTwitter');

Twitter To WordPress Widget

Here is another simple JavaScript code to display your latest twitter tweets in your sidebar, you can either use it as a widget or just paste it in your sidebar. Since its JavaScript based it doesn’t cause any load on your WordPress site and loads you latest tweets very fast. Not only does it get your latest tweets, but converts the links into hyperlinks and twitter profiles. You can copy paste this code into a text/html widget to get it working. make sure there is a DIV with ID="twitter" somewhere on the page, you can load the JavaScript separately in your footer if you want.

//Get the Twitter JSON Feed for the User
function getTweets(UserName, tweetCount)
{
	var twitterJSON = document.createElement("script");
	twitterJSON.type="text/javascript";
	twitterJSON.src=  "http://twitter.com/statuses/user_timeline/"+UserName+".json?callback=twitter_callback&count="+tweetCount;
	document.getElementsByTagName("body")[0].appendChild(twitterJSON);
};

//Twitter Call back function Replace 'twitter' with any Div ID name
function twitter_callback(twit)
{
	var twitterdiv = document.getElementById('twitter');
	var icon,who,what,when;
	for (i=0; i < twit.length; i++)
	{
		icon=twit[i].user.profile_image_url;
		who="@"+twit[i].user.screen_name;
		what=twit[i].text.linkify().atify();
		when=normalizeDate(twit[i].created_at);
		twitterdiv.innerHTML += what+' ('+who.atify()+' wrote '+when+')';
	}
};

// Function to convert links to hyperlinks
String.prototype.linkify = function()
{
	return this.replace(/[A-Za-z]+:\/\/[A-Za-z0-9-_]+\.[A-Za-z0-9-_:%&\?\/.=]+/, function(m)
	{
		return m.link(m);
	});
};

//function to conver twitter usernames into hyperlinks
String.prototype.atify = function() {
	return this.replace(/@[\w]+/g, function(m)
	{
		return '<'+'a href="http://www.twitter.com/'+m.replace('@','')+'">'+m+'';
	});
};

Convert date into human readable format.

//Get Humanreadable Date/time
function normalizeDate(time)
{
	var time_formats = [
		[60, 'Just Now'],
		[90, '1 Minute'], // 60*1.5
		[3600, 'Minutes', 60], // 60*60, 60
		[5400, '1 Hour'], // 60*60*1.5
		[86400, 'Hours', 3600], // 60*60*24, 60*60
		[129600, '1 Day'], // 60*60*24*1.5
		[604800, 'Days', 86400], // 60*60*24*7, 60*60*24
		[907200, '1 Week'], // 60*60*24*7*1.5
		[2628000, 'Weeks', 604800], // 60*60*24*(365/12), 60*60*24*7
		[3942000, '1 Month'], // 60*60*24*(365/12)*1.5
		[31536000, 'Months', 2628000], // 60*60*24*365, 60*60*24*(365/12)
		[47304000, '1 Year'], // 60*60*24*365*1.5
		[3153600000, 'Years', 31536000], // 60*60*24*365*100, 60*60*24*365
	];

	var values = time.split(" ");
		time = values[1] + " " + values[2] + ", " + values[5] + " " + values[3];
	var parsed_date = Date.parse(time),
		dt = new Date,
		seconds = ((dt - new Date(parsed_date) + (dt.getTimezoneOffset() * 60000)) / 1000),
		token = ' Ago',
		i = 0,
		format;

	if (seconds < 0)
	{
		seconds = Math.abs(seconds);
		token = '';
	}

	while (format = time_formats[i++])
	{
		if (seconds < format[0])  		{ 			if (format.length == 2)  			{ 				return format[1] + (i > 1 ? token : ''); // Conditional so we don't return Just Now Ago
			}
			else
			{
				return Math.round(seconds / format[2]) + ' ' + format[1] + (i > 1 ? token : '');
			}
		}
	}
};

Resources and links that helped me JSON Feeds Callbacks with Twitter

About ZetaLight

Zeta mean Seven or has the value of Seven in the Greek numerals, ZetaLight can be translated as “Seven Light” or “Seven Colors” making a reference to the rainbow, which is a powerful representation of design elements.

ZetaLight will also act as a professional front for my services as a  Web, UI, UX Designer. With the launch of ZetaLight I hope to create a repository and showcase of my work and help market my skills to a wider audience. It should help me cut down on proving my skills to potential clients. The ZetaLight Blog will focus on Design, CSS, JavaScript, Usability, User Interface and Patterns. Also I hope to soon create a WordPress Themes Shop to sell WordPress themes.

The Design Process

One of the goals was to keep the Design Lightweight and Minimalistic, I wanted something that stood out from the regular designs. I minimized the use of images and used mostly icons to convey various areas, categories of the site. The whole design is under 90KB and loads very fast. I am still working on optimizing the images and combining them using CSS sprites.

I have an obsession with using blue color schemes in my designs which was very evident in the first version of the site. One mistake I did was to overwork on this project hence the color scheme turned out to be a mishmash, some friends were kind enough to point out the disharmony in the colors and looks. Believe it or not the second attempt took me only 3 hours or less and I really love how it turned out.

The next few months I shall be focusing on both Clazh and ZetaLight. Right now I am in process of polishing ZetaLight.