The plan

Grab the top 20 chart singles from the BBC web site, look up each song on YouTube and get the most popular matching videos. Show them in the chromeless player and set it so that they play automatically and users can skip ones they don’t like.

Make it so

BBC chart data

The BBC publish chart data at www.bbc.co.uk/radio1/chart/singles/ but this is not available in a raw data format such as XML or JSON. Luckily, Yahoo have introduced Yahoo! Query Language (YQL) that can extract data from HTML pages using an XPath expression. I needed the song title and artist and the BBC has these in the image alt attribute.

The following YQL extracts the top 20 from the chart page:

The result from trying it in the console:

YouTube data

Now that I had the chart data, an option would be for the web browser to query YouTube for each song title and show the video. This would be a slow process and a bit of a pain as each request would be asynchronous and be returned in a different order to the one sent.

YQL supports the IN operator and sub-queries for Open Data Tables. If I used a YouTube table, I could have all the processing done on Yahoo’s servers in one YQL query. There wasn’t a YouTube community table so I created an Open Table at http://addbass.com/youtube.xml with the following definition:

This data table is used in the YQL query

The result from trying it in the console:

Putting it all together with javascript: the breakdown

Link to the latest versions of jQuery and swfobject on Google’s CDN and the local js file in the document head:

Load the YouTube chromeless player before the closing document body:

In top.js, declare a global variable to hold video player details:

onYouTubePlayerReady is called when the player has loaded:

player.updateRemaining() gets the total number of seconds remaining and converts it to minutes and seconds. This function is called once a second.

The control click events are wired up:

jQuery’s ajax method is used to get the YouTube chart data through the YQL query. This allows the response to be cached on the browser making it speedy the next time the data is requested. As the data does not change often, _maxage=86400 is specified to allow Yahoo to cache the results for 24 hours on their servers:

If the request fails, show an error message instead of the loading text:

If the request is successful, build a list where each list item has the same ID as the music video on YouTube:

onPlayerStateChange has been wired up on line 7 to fire every time there’s a change in state. This could be from the music video starting, ending, or a user skipping a track.

View the complete listing at http://addbass.com/top20/top.js.

On Super Fun Days Out we needed something similar to WordPress’s built in tag cloud using categories instead of tags. Fortunately WordPress has an active plugin community and developer Lee Kelleher had already written a Category Cloud widget. A couple of changes were needed to update it for multiple sidebars and to include or exclude specific categories.

Now hosted at WordPress.org at http://wordpress.org/extend/plugins/category-clouds-widget/stats/.

• Download widget3k zip file for WordPress 1.8+
• View source8k text file of PHP

How to use

1. Download Category Clouds and unzip
2. Upload category_clouds folder to the /wp-content/plugins/ directory
3. Activate the plugin through the ‘Plugins’ menu in WordPress
4. Add the widget to your sidebar through the ‘Appearance > Widgets’ menu

Widget options

Title

This is the usual widget title that will appear in your theme’s sidebar.

Category font size

The minimum and maximum font sizes you want the cloud to show and their unit of measurement. For example, min: 50 max: 200 unit: % would show the smallest category at half your normal text size and the largest at double.

Order by

Choose between ordering by number of posts in a category, or alphabetically by category name.

Show by

Either the category with the most posts first or the category with the fewest posts first if using Order by: count, or A-Z or Z-A if Order by: name.

Minimum number of posts

Categories where the total number of posts is less than this number will not be shown. Set to 1 to hide empty categories.

Comma separated category IDs

If you only want to include specific categories, enter their IDs in a list. If you want to exclude a category, enter its ID as a negative number. Leave blank for all categories.

Example: 1,4,9,36,37,38
This will create a category cloud with only categories 1,4,9,36,37,38 in it.

Example: -1,-3
This will create a category cloud hiding categories 1 and 3.

Code breakdown

This section isn’t required to use Category Clouds, but discusses how it works.

The plugin comprises three main sections: using the widget class, getting the data from the database, and setting the font size.

Using the WP_Widget class

Category Clouds extends the WP_Widget widget class which already has the plumbing to work with multiple sidebars, display configuration options and save those options to the database. Justin Tadlock has a useful introduction guide on how to develop a basic widget using WordPress 2.8+.

Getting the data from the database

All the heavy lifting for database access for this widget is by using the WordPress query get_categories, which means most of the work is performed on the database server, not on the PHP server. This accepts a number of parameters and returns a collection of categories. Category Clouds conditionally builds the query parameters based on the saved options:

Specific categories to include or exclude are added to the query as needed by checking the saved comma separated list of ID numbers:

Finally, each category is checked to make sure it has the required number of posts:

Outputting the cloud

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.