However, I was surprisingly unable to find any complete library or how-to guide for connecting flash cookies to javascript. So I dusted off my flash skills and built one, and decided to share with you the fruits of my labors:

Download the .swf, .js, and source code from github

This is an .swf file that communicates with JavaScript via flash’s ExternalInerface to read and write to a Local SharedObject (LSO). Essentially, it’s cross-domain cookies for javascript.

It also includes a javascript library that handles embedding, error checking, and logging.

The project is hosted at github: http://github.com/nfriedly/Javascript-Flash-Cookies

Quick start guide

NOTE: A javascript library and an example have been added to the source code. That supersedes these instructions. Updated instructions and online examples coming soon.

To use the library, upload the storage.swf file to your web server and put this HTML and JavaScript into your web page(s):

The JavaScript

	function getSwfStore(){
		return document.local_storage_swf || window.local_storage_swf;
	}

	function swfLogFn(msg){
		if(typeof console != "undefined" && typeof console.log != "undefined"){
			console.log(".swf Storage: " + msg);
		}
		else {
			alert(".swf Storage: " + msg);
		}
	}

	function swfOnLoad(){
		var swfStore = getSwfStore();
		// read a cookie via swfStore.get('cookie_name');
		// set a cookie via swfStore.set('cookie_name', 'cookie_value');
	}

	function swfOnError(){
		alert('ut-oh, something went wrong (probably the user disabled flash cookies for privacy reasons)');
	}

And the HTML

<span style="position: absolute; left: -1000px; top: -1000px;">
	<object height="100" width="500" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab" id="local_storage_swf" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000">
		<param value=" -- URL TO storage.swf -- " name="movie">
		<param value="swfLogFn" name="logfn">
		<param value="swfOnLoad" name="onload">
		<param value="swfOnError" name="onerror">
		<param value="logfn=swfLogFn&amp;onload=swfOnLoad&amp;onerror=swfOnError" name="FlashVars">
		<param value="always" name="allowScriptAccess">
		<embed height="375" align="middle" width="500" pluginspage="http://www.macromedia.com/go/getflashplayer" flashvars="logfn=swfLogFn&amp;onload=swfOnLoad&amp;onerror=swfOnError" type="application/x-shockwave-flash" allowscriptaccess="always" quality="high" loop="false" play="true" name="local_storage_swf" bgcolor="#869ca7" src=" -- URL TO storage.swf -- ">
	</object>
</span>

Cross-domain usage

A copy of storage.swf located on one domain may be embedded on pages from one or more other domains, allowing cross-domain cookie access.

Troubleshooting

• Be sure to fill in the url to the .swf file in both the <object> and the <embed> tags.
• If you change the name of any of the javascript functions, you must update the name in three places <param> and <embed> tags.
• If the .swf file is unable to communicate, it will display log messages on the flash object. You can remove the <span> tag that surrounds it and read those messages. (If the font is too small, try copy-pasting it.)
• If the user does not have flash installed, neither the onload nor the onerror functions will be called. You may want to use a library such as Flash Detect to check for this.
• If you pass a function as the key or value, things may break. Your best bet is to use strings and/or useJSON to encode objects as strings

Patches

My flash / actionscript skills leave something to be desired, and patches are more than welcome at  github (prefered), or just leave a comment here if you’re not sure how to use github.

Unfortunately, most browsers think they know better and go off and do their own thing on RSS feeds.

We’re going to look at how and which browsers can be brought into line, and how to use XSLT to improve the look of your RSS feed in those browsers.

The RSS problem

In most browsers, XML and XSLT are supported in every single case *except* RSS. By default, Internet Explorer, Firefox, Safari, and Opera all ignore XSLT files and do their own thing with RSS. In fact, Google Chrome is the *only* browser I tested that got it right without tinkering.

To their credit, Microsoft at least gave their users the option to turn off the “feature”. No other browser even gives this option.

During my tests, I have found a way to “trick” Firefox into rendering RSS with XSLT correctly. Currently there seems to be no solution for other browsers except to try and detect them on the server and send the user an HTML file if they’re in a browser that doesn’t work properly.

Internet Explorer

IE requires that the user specifically choose to disable their take-liberties-with-rss “feature”. I would point out that this really isn’t good enough because 99% of users will never get that far, but sadly, it’s the closest thing to getting it right out of any browser on the market!

Here’s how:

1. Click on the Tools menu,
2. Click on the Internet Options sub-menu,
3. Click on the Content tab,
4. Click on the Settings button of the Feed section to bring up Feed Settings dialog box,
5. Un-check the Turn On Feed Reading View option.
6. Click OK all the way to close all opened dialog boxes.
7. Restart Internet Explorer

Firefox

Firefox can be tricked into working because it decides fairly early on in the rendering process whether to treat the page in a standard way or to fly off the handle with it. In fact, it makes this decision before even completely downloading the RSS file.

Because of the early decision process, we can insert 512 characters of white space in between the <?xml ?> declaration and the opening <rss> tag. Firefox is then “tricked” into doing the right thing and rendering the feed correctly.

Working around it

Although not practical in most cases currently, I’ve included an example of a script that will take any RSS feed and add a style sheet to it.  It includes the hack to work in firefox and instructions for enabling it in Internet Explorer.

http://nfriedly.com/stuff/rss/?url=http://nfriedly.com/techblog/feed/

Code for index.php:

<?php

// grab the url
if(isset($_REQUEST['url'])) $url = $_REQUEST['url'];
else $url = false;

// make sure the url is good (no local files)
if($url && substr($url,0,7) != "http://") exit("Please start urls with 'http://'");

// make the stylesheet link
$xsl_file = 'xsl.php';
if($url) $xsl_file .= '?url='.urlencode($url);
define('XSL_LINK','<?xml-stylesheet href="'.$xsl_file.'" type="text/xsl" ?>');

// if we don't have a url, use the home page
if(!$url) $url = "home.xml";

// download the rss feed
$rss = file_get_contents($url);

// xml header so firefox doesn't decide it's text
header('content-type: text/xml');

//echo out the header right away, if there is one
if(substr($rss,0,6) == '<?xml '){
	$header_end = strpos($rss,'?>') +2;
	echo substr($rss,0,$header_end);
	$rss = substr($rss,$header_end);
}
//otherwise echo a default header:
else echo '<?xml version="1.0" ?'.'>';

// remove any existing stylesheet
$rss = preg_replace('/<\?xml-stylesheet([^?]|\?(?!>))*\?'.'>/','',$rss);  // uses lookahead

// add in our stylesheet
echo "\r\n" . XSL_LINK . "\r\n";

// toss in 512 bytes of nothing to throw off firefox
echo "                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 ";

//finally, pass along the content
echo $rss;

?>

The xsl.php file is only php to allow for setting the current url in the feed url input box. Ignoring that, you can view it’s source by looking at http://nfriedly.com/stuff/rss/xsl.php. You could simply save that as an .xml file and have a working copy.

You can also view the CSS and Javascript used to make everything look nice.

Hire me for web development

Need an expert web programmer to research and solve some off-the-wall problem like this? I’m available. I’m good solving run-of-the-mill problems too – Javascript and AJAX development is my specialty. Get in touch with me for more information and a free quote.

We’re going to look at how AJAX security works, specifically the Same Origin Policy, how Twitter gets around it, and the type of callback that twitter uses.

Note: the callback that twitter uses is entirely different from callback in the sense of passing a javascript function around as a variable. We’ll look at that in a future article.

AJAX Security

The XMLHTTPRequest Object, which is the javascript object used to make AJAX requests, has a “Same Origin Policy” which basically means that javascript on site1.com cannot use AJAX to directly load data from site2.com. This is a security feature, as it makes XSS (Cross-Site Scripting) attacks more difficult.

Worth noting, if the website is at site1.com, no scripts can communicate with any other site, even if the script was loaded from site2.com.

Work Arounds

There are a number of workarounds including iframes, java applets, and flash, but here’s a couple of the more common methods.

Proxying Requests

The way proxying works is to have a file on your server that grabs the data from a remote server and passes it along. Then for javascript, the data appears to be coming from your server, even though it actually originated at a remote server. This is what the Fancy part of my twitter demo does.

We’ll look at using a proxy to get remote data in a future article.

Remotely hosted javascript files

Scripts stored on other websites can be included on a page. As long as the script doesn’t need to call home after the initial load, everything works great. This is how a basic twitter function works: you load a script from twitter’s website and it communicates with your site via the callback feature. This is what the Simple part of my twitter demo does.

Here is a very basic page that uses Twitter’s callback feature and a remotely loaded javascript file to show my twitter status – remote data – on my website, by interacting with local javascript.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"  dir="ltr" lang="en-US">

