appleton.me

Regarding the Site Design

Andrew Appleton — Thu, 29 Jul 2010 06:57:57 +0000

Yes, I know that this appears to be the default WordPress theme. That’s because it is.

I am sick of the old design and need some sort of motivation to start over, so this is it. Stay tuned for a redesign, but don’t expect it any time soon!

Float Left

Andrew Appleton — Thu, 04 Mar 2010 12:00:11 +0000

Blimey, I have finally launched a brand new project — Float Left, a teeny tiny web design studio.

I’d love it if you felt like heading over and taking a look and I have written a little bit of an introduction to the site and what I hope to achieve.

IE6 Double Margin: A Simple jQuery Fix

Andrew Appleton — Sun, 03 Jan 2010 14:35:50 +0000

Among the many small irritations we have to contend with when developing a website for IE6 is the so called double margin bug.This bug causes floated elements to render with a double left margin. The bug is described here, and a solution here. Essentially the element must be forced to a state known as “has layout”.

The Original Solution

The solution recommended is as follows:

The work around for this bug is preposterously simple, counter-intuitive and utterly in violation of the W3C recommendations—simply change the style of the floated element to “display: inline” and the problem disappears.

So do this–
   content
   
   content

A slightly cleaner way to achieve this is to create a separate ie.css stylesheet, and add a declaration looking something like this:

.myclass1, .myclass2 {display:inline;}

Cleaner still would be to enclose this ie.css stylesheet in a conditional comment so that it is only served to IE6:

We can now add all of the elements which exhibit this behaviour to the CSS declaration, safe in the knowledge that it will only be seen by IE versions 6 and below.

A Simpler Way

This solution is good, but it does leave us with the problem of having to maintain a long list of id and class names in the ie.css file. A more straightforward way to deal with the issue would be to write a rule stating that all floated elements should also have display:inline; applied. Unfortunately this is not possible in CSS, but we can use a little JavaScript and RegEx trickery to achieve the same thing.

This example uses the excellent and extremely easy to use jQuery JavaScript library, so the first step is to link to it in your page’s element:
Note: I am linking to the Google hosted version of the library, you may prefer to host your own copy and link to that.
Next we will create a separate ie.js file, and link to that in the section of the page:
Be sure to place this after the link to the core jQuery library.

Into the ie.js file, we will add the following:

// Initialise jQuery Regex...
jQuery.expr[':'].regex = function(elem, index, match) {
    var matchParams = match[3].split(','),
        validLabels = /^(data|css):/,
        attr = {
            method: matchParams[0].match(validLabels) ?
                        matchParams[0].split(':')[0] : 'attr',
            property: matchParams.shift().replace(validLabels,'')
        },
        regexFlags = 'ig',
        regex = new RegExp(matchParams.join('').replace(/^\s+|\s+$/g,''), regexFlags);
    return regex.test(jQuery(elem)[attr.method](attr.property));
}

// ...and use it to overcome the 'double margin' bug. Add display:inline to all floated elements
function double_margin() {
	$(':regex(css:float, left|right)').css('display', 'inline');
}

// Let's go!
$(document).ready(function() {
	double_margin();
});

What we are doing here is:

Telling jQuery that we plan to use regular expressions.
Defining a jQuery function (double_margin()) which will search for every element which has float:left; or float:right; applied, and add an inline style of display:inline; to each
Telling this function to fire when the document loads.

There we have it. A simple way to overcome the double margin bug by assigning display:inline; to all floated elements. It should be noted that this method will only work for users who have JavaScript turned on. For this reason it is probably wise to check your web stats before implementing this on a site.

WordPress Relative Post Time

Andrew Appleton — Fri, 04 Dec 2009 12:11:03 +0000

This is a small function I wrote this morning to generate relative time stamps for WordPress posts, similar to those used on Twitter. It is pretty simple to implement, and will allow you to display a relative timestamp simply by replacing the call with in your theme.

