1. Level 1
2. Level 2
3. Level 3
4. Level 4

Level 4

• Difficulty:
• Best time remaining: 826
• Number of hens: 4
• Speed of hens: slow

Level 4 strategy

With a lift and a gap in the bottom platform, this level combines the features introduced in level 2 and level 3 and adds some tricky jumps to the mix. In particular, the top left jump nearest the caged bird can cause you to fall through if you jump from the nearest platform.

Avoiding hens is still fairly easy where the central ladder can be used to escape.

Level 4 video play through

1. Level 1
2. Level 2
3. Level 3

Level 3

• Difficulty:
• Best time remaining: 888
• Number of hens: 3
• Speed of hens: slow

Level 3 strategy

This level introduces the lift. This is three moving platforms, moving vertically up the screen. The platforms are not evenly spaced, with two appearing closer together. Missing the lift and falling down the gap between the lift and the platform will result in a life lost.

The level design makes it easy to avoid the hens, but good timing is needed to complete it quickly.

Level 3 video play through

1. Level 1
2. Level 2

Level 2

• Difficulty:
• Best time remaining: 831
• Number of hens: 3
• Speed of hens: slow

Level 2 strategy

The second level has a large number of ladders connecting the platforms. Although there is one more hen compared to level one, there are many jump-able gaps to aid escape and turn back hens.

The single gap on the bottom platform has a gap and falling through results in an instant life lost.

Level 2 video play through

This is my guide to each Chuckie Egg level:

1. Level 1

Level 1

• Difficulty:
• Best score: 2,260
• Number of hens: 2
• Speed of hens: slow

Level 1 strategy

The first level is dominated by a central ladder running through all five platforms. Two hens start in the top left of the level, moving slowly towards the bottom. They can sometimes get in the way on the central ladder, but several nearby platforms can be used to wait them out.

The bottom two platforms have plenty of ladders to avoid getting trapped and to practice running and jumping.

Level 1 video play through

I didn’t use any rigorous scientific testing — ‘normal use’ for me was watching a bit of YouTube or iPlayer, checking my email, using Facebook and that kind of thing. If power was still being consumed in Sleep mode, then I would expect big falls in power levels as the net book logged the level after coming out of Sleep.

Results

Download BatteryStatusData for CSV data file of this graph.

The gaps in the hours remaining green line are where I’ve removed data that reported -1 hours remaining.

Hours remaining appears to be calculated depending on the current task when the log was taken. For example, if I was watching a video, the projected hours remaining if I kept just watching videos is less than if I closed the video and browsed the web.

Percentage remaining shows a steady decline. Logging only takes place when the laptop is open, so this is as expected if sleep mode is working as expected. Looks like everything is working as it should be.

Logging battery life

Download BatteryLogging.exe and Windows 7 scheduled task.

The battery logger is a scheduled task that runs a simple C# console application regularly. It requires at least version 2.0 of the .net framework due to the PowerStatus class.

1.  string logFile = System.IO.Path.Combine(System.Environment.GetFolderPath(System.Environment.SpecialFolder.Desktop), "BatteryStatus.csv");
2.
3.  if (!System.IO.File.Exists(logFile))
4.    System.IO.File.WriteAllText(logFile, "Date,Life in seconds,Life in percentage" + System.Environment.NewLine);
5.
6.  string CSV = string.Join(",", new string[] {
7.    System.DateTime.Now.ToString("s"),
8.    System.Windows.Forms.SystemInformation.PowerStatus.BatteryLifeRemaining.ToString(),
9.    System.Windows.Forms.SystemInformation.PowerStatus.BatteryLifePercent.ToString(),
10.   System.Environment.NewLine});
11.
12. System.IO.File.AppendAllText(logFile, CSV);

Code breakdown

