The Watchmaker Project

iPhone Apps - what's the point?

Maybe I’m just dumb, but I really can’t see the point of many of the new applications available to download through Apple’s new App Store. If your app needs to be online to work, and doesn’t do anything clever with Core Animation or similar—why not just run it as a web app?

Why do I want to run NetNewsWire as an application (and tie up the rest of the iPhone) when it’s doing exactly the same thing as the mobile NewsGator web app?

Adding it up with AddItUp

Non-Twitter followers might be interested to know that I’ve just launched a new site and accompanying blog to discuss and track progress on a web application I’m building.

Entirely coincidentally, Drew launched Project Dog Food at almost exactly the same time—it will be interesting to compare our respective progress as the summer goes on.

Refresh Cambridge July - PPC management

Refresh Cambridge (which by my reckoning is entering its third year right about now) met last week for a discussion on Pay-Per-Click (PPC) management, led by Rob from local agency db|design.

Due to the varying levels of experience in the audience, the Q&A covered everything from the basics of how PPC works through to using Google’s Adwords and Analytics tools together to monitor, tweak, and improve your ad performance.

I wasn’t taking any notes, but here (to the best of my recollection) are some of the areas we talked about:

The simplest definition of Pay-Per-Click is that it is paying to have your advert show up at the top or on the right of Google’s search results pages. There are other search companies that operate PPC, but for the amount of effort needed to gain the small amount of traffic they deliver it’s usually better to just concentrate on Google.
Ad spaces are ‘sold’ in an auction system—advertisers bid for spots, and the amount you are willing to pay determines where in the sponsored results your ad will appear.
There are benefits to appearing in the first sponsored result, even if you also show up in the regular (“organic”) listings as well.
The best position in which to appear is around the fourth or fifth on the right-hand side of search pages. (YMMV)
The biggest mistake made by beginners is not having enough keywords. You should have a few thousand at least.
Once your campaign is running, you can see which keyword combinations perform best, and tweak your bids or keywords correspondingly.
By using Analytics you can see the performance of your Adword campaigns/keywords, allowing you to make decisions based on conversion as well as the number of clicks.

Rob also shared a little trick with us. There is the option to set a daily limit on your ad spend within Adwords, but setting this to a sensible limit (e.g. you have a £100 monthly budget, so you set a daily budget of £3) will make Google severely restrict how many times your ads appear. Rob recommended setting the daily limit to an extremely large figure—say £10,000—so that your ads are shown much more frequently; you can control your actual spend by manipulating the maximum bids on your keywords.

How To Make An IP-To-Country Tool With PHP and MySQL

When it comes to creating web applications, there is no guarantee where your audience will hail from. You might be in sunny California, but in today’s global community it is almost certain that an English-language application will attract visitors from Canada, the UK, Australia, and probably many other countries as well.

With that in mind, it would be nice to offer your users location-sensitive content. This is true whether your app is built around country-specific features (a shopping site, for example) or simply for pre-filling the country and timezone dropdowns on your registration form.

In this tutorial, we will create a database that allows us to map an IP address to a country, and use that information to serve up location-specific content.

Creating the database

Your database structure will depend, in part, on the data you intend to use to populate it. I am using the free IP to Country database from Webnet77 so my structure is based on that file, but most (if not all) ip-to-country datasets contain the following fields:

A lower numeric bound
An upper numeric bound
The registry in charge of that range of IPs
The date the IP range was last updated
A two-character code for the country
A three-character code for the country
The full name of the country

In your chosen MySQL database, create the table, mapping fields to data columns in the order in which they appear:

CREATE TABLE `iptocountry` (
`lower_bound` int(11) unsigned NOT NULL default '0',
`upper_bound` int(11) unsigned NOT NULL default '0',
`owner` varchar(20) NOT NULL default '',
`last_updated` int(11) default NULL,
`two_char_code` char(2) NOT NULL default '',
`three_char_code` char(3) NOT NULL default '',
`country` varchar(100) NOT NULL default ''
);

Importing the data

The raw data is in the form of a 6MB .csv file containing over 80,000 lines of data. What we will do is upload it to our site and create a PHP script to read the file into the database, one line at a time.

With such a large dataset, it’s a good idea to spit out regular status messages to make sure our script is behaving—it’s better than waiting for some sort of response and not being sure whether it’s worked or not. Normally, PHP will only write content to the page when the entire script has finished, but by using the flush() function we can force the output buffer to print any output line-by-line. I use a handy wrapper function to accomplish this:

function status($str)
{
echo $str . ' ';
flush();
}

Onto the script. We’ll upload it to the same folder as the .csv data file. First we need to connect to our MySQL database:

$db = mysql_connect('localhost', 'root', 'root') or die('Could not connect to database');
mysql_select_db('iptocountry', $db) or die('Could not select database');
status('Connected to database successfully');

