CastlesBlog

Gravatar Support

Mon, 3 Jan 2011 13:13:17 +0000

Just a quick post to say I've added Gravatar support to the comments. Its something I've had on my list for ages. If you don't know what it is the Gravatar site explains it well..

Your Gravatar is an image that follows you from site to site appearing beside your name when you do things like comment or post on a blog. Avatars help identify your posts on blogs and web forums, so why not on any site?

This site will load the avatars after the content thanks to this great article on 24ways.org

Launch Interactive

Sun, 2 Jan 2011 11:47:14 +0000

Something I really should of posted a few months ago was the fact that I was leaving my previous work to start my own business.. Launch Interactive. Currently, I'm focusing on Web Development, Hosting and whatever else in between. So far I've been flat out working on a large Flash project, a few content managed sites and various other jobs.

The Launch site is currently in development but check out the splash page in the interim. If your browser supports canvas you will get some nice snow to have a play with. The snow interacts with your mouse cursor and you can shift the direction of the wind. Its the first time I've played with canvas and I'm pretty happy with the results however, performance could be better as I found rendering 100 or so rotating images at 25FPS can bog down some browsers. If anyone has any suggestions on how I can improve this I'm all ears.

And, finally.. if you need any work done don't hesitate to check me out...

How to setup a signature in Apple Mail

Thu, 30 Dec 2010 22:56:42 +0000

One of my pet hates is people who don't send a signature with their email. A basic signature is not hard to do and makes it easier for recipients. I'm going to explain how I setup my signature in Apple Mail which is a bit of work but the result is worth it.

Firstly, open up Mail and goto Mail -> Preferences -> Signatures. Hit the plus sign and create a signature. Apply the signature to your email account by the choose signature drop down. If your happy with the result than skip the rest.

Why am I always sending attachments?

Here is the catch.. if you insert an image in the signature editor such as a logo Mail will send the image as an attachment for every email you send, including reply's. Sure, its only a small file but if you reply to a reply's reply.. you get the point, there can be a lot of wasted bandwidth.

What I like to do is upload the signature image (remember to compress it for web) onto a web server and link to it within Mail. Easy enough.. well not really. Mail makes it hard to link to the file (Its just as hard in Outlook). Your going to have to get your hands dirty writing some HTML code. Open up textedit (in plain text mode) or something similar and code up your signature. Link the img tag to your remote location. Preview in Safari as you go. Here is an example of my Launch signature:

Example HTML Signature

<div style="font-family:arial, helvetica;font-size:12px;color:#000">
<br/>Kind Regards,<br/>
<br/>
<span style="font-size:14px">Marc Castles</span><br/>
<table border="0" cellpadding="0" cellspacing="0" style="margin-top:10px"><tr><td>
<img src="http://launchinteractive.com.au/launch-interactive-signature.png" alt="Launch Interactive" width="200" height="110" /><br/>
</td><td style="font-family:arial, helvetica;font-size:12px;color:#666"><div style="border-left:1px dashed #CCC;padding-left:20px">0421636775<br/>
<a style="color:#666" href="http://launchinteractive.com.au">launchinteractive.com.au</a><br/>
<address style="padding:0px;color:#666;font-style:normal;margin:0px">PO Box 2272, Bakery Hill Mail Centre, Ballarat Victoria 3354</address>
<a style="color:#666" href="http://twitter.com/launchinteract">@launchinteract</a><br/>
<a style="color:#666" href="http://www.facebook.com/launchinteractive">www.facebook.com/launchinteractive</a></div>
</td></tr></table>
</div>

Notice all the inline css and table junk. This is because email clients are stuck in the dark ages and support is terrible... if any. A good reference for email support can be found here

Once you are happy with your HTML preview the signature in Safari and goto Save As and save it as a Web Archive. Navigate to ~/Library/Mail/Signatures (/Users/[Your Account Name]/Library/Mail/Signatures) and replace the Web Archive in that folder (this will be the signature you created earlier). If you need to preview the signature open the Web Archive in Safari.

Close and Open Mail and you should have your new signature at your disposal. Here is my finished result:

Get mySQL Enumeration Values as an Array

Mon, 30 Aug 2010 12:02:51 +0000

I often use enumeration values when defining a list of options in mySQL. In the past I would make sure my web form matched my database and update each form when I change the database.... but not any more.. I've written a quick function that will return the possible values from mySQL as an array. I can then use the result in my forms and the only place that needs to change is the database.

