If you work with ASP.NET web apps, and you’re creating input fields that may contain html (like the one I’m typing on right now),you may receive the following error when submitting anything with an angle bracket followed by a letter, such as <a

A potentially dangerous Request.Form value was detected from the client…

Thank you, Microsoft, for saving me from this potential hack! Now, you can simply turn off the security settings, which is explained quite well in this article. However, that leaves you open to all sorts of potential injection attacks, plus it’s against the rules for a lot of sites. You can’t do any string replacements in your code-behind, because this error fires off before any page events have occurred. So my trick is to use jQuery to capture the text before it gets sent to the server, convert any nasty symbols to something safe, then reverse the conversion when the content is displayed.

Just include jquery, add this script anywhere and baddaboom! No more errors.

Why not use the built in encode/decode functions?
The thing I hate about using html entities is the fact that the ampersand is used within the symbol it represents! When building custom CMS’s and dealing with outputting text to textareas as well as html blocks, you inevitably trip yourself up if you happen to call encode or decode one too many times, ending up with symbols like this:

&&&lt;

By using a unique string like {{LEFTBRACKET}}, and limiting string replacement to the angle brackets, I find this solution to be a lot more sturdy. If you have a problem with quotes or backslashes, just add them into the conversion functions one at a time.

Recently I’ve been tinkering with jquery and just built a simple version of the classic hand-held Lights Out! game.  Am I the only one that remembers this gem? Come on people, put down your PSP or Nintendo DS and play a game with real challenge!

It’s extremely easy, yet deceptively challenging.  Just click on any light (on or off) and it will switch.  So will the lights above, below and to the sides.  Just to add to the pressure, I included a timer.  If and when you decide to give up, you can click the ’solve’ button and watch the computer put your feeble mind to shame.  Enjoy!

About 5 years ago Mindstorm was asked to design Head Start of Washington County, Inc’s first website. This was one of our first projects as a young company.  Just recently, we updated the site with a fresh design.  The redesign went live Wednesday, Sept. 10 2008.

Head Start of Washington County, Inc. is a private, nonprofit, agency dedicated to making a difference in the community by providing comprehensive child and family development services to low-income, at-risk populations throughout Washington County.  We are proud of our talented staff and grateful for the opportunity to help this organization.

Click on the image below to visit their new site.

If you’re like me, someone who likes to write PHP tutorials on a Saturday night, you may have wondered if there’s any way to include PHP or any server-side programming into your blog.

Sorry, you can’t just write lines of php into a WP blog and expect them to compile

Let me demonstrate by trying by trying to echo $_SERVER['PHP_SELF']

If you look at the source code, above this line you will see a failed attempt to write a line of php code into the blog. Not that simple. Now observe below:

/blog/index.php

You should see the server name above this line. What’s the secret? It’s a simple process of including a php file and adding some code into WP. Then, with a little string manipulation you can ‘include’ files in your blogs. Just follow these few simple steps

1. Write an include file.

The file should contain one function with the same name as the file which returns a string. The value of that string is what will appear in your blog.

//code in include file called /blog/index.php.php
function /blog/index.php()
{
	return $_SERVER['PHP_SELF'];
}

2. Add some code into wordpress

In the file wp-includes/post-template.php, find the function the_content(). Replace with the following function:

function the_content($more_link_text = '(more...)', $stripteaser = 0, $more_file = '')
{
	$content = get_the_content($more_link_text, $stripteaser, $more_file);
	$content = apply_filters('the_content', $content);
	$content = str_replace(']]>', ']]>', $content);

	if(strpos($content, "BEGIN*_INCLUDE") !== false)
	{
		$startindex = strpos($content, "BEGIN*_INCLUDE") + strlen("BEGIN*_INCLUDE");
		$endindex = strpos($content, "END*_INCLUDE", $startindex);
		$length = $endindex - $startindex;

		$fileName = substr($content,$startindex,$length);
                //change the path to the location of your include file
		$filePath = "wp-content/themes/mytheme/includes/". $fileName . ".php";

		if(file_exists($filePath))
		{
			include_once($filePath);
			$code = $fileName();
		}
		else
			$code = "ERROR 404: File ".$filePath." Found!";

		$content = str_replace($fileName, $code, $content);
		$content = str_replace("BEGIN*_INCLUDE", "", $content);
		$content = str_replace("END*_INCLUDE", "", $content);
	}
	echo $content;
}