1. logFile uses the SpecialFolder enum to create a file path to the user’s desktop
3. Checks whether the file already exists.
4. WriteAllText will create the file and add the headings of the columns. Environment.NewLine is used to avoid hard-coding in line breaks.
6. CSV will hold line of data to add to the CSV file. string.Join creates the comma separated list.
7. "s" is the standard date and time format for the sortable date time pattern e.g. 2010-01-17T13:45:30.
8. BatteryLifeRemaining gets the approximate number of seconds of battery time remaining using the PowerStatus class.
9. BatteryLifeRemaining gets the approximate percentage of full battery time remaining and appears to be a bit more accurate sometimes for my netbook than BatteryLifeRemaining.
12. AppendAllText open, adds the line of data and closes the file.

Creating a Window 7 scheduled task

Press the Windows key and enter ‘task scheduler’ into the search box. Select Task Scheduler from the Programs section.

Select Create Task… from the Actions menu.

Complete the fields Name and Description in the General tab. Leave the other options as default.

From the Triggers tab, select New… Under advanced settings, make sure Repeat task and Enabled are set.

When the task trigger has been hit, we want the BatteryLogger program to run.

By default, scheduled tasks are only run when the computer is plugged into the power socket.

The new task is ready to run.

Hextractor will extract the colors from your stylesheet — whether they're hex codes, RGB, or named colors — and generate a color palette from them showing you exactly what you've got, displayed in the formats you prefer.

However, extracting the colours does rely on a server-side php script and I thought it would make an ideal javascript bookmarklet. An example of the result is shown on the right.

This page also helps me to documents some common javascript examples and links for reference.

How to install the colour palette bookmarklet

Try it now! Click this link to view the colours on this site.

To use on other web sites, click and drag this show page colours link to add it to your favorites or bookmarks bar. Visit the web site you would like to see the colour palette of and click on the bookmark or favorite. It will then show the 'Colours used on this page' table.

1. What is a bookmarklet?
2. Outline of the colour palette bookmarklet
3. Code deconstruction
4. Using JSLint for best practice javascript
5. Compressing the bookmarklet

What is a bookmarklet?

A bookmarklet, or favelet is usually a small piece of javascript that can modify a page in a particular way. By adding the bookmarklet to a user's bookmarks, it can be executed on any web page. Examples of bookmarklets include:

• changing the window size to 1024 x 768 pixels
• validating the current page with the W3C validator
• highlighting links in a page

Outline of the colour palette bookmarklet

The bookmarklet can be broken down into the following steps:

1. Get all the html tags that make up the web page
2. Examine each tag to see its text colour, border colour and background colour.
3. Add each colour to a holding array
4. Show a list of distinct colours and their values

Code deconstruction

Full listing with line numbers:

1  'use strict';
2  /*global window: false */
3
4  (function () {
5    var elements = document.getElementsByTagName('*'),
6    elementsLength = elements.length,
7    attributes = ['color', 'borderTopColor', 'borderRightColor', 'borderBottomColor', 'borderLeftColor', 'backgroundColor'],
8    colours = {},
9    style,
10   output = '',
11   count,
12   property;
13
14   do {
15     style = elements[elementsLength - 1].currentStyle ? elements[elementsLength - 1].currentStyle : window.getComputedStyle(elements[elementsLength - 1], null);
16     for (count = 0; count < attributes.length; count += 1) {
17       colours[style[attributes[count]]] = colours[style[attributes[count]]] === undefined ? 1 : colours[style[attributes[count]]] + 1;
18     }
19   } while (--elementsLength);
20
21   for (property in colours) {
22     if (colours.hasOwnProperty(property)) {
23       output += '<li style=%22margin:3px;padding-left:3px;border-left:solid 50px ' + property + '%22>' + property + ' (' + colours[property] + ')</li>';
24     }
25   }
26
27   document.getElementsByTagName('body')[0].innerHTML = '<ol style=%22color:#111;margin:5px;padding:5px;width:250px;border:solid 1px goldenrod;background:#fff;opacity:0.9;%22><li style=%22padding:0 0 5px 0;font-weight:bold;color:#111;%22>Colours used on this page</li>' + output + '<br><a href=%22http://www.bassett-jones.com/page-colours-bookmarklet%22>About this bookmarklet</a> | <a href=%22http://hugh.bassett-jones.com%22>By Hugh</a></ol>' + document.getElementsByTagName('body')[0].innerHTML;
28
29 }());

