Current Release 0.5.0 Beta (download - .zip - 16k - CC 3.0 Attribution license)

What Is A Heatmap?

Thanks to siewlian for our underlying photo

A heatmap is a way of visually overlaying hostspots of incidence/concentration on a grid. The hotspots can represent a clickstream (I set up a little AJAX script to record every time I clicked on the photo above and then rendered the data of where I clicked as a heatmap), or it could be the incidence of robberies or concentrations of zombies on a map.

Long story short, I got curious about heatmaps last year, but all the solutions I'd found were not in PHP, used the ImageMagick library, had a complex API, produced a heatmap I thought sucked, or multiple elements from that list. Eventually, because it produced the kind of map I wanted and could work simply, I first ported "The Definitive Heatmap" from Ruby to PHP.

I still didn't like the fact that it used ImageMagick (because many people on shared servers might not have access to ImageMagick), plus it executed the ImageMagick commands to the shell, which is not as secure as I'd like. So I re-wrote the whole thing to use PHP's built in graphics library, GD. That came with its own set of pitfalls, most notably being that GD has no Multiply blend mode. I had to create a GD Multiply blend in PHP from scratch. For those of you who arrived here specifically because you were Googling for a PHP script to do a Multiply blend with GD, you'll find that code in the overlayDot() method of the class.

I added a few functional modifications, did about an hour of testing to make sure it worked, wrote up the README, and packed it up.

The download package contains the class file, a README with instructions on how to use it, and a graphics folder with a color strip and dot image needed to create the overlay images. You'll need a basic knowledge of PHP and arrays to install this and make it work with the sample code.

Enjoy the class and if you have any questions, comments, bug reports, feature requests, or just plain praise, please post your thoughts below.

Current Release 0.5.0 Beta (download - .zip - 16k - CC 3.0 Attribution license)

September 2011
Nominee
Vote

See, my IDs only have to be unique in a list. That list will probably have, at most, 200 members. I have a lot less worry about collisions (generating and assigning the same ID to two separate items, thus causing confusion). There are a few GUID/UUID generator scripts out there that do all sorts of gymnastics to generate a 32-40 character ID so unique, there's supposedly no chance of it colliding with another ID of that length... ever.

The math bears that out to some extent. A 32-character ID using just A-Z and 0-9 (a.k.a. Base 36) has over 63 quindecillion, or 63 times a trillion times a trillion times a trillion times a trillion different IDs. Put another way, a 70 kilogram (approx 154 pounds) person has approximately 7 octillion atoms in their body, which is more atoms than there are stars in the universe at current estimates. 63.3 quindecillion is enough to give every atom in every person on Earth over a trillion unique identifiers... per atom... and that's counting the fat people too.

Still, there's a part of me that thinks that a 32-character code (36 with dashes) is just too dang long. I should program a function to generate a 6 character Base 36 code, because while that raises chances of collision from 1 in gazillions to one in 2 billion, it saves 30 characters worth of disk space and computational gymnastics. Since I only need the IDs to be locally unique to one file or one database table, I should program the quick function to generate the code (pick a random number between 1 and 2 billion, then use base_convert(picked_num, 10, 36) to change the random number to a Base 36 code).

But, I do realize that some of that mindset, while good because we should always seek the most efficient way to do things, also gives some chance of collision, requiring I write and use collision check/prevention code elsewhere in the script, so it gets balanced out. Additionally, that mindset is a bit of an old-timer mindset. I'm old enough to remember being excited when the price of hard drives dropped under $1 per megabyte, letting me get a 250 megabyte drive for $245 back in the 90s. Yesterday I saw a 1.5 terabyte external drive at Costco for $139.99. At that cost, 250 megabytes of that drive costs under 2.45 cents. Put simply, I was paying 10,000 times more per megabyte 15 years ago than I'm paying today.

Okay, since we're using an ASCII-safe character set and storing with UTF-8 encoding, it means the 36-character code (32 letters and numbers + 4 dashes) is going to require 30 more characters of storage. To be fair, we'll triple it for overhead. To use up $1 worth of extra disk space on that 1.5 terabyte drive, I'd need to store over 99 million IDs. In my project, I'm figuring a seriously heavy user might generate a few thousand over the course of a year. I don't really have to be sparing to control storage costs.