<head>
<title>Simple Twitter Status</title>

</head>
<body>

<h1>My Twitter Status:</h1>

<div id="twitter_status">Loading...</div>

<!-- Put scripts down here for speed -->

<!-- this must come before we load the twitter script -->
<script type="text/javascript">

function showStatus(json){

	json = json[0]; // we only care about the most recent status;

	var myDiv = document.getElementById('twitter_status');

	myDiv.innerHTML = '<img src="'
		+ json.user.profile_image_url
		+ '" style="float:left; margin:5px 10px 10px 0">'
		+ json.text;
}
</script>

<!-- now load the twitter file -->
<script type="text/javascript"
src="http://twitter.com/statuses/user_timeline/nfriedly.json?count=1&amp;callback=showStatus&amp;random=<?php echo time(); ?>" />
</script>

</body>
</html>

You can see a live copy of this code at http://nfriedly.com/demos/twitter-extra-simple.

Digging into Twitter’s callback method

Below is a trimmed down example of what Twitter’s API sends back when we make the request in the example above.

showStatus([{"in_reply_to_screen_name":null,"text":" [ Lots of information that I'm omitting because it's not the point. ] "]);

Now, don’t worry about the jazz in the middle, just look at that showStatus(); that’s wrapped around it. First of all, how does Twitter even know that we have a function named show status? Because we said so in the url to the file -see how we added &callback=showStatus? That’s where the magic is.  (Ok, technically we said & not just &, but that was just to pass XHTML validation. )

Cross-domain!

There’s a second important thing going on here – javascript from two different domains are interacting with each other. This is allowed because of how the Same Origin Policy works – everything is restricted to the local domain, but that means that everything can work together on the same plane.

It’s a beautiful thing

I hope this gave you a little bit better understanding of how AJAX security works and how Twitter gets around it and is still able to interact with your site. In the future, I’ll have an article on how “traditional” callbacks work that will use jQuery and more AJAX to dive a bit deeper into the topic.

Javascript Ninja for Hire

I have extensive experience working with AJAX, Twitter, and related technologies. I’m just the man you need to make your next javascript development project shine!

We’re going to see what the differences between objects and arrays are, how to work with some of the common array-like objects, and how to get the most performance out of each.

What Objects Are

A javascript object is a basic data structure:

var basicObj = {}; // an empty object
// {} is a shortcut for "new Object()"

basicObj.suprise= "cake!";

basicObj['suprise']; // returns "cake!"

Using {} instead of new Object(); is know as “Object Literal” syntax.

var fancyObj = {

	favoriteFood: "pizza",

	add: function(a, b){

		return a + b;
	}
};

fancyObj.add(2,3); // returns 5

fancyObj['add'](2,3); // ditto.

As you can see, and probably already knew, properties can be accessed a couple of different ways. However, it’s an important point that we’ll come back to in a minute.

Everything in javascript is an object. Everything. Arrays, functions, even numbers! Because of this, you can do some really interesting things, such as modifying the prototypes of Objects, Arrays, etc.

// an example of something you probably shouldn't do. Ever. Seriously.

Number.prototype.addto = function(x){

	return this + x;

}

(8).addto(9); // returns 17

// other variations:

8.addto(9); 
// gives a syntax error, because the dot is assumed to be a decimal point

8['addto'](9); 
// works but is kind of ugly compared to the first method

var eight = 8;
eight.addto(9);  // works

What Arrays Are

Javascript arrays are a type of object used for storing multiple values in a single variable. Each value gets numeric index and may be any data type.

var arr = [];  // this is a shortcut for new Array();

arr[0] = "cat";
arr[1] = "mouse";

See how that syntax is so similar to the syntax used for setting object properties? In fact, the only difference is that objects use a string while arrays use a number. This is why arrays get confused with objects so often.

Length

Arrays have a length property that tells how many items are in the array and is automatically updated when you add or remove items to the array.

var arr = [];

arr[0] = "cat"; // this adds to the array
arr[1] = "mouse"; // this adds to the array
arr["favoriteFood"] = "pizza"; // this DOES NOT add to the array
// setting a string parameter adds to the underlying object

arr.length; // returns 2, not 3

The length property is only modified when you add an item to the array, not the underlying object.

The length is always 1 higher than the highest index, even if there are actually fewer items in the array.

var arr = [];

arr.length; // returns 0;

arr[100] = "this is the only item in the array";

arr.length;
// returns 101, even though there is only 1 object in the array

This is somewhat counter-intuitive. PHP does more what you would expect:

<?php

arr = array();

arr[100] = "php behaves differently";

sizeof(arr); // returns 1 in PHP

?>

You can manually set the length also. Setting it to 0 is a simple way to empty an array.

In addition to this length property, arrays have lots of nifty built in functions such as push(), pop(), sort(), slice(), splice(), and more. This is what sets them apart from Array-Like Objects.

Array-like Objects

Array-like objects look like arrays. They have various numbered elements and a length property. But that’s where the similarity stops. Array-like objects do not have any of Array’s functions, and for-in loops don’t even work!

You’ll come across these more often than you might expect. A common one is the arguments variable that is present inside of every js function.

Also included in the category are the HTML node sets returned by document.getElementsByTagName(), document.forms, and basically every other DOM method and property that gives a list of items.

document.forms.length; // returns 1;

document.forms[0]; // returns a form element.

document.forms.join(", "); // throws a type error. this is not an array.

typeof document.forms; // returns "object"

Did you know you can send any number of parameters you want to a javascript function? They’re all stored in an array-like object named arguments.

function takesTwoParams(a, b){

	// arguments is an  array-like variable inside of all functions
	// arguments.length works great

	alert ("you gave me "+arguments.length+" parameters");  

	for(i=0; i< arguments.length; i++){

		alert("parameter " + i + " = " + arguments[i]); 

	}
}

takesTwoParams("one","two","three");
// alerts "you gave me 3 parameter",
// then "parameter 0 = one"
// etc. 

This works great. But that’s about as far as you can go with array-like objects. The flowing example does not work:

function takesTwoParams(a, b){

	alert(" your parameters were " + arguments.join(", "));
	// throws a type error because arguments.join doesn't exist
}

So what can you do?

Well you could make your own join() function, but that adds a lot of unnecessary overhead to your code because it has to loop over everything. If only there were a quick way to get an array out of an array like object…

It turns out there is.

The array functions can be called on non-array objects as long as you know where to find the function (usually they’re attached to the array, but this isn’t an array remember

Prototype to the win:

function takesTwoParams(a, b){

	var args = Array.prototype.slice.call(arguments);

	alert(" your parameters were " + args.join(", "));
	// yay, this works!

}

Let’s take a look at that a bit more in-depth:

Array: This object is the original array that all other arrays inherit their properties from.

Array.prototype:This gives us access to all the methods properties that each array inherits

Array.prototype.slice: The original slice method that is given to all arrays via the prototype chain. We can’t call it directly though, because when it runs internally, it looks at the this keyword, and calling it here would make this point to Array, not our arguments variable.

Array.prototype.slice.call(): call() and apply() are prototype methods of the Function object, meaning that they can be called on every function in javascript. These allow you to change what the this variable points to inside a given function.

And finally, you get a regular array back! This works because javascript returns a new object of type Array rather than whatever you gave it. This causes a lot of headaches for a few people who are trying to make subclasses of Array, but it’s very handy in our case!

Gotchas

First, in Internet Explorer, DOM NodeLists are not considered to be javascript objects, so you cannot call Array.prototype.slice on them. If you want an array, you’ll have to loop through it the old fashioned way. Or use a hybrid function that tries it the fast way first, then the slow way if that doesn’t work.

function hybridToArray(nodes){
	try{
		// works in every browser except IE
		var arr = Array.prototype.slice.call(nodes);
		return arr;
	} catch(err){
		// slower, but works in IE
		var arr = [],
		    length = nodes.length;
		for(var i=0; i < length; i++){
			arr.push(nodes[i]);
		}
		return arr;
	}
}

See an example here: http://nfriedly.com/demos/ie-nodelist-to-array.

Second, arrays are objects, so you can do this, but it can get you some serious inconsistencies:

arr = [];

arr[0] = "first element"; // adds item to the array

arr.length; // returns 1

arr.two = "second element"; // adds an item to the underlying object that array is built on top of.

arr.length; // still returns 1 !

// BUT...
for(i in arr){

	// this will hit both 0 and "two"

}

A better solution: wrap arrays in an object if you need both worlds

This is basically a less efficient method of the array subclassing links I mentioned above. While less efficient, it has the advantage of being simple and reliable.

That said, I wouldn’t recommend that you use this in most cases due to issues with speed and extra code requirements. It’s provided here as an example.

// an example of a wrapper for an array.
// not recommended for most situations.

var ArrayContainer = function(arr){

	this.arr = arr || [];

	this.length = this.arr.length;

};

ArrayContainer.prototype.add=  function(item){

	index = this.arr.length;

	this.arr[index] = item;

	this.length = this.arr.length;

	return index;

};

ArrayContainer.prototype.get=  function(index){

	return this.arr[index];

};

ArrayContainer.prototype.forEach=  function(fn){

	if(this.arr.forEach) this.arr.forEach(fn);// use native code if it's there

	else {

		for(i in this.arr){

			fn( i, this.arr[i], this.arr );

		}
	}
};

var mySuperDooperArray = new ArrayContainer();

Now that your array is (somewhat) protected on the inside, you can loop through it’s items with forEach() and know that they will match it’s length. You can also add arbitrary properties to ArrayContainer or mySuperDooperArray and they won’t get pulled into your forEach() loop.

This example could be extended to completely protect the array if the need arose.

An Even Better Solution: Hire a javascript expert.

nFriedly Web Development is a top ranked Javascript and AJAX ninja with an extensive portfolio of proven results. I can bring your project to life and make it run faster than you ever imagined.  Get in touch with me or get a free instant estimate for new projects.

Logical Operators are a core part of the language. We’re going to look at what logical operators are, what “truthy” and “falsy” mean, and how to use this to write cleaner, faster and more optimized javascript.

Javascript Logical Operators

In traditional programming, operators such as && and || returned a boolean value (true or false). This is not the case in javascript. Here it returns the actual object, not a true / false.  To really explain this, I first have to explain what is truthy and what is falsy.

Truthy or Falsy

When javascript is expecting a boolean and it’s given something else, it decides whether the something else is “truthy” or “falsy”.

An empty string (''), the number 0, null, NaN, a boolean FALSE, and undefined variables are all “falsy”. Everything else is “truthy”.

var emptyString = ""; // falsy

var nonEmptyString = "this is text"; // truthy

var numberZero = 0; // falsy

var numberOne = 1; // truthy

var emptyArray = []; // truthy, BUT []==false is true. More below.

var emptyObject = {}; // truthy

var notANumber = 5 / "tree"; // falsy
// NaN is a special javascript object for "Not a Number".

function exampleFunction(){
alert("Test");
}
// examleFunction is truthy
// BUT exampleFunction() is falsy because it has no return (undefined)

Gotchas to watch out for: the strings “0″ and “false” are both considered truthy.  You can convert a string to a number by multiplying it by 1.

var test = "0"; // this is a string, not a number

(test == false); // returns false, meaning that test is truthy

(test * 1 == false); // returns true, meaning that test is now falsy

As one commenter mentioned, arrays are particularly weird. If you just test it for truthyness, an empty array is truthy. HOWEVER, if you compare an empty array to a boolean, it becomes falsy:

  if([] == false){
    // this code runs
  }

  if( [] ) {
    // this code also runs
  }

  if([] == true){
    // this code doesn't run
  }

  if( ![] ) {
    // this code also doesn't run
  }

Another commenter pointed out an additional gotcha to watch out for: while javascript evaluates empty arrays as true, PHP evaluates them as false.

PHP also evaluates “0″ as falsy. (However “false” is evaluated as truthy by both PHP and javascript.)

<?php

$emptyArray = array(); // falsy in PHP

$stringZero = "0"; // falsy in PHP

?>

How Logical Operators Work

Logical OR, ||

The logical OR operator, ||,  is very simple after you understand what it is doing. If the first object is truthy, that gets returned. Otherwise, the second object gets returned.

("test one" || "test two"); // returns "test one"

("test one" || ""); // returns "test one"

(0 || "test two"); // returns "Test two"

(0 || false); // returns false

Where would you ever use this? The OR operator allows you to easily specify default variables in a function.

function sayHi(name){

var name = name || "Dave";

alert("Hi " + name);

}

sayHi("Nathan"); // alerts "Hi Nathan";

sayHi(); // alerts "Hi Dave",
// name is set to null when the function is started

Logical AND, &&

The logical AND operator, &&,  works similarly.  If the first object is falsy, it returns that object. If it is truthy, it returns the second object.

("test one" && "test two"); // returns "test two"

("test one" && ""); // returns ""

(0 && "test two") // returns 0

The logical AND allows you to make one variable dependent on another.

var checkbox = document.getElementById("agreeToTerms");

var name = checkbox.checked && prompt("What is your name");

// name is either their name, or false if they haven't checked the AgreeToTerms checkbox

// IMPORTANT NOTE: Internet Explorer 8 breaks the prompt function.

Logical NOT, !

Unlike && and ||, the ! operator DOES turn the value it receives into a boolean. If it receives a truthy value, it returns false, and if it receives a falsy value, it returns true.

(!"test one" || "test two"); // returns "test two"
// ("test one" gets converted to false and skipped)

(!"test one" && "test two"); // returns false
// ("test one" gets converted to false and returned)

(!0 || !"test two"); // returns true
// (0 gets converted to true and returned)

Another useful way to use the ! operator is to use two of them – this way you always get a true or a false no matter what was given to it.

(!!"test"); // returns true
//  "test" is converted to false, then that is converted to true

(!!""); // returns false
// "" is converted to true, and then that true is converted to false

(!!variableThatDoesntExist); // returns false even though you're checking an undefined variable.

Javascript Optimization

Need any help optimizing the Javascript and AJAX on your website? Get in touch with your friendly neighborhood javascript expert for ideas on how to optimize your site and a free quote.

This article looks at how to use some simple HTML, CSS, & Javascript to protect your private information without making your guests jump through hoops.

Download a working copy of the contact form discussed here.

The Goal

I want users to be able to contact me simple and easy, no captchas, no math problems, just a regular contact form, clickable email address, and everything copy-paste-able.

The Problem

Spammers love captcha-free forms and clickable email addresses. (And lately, copy-paste-able phone numbers.) I do not want to receive a ton of spam!

The Solution

With a little bit of CSS and JavaScript wizardry, we can make a simple, easy-to-use contact page that will not get you hardly any spam!

A downloadable example is provided at the end of the article.

Part 1: The Contact Form

We are going to make a standard contact form with one extra feature: an input named “url” and a note beside it that says “Don’t type anything here!”

The HTML:

<form method="post" action="/submit.php">
<p>Your name:
<br /><input name="name" /></p>

<p>Your email:
<br /><input name="email" /></p>

<p class="antispam">Leave this empty:
<br /><input name="url" /></p>

<textarea name="message"></textarea>

<input type="submit" value="Send" />
</form>

Then we use CSS to hide the input and the note.

The CSS:

.antispam { display:none;} 

Then we make a rule in the server that says ‘if the user typed anything in the “url” box, then throw it out.’

The PHP:

<?php

// if the url field is empty
if(isset($_POST['url']) && $_POST['url'] == ''){

	// then send the form to your email
	mail( 'you@yoursite.com', 'Contact Form', print_r($_POST,true) );
}

// otherwise, let the spammer think that they got their message through

?>

<h1>Thanks</h1>
<p>We'll get back to you as soon as possible</p>

A regular person won’t even see the box normally, and will therefore leave it blank without even thinking about it. If the CSS fails to load, they get a note explaining what to do.

However, when a spam bot looks at this, it sees a good spot to stick whatever spammy url they’re trying to advertise.

Now the php script on the server can tell who is a spammer and who isn’t. The regular people get sent to your email, the spammers get ignored!

Part 2:  Click-able Email Address

Spammers steal your email address by scanning through the source code of the site and grabbing anything that looks like an email address. So we’re going to make sure that there is no email address in the source code and instead generate it by JavaScript.

The Javascript:

var first = "yourname";
var last = "yoursite.com";

The HTML:

<p>My e-mail address:
<script type="text/javascript">
document.write('<a href="mailto:'+first + '@' + last+'">'+first + '@' + last+'<\/a>');
</script>
<noscript>
Please enable javascript or use my <a href="/contact.php">contact form</a>
</noscript>
</p>

A regular user will see a regular email address and things just work. A user who happens to have javascript disabled will see an explanation and an alternative solution. And a spammer won’t see a thing!

This method can easily be extended to phone numbers and other personal information.

Complete Examples

A complete working copy of everything mentioned in this article is available here: http://nfriedly.com/stuff/spam-free-contact.zip

For a live demo of all of this and more, see my contact page.

Update: I found that there is an anti-spam plugin for WordPress that uses similar methods to the ones I describe here: http://wordpress.org/extend/plugins/nospamnx/

Does your website need help?

I am an Experienced Web Developer with a sharp eye for security. I can make your site easier to use while at the same time cutting down on level of spam you receive through it.  Contact me for more information and a free quote.