Line 1 is a way of reporting errors when using poor javascript practice. John Resig covers it in more detail in ECMAScript 5 Strict Mode.

Line 2 comment used for the JSLint checker.

Line 4 encapsulates the javascript to avoid conflicts and global scope of variables. Stack Overflow has a great explanation.

Lines 5-12 declare and initial all variables used in the script.

Lines 14 + 19 efficiently loop backwards through all the elements in the page.

Line 15 get the computedStyle for non-IE browsers or the currentStyle for Internet Explorer.

Line 16 loop through the list of previously declared style attributes such as background colour and border colour.

Line 17 check whether the holding colour list already contains the style colour. If so, add to the count, otherwise add it to the list.

Line 21 loop through the properties of the colour holding list.

Line 22 hasOwnProperty removes properties inherited through the prototype chain.

Line 23 adds a html list item to the output string. %22 is the escaped value of ", as the raw quote symbol will eventually be used in the href link.

Line 27 inserts the output string at the top of the <body> tag.

Using JSLint for best practice javascript

Once the javascript is written and tested in a couple of browsers to make sure it works, it can be a good idea to run it though JSLint to test for code quality. The colour palette bookmarklet was run through with 'The Good Parts' and 'Assume a browser' checked, which results in the options list of:

/*jslint white: true, browser: true, onevar: true, undef: true, nomen: true, eqeqeq: true, plusplus: true, bitwise: true, regexp: true, strict: true, newcap: true, immed: true */

Compressing the bookmarklet

Internet Explorer supports a maximum URL length of 1,083, with other modern browsers having no effective limit. This means that the javascript needs to be under 1,083 characters in total to work in IE. Luckily, there are a number of javascript compressors available online which can crunch variable names to single characters, remove unnecessary comments and delete white space.

Using the YUI compressor results in 1,010 characters for the colour bookmarklet

javascript:'use strict';(function(){var g=document.getElementsByTagName('*'),c=g.length,b=['color','borderTopColor','borderRightColor','borderBottomColor','borderLeftColor','backgroundColor'],h={},d,a='',e,f;do{d=g[c-1].currentStyle?g[c-1].currentStyle:window.getComputedStyle(g[c-1],null);for(e=0;e<b.length;e+=1){h[d[b[e]]]=h[d[b[e]]]===undefined?1:h[d[b[e]]]+1}}while(--c);for(f in h){if(h.hasOwnProperty(f)){a+='<li style=%22margin:3px;padding-left:3px;border-left:solid 50px '+f+'%22>'+f+' ('+h[f]+')</li>'}}document.getElementsByTagName('body')[0].innerHTML='<ol style=%22color:#111;margin:5px;padding:5px;width:250px;border:solid 1px goldenrod;background:#fff;opacity:0.9;%22><li style=%22padding:0 0 5px 0;font-weight:bold;color:#111;%22>Colours used on this page</li>'+a+'<br><a href=%22http://www.bassett-jones.com/extract-a-web-sites-colour-palette%22>About this bookmarklet</a> | <a href=%22http://hugh.bassett-jones.com%22>By Hugh</a></ol>'+document.getElementsByTagName('body')[0].innerHTML}());

TROGDOR the BURNINATOR Magic Dragon on YouTube

You will need

1. Template print out
2. Scissors
3. A tiny bit of sticky tape
4. Socks to be knocked off

Templates

Cut out the template

Cut around the black line of the template, just leaving the part in the middle. Don’t forget to cut the slits at the bottom for the tabs to go into.

Assemble the template

Score, fold and tape the template together. Scoring by running the scissor edge along the fold line helps crease the paper in the correct place. The only tricky part of this is to make sure you fold the head part in. This is shown in this angle and the head close up. If this goes wrong, you can always re-fold it the correct way.

