We use this blog to tell you what we’re currently up to. We often share solutions to technical problems if we think they might be useful…

My Uncle mentioned that the audio on this aging PC wasn’t working ever since he got it “repaired”. It was running Windows XP and we were initially unable to find the right audio drivers online so I thought I’d give Ubuntu a go on it. Sure enough, the audio worked fine in Ubuntu. However, with the machine running Ubuntu, it was incredibly slow and unstable. It crashed every 5 mins with either a white screen of death or a screen that looked like a jail with vertical bars going across it. My uncle said ”

Yeah, this ooobuntooo thing is ok but it keeps freezing like a zoo and I have to switch the computer off and on again

:-) .

I tried Linux Mint 12 instead of Ubuntu and got the same instablility. I was left with no choice other than to leave with Windows set as the default grub option. Oh Ubuntu, you have failed me – You are slower and less stable than Windows XP, on at least 1 machine. In fact Windows was a better experience in terms of speed and stability by a significant distance! Sad days. Ubuntu, please step-up. I love you, but only because you are better than the competition.

Another problem that left a sour taste in my month was that my Uncles old monitor didn’t like grub and switched off after the initial bios splash screen, kept switched off during grub and then switched back on when the OS actually started booting. Luckily I guessed than Ubuntu is usually at the top of the menu and Windows at the bottom so was able to choose the right OS even though nothing was on the screen. but having grub invisible is not a good user experience! And it make it tricky to change the default to Windows (I had to guess the GRUB_DEFAULT value in /etc/default/grub).

Dell XPS L702xI have a Dell XPS L702x Laptop and the wireless is dodgy in Ubuntu 11.04. By Dodgy I mean it drops out and doesn’t automatically connect very often especially when a Ethernet cable is unplugged. It seems the problem is that Ubuntu doesn’t get on well with wireless-N (perhaps the driver is buggy?). I fixed it by disabling wireless N (but leaving G working):

First check to see that b, g and n is enabled:

> iwconfig
wlan0 IEEE 802.11bgn ESSID:"WKIXNTOM"
we need:
wlan0 IEEE 802.11bg ESSID:"WKIXNTOM"

To disable Wireless N, create a file called /etc/modprobe.d/iwlagn.conf and put the disable incarnation in it:
> sudo vi /etc/modprobe.d/iwlagn.conf
options iwlagn 11n_disable50=1 11n_disable=1

Restart the computer to finish.

I agree this isn’t a ideal solution (to say the least!), but it’ll do for now.

Update after 2 months: Wireless has been reliable and steady since making the above change.

Update (15/Oct/11): This “hack” is a disaster for Ubuntu 11.10 Oneiric Ocelot, it causes Wireless to fail to load. Be sure to remove the /etc/modprobe.d/iwlagn.conf file when upgrading to Ubuntu 11.10. I found this issue the hard way: askubuntu question.

Wordpress Logo

Did you know that WordPress sends you emails when you get a new blog comment? I didn’t – because it has never worked for me. But once I knew it was supposed to email me I looked into it and found a fix.

Setup: My setup is running WordPress.org on a Ubuntu 9.04 box called Butterfree with sendmail installed.

The problem was that the Return-Path header in my outgoing mails wasn’t valid which caused some mail recipients to reject the mail, while other less picky ones, accepted the mail fine (e.g. gmail). The Return-Path header that sendmail was using looked something like this:

Return-Path: <www-data@butterfree.bitvolution.com>

I found this by changing the admin email from the one that didn’t work to a gmail one, then posting a test comment on one of my posts. Then I waited for the email to arrive in gmail and selected “show original” from the gmail interface. A quicker way is to check the entries in /var/log/mail.log.

In order to fix the issue, I configured the return path in emails sent from WordPress (i.e. PHP) to something different using the -f parameter for sendmail:

sudo emacs /etc/php5/apache2/php.ini

Find the sendmail_path and uncomment it and add the -f flag:

; -f will set the "return-path" headers.
sendmail_path = /usr/sbin/sendmail -i -t -f sendmail@bitvolution.com

Doing this solved this issue so I now get email about new comments.

My fix feels a bit of a hack. I would be interested in how to solve this problem the right way, so let me know if you can give me some advice. For example, perhaps I should have done something with my DNS settings for my domain?

