Bassett-Jones » Technical

Category Clouds WordPress widget

hugh — Wed, 24 Mar 2010 17:10:47 +0000

Tag clouds are an effective way of conveying information about the popularity of key words where the size of the word corresponds to the importance of the word. It is also visually more interesting than a standard list and attracts attention.

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

Download widget3k zip file
View source8k text file of PHP

New in version 2!

Added [categoryclouds] shortcode to use the category cloud on a post or page.

How to use

From the Administration Panels in your WordPress site, click on the Plugin tab
Search for Category Clouds Widget
Activate the plugin
Add the widget to your sidebar through the Appearance > Widgets menu

Shortcode examples

[categoryclouds]
[categoryclouds order="DESC"]
[categoryclouds min_size="8" max_size="24" unit="px"]

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:

[codesyntax lang="php"]

// build query
$query = 'show_option_all=1&style=cloud&show_count=1&use_desc_for_title=0&hierarchical=0';
$query .= '&order=' . $instance['order'];
$query .= '&orderby=' . $instance['orderby'];
if($instance['min_count'] > 0) { $query .= '&hide_empty=1';}

?>
[/codesyntax]

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

[codesyntax lang="php"]

// specified categories
$inc_cats = array(); $exc_cats = array();
foreach (explode("," ,$instance['cats_inc_exc']) as $spec_cat) {
  if ($spec_cat < 0) { $exc_cats[] = abs($spec_cat); }
  elseif ( $spec_cat > 0) { $inc_cats[] = abs($spec_cat); }
}
if(count($inc_cats) > 0) { $query .= '&include=' . implode(",", $inc_cats); }
if(count($exc_cats) > 0) { $query .= '&exclude=' . implode(",", $exc_cats); }

?>
[/codesyntax]

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

[codesyntax lang="php"]

// ensure minimum post count
$cats = get_categories($query);
foreach ($cats as $cat) {
  $catlink = get_category_link( $cat->cat_ID );
  $catname = $cat->cat_name;
  $count = $cat->category_count;
  if ($count >= $instance['min_count'])  {
    $counts{$catname} = $count;
    $catlinks{$catname} = $catlink;
  }
}

?>
[/codesyntax]

Outputting the cloud

[codesyntax lang="php"]

// font size calculation
$spread = max($counts) - min($counts);
if ($spread <= 0) { $spread = 1; };
$fontspread = $instance['max_size'] - $instance['min_size'];
$fontstep = $spread / $fontspread;
if ($fontspread <= 0) { $fontspread = 1; }

echo '';

foreach ($counts as $catname => $count) {
  $catlink = $catlinks{$catname};
  echo "n$catname ";
}

echo '
' . $after_widget;

?>
[/codesyntax]

Logging laptop battery life

hugh — Sat, 23 Jan 2010 11:35:28 +0000

I bought an Asus EeePC 1005HA Seashell net book for Christmas with Windows 7 and have been very impressed with battery life and lightness. Still… I wasn’t sure if Sleep mode was working as expected, so I logged the battery life for a couple of days under normal use.

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.

Extract a web site’s colour palette

hugh — Sun, 10 Jan 2010 19:06:19 +0000

Hextractor is an awesome tool. From their website:

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 ‘+f+’ (‘+h[f]+’)

‘}}document.getElementsByTagName(‘body’)[0].innerHTML=’

Colours used on this page

‘+a+’
About this bookmarklet | By Hugh

‘+document.getElementsByTagName(‘body’)[0].innerHTML}());”>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.

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:

Outline of the colour palette bookmarklet

The bookmarklet can be broken down into the following steps:

Get all the html tags that make up the web page
Examine each tag to see its text colour, border colour and background colour.
Add each colour to a holding array
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 += '' + property + ' (' + colours[property] + ')';
24     }
25   }
26
27   document.getElementsByTagName('body')[0].innerHTML = 'Colours used on this page
' + output + '
About this bookmarklet | By Hugh' + 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 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'+f+' ('+h[f]+')'}}document.getElementsByTagName('body')[0].innerHTML='Colours used on this page
'+a+'
About this bookmarklet | By Hugh
'+document.getElementsByTagName('body')[0].innerHTML}());

Making a magic dragon

hugh — Wed, 30 Dec 2009 13:10:56 +0000

TROGDOR the BURNINATOR Magic Dragon on YouTube

You will need

Template print out
Scissors
A tiny bit of sticky tape
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

Adding google.co.uk as a search provider

hugh — Sun, 25 Oct 2009 22:30:55 +0000

I found changing the default Google search from google.com to the local google.co.uk a bit of a faff. As IE 7 and 8, Firefox 2 and 3, and Chrome all support OpenSearch, there are two simple ways to set google.co.uk as the default search provider:

