2009
08.06

PHP on speed

I have always been interested in what little things I can do while writing PHP that will make it that little bit faster.So, for a start I will investigate the speed difference between a variable in a string in the 3 scenarios below

$strText = ‘Hello World!’;

1 – $strString = “Lorem ipsum $strText dolor sit amet”;
2 – $strString = “Lorem ipsum {$strText} dolor sit amet”;
3 – $strString = ‘Lorem ipsum ‘.$strText.’ dolor sit amet’;
4 – $strString = “Lorem ipsum “.$strText.” dolor sit amet”;

So over a 100,000 iterations of doing this on a dedicated server then getting some averages I will work out which is more efficient and faster. The below times are for the 100,000 loops to make the difference more obvious, so overall the difference is really negligible

Seconds for 100k Iterations 1 2 3 4
1 0.031170 0.031878 0.024902 0.024054
2 0.030930 0.030899 0.024151 0.024824
3 0.031892 0.032564 0.024174 0.024571
4 0.031654 0.032151 0.024272 0.024191
5 0.031997 0.032264 0.024276 0.028279
6 0.032457 0.032168 0.025079 0.024507
7 0.031413 0.033065 0.026119 0.024145
8 0.033597 0.031588 0.023898 0.024542
9 0.031135 0.031589 0.024536 0.026223
10 0.032207 0.031797 0.025257 0.024338
Average 0.031845 0.031996 0.024666 0.024967

The above result slightly suprised me as I always thought using a single quote would be quicker than a double quote, as a double quote does all the checking for inside variables. So, in conclusion I would concatenate the extra string a string rather that include it in the string. However there are pros and cons for both single and double quotes, In double quotes you can put in line breaks and such (\n) but if you are putting HTML in a PHP string, every tag attribute needs to be escaped, so it may be easier to write it in single quotes. In the future I may investigate the same but with a wider variety of string lengths

2009
08.05

So, this bit of code (Jetlogs.org) is for a check all checkboxes jQuery function. This is the original

$(document).ready(function()
        {
            $("#paradigm_all").click(function()
            {
                var checked_status = this.checked;
                $("input[@name=paradigm]").each(function()
                {
                    this.checked = checked_status;
                });
            });
        });

And This is a checkbox that if you check it all the checkboxes that meet the criteria of the jQuery selector are checked, and unchecked if you click it again. This is a neat function, but maybe you want a seperate ‘Select All’ button and a seperate ‘Select None’ button. You may not, it may not fit in with the style with what you are developing but this is the code

$(document).ready(function(){
	$("button#checkall").click(function(){
		$("#formID input[type=checkbox]").each(function(){
			this.checked = true;
		});
	});
	$("button#checknone").click(function(){
		$("#formID input[type=checkbox]").each(function(){
			this.checked = false;
		});
	});
	$("button#inversecheck").click(function(){
		$("#formID input[type=checkbox]").each(function(){
			this.checked = !this.checked;
		});
	});
});

The last function in this is inverting the checks, i.e. setting each item to the opposite of what it was with the !. All you would need with the above code is 3 buttons with ID checkall,checknone & inversecheck and replace formID with the ID of the form, because you may have other check boxes on the page that don’t need changing. The selector has been slightly altered from the original because jQuery 1.2.x has dropped the @ support (link). It is cross browser as far as I am aware but pelase let me know if any issues and I will look into them

EDIT - demo – jquery_demo_2

2009
08.04

I am sure this isn’t the only version of this, but I did create it using ColorZilla and Google Maps and alot of trial and error, Its not perfect as in google maps when you zoon out some of the colours change, but it is mostly there with what is available. A tip for anyone who wants to clone a map colour scheme into a tomtom map is to set the colours to primary colours and match them as to what colours the roads are on the original and match them up. May do an Ordnance Survey scheme in the future as well.

Google Maps colour scheme (right click, save as)

2009
08.03

Assuming that you have jQuery already plugged into your website, this is a simple bit of javascript to insert a string a the selected text within a textbox. It is fully IE6+, FF2+, Safari, Chrome compatable in the same way jQuery is itself, so here is the javascript to insert a single string at the selected point (or caret). This bit of code has been built on variaas code found at mail-archive.com which is the jQuery adaptation of this bit of code at alexking.org