function getEnums($table,$field) {
	$sql = "SELECT
			COLUMN_TYPE
		FROM 
			INFORMATION_SCHEMA.COLUMNS
		WHERE
			TABLE_NAME = '$table'
			AND COLUMN_NAME = '$field'";

	$this->query($sql);

	preg_match_all('/\'(.[^\']+)\'/',$this->get('COLUMN_TYPE'),$matches);

	return $matches[1];
}

I'm using this in my database class. Modify it to suit your needs.

MythTV Minimal OSD

Sun, 29 Aug 2010 13:04:25 +0000

A new theme

Presenting a new OSD theme for Mythtv .23. Designed to be a minimalistic theme that covers up the smallest amount of picture.

Minimal is built for 16:10 screens and I don't really have any plans to make a 16:9 version. If your after a different aspect ratio post a comment and I might think about it. Tom Sneyers liked Minimal so much that he has made a 16:9 version. Visit his site to download.

Download

Please Note

This has only been tested in MythTV .23 - The OSD theming for OSD's has changed significantly in .24 and hence this will probably break when its released. I intend to update this theme as well as my Glass theme when .24 is available.

Screenshots

Using PHP to minify Javascript and CSS

Sat, 14 Aug 2010 09:52:25 +0000

An Update to the Dynamic Javascript include

Back in February I wrote the code to combine all the javascript into one file with the intention to limit the requests to the server as recommended by PageSpeed and YSlow. I have revisited this code to make it do a few extra things:

Checks which file was last edited and returns a Not Modified header if applicable
Minification (white space removed)
Links to Google's CDN for jQuery and fall back to a local version

So lets look at the new script...

<?php

$files = array(
    
    '../javascript/jquery.easing.js'
    
    ,'../templates/castlesblog/template.js'

);
    
$modified = 0;

foreach($files as $file) {        
    $age = filemtime($file);
    if($age > $modified) {
        $modified = $age;
    }
}

$offset = 60 * 60 * 24 * 7; // Cache for 1 weeks
header ('Expires: ' . gmdate ("D, d M Y H:i:s", time() + $offset) . ' GMT');

if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) >= $modified) {
    header("HTTP/1.0 304 Not Modified");
    header ('Cache-Control:');
} else {
    header ('Cache-Control: max-age=' . $offset);
    header ('Content-type: text/javascript; charset=UTF-8');
    header ('Pragma:');
    header ("Last-Modified: ".gmdate("D, d M Y H:i:s", $modified )." GMT");
    
    function compress($buffer) {
        /* remove comments */
        $buffer = preg_replace("/((?:\/\*(?:[^*]|(?:\*+[^*\/]))*\*+\/)|(?:\/\/.*))/", "", $buffer);
        /* remove tabs, spaces, newlines, etc. */
        $buffer = str_replace(array("\r\n","\r","\t","\n",'  ','    ','     '), '', $buffer);
        /* remove other spaces before/after ) */
        $buffer = preg_replace(array('(( )+\))','(\)( )+)'), ')', $buffer);
        return $buffer;
    }
    
    ob_start('ob_gzhandler');

        foreach($files as $file) {
            if(strpos(basename($file),'.min.')===false) { //compress files that aren't minified
                ob_start("compress");
                    include($file);
                ob_end_flush();
            } else {
                include($file);
            }
        }
    
    ob_end_flush();
}

Explanation

Firstly, you will see an array of javascript files to include. It loops through each one to work out which is the newest.
The next two lines set a header that should cache the file for one week.
After that we work out if the modified date is newer than what the browser has in cache and if so return the Not Modified header.
Alternatively if the file is modified or new to the browser it sets/resets a few more headers and then loops through our array again and includes the code.

I've wrapped the include in two ob_start methods. The first one gzips the output and the second runs the defined compress function.

It will only run the compress on files that don't have .min. in the filename. This was added because the compress function messes up scripts that are already minified such as jQuery. The compress function uses a few regular expressions for the minification. Suggestions on how to improve this is welcome.

A few things to note

Using Yahoo's YUI Compressor or Google's Closure Compiler will do a better job. The advantage of this is there is less work involved in compressing the files. All you need to change when adding a new script is the array.
The regular expressions can break the javascript if there is a double forward slash in the code (URLs etc). The fix is to escape the slashes.. htt:\/\/www.url...

CSS Minification

The CSS is using a similar minification process.

<?php

$files = array(
    
    '../templates/castlesblog/template.css'

);
    
$modified = 0;

foreach($files as $file) {        
    $age = filemtime($file);
    if($age > $modified) {
        $modified = $age;
    }
}

$offset = 60 * 60 * 24 * 7; // Cache for 1 weeks
header ('Expires: ' . gmdate ("D, d M Y H:i:s", time() + $offset) . ' GMT');

