As part of a new iA project, we needed a clean way of authorising a user via Twitter's new OAuth system. Not wanting to reinvent the wheel, I hunted for a good library and found TwitterOAuth, by Abraham Williams. Unfortunately the library was structured in a way that made it difficult to use with the CodeIgniter framework, and left a lot to the developer when trying to initially authenticate a user. In working with the code I developed a simple wrapper library that solves these issues and makes Twitter even more easy to work with from CodeIgniter 2.0.

The only major non-structural change is a new authentication method that deals with the fetching and management of the oauth token and oauth token secret variables between redirects. Implementing it is as simple as including the following code within a controller method. When the method is accessed, it will redirect to Twitter to authenticate and return to the controller when successful.

public function sign_in() {
  $this->load->library('twitter', array(
    'consumer_key' => OAUTH_CONSUMER_KEY,
    'consumer_secret' => OAUTH_CONSUMER_SECRET
  ));
  
  if (is_object($req = $this->twitter->authenticate())) {
    // Do something with the $req you received ...
  }
}

The library requires both the TwitterOAuth and OAuth libraries, both available to download from Abraham's GitHub account. Installation is the same as with any other library, but you need to enable the $_GET array to receive data from Twitter when authenticating. You can download it from my Github account.

Part of the custom software powering the new version of this site is a small and very basic MetaWeblog API compatible XML-RPC server, allowing me to manage the weblog section of the site via software such as MarsEdit, a tool I previously used when editing my Expression Engine powered website. The decision to build such a solution came from not wanting to build any kind of web-based back-end, but also not wanting to have to edit database rows directly to make posts. As CodeIgniter contains an XML-RPC library, (for which there isn't much in the way of good documentation, or many examples on how to interact with common APIs such as this one), I thought it would be simple. It wasn't, so I uploaded some examples to help others navigate through the problems I encountered.

I've uploaded a controller similar to the one used on this site, and added additional comments to guide users. The controller, which initialises the server, only makes use of the MarsEdit interpretation of the MetaWeblog API, consisting of seven of the methods documented here on Microsoft.com. There are no methods implemented for returning information on the user or the blogs available. If these methods are required in future releases, they should be pretty simple to implement based on the examples laid out here.

I've also enclosed an example model file that demonstrates user authentication and shows how requests could be used to manipulate a weblog's contents. There is no real information manipulation since there is no database layer, but the model shows enough about the format that the data should be in and the parameters that each request passes through.

Finally, I created a simple XML-RPC helper file that takes the array structures returned by the default CodeIgniter database class and converts them to the struct format that is required when sending responses via the MetaWeblog API. I found the struct format confusing to read and messy to implement in PHP so using a helper allowed me to abstract this away somewhat, keeping the core code much tidier. On this website I also use Markdown as a means of formatting my posts. It's relatively simple to integrate Markdown into CodeIgniter as a helper - just download the latest PHP implementation and save it as markdown_helper.php in your application's helpers directory.

The files are available to download from GitHub. The default CodeIgniter file structure has been preserved but only the files I created are present. Please fork the repository if you find any bugs or make any improvements.

By far the most popular of any of my personal projects is Flickrshow, a Javascript slideshow that evolved from earlier gallery projects into the first public version in 2006. For those unfamiliar with the project, the goal is to allow as many people as possible to embed a slideshow displaying Flickr images into a webpage. The emphasis has always been on simplicity and ease of use, rather than complex features, and this has led to its use by scores of people who most likely would have resorted to poorer implementations or worse, none at all.

After a hiatus of over a year, I recently released the newest version of Flickrshow to public beta testing. The previous version had no real faults, other than a few glaring feature omissions, but was definitely showing its age. The goal of this new version was to add a few of the most requested features and, more importantly, remove another level of complexity to the implementation by removing any framework dependance from the slideshow, (it was previously using the Prototype framework).

This version of Flickrshow uses only native Javascript functions, and contains its own animation and remote loading functionality. It now features auto-play, configurable pop-up controls, better themes, multiple shows per page and improved integration with Flickr. It is also compatible with all modern browsers, (although by making use of certain CSS properties it will look slightly less rounded and transparent in older software) and the size of the script has been reduced from 58Kb to 8kb. If you are interested in the project, please try out the new version and register any issues.

A massive change in my life that I have been preparing for for some time is drawing very close - today is my last day in charge of the technical team at Outside Line. I've been Technical Lead at Outside Line for over two years, and have been fortunate to work with some of the most talented and creative designers and developers you are ever likely to meet - we've put together some brilliant websites in that time, and I am really proud of the work I've been a part of.

Next week my girlfriend and I will be fulfilling an ambition that we've had for close to two years by packing our bags and moving to Tokyo, Japan. After visiting the country in 2008 and falling in love with the sights, sounds and smells, we have both been desperate to spend more time in the country. I will be taking up the role of UX Engineer with Cirius, where I will be helping to develop and extend their products in the international market. I'm really looking forward to working with some very talented people in a fresh, agile environment, and all within a city as vibrant and exciting as Tokyo. See you all on the other side.

I've recently been developing a little something in CodeIgniter that features an API that is as true as possible to the principles of REST. In order to do this, I had to extend the core CodeIgniter Input library to allow access to properly escaped values from DELETE or PUT input in the same way as you would normally access GET/POST input.

<?php
  function delete($index = '', $xss_clean = FALSE) {
    if (strtoupper($this->server('REQUEST_METHOD')) != 'DELETE') {
      return FALSE;
    }
    parse_str(file_get_contents&#40;"php://input"&#41;, $_DELETE);
    return $this->_fetch_from_array($_DELETE, $index, $xss_clean);
  }
?>

The code is pretty simple, and unfortunately does require file_get_contents until I can figure out an alternative way of accessing the input. The whole class can be downloaded, played with and forked from my GitHub account.

Recently, we at Outside Line launched a new website for Golden Wonder's new noodle brand, The Nations Best. In a departure from the normal day-to-day, I built the bespoke server-side functionality to power the nifty Flash front-end. In doing so, I put together a few PHP libraries, one to access the Flickr API and one to access the Host IP geolocation service API.

<?php
  $this->load->library('flickr');
  $this->flickr->set_cache_duration(3600);
  $this->flickr->set_cache_location('cache/flickr/');
  $images = $this->flickr->get('flickr.photos.search', array(
    'per_page' => '50',
    ’sort' => 'relevance',
    'text' => 'Exmouth Market',
  ));
?>

Both classes, being built at the same time, have a similar structure and similar functionality. They both feature a cache mechanism to limit your requests and enhance performance, and the both are pretty open ended in what they allow you to do. The Flickr class allows access to any method that doesn't require authentication, and returns the results as a PHP array, (in the same format as the original Flickr response).

<?php
  $this->load->library('hostip');
  $this->hostip->set_cache_duration(3600);
  $this->hostip->set_cache_location('cache/hostip/');
  $latlong = $this->hostip->getLatLong('173.45.226.6');
  $location = $this->hostip->getLocation'173.45.226.6');
?>

The Host IP class is slightly more limited, but is easy to extend if more information is required. The results are obtained form a parsed XML response, and contain information outside of the latitude, longitude, city and country. Because of the way in which SimpleXML handles the name spaces, there is also bit of hacking in place to parse the XML.

You can download the Flickr and Host IP classes from my GitHub account, and they are both offered freely but with no support or guarantee.

My recent adventure in writing a jQuery plugin led to me considering what other notionally unattainable client-side information could be gathered using a bit of Javascript and CSS manipulation. A bit of playing, (and a lot of understanding Safari's rather greedy method of storing styles) has resulted in my second jQuery plugin in as many months.

With the same disclaimers about elegance and infallibility, this plugin allows you to test a user's browser history against specific URL, returning a true/false value if they have visited the site in question.

if ($.history.test('http://www.flickrshow.com')) {
  alert('You tasteful bugger.');
}

Much like my previous effort, this plugin works by creating an HTML element, in this case an <a> tag, and some associated CSS properties to alter the element in a measurable way. In this case, by adding some very specific styles to the :visited property of the link that can be measured in a fairly precise manner if the link has been visited in the past.

This isn't a bulletproof solution, however. You can only blindly test against the browser history, so need to make educated guesses and allow for changes in a URL, (such as trailing slashes or additional query string parameters). I've found that testing for one or two minor variations gives the best result – I might even add some minor intelligence to the function to account for this.

As before, the plug-in is of beta quality but seems to work in Safari 3, Firefox 3+, and IE 6+. I've bundled everything together into a GitHub repository, where you can also download version 1.0 of the plug-in in uncompressed and compressed form.

This is a reproduction of a boxout written for the ‘Exploding the myths of web design’ feature in .Net magazine, issue 189.

Have you ever been handed a design for a website and wondered what font the designer has used for the body copy? Because I can honestly say I never have, and this certainly isn't down to web designers having a love for Georgia and Arial. Instead, it's down to a common misconception that the only fonts that can be rendered in a browser are the old 'favourites'. The thing is, a modern web browser is perfectly capable of rendering any font that a user has installed, and because of the popularity of particular software packages, the list of relatively commonplace fonts includes some beauties.

On 24 Ways, Richard Rutter showed that if you take into account fonts installed by Windows and Mac OS X along with those from Microsoft Office and Adobe's Creative Suite, the resulting list includes some rather lovely serif and san-serif fonts that a designer can use to bolster their designs. With some carefully selected fall-backs, there's no reason why a good developer can't provide users with Caslon or Jenson in place of Georgia, or Helvetica Neue in place of Arial. By using the CSS font-weight property, you can even use differing weights to further enhance your work.

Most websites are launched to a specific audience or demographic, and if they aren't then your marketing team is missing a trick. If you have a good idea who will be looking at your site, it's then easy to treat them to some nicer typography. For example, Panic achieves this on the company's website for FTP client Coda by using Helvetica Neue Light, after surmising that the majority of visitors will be Mac OS X users, who have the font installed on their system by default. Even if you don't have such a targeted audience, you can still play the percentage game, and in doing so, you can at least treat a portion of your visitors to a more refined, unique look. Call it typographic progressive enhancement!

I'm a massive fan of pushing the typographic capabilities of our current crop of web browsers and the supported HTML and CSS standards. I'm not talking about embedded fonts or Flash/Javascript-based font generation but using simple CSS rules to bring nice fonts to the user, if available on their system. Richard Rutter, Guillermo Esteves and myself have all published tutorials on how to include non-generic font families in your CSS declarations—the very same methods that allow me to use Adobe Caslon Pro on this website.

These methods are excellent for progressively enhancing the typography of a website, but are, (rightly so), based on providing a carefully selected set of fall-back fonts should the favoured family be unavailable. At present, there is no elegant way to determine whether your chosen font is being used and, if not, which of the numerous families in your font stack are instead.

Although I am loathe to call this solution elegant or fail-safe, I've tried to solve this problem by building a jQuery plug-in that should shed some light on which families your site is rendering in, and allow you to alter a site's behaviour, content or appearance accordingly. I've created a [demonstration page] that uses the plug-in to show which of the fonts you currently have installed and enabled out of a list that is fairly arbitrary, (the fonts currently active on computers around the Outside Line office).

The plug-in works by generating a paragraph of text, outside of the viewport, in a monospaced font. The paragraph is measured and re-rendered in the test font, (if available). If the paragraph dimensions change, then the rendered font must have too, and so the family must be installed/enabled.

if ($.font.test("'ACaslonPro-Regular','Adobe Caslon Pro'")) {
  alert('You lucky bugger.');
}

Usage of the plugin is fairly simple, returning a boolean true or false value when you pass in a CSS-style font-family declaration. You can also pass in, optionally, a font-family declaration that you know is different in dimensions and available to test against, should the defaults not work so well.

$.font.test("'PanicSans','Panic Sans'", "Georgia, Times, serif");

The plug-in is of beta quality, and has only been tested to the extent of the fonts available to me. It works in Safari 3, Firefox 3+, and IE 6+. A lot will depend on the font names/post-script names/family names of the fonts you are testing for, as they tend to differ between vendors. In terms of example usage, aside from the demonstration pages, I've updated the about section of this site to deliver a more relevant message describing the design of the site. You can download version 0.1 of the plug-in in uncompressed and compressed form.

Apache's [mod_rewrite][1 functionality allows you to redirect and rewrite your web site URLs, providing a developer with an easy way of creating human readable, well structured and, most importantly, navigable page addresses. It's used by almost all Apache-based software from Wordpress to Codeigniter. Enabling it within Apple's latest iteration of Mac OS X is, unfortunately, a bit of a fiddle.

Updating the Apache configuration to allow the use of this functionality is achieved by modifying two files, one for the global web-server directory and one for your local web-server directory, (the much easier-to-access ~/Sites folder). The first file to be modified is the global configuration file, and it needs to be modified around line 205.

# AllowOverride controls what directives may be placed in .htaccess files.
# It can be "All", "None", or any combination of the keywords:
# Options FileInfo AuthConfig Limit
AllowOverride All

The second file, allowing you to use mod_rewrite within your own ~/Sites folder, is the one that seems to break Apache on a more regular basis. The values below, located at the top of the file, yielded the best results, enabling the functionality without causing server errors.

<Directory "/Users/beseku/Sites/">  
  Options Indexes FollowSymLinks MultiViews
  AllowOverride All AuthConfig
  Order allow,deny
  Allow from all
</Directory>

After making and saving these changes, you'll need to restart Apache, (easily done via the ’sharing' system preference pane, just un-check then re-check the ‘Web Sharing’ checkbox). If everything went well, Apache should start up again and you should have full mod_rewrite functionality.