What it does

This function displays one of the following, depending on the time since the post was published:

“Less than a minute ago”
“About a minute ago”
“XX minutes ago”
“About an hour ago”
“XX hours ago”
The date in the format “Day Month Year Time” (12 hour)

Implementation

Simply add the following code to the functions.php file of your theme:

 60 && $delta < 120){
        echo 'About a minute ago';
    }
    elseif ($delta > 120 && $delta < (60*60)){
        echo strval(round(($delta/60),0)), ' minutes ago';
    }
    elseif ($delta > (60*60) && $delta < (120*60)){
        echo 'About an hour ago';
    }
    elseif ($delta > (120*60) && $delta < (24*60*60)){
        echo strval(round(($delta/3600),0)), ' hours ago';
    }
    else {
        echo the_time('j\<\s\u\p\>S\<\/\s\u\p\> M y g:i a');
    }
}
?>

You can now display the relative time of a post by adding the following anywhere within the loop:

That’s it really, hopefully it will prove useful to somebody!

Font Squirrel @font-face Generator

Andrew Appleton — Fri, 30 Oct 2009 16:02:55 +0000

I have just discovered Font Squirrel’s new @font-face kit generator.

This awesome little web app allows you to upload a .ttf or .otf font file and convert it to .eot (for IE), .svg (for Opera and iPhone) and .woff (for Firefox 3.6+).

It is awesome for a number of reasons:

It removes the need to to use Microsoft’s horrible WEFT program to generate .eot fonts.
It gives sample CSS and HTML to make it easy to apply nice cross browser compatibility with very little fuss..

Lovely.

Cross Browser @font-face

Andrew Appleton — Tue, 18 Aug 2009 12:58:00 +0000

There has been a lot of talk recently about web fonts and the possibilities opened up to web designers by the @font-face CSS rule. The ability to set web type in fonts other than Georgia, Arial or Verdana will allow designers to be more creative and original with their work.

As always there are some problems to overcome, specifically with cross browser implementation. Internet Explorer has supported embedding fonts in Microsoft’s proprietry¹ .eot format for years, but does not support the .ttf or .otf formats. Firefox, Safari amd Opera have recently added support for .ttf and .otf format fonts, but do not support .eot. Here is a handy table showing what is supported where.

To get around these limitations, we can simply serve the font file in both .eot format (for IE) and .ttf/.otf format (for Firefox, Safari and Opera 10).

Microsoft provides a Windows only tool called WEFT to convert .ttf files to .eot. It might just be the worst software I have ever used, but the end result is a .eot version of your .ttf font. We can now embed this font in both formats as follows (In this case I am using the freely available font Stalker 2² ):


@font-face { /* For IE */
   font-family: Stalker;
   src: url(STALKER0.eot);
}

@font-face { /* For Safari, Firefox, Opera */
   font-family: Stalker;
   src: url(stalker2.ttf) /* This could also be a .otf font */
   format("truetype");
}

As long as we specify the .eot font before the .ttf (or .otf) font, Internet explorer will read the .eot file and Safari, Firefox and Opera will read the .ttf file. We can now call the font in the same way we would any other:


h1 {
	font-family:Stalker;
}

I have not shown it here, but it is probably best to specify fall back fonts for users on older versions of Firefox, Safari and Opera.

This solution is tested in IE6, IE7, IE8, Safari 4 and Firefox 3.5.

Although not for long.
Font licensing for web embedding is a whole other story which I will not get into.

Gallery View 2.0

Andrew Appleton — Tue, 04 Aug 2009 13:10:51 +0000

A project I am working on requires a JavaScript image rotating gallery, so I took a look at the jQuery plugins page to see what was available.

I settled on Gallery View by Jack Anderson. Unfortunately the latest version of this plugin came with no instructions (due to a problem with the author’s web host, I think). After some playing around and asking a few questions on Twitter (thanks @leepowell) I was able to work it out.

