One issue that crops up fairly often for me is when trying to get websites or html email to look consistent across different browsers / email clients. There’s a golden rule about, that I think anyone commissioning web development should know:

Websites will not look the same in all browsers.

Nor should they. Each browser uses a layout engine to format the pages of the websites you visit. There are a lot of different layout engines out there, built differently and for different purposes.

Users have different settings. Some users have low res screens so won’t see the whole width of the site, some have high res screens and will have to enlarge the default font size to be able to read what’s written. Some are on dial-up and will have disabled background images, others will be browsing the site on their phone or tablet.

So not only is it impossible to make sure that all browsers show exactly the same page to everyone, it isn’t desirable either. If I want to set my font size larger so I can read my laptop while sitting comfortably in a chair, then that’s my business, and I don’t want some jumped-up website over-ruing me and setting the fonts so small I have to squint.

Remember this the next time you’re developing a site. Users don’t sit and compare the site in different browsers. Here are a couple of links: saying it with passion, and with a bit of explanation.

Anyway, I ready this a while ago and have just got round to posting it here. It’s an article – Essentials of writing high quality JavaScript. A very useful article with some good pointers on code formatting with analysis of the why. I have changed my curly-brace style as a result, you will be excited to hear. So now I do this:

function somename() {
    // code
}

instead of this

function somename2()
{
   // code
}

Twitter’s api is easy enough to use. I opted for the JSON-p format, but something I didn’t realise at the time was that the status updates are purely the plain text. So any URLs, usernames or hashtags are just plain text: no wrapping in <a></a> tags. It’s an easy problem to solve, though, and here it is for anyone else who needs it.