Click on the button

onClick="window.external.AddSearchProvider('http://www.bassett-jones.com/wp-content/uploads/2009/10/googlecouk.xml');">

OpenSearch xml



    Google.co.uk
    Google United Kingdom search provider
    
    
    http://www.google.com/favicon.ico

Or follow these steps in Internet Explorer

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

Installing WordPress 2.8 on a Windows server: an anatomy of a web site

hugh — Wed, 16 Sep 2009 11:52:33 +0000

The company that hosts my website — CS New Media — provide Linux or Windows hosting. As I’m a developer who works mainly in Microsoft technologies, I’ve opted for the Windows hosting package which also supports ASP.NET 3.5, PHP 5, MS SQL Server and MySQL.

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

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

Following the Famous 5-Minute Installation Guide

Create a database and database user e.g. wordpress1 and wordpress1user
Download the latest version of WordPress and unzip
Rename the wp-config-sample.php file to wp-config.php.

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');

Copy all the files to your web server
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

Create a new page called wp-404-handler.php
Add the following code
Upload wp-404-handler.php to your web server
Set your custom error page to point to wp-404-handler.php. View instructions for Helm control panel.
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:

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

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.

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

All pages and posts



...



  
    
    ...
  




  
    post_title) ?>
    ...

Go to a random page


query('showposts=1&orderby=rand');

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

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

Search site





  Search Bassett-Jones.com

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.

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).

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:

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.


  /wp-content/themes/hugh/images/hughmini.jpg" alt="Hugh"/>
  Hi, I'm Hugh.
Cheerful husband and developer based in Hampshire, UK Read more …

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.

Creating an offline Microsoft Xbox Points converter for the iphone

hugh — Thu, 20 Aug 2009 19:18:48 +0000

Microsoft Points are used for buying items on the Xbox such as arcade games and renting films. As the points translate differently for each local currently, it can be difficult to remember the exchange rate and local cost of items.

In the UK, each Microsoft Point costs 0.85 pence. A typical price for an arcade game is 400 or 800 points, which works out to be £3.40 and £6.80 respectively.

I thought it would be useful to have a simple Points converter on my iphone.

Features

Works offline with no internet connectivity required
Takes advantage of Safari on the iphone
Lists standard costs
Converts user-input values
Converts between different currencies and Microsoft Points

Installation

On an iphone, go to this link to view the web page.

Add it to your Home Screen by tapping on the + at the bottom of the browser and selecting Add to Home Screen. Apple has more information on how to do this at www.apple.com/iphone/iphone-3gs/home-screen.

The link is the complete html page, base64 encoded (about 75 kb). It will work in most modern browsers that understand the dataURI such as Google Chrome, Safari and Firefox.

Screen shots from the iphone

Building the web application

The strategy for this web application to work disconnected is to contain all assets within a single html file. This can be achieved by putting the CSS and Javascript in the document head and using data URIs.

Safari 4.0 installed with OS 2.1 added the HTML 5 Offline Application Cache which can handle CSS and Javascript in separate files.

How it works

