reCAPTCHA for punBB 1.1 released

A small bug has been fixed.

Head over to reCAPTCHA for punBB page for more information.

reCAPTCHA for punBB 1.0.0 released

reCAPTCHA for punBB 1.0.0 has been released.

This extension for punBB integrates google's reCAPTCHA system to minimize spam on the forum.

Head over to reCAPTCHA for punBB page for more information.

Converting CSS colors to grayscale

Last week I was working on integrating punBB into my website and I ran into a small challenge. I needed to make punBB match my blog's color scheme. By default punBB looks like this:

I started editing the CSS file and quickly realized that it is going to take much more time and effort that I was willing to invest at that time. I started analyzing alternative solutions and quickly figured out that converting the default color scheme to grayscale would do the trick. I started looking online for a tool that could do such a thing. I didn't find anything but it didn't seem too hard to write a script that would change all the colors in a css file. Having absolutely no idea how to convert an RGB code from color to grayscale I setup my first experiment.

If RGB code describes intensity of red, green, and blue respectively, if I total the intensity values and then spread them evenly between red, green, and blue I should get gray of the same intensity as the base color. With that assumption in mind, I wrote the following VBScript code. I realize that it's dirty and could be written much better but I had 5 minutes to write it and it worked so don't wine.

'Setting up System File Object
Set objFSO = CreateObject("Scripting.FileSystemObject")
'Opening input css file. 1 = reading
Set inFile = objFSO.OpenTextFile("in.css", 1)
'Opening output css file. 2 = writing
Set outFile = objFSO.OpenTextFile("out.css", 2)

'Main loop
Do Until inFile.AtEndOfStream
	'Read a line from input file
	line = inFile.ReadLine
	'Find position of first "#"
	pos = InStr(line,"#")
	'If "#" was found pos will be larger then 0. The reason this is a while loop is that "#" could occur more then once per line
	while pos > 0
		'Checking if the "#" found could be a 3 digit color code
		if mid(line,pos+4,1)=" " or mid(line,pos+4,1)=";" then
			'Converting rgb values to decimal from hex
			r = CInt("&H" & mid(line,pos+1,1))
			b = CInt("&H" & mid(line,pos+2,1))
			g = CInt("&H" & mid(line,pos+3,1))
			'This is where the conversion to grayscale happens
			t = hex((r+b+g)/3)
			'Rebuilding the line with the new value
			line = mid(line,1,pos) & t & t & t & mid(line,pos+4)

		'Checking if the "#" found could be a 6 digit color code
		elseif mid(line,pos+7,1)=" " or mid(line,pos+7,1)=";" then
			'Converting rgb values to decimal from hex
			r = CInt("&H" & mid(line,pos+1,2))
			b = CInt("&H" & mid(line,pos+3,2))
			g = CInt("&H" & mid(line,pos+5,2))
			'This is where the conversion to grayscale happens
			t = hex((r+b+g)/3)
			'Making sure that t is two digits long and if not add "0" in front
			if t < 2 then
				t = "0" & t
			end if
			'Rebuilding the line with the new value
			line = mid(line,1,pos) & t & t & t & mid(line,pos+7)
		end if
		'Checking for another "#" on this line
		pos = InStr(pos+1,line,"#")
	wend
	'Write to the output file
	outFile.WriteLine(line)
Loop
'Closing files
inFile.Close
outFile.Close
'Done
msgbox("Done")

Amazingly it worked like a charm so enjoy it.

Tabs in TEXTAREA

I was working on a small personal project the other day and I ran into a surprising obstacle. I wanted an online form to behave just like notepad does. Specifically I wanted to use tabs in a textarea of a form. The shocking part was how scarce the information on the issue was and how bizarre some approaches were. I ended up writing my own JavaScript to handle this issue and realized that my code works so well that I need to put it out there for others to use. You can check it out in action HERE.

Tested with: IE6, IE7, IE8, FireFox, Chrome, Safari, and Opera

Here is the business end that goes into the "HEAD" section.

<script type="text/javascript">
	// This script allows intuitive TAB functionality in HTML form fields.
	// Due to browser incompatibilities the following code has to be included in the field tags:
	// onkeydown="checkTab(event)"; onkeypress="operaTab(event)";
	// visit MattStypa.com for more information

	function checkTab(event)
	{
		// First we check if the key pressed was a tab
		if (event.keyCode == 9)
		{
			// Is this IE?
			if (navigator.appName == 'Microsoft Internet Explorer')
			{
				// This stops the default behavior of the tab key. preventDefault does not work in IE.
				event.returnValue = false;
				// This gets the current selection or cursor location
				range = document.selection.createRange();
				// Replaces the current selection with a tab character or simply inserts it at the current cursor position
				range.text = "\t";
				// This resets the selection
				range.collapse(true);
				// And this executes above statement.
				range.select();
			}
			else
			{
				// This stops the default behavior of the tab key
				event.preventDefault();
				// We need to save the current position of the cursor.
				var c = event.target.selectionStart;
				// Inserting a tab into the string.
				// First we grab what comes before the current selection (or cursor position).
				// Then we add the tab character. Finally we add the part the comes after the
				// current selection (or cursor position).
				event.target.value = event.target.value.slice(0,event.target.selectionStart).concat("\t").concat(event.target.value.slice(event.target.selectionEnd,event.target.value.length));
				// This sets the cursor position.
				event.target.selectionStart = c + 1;
				// And this cancels selection. Opera requires that this is on a seperate line.
				event.target.selectionEnd = c + 1;
			}
		}
	}

	function operaTab(event)
	{
		if (navigator.appName == 'Opera' && event.keyCode == 9)
		{
				// This stops the default behavior of the tab key
				// Opera is unable to do that when called from onkeydown
				event.preventDefault();
		}
	}
</script> 

Also we need to map some events to the field.

<textarea onkeydown="checkTab(event)"; onkeypress="operaTab(event)";></textarea>