Even worse, it charged the customers credit card each time, so a persistent customer could wind up with multiple charges which you would need to undo!

Continue reading for the fix:

The Fix

Cart32’s support was not particularly helpful (both the Knowledge Base and their phone support), but fortunately the fix was not very hard. The error basically means that it had trouble opening some file.

In our case the name of the file that orders were saved in (Orders > Order Setting > Order Output File) had gotten goofed and was set to the url of the website. The fix was to change it back to “orders.txt“.

Did it work for you?

Please leave comments if you found this helpful. If you have some other website issue, cart 32 related or not, I may be able to help.

Doing impossible things with JavaScript and AJAX is my specialty.  Get in touch with me here.

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 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.

Content is king.

Unique, interesting, well-written content is what makes your site stand out. Well written content will have key words, but won’t feel spammy. It will naturally attract high quality links back to it.

That said, there are several factors you can keep in mind while writing your content…

When it comes to SEM, links rule the roost.

One high quality link to your website is more valuable than 100 directory listings. (With a couple of specific exceptions, more on that below.) When you write fresh quality content, people will link to you and search engines will like you.  Writing on interesting topics and linking to others will often encourage links back to your site.

Use with either www.site.com or site.com but not both.

You don’t want positions 2 and 3 when you could have position 1. Choose whichever you prefer, and make the other have a HTTP 301 permanent redirect.

Don’t loose juicy links.

Look for links that go to pages you no longer have and either put something there or have those links 301 redirect to a page you do have. Don’t let them go to waste. The Google Webmaster Tools are great for finding these.

Most directories and link exchanges are worthless.

The few exceptions include DMOZ, LII, and Yahoo Directory.  The others might bring in a visitor every once in a while, but by and large get completely ignored.

Search Engine Friendly URLs

People and search engines both like pretty URLs. Here is an ugly URL:

http://example.com/index.php?p=product&product_code=1234&categroy=2

A prettier, friendlier version would be:

http://example.com/products/blue-widgets/fast-install-blue-widget-2-1234/

To accomplish this, you can use an Apache module named mod_rewrite.

Obviously, you would need to have descriptive category and product names for this to give the most benefit. I have heard people claim that using .html on the end of your files gets a better ranking than using .php, but my experience shows that there is no difference.

It is what you say,
but how you say it matters too.

Use Keyword Targeting on each page.

Target each page on your site to a few or even a single specific keyword or phrases. The free Google Adwords Keyword Tool can help you find related keywords that will be worth targeting.

You don’t always have to go for the big ones either, targeting some of the smaller keywords can actually bring in more business than the bigger ones because you’ll be higher ranked.

Have a good keyword density in your content.

Try to use the keywords naturally in your content, for example, change “our office” to “our Cincinnati office.” Don’t overdo it and sound spammy though. Remember, you’re writing for users first.

Title & Meta Tags

Each page should have unique and relevant <title> and <meta> tags. In general, you do not want to include your business name in your title tag, and you most certainly do not want to have it at the beginning.

You have about 65 characters you can work with in the title tag, and the rest gets lost by google and others.

Heading Tags

Definitely use keywords in your <h1> tags.  And for that matter, use <h1> tags in the first place. Many sites nowadays are using all divs & css which is great for style, but search engines can’t tell what’s important.

(And neither can screen readers, for that matter. )

Bold

Making a keyword bold once or twice is ok, especially if you can’t work it into the title tag.  Don’t overdo it, once is enough and twice is plenty.

Try adding a blog.

Search engines love fresh unique content, so if your site doesn’t get a lot of that then you want a blog.  Even if you do get a lot of fresh content, a blog might be good for your business.

Get the CEO to post blogs, read comments, and respond to comments.

People LOVE it when the President of a company takes time to respond to their blog comments. This will help you get those valuable incoming links.

Use Social Media and viral marketing.

Most blog posts don’t get bookmarked or posted to any social sites, except perhaps by the writers. But don’t let the fact that you didn’t have an icon at the end of your post be what stops your blog from going viral.

People like pictures.

Search engines like pictures with an alt attribute to describe the image.

Having pictures on your website is a great thing as long as you account for them by adding alt text. Also, try to avoid using images for your site navigation and other important links.