if (isset($_SERVER['HTTP_IF_MODIFIED_SINCE']) && strtotime($_SERVER['HTTP_IF_MODIFIED_SINCE']) >= $modified) {
    header("HTTP/1.0 304 Not Modified");
    header ('Cache-Control:');
} else {
    header ('Cache-Control: max-age=' . $offset);
    header ('Content-type: text/css; charset=UTF-8');
    header ('Pragma:');
    header ("Last-Modified: ".gmdate("D, d M Y H:i:s", $modified )." GMT");
    
    function compress($buffer) {
        /* remove comments */
        $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
        /* remove tabs, spaces, newlines, etc. */
        $buffer = str_replace(array("\r\n","\r","\n","\t",'  ','    ','     '), '', $buffer);
        /* remove other spaces before/after ; */
        $buffer = preg_replace(array('(( )+{)','({( )+)'), '{', $buffer);
        $buffer = preg_replace(array('(( )+})','(}( )+)','(;( )*})'), '}', $buffer);
        $buffer = preg_replace(array('(;( )+)','(( )+;)'), ';', $buffer);
        return $buffer;
    }
    
    ob_start('ob_gzhandler');

        foreach($files as $file) {
            if(strpos(basename($file),'.min.')===false) { //compress files that aren't minified
                ob_start("compress");
                    include($file);
                ob_end_flush();
            } else {
                include($file);
            }
        }
    
    ob_end_flush();
}

Changes to .htaccess

To make nice urls to these files the following is added to the .htaccess

RewriteRule ^scripts.js$ includes/scripts.php [L]

RewriteRule ^styles.css$ includes/styles.php [L]

Use Google's CDN for jQuery

One final change was to remove jQuery from the included scripts and use Google CDN version.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script>!window.jQuery && document.write('<script src="js/jquery-1.4.2.min.js"><\/script>')</script>

Here is a few reasons why this is a good idea.

Cross Domain Fonts in Firefox

Thu, 12 Aug 2010 11:54:43 +0000

Today I realised that @font-face wasn't working properly in Firefox because I'm linking to the resource on a different domain (see cookieless domain post). It appears that Firefox has cross-site permissions that prevent resources being read. To allow remote access all I needed to add to the .htaccess on the server thats hosting the fonts was:

<FilesMatch "\.(ttf|otf|eot|woff)$">
    <IfModule mod_headers.c>
        Header set Access-Control-Allow-Origin "http://castlesblog.com"
    </IfModule>
</FilesMatch>

For more information checkout the HTTP access Control article at the Mozilla Dev Center.

HTML5 Drag and Drop Upload

Tue, 13 Jul 2010 01:23:06 +0000

I've been playing around with drag and drop in HTML5 and I'm pretty excited about it. A lot of the examples I've found online are firefox specific which isn't ideal so I've come up with a solution that works in as many browsers as possible.

Browser Support

Support for drag and drop & the file API is limited to cutting edge browsers and as the spec isn't finalised features are inconsistent... to say the least.

I've come up with a solution thats tested and works in Firefox 3.6, Safari 5, Chrome 6 and Webkit. I'll be adding support for Opera and IE if/when its available.

What I've discovered:

SAFARI 5 doesn't support FileReader
Only Firefox 3.6 supports addEventListener on FileReaders
Only Firefox 3.6 supports sendAsBinary in XML Http Requests

Because of these issues I've coded three ways to upload files.

Browsers that support sendAsBinary send the data using proper headers and PHP can easily read the $_FILES array
Browsers that support FileReader send the file as base64 encoded string. The file information is passed in via headers
Browsers that don't support FileReader send the file itself and is read the same way as no. 2

The Code

So, without any further ado, here is a demo. And here is the code:

<?php
$upload_folder = 'data';

if(count($_FILES)>0) { //browser supported sendAsBinary()
	if( move_uploaded_file( $_FILES['upload']['tmp_name'] , $upload_folder.'/'.$_FILES['upload']['name'] ) ) {
		echo 'done';
	}
	exit();
} else if(isset($_GET['up'])) {

	if(isset($_GET['base64'])) {
		$content = base64_decode(file_get_contents('php://input'));
	} else {
		$content = file_get_contents('php://input');
	}

	$headers = getallheaders();
	
	$headers = array_change_key_case($headers, CASE_UPPER); //different case was being used for different browsers
	
	if(file_put_contents($upload_folder.'/'.$headers['UP-FILENAME'], $content)) {
		echo 'done';
	}
	exit();
}
?>
<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <title>HTML5 Upload Demo</title>
    
    <style>
    body{font-family:Helvetica,Arial;font-size:12px}
	#drop-area{border:2px solid black;padding:10px;background-size:contain;min-height:200px;overflow:auto}
	#drop-area.hover{border:2px dashed red}
	#drop-area div{width:150px;height:150px;border:1px solid #CCC;font-size:.5em;padding:5px;background-position:center;background-repeat:no-repeat;background-size:contain;float:left;margin:10px;word-wrap:break-word}
	#status {background-color:black;color:white;padding:5px 20px;margin-bottom:10px}
	</style>
    
	<!--[if lt IE 9]>
	<script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script>
	<![endif]-->
	
	<script src=http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js></script>