I used to think that a hard part of scaling a website from one webserver to two webservers was sharing the sessions between the machines to keep the users logged in whichever machine they were served by. I was pleasantly surprized that it is possible to accomplish sharing sessions between two servers by changing only 5 lines in the php.ini file (the 2 biggies are session.save_handler and session.save_path).

Here is a solution for RHEL 5.5:

Read on…

Wordpress Logo

In WordPress 3.0, my WordPress logo image (on the left) broke. So I opened a bug and six weeks and 100 bug comments later, I have upgraded to 3.01 and it is working again. Thanks guys!

The reason why the logo image was broken was quite interesting(?)… In v3.0 WordPress automatically started auto-correcting Wordpress to WordPress (i.e. Word-lowercase-p-ress to Word-uppercase-P-ress) and because my image file name was called “WordpressLogo_blue-m.png”, the auto-correction was breaking the link. Auto-correction shouldn’t cause links to break and it seems that v3.01 fixes it.

The filter function that does this auto-correction is called “capital_P_dangit” – The WordPress guys are obviously pretty frustrated by this spelling mistake!

Old filter (v3.0):

function capital_P_dangit( $text ) {
       return str_replace( 'Wordpress', 'WordPress', $text );

New filter (v3.01):

function capital_P_dangit( $text ) {
        // Simple replacement for titles
        if ( 'the_title' === current_filter() )
                return str_replace( 'Wordpress', 'WordPress', $text );
        // Still here? Use the more judicious replacement
        static $dblq = false;
        if ( false === $dblq )
                $dblq = _x('“', 'opening curly quote');
        return str_replace(
                array( ' WordPress', '‘WordPress', $dblq . 'Wordpress', '>Wordpress', '(WordPress' ),
                array( ' WordPress', '‘WordPress', $dblq . 'WordPress', '>WordPress', '(WordPress' ),
        $text );

Wordpress Logo

When I was building the property gallery for greekislandpropertyfinders I wanted to use a fancy javascript image gallery like Galleria, however I came across a problem with Galleria in that it couldn’t display more than one gallery on any page. It’s open-source so I used the source code to help write my own version and turned it into a WordPress plugin with the features I needed.

The plugin isn’t all that generalised, so I’m not sure it’ll be useful to many people but I think it’s a tool worth sharing.

Plugin features:

  • This plugin doesn’t change the WordPress media gallery admin interface – galleries are created and inserted into pages/posts as normal (i.e. using the media upload GUI + the
    shortcode). WordPress authors won’t need to change or learn anything new.
  • The plugin makes efficient use of WordPress media (no front-end image resizing via CSS!) which means it doesn’t matter if one of your authors uploads a load of 3MB images to a gallery – it’ll still run fast.
  • The plugin doesn’t pre-download images that aren’t needed – it displays a loading spinner image when the user is waiting for a image on load.
  • Should be easy to style the gallery in your own way – uses CSS classes and IDs.
  • The user can click on the main image to cycle through the gallery.
  • Uses jQuery for cross-browser hover fade effects.
  • Small JS footprint: 2854 bytes.
  • Outputs valid XHTML (unlike the default WordPress gallery!).

Screenshot of the plugin:

Screenshot of Bitvolution-image-galleria plugin

Click to enlarge

Demo of plugin: www.greekislandpropertyfinders.co.uk/what-we-are-finding.

Download the plugin from the WordPress.org plugin directory.

Screenshot of Page Speed in Firebug
I find the Page Speed tool from Google extremely helpful for optimising my websites. I have a tip which can save time if your website is failing the “Optimize Images” test. Using the in-built Smush.it is one option but if most of your images are jpegs, you can achieve the same result and save time using a command line tool called jpegtran with the -optimise parameter to do lossless compression and the -copy none parameter to strip out image meta-data.

Disclaimer: As with any image processing always keep a copy of the original images.

To install jpegtran in Ubuntu, do:
sudo apt-get install libjpeg-progs

  • To optimise a single jpeg image:
    jpegtran -copy none -optimise -outfile image.jpg image.jpg
  • To optimise all jpegs in the current directory:
    for img in `ls *.jpg`; do jpegtran -copy none -optimise -outfile $img $img; done
  • To optimise all jpegs in the current directory and all child directories:
    find . -name “*.jpg” -print0 | xargs -0 -I filename jpegtran -copy none -optimise -outfile filename filename

If you need to optimise various image formats, there is a PHP CLI tool called smusher which uses Smush.it and can work recursively on directories. Might be worth a look. It would be nice if Smush.it had a API – their FAQ mentions they are working on it.

Greek Island Property Finders Screenshot

We have just finished and published greekislandpropertyfinders.co.uk which is a modified clone of http://www.heidijoycegardens.com.

Technical details of site:

Screenshot of problem with too big tag

On this WordPress theme, the sidebar is quite small (only 220px) and the default WordPress tag cloud widget was producing tags that were clipped in a ugly manner. By default, the WordPress tag cloud widget has a maximum font size of 22px so I was looking for a way to reduce it.

Note: If you are not a theme editor, you might find it easier to just install a suitable tag cloud plugin, e.g. Configurable Tag Cloud (CTC).

The WordPress tag cloud widget already allows you to specify various options including the largest font size, e.g. <?php wp_tag_cloud('largest=18'); ?> so we only need to create a new widget that overrides the default widget and then unregister the default widget so there aren’t two widgets with the same name in the “Available Widgets” dashboard page. We can register our own widget using register_sidebar_widget and we can unregister the default tag cloud widget using unregister_widget('WP_Widget_Tag_Cloud');.

This is the code you need – put it in the functions.php file in your WordPress theme folder:

add_action("widgets_init", array('Tag_cloud_withLimitedFontSize', 'register'));

/** Widget - Override the default WordPress tag cloud BUT cap the largest font size to 18 (instead of 22)\
 because at 22 some tags don't fit in the sidebar. */
class Tag_cloud_withLimitedFontSize
  function widget($args){
    echo $args['before_widget'];
    echo $args['before_title'] . 'Tags' . $args['after_title'];
    echo wp_tag_cloud('largest=18');
    echo $args['after_widget'];

  function register()
    register_sidebar_widget('Tag Cloud', array('Tag_cloud_withLimitedFontSize', 'widget'));

If there’s a better way to do this, please let me know.

Microchip as a bug

A website that I was working on suddenly started crashing Firefox 3.6 on my PC (Ubuntu 9.10, 64bit). I’m talking a full out hang with 100% CPU usage and a frozen mouse and keyboard and the only way to recover is to remote login from a 2nd PC and kill the Firefox process.

I found the cause of the crash and it was a single line of recently added CSS code at the top of the websites stylesheet: body { opacity: 0.9999; }

So, if you run a website, be careful of non-100% opacity when it affects many elements. I have hosted a page that reproduces the issue and found a bug that tracks the issue: #279890. This CSS is also a problem on Windows – it causes text to blur horribly in IE 7 in some situations.

What is that CSS for anyway? Firefox 2.0 on Macs used to have a problem where text could dim or get bold or flicker when a animated effect that changed the opacity of an element was used. It was caused because the use of a opacity filter triggered the Gecko rendering engine to switch from the operating system’s method of anti-aliasing to its own internal method. Whenever opacity dropped below 100% the mode switched and resulted in a defect such as a flicker or blink. The fix was simple – all that was needed was to add body { -moz-opacity: 0.9999; } to the stylesheet because it would force Firefox to use a consistent text rendering method.

Hack == Bug

PeoplePerHour Economy

I’ve just finished a new webpage called PeoplePerHour Economy that was written about in the mainstream tech press (see bottom half of article):

Screenshot of Peopleperhour marketplace page

Technical details:

  • The charts and graphs are implemented using the Google Charts API – a simple and extremely efficient method of producing charts.
  • The charts (and chart data) are cached over a 24 hour period to take some load off the webserver. The caching is done by some simple PHP code – memcached seemed overkill.
  • The UK map is implemented using a 3rd-party image map with polygon co-ordinates specifying each county. The hover-over highlighting is done using a JQuery plugin called mapHighlight.
  • The “Job-o-meter” is implemented using a JQuery plugin called jOdometer customised to format the number with commas and animate the digits with some easing. I have made the customisations available via a github fork.

Wordpress LogoToday, I found out about a WordPress plugin called Elastic (http://elastictheme.org/, download link) which is a WYSIWYG theme editor for WordPress.

It looks like a very promising technology to make it easier to develop WordPress themes. I’m interested in re-useable modules so, if I develop something interesting for one client, I can re-use the same something for a different client with 1-click (therefore being able to quote them a reduced price). Plugins and widgets achieve this to some extent but Elastic aims to make the same possible at a more fundamental level.

Wordpress LogoA typical use case for a hidden page might be so you can store your website licensing agreement or image attribution links without having it explicitly in the main navigation links – most folk link to their licensing agreement in the footer.

If you want to have a page on your self-hosted WordPress website that is accessible via a URL but not directly linked or advertised on the site, you have several options:

  1. Use a plugin such as “Exclude Pages“.
  2. If your pages are displayed via a sidebar widget, you can go to the widget settings page in the WordPress admin section and use the “exclude” field to hide a page ID.
  3. Save the page as a “draft” but never publish it. Even though it’s not live, you can still access the page if you type the direct URL to the page. e.g. http://yourblogurl/?page_id=69.
  4. Modify the wp_list_pages function in your current theme:
    • If you know you don’t use any sub-pages on your site, you can hide any page you want by making it a sub-page of the homepage and then display your menu using: <?php wp_list_pages('depth=1'); ?>
    • To exclude a page with id 69, use: <?php wp_list_pages('exclude=69' ); ?> If you do this you can automatically hide additional pages by making them a sub-page of the hidden page.
  5. Create a new file in the theme directory. It will be accessible via http://yourblogurl/wp-content/themes/yourthemename/yoursecretpage.php. If you want to use regular wordpress functions in the secret page, include the following on line 1: <?php require_once(dirname(__FILE__) . '/../../../wp-blog-header.php'); ?>

Note: WordPress does have a “Private” checkbox that you can tick in the visibility section of the publish options. However, private pages will not be accessible via any URL.

Look at the difference between these two 50px headers that use the Georgia font:

Windows/Ubuntu font comparison - Georgia

The top one is from IE8 on Windows Vista, whereas the bottom one is from Firefox 3.0.15 on Ubuntu 9.04. On Windows, the text is clearly less pleasant on the eye? It is has jagged edges, has a pixel or two cut off the end of the ‘s’ and is 17 pixels less wide.

This is the styling code:

#logo h1 {
font-family:Georgia, Arial, sans-serif;

Read on…

In a previous tutorial we went through some tedious steps to generate 3 images that could be used to create a page shadow. The great thing about the GIMP is that anything you can do with a mouse and keyboard, you can also do via script.

We will generate the following images automatically:

Demo of what we will generate

Why script it?

  • It allows us to tweak settings and quickly re-generate the image to see the results. For example, we can ask ourselves, “I wonder what it’d look like if the shadow was a bit bluer?”
  • We can automatically generate multiple images (including, for example, a image suitable for a CSS sprite).
  • We can can adapt and re-use the scripts for different websites. For example, one website might use square angular edges, but another might use rounded corners – so you can adapt to use rounded corners in the background image by changing 1 line of the generation script.
  • Mice are evil – why involve a mouse when all we need is a keyboard?

Read on…

In this tutorial we are going to create a very basic “blank canvas” webpage which has a central white cut-out with a drop shadow effect. Our “page” will be 960px wide, floated in the center of the browser window:

Tutorial end product

Click to enlarge

Real-world example

a non-blank Canvas
Click to enlarge

Read on…

I’ve just finished a revamp of the PeoplePerHour.com hompage:

Previous Design

Screenshot of previous design

New Design

Screenshot of new design

The new design was needed to give space to spotlight “featured” projects (which are a new addition to the site). I think the homepage should stand out a bit more now because it’s more striking?

If you are making a WordPress theme you owe it to the user of your theme to make sure image alignment works as expected. Most of the Visual Editor formatting buttons use inline CSS which won’t be affected by the theme but this is not the case with the alignment buttons in pages/posts when applied to images.

The red labels show what Visual Editor buttons I’m talking about:

Wordpress visual editor image alignment buttons

Read on…

Next Page »