I noticed a large number of people commenting on Jack’s site with the same problems I faced, so I decided to put up a simple example page.

Here it is.

Update

The options available in the $(document).ready section have changed slightly from those listed for version 1.x.

Since a few people have asked, I have put together a quick list for reference. This includes all of the new options and excludes older, depreciated options — it can be found here.

Find My iPhone Actually Works

Andrew Appleton — Tue, 23 Jun 2009 07:22:24 +0000

This is a great story about a guy who has his iPhone stolen in a bar and was able to use the new ‘Find My iPhone’ feature of MobileMe to track the thief and get it back.

Postbox

Andrew Appleton — Thu, 18 Jun 2009 08:45:57 +0000

Postbox is a beta Mac/Windows email client which I have been trying out. It is built on Mozilla Thunderbird by one of the original Thunderbird developers and it has a few nifty features which make it worth a look.

If you are a Gmail user you will be familiar with the concept of archiving old mail, Postbox allows you to do this and is integrated with Gmail’s archive function. It also groups inbox messages into conversations, which helps to keep everything organized, and only requires a username and password to get Gmail or Google Apps Mail running.

iPhone 3.0 Tethering Hack for O2 UK

Andrew Appleton — Wed, 17 Jun 2009 21:28:27 +0000

The iPhone 3.0 software was released today, and one thing seemingly missing was tethering – at least for free. The following is a brief tutorial to enable Tethering without adding the monthly plan. Happy days indeed. Note that this only works on a Mac (sorry Windows users).

Obligatory disclaimer: This is most probably against your service agreement. Don’t blame me if you get told off by O2!

So, on with the show:

Update iTunes to version 8.2 if you don’t have it already.

Open Terminal.app and enter the following:

 defaults write com.apple.iTunes carrier-testing -bool TRUE

Download the file ‘o2_uk.ipcc’ from here.
Plug your iPhone in and allow it to sync.
Once the sync is complete, hold down the option (alt) key and click ‘Restore’ in iTunes. A dialogue box will pop up – browse to the o2_uk.ipcc file which was downloaded in step 3.
iTunes will now update your carrier settings.
Now with the iPhone still connected to your Mac by USB browse to Settings, General, Network, Internet Tethering and switch it on.
That’s it! You will need to wait a minute whilst the connection is established, and a dialogue will appear on your Mac telling you that a new network interface has been detected. Click ‘Network Preferences’ and wait until the new connection shows that it is online.

Now when you want to initiate a tethering session, you just need to plug your iPhone in via USB, and turn tethering on in Settings, General, Network, Internet Tethering.

Note that if you are not on O2-UK, you will need a different .ipsw file. There is an AT&T file available here, and I understand that a number of other carriers are supported if you Google for the correct .ipsw file, but I have not tried them out, so I’d recommend a bit of research before going ahead with it.

IE6 Denial Message

Andrew Appleton — Wed, 17 Jun 2009 11:43:46 +0000

I know it has been ages since I posted, but what can you do? Anyway, this made me laugh from John Martz on Flickr.

Here is the original link, and the story behind it.

“Pulp Browsers”

Andrew Appleton — Fri, 01 May 2009 15:19:15 +0000

Hilarious (if you happen to be a big nerd):

What rendering engine do you use?

What?

“What” ain’t no rendering engine I ever heard of!
They support CSS3 in “What”?!

W… What?

CSS3, motherfucker! Do you render it?!

Tweetie vs Twitterfon

Andrew Appleton — Wed, 29 Apr 2009 13:15:23 +0000

Tweetie and Twitterfon are both iPhone Twitter clients with a large following. A mac version of Tweetie has recently been released, and it was this which prompted me to try out the iPhone version. I had previously been using Twitterfon, but decided to give Tweetie a bash. The following is a collection of my thoughts on both apps.

Twitterfon