Be amazed

1. Visual Studio

As a .net developer, VS 2008 is a fantastic Integrated Developer Environment. From code snippets to Intellisense, debugging to stack traces, Visual Studio helps me develop swiftly while concentrating on the code.

2. Firefox + Firebug extension + Web Developer extension

I recently had a problem running Firefox on my new PC and boy, did I miss Firebug and the Web Developer extension. Although some of the features overlap, the simplicity of Web Developer means that it is very quick and easy to disable CSS, view all images or check page size.

Firebug is indispensable to hunt down CSS inheritance irritations, preview quick style modifications or unravel client-side javascript complexities.

Special mention to ColorZilla, User Agent Switcher and FireShot.

3. Fiddler

A comprehensive HTTP debugging  proxy, Fiddler allows you to examine the raw HTTP traffic between the browser and server. Works well with HTTPS too.

4. Notepad++

Notepad++ is a text editor hitting all my major requirements: colour coding, quick to load, and excellent FTP integration.

5. Balsamiq Mockups

Useful, quick and easy wire framing for web applications and iphone designs.

6. Photoshop

The granddaddy of image manipulation software, I probably only use 5% of all its features. Once I got over it’s irritating non-standard menus, I really appreciated the way tools such as spot healing work so well.

7. FileZilla

A bit under-rated, FileZilla is a top-notch FTP client that is small, light and regularly updated.

Click on the button

OpenSearch xml

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
    <ShortName>Google.co.uk</ShortName>
    <Description>Google United Kingdom search provider</Description>
    <Url type="text/html" template="http://www.google.co.uk/search?q={searchTerms}&meta=cr%3DcountryUK%7CcountryGB"/>  
    <Url rel="suggestions" type="application/x-suggestions+xml" template="http://clients5.google.com/complete/search?q={searchTerms}&mw={ie:maxWidth}&sh={ie:sectionHeight}&rh={ie:rowHeight}&inputencoding={inputEncoding}&outputencoding={outputEncoding}" />
    <Image height="16" width="16" type="image/icon">http://www.google.com/favicon.ico</Image>
</OpenSearchDescription>

Or follow these steps in Internet Explorer

1. Use the drop down menu in the search engine box and click on Find more providers...
   
   
2. Scroll down to the bottom of the page and click on Create your own Search Provider
   
   
3. Enter the following:
   • URL:
   • Name:
   • Character encoding:
   and click on Install Search Provider button
   

This guide details how I set up Bassett-Jones.com and dealt with any problems along the way. There was a learning curve as I hadn’t much exposure to PHP, but documentation is one of PHP and WordPress’s strengths.

1. Setting up a basic Wordpress installation
2. Setting user-friendly custom permalinks
3. Designing the theme
4. Creating custom theme pages
5. Getting hugh.bassett-jones.com subdomain to work as a Wordpress page
6. Installing standard plugins plugins
7. Modifying and tweaking plugins
8. Writing custom plugins

1. Setting up a basic Wordpress installation

Difficulty:

WordPress’s basic set up and installation is wonderfully simple.

Things to check first with your web host documentation:

• How to create a database and database user. My web host uses the Helm control panel which includes a database manager.
• How to copy files to your web server. This is usually done through an FTP client such as FileZilla.
• Make sure PHP is running using a test.php file with <?php phpinfo() ?>

Following the Famous 5-Minute Installation Guide

1. Create a database and database user e.g. wordpress1 and wordpress1user
2. Download the latest version of WordPress and unzip
3. Rename the wp-config-sample.php file to wp-config.php.
4. Edit the following lines in the newly renamed wp-config.php.

   /** The name of the database for WordPress */
   define('DB_NAME', 'wordpress1');
   
   /** MySQL database username */
   define('DB_USER', 'wordpress1user');
   
   /** MySQL database password */
   define('DB_PASSWORD', 'userpassword');
   
   /** MySQL hostname */
   define('DB_HOST', 'mysql5.webhost.com');