What about the computational cost, then? Efficiency is important. But, then again, how much does processing horsepower cost? Using the gigaflops (billions of floating-point operations per second) measure applied to super computers... Back in 1997, computing power cost approximately $30,000 per gigaflop in a system sporting two 16-processor Beowulf clusters with Pentium Pro microprocessors. Now, a desktop sporting a Core 2 Quad 8200 ($149.99 at Newegg when I last checked) delivers 37.28 gigaflops at a cost of $4.02 per gigaflop.

I decided to try a few methods for generating unique ID's. I tried a class that generates a 32-character UUID/GUID posted by Marius Karthaus in the comments of the uniqid() function documentation on php.net, the uniqid() function which generates a 13-character ID, then I tried picking a random number between one and a large number and converting it to base 36 using 2,000,000,000 and 9,000,000,000,000,000,000 (two billion and 9 quintillion). I topped out at 9 quintillion because when I went up to 90 quintillion, the result for the mt_rand() function was always 1. I generated 50 sets of 5,000 IDs for each and got the following average execution times per set (running on my local development environment - a MacBook Pro):

UUID: 0.16870986938477 seconds
Random 2 Billion: 0.021249299049377 seconds
Random 9 Quintillion: 0.024264307022095 seconds
UNIQID: 0.11121699333191 seconds

Computationally, if you factor the time to create versus the odds of collision, the UUID costs less than twice uniqid()'s method, but gives you a few gazillion times as many possible IDs (3.7 x 10^29 times as many). You'll cut processing time by a factor of close to 8 if you go with the one-in-two-billion method, and close to a factor of 6 if you go with the one-in-nine-quintillion method. Of course, even with the most computationally expensive method, generating more unique IDs than I expect any user to need in a year uses less than 2/10ths of a second.

So, if a REALLY heavy user completes enough tasks that they need 5,000 unique IDs, those IDs (assuming that data and overhead amount to 108 bytes) will use up 1/198th of a penny worth of disk space and 1/18,000th of an hour worth of computing time.

I still feel compelled through years of conditioning to try to squeeze every last bit of efficiency out of my code, but the fact that I spent hours researching this, testing it, and determining the relative efficiencies of the various methods means I probably cost myself more than all the computing and disk space savings combined among everybody who ever uses the script I'm working on.

This time I wanted to know if I could get a string name passed, then use it in some function using the eval() function to get its value. For example

var steve="blue";
var blue="danny";
alert(eval(steve));

Now, if it was just alert(steve), the result would be an alert window with the message "blue". But because eval is evaluating the content of "steve" as code... The value of "steve" is "blue" and the value of the variable "blue" is "danny", so alert(eval(steve)) generates an alert window with the message "danny".

But the cool thing is that you can nest evals...

<script type="text/javascript">

var steve="blue";
var blue="danny";

function gotoit(sedley){
alert(eval(eval(sedley)));
}

</script>

<a href="javascript:gotoit('steve');">Run The Dang Script</a>

In this case, the value of sedley is "steve", which evaluates to "blue", which has the value of "danny".

Try it for yourself.

I know, sort of pointless, but it was neat to me and I thought I'd share.

<?php

$fred = $_REQUEST["fredinput"];

$ted = <<<EOM
This is a multiline<br>
string, that outputs<br>
the value of "fredinput" as<br>
$fred.
EOM;

echo $ted;

?>

Now, let's say that in whatever form you'd posted to this script, the value of the "fredinput" variable was "Loquacious", the output of that bit of code would be:

This is a multiline
string, that outputs
the value of "fredinput" as
Loquacious.

Now, let's say you had large blocks of HTML you'd want to specify in this way for a javascript application. It gets a little painful because it all has to be a single line, or at the end of each line, you have to escape the line break, you have to make sure you escape your single or double quotes, and to put in any variables, you have to close your quotes, insert the variable surrounded by pluses, and then reopen the quotes. It makes that HTML hard to read and easy to screw up if you need to edit it.

Wouldn't it be nice to just type the big old block of text as straight HTML with lots of whitespace for readability, not have to escape anything, and just prefix variable names with dollar signs to have the variable's value appear?