$.fn.insertAtCaret = function (tagName) {
	return this.each(function(){
		if (document.selection) {
			//IE support
			this.focus();
			sel = document.selection.createRange();
			sel.text = tagName;
			this.focus();
		}else if (this.selectionStart || this.selectionStart == '0') {
			//MOZILLA/NETSCAPE support
			startPos = this.selectionStart;
			endPos = this.selectionEnd;
			scrollTop = this.scrollTop;
			this.value = this.value.substring(0, startPos) + tagName + this.value.substring(endPos,this.value.length);
			this.focus();
			this.selectionStart = startPos + tagName.length;
			this.selectionEnd = startPos + tagName.length;
			this.scrollTop = scrollTop;
		} else {
			this.value += tagName;
			this.focus();
		}
	});
};

All this basically does is depending on the browser, add tagName to the document where the caret is, if it fails to do this it will just append it, so either way the text will be added to the text area. The way to then use this would be

$("button#btnID").click(function(){$('#textareaID').insertAtCaret(':)')});

so when the button with id btnID is clicked, assuming a caret is in the text has been made :) will be inserted into the selection in the element with ID textareaID If no selection has been made, it will append it to the end of the text area, so if the text area is blank it will simply insert it.

This is really useful, but you would probably want to insert around a selection not just overwrite it, so this next function does just that

$.fn.insertRoundCaret = function (tagName) {
	return this.each(function(){
		strStart = '['+tagName+']';
		strEnd = '[/'+tagName+']';
		if (document.selection) {
			//IE support
			stringBefore = this.value;
			this.focus();
			sel = document.selection.createRange();
			insertstring = sel.text;
			fullinsertstring = strStart + sel.text + strEnd;
			sel.text = fullinsertstring;
			document.selection.empty();
			this.focus();
			stringAfter = this.value;
			i = stringAfter.lastIndexOf(fullinsertstring);
			range = this.createTextRange();
			numlines = stringBefore.substring(0,i).split("\n").length;
			i = i+3-numlines+tagName.length;
			j = insertstring.length;
			range.move("character",i);
			range.moveEnd("character",j);
			range.select();
		}else if (this.selectionStart || this.selectionStart == '0') {
			//MOZILLA/NETSCAPE support
			startPos = this.selectionStart;
			endPos = this.selectionEnd;
			scrollTop = this.scrollTop;
			this.value = this.value.substring(0, startPos) + strStart + this.value.substring(startPos,endPos) + strEnd + this.value.substring(endPos,this.value.length);
			this.focus();
			this.selectionStart = startPos + strStart.length ;
			this.selectionEnd = endPos + strStart.length;
			this.scrollTop = scrollTop;
		} else {
			this.value += strStart + strEnd;
			this.focus();
		}
	});
};

Very similar but with slight differences, this would allow for a [b] & [/b] or an [italic] & [/italic] (pretty much anything) to be placed around some text rather than just a single character at the caret. The IE code looks a little messy because it counts a line return \n as a character so it has some funky maths in it. An example of this is:

$("button#bold").click(function(){$('#textareaID').insertRoundCaret('b')});

This would insert [b] at the start of the selection in the text area and a [/b] at the end of the selection in the text area. If no text is selected it would simply append it. So, if you were creating some style box or tinyMCE type thing, you could have something like this:

$(document).ready(function() {
	$("button#smile").click(function(){$('#textareaID').insertAtCaret(':)')});
	$("button#frown").click(function(){$('#textareaID').insertAtCaret(':(')});
	$("button#wow").click(function(){$('#textareaID').insertAtCaret(':O')});
	$("button#bold").click(function(){$('#textareaID').insertRoundCaret('b')});
	$("button#italic").click(function(){$('#textareaID').insertRoundCaret('i')});
	$("button#underline").click(function(){$('#textareaID').insertRoundCaret('u')});
});

EDIT - Added demo file and added missed }; in code – Demo file – jquery_demo_1