5. Copy all the files to your web server
6. Visit the start page to complete the installation

2. Setting user-friendly custom permalinks

Difficulty:

Windows 2003 and IIS 6 do not include URL rewriting and so cannot map a page such as www.bassett-jones.com/?page_id=9 to the more friendly www.bassett-jones.com/hugh/ in the same way that Apache does using mod_rewrite.

If your web host supports custom error pages, you can use this to create user-friendly custom permalinks.

Request -> Status 404 Not Found -> wp-404-handler.php -> Status 200 Success

1. Create a new page called wp-404-handler.php
2. Add the following code

   <?php
     $_SERVER['REQUEST_URI'] = substr($_SERVER['QUERY_STRING'], strpos($_SERVER['QUERY_STRING'],   ':80')+3);
     $_SERVER['PATH_INFO'] = $_SERVER['REQUEST_URI'];
     include('index.php');
   ?>

3. Upload wp-404-handler.php to your web server
4. Set your custom error page to point to wp-404-handler.php. View instructions for Helm control panel.
5. I like the web site addresses in the format www.bassett-jones.com/post-title/, so from the WordPress Dashboad go to Settings > Permalinks > Common Settings > Custom Structure and set to /%postname%/.

Note that once this is done, the page at the custom permalink will not accept any forms with a method of post. This means that some of the plugins break and may need tweaking as detailed in 7. Modifying and tweaking plugins.

3. Designing the theme

Difficulty:

I already had an idea how I wanted the site to look based on the previous version. Sketching out the design in Balsamiq Mockups showed the main areas of the two different types of pages — one for entries, and one for pages such as Search, About and Tags.

The Template Hierarchy and default theme give a breakdown and example of how to construct a custom theme. My post page design fitted into the standard Header → Content → Sidebar → Footer theme design.

To manage the different styles between post-type pages and standard pages, I created two styles sheets style.css and page.css. The header.php then includes either one depending on the type of page:

<?php if (is_page() || is_404() || is_search() || is_archive() ) { ?>
  <link rel="stylesheet" href="<?php bloginfo('template_directory') ?>/page.css" type="text/css" media="screen" />
<?php } else { ?>
  <link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>" type="text/css" media="screen" />
<?php } ?>

The sidebar blocks 3 – 7 are automatically handled through the administration interface and sidebar.php by using:

<?php dynamic_sidebar() ?>

4. Creating custom theme pages

Difficulty:

My theme required separate pages for About, All, Contact, Hugh, Random, Search, and Tags. About, Contact and Hugh could use the standard template, while the rest would need a custom theme page each. codex.wordpress.org/Creating_a_Search_Page details the steps of how to create a search page using a custom template file. The other pages were created in a similar way.

1. Create a new page template
2. On the edit page dashboard option, choose the template file to use

All pages and posts

<?php
  /*
  Template Name: All
  */
?>

...

<?php query_posts('orderby=post_modified&order=desc'); ?>
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
  <div class="post">
    <h2 id="post-<?php the_ID(); ?>"><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></h2>
    ...
  </div>
<?php endwhile; endif; ?>

<?php $pages = get_pages('orderby=post_modified&order=desc'); ?>
<?php foreach ($pages as $page) { ?>
  <div class="page">
    <h2><a href="<?php echo get_page_link($page->ID) ?>"><?php echo ucfirst($page->post_title) ?></a></h2>
    ...
  </div>
<?php } ?>

Go to a random page

<?php
/*
Template Name: Random
*/
?>
<?php
  $rand = new WP_Query();
  $rand->query('showposts=1&orderby=rand');

  while ($rand->have_posts()) : $rand->the_post();
    $location = "Location: " . get_permalink();
  endwhile; 

  header($location,true,302);
?>

Search site

<?php
/*
Template Name: Search
*/
?>
<?php get_header(); ?>

<div id="main">
  <h1>Search Bassett-Jones.com</h1>
  <?php get_search_form() ?>
