What’s the link already?
Here you go Jack: Selctivizr

Shout out to our kid Tony and good luck to him and his latest baby – an online platform for Illustrators: the artfuls

1. makes sure all input is cleaned and sanitized to avoid nasty things being done on/to your server
2. checks for errors in the data without discarding the well formed data
3. uses some form of CAPTCHA to keep those spam bots at bay
4. sends email through an authorised SMTP email account (Gmail, for example, will either mark as spam or simply not accept mail that isn’t)

Other nice things to consider would be nice, cross-browser (HTML5) placeholder text (that doesn’t get submitted).

Finding a PHP web form framework

Last time I set up a form was a while ago – I’ve been doing mostly WordPress sites (or other CMS work) recently and have found the premium Gravity forms plugin for WordPress to work a treat. Anyway, cut to the chase already… the old script I had used  failed on points 3 & 4 above I’d like to say I can lean on PEAR PHP (which is already on my webserver) but I’m really not a programmer. I found a solution in the excellent PHP form “library” from Dagon Design. I’d never heard off it but it’s the first serious result for “PHP form script” in Google at the moment – so it  must at least be popular. More importantly it ticks all the boxes above (plus much more) and is well documented. Go get it. The only thing it doesn’t do is verify numerical input.

There’s no need for me to go into the setup at all – it is very well documented – just spend a half hour or so to read through it.

Adding placeholder text to the form framework

All I have to add is that I’ve edited the script a bit to set default text as HTML5 placeholder text (and remove default text from text inputs). The form is run in conjunction with Daniel Stocks’ HTML5 Placeholder Plugin for jQuery to make sure that the placeholder text works with IE etc.

To get the placeholder text working I changed the last few lines of the  below (from 754):

function ddfm_gen_text($item) {

	// type=text|class=|label=|fieldname=|max=|req=(TRUEFALSE)|[ver=]|[default=]

	global $form_submitted, $form_input, $show_required;

	$req_text = (($show_required) && ($item['req'] == 'true')) ? '<span class="required">' . DDFM_REQUIREDTAG . '</span> ' : '';

	$gen = "";
	$gen .= '<p class="fieldwrap"><label for="' . $item['fieldname'] . '">' . $req_text . $item['label'] . '</label>';
	$gen .= '<input class="' . $item['class'] . '" type="text" name="' . $item['fieldname'] . '" id="' . $item['fieldname'] . '" value="';

	if ($form_submitted) {
		$gen .= ddfm_bsafe($form_input[$item['fieldname']]);
	} else if (isset($item['default'])) {
		$gen .= ddfm_bsafe($item['default']);
	}

	$gen .= '" /></p>' . "\n\n";

	return $gen;
}

to:

	if ($form_submitted) {
		$gen .= ddfm_bsafe($form_input[$item['fieldname']]);
	}

	$gen .= '" placeholder="' . ddfm_bsafe($item['default']) . '" /></p>' . "\n\n";

	return $gen;

So what’s all the fuss about – well you can see the version I worked on, in action, as part of a website for this fancy (in the good sense) hair salon in Fuengirola…

<?php wp_head(); ?>

before any jQuery scripts (or concatenated scripts in my case).

It’s been hours and I couldn’t figure out why none of the Carousel scripts I was trying today wanted to work – while all other scripts and plugins carried on just fine.

And yes – I am already trying to prevent jQuery conflicts with

<?php wp_enqueue_script("jquery"); ?>

So if your carousel (or other) scripts don’t want to work – try shaking up your head.

Main contenders:

1. for jQuery: jquery.corner.js from rc.rctonline.nl
2. for jQuery: jquery.corner.js from malsup.com
3. for jQuery: cornerz
4. stand alone: curvycorners

Using #1 at the moment. Would like to try them all again in the light of the IE8 workaround below. Gotta say I now think #3 (cornerz) looks most promising in terms of size and ability. Going to have another look to see which ones look to CSS first (for those browsers that are modern – and not Internet Explorer) before turning to JavaScript.

Problem with most of these is IE8 doesn’t play nice… fix seems simply to add the behave like IE7 meta tag: <tt><meta http-equiv=”X-UA-Compatible” content=”IE=EmulateIE7″ /></tt>