Next we open the data file for reading, using PHP’s fopen() function:

$fh = fopen('./iptocountry.csv', 'r');
status('Opened csv file for reading');

We need to loop through the data file one line at a time (ignoring any commented lines). Each line needs to be stripped of the quotes that wrap each field; split into its component parts (separated by commas); and then inserted into the table. We’ll print the MySQL query used, and also any error messages thrown.

while (!feof($fh))
{
$line = str_replace('"', '', fgets($fh));
if (substr($line, 0, 1) != '#') // Ignore commented lines
{
$arr = explode(",", $line);
$sql = "INSERT INTO iptocountry VALUES ('" . implode("','", $arr) . "')";
mysql_query($sql);
status($sql);
if(mysql_error())
{
status(mysql_error());
}
}
}

The handy fgets() function reads through the file returning a single line each iteration. If the line doesn’t start with a #, we explode() it around the separating commas, and insert it into the database using implode() to recreate the query. (Note that the query assumes that the data appears in the same order as our fields—if you are using a different data source than me, make sure your data and table structure match up.)

Finally (and because we’re responsible developers) we close the two connections in use:

fclose($fh);
mysql_close($db);

Running the script should generate a huge page of status messages as each record is inserted into the database.

Using the data—where am I

So now we have a database that can translate an IP address into a country—how do we use it?

Your site visitor’s IP address can be retrieved from the $_SERVER collection:

$ip = $_SERVER['REMOTE_ADDR'];

To translate the four-part IP address into a single numeric value, you need to convert the a.b.c.d format into d + (256 * c) + (256 * 256 * b) + (256 * 256 * 256 * a). We can do this by splitting the IP address on the period:

$parts = explode('.', $ip);
$numeric_ip = $parts[3] + (256 * $parts[2]) + (256 * 256 * $parts[1]) + (256 * 256 * 256 * $parts[0]);

Now all that remains is to query the database for the row where $numeric_ip is between the lower and upper bounds:

$db = mysql_connect('localhost', 'root', 'root') or die('Could not connect to database');
mysql_select_db('iptocountry', $db) or die('Could not select database');
$sql = "SELECT two_char_code FROM iptocountry WHERE lower_bound <= $numeric_ip AND upper_bound >= $numeric_ip LIMIT 1";
$result = mysql_query($sql);
$row = mysql_result($result, 0);

The variable $row now contains the two-character country code of your user.

Potential applications

There are plenty of ways that this information can now be used. Apart from the aforementioned pre-populating of country dropdowns, you could also:

Select the correct translations of your content
Include the correct static file for the country: include(“sidebar-‘ . strtolower($row) . ‘.html”); *Use the country code to query country-specific APIs, such as Amazon’s
I will be making use of the latter, using the geo-aware script to query the correct Amazon API and generate links to the relevant site for my visitors.

Maintenance

IP address allocations can change, so if you were using this technique in a mission-critical application it would be a good idea to clean and re-populate the database every now and then.

If you were particularly hardcore, I imagine it would be fairly easy to suck down the gzipped .csv file direct from the source, unzip it, and run the import script, all as a scheduled task on your server.

Staying connected to home with LogMeIn

Via the BBC, of all places, I read yesterday about the free remote desktop utility, LogMeIn. And after giving it a test-drive today, I’m smitten.

Available for both Mac and PC, LogMeIn is a remote control facility for your computers. After registering, you download and install an application on each machine that you want to be able to control. Then, when you suddenly realise you’ve left that important file on your home PC, you can log into the logmein.com site, select the relevant computer name, and take complete remote control of your other machine.

The site works over HTTPS, so even through a corporate firewall I was able to take control of the iMac sitting on my desk at home and blast out some unexpected heavy metal at my wife. It also syncs your clipboard, allowing copy+paste over the remote connection.

The screen updates slowly as you switch between applications—I wouldn’t want to attempt any actual work remotely—but for the kind of things I am likely to want to do (email stuff to myself, retrieve files, or manage downloads) the service is ideal.

They also offer a paid version from $13/month for 1 PC, which adds the ability to sync files, drag and drop files between machines, and share printer connections.

1001s

A couple of 1001 lists have been knocking about the internet recently. 1001 Movies You Must See Before You Die and 1001 Books You Must Read Before You Die (list here) both demand you waste the best part of an hour scrutinising and checking off your own consumption.

My final tally was 265 films, but only 71 books. Must try harder—in particular, I am embarrassed to admit that I have never read any Dickens. I also seem to have watched precious few films from the 1940s, for some reason.

Relaunched freelance site

Yesterday I pushed out a new version of my freelance site, the first new design since 2005.

Objectives