You can, and all you need is this very short function. It's a bit of a klunky hack because the text is in a hidden div in the HTML document instead of within the script. But otherwise it works nicely.

Here's a sample using the function.

<script type="text/javascript">
// set variables named andy and handy, which we can use as $andy and $handy in our text

var andy = "Fred Flintstone";
var handy = "Steve Austin";

function hereDoc(divid){
var obj = window; // gets an object containing all the variables
var str = document.getElementById(divid).innerHTML; // gets the HTML block
for(var i in obj){

/* the for loop recurses through all the objects in the page - remember strings are objects in Javascript */

if((typeof(obj[i])=="string")||(typeof(obj[i])=="number")){

/* Type of makes sure it only executes replacement for strings and numbers. The function worked without this test in Firefox and Safari, but threw errors on Opera until it was added. */

myregex = new RegExp('\\$'+i,"g");

/* To replace globally, you need to use a regular expression and use the "g" option, but within the string.replace() method, the regular expression is unquoted, so you can't use a variable in it directly. So we create it and assign it to a RegExp object that works in the string.replace() method. */

str = str.replace(myregex, obj[i]);

/* we replace instances of the variable name with a dollar sign before it with the variable's value */
}
}
return str;

/* and when the loop is done, we return the processed text to be used however needed */

}

function gotoit(){

/* fill the "steve" div with the processed contents of the "randy" div. */

document.getElementById("steve").innerHTML = hereDoc("randy");
}

</script>

<a href="javascript:gotoit();">Run the script</a>
<div id="randy" style="display:none;">
The interesting thing about $andy is that he's not nearly as popular with young kids as $handy.<br><br>

What I really find 'interesting' is that this "multiline" thing works as well as $handy's bionic arm. <br><br>
</div>
<div id="steve"></div>

Note the unescaped single and double quotes on the last line. You can do much more complex HTML like a form, but I'm just trying to keep this simple for the example.

In the end, this is more a proof of concept than anything else. You can do this a bunch of ways, but I like the way it iterates through the javascript variables in the document and processes the text the same way you'd see that handled in a PHP script. Of course, I haven't added in the handling of array variables, but it could be done.

There's also the reverse option of using regular expressions to search for single words meeting string naming rules, prefixed with $, then checking to see if there's a variable with that name that's a string or number value and doing a global replace for it. If you had a whole lot of variables in a highly complex script, it might be faster.

Anyway, I'm rambling. I've tested it on Firefox, Safari, and Opera on my MacBook Pro running Tiger. Try it out on your browser if you like...

Run the script

One part of the project was to add "Tweet This" links to certain items on the site, where clicking on the link would send the user to Twitter and fill in the suggested text of the tweet for them.

It's actually a lot simpler than you think. The format is: http://twitter.com/?status=[URL encoded tweet text].

Now many of you are asking how you "URL encode" the tweet text. Well, if you're using PHP, you use urlencode('text'); where "text" is the text of your tweet. If you want to do it in JavaScript, the PHP.js library has a javascript equivalent for PHP's urlencode.

But here's a little trick I didn't know about until I made this mistake. Make sure your link goes to twitter.com, not www.twitter.com. If it goes to www.twitter.com, the text doesn't get properly decoded. So, trying to tweet Creating a "Tweet This" Link - http://www.brainhandles.com would look like Creating a %22Tweet This%22 link - http%3A%2F%2Fwww.brainhandles.com, and nobody wants that.

When I tried to find something online where someone had the same problem, a Google search requiring the error message as a phrase and the word "mac" turned up ONE result, and that was a guy mentioning the error in blog comments.

So, I never found out how to fix my install, but a quick kludge was found here in the second post. I put the JSON.php file from the downloaded .gz archive in the same folder as my PHP script, added the suggested code to JSON.php, and added "import('JSON.php')" to my script. Voila.

Now, the rare person with my issue will be able to search for the error message and "mac" and find, if not the answer, a workable kludge.

A few days back, more than one web-comic artist I follow linked to an interactive comic as an example of a cool use of technology to enhance cartooning. The problem for me was that it was in Flash and a little complicated. I wanted to build a tool that any cartoonist could use to create something like that.

