Social media buttons are not a social media strategy, even though they’re often sold that way. Excellent content, serious networking and constant human engagement is the way to build your profile. Adding those sleazy buttons won’t achieve anything. Social media is not easy — there is no simple trick. Usually, what most people do is not the winning strategy but the safe strategy, and safe rarely wins.

Sweep the Sleaze by Oliver Reichenstein

The challenge with this design was to have the border above the individual items for the first and last row of images, not a single full-width border above and below the entire list.

When coding, I find it incredibly useful to write out, in plain English, what I want to achieve and how I might go about achieving it. For this problem I wanted to;

• Add a border above and below the set of images,
• If the list of images formed a perfect grid (3, 6, 9 etc) and the browser supports CSS3 :nth-child and :nth-last-child selectors, then remove the full-width borders and set the border on the first and last rows.

To solve this problem I used a combination of the HTML5 data attributes, CSS3 :nth-child and :nth-last-child selectors and Modernizr to test for the CSS3 support needed.

Firstly, I added two HTML5 data attributes to the container. One which denotes whether the set of images is a “perfect grid” — data-grid=”true” — and a second which was the total number of images inside the list — data-total=”6”.

Secondly, I needed to check whether the required CSS3 selectors I wanted to use were supported by the browser. I include Modernizr on projects, which has checks for a lot of useful HTML5 and CSS functionality, but it didn’t include any tests for the :nth-child and :nth-last-child selectors — but it does include a test API. Below are the two tests I wrote:

Modernizr.testStyles('#modernizr div:nth-child(1) {height:10px;}', function (elem, rule) {
   Modernizr.addTest('cssnthchild', function () {
       return elem.getElementsByTagName('div')[0].offsetHeight == 10;
   });
}, 3);

Modernizr.testStyles('#modernizr div:nth-last-child(1) {height:10px;}', function (elem, rule) {
   Modernizr.addTest('cssnthlastchild', function () {
       return elem.getElementsByTagName('div')[2].offsetHeight == 10;
   });
}, 3);

Modernizr then adds the appropriate class to the HTML, depending on whether the tests return true or false. In the case of the two tests above, ‘cssnthchild’ and ‘cssnthlastchild’ are added if :nth-child and :nth-last-child are supported. If they’re not supported, they’re prefixed with ‘no-’, eg ‘no-cssnthchild’.

Finally, we can use these classes in the CSS to remove the solid full-width borders and replace them with borders above the first row of images and below the last row of images. The CSS looks something like this (note, the CSS has been written in a verbose manner for ease of understanding and can be written more succinctly):

ul.images {
   padding: 5px 0 0;
   border: 0 solid #000; border-width: 1px 0;
}
html.cssnthchild.cssnthlastchild ul.images[data-grid="true"] {
   padding: 0;
   border-width: 0;
}
html.cssnthchild.cssnthlastchild ul.images[data-grid="true"] li:nth-child(-n+3) {
   padding-top: 5px;
   border: 0 solid #000; border-width: 1px 0 0;
}
html.cssnthchild.cssnthlastchild ul.images[data-grid="true"] li:nth-last-child(-n+3) {
   padding-bottom: 5px;
   border: 0 solid #000; border-width: 0 0 1px;
}

This works, except for when there are only three images. This is why the HTML5 data attribute data-total=”3” was added. Using the attribute selector, targeting the list which only contains three images, a top border needs to be added alongside the already added bottom border. The following CSS solves this:

html.cssnthchild.cssnthlastchild ul.images[data-total="3"] li:nth-child(-n+3) {
   padding-top: 5px;
   border-top-width: 1px;
}

See the final solution.

Fixed Sidebars — A Responsive Enhancement

The design called for a fixed sidebar, something that I’m not a fan of because of potential issues with small browser sizes. However, after reading Trent Walton’s article Vertical Media Queries & Wide Sites, I found a solution to the issue.

By default the sidebar is full height but moves when the browser is scrolled. Now, by adding a simple vertical media query, when the browser window is higher than a certain value — the height of the content within the sidebar — then the position value is changed to fixed and the sidebar stays in place when the browser is scrolled. The code is surprisingly simple, see the basic example below:

aside {
    float: left;
}

@media screen and (min-height:675px) {
    aside {
        position: fixed; top: 0; left: 0;
    }
}

An Animated Shrinking Header