the javascript addEventListener('load', function() { in the head adds a function that executes once the page has fully loaded.
within load function
- the page is scrolled so that the Safari chrome is hidden window.scrollTo(0, 1);
- the currencies object is looped through, and each currency is added to the dropdown.
- a change event listener is set up on the dropdown that calls createRows when a new currency is selected
- createRows is explicitly called
within createRows
- the first table row with the text box is created
- the amounts object is looped through and each value added to a new row
- the conversion is calculated and formatted using decimalplaces
- two event listeners are set up for changes in text box
any user input recreates the table

HTML

The html provides the simple structure for the document. The viewport meta tag helps scale the application for iphone, apple-touch-icon specifies the icon for the home screen, and apple-mobile-web-app-capable sets the application in full-screen mode. Everything else is standard html.




    MS Points
    
    
    
    
    
    




    Microsoft Points Converter

    
        
            
                Points
                
                    
                
            
        

        
            
                Designed by Hugh Bassett‑Jones

Points
Designed by Hugh Bassett‑Jones

Cascading Style Sheet

Most of the CSS is standard CSS 2.1, with data URI used for background images. -webkit-border-radius is used for easy rounded corners, and text-shadow to make a distinctive heading.

Javascript

The javascript covers three distinct areas: initial data, creating the table rows, and listening for currency changes or input values.

Initial configuration

        var currencies = [
            { code: 'GBP', unicode: '£', conversion: 0.85 },
            { code: 'AUD', unicode: '$', conversion: 1.65 },
            { code: 'CAD', unicode: '$', conversion: 1.45 },
            { code: 'EUR', unicode: '€', conversion: 1.20 },
            { code: 'JPY', unicode: '¥', conversion: 148 },
            { code: 'MXN', unicode: '$', conversion: 14 },
            { code: 'SEK', unicode: 'k', conversion: 0.85 },
            { code: 'TWD', unicode: 'N', conversion: 42 },
            { code: 'USD', unicode: '$', conversion: 1.25 }
           ];

        var amounts = [200, 400, 800, 1200];

Creating rows and drop down

        function createRows(currency) {

            var tbody = document.getElementsByTagName('tbody')[0];
            var val = document.getElementsByTagName('input')[0];

            tbody.innerHTML = '' + '' + '' + currency.unicode + ' ' + decimalplaces(currency.conversion * (val == undefined ? 100 : val.value) / 100) + '' + '';
            for (var i = 0; i < amounts.length; i++) {
                tbody.innerHTML += '' + ' ' + amounts[i] + '' + '' + currency.unicode + ' ' + decimalplaces(currency.conversion * amounts[i] / 100) + '' + '';
            };

            var input = document.getElementsByTagName('input')[0];
            ...
        };

        addEventListener('load', function() {

            var select = document.getElementsByTagName('select')[0];

            for (var i = 0; i < currencies.length; i++) {
                select.innerHTML += '';
            };
            ...
        }, false);

Setting up event listeners

        function createRows(currency) {
            ...

            input.addEventListener('focus', function() { input.value = ''; }, true);
            input.addEventListener('blur', function() { document.getElementById('result').innerHTML = currencies[document.getElementsByTagName('select')[0].value].unicode + ' ' + decimalplaces(currency.conversion * input.value / 100); }, true);
            ...
        };

        addEventListener('load', function() {
            ...
        }, false);

Helper functions

        function decimalplaces(amount) {
            amount = new String(amount);
            if (amount.indexOf('.') == -1) { return amount += '.00'; }
            if (amount.indexOf('.') == (amount.length - 2)) { return amount += '0'; }
            if (amount.substring(amount.length - 2, amount.length - 3) != '.')
                return amount.substring(0, amount.indexOf('.') + 3);
            return amount;
        };

Images

Safari on the iphone fully supports the data URI schema. We can use this to embed images that would usually be external resources by specifying data:image/gif;base64,... in tags and as background images in the style sheet.

To convert a file to a base64 string in C#:

    byte[] file = System.IO.File.ReadAllBytes("C:\background.png");
    string base64 = Convert.ToBase64String(file);

To convert a file to a base64 string in PHP:

    $contents = file_get_contents($file);
    $base64   = base64_encode($contents);

Complete listing




    MS Points
    
    
    
    
    
    




    Microsoft Points Converter

    
        
            
                Points
                
                    
                
            
        

        
            
                Designed by Hugh Bassett‑Jones

Bassett-Jones » Technical

Category Clouds WordPress widget

New in version 2!

How to use

Shortcode examples

Widget options

Title

Category font size

Order by

Show by

Minimum number of posts

Comma separated category IDs

Code breakdown

Using the WP_Widget class

Getting the data from the database

Outputting the cloud

Logging laptop battery life

Results

Logging battery life

Code breakdown

Creating a Window 7 scheduled task

Extract a web site’s colour palette

How to install the colour palette bookmarklet

What is a bookmarklet?

Outline of the colour palette bookmarklet

Code deconstruction

Using JSLint for best practice javascript

Compressing the bookmarklet

Making a magic dragon

You will need

Templates

Cat Illusion

Dragon Illusion

Super Robot Dog

Cut out the template

Assemble the template

Be amazed

Adding google.co.uk as a search provider

Click on the button

OpenSearch xml

Or follow these steps in Internet Explorer

Installing WordPress 2.8 on a Windows server: an anatomy of a web site

1. Setting up a basic WordPress installation

Things to check first with your web host documentation:

Following the Famous 5-Minute Installation Guide

2. Setting user-friendly custom permalinks

3. Designing the theme

4. Creating custom theme pages

All pages and posts

post_title) ?>

Go to a random page

Search site

Search Bassett-Jones.com

Tag cloud

Tags o' plenty

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

6. Installing standard plugins plugins

7. Modifying and tweaking plugins

Tiny Contact Form

WPtouch iPhone Theme

Hi, I'm Hugh.

8. Writing custom plugins

Creating an offline Microsoft Xbox Points converter for the iphone

Features

Installation

Screen shots from the iphone

Building the web application

How it works

HTML

Microsoft Points Converter

Cascading Style Sheet

Javascript

Images

Complete listing

Microsoft Points Converter

Using the `WP_Widget` class