So I came up with a utility I call ComicScript. I'm still just at the proof of concept stage, but basically when it's done, any comic artist who wants to build a grid of panels will just fill in a few details about his/her grid and get the JavaScript code and files needed to implement the grid on their site or blog.

Check out my test of an 8 x 2 (8 wide by 2 tall) grid comic (I would have posted it here, but I realized my proof of concept was too wide. Love to hear what you think.

Didn't like them, removed them. Then this evening went in to do my manual biweekly backup (I created the database outside of the cPanel structure long ago, so cPanel doesn't include it in the nightly backup), saw some tables related to the poll plugin, marked them, then hit the "drop" command.

Only I hit the one to drop the whole database, not just the marked tables. Clicked yes to the "are you sure" warning, because I thought it was just dropping those tables, then found out I'd dropped the whole database.

MySQL apparently doesn't have a "holy crap" button to immediately undo disastrous mistakes, and in all this time, really doesn't have a method to undo a database drop. You might possibly reconstruct it, but in general you're stuck restoring the database from backups.

Luckily I back up regularly, because I'm relatively paranoid. I lost a few edits to later chapters in the novels. More saddening is that I lost a number of comments posted in the last few days by friends and new readers including a discussion on the use of racially charged language in the early chapters.

So, for those of you who manage your own server... back up, back up, back up, and pay attention to those warning messages. We've gotten so used to them we mindlessly click. But if I'd read the warning message, I'd have known that I was about to kill much more data than I thought and could have stopped before it was too late.

And to those of you who posted comments in the last few days... SOOOORRRRYYYY! Won't happen again.

Note how all all the stories are "one week ago". Normally this feed is somewhere between a few minutes to "one day" ago. And the "one week ago" is inaccurate since most of the stories are dated between February 9th to February 11th. The same went for the comics farther down the page (Feb 11th). The segments that related to offsite RSS feeds were current, but any feeds created/licensed by Yahoo were reaching WAAAAY back.

Wonder how long it will take to fix. Oh, it's fixed. Well, at least it lasted long enough to grab a picture.

I was stumped, how did increasing the number of items in the list by a factor of around 3 increase the execution time by a factor of 100?

I initially thought it was the database query. If the list was 16 items, that was the maximum number returned for the query. If the list was 50 items, it might have been the first 50 out of 300, which required extra sorting and organizing. But the database queries were timing out at close to the same speed.

I checked the processing of the data. Perhaps there was some bottleneck in my code that I could isolate. But as I broke the script down into smaller and smaller pieces, I found that all the parts that created the dynamically generated page were working fine up until I echoed the string that sent the compiled page to the user...

echo $page;

It was that line that took a couple of thousandths of a second when there were 16 questions, but took two or three hundred times longer when you tripled the length of $page. In fact, the tipping point was really between 19 and 20 questions. At 19 questions, it was executing in around 0.0085 seconds. At 20 questions, the execution time jumped to 0.27 seconds. Adding just one question caused the script to take 30 times longer to execute.

I Googled the topic and found that this is a well-known weakness of PHP. And, as a matter of fact, output in general is a weakness of PHP, because even knowing about this, people have long argued about whether it's faster to use "print" or "echo".

There were a number of suggestions on how to compensate, such as ob_start() and ob_flush to use output buffering with more fine grained control, but that wasn't doing the trick for me. Another suggested breaking the output string into chunks and outputting them individually in sequence. That also didn't work... at least not with his value of 8192 (8 kilobytes) as a chunk size. So I tried larger chunks (48 kilobytes, since that seemed to be the upper limit before slowing occurred) and smaller chunks (256 bytes, getting real small), but those weren't working. I was about ready to give up when I decided on one more try. I tried 2048 (2 kilobytes) and things finally sped up, and it seemed the best speed came from a 1-kilobyte chunk size.

So, if you find a PHP script is running really slow, the culprit might be something as simple as "echo $string" and the only way to fix it is to performance tune the output of that string. Amazing, huh?

Basically, I put all the text snippets in a large array and then used a foreach loop to match each one individually against the User Agent string. A visitor to the page asked why I hadn't done a very large regular expression, essentially including all those snippets with "or" symbols between them. So instead of "match 1, match 2, match 3," I'd get "match 1 or 2 or 3". She asked: "Is this more efficient processing, or more organized for you, or avoids some possible error getting thrown?"