When the browser is scrolled passed a certain point, the header and navigation is reduced in height which gives more room for the primary content. This behaviour is achieved by a combination of JavaScript events, DOM manipulation and CSS, with a sprinkling of CSS3 animation. The basic premise uses the JavaScript scroll event and if the scrollTop distance is greater than a defined value, then it adds a class to the body, if it is less than the defined value, this class is removed. You can then leverage this class in your CSS to make any amends you like. On the Design + Hype website the header and navigation change height, and if CSS3 animations are supported, then the change is animated.

I implemented the JavaScript using jQuery (1.7). The example below toggles the class scrolled when the distance 100px is passed. (Note, the distance is hard coded in the JavaScript, but could be queried using a HTML5 data attribute, eg. data-distance="100")

var $document   = $(document),
    $window     = $(window),
    distance    = 100,
    className   = 'scrolled';

$document.on('scroll', function (event) {
    if (parseInt($window.scrollTop(), 10) > distance) {
        $body.addClass(className);
    } else {
        $body.removeClass(className);
    }
}

The CSS below shows the change in height of the header when the class of scrolled is appended to the body. The default state contains the CSS3 transition declaration for multiple vendors (Mozilla, Webkit, Opera and Microsoft) as well as the non-prefixed version for future compatibility.

header {
    height: 100px;

    // vendor-specific and general transition CSS
    -moz-transition: all 1s ease;
    -webkit-transition: all 1s ease;
    -o-transition: all 1s ease;
    -ms-transition: all 1s ease;
    transition: all 1s ease;
}
body.scrolled header {
    height: 50px;
}

You can see the effect on Design + Hype when you scroll down.

Both of these techniques are great examples of progressive enhancement, by using modern techniques to improve user experience. I hope these two examples are useful and can inspire other techniques.

If I am using an application or even Safari and I click on a URL, I am shown the web version, optimised for my mobile device. Although this situation is OK, it often leaves you with a basic interface and limited functionality (depending on how vigorously the developers have implemented features). There is definite room for improvement, especially if there is a stand-alone app available and installed. What I would like to see is the link triggering an application switch which up the correct content.

Now that iOS supports multi-tasking and apps save state when they’re closed, this behaviour should be the natural progression. OSX and other desktop operating systems already behave in a similar way, such as launching your preferred mail client when you click a mailto: link.

For example, if I am using Twitter — either using the official iOS app, Tweetbot or the web interface — and I click an Instagram URL, I want the operating system to fast-switch to the installed (and preferred if there are multiple) Instagram app. Instead of just being presented with the photograph and the user’s name in a Safari wrapper, which is the mobile HTML version of Instagram, I would be able to “Like” and comment on the photo, as well as browse that user’s other photos and even follow them. Anything that the application allows, would be a short click away from the link.

The official Twitter for iOS app already behaves in a similar way when you click a link which is either a Twitter users’ profile or a specific tweet, it loads the correct pane in the application and doesn’t show you the web interface like it does for other content. You may cry this is obvious and expected behaviour and that is my point. There is a short leap between this and a system wide process which would better tie content and apps together and improve the overall flow of content consumption — even encouraging more creation and participation.

These services would be managed in a similar way to location services or notifications, allowing the user to toggle which apps are enabled for this system wide preference. Apps would register a request for link management, possibly by the way of a domain (or a list of URLs within that domain that they support with their app), within their codebase which would mean the app would appear in the list. There could be, in theory, multiple apps vying for the same service, such as Twitter links. The preference pane could be extended to show a list of apps which have registered a certain domain.

Power users might want to open different apps based on what type of content is being shown. For example, twitter profile might open in the official Twitter app, whereas you might want specific tweets to be open in Tweetbot. In theory, this could be easily achieved by exposing the URL mapping to users — in a similar way in which Adblock works — but I think this complication should be avoided and would alienate the majority of iOS users.

I was comfortable in adding new custom post types and associating custom fields to these new data sets. However, there was one type of functionality I wasn’t entirely happy with – adding custom file uploads. I have used the tremendously useful Attachments plugin which was written and is actively maintained by Jonathan Christopher (who also writes regularly about WordPress development among other things on his website Monday by Noon). While this solution is good for attaching multiple files to an entry, I needed more control, such as named types and limiting the number of attachments, e.g. one per type.

Once I understood the concept on how to the Attachments plugin works, it was a case of dissecting the code and using what I needed for my solution. The concept is pretty simple — upload a file to the media area, associate that file with the post by using a (hidden) custom field and the newly created attachment_id.

The Attachments plugin triggers the built in media upload functionality, where you can upload new files or choose one from the existing library. Now the clever bit – the plugin uses some JavaScript to listen to a click event on the “Insert into Post” button, preventing the default behaviour, finding the attachment_id value of the file and inserting this into a hidden form input.

After researching the plugin’s behaviour, it was fairly straight-forward to replicate this functionality. On the front-end you use the custom field value in the built-in WordPress attachment functions to get the uploaded file’s information, e.g. wp_get_attachment_url on the custom field will return URL of the uploaded file.

I have used this solution on a couple of projects and although it uses the built in file upload behaviour, it can be a bit convoluted when all you want to do it associate a file with a post. So I decided to investigate using a simple file upload using the default browser control, while still making use of the WordPress file management and media library. This turned out to be relatively easy, but there are a few gotchas.

A simple upload solution

By default the post edit form in the WordPress admin does not have the enctype="multipart/form-data" attribute which is required for file uploading. Luckily there is an action which allows you add custom attributes to the edit form. The following code adds the enctype attribute to all post edit forms (you can easily modify it to be restricted to a certain post type).

add_action('post_edit_form_tag', 'post_edit_form_tag');
function post_edit_form_tag() {
    echo ' enctype="multipart/form-data"';
}

Next you need to add a add_meta_box for the file upload field. This is done within a function that is hooked in to WordPress using add_action('admin_init');. Below is the function I use for the custom field document upload:

function custom_field_document_upload() {
    global $post;

    $custom         = get_post_custom($post->ID);
    $download_id    = get_post_meta($post->ID, 'document_file_id', true);

    echo '<p><label for="document_file">Upload document:</label><br />';
    echo '<input type="file" name="document_file" id="document_file" /></p>';
    echo '</p>';

    if(!empty($download_id) && $download_id != '0') {
        echo '<p><a href="' . wp_get_attachment_url($download_id) . '">
            View document</a></p>';
    }
}

The final functionality is to save the uploaded file as an attachment and associate it with the post. This is done by using a function that hooks in to WordPress using add_action('save_post');. The function looks for upload files, use the built in functions to upload, insert the attachment and associate the custom field using post meta.

function custom_field_document_update($post_id) {
    global $post;

    if(strtolower($_POST['post_type']) === 'page') {
        if(!current_user_can('edit_page', $post_id)) {
            return $post_id;
        }
    }
    else {
        if(!current_user_can('edit_post', $post_id)) {
            return $post_id;
        }
    }

    if(!empty($_FILES['document_file'])) {
        $file   = $_FILES['document_file'];
        $upload = wp_handle_upload($file, array('test_form' => false));
        if(!isset($upload['error']) && isset($upload['file'])) {
            $filetype   = wp_check_filetype(basename($upload['file']), null);
            $title      = $file['name'];
            $ext        = strrchr($title, '.');
            $title      = ($ext !== false) ? substr($title, 0, -strlen($ext)) : $title;
            $attachment = array(
                'post_mime_type'    => $wp_filetype['type'],
                'post_title'        => addslashes($title),
                'post_content'      => '',
                'post_status'       => 'inherit',
                'post_parent'       => $post->ID
            );

            $attach_key = 'document_file_id';
            $attach_id  = wp_insert_attachment($attachment, $upload['file']);
            $existing_download = (int) get_post_meta($post->ID, $attach_key, true);

            if(is_numeric($existing_download)) {
                wp_delete_attachment($existing_download);
            }

            update_post_meta($post->ID, $attach_key, $attach_id);
        }
    }
}

Now you can upload files using a simple file input custom field and pull the uploaded attachment from the media library using the build in functions. This code has been built as a focused solution to a problem and can be tailored to different use cases.

If you want to upload multiple files, then it would make sense to loop through all upload $_FILES. This would be a simple alteration and would make an assumption of adding an _id suffix to the file name for the custom field post meta. You would wrap the above code in the following loop while removing the $file variable and using the updated attach_key variable;

foreach($_FILES as $key => $file) {
    $attach_key = $key . '_id';
}

I hope you find this a useful tutorial for uploading files as custom fields in WordPress. If you’ve got any other solutions, please leave a comment.

New games are coming out daily for the iOS platform but it is always difficult to find the smooth among the rough. I often buy games through recommendations on Twitter, but very rarely there is general consensus which is hard to avoid. Angry Birds fits in to that second category and so does the first game recommendation in this post.

Tiny Wings is a game infused with cuteness. Like all good iPhone games, Tiny Wings is incredibly easy to pick up and play, but also frustratingly difficult to put down. The game has a perfect learning / skill curve, it draws you in with is simplicity and doesn’t let you leave until you’ve played one more game.

Gravity Guy is a fast paced side-scrolling auto-running game. I am a fan of these games as they’re very easy to learn, quick to pick up and play, but hard to master and even more difficult not to have “one more go”. Also see Canabalt — the game that is often quoted as (re-)starting the craze — and my favourite Monster Dash. You can play Gravity Guy online and there is a free version of the game if you want to try it out, but beware, you’ll soon get sucked in!

Fragger is a game that has many similarities with the incredibly popular Angry Birds franchise. This time instead of throwing birds to knock down structures, you throw grenades which can be used to blow up strategic areas of the game and kill the enemies. Like other Miniclip games, you can play Fragger online.

Collision Effect is a game from the highly successful publisher Chillingo, who also published the first Angry Bird game as well as Cut the Rope and Minigore. The style and vibe of this game reminds me a lot of Orbital, a game I recommended in my first review of iPhone games. There are two modes to the game, action and puzzle. In the fast paced action mode you must guide colored orbs into each other as they appear on your screen, all while avoiding orbs of a different color. The puzzle mode takes the same idea and sets a static arrange of the orbs in which you must successfully destroy.

Death Rally is a slightly 3D top-down racing shoot ‘em up game. The style reminds me a lot of the original Grand Theft Auto as well as the classic Micro Machines franchise. There seems to be two tactics in races; race to win or hang back to try to destroy the other vehicles. Each race earns you points which you can use to upgrade your cars and weapons. There are also power-ups which can be collected on track to unlock stronger and faster cars and new items like shotguns and gatling guns.

Shift! 2 is a mind-bending puzzle game in which you simple need to reach a door to exit the level. It is not as simple as it sounds as to do so you must flip and invert the black & white world to successfully unlock keys, escape deep holes and avoid spikes. The first few levels are a great tutorial to the game and it soon gets your brain thinking in multiple dimensions! As with a lot of games on this list, you can also play the Flash version of the game online.

Trainyard is a puzzle solving game where you mix-and-match colour trains as you try and successfully get all of them to their stations, all while avoiding collisions — unless it is necessary to make new colours! There is also a free version of the game available, which features a completely different set of puzzles than the paid version.

Super Stickman Golf isn’t the most beautiful iPhone game you can play, but as Marco describes it is an “essentially simple 2D golf on Worms-style terrain”. If you’re a fan of the Worms series or games which involve angles then you should look below the graphics and have a go. My major drawback with the game is although you can pick up and play any unlocked level, to progress through the game you must play a series of holes, which can take a fair amount of time.

Superbrothers: Sword & Sworcery EP is an experimental game. I heard a lot of good things about it, but at the time there was an iPad-only version. Since then an iPhone version has been released and I have had a chance to play. This is not your normal iPhone game. It is a game which you must invest time to play, the pace is sedated and the scenery and music is relaxing. I haven’t progressed far yet as you need plenty of time to get immersed. Worth a download to experience the relaxing aspect alone.

Astronut is a charming game in which you must bounce a lonely astronaut from planet to planet across a universe which is full of exploding planets and aliens who are trying to stop you. The free game gives you a taster of the game-play but you must buy to unlock more levels, which is where the fun begins.

What have you been playing?

Although these special glyphs do not appear on your keyboard doesn’t mean you can’t type them. There are multiple methods to help you output the correct glyph, below are some of the methods I use.

Keyboard Combinations

There are different key combinations for typing the correct “smart” quotation marks and ellipsis on different operating systems. Below are the combinations for Windows and OSX.

Websites & Applications

For more obscure glyphs that I do not need to use on a day to day basis and therefore aren’t worth remembering, I use a couple of different methods.

The main method is the website CopyPasteCharacter. A very simple idea; simply click the glyph you need and it’s automatically copied to your clipboard. It doesn’t have an exhaustive list, but I rarely need to look anywhere else. There is also an iPhone app so you can easily get these glyphs on your iOS device.

You don’t need an iOS device or a native application to get a wide range of glyphs on your mobile device. Neven Mrgan has developed a website which acts as an app on your device, even working with no Internet connection. Simply go to Glyphboard and add it to your home screen.

iOS

iOS devices (and I guess any device with software keyboard capabilities) have a clever keyboard system. The majority of a standard keyboard’s keys can be found within two taps, by default you’re shown the alphabet (in the common qwerty layout), tapping “.?123” gives you numbers and common punctuation characters, and tapping “#+=” gives you access to even more.

Using two taps you have access to 71 (26 + 25 + 20) characters. But there are more. Hidden away. A long tap on almost every single character gives you access to related glyphs. Doing this under the alphabetic keyboard gives you the appropriate diacritical marks for that letter. A similar behaviour can be found with the punctuation marks. A long tap on the full stop (or period) character shows a popup which includes the correct ellipsis glyph. This works similarly for both single and double quotes. (Note, not all characters have this functionality). Check out this article which has more examples of iOS keyboard shortcuts.

Tip: When you’re entering a web address, the popup functionality is also available for top level domains (TLDs). Simply long tap on the “.com” and you will get a popup with a list of common TLDs.

WordPress as a content management system is far from perfect. There are plenty of reasons why it isn’t the best choice in a lot of situations and there are a lot of annoying idiosyncrasies. However, for small websites which require content management, the easy to use administration area in which clients can feel confident with and the recent improvements mean that it is a system you should persevere to learn and master.

The have been many recent improvements, but it is the addition of custom post types, which mean you can define your own content areas instead of being limited to the default posts and pages without having to rely on hacks and plugins, that has turned WordPress from a blog service in to a fully fledged content management system.

Custom post types have been available in WordPress since version 2.9, however it was version 3 and the most recent 3.1 release which matured them and made them more usable. These new post types mean you can easily add consistent sets of data, for example a list of employees at a company, including permalink pages, featured image, snippets and even tags.

Custom Post Type Example

In a recent project I needed information about team members, including an archive page which listed them. I first added a page called “Team” and created a template file page-team.php. I also registered the custom post type in the functions.php. Below is the custom post type snippet;

function post_type_init() {
    register_post_type('team', array(
    'labels' => array(
            'name'                  => __( 'Team' ),
            'singular_name'         => __( 'Team' ),
            'add_new'               => __( 'Add New Member' ),
            'add_new_item'          => __( 'Add New Member' ),
            'edit'                  => __( 'Edit Member' ),
            'edit_item'             => __( 'Edit Member' ),
            'new_item'              => __( 'New Member' ),
            'view'                  => __( 'View Member' ),
            'view_item'             => __( 'View Member' ),
            'search_items'          => __( 'Search Team' ),
            'not_found'             => __( 'No Members found' ),
            'not_found_in_trash'    => __( 'No Members found in Trash' ),
            'parent'                => __( 'Parent Member' ),
    ),
    'description'           => 'A team member',
    'capability_type'       => 'post',
    'public'                => true,
    'exclude_from_search'   => false,
    'show_ui'               => true,
    'hierarchical'          => false,
    'has_archive'           => false,
    'rewrite' => array(
        'slug'          => 'team',
        'with_front'    => false,
    ),
    'supports' => array(
        'title', 'editor', 'excerpt', 'thumbnail', 'page-attributes'
    )

For more indepth documentation about custom post types including what each value means, their options and more arguments, check out the register_post_type Codex page.

Custom Fields

The system also makes it easy for you to expand custom post types with custom fields, giving even more flexibility to the content. For each team member I needed to add more specific content, such as their role and age.

I get all the current custom data for this entry, checking that the data exists and assigning it to a variable to use. Then it is just a case of building the HTML you want to display, these can be any form element you want (input, textarea, checkbox etc).

function post_type_custom_fields_team() {
    global $post;

    $custom = get_post_custom($post->ID);
    $role   = !empty($custom['role'][0]) ? $custom['role'][0] : '';
    $age    = !empty($custom['age'][0]) ? $custom['age'][0] : '';

    echo '<p><label for="role">Role:</label><br />';
    echo '<input type="text" style="width:90%;" id="role" name="role"
            value="' . attribute_escape($role) . '" /></p>';

    echo '<p><label for="age">Age:</label><br />';
    echo '<input type="text" style="width:50px;" id="age" name="age"
            value="' . attribute_escape($age) . '" /></p>';
}

I use a single function to wrap all the custom field add_meta_box functions and a single function to save all the data, as it makes registering them with WordPress easier. The first five arguments are the ones you will probably change the most. As defined by the add_meta_box Codex page, these are; the meta box identifier (must be unique per post type), title of the meta box, the callback function which adds the extra fields, the type of write screen or custom post type and context which is where the box is added (‘normal’, ‘advanced’, or ‘side’).

The add_meta_box function is as follows;

function post_type_custom_fields() {
    add_meta_box('extra', 'Details', 'custom_fields_team', 'team', 'normal');
}

Finally, you need to tell WordPress about these functions, which is done by adding “actions”. For the custom post type you need one action, and custom fields you need two. For the code above, the following code was used;

add_action('init',       'post_type_init');
add_action('admin_init', 'post_type_custom_fields');
add_action('save_post',  'post_type_custom_fields_update');

Note, when registering a custom post type you can use the register_meta_box_cb argument, which points to a function where you setup meta boxes. This may be a preferable solution to that documented above, but I didn’t know about it before!

Annoyances

Although a great addition to WordPress, there are plenty of annoyances which plague the custom post type system. In version 3, the system lacked a built in archive system, however this was implemented in version 3.1. This quick turn around is noticeable and in many situations it’s current form is more hassle than it’s worth.

The lack of custom post type archive in version 3 lead to solutions using the built in pages and templates functionality. This is a system I still use even though archives are available in version 3.1. I found the built in archive solution for custom post types to be very buggy and lacked functionality I required.

Firstly, there is currently no integration with the (relatively recent) Menu / Navigation system, meaning you had no way to adding these archive pages to the template dynamically (sure, there might be hacks, but no nice way). The only viable method was adding a custom page, but then this lost any relationship to the active page/archive, making coding active states reliant on menu ID class names, which can lead to difficult to maintainable code.

Using a page with a custom page template means you can also easily add in other plugins, such as All-in-One SEO, allowing for control over the title and meta data for the page. It also means that you can use the managed content area as you would on a normal page.

Combining the template page with the rewrite functionality of the custom post type gives you the most control over your new content. You can even change the permalink template by using the single-{post_type}.php template hierarchy.

Although using two sections in the CMS to manage a single entity is far from ideal, it gives the flexibility and functionality the current implementation of custom post types is missing. I have no doubt in future releases these issues with be rectified, it’s just a case of waiting and using other solutions in the mean time.

Initial progress with the framework was quite swift, as it takes the common MVC approach, something you will be familiar with if you know any decent frameworks, PHP or otherwise. Although Fuel is a new framework, it borrows a lot of ideas from two very popular PHP frameworks, CodeIgniter and CodeIgniter’s PHP5 fork Kohana (although it has since been rewritten in version three) and the core team; Dan Horrigan, who is lead developer, Phil Sturgeon, Harro Verton and Jelmer Schreuder; all work heavily within the CodeIgniter community.

However, there were a couple of times I came unstuck due to the lack of documentation. Good documentation is a major driving force behind any framework, something that CodeIgniter is superb with, and Kohana has been working on since the release of version three. Fuel is no different, there is some core documentation to get you started on common topics but currently it is lacking in a few areas — this is going to change very soon, currently Fuel is in beta, but with version one release candidate being released on April 1st documentation completion is a high priority for the official release date.

A side effect of a new framework is also the lack of blog articles documenting “how-tos”, which are often more useful than documentation. Phil Sturgeon has a couple of articles and a screencast and you might find some luck on Google, but I became frustrated when I wanted to know the best and framework way to implement a simple form with validation. Luckily, FuelPHP already has a good community and a few minutes on the IRC channel (#fuelphp on freenode) I was up and running. Below is my brief run through of what I did.

The HTML

Although there are magic methods to automatically create forms with validation already baked in to the framework, the missing documentation means that working it out for yourself is likely to be more hassle and stress than the reward you get. I like to be in tight control of my HTML, so the best solution was to combine HTML and form helpers. Although the form helpers aren’t yet documented, a quick look in to the code shows that they’re incredibly simple to use.

Below is an example email input (using the HTML5 email type), which uses the Form::input helper. The first argument is the name attribute, the second is the value — this is taken from the $validation class (set up in the controller, see below) — and finally an array of other attributes. $validation->errors is a method which outputs any error messages which have been set.

<div class="text email required">
    <label for="contact-email">Email <abbr title="Required">*</abbr></label>
    <?php echo Form::input('email', $validation->input('email'), array(
        'type'     => 'email',
        'id'       => 'contact-email',
        'required' => 'required'
    )); ?>
    <?php echo $validation->errors('email'); ?>
</div>

Form Validation

For any user generated content you should be validating the input, this is something which frameworks make incredibly easy to do. FuelPHP comes with a useful validation class.

You start by setting up the fields which need validating and their corresponding rules, which are chain-able. Example below for the email input.

$validation = \Validation::factory('contact');
$validation->add('email', 'Email')
    ->add_rule('required')
    ->add_rule('valid_email');

Optionally, you can set up custom error messages for each rule. For the email input validation rules, I used the following messages.

$validation->set_message('required', ':label is required.');
$validation->set_message('valid_email', ':label must be a valid email address');

To run the validation, simply do the following, adding success code within the if statement.

if($validation->run()) {
    // success, form is valid
}

Finally, assign the validation to the view.

$this->_view->validation = $validation;

Success Handling

Once you’ve got your form validated, you need to do something useful with the data and then redirect the user to avoid multiple POST requests. Usually you will be saving the information in to a database, so load up the correct model, assign the values and let the ORM save the object. Below is an example of how I save a basic contact form, this is within the success if statement defined above.

if($validation->run()) {
    $contact = new Model_Contact();
    $contact->name    = $validation->validated('name');
    $contact->email   = $validation->validated('email');
    $contact->message = $validation->validated('message');
    $contact->save();
}

Finally, redirect the user to a confirmation page.

Response::redirect('contact/confirmation');

input vs validated

The code documented above uses two methods on the $validation class to get the value of the POST request. They behave slightly differently, so it is useful to know the difference.

$validation->input is used in the view form helper and populates the form with the value the user typed.

$validation->validated returns a sanitised value that has been passed through all the validation rules. For example, if you use trim or strip_tags then the validated value will be trimmed with no HTML elements. Importantly, if you use valid_email and the user inputs an invalid email address, the validated value will be blank — this would be annoying and unexpected behaviour if used with the view form helper.

Shallow Grave is definitely a debut movie. Released in 1994 it has dated quite badly, is very rough around the edges and has a certain raw direction and cinematography. The story is average at best, but you leave thinking about the strong climatic ending. The characters are self indulgent, witty and fast talking, these traits and overall style feels very much as a less disgusting precursor to Trainspotting, you can also certainly see the talent of the director at this early stage. It also marked the debut for screenwriter John Hodge, who collaborated with Boyle in next three movies (up to The Beach) and the first starring role for Ewan McGregor, who he later directed on Trainspotting and A Life Less Ordinary – this was until their feud over the casting of Leonardo DiCaprio in The Beach.

Trainspotting is an amazing piece of cinema. Having recently revisited the movie I was physically afflicted by the grotesque reality that Danny Boyle’s and the actors – notably Ewan McGregor – managed to project so vividly in this disgusting look at drug culture. Released in 1996 but set in ‘80s Scotland, it follows a gang of double crossing drug dealing outcasts. Everyone talks about the toilet scene and for good reason. It is a truly disgusting set piece which made me flinch and wriggle in my seat – a reaction both the director and actor were definitely hoping for.

A Life Less Ordinary (1997) is a light-hearted movie again starring Ewan McGregor, this time along side Cameron Diaz, together as an unexpected and unusual couple, forced together by her kidnapping. This rather conventional story has a slight twist, in the way of two angels, who are in charge of human relationships on earth, offer some unsolicited help to bring this unlikely couple together. The movie is a departure from his darker previous movies, in both style and substance, and although a perfectly fine movie in it’s own right, it is still one of his weakest.

The Beach (2000) had a somewhat controversial production process. Firstly, the studio wanted a bigger, well-known actor to star as the lead, and when Leonardo DiCaprio was cast, a feud was created between the director and his previous favourite Ewan McGregor. Secondly, there were protests about the production impact on the idyllic remote islands where it was filmed. With these issues aside, the movie conveys a great sense of awe and exploration that backpacking brings, inter-weaved with mystery and a sense of foreboding. The movie loses a little pace towards the end, but is visually impressive and draws you in quickly with the intriguing screenplay.

In 2002 Boyle returned to a more low-budget, British-based movie, the apocalyptic 28 Days Later. It opens with scenes of violent conduct and as the camera pans back, we see a monkey being forced to witness these atrocities – much like the main protagonist’s rehabilitation program in A Clockwork Orange. The movie plays out as a straight-forward survival movie, with the first half set in London’s abandoned streets, where we learn of the apocalyptic situation and meet the main characters, notably lead by Cillian Murphy (Jim). The second half is set in a rural stately home north of Manchester, which is being used a strong hold by a group of military personal. Although they have seemingly reached safety, things eventually turn sour, and in the final action scenes Jim’s rage mirrors that of the infected - a harsh and harrowing conclusion to the movies social commentary. There are some interesting stylistic shots, such as the painted flowers, the dream sequence & the final “28 days later” ending. Usually these types of playful and ‘arty’ shots would look out of place in any zombie or action movie, but this relatively low-budget British production isn’t a normal zombie-esque action movie. Although it spawned a direct sequel – 28 Weeks Later – it actually helped start the zombie movie revival we still see today.

Millions (2004) is the directors weakest movie. A childish tale of two deprived children who find a bag a money, the problem is, the next day the currency changes from Pounds Sterling to the Euro. The conflict begins as one believes they should give it to the poor, but the older brother prefers to be “fiscal responsibility”. And their journey interweaves with moral uncertainty and responsibility, but it is unfortunately wrapped up in a whimsical story. Although my least favourite movie, it is one I would like to revisit with a fresh pair of eyes.

Sunshine (2007) was Danny Boyle’s first big budget Hollywood movie and so far his only science-fiction set story. The characterisation of many of the crew is shallow even the main protagonist – played by Cillian Murphy in his second lead role for the director – has little in the way of dialogue, well scripted conflict and even scene time. It is clear that a massive amount of research was put in to the movie, on par with the scientifically sound sci-fi classic 2001: A Space Odyssey. By far the strongest scene is that of the airlock situation where the crew must leap through space in order to survive, there is high tension, great conflict and punchy dialogue. The external visuals are beautiful, but the story and acting is lacking somewhat, the story suffers from large and disorientating non-announced fast-forwarding in the timeline, and the final act takes an unnecessary “Event Horizon”-esque storyline detour. Overall an OK but enjoyable big-budget science-fiction movie but is lacking the characterisation most of his movies focus upon.

A side note about Sunshine’s marketing, which imposed the stunning visuals against the atmospheric music by Clint Mansell. The genre and style is well suited to the music – Lux Æterna – which first appeared in Darren Aronofsky’s masterpiece Requiem for a Dream. Yet this music was only used in the trailer. If it was used in subtle repetition like this years movie of the summer, Inception, the score could have been the movie’s strongest asset.

Slumdog Millionaire (2008) has been Boyle’s most successful movie to date. An unconventional non-linear story that was filmed on location in the Mumbai slums – even some of the leading cast members where from the area – and is told in multiple short stories as the protagonist explains how he knows the answers to all the questions in the Indian version of the TV game show “Who Wants to be a Millionaire”. Winning a total of eight Academy Award Oscars, including best achievements in cinematography, editing and directing and the much coveted “Best Motion Picture of the Year”, the movie also received universal praise from the public.

His latest movie, 127 Hours (2010), is a look at one mans struggle to overcome inevitable death by doing the unthinkable. After 127 hours stuck with his arm pinned under a boulder, this true story follows Aron Ralston and his insatiable desire to survive. James Franco is superb as the charismatic adrenaline junky, making you believe in the whole range of emotions he goes through, from carefree to despair and finally relief – he definitely carries the movie. The movie is enthused with Danny Boyle’s style. The music is very influential and a big part of the experience. There are also some very inventive shots, memorably the water flowing through his Camelback and the placement of a camera within a water canister. Boyle again manages to make the audience uncomfortable, but it isn’t the most talked about scene which got me to flinch and look away. During the movie I didn’t feel completely engaged with the character, but during the final scenes there was a definite sense of emotional relief, so the movie affects you more on a psychological level.

Danny Boyle is unquestionably an amazing director. He certainly has his own style, which he has continually improved from movie to movie, but he has managed to take completely different genres, ideas and stories and make them engaging, fun and visceral. He is definitely a director to watch and be surprised with what projects he tackles next.

This part of a series looking at movie directors.