Twitterfon is a free application which includes a number of nice features. It allows the user to update their location when they post a tweet using the iPhone’s built in location service. It also allows for photos to be uploaded via Twitpic, and has a built in web browser allowing links to be followed from within the app.

Other nice features include the ability to search for tweets near to your current location, automatic URL shortening and the ability to browse current hot trends.

All in all, Twitterfon is an application with a good set of features, but for me at least it is let down by its performance. It has only crashed a few times, but more frustrating is the process of following a link from a tweet. It usually takes a number of taps before it responds, and I sometimes find myself repeatedly hammering at the link button for what seems like ages. This is deeply frustrating, and really sours the whole experience for me.

Twitterfon Interface.

Tweetie

Tweetie costs £1.79 – this is clearly £1.79 more than Twitterfon, but it does add a few features which make it worth the money. First is the ability to manage multiple Twitter accounts. Useful if you have (for example) a business account and a personal account. It includes all of the functionality of Twitterfon – you can search for nearby tweets, update your location, post to Twitpic (as well as yFrog of Mobypicture) and post shortened links.

The two big wins for Tweetie are integration with Instapaper¹, and general stability. Taps are all registered correctly, and a small visual cue is given to show that it has happened – something which I feel is lacking in Twitterfon. In addition Tweetie has a few extras which make it easier to use Twitter – you can search for a user and view their profile, and you can view your own profile. This may not seem important, but in Twitterfon you need to search for a tweet which includes your username, and then follow a link from there (which can get annoying when the links aren’t responding to your taps).

Tweetie Interface.

Verdict

I guess you might have worked out by this point that I prefer Tweetie. It offers all of the features which I have come to expect from using Twitterfon and adds a few more. It seems more stable and responsive, and as a bonus I much prefer the ‘simple’ Tweetie skin (which can also be changed to ‘dark’ or ‘chat bubbles’) to the Twitterfon interface. In addition, Instapaper integration is an excellent feature.

All in all I would say that Tweetie is money well spent, and the value it adds over Twitterfon is worth the £1.79 cost.

Instapaper is an awesome little utility which allows you to save web pages for later veiwing. Perfect for a long article which you want to read later.

“View Suspended”

Andrew Appleton — Fri, 17 Apr 2009 14:20:31 +0000

This is rather late in the day given that the Honda F1 team is now no more, but I think interesting nonetheless. For the 2006 British International Motor Show, Dutch artist Paul Veroude put together a real life exploded view of a Honda F1 car. It features all 3200 individual parts, and people were allowed to walk around and in between them.

A panoramic view of the piece is available here.

Understanding Twitter

Andrew Appleton — Wed, 15 Apr 2009 07:08:45 +0000

It’s about time that somebody came up with a proper explanation for Twitter. McSweeny’s nails it:

Twitter seems to be, first and foremost, an online haven where teenagers making drugs can telegraph secret code words to arrange gang fights and orgies. It also functions as a vehicle for teasing peers until they commit suicide.

There is also a succinct explanation for the ‘fail whale’:

Twitter is electric/computerized and available at all times, except when sexual misconduct and murder are “over capacity.” During these times, teen drug makers see a picture of a dead whale alerting them to bad energy.

UPDATE: On a similar theme, “Keith Starky Explains Twitter“.

That Damned DiggBar

Andrew Appleton — Tue, 14 Apr 2009 13:17:16 +0000

Oh dear. Digg launched a new ‘feature’ last week which has rather upset a few people.

The DiggBar enables you to Digg, read comments, find related content, and share stuff from any page on the Web. And it’s presented in a short URL format, making it easy to share in emails, on Twitter, and via other services.

The DiggBar frames the target web page, adds a few adverts for good measure, and then presents it under a TinyURL style short link. In short, this is what can be expected by website owners who have their pages framed by Digg:

Your site will be displayed as normal, but your URL will be lost. The user has no way of bookmarking your page directly, and no way of returning to it.
Similarly, the user cannot copy and paste your URL.
The user’s browser history will simply read as a long list of Digg URLs.
Digg’s traffic will be artificially inflated.
Digg will be able to serve adverts to your users, and make money from them. The more popular your site, the more money Digg make.
Digg will get all link credit for your content.

This makes it incredibly difficult for a new site (such as this one) to generate any sort of link equity. This has caused a lot of anger, and has led to the release of a DiggBar blocker for almost every web publishing platform you can think of ¹.

I have implemented this JavaScript Solution which redirects users to the intended destination minus DiggBar and with the correct URL intact. Try it out by following this link.

And just for an added layer of hypocrisy, here is a rant from Digg co-founder Kevin Rose when he found another site was framing the web page of his Diggnation podcast.

Diggbar Blockers: PHP, WordPress, Greasemonkey (Firefox scripts), ExpressionEngine, Django, Ruby on Rails, JavaScript (This redirects users to your page sans-DiggBar rather than blocking) and Drupal

MacHeist

Andrew Appleton — Tue, 07 Apr 2009 14:05:03 +0000

The third incarnation of the MacHeist bundle has reached its final unlock level, meaning that all applications are now available.

MacHeist has caused much discussion on the web, sparked mainly by the controversy surrounding the first version (in late 2006). The issue many indie developers ¹ had at the time was the flat payment model (developers were paid a flat rate regardless of the number of licenses sold). This was addressed in version 2, and devs were paid per license. In addition, MacHeist has been donating 25% of each sale to charity. You might say that they could be giving away more, but I think that it is pretty generous (there is no obligation for them to be giving any of their revenue away).

Smoking apples has a good rundown of “Why it’s okay to buy the MacHeist bundle”, the key point for me being that developers are getting an awful lot of licenses sold (in difficult economic times) and a lot of publicity. M Cubed software participated in the Mac Bundle Box promotion a short while ago, and they point out that a large amount of revenue was generated for only a small increase in support load. This is a decision that each developer has taken freely, they are not stupid, they were not tricked into it and they knew what they were getting – a sentiment echoed by John Gruber.

All of this aside, I have put down the $39 for the bundle this morning, prompted mainly by the inclusion of Espresso and Acorn. I suspect that few people buying a bundle like MacHeist will use every app, rather they will purchase it to get a reasonable discount on a few applications. This is certainly the reason I have bought it, and the following are the apps which really swung it for me.

Espresso

I had been using the trial of Coda for a few weeks, and really liked it. I fully appreciate that $99 is a reasonable price for what is an exceptional piece of software, and if I made a living from web design, I would buy it in a heartbeat. That said, is is a bit pricey for what is essentially a pass-time for me (especially at the current dollar to sterling exchange rate).

I tried Espresso out a few weeks ago, and have found it to be a very good substitute. Like Coda it has a built in FTP client, and adds code folding – which I find very helpful.

Acorn

As with the web development application, I had been in the market for a simple image editor for a little while. I had tried Acorn and Pixelmator, as well as GIMP.

GIMP is my favourite Windows image editor, but the mac port is just so ugly and difficult to use. I can appreciate that it is an open source project into which people put a lot of time and effort, but it is just a bit clunky on OS X to be a useful day to day application. Acorn by contrast is simple, easy to pick up and has a lovely clean interface which really helps to make features easy to find and use.

My only gripe is the lack of alternative format support – it would be nice to be able to open and edit Photoshop (.psd) or GIMP (.xcf) files²

Times

This is a different take on a feed reader. Designed to resemble a newspaper layout, Times takes a number of feeds and shows headlines in a print style layout. It makes for a good way to get the day’s news during a break, is beautifully designed and extremely easy to use.

Apps I may Use

In addition to the apps above, I can see myself having some use for Sous Chef, Delicious Library, The Hit List and Phone View although I guess time will tell on these.

For example Gus Mueller of Flying Meat Software
Acorn does feature a plug-in architecture, and I have already found one to export to .psd – just need to be able to open them as well.