Well, the initial answer was: "I just didn't think of doing a giant regex. I like arrays and my mind went in that direction."

But that only answers why I did it, not whether it's better. And while this is such a small piece of code that you can execute it 10,000 times in under 1.7 seconds, so it's not going to increase your server load significantly, I realized that on a very high traffic web site, cutting execution time even on such a small piece of code could make a difference. So I tested it.

I ran both methods (the foreach and the array as a giant regex) against a string of 190-195 characters in 10,000 iteration batches, and moved the bit of matching text around the string.

I got approximately the same execution time for the foreach method no matter where the matching text was in the string. But with the giant regex, the execution times varied by huge amounts. The farther the matching text was from the beginning of the string, the slower the giant regex worked. When the matching text was in the first 10 characters, the giant regex was 6-7 times faster than the foreach method. If it was around the 30th character, around 4 times faster.

But when the matching text was somewhere around the 150th character, the giant regex took 50-60% longer than the foreach method. When there was no match whatsoever, the giant regex took over twice as long.

I then tried increasing the length of the string (with no matches in it). The performance disparity grew deeper and deeper. At 760 characters, the giant regex was taking around 4.25 times longer than the foreach method. At 1520 characters (around 250 words), the giant regex had slipped to 5.4 times longer than the foreach method. Yet if there was a match in the first 10 characters of the 1520-character string, the giant regex took no longer than if they were in the first ten characters of a 190-character string.

Now because User Agent strings generally aren't too long and you don't have to go too deep to get a match, in this specific case, using the giant regex would probably be more computationally efficient. And if you were running this snippet millions of times a day, you could see tangible gains from optimizing it. But as a rule of thumb, the foreach method is going to be the better general purpose choice.

So, Jane, I hope that answered your question.

But, on a recent contract, I had a client's site where it only worked properly in Microsoft Internet Explorer and part of my task was to get it to work similarly in all browsers. One of the things they had done was use ALT tags, so that when you rolled your mouse over a graphic, the alt text would pop up as a tool tip. The problem is that this is a non-standard behavior. Only Microsoft Internet Explorer pops up alt tags. So how to get the alt text to pop up in all browsers? Javascript, of course.

I'm not going to go into the Javascript. There are many different ways to do a pop-up tooltip. The trick, though, was to get all those alt texts fed to the tooltip script. Now, there may have been a way in the DOM to get the element's alt text and feed it to the script, but I wasn't sure and didn't have a whole lot of time to hunt it down. Instead I wrote up a quickie PHP script to handle it. This is not a CGI, but a script I ran from the command line. And you don't need to be running from the Linux or Mac command line. You can install PHP on Windows XP or Vista and run it from the DOS command line.

The first part of the program recursed the directory with all of the HTML files, and each time it found an HTML file, it fed it to a function in the script that read it, altered it, and saved it. I'll write a post on how to do that soon. For now, I'm just going to get into the alteration.

Let's assume I had a line of HTML like this...

<img src="fred.jpg" alt="This is a picture of Republican presidential candidate, Fred Thompson" height=300 width=190 border=0>

As I read through the file, line by line (each line being $line), I applied the following bit of code...