When I originally launched the site, I intended to regularly update the ‘corporate’ blog, but in the end I only managed half-a-dozen posts before apathy set in. This redesign, then, relegates those few entries to an archive (maintaining the old URL structure to avoid broken links) and pushes the portfolio pieces front-and-centre, the latter now also featuring client testimonials.

In the four years since I started freelancing, I’ve also refocused the areas in which I work—before, the site had a generic web design focus, but I’m now highlighting the three areas in which I generally work: HTML/CSS templating, application development, and SME site design/build. Add a contact form, and the site has everything it needs.

Design and Inspiration

Browsing design galleries might give me lots of inspiration, but when it comes to execution I struggle to translate my ideas into cohesive design mock-ups. After many failed attempts at creating a design that I liked, eventually I decided to strip the site back to a few simple blocks of content, with very little ‘design’ going on.

The final site uses a six-column grid and a strong baseline to align every element (notice how the screenshot thumbnails sit on the same line as the testimonial text).

There are a few sources of inspiration evident in the eventual design:

I borrowed the huge headers and attention to typography from Garrett Dimon’s site
The colour strip with clipped corners and curled-up shadow effect is lifted wholesale from an earlier version of Eris Free’s blog
The link colour is identical to that used on the CodeIgniter and ExpressionEngine sites, in homage to Jesse Bennett Chamberlain’s influence on modern web design

Development

I wanted to take this opportunity to have a play with some of the more advanced aspects of CSS—have a poke through the CSS file for a closer look; the site makes use of:

generated content
CSS columns
:first-child and :first-letter
adjacent sibling selectors
opacity
fixed positioning
text-shadow

The few browser hacks that were necessary are included within the main CSS file. It seemed more sensible than downloading a whole extra stylesheet for IE6 and 7.

With the removal of the blog I no longer needed to stick with the Textpattern backend of the old site, so I replaced it with a simple CMS built on CodeIgniter.

Performance

The site is also optimised for performance (or, at least, YSlow’s version of performance). The .htaccess file sets far-future expiry dates to encourage asset caching, and uses mod_gzip (or mod_deflate, if mod_gzip isn’t available) to reduce the filesize of pages.

All the JavaScript (jQuery and the jQuery lightBox) and the CSS is also compressed using the YUI Compressor before being uploaded.

Odd jQuery gotcha: IE and .html()

Here’s an odd one.

If you use jQuery’s .html() method to find a string of HTML, beware if that HTML contains any elements that have events registered—you might get a little more than you bargained for.

Here’s a simple test case:

And the JavaScript to attach an event to the button that alerts the HTML contained in its parent element (the div):

$('#test').click(function () {
var x = $(this).parent().html();
alert(x);
});

Run the code in Firefox, and you get the expected result—the HTML contained within the div:

But try the same code in IE and you get a very different result:

What’s that all about, then? Given that I was trying to parse a number out of the content, this behaviour threw a rather large spanner in the works.

The alternative, if you don’t strictly need the tags, is to use .text() instead—but it’s still an odd example of what can happen if you’re not careful about browser testing your scripts as well as your HTML and CSS.

Is it time to re-introduce sound to the web?

So why can’t web pages have sound effects?

It was probably one of the first things you did when you first started playing with HTML, but background music, and funny sound effects when you clicked buttons, went the way of the spacer gif—web design matured, and web standards took over.

But—now that “the web is the desktop”, and online applications become increasingly harder to tell apart from their OS-bound counterparts—can anyone remind me again just what is the compelling reason for not using sound effects on the web?

Desktop apps have always used sound as part of their UI. Sounds communicate change, error, or demand attention. As I type, Twitterific whistles at me; Word complains if I try to jump past the end of the current line; and Adium alerts me to the comings and going of my online friends. And yet, on the web, where we dissect and discuss every tiny nuance of design’s ability for communication, sound is all but ignored. (The only exception I can think of is 37signals’ Campfire, which gently ‘bongs’ at you when there is an updated message to read.)

“It’s an accessibility thing!” is a tempting argument, and certainly, allowing people to control embedded media would be an important concession. But there is no outcry over the inherent inaccessibility (or in-anything-else-ness) of sound effects in desktop applications, so it seems a rather weak argument.

A better one might be that sound effects can be large files, and thus slow down a web page—but if effects are part of the UI, and likely to be triggered by click or mouseover events, then the .wav files can be post-loaded in the same way as any other media to be revealed through user action.

It seems to me that there is no reason at all not to use appropriate sound effects as part of a web application—and, in fact, it might be a benefit to users who are used to audible as well as visual feedback.

Internet semi-famous

Yesterday saw a couple of spikes in site traffic. Jon Hicks mentioned my grid calculator during his presentation at FOWD, which instantly quadrupled the traffic to that page:

And, almost simultaneously, Smashing Magazine included my comment form in their Web Form Design: Modern Solutions and Creative Ideas post, which pushed the daily visits over 1,000 for the first time:

Which was nice.