</head>

<body>

<div id=status>Drag and Drop files to begin...</div>
<div id=drop-area></div>

<script>

var up = {
	
	$drop :			null,
	queue :			[],
	processing :	null,
	uploading :		false,
	binaryReader :	null,
	dataReader :	null,
	xhr:			null,

	init : function() {
		up.$drop = $('#drop-area');
		
		up.$drop.bind('dragenter',up.enter);
		up.$drop.bind('dragleave',up.leave);
		up.$drop.bind('dragover',up.over);
		up.$drop.bind('drop',up.drop);
		
		$('#status').click(up.cancel);
		
		up.xhr = new XMLHttpRequest();
		up.xhr.upload.addEventListener('progress', up.uploadProgress , false);
		up.xhr.upload.addEventListener('load', up.uploadLoaded , false);
		
	},
	
	enter : function(e){
		$(e.target).addClass('hover');
		return false;
	},
	
	leave : function(e){
		$(e.target).removeClass('hover');
		return false;
	},
	
	over : function(e){
		return false;
	},
	
	drop : function(e){
		$(e.target).removeClass('hover');
		
		var files = e.originalEvent.dataTransfer.files;
		for (var i = 0; i<files.length; i++) {
			var file = files[i];
			up.queue.push(file);
		}

		if(up.uploading == false) {
			up.uploading = true;
			up.process();
		}
		
		return false;
	},
	
	process : function() {
		up.processing = up.queue.shift();
		
		up.$drop.append('<div>'+up.processing.name+'</div>');
		
		if(window.FileReader) { //firefox 3.6, Chrome 6, Webkit

			if(up.processing.type.match(/image/gi) != null) { //is an image - read it
				up.dataReader = new FileReader();
				if(up.dataReader.addEventListener) { //firefox
					up.dataReader.addEventListener('loadend', up.binaryLoad, false);
					up.dataReader.addEventListener('error', up.loadError, false);
					up.dataReader.addEventListener('progress', up.loadProgress, false);
				} else { //chrome / webkit
					up.dataReader.onloadend = up.binaryLoad;
					up.dataReader.onerror = up.loadError;
					up.dataReader.onprogress = up.loadProgress;
				}
				up.dataReader.readAsDataURL(up.processing);
			}
			
			up.binaryReader = new FileReader();
			if(up.binaryReader.addEventListener) { //firefox
				up.binaryReader.addEventListener('loadend', up.binaryLoad, false);
				up.binaryReader.addEventListener('error', up.loadError, false);
				up.binaryReader.addEventListener('progress', up.loadProgress, false);
			} else { //chrome / webkit
				up.binaryReader.onloadend = up.binaryLoad;
				up.binaryReader.onerror = up.loadError;
				up.binaryReader.onprogress = up.loadProgress;
			}
			up.binaryReader.readAsBinaryString(up.processing);
			
			
		} else { // safari 5 + others?
		
			up.xhr.abort(); //make sure xhr is a new request
			up.xhr.open('POST', '/html5_upload.php?up=true', true);
		
			up.xhr.setRequestHeader('UP-FILENAME', up.processing.name);
			up.xhr.setRequestHeader('UP-SIZE', up.processing.size);
			up.xhr.setRequestHeader('UP-TYPE', up.processing.type);
			
			up.xhr.send(up.processing); 
			up.xhr.onload = up.onload;
		}
		
	},
	
	loadError : function(e) {
		switch(e.target.error.code) {
			case e.target.error.NOT_FOUND_ERR:
				alert('File Not Found!');
			break;
			case e.target.error.NOT_READABLE_ERR:
				alert('File is not readable');
			break;
			case e.target.error.ABORT_ERR:
			break; 
			default:
				alert('An error occurred reading this file.');
		};

	},
	
	loadProgress : function(e) {
		if (e.lengthComputable) {
			var percentage = Math.round((e.loaded * 100) / e.total);
			$('#status').html('loaded: '+percentage+'%');
		}
	},
		
	binaryLoad : function(e) {
		
		var isimage = (up.processing.type.match(/image/gi)!=null);
		if( isimage && up.dataReader.readyState == 2 && up.$drop.find('div:last').css('background-image')=='none') {
			up.$drop.find('div:last').css('background-image','url(' + up.dataReader.result + ')');	
		}
		
		if(isimage && up.dataReader.readyState == 2 && up.binaryReader.readyState == 2 || !isimage && up.binaryReader.readyState == 2 ) {
			
			up.xhr.abort(); //make sure xhr is a new request
			
			var binary = e.target.result;
			
			if(up.xhr.sendAsBinary != null) { //firefox
			
				up.xhr.open('POST', '/html5_upload.php?up=true', true);
	
				var boundary = 'xxxxxxxxx';
			    
				var body = '--' + boundary + "\r\n";  
				body += "Content-Disposition: form-data; name='upload'; filename='" + up.processing.name + "'\r\n";  
				body += "Content-Type: application/octet-stream\r\n\r\n";  
				body += binary + "\r\n";  
				body += '--' + boundary + '--';  
			    
			    up.xhr.setRequestHeader('content-type', 'multipart/form-data; boundary=' + boundary);
			    up.xhr.sendAsBinary(body);        	
			    
		    } else { //for browsers that don't support sendAsBinary yet
			 
			 	up.xhr.open('POST', '/html5_upload.php?up=true&base64=true', true);
			 
			 	up.xhr.setRequestHeader('UP-FILENAME', up.processing.name);
			 	up.xhr.setRequestHeader('UP-SIZE', up.processing.size);
			 	up.xhr.setRequestHeader('UP-TYPE', up.processing.type);
			 	
				up.xhr.send(window.btoa(binary)); 
		    }
			 
			up.xhr.onload = up.onload;
			
		}
	},
	
	uploadProgress : function(e) {
		if (e.lengthComputable) {
			var percentage = Math.round((e.loaded * 100) / e.total);
			$('#status').html('uploaded: '+percentage+'%');
		}
	},
	
	uploadLoaded : function(e) {
		$('#status').html('Uploaded: 100%');
	},
	
	onload : function (e) {
		if(up.queue.length > 0) {
			up.process();
		} else {
			up.uploading = false;
			$('#status').html('Queue Uploaded');
		}
	},
	
	cancel : function(e) {
		if(up.dataReader) {
			up.dataReader.abort();
		}
		if(up.dataReader) {
			up.binaryReader.abort();
		}
		if(up.xhr) {
			up.xhr.abort();
		}
		up.uploading = false;
		up.queue = [];
		up.processing = null;
		$('#status').html('Drag and Drop files to begin...');
		return false;
	}

}