</div>

<?php get_footer(); ?>

Tag cloud

<?php
/*
Template Name: Tags
*/
?>
<?php get_header(); ?>

<div id="main">
  <h1>Tags o' plenty</h1>
  <?php wp_tag_cloud(); ?>
</div>

<?php get_footer(); ?>

5. Getting hugh.bassett-jones.com subdomain to work as a Wordpress page

Difficulty:

WordPress is installed on www.bassett-jones.com, but I like the style of hugh.bassett-jones.com instead of www.bassett-jones.com/hugh/. My web host sets up subdomains to map to a sub folder of the main domain. This means that hugh.bassett-jones.com needs to map to a file that exists at www.bassett-jones.com/hugh/index.php.

This page /hugh/index.php then retrieves the real page content.

<?php
if($_SERVER["SERVER_NAME"].$_SERVER["REQUEST_URI"] == "www.bassett-jones.com/hugh/") {
  header("Location: http://hugh.bassett-jones.com",true,301);
  exit;
}
echo file_get_contents('http://www.bassett-jones.com/?page_id=9');
?>

The above code checks if www.bassett-jones.com/hugh/ is being requested, and if so permanently redirects to hugh.bassett-jones.com. It then retrieve the Hugh page using the hard-coded page_id, as /hugh/ would continually loop.

6. Installing standard plugins plugins

Difficulty:

These are the plugins that required no modification and extend the standard WordPress installation. They were installed using the Dashboard Plugins Installation and Widget Panel.

Akismet Checks comments against the Akismet web service to see if they look like spam or not and reduces the amount of unwanted comments.

flickrRSS Integrates photos from the flickr RSS and allows you to specify the template HTML.

Google XML Sitemaps Automatically generate a sitemaps.org compatible site map for search engines to find content.

Raw HTML capability On a per-post basis, disable the automatic html conversion of the WordPress rich text editor. Useful for posts with with code in them.

Wordpress.com stats Simple visitor tracking and analysis.

WP-Memory-Usage Shows the current memory usage and limit on the Dashboard.

7. Modifying and tweaking plugins

Difficulty:

Tiny Contact Form

By default, Tiny Contact Form has an empty form action that POSTs the contact data back to the page that it is currently on (around line 76 in tiny-contact-form.php).

<form action="" method="post">

This does not work with 2. Setting user-friendly custom permalinks, as only GET actions are supported. I modified the action to post to the underlying page address instead:

<form action="' . get_bloginfo("url") . '/?page_id=' . get_the_ID() . '" method="post">

Commenting on pages does not need a similar modification, as the comment form POSTs to wp-comments-post.php.

WPtouch iPhone Theme

WPtouch is an excellent plugin that formats the content of the web site when accessing from an iphone or similar mobile device.

Version 1.9 does not support skins, so any modifications will be overwritten with updates, but it looks like 2.0 will support them.

I’ve edited the bottom of header.php to include a brief intro about me on every page.

<div id="hugh" style="position: relative; -webkit-border-radius: 8px;">
  <img style="width: 100%; display: block;" src="<?php bloginfo('wpurl'); ?>/wp-content/themes/hugh/images/hughmini.jpg" alt="Hugh"/>
  <h2 style="position: absolute;"><a href="http://hugh.bassett-jones.com">Hi, I'm Hugh.</a></h2><p>Cheerful husband and developer based in Hampshire, UK <a href="http://hugh.bassett-jones.com">Read more …</a></p>
</div>

8. Writing custom plugins

Difficulty:

I had a clear idea of how I wanted the theme to look and what the html produced needed to be.

Some plugins such as flickrRSS allow template html to be used for each item, but others did not quite fit what I needed.

Recent Tweets, YouTube Videos, and Xbox Games all follow the basic pattern of retrieving an XML document from another location, parsing and extracting relevant data into html before storing and displaying on the page.

To reduce the number of times the page requests data from the external sites, I cache the html in the database and only request new data once every 24 hours.