if(preg_match("/alt=\"[^\"]+\"/i",$line){
   $newline = preg_replace("/alt=\"([^\"]+)\"/i","alt=\"\\1\" onMouseOver='toolTip(\"\\1\")'",$line);
} else {
   $newline = $line;
}


That will turn...

<img src="fred.jpg" alt="This is a picture of Republican presidential candidate, Fred Thompson" height=300 width=190 border=0>

... into ...

<img src="fred.jpg" alt="This is a picture of Republican presidential candidate, Fred Thompson" onMouseOver='toolTip("This is a picture of Republican presidential candidate, Fred Thompson")' height=300 width=190 border=0>

Now, how did that work? What preg_replace does is store all the parts of your regular expression that are within parentheses in a series of numbered strings. So alt=\"([^\"]+)\" set everything inside the quotes after alt= as a string which could be re-used. So we replaced alt=\"([^\"]+)\" with itself (alt=\"\\1\") plus a call to the JavaScript tooltip function using the same text as in the ALT tag (onMouseOver='toolTip(\"\\1\")').

You could also do parentheses within parentheses, capturing a larger piece of text and then capturing a smaller subset of that piece of text. The system counts the parentheses from left to right. For simplification, I'll demonstrate this with a sentence and how the pieces would break out.

Fred (Thompson is a (Republican candidate for (President)) of the) United (States)

That would break out as...
1: Thompson is a Republican candidate for President of the
2: Republican candidate for President
3: President
4: States

And that's how that works. I'll do a post soon on how to go through a directory and use it on all files.

The recent MySpace hack, where band pages were hacked to cover them up with an invisible link that sent you to a malware infection site, showed that it can be dangerous to let users put their HTML in your pages. To allow users to customize their pages with everything from images to new backgrounds, MySpace allowed some pretty complex user-generated HTML. Hackers took advantage of that to use some CSS tricks to create those page overlays.

But let's say you're building a site where you want your users to be able to have some formatting control over content they submit. How do you allow some HTML but not other HTML? There are three ways to do this... exclusion, inclusion, and substitution.

Validating Through Exclusion

Validating through exclusion may seem simple at first. You just look for the tags you don't want and kill them. You can write rules that eliminate <SCRIPT> tags, "onClick" and "onMouseOver", etc. But you'll find that this list grows and grows. It's a cat and mouse game as hackers try to discover exploits you haven't thought to guard against yet.

Exclusion is nice in that it allows you to allow your users a much broader range of options. They can do everything that isn't explicitly prohibited. But if your list of exclusions isn't spot on, you'll be playing catch-up.

Validating Through Inclusion

An inclusion style of validation comes at the problem from the opposite direction. Instead of trying to catch the stuff you know to be bad, you allow the stuff you believe to be good. It's a sort of HTML guest list; the tags on the list get into the party, but the tags on the list don't. You can even enforce a dress code.

To do this, you run a global search of the input to find all the HTML tags in it, then compare each one against a set of rules. If it matches one of the rules, it's good and gets through. If not, then it's bad and you can handle it by deleting it, showing the user an error message, banning the user from your site forever, whatever you want.

For example, let's say you're going to allow them to use a FONT tag and they can specify three characteristics: size, color, and the font face. Here's a regular expression you can use that will check to see if a tag is a conforming FONT tag.

Now we'll break it down...

/<\/?: The first forward slash opens the regular expression like a < opens an HTML tag. So the expression starts by looking for the opening <. The backslash (\) tells the interpreter not to see the forward slash (/) as the end of the regular expression, but as just a normal forward slash. Then the question mark after it means it can occur zero or one times, meaning, this first bit will match "<" or "</".

font: The simplest part, following the "<" or "</", there must be "font".

(( face=\"[^\">]*\")?|( size=\"\d\d?\")?|( color=\"[^\">]*\")?)*: This is the part that looks for the font tag modifiers. We'll break it down from the inside out. Inside the parentheses, we have three sub-expressions in parentheses, each followed by a question mark.

( face=\"[^\">]*\")?|: This looks for a space, the word "face" followed by an equals sign, followed by a quotation mark, followed by zero or more characters that arent a quotation mark or a >, followed by another quotation mark. The question mark outside those parentheses says it should occur zero or one times. That's followed by a pipe symbol(|) which means "or".

( size=\"\d\d?\")?|: This is a more specific check. Since you only want a number in there, we have "\d\d?" The "\d" stands for any digit from 0 to 9, so "/d/d?" means the pattern requires one digit from 0-9 followed by zero or one more digits, allowing any value from 0-99. If you wanted the value to just be 0-9 (which is actually fairly reasonable for font size values), you'd just take out the "\d?". Like the pattern before it, it's followed by a question mark, meaning it should occur zero or one times, and a pipe (|) which means "or".

( color=\"[^\">]*\")?: This final pattern looks for a color value which can be anything that doesn't contain a quotation mark or a > and occurs zero or one times.

(...)*: All of that is enclosed in a set of parentheses followed by a star. The parentheses makes them into a set, basically "(1 or 2 or 3)" and the star means "zero or more times". So the whole pattern is any number of instances of those three tags any number of times, but only those three tags. So you could specify the font face twice or not at all, but you could only specify the face, the color, or the size.

 *?\/?>/i: The space-star-question combo is zero or more spaces occurring zero or one times, then the possibility of a closing forward slash within the tag for someone who is XHMTL crazy, the closing > and then the forward slash to close the pattern. Then it's followed by an "i" which is a modifier that tells it the matching should be case insensitive. Without that, a tag that started with <FONT instead of <font would get tossed as a non-match.

Inclusion works very well if you know precisely what you want to allow, can write good patterns for matching it, and can communicate what's allowed to your users. It's also good if you're using a JavaScript-based WYSIWYG text editor like Tiny MCE that lets your users format their text like they were working in a word processor. Generally, across most browsers (except Safari), you'll be able to get consistent, predictable HTML submitted to the form from WYSIWYG editors, making it possible to develop an inclusion list because you know exactly which tags the editor will return.

The advantage of using an inclusion validation method combined with a WYSIWYG editor is that you don't have to tell your users what's acceptable HTML and what isn't. They're one step removed from the HTML, and as long as the editor's controls are pretty intuitive or self-explanatory, your users have little or no learning curve for formatting their text in guestbooks, blog comments, or bulletin boards, but you have the ability to lock down that formatting with fairly solid precision.

Validating Through Substitution

Validating through substitiution is a form of inclusion, but it exerts even tighter control. Instead of using HTML, users are required to use a different form of mark-up which a browser would never recognize. Then, at some point, your scripts parse the mark-up into HTML, so the final product is formatted the way the user wanted.

An example of this is BBCode, which is used by a number of bulletin board and forum systems. Instead of <b> to start bolding text, you use [b]. Somewhere in the processing engine (usually during the code that retrieves your post from the database and displays it to a visitor) a <b> is substituted for the [b] you used.

The problem with a substitution method is that it requires your users to learn a new form of mark-up and is a lot harder to get working with a WYSIWYG editor, so it requires users who are a bit more savvy and either know the substitution's mark-up or are willing to spend the time to learn.

On the other hand, substitution can be done on a smaller scale, such as simply substituting smiley-face graphics for emoticons...

Summing It All Up

Basically, the types of validation can be summed up like this...

Exclusion: Toss everything I know to be bad and let everything else through.
Inclusion: Allow everything I know to be good through and toss everything else.
Substitution: Look for special non-functional codes and make them functional, but toss all other codes.

What you choose should be determined by how much freedom you want to offer your users, how much of a learning curve you want them to go through, and how much time you want to spend maintaining your validation methods.

Best of luck!

The code in question is a PHP function that returns a true or false value depending on whether the browser viewing the page has been identified as mobile or not. If it's identified as mobile, it returns a "true" status. If it's not, it returns a "false" status. So, if you use the code exactly as presented in the original article, you're going to put it somewhere near the end of the PHP code block in your page. Somewhere near the beginning of the page, you'll want a PHP code block like this...

if(checkmobile()){
     //code to execute if a mobile browser is detected
}

Now what code you'll execute is up to you. It might be that you simply select a mobile style sheet instead of your regular one. To do that, you'd do something like...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>My Page Title</TITLE>
<?php
if(checkmobile()){
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"/mobilestyle.css\">";
} else {
echo "<link rel=\"stylesheet\" type=\"text/css\" href=\"/regularstyle.css\">";
}
?>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
...

Now remember, this assumes you've put the mobile browser detection code somewhere in the page between <?PHP ... ?> tags.

Some of you, on the other hand, may want to send mobile browsers over to an entirely different version of your site. The simplest way is to do...

<?php
if(checkmobile()) header("Location:http://www.whatever-url-you-want.com");
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
...

Note that this is at the VERY VERY top of the page, before anything else. That's because, you need to do the redirect before any other information has been sent to the user's browser.

You can put the code for catching mobile browsers right in that PHP block, after the "if(checkmobile())" line and before the "?>" line. I haven't included it in the examples just to keep this page from being humongously long.

Depending on how your server is set up, any file that contains PHP may require that the file name end in .php instead of .htm or .html. So make sure you know what your server requires.

Hope this helps some of you who aren't familiar with programming. If you need further help, I suggest buying a book on PHP if you're in a DIY mood or hiring someone who knows it if you're not.