I always try to add at least one image to each blog post. Studies have shown that blogs with images get more readers.

Some great sources for free images include sxc.hu and Flickr’s Creative Commons search.

Flash, frames, and AJAX are like pictures, but worse.

Flash, frames, and AJAX don’t have an alt tag, so a search engine has no idea what they’re there for.

If you use flash, try to have a reasonable amount of text around it to explain what’s going on.

Don’t use frames unless you really have to.

AJAX is great, but it breaks the way browsers traditionally work. You need to realize this and account for it in your site design and SEO plans.

Other Useful Tips

Have two sitemaps.

On any site with 5 or more pages, you want to have a regular HTML sitemap page that indexes every page on your site to help visitors find their way around.

You also want to have an XML Sitemap to help search engines find your content and have an idea of how often to scan it for changes.

Use analytics from day 1.

Things that get measured tend to get improved. Measure your website statistics.

I use both Google Analytics and analog. Google Analytics gives some amazingly in-depth reports, but it can’t catch everything. PDF’s, Images, and Users with javascript disabled all slip right past Google Analytics, but nothing gets past analog.

Finally, have a call to action.

All the marketing in the world doesn’t get you a thing if visitors see your website and say “meh.” Use A/B testing and other methods to optimize your site’s call to action. The goal is to convert the largest number of visitors into sales as possible.

Search Engine Optimization

nFriedly Web Development has years of experience with SEO & SEM as well as other forms of marketing including Pay Per Click (PPC) campaigns, newsletters, and branding. Get in touch for a free quote on how I can help you get a good google ranking and take your traffic through the roof.

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:

alert([] == false) // true

alert([] == true) // false

if( [] ){
  alert('truthy'); // 'truthy'
} else {
  alert('falsy') // does not alert
}

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.

As it turned out,  the server had been upgraded to TLS only for PCI-compliance, and some users had TLS disabled.

This article goes in to the how, they why, and the solution to fix https websites that aren’t showing up for some users.

The Change

Recently a client of mine made some changes to their secure server in order to comply with PCI regulations.

The rather cryptic error the PCI compliance scan gave was

Synopsis : The remote service supports the use of weak SSL ciphers.
Description : The remote host supports the use of SSL ciphers that offer either weak encryption or no encryption at all.
See also : http://www.openssl.org/docs/apps/ciphers .html
Solution: Reconfigure the affected application if possible to avoid use of weak ciphers.
Risk Factor: Medium  / CVSS
Base Score : 5.0 (CVSS2#AV:N/AC:L/Au:N/C:P/I:N/A:N)
Plugin output :
Here is the list of weak SSL ciphers supported by the remote server :
Low Strength Ciphers (< 56-bit key) SSLv3 EXP-RC2-CBC-MD5 Kx=RSA(512) Au=RSA Enc=RC2(40) Mac=MD5 export EXP-RC4-MD5 Kx=RSA(512) Au=RSA Enc=RC4(40) Mac=MD5 export
The fields above are : {OpenSSL ciphername} Kx={key exchange} Au={authentication} Enc={symmetric encryption method} Mac={message authentication code} {export flag}

They disabled SSL 3.0 and lower in IIS and set it to only accept TLS connections. (TLS is essentially SSL 4.0). This allowed them to pass the PCI compliance, but brought on new issues.

The Problem

Immediately after making this change, they began to get complaints from a few users who could no longer see the secure sections of their website.

Most of these users were on older versions of Internet Explorer, so they were first asked to upgrade to the latest version. This didn’t fix the issue for most of them.

The Fix

After some digging around, I learned the IE has settings for disabling SSL & TLS.

1. In Internet Explorer on the Tools menu, choose Internet Options.
2. Go to the Advanced tab.
3. Scroll all the way to the bottom and check ‘Use TLS 1.0‘
4. Click Ok. You may need to restart your browser.

I have no idea why that would ever get unchecked, but apparently it happens.  It’s also worth noting that upgrading to a newer version keeps the old settings intact.

Need help with a secure website?

I have significant experience in e-commerce and other security heavy areas.  If you need secure web development, I can probably help you out.  I understand https from the high level implementation right down to the bits and bytes (.doc file).