Edd's Log

On Sunday my brother and I rode the British Heart Foundations,...

Mon, 21 Jun 2010 21:56:18 +0100

On Sunday my brother and I rode the British Heart Foundations, London to Brighton Bike Ride. However, unlike most of the 30,000 cyclists rather than getting on a bus back to London we decided to ride all the way back to London. 107 miles covered, 7 hours in the saddle, and we still made it home for lunch.

Firefox 3.6's CSS Font-Stretch Support

Tue, 09 Mar 2010 14:53:09 +0000

For a brief history of font-stretch I would recommend reading an article by Mr Richard Rutter: Whatever happened to font-strech?. Playing with Firefox 3.6 it would seem some support for font-stretch has been introduced though. My problem lies however, with how it deals with font’s that are missing the required ‘stretch’.

Having read through a number of the bugs in the Mozilla and WebKit bug systems it would seem there has been a major hold back on releasing font-stretch till a solution that could ‘imitate’ the effect for people without the right variant of a font. This is great as shipping a solution that only works for a few people is never a good idea. Unfortunately, the support that exists in 3.6 is somewhat wonky and feels unfinished.

In my tests I have the variants of Helvetica Neue installed:

Helvetica Neue
Helvetica Neue Ultra Light
Helvetica Neue Condensed Bold

I do not have the variant Helvetica Neue Condensed Ultra Light. This is however the variant of the font I want the browser to try and use. So as a good little web developer I style this text:

Hello World

With the following style:

h1 {
  font: 100 2em 'Helvetica Neue',sans-serif;
  font-stretch: condensed;
}

This says using a font-weight of ‘ultra-light’, sized 2em, font face of Helvetica Neue if you have it any sans-serif font if you dont. Oh and can you try and make it have a condensed stretch. As Firefox 3.5 does not understand font stretch it ignores that line and renders the text as it knows best. Firefox 3.6 on the other hand understands that I would like a font-stretch of condensed. This should be good news right? I might get something pretty coming out the other end. This is what the rendered output actually looks like:

I have included the latest webkit nightly as a control, this is also how its rendered in every other browser I tested under.

WTF? Where did that come from? For some reason Firefox has decided that the font-stretch can out rank, and thus ignore, the font-weight. Font-weight a control that has worked for many many years. This is so frustratingly not even similar to what I wanted. I can’t work out if this is a bug or if this is indeed what the gecko developers actually would have expected to be rendered in this situation. In my opinion this is worse than no support. If font weight was the new control and we had stretch for ever I could comprehend this change.

So my tip: unless you are using @font-face or know for certain users have your font. Stick clear of font-stretch in css or have some rather unexpected outcomes.

"Offline Application Cache available in HTML5 is killer. However, it’s a giant PITA to debug,..."

Thu, 26 Nov 2009 14:39:41 +0000

“Offline Application Cache available in HTML5 is killer. However, it’s a giant PITA to debug, especially if you’re still trying to get your head around it.”

- Jonathan Stark - Debugging HTML 5 Offline Application Cache

"TextMate Bundle [that] adds text expansions for Google AJAX Libraries"

Fri, 30 Oct 2009 11:46:40 +0000

“TextMate Bundle [that] adds text expansions for Google AJAX Libraries”

- koorb’s textmate-google-ajax-libraries-bundle. This just made me quite a lot happy.

"A war? When did Apple start a war? I distinctly remember Steve Jobs saying he wanted 1 percent of..."

Thu, 29 Oct 2009 11:19:31 +0000

“A war? When did Apple start a war? I distinctly remember Steve Jobs saying he wanted 1 percent of the phone market. I don’t remember any rhetoric about invading Poland. Do you?”

- PacMan3000’s response to Apple Cannot Win The Smartphone Wars. (via John Gruber)

Don’t Tell Me, Show Me!

Tue, 27 Oct 2009 10:00:00 +0000

Over on Malarkey’s blog Relly is currently doing a series on posts on how to write copy to convert your audience in to customers. After reading her posts I thought I would chime in with some badly written copy that has been written to target the wrong audience.

modx is, as far as I can work out, some kind of php based framework. However, as a developer who cares about developing websites, after 15 minutes on their site looking for a compelling reason for me to use it all I come away with is some marketing crap about “my clients”.

Even on the page entitled ‘develop’ I was still left wondering what exactly it can do and how it does it.

[…] the MODx project has been concerned (probably overly so) with being a great solution for developers. We still are firmly in that camp today. The resources below should help you get up to speed fast.

The page then goes on to list things such as job listings, the fact they use SVN and a link to the bug tracker. None of these answered the simple questions of: how easy is it to develop using?

Two sites that, as a developer, had me hooked within a couple of moments of finding them were Django and jQuery. On the Django site one of the first links you come across is:

Dive in by reading the overview

