Ben Sekulowicz-Barclay

Digital Designer

  1. A CodeIgniter Compatible Wrapper for Twitter OAUth

    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.

  1. A MarsEdit Friendly XML-RPC Server in CodeIgniter

    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.

  1. Detecting Visited Sites with jQuery

    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.

  1. Web Myths – Only Use Web Fonts

    Author’s Note – 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!

  1. Detecting Installed Fonts with jQuery

    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.

  1. Enabling Mod_Rewrite in OS X 10.5 & 10.6

    Apache’s mod_rewrite 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
    </Director>
    

    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.

  1. Safari and the First/Last Child

    I don’t often think to post tips on using HTML/CSS anymore, partly because they are more than likely already out there and partly because it is such a stale and dull way of generating content on a website, (second only to posting ‘best of’ lists). Sometimes though, the odd discovery warrants an entry, if only for personal reference.

    Using pseudo selectors to generate content after elements, I noticed that Safari, (2.0.4) would more often than not fail to generate content if a ‘last-child’ rule was applied tp the element as well.

    ul li:after { content: " | " }
    ul li:last-child:after { content: "" }
    

    The CSS above would quite often result in all of the list items losing their ‘pipe’. However, if the code is changed to target the first child and apply the content before the element, the problem disappears.

    ul li:before { content: " | " }
    ul li:first-child:before { content: "" }
    

    I have no idea why this happens, and no idea if this will be solved for the next release of Safari, (or even in the nightly builds), but it seems to solve an irritating little problem that pops up from time to time, (in the navigation of this very site, for example).

  1. Skip Past Content, Not To It

    Author’s Note – This is a reproduction of an article written for the inaugural Cimex magazine in July 2006.

    The separation of a web site into structural, presentational and behavioural layers is the key to making a usable, accessible and future proof web site, and the fact that CSS and unobtrusive Javascript allow us as developers to do this has been a major factor in the uptake of web standards. The reason this separation is so important lies in how it allows so many devices to access your data in so many ways. Mobile phones see a different version of your site to Safari, which sees a different version to JAWS yet all access the same mark-up and the same URL. Maintaining this separation intelligently is the key to allowing as many users as possible to access to your data using any means they want.

    Many web developers are still falling quite short of this separation, not because they are using tables for layout, inline styling or obtrusive javascript but because they are ordering their mark-up not by how it is used but how they want it to appear. The structural layer of a web site should focus on enriching your content semantically to provide a user with the content they need in the most accessible way possible. This doesn’t just mean using suitable heading hierarchies, lists and labels but also ordering your content properly to provide suitable focus to the most important parts of the page.

    Users who visit sites with devices that support limited or no CSS, or with devices that do not display your content visually will not see your content in the organised columns and colours that the majority do – they will be browsing your site in a single column ordered as your mark-up is. This often means they first receive a long list of navigation items, logos and introductory paragraphs when what they really want is the latest article, train time or number of goals Thierry has scored today.

    There seems to be a growing trend for developers to include ‘skip to content’ links as a solution to this problem. These links bypass the navigation and header elements and move the user straight to the content, but users still have to move around a page instead of being served what they want straight away. This technique also fails to account for other ways in which your data is accessed; search engines indexing your pages may rank prevalent content more highly for example, and they won’t use skip links to pursue the content you deem most important on the page. Although I am not an SEO expert I can’t believe that important, relevant elements at the top of a page won’t have more influence on a search engine in how it interprets the meaning of your site.

    There are plenty of CSS techniques that can be used to separate your page structure from appearance—the excellent methods explained at Position Is Everything for creating columns in any order on the canvas, for example. Just remember that the most important column is the one containing what the users came for.

  1. Developing on OS X (Part Two)

    Author’s Note – This article relates to installing and working with Apache, PHP and MySQL in OS X 10.4. These instructions may be out of date on later versions of the operating system.

    The first part of this tutorial focused on getting Apache up and running in a way that would hopefully reflect a live server environment. This second part will explain how to get PHP and MySQL, the most popular server side language and database combination, installed on your local machine.

    Installing PHP

    Many old-schoolers would download the latest source from php.net, compile it for their machines with custom modules and install it straight to Apache in OS X. As you may have guessed, this is not my way, instead I prefer to get pre-compiled packages from Marc Liyanage that can be installed into Apache like you would any other OS X package. He has all of the latest flavours available—I use PHP 5 locally to reflect my online environment. Using Marc’s excellent packages, you don’t need to delve into the httpd.conf file to register file extensions or any other dirty work.

    Update: I’ve just upgraded my work system using the latest version of Marc’s PHP packages and short tags—the preferred method of echoing data in frameworks like CodeIgniter—are not enabled by default. To enable them you need set short_open_tag = On in the php.ini file, located in usr/local/php5/lib/. The value you need to change should be around line 141 and should be changed to the above. This allows you to use <?= ?> tags in your code.

    Installing MySQL

    Since version 4.0.11, Marc’s packages have been superseded by similar packages direct from MySQL—these are exactly the same in that they allow you to install the MySQL database from a one-click package file, and they also helpfully add a system preferences button to give you a bit more control and allow you to run the database at start-up and restart the MySQL server.

    Administering MySQL Users & Databases

    As well as the self-installing package, MySQL have released a number of useful tools that make running MySQL a much simpler, and less command-line driven, task.

    The first of these tools is MySQL Administrator—an application that allows you to add and remove users and database schemas. This is the easiest way to maintain your user accounts on the local database and carry out simple database design tasks. I always change my root password from here as it takes far less time than going through the terminal.

    The second tool I use extensively is MySQL Query Browser, also from MySQL. This application revolves around database design and allows you to create databases, (called Schemas), stored procedures, (if you use MySQL 5) and add/edit/delete data from your databases. This was the main method of designing and altering the CheckWithMother databases during development. I should warn you that MySQL Query Browser does suffer from sporadic quitting problems—this is being worked on by the developers but can be quite annoying.

    Another advantage of both of these tools is that they allow you to access external databases if your hosting company allows it—this is very useful as I can modify data on a live database if such a need arises.

    There are other tools of note that can be used to play with MySQL—in the past I have used both CocoaSql and YourSql, but neither support stored procedures in MySQL 5 so became less useful when Dreamhost upgraded their versions.

    That’s it! You should now be able to run local domains, administer your databases and run PHP-driven sites all form your local machine. Now lets hope someone makes it just as easy to install and deploy Ruby on Rails locally.

  1. Developing on OS X (Part One)

    Author’s Note—This article relates to installing and working with Apache, PHP and MySQL in OS X 10.4. These instructions may be out of date on later versions of the operating system.

    Mac OS X comes pre-installed with possibly the most popular, secure and easy to use web server available to the modern web developer, but it does take some tweaking to get it working as a suitable testbed and prototyping environment before you move our applications over to your live servers.

    Where To Store Your Documents

    The first step in setting up your server is working out what you need to host, where to put the files in Finder and how to see it in your web browser. Apache serves its documents from /Library/Webserver/Documents/ and this is the best place to store your files. If, like me, you use various hosting companies, you’ll probably want to organise your files further—I tend to reflect my set up on the live server in my development server so it looks nice and organised in Transmit.

    Setting Up Nicer Local URLs

    Once you have created your folder structure and moved your files, go to http://127.0.0.1 in your browser and you should see your folder structure reflected through Apache. This is nice, but in order to view your local projects you will probably end up with long, ugly and possibly broken URLs. This can be fixed by setting up ‘host names’—local URLs you add only to your machine so you can use addressing conventions more in line with those in your live environment. To add or modify these host names, you’ll need to do the dirty and open the Apache configuration file—the httpd.conf file. I recommend using Textmate, (for all text-editing, not just this), in which case you need to select ‘View hidden files’ in the open dialogue to get at the configuration file. It is located in /etc/httpd/.

    In the file, (around line 1060) there is an option preceded by a hash, ‘Name VirtualHost *:80′. Remove the hash to enable this option, (hashes are comments you know). You then need to add a virtual name host for each of the URLs you wish to set up, as well as a default entry for localhost, the root of your Apache server, (located at 127.0.0.1).

    # Default for 127.0.0.1 - it makes sure that localhost works.
    <VirtualHost *:80>
      DocumentRoot /Library/WebServer/Documents/
      ServerName localhost
    </VirtualHost>
    # Add new hosts here for development
    <VirtualHost *:80>
      DocumentRoot /Library/WebServer/Documents/dreamhost/beseku.com/v9/
      ServerName www.beseku.dev
    </VirtualHost>
    

    The code above creates two virtual name hosts—the first is the default entry pointing at http://localhost and the second is for http://www.beseku.dev, a development version of this very site. The first parameter is the physical location of the directory and the second is the URL you wish to use. Take care when adding addresses that you don’t use a URL currently in use on the web—your machine will always go to your files instead and you won’t be able to view the site!

    Setting Up Nicer Local URLs: Netinfo Manager

    That isn’t quite it for the local addresses, you have told Apache where to find the files for that URL but you also need to tell OS X that the address is a local one. Open Netinfo Manager, (Applications/Utilitites) and select the ‘machines’ option in the second column. This will list a number of hosts your Mac uses to reference the web server. Duplicate ‘Localhost’ and replace the name value in your duplicate with that of the host you created in Apache. Save this when prompted and restart personal web sharing. You should now have a test URL set up pointing to your development files.

    Using .htaccess

    Its very Web 2.0, (don’t), to have nice tidy addresses without ugly query strings in the URL. To accomplish this, you will need to make use of the .htaccess file—a kind of local configuration file for the current folder. I won’t tutor on the .htaccess file because I am no expert. The reason I mention them is because in Mac OS they are disabled by default. To enable them, you will need to once again open the httpd.conf file and alter another option.

    # This controls which options the .htaccess files in directories can
    # override. Can also be "All", or any combination of "Options", "FileInfo",
    # "AuthConfig", and "Limit"
    AllowOverride None
    

    You need to change this to the following to enable .htaccess files on your web-server.

    # This controls which options the .htaccess files in directories can
    # override. Can also be "All", or any combination of "Options", "FileInfo",
    # "AuthConfig", and "Limit"
    AllowOverride All
    

    Save the file and you should now have access to all the .htaccess voodoo you want. Roberts your father’s brother, you’ve set up Apache to work like it should!

    The second part of this tutorial will focus on getting the latest versions of PHP and MySql installed on your machine and introduce some nifty tools you can use to make it all a bit easier to play with, (and help you to avoid the terminal).