What’s Wrong With URL Shorteners

Andrew Appleton — Mon, 06 Apr 2009 15:59:53 +0000

In a piece on his blog, Joshua Schachter argues that URL shortening services are bad news:

The worst problem is that shortening services add another layer of indirection to an already creaky system. A regular hyperlink implicates a browser, its DNS resolver, the publisher’s DNS server, and the publisher’s website. With a shortening service, you’re adding something that acts like a third DNS resolver, except one that is assembled out of unvetted PHP and MySQL, without the benevolent oversight of luminaries like Dan Kaminsky and St. Postel.

Joshua points out that in relying on a web service’s database to resolve all of our links, we are placing a lot of faith in them being able to stay online, and to maintain all of their data indefinitely. Were TinyURL to suddenly disappear, a huge chunk of the links and information on sites such as Twitter would be rendered useless. Archiveteam.org points out exactly what is wrong with this approach:

Twitter is a great example of what’s wrong with trusting an online service with something of value. Check out some ‘tweets’:

Hah, I’m a Zombie! http://tinyurl.com/8gnnb7 Ahh, the fun we all have with each other. about 1 hour ago from web

Health privacy is dead. Here’s why: http://ff.im/GMpx about 14 hours ago from FriendFeed

Hmm, friendfeed released a new “import Twitter” feature today. It is taking a LONG time on my account. I wonder why…. http://ff.im/GM5W about 14 hours ago from FriendFeed

If these TinyURL services go away, there’s not much content here.

Jason Kottke would like to see Twitter running its own shortening service. This will remove the problem of dead links, since the Twitter-shortened URLs will be around for as long as Twitter is. It does not however address the issue of opaque links – that is not knowing the target of the link.

1) That they automatically unshorten all URLs except when the 140 character limit is necessary in SMS messages.

2) In cases where shortening is necessary, Twitter should automatically use a shortener of their own.

That way, users know what they’re getting and as long as Twitter is around, those links stay alive.

I think this would go a long way towards avoiding the problem (for Twitter at least).

Google: “All Your Tweets Are Belong To Us”

Andrew Appleton — Fri, 03 Apr 2009 17:52:44 +0000

Rumors are circulating that Google are close to completing a takeover of Twitter for a sum “well north of the $250 million valuation that they saw in their recent funding”.

I have already posted about why this is makes sense for Google, and considering that Twitter has seen a 974% increase in users over last year¹, they look like a very attractive proposition.

TechCrunch have the full story.

UPDATE: Kara Swisher calls bullshit on the whole story and cites TechCrunch as having previous:

On July 28, 2008, TechCrunch reported: “Google In Final Negotiations To Acquire Digg For ‘Around $200 Million,’” and said there was a letter of intent signed.

According to The Telegraph

Google Car Run Out of Bucks Village

Andrew Appleton — Fri, 03 Apr 2009 13:02:07 +0000

The Times is reporting that an “angry mob” has run the Google streetview car out of their village in Buckinghamshire (UK). Residents of Broughton formed a human chain, and eventually persuaded the car to leave.

The residents reasoning was that there had recently been a spate of burglaries in the area, and that this would serve to make things worse. I particularly like the classic NIMBY quotes from resident Paul Jacobs:

My immediate reaction was anger; how dare anyone take a photograph of my home without my consent? I ran outside to flag the car down and told the driver he was not only invading our privacy but also facilitating crime

Also:

This is an affluent area. We’ve already had three burglaries locally in the past six weeks. If our houses are plastered all over Google it’s an invitation for more criminals to strike.

If Google’s streetview imagery is an open invitation to burglars then Mr Jacobs has practically rolled out the red carpet by alerting The Times to this affluent, easy target for burglars.

Another point worth making is that the Google is only taking photos which anyone could legally take if they happened to go to a particular place – they are just making this public domain information more easily accessible.