First impressions:

1. good, non-transparent outside corner
2. good,
3. throws errors in IE7, non-transparent outside corner
4. slow in IE,

It took a kick from outside (“your site x sucks HTTP requests and bandwidth”) to realise things were going downhill.

So – with the help of the good folk at Yahoo YSlow and the new copy-cat-kid on the block (Google Page Speed) with their plug-ins for a plug-in(firebug) for Firefox [oh the irony]… I’ve started to get things in line again.

Both YSlow and Page Speed have helpful links and information once called – and now I can pat myself on the back for having improved my YSlow scores from an ‘F’ to a ‘B’. Wetware heh.

Main issues I was able were too fix were too many HTTP requests and a lack of explicit caching direction from the web server. Nextly I’ll be looking at getting interface elements into a sprites for future jobs. (Must take this sprite/CSS creation tool for a spin. Looks absolutely fab.)

Reduce HTTP requests

While combining CSS files is trivial, combining a bunch of disparate JS files into one is not painless – I’ve had to drop a jQuery tooltip plug-in as it wouldn’t play nice when bundled up with its playground compatriots.

Server side caching and compression

is achieved the following htaccess rules:

##Cacheing static components

FileETag none
Header unset Etag

# Far future 1 YEAR
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4|css|js)$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>
<FilesMatch "scripts.inc.php$">
Header set Expires "Thu, 15 Apr 2010 20:00:00 GMT"
</FilesMatch>

# Past last modified
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|swf|mp3|mp4|css|js)$">
Header set last-modified "Sun, 13 Jul 2008 20:00:00 GMT"
</FilesMatch>
<FilesMatch "scripts.inc.php$">
Header set last-modified "Sun, 13 Jul 2008 20:00:00 GMT"
</FilesMatch>

#Compress
<IfModule mod_deflate.c>
<FilesMatch "\.(js|css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Shadowbox woes

I now may be on the lookout for a replacement to Shadowbox. Shadowbow v2 was great – it came with lots of build options and could be explicitly launched by jQuery on Document Ready. v2 wasn’t IE8 compatible however – forcing an upgrade to v3 – still in beta… Ho hum. This required an updated version of the JW FLV media player which I’m not mad keen on – and that needs a new licence. While Shadowbox is now very clever and can automatically find it’s own dependencies – it has many of these – each one with an HTTP request. While it is easy to combine the whole bundle into a single file its something I’d rather not have to do/keep track of – I’ve already got a rod for my back with the other jQuery plugins…

Shadowbox

Tooltip

highlightFade

http://jquery.offput.ca/highlightFade/old.php

jquery.validate.js

Lovely, lightweight carousel:
http://www.gmarwaha.com/jquery/jcarousellite/

http://www.noupe.com/jquery/50-amazing-jquery-examples-part1.html

http://www.jasonbradbury.com/

The Contenders

Slimbox

The true successor to the king (Lightbox). This is the chosen one. Very lightweight, simple instructions, does what it says on the tin. Simple instructions for when I’ve forgotten in two weeks are further down…

Shadowbox.js

This one seems to be the current best in breadth of options but too much to read for a low level webdev monkey like me.

Lightbox

The original – but perhaps no longer the beast.

Thickbox

Could have been a contender but I balked at the heavy graphic design.

FancyZoom

The one that started the search thanks to seeing it in action at this FontFeed article. Great tool – but as a webdev guerilla [read chimp] the commercial licence stopped me. Need a bit of slack before I can convince anybody to pay…

Slimbox walk-through

Upload css and js files – add these three lines of code to the head of the HTML:

<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/slimbox.js"></script>
<link rel="stylesheet" href="css/slimbox.css" type="text/css" media="screen" />

(The last slash there may want removing according to your doctype. Are you strict enough for it?)
Then craft the images links like this for single images

<a href="" rel="lightbox" title=""><img src="" alt="" /></a>

or, for sets, like this (where the rel attribute has the set name’s suffix)

<a href="" rel="lightboxset" title=""><img src="" alt="" /></a>