$(up.init);

</script>
</body>
</html>

To keep it simple there is no size or filetype limit but could be added fairly easily. If the browser has FileReader support and the dropped file is an image it will read contents and display a preview.

If you have any questions please post them in the comments.

References

Same name cookie with a different path

Sun, 21 Mar 2010 07:39:17 +0000

I've been having mixed results setting and retrieving cookies with the same name and different paths. A cookie set with a path of "/" is accessible anywhere within a site. I wanted my cookies to be different depending on the URL. My solution is to name cookies in the root of a website different to the rest. Pretty simple really, just took me far too long to work this out.

var cookie_name = 'my_great_cookie';
if(document.location.pathname == '/') {
    cookie_name = 'root_' + cookie_name;
}
//set/retrive cookie here

Feed Icon

Mon, 8 Mar 2010 13:39:14 +0000

I've made a few tweaks to the castlesblog template. Images now have padding and margins and headings look a bit neater.

You might also notice I added a feed icon to the top right. If your browser supports it there is a CSS rotation on it to it to make it a bit interesting. If its not rotated this is what you are missing out on...

As far as I know the rotation works in Firefox, Safari, Chrome and Opera. The CSS to do it is fairly simple:

-o-transform:rotate(-15deg); /*OPERA*/
-moz-transform:rotate(-15deg); /*MOZILLA*/
-webkit-transform:rotate(-15deg); /*WEBKIT*/

Update 14th March 2010

I've just discovered you can rotate elements in IE using pure CSS... firstly a much simpler way of rotating is using the rotation property filter but it only allows 90 degree increments. Thanks to this matrix calculator by robertc it now works using the Matrix filter. The catch is the origin of rotation is different in IE so I have setup a new conditional stylesheet for IE that sets a different margin and included all IE specific CSS there.