1. Yet Another Damaging Acronym (YADA)

    November 2, 2007

    I was the second Ben to be employed at Outside Line. Its confusing - I've never worked with a Ben before. The other Ben gets more phonecalls too, so I'm constantly getting interrupted by shouts and calls across the office intended for someone far more important. This has led to the coining of a nickname thats slightly less irritating than a tropical disease. I'm often referred to as Ben 2.0.

    For those in the know, this couldn't be a less apt nickname for me. I hate buzzwords. I hate acronyms intended to talk about technologies in a marketing-friendly manner. As a senior developer, dealing with clients and their techical requests is only impeded by the presence of terms such as AJAX, Web 2.0 and Rails. Roger Johanssen, a respected web standards advocate in certain circles, wants to provide these clients with another stick with which to beat us. He brings you POSH.

    The problem with using acronyms as a method of simpifying technological terms is that they provide an easy means for the client to advocate a particular development course or technology, with little or no education of the consequences. While I respect the people I work for immensely, and believe they provide excellent direction, comments, ideas or suggestions, it should be very clear that with regard to building a website for an advertising/record executive or movie mogul, the developers are the experts. I can guarantee that they have built more websites, read more material and spent more time honing their knowledge of how ‘hasLayout’ actually works. This is the reason they are paid what they are paid, and why they are in the meetings with the clients in the first place.

    So it gets very difficult, and often uncomfortable, when you are presented with a client who happens to know a few of these acronyms, and decides he wants to use AJAX onhis website. He hasn't got the faintest idea of what that means or how it will work. But all of a sudden, the knowledge that I have on how best to address a specific problem has been overruled by the guy who has the money, and thus the final say. In the same way that armchair football fans think they know all they need to from the tabloid sports sections, he thinks he knows all there is to know from four letters and a brief explanatory blurb, and is using that to dicate how a project should proceed.

    Don't get me wrong, I firmly believe in using semantic HTML - its the way websites should be built. Always. I just don't see what value it brings to the table in terms of educating a client in how an industry works and what a technology does. If they are having trouble understanding a concept, acronym-izing it will not make any difference, aside from allowing them to repeat it at every subsequent meeting with the next poor developer.

  2. London 2012 Branding

    June 4, 2007

    The logo for the 2012 Olympic games was yesterday unveiled on the London 2012 website. Wolf Olins, the firm tasked with creating the branding, have avoided any kind of cliche, (I was thinking the Thames, London Eye or Big Ben would feature prominently), and instead have opted for a new-rave/eighties themed device that looks to be focused more on it's ability to be co-branded than as a stand alone logo or mark.

    Bryan Bedell of Coudal has written a fantastic piece on the inevitable furore that has erupted from the usual short-sighted media outlets. While I think it may be dated by the start of the event, I agree with almost every other point and especially with regard to complaints about the pricing - the fact that every tabloid in the country is questioning the cost of the design without understanding the processes involved is disgusting, ill-informed and exactly the cause of much of the poor, generic and uninspiring design of recent times.

  3. Safari and the first/last child

    April 10, 2007

    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 nav of this very site, for example).

  4. Better Event Management with Prototype

    August 14, 2006

    Of all of the frameworks currently available for the rejuvenated Javascript language Prototype is the most popular. The developer, Sam Stephenson has now been employed by 37Signals and has been working on integrating his framework and its spinoff effects library Scriptaculous with Ruby on Rails, the massively popular new server side language. So its going to be around for a while.

    One of the most useful features of the framework is how it allows you to easily build classes to encapsulate your code and prevent it from interfering with existing or future code. We have used it extensively at Cimex with some projects making use of three or four different classes, all running independently of each other while addressing the same DOM tree. However the implementation of events and event listeners with Prototype can seem a bit convoluted and unless you have been there before and know the tricks of the trade, can be very frustrating.

    As a quick recap on creating objects with Prototype, and as a way to start building an example, consider the following code. I've created a new class called Popups and its constructor function, (which is always called Initialize - how American). Notice how I have set internal variables, (properties) using the this keyword - its an important part of developing classes in any language to be able to self-reference a class to call internal variables and methods or functions.

    var Popups = Class.create();
      Popups.prototype = {
        initialize: function() {
        this.popupCount = 0;
      }
    }
    

    Now I can add another method, (function) to my class and reference it using the this keyword in the same way. I also want to be able to call this method on the occurrence of a particular event, such as clicking a link. It is important to be aware of a number of things when doing this. The first is that an item can observe the occurrence of more than one event if implemented correctly. The second is that I want to preserve the this keyword so that it relates to the class and not the element that observes the event, but also still be able to access the element.

    var Popups = Class.create();
      Popups.prototype = {
      initialize: function() {
        this.popupCount = 0;
        Event.observe($("clickMe"), "click",  this.onClickTalk.bindAsEventListener(this));
        Event.observe($("clickMe"), "click", this.onClickPink.bindAsEventListener(this));
      },
      onClickTalk: function (e) {
        this.popupCount ++;
        alert("You clicked the link " + this.popupCount + " times!");
      },
      onClickPink: function (e) {
        Event.element(e).style.color = "#C09";
      }
    }
    

    The code above illustrates almost exactly how we should be observing events with Prototype. We use the Event.observe method to get an element to observe the occurrence of an event. We then bind the parent class to the occurrence of the event with bindAsEventListener(this) so we can still access variables within the class. Notice how we can also assign multiple methods to the same event. You can also see from the example above how to reference the trigger element, (in this case an element with an ID of clickme) using the Event.element(e) method.

    initialize: function() {
      this.popupCount = 0;
      Event.observe($("clickMe"), "click", this.onClickTalk.bindAsEventListener(this));
      Event.observe($("clickMe"), "click", this.onClickPink.bindAsEventListener(this));
      $("clickMe").onclick = function() { return false; }
    }
    

    As usual, browser bugs mean this isn't the final code, and as is often the case the solution is to mess with our nice clean code. In this case, some browsers, (such as Safari) do not understand the Prototype method to stop the event after we have executed our code - the only way to guarantee that the original element event will not occur, (in this case the browser following the link to its URL), is to add an old style .onclick after you have attached the Event.observe methods to your element.

    Apologies for the awkward and technical article, but this was something I spent a long time solving for Flickrshow and now I have a solution I thought others might want it too.

  5. Structuring your CSS - A Slight Revision

    June 2, 2006

    With the forthcoming release of a new version of Internet Explorer, many of the hacks and workarounds used by site developers to target individual browser flaws and serve custom CSS are going to stop working. The developers of IE 7 have themselves warned that a number of the hacks, (such as those discussed previously on this site) will no longer work and should be avoided. They're suggestion as a replacement method is to use conditional comments, something we have been implementing at Cimex for some time.

    The following is an example in using conditional comments to serve CSS files to different versions of Internet Explorer. One caveat is that Internet Explorer 5 (OS X) does not make use of these conditonal comments and, if you are still supporting it, will need to be served CSS using an alternative method.

    <link rel="stylesheet" ... href="list.css" />
    <!--[if IE 5]>
    <link rel="stylesheet" ... href="ie-5-win.css" />
    <![endif]-->
    <!--[if IE 6]>
    <link rel="stylesheet" ... href="ie-6-win.css" />
    <![endif]-->
    <!--[if IE 7]>
    <link rel="stylesheet" ... href="ie-7-win.css" />
    <![endif]-->
    

    The above code provides a default “list.css” stylesheet which in my template serves a stylesheet to reset all elements to their default values and a stylesheet for the site itself. Conditional comments supplement this with a specific CSS file for each browser version under Microsoft Windows. The OS X version is served its CSS file from within the “list.css” file.

    This method has worked for my testing of the preview of IE 7 beta 2. That doesn't mean it will work in the final version.

  6. Skip past content, not to it

    April 30, 2006

    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 nav 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 nav 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.

  7. A Javascript Experiment - Movement

    April 2, 2006

    After a friday spent researching alternative interfaces, (after being challenged by James), I've developed a nice little Javascript class which allows you to re-create a popular shifting effect, used to great effect on sites such as One Digital. I've created an example of the script in action showing the London tube map being shifted around.

    Install the Javascript object using the following code. The parameters passed are the name of the div you wish to shift and the number of horizontal/vertical stops in the grid. The Javascript deals with moving the target div into the middle of the page so alternative styling can be used if Javascript is not available. It also divides the page up into a grid of ‘stops’ for navigating around.

    <script type="text/javascript" src="includes/js/prototype.js"></script>
    <script type="text/javascript" src="includes/js/movement.js"></script>
    <script type="text/javascript">
      movement = new Movement("shiftMe", 9, 6);
    </script>
    

    The CSS is fairly self-explanatory. The target div needs to be given a width and height to be divided up but the nav can be styled however you want.

    div {
      background: transparent url("../images/bg-content.gif") 0 0 no-repeat;
      border: solid 3px #27B1E6;
      height: 2048px;
      position: absolute;
      width: 3074px;
    }
    

    The script uses prototype, (as all good Javascripts do), and has been tested and works in IE 6, IE 7 Beta 2, Firefox and Safari. Download it and have a play.

  8. Developing on OS X, pt. 2

    March 27, 2006

    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 OS X.

    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.

  9. Developing on OS X, pt. 1

    March 19, 2006

    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 OS X.

    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).

  10. Simply applying ‘hasLayout’

    March 5, 2006

    If you need to apply the hasLayout property to an element in Internet Explorer but don''t want to add height or another potentially damaging CSS property, use the proprietry zoom:1;. It is an IE only CSS property and sets the hasLayout flag to true while adding nothing visually or semantically to the element. Saved my skin more times than I care to remember.