function twitify( text )
{
    // replace urls with linked ones
    var t2 = text.replace(/(http|https)(:\/\/)([^ ]+)/ig, '<a href="$1$2$3">$1$2$3</a>' );

    // replace @username with clickable twitter link
    t2 = t2.replace(/@([^ ]+)/gi,'<a href="http://twitter.com/$1">@$1</a>');

    // replace hashtags with Twitter searches
    t2 = t2.replace(/#([^ ]+)/gi,'<a href="http://search.twitter.com/search?q=%23$1">#$1</a>');

    return t2;
}

So, feed the tweet into that function, and back out it comes with links, @users and #hastags made clickable.

Did I mention I ♥ regular expressions?

UK residents can sign both the below petitions, anyone else can sign the second one only.

• http://petitions.number10.gov.uk/CancelHaitisDebt/
• http://www.avaaz.org/en/haiti_cancel_the_debt_8/?vl

Go on, you know it makes sense!

Of course, for the sitelinks to display, you have to get to number 1 on the search results page, which is a science in itself.

What a revelation! I really like the way that you specify a page that’s to be used as the template for the site, and simply add some place-holders that are to be populated with the content from your individual local pages. The whole thing then hangs together very nicely. You can even use relative links that are re-written by the server so no matter where you content page is, the link is always pointing at the same file. The code is clean, too, as the master and content pages are all marked up using XML, so all your code looks nice and is easy to follow in your editor of choice.

A different, but equally small site has now come up and it’s got me thinking about how to implement something like this in PHP. Now, there are several templating systems already out there for PHP, for example Smarty. I didn’t want to use one of those, because like I said the site’s very small, and adding all those extra files in there and using the Smarty syntax would just unnecessarily increase the development time for such a small site. So, I set about making something up myself.

I’m pretty pleased with what I came up with: it’s not quite as clean as the .net version, but it is simple and easy enough that it will help rather than hinder the development of such as small site. I’ve got my template (the ‘master’ page) on which I’ve defined a couple of areas where the content is to be dropped in.

template.php:

<?php Header("Content-Type: text/html; charset=UTF-8"); ?>
<html>
  <head>
    <title><?php echo $page->title; ?></title>
    <link rel="stylesheet" type="text/css" href="/path/to/stylesheet.css">
    <?php echo $page->head; ?>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="/">Nav item 1</a></li>
        ...
        <li><a href="/">Nav item n</a></li>
      </ul>
    </nav>
    <div>
      <?php echo $page->content; ?>
    </div>
    <footer>
      footer message here
    </footer>
  </body>
  <?php echo $page->foot; ?>
</html>

page.php:

<?php
$page->title    = "Hello, world";
$page->template = "template.php";
?>
<?php ob_start(); /* head   */ ?>
  <meta name="description" content="description here">
<?php $page->head = ob_get_clean(); 

?>
<?php ob_start(); /* content*/ ?>
  <h1>The Page Title</h1>
  <p>The article goes here</p>
<?php $page->content = ob_get_clean(); 

?>
<?php ob_start(); /* foot   */ ?>
  <script type="text/javascript"> ... /* page specific script */ </script>
<?php $page->foot = ob_get_clean(); 

?>
<?php include_once $page->template ?>

Now, way back when, I thought that XHTML was going to be the saviour of the web, and it was closely intertwined with the move away from table-layout to a more semantically correct layout. So I have coded a fair few sites using XHTML. In recent years, though, I have switched back to HTML. I have my reasons. And they are:

1. IE does not support XHTML. It can render (modified) XHTML code served as HTML, but that’s not the point, is it? If you add the proper <![CDATA[ sections, you then have to comment them back out. That seems to be a waste of time and of bandwidth to me. The XML prologue that should appear at the start of the file has to be removed, too or else IE6 chokes on it. Yes, I still have to support IE6.
2. In the case of an error in the markup, properly-served XHTML completely fails. Now, this can be a benefit, as it will show the error up during testing and force you to output well-formed XHTML, but I’m not sure I trust all the JavaScript based editors that many users use to input content with to output flawless code every time.
3. The JavaScript document.write cannot be used. Adding elements using DOM methods is better, yes, but sometimes a quick hack is what’s needed, or code from an external source (like Google Analytics, for example) uses it.

I expect things to change on the code front as HTML 5 becomes more supported and as I start to integrate its code into my sites. It might mean that the move to XHTML starts to make more sense than it does to me right now. It’s something I will keep reassessing, and if I read a convincing enough argument to change then I will.

I was in the market for more of those expensive razor cartridges – you know the kind, Gilette Mach 3, or Wilkinson Quattro Titanium, that sort of thing. So I was looking in Boots and despairing of the cost of de-hairing my face, when I saw the King of Shaves ‘Azor’ on the shelf there with the others. The price was in the same region as the others, a little cheaper perhaps. It had awards from Which? and some men’s magazine, so I thought I’d give it a go.

It’s great: it gets the skin smooth like any new razor, but is easier to use because it’s very light and quite flexible. Also, the blades seem to last for an age. So I’ll be getting more of those in future. Order one yourself:

King of Shaves Azor Hybrid Synergy System Razor – Warp

This went out on a few high profile blogs, and spread from there. Eventually, after a few hours, the reason for the gag came out – I read about it first on Twitter. It was about a company that had dumped toxic waste off the Ivory Coast. Within hours, the name of the company and their solicitors (Trafigura and Carter-Ruck, respectively) were some of the most used words on Twitter. The culmination of all this attention was that Carter-Ruck withdrew their injunction, because of the huge publicity it was bringing to the story.

And that is the story of how Twitter broke a super-injunction. You can read a more full story here with a very nice visualisation of the story as it developed. Not bad considering most of the stuff on Twitter is about what some stranger’s cat’s had for dinner.

Until now, that is. A short quiet spell has enabled me to get back on it, and although there are still finishing touches to be done, screenshots to be taken, projects to be added, at last I can make this new site live and consign the old – and very out of date – one to the great recycling bin in the sky.

The main thing I’m looking forward to with this new site is having my blog back online, but for the purposes of attracting new business I’m also looking forward to having recent work up on here and keeping it up to date. I’ve created a projects section to hold all that, and I’m hoping that at last potential new clients will not be put off by the very few examples of work I had on here before. Though, of course, right now there are even fewer.