CastlesBlog

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*/

Cookieless Domain

Sat, 27 Feb 2010 03: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

Sun, 17 Jan 2010 23: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 06: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

Ubuntu Wake on Lan (WOL)

Wed, 30 Dec 2009 14:37:45 +0000

This post is written so that I won't forget how I got WOL working with my Asus motherboard and Mythbuntu (Karmic Koala).

Ensure WOL is enabled in BIOS. For the Asus P5KC motherboard setting "Power On By PCIE Devices" to Enabled worked for me.

Create wakeonlanconfig in /etc/init.d/ with the following contents:

#!/bin/bash
ethtool -s eth0 wol g
exit

Set permissions:

chmod a+x wakeonlanconfig

Make the script start on boot:

update-rc.d -f wakeonlanconfig defaults

Make sure there are no errors:

/etc/init.d/wakeonlanconfig

Port forward port 9 over UDP on my router to 192.168.1.255 (this broadcasts on my D-Link DSL-2740B)

and test with:

wakeonlan -i <HOME IP ADDRESS> <MYTHTV MAC ADDRESS>

*Note* most of this is lifted from Chris Tucker's post on the ubuntu forums

MythTV Glass OSD

Mon, 30 Nov 2009 12:17:45 +0000

Last weekend I was thinking about creating my own MythTv theme. Rather than diving in the deep end I thought I would begin with an OSD theme. (OSD themes are overlay themes for video playback)

I have called my new theme Glass and it is based on Black Curves. I have been using it successfully for the last week but there is a few glitches with the alignment of images in the edit dialog. I spoke to a few people via IRC who said that the OSD is currently undergoing a re-write. I may take another look at this when .23 is released.

The direction I took with this theme was to be simple, elegant and not to get in the way. I have made it freely available (GPL etc etc). ~~Download it here~~ Version 1.1 available here (includes a few minor tweaks and fixed layout of recording editing)

Here are a few screenshots of it in action:

If you have any comments or suggestions please post below. In particular.. would you like to see this style carried out to a full blown myth theme?

Also, In building this theme I've come up with a few ideas for another one that I might start working on over the next few weeks. Stay tuned.

Ballarat Renovations

Fri, 2 Oct 2009 02:50:48 +0000

Once again its been a long time between posts. I've been working on the forms class for this site and I think I'm about ready to start on integrating it.

In the meantime I thought I would share a link to a site I've whipped up. Its very basic and primary purpose is to promote Ballarat Renovations. If you are in the Ballarat region and need some renovation work done check it out... http://www.ballarat-renovations.com.au

Heading Animation

Wed, 1 Jul 2009 02:12:18 +0000

On the CastlesBlog template the headings now animate when you press previous or next. I'm using the jQuery easing class to make it look smooth.

I've also set a min-height for the container as it was jumping up and down a bit.

Ajax Homepage

Tue, 30 Jun 2009 13:12:33 +0000

I've just completed ajaxing the homepage. Once the viewing post has loaded the page will get the previous post in the background. When you click previous or next this information will be used instead of reloading the page.

This gives the illusion that the website is extremely fast loading. I may add the ability to scrub through posts in the future as that would be cool.

This should still work fine if you don't have javascript or if your a search engine crawler as the href tags are still available.

Updated Skin and rewritten Blog Class

Sun, 28 Jun 2009 10:56:19 +0000

Over the last week I've been working on the look of this blog. It's definitely better, but still needs work. I've been playing with some new CSS3 features and in particular I've used the new box-shadow to add some depth. This works great in Firefox / Safari and Chrome. I might actually try to achieve this with images as I have noticed that using the box shadow in such a large area taxes the browsers performance.

The blog class has been re-written and custom templates are now available. Its fairly simple to create a custom skin. All you do is create a folder and add tpl_home.php, tpl_posts.php and tpl_post.php files. These files are the layout for the homepage, post listing and posts/comments page respectively. This folder also contains the css and javascript for the template. I'm sure I will expand on this in the future but for now its all I need.