This overview shows you real code that can make a Django site run and on first reading its damn easy to make a Django site run. The jQuery website has mastered showing people what makes it awesome as they have this line of code on their homepage:

$("p.neat").addClass("ohmy").show("slow");

With a “run code” button bellow it. In one line and a button they show you how ridiculously easy and quick it is for you to create neat effects and animations. Both of these sites show you their code up front. They don’t hide anything back and it all looks really easy to accomplish something real.

Now I am sure modx is a really good php framework. But in a world with so many php frameworks, having a pretty website is only half the battle, it needs to show developers why its a really good framework.

Previewing Short URL’s

Wed, 21 Oct 2009 18:11:00 +0100

The instructions in how to do this are written for OS X but should translate fine on to any other operating system

With the rise in short url services the internet (but mainly twitter) is becoming a spammers dream. They can now create a URL that comes from a website you trust tinyurl.com, is.gd, bit.ly, j.mp, tr.im, etc. and takes you to myspamsite.com. The first url shortener that really gained traction, tinyurl.com, had a method that enabled you to preview urls. Unfortunately the newer shortening services often fail to provide this service. So when you click on a short url you could be being taken anywhere.

To combat this I decided to create a script that could use the longurl service to display a click through to the actual destination site.

Step 1: Hijack Requests To URL Shorteners

Launch Terminal.app from the /Applications/Utilities folder.

We want to divert requests from the popular url shorteners to your local apache. To do this we need to edit your hosts file.

If you’re using TextMate and have installed the UNIX mate command, then you can edit the file like this:

mate /etc/hosts

You will need to add the following lines to the bottom of that file:

127.0.0.1   bit.ly
127.0.0.1   tinyurl.com
127.0.0.1   tr.im
127.0.0.1   is.gd
127.0.0.1   j.mp

This tells your computer to send requests for those domain names to your local server. Now if you try and go to any of those domains you will should get a message telling you you can’t connect to the server.

Step 2: Configuring Apache

The next thing you need to do is to tell Apache to listen for these requests so it can serve a page for you. To do this you need should edit the httpd.conf to tell it to include the virtual hosts configurations. Start by loading up httpd.conf:

mate /private/etc/apache2/httpd.conf

Scroll to the bottom of that file and there should in a list of external files. You need to ensure the line under the heading Virtual Hosts reads:

Include /private/etc/apache2/extra/httpd-vhosts.conf