3. In your blog, write BEGIN*_INCLUDEfilenameEND*_INCLUDE

‘filename’ must be the name of the include file, as well as the function within.

There’s many ways to extend this sort of functionality but this is a good start for anyone trying to hack into wordpress and insert their own code.

Scalable boxes with soft rounded edges, buttons with smooth unique fonts, varying transparency, drop shadow, gaussian blur and many more effects can be generated on the fly by utilizing the tools in the powerful PHP GD Package!

These tricks are extremely useful for web designers who want to retain the quality of photoshop compositions but have the flexibility to change titles of pages and navigation buttons

How It Works:

Advantages:

Flexibility

Use any font you want, change text any time, even based on user input. Fonts are smoothly antialiased as well.

Load Time

Rather than having 10 nav images and 10 rollover image, you simply load three small image slivers and a font one time keeping your image size minimal

Stability

Unlike the thousands of Complex CSS Hacks that attempt similar feats, everything is server side so there’s no worries about browser compatibility.

The Code:

This is the code used to generate the button.

$leftImagePath = "btn_left.png";
$midImagePath = "btn_middle.png";
$rightImagePath = "btn_right.png";

//be sure to upload your font
$font = "LithosPro-Regular.otf";

$fontSize = 12;

$leftSize = getimagesize($leftImagePath);
$midSize = getimagesize($midImagePath);
$rightSize = getimagesize($rightImagePath);

$btnTitle = (isset($_GET["text"]) ? $_GET["text"] :  "My Button");
$btnTitle = urldecode($btnTitle);
$btnTitle = str_replace("\\", "", $btnTitle);

$height = $fontSize * 2 + 1;
//calculate text width by creating a dummy image
$dummy = imagecreatetruecolor(1, 1);
$black = imagecolorallocate($dummy, 0, 0, 0);
$bbox = imagettftext($dummy, $fontSize, 0, 20, 18, $black, $font, $btnTitle);
$textWidth = ($bbox[2] - $bbox[0]);
$totalWidth = $textWidth + $leftSize[0] + $rightSize[0];

$leftImageSrc = @imagecreatefrompng($leftImagePath);
$midImageSrc = @imagecreatefrompng($midImagePath);
$rightImageSrc = @imagecreatefrompng($rightImagePath);

$button = imagecreatetruecolor($totalWidth, $leftSize[1]);

//background color
$rgb = array(255, 255, 225);
$bgc = imagecolorallocate($button, $rgb[0], $rgb[1], $rgb[2]);

imagefilledrectangle($button, 0, 0, $totalWidth, $leftSize[1], $bgc);

 //draw left cap
imagecopy($button, $leftImageSrc, 0, 0, 0, 0, $leftSize[0], $leftSize[1]);
//draw middle sliver, stretch to text width
imagecopyresized($button, $midImageSrc, $leftSize[0], 0, 0, 0, $textWidth, $leftSize[1], $midSize[0], $midSize[1]);
//draw right cap
imagecopy($button, $rightImageSrc, $leftSize[0]+$textWidth, 0, 0, 0, $rightSize[0], $rightSize[1]);

$textColor  = imagecolorallocate($button, 255, 255, 255);
$padding = $leftSize[0];
imagettftext($button, $fontSize , 0, $padding, $height, $textColor, $font, $btnTitle);

//this header makes the image get cached for 1 hour
header('Expires: ' . gmdate('D, d M Y H:i:s', time()+60*60) . ' GMT');
//this header makes the file act like an image
header("Content-Type: image/png");

imagepng($button);

imagedestroy($button);
imagedestroy($leftImageSrc);
imagedestroy($midImageSrc);
imagedestroy($rightImageSrc);

The Image Code:

This is the code used to call the button.

This is the beautiful part, the image tag writes the text right into the image, with no server scripting required!

< img src="../test/php/img/btn.php?text=Type whatever you want in here" / >

I’m still relatively new to this area of PHP. I’m trying to figure out how to make the image transparent. It seems easy enough, there’s plenty of functions that reference alpha, but none have seemed to work. Once I get it working I’ll append this post.

Until next time, happy coding.