CastlesBlog

Get mySQL Enumeration Values as an Array

Mon, 30 Aug 2010 13: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 14: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.

Download

Version 1

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 10: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 12: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 02: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 08: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 14: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.

Cookieless Domain

Sat, 27 Feb 2010 04:52:10 +0000

Update

There has been a few updates to the new template to fix some errors plus I've given Opera some love. The CSS background gradient is the only feature missing from Opera and while I could get it working with a background image the alternative looks fine. I'm sure the folks at Opera are working on CSS gradient support and it will be available soon.

PageSpeed & Yslow

One of the main features I want to highlight with CastlesBlog is speed. I found the results were pretty good after inspecting PageSpeed and Yslow but there were a few optimisations that could be made.

Tip: PageSpeed and Yslow are fantastic Firebug addons and are great tools if you want to dig deep into a websites rendering speed.

The main issue that they highlighted was to put my static content on a cookieless domain. I've never done anything like this before and I didn't even know what cookieless domain was. Read about it here. After a bit of investigating I think I worked it out. Here is my understanding: When you create a cookie on a site the cookie information is transmitted and received with every request. That means every image, css or javascript file that doesn't actually need the information will get it and send it. Now I know your thinking that fairly trivial as cookies are generally tiny and not worth the hassle. I agree! Especially on this site which doesn't get the amount of traffic or have enough resources to warrant such optimisations. The problem for me was that I was intrigued and that sent me on a journey to work out how to actually get a cookieless domain working.

From what I read you can avoid sending cookies if you setup a separate domain or CNAME and serve the content from there.

Tip: I found myself using cookies and I didn't even know it. Calling session_start(); in php will set a PHPSESSID cookie.

What is a CNAME?

From Wikipedia:

A CNAME record or Canonical Name record is a type of resource record in the Domain Name System (DNS) that specifies that the domain name is an alias of another, canonical domain name.

So basically I could setup a CNAME that points to www.castlesblog.com and serve static resources from there. I wouldn't have to change the structure of my site and old content would still work fine. Sounds good to me.

To setup in Plesk I did the following:

Click on DNS Settings
Click Add Record
Select CNAME record type
Enter the domain name I wanted to use. I chose to use "static" (static.castlesblog.com)
Finally, enter the canonical name of the domain. For me I used www.castlesblog.com
Click Ok and then Save

One other thing I needed to do to get this to work in Plesk was to create a vhost.conf file in the domain conf directory (/var/www/vhosts/castlesblog.com/conf/vhost.conf) with the following content: "ServerAlias static.castlesblog.com" then reconfigure that domain:

/usr/local/psa/admin/sbin/websrvmng --reconfigure-vhost --vhost-name=castlesblog.com

The last thing I needed to do was update all my posts and html links to the static domain. For example the following:

<img src="/data/img1.jpg" />

would become:

<img src="http://static.castlesblog.com/data/img1.jpg" />

To prevent people browsing the secondary domain I setup a .htaccess redirect to redirect any non file requests to the proper domain. The code looks like this:

# cookieless domain for images and stuff
RewriteCond %{HTTP_HOST} ^static\.castlesblog\.com [NC]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^(.*)$ http://www.castlesblog.com/$1 [R=301,L]

Serve dynamic-static files

One final optimisation was to serve javascript as one file to save browser requests. I like to separate javascript files so that it obvious what is in them so I wasn't going to move all the javascript into one file. I managed to get the merge working with the following code:

<?php
$offset = 60 * 60 * 24 * 7; // Cache for 1 weeks
header('Content-type: application/x-javascript');
header('Accept-Ranges: bytes');
header ('Cache-Control: max-age=' . $offset);
header ('Expires: ' . gmdate ("D, d M Y H:i:s", time() + $offset) . ' GMT');
header ('Pragma: cache');

if(!ob_start("ob_gzhandler")) ob_start();

include('../javascript/jquery-1.4.2.min.js');
include('../javascript/jquery.easing.js');
include('../templates/castlesblog/template.js');

When a site needs a new javascript file I will include it in this file and the php will do the rest.

To make the script tag look like this:

<script src="http://static.castlesblog.com/javascript/scripts.js" type="text/javascript"></script>

I added the following to the .htaccess:

#compile all scripts into one file...
RewriteRule ^javascript/scripts.js$ includes/scripts.php [L]

Final Test

To see if this works I will include the same file from two different domains. This first file should have cookies and the second should not.

And the results are in.. I think they speak for themselves:

New Template

Mon, 18 Jan 2010 00:09:23 +0000

Over the last month or so I've been putting together a new template for this site. It's not quite finished yet but I thought its better to release it at its current stage (Otherwise it will be another month before an update). The most notable features are:

HTML5 compliant
CSS3 Gradients
CSS3 rounded corners + rgba colours
Mobile device support (only tested on my iPhone)
@font-face for the title

Surprisingly it looks alright in older browsers.... and cough.. IE. Internet Explorer manages a gradient behind the menu buttons via the use of a css expression.

MythTV Pre-Shutdown script

Fri, 1 Jan 2010 07:08:07 +0000

Just like my previous post this is here so I won't forget how I setup my MythTV pre shutdown script. This will check for netatalk connections, terminal (via ssh or locally) or if transmission is open.

Script file: /usr/bin/mythpreshutdown.sh

#!/bin/sh

logfile=/var/log/mythtv/mythpreshutdown.log
echo `date` > $logfile

ps_afpd=`ps axo euid,comm,user | grep afpd | grep -v -c root`
ps_who=`who | grep -c pts`
ps_transmission=`ps aux | grep transmission | grep -v -c grep`

SD=0

if [ $ps_who != 0 ]; then
  echo "user logged in" >> $logfile
  SD=1
fi

if [ $ps_afpd != 0 ]; then
  echo "afpd connection exists" >> $logfile
  SD=1
fi

if [ $ps_transmission != 0 ]; then
  echo "transmission running" >> $logfile
  SD=1
fi

exit $SD