With no hash (#) at the beginning of the line. Once you have made that modification save the file and close it. You then need to open httpd-vhosts.conf using the line:

mate /private/etc/apache2/extra/httpd-vhosts.conf

In this file there will two dummy virtual hosts. You first need to comment them out by placing a hash symbol at the beginning of every line. You then need to add the following virtual host:


    DocumentRoot "/Users/YOUR_SHORT_NAME/Sites/expand_url"
    ServerName bit.ly
    ServerAlias tinyurl.com
    ServerAlias tr.im
    ServerAlias is.gd
    ServerAlias j.mp

Changing YOUR_SHORT_NAME for your short name. The only lines that should not start with a hash in that file should then be the virtual host that you have just pasted in and the NameVirtualHost *:80 line.

Once this is done, save that file and close it. You then need to start apache. To do this you can load up System Prefrences, click on sharing, then tick ‘Web Sharing’ (if it is already checked, uncheck it then tick it again so the server gets a restart).

Step 3: Creating the Un-Shortener

Next we need to create the folder that we told Apache to look at in the virtual host. You can do this by typing in your terminal window:

mkdir ~/Sites/expand_url

You then need to create two files to put in there. The first of which is the .htaccess file. This file is hidden from view in the finder so the easiest way to create it is by typing in the terminal:

mate ~/Sites/expand_url/.htaccess

Paste in to this file:

RewriteEngine On
RewriteRule ^.*$ expand.html [PT,L]

This turns on mod_rewrite and sends all requests at a file called expand.html. expand.html is the next file that you need to create. It can be created using the line:

mate ~/Sites/expand_url/expand.html

This file is going to take the url that you are trying to look at and change it into a long url that you can look at before decided whether to proceed to the destination or not. You need to paste the following in to this file.



Preview



loading...

Once this file is saved you have then successfully set up the url expander.

Step 4: Enjoy Knowing Where Your Browser is Heading

Well this isn’t really a step. To test your new expander you can try and load a short url. I find that this is invaluable against being taken off to sites that you don’t know what are. If you got stuck with any of the steps feel free to and I will try and help.

Making Stairs Fun (via ashaj

Wed, 21 Oct 2009 14:27:00 +0100

Making Stairs Fun (via ashaj

"Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of..."

Mon, 21 Sep 2009 16:24:27 +0100

“Safari has a not-so-lovely way of bulking up text using sub-pixel rendering. On previous versions of Safari, this was fixed with a text-shadow declaration, but since Snow Leopard that method no longer works. Fortunately, I’ve found an alternative.”

- Thin Text in Safari with Snow Leopard

Incredible, amazing, awesome Apple (via John Gruber)

Fri, 18 Sep 2009 14:26:36 +0100

Incredible, amazing, awesome Apple (via John Gruber)

"As Mac users, the admiration and passion we have in using the products is just as strong as the..."

Tue, 15 Sep 2009 16:27:46 +0100

“As Mac users, the admiration and passion we have in using the products is just as strong as the obsession we have in looking at them”

- Simply Apple (via Minimal Mac)
A stunning selection of photos of Apple products. Well worth a look at.

"If you don’t want people to download the latest episode of Lost, don’t wait 6 months for it air in..."

Fri, 11 Sep 2009 11:26:33 +0100

“If you don’t want people to download the latest episode of Lost, don’t wait 6 months for it air in the UK, only for it to be consigned to a cable or satellite TV channel.”

- Generation Y-pay - Andy Budd
That is the the main reason you find me “stealing” videos. Having to wait while its already being discussed on the internet sucks.

Verdanagate A short on the Futura & Verdana Ikea decision. I...

Wed, 09 Sep 2009 23:46:59 +0100

Verdanagate

A short on the Futura & Verdana Ikea decision. I see what he did there only using Futura during the video.

"Baseline makes it easy to develop a website with a pleasing grid and good typography."

Tue, 08 Sep 2009 19:11:51 +0100

“Baseline makes it easy to develop a website with a pleasing grid and good typography.”

- Baseline Framework

As NetNewsWire is switching to use Google Reader I have migrated...

Wed, 02 Sep 2009 18:46:21 +0100

As NetNewsWire is switching to use Google Reader I have migrated my feeds over so that I can continue to have them synced on multiple devices. At the moment though the iPhone NetNewsWire client doesn’t yet sync with Google Reader so instead I have been using the Google Reader website. This for the most part is fine, I just wish that Google had thought a little more about usability and readability when designing it.

You are able to pick what page you are presented with when you launch the webapp and I have it set to “Feeds List” as I like to catch up on all my feeds rather than just one folder of my feeds. The problem with this display though is that rather than just giving me my feeds, it prepends them with a large collection of items I never use. When I launch Google Reader its undoubtably so I can read some feeds, this seems to be the last thing that Google want you to do. If Google want to give me the option to see: ‘Read items’, ‘Starred items’, ‘Shared items’, ‘Notes’, People you follow’ or ‘Comment view’ can they please put them under a ‘Other Features’ folder or some such so I can get down to… you know… reading my feeds?

Once I have managed to get passed this problem and found the unread feeds the next problem starts when I try and read the items. Now given that the webapp is only going to be read by people who are on the move and people who probably won’t be sitting at a desk you would think that the most important factor in designing the display of this information is going to be geared towards readability. The problem seems to be that this escaped the mind of the designer tasked with the google reader mobile interface. You are forced to squint at tiny text with very little line height and even less padding on the sides. It makes me feel like an old man having to pull out a magnifying glass.

I think its time to Feed a Fever

Since I installed Snow Leopard I have noticed that the CSS...

Mon, 31 Aug 2009 20:59:00 +0100

Since I installed Snow Leopard I have noticed that the CSS Text-Shadow Hack used to make Safari render light text on a dark backgrounds beautifully no longer works. As you can see from the above image the before installing text (left) has superior rendering over the after installing (right)*. Unfortunately I don’t know why this is happening or how to re-enable the old behaviour, so if you do know: drop me an email.

*The image actually used for comparison is of Malarkey’s For A Beautiful Web screenshot borrowed from flickr as I don’t have any screenshots of my site from before I upgraded.

Performance

Mon, 24 Aug 2009 22:05:50 +0100

Performance

BallDroppings — This is an ultimately cool app which...

Thu, 20 Aug 2009 17:58:42 +0100

BallDroppings — This is an ultimately cool app which interestingly is written in javascript.

BallDroppings is an addicting and noisy play-toy. It can also be seen as an emergence game. Alternatively this software can be taken seriously as an audio-visual performance instrument. Balls fall from the top of the screen and bounce off the lines you are drawing with the mouse. The balls make a percussive and melodic sound, whose pitch depends on how fast the ball is moving when it hits the line.

Nirvana Vs Rick Astley - Never Gonna Give Your Teen Spirit Up

Thu, 20 Aug 2009 11:10:58 +0100

Nirvana Vs Rick Astley - Never Gonna Give Your Teen Spirit Up

"Lessn is an extremely simple, personal url shortener written in PHP with MySQL and mod_rewrite."

Wed, 19 Aug 2009 22:16:22 +0100

“Lessn is an extremely simple, personal url shortener written in PHP with MySQL and mod_rewrite.”

- Lessn // ShaunInman.com
This looks like it could be really useful for something.