Apart from a taking a few modules on an Open University course, I've gained 99% of my skills autodidactically.

To do this I followed a total immersion method to the knowledge I sought to gain. This means sucking up information from any source: blogs, video tutorials, forums and books.

As I write this article, on a bookshelf to my left are over 30 web design books that I have bought over the years. Not all of them were rewarding purchases, but I consider some to be worth their weight in gold. Below I list the best of them.

JavaScript

Like many developers, I came to JavaScript after first learning PHP. There are many hurdles to jump over, but if you persevere you will come to love this programming language.

At first, it's minimal number of inbuilt methods stand in contrast to thousands of PHP functions. Initially, being used to accessing a catalogue of high-level functions, this can seem alarming, but you soon realise that this is liberating: you don't have to wade through countless inconsistently named functions like in PHP.

Secondly, differences in implementation between the current and legacy browsers makes CSS broswer quarks look minor in comparison. Thankfully, IE7 and IE8 are declining, but there is still a way to go yet.

Also, it is a rapidly expanding language, not just with EMCA Script 5 and 6; but also JavaScript libraries, frameworks, browser advances, template systems, command line tools and unit testing. No other contemporary programming language has such a dynamic userbase.

A handful of books are responsible for taking my JavaScript skills to a higher level.

John Ressig: Pro JavaScript Techniques (Apress, 2006)

Ressig is most commonly known as the inventor of jQuery. It's impossible to underestimate the impact of this library on front-end development. Pro JavaScript Techniques covers a number of areas that will assist you in writing clean, maintainable code. Subjects covered include object-orientated basics, DOM and CSS interaction, reusable code and events. Written at a time when Internet Explorer 6 and 7 where still dominant, it fully details the differences between these browser and the W3C approach. Unfortunately, these are aspects of JavaScript that we still need to be familiar with today. Few would disagree that John Ressig is a key JavaScript face, so buy this book and then ingest and implement his knowledge. It's a book in which that you will always find new information no matter how many times you read it.

Ross Harmes & Dusin Diaz: Pro JavaScript Design Patterns (Apress, 2008)

More than in any other language, using design patterns in JavaScript is essential. If you write over 200 lines of procedural code it will become an unmaintainable mess.

Reading this book was for me the equivalent of lighting a flare in a dark room.

In 269 pages it details dozens of ways in which you can organise your code so that is is extendable and readable.

Because it is a prototypal language there are no classes in JavaScript, but there are ways of mimicking the features of classical inheritance with public, protected and private methods; creating mixin classes and interface emulation. Diaz and Harmes detail all these approaches plus provide a chapter for each commonly used design pattern like singletons, modules, composites, decorators and observers. It's impossible to use this book to fully understand established programming patterns because the subject matter is too complex even for a publication as well written as this. But I can guarantee that it will point you towards the right direction to coding perfection.

Since 2008, ECMA5 Script has introduced new properties like Object.create, Object.preventExtensions and Object.defineProperties to help in handling JavaScript objects. This book doesn't cover EMCA5 additions so I would recommend Addy Osmani's JavaScript Design Patters (2012, O'Reilly) as a compliment to Pro JavaScript Design Patterns.

Peter-Paul Koch: pkk on JavaScript (2007, Voices That Matter)

More basic in subject matter than the previous two books, pkk on JavaScript is an easy-to-read digest of the scripts basics. I bet there are few professional coders who could succinctly describe the theory behind event bubbling and capturing, but Koch makes a reasonable stab at it. If you are a mid-level JavaScript coder you may presume you have full knowledge of the basics like data types, strings, booleans, control structures or functions. If so then perhaps pkk on JavaScript will surprise you by filling some previously unknown gaps in your knowledge.

Performance

Steve Souders: High Performance Web Sites / Even Faster Web Sites (2007 and 2009, O'Reilly)

Steve's opinions on website performance carries more weight than anybody else on the subject. Even Faster Web Sites and in particular its predecessor High Performance Web Sites are landmarks in this discipline. In the pre-broadband era performance considerations were everything. As internet speeds were slow, optimisation techniques to decrease page sizes were paramount. As broadband usage proliferated, web designers brushed these concerns aside. There two publications reminded everybody that web site performance was still paramount in achieving a satisfactory user experience which in turn directly benefited the commercial aims that the web site was built for.

Much of what we take as standard today – minification, placing scripts at in the footer and using Content Delivery Networks – were first popularised by Steve Souders. But this book is no mere polemical piece. It's strength lies in the research that provides data to back up his argument.

Over the last five years browsers have dramatically improved their ability to handle JavaScript, so some of the information in these books is dated. However, a useful companion is perhaps the more recent Professional Website Performance by Peter Smith (2012, Wrox).

Wordpress

Brad Williams, David Damstra, Hal Stern: Professional Wordpress Design and Development (2010, Wiley) / Brad Williams, Ozh Richard, Justin Tadlock: Professional Wordpress Plugin Development (2011, Wiley)

If you want to understand Wordpress theme and plugin development then these two books are indispensable. Clear, concise and brimming with quality advice, no other current Wordpress guides are as worthy a purchase as these two. They provide a role of both tutorial and reference books.

Wordpress has a loose API, meaning that the code in the tens of thousands of themes and plugins can vary wildly. Actions, hooks, APIs, coding standards, database queries and native helper functions are not comprehensively covered (I'm still waiting for that book), but the chapters do provide the developer a solid foundation for writing quality code.

Like most Open Source projects the official codex is limited and take extreme care when consulting blog articles on Wordpress development: they are often written by those with only limited experience of the platform and PHP.

At least with these two publications you can be confident that you will be provided accurate explanations about fundamental Wordpress PHP essential to every theme and plugin build.

Drupal

Over ten years old now it's fantastic to watch how Drupal has progressed from being a tool written by and for developers to one that aims to reach a wider user base. Starting from Drupal 6, new versions have incrementally improved the Content Management System into being one of the most robust and exciting Open Source projects on the net.

However, the entry point for Drupal development – both for themes and modules – is steeper than Wordpress, which is why having books at hand to assist your learning is essential.

Matt Butcher, Matt Farina, Ken Rickard, Greg Dunlap, Larry Garfield, John Albin Wilkins: Drupal 7 Module Development (2010, Packt Publishing)

Of all the web design publishing houses, Packt is the one to me be most wary of. Expensive to buy, more often than not their books only offer lightweight guides to their respective subject matters.

Drupal 7 Module Development is an above average Packt book which offers the reader a good introduction to Drupal plugin creation. While themeing in Drupal 7 can be insanely frustrating, the plugin APIs are, mostly, a joy to work with. Their form building API is probably the best I have ever used. Unlike Wordpress, Drupal has a strict API which intentionally leaves little room for idiosyncratic coding. If you want to build up a repository of trusted third-party modules then this approach is essential.

There is enough detail in Drupal 7 Module Development to provide you with grounding in Drupal PHP basics: hooks, APIs and architecture overview.

Todd Tomlinson and John K. VanDyk: Pro Drupal 7 Development (2010, Apress)

While Drupal 7 Module Development is a good starting point, Pro Drupal 7 Development is a 688 page bible that you will need close at hand if you really want to understand Drupal code.

Almost without fail I've found Apress to be a quality publisher of web design and programming books. I read a criticism that Pro HTML5 Accessibility (another informative Apress read on my shelf) is let down by its basic design. Come on! Developers buy books for the quality of its content not to look at pretty pictures and avant-garde typefaces.

PHP & CSS

There are no books in my collection for PHP and CSS that I would consider important enough to praise here.

I have the obligatory PHP 6 and MySQL 5 / PHP 5 Advanced by Larry Ullman that every novice buys, and PHP Master by Lorna Mitchell which covers design patterns, security and performance, but most of my knowledge of PHP came through incessant practising.

I've build both countless Drupal and Wordpress themes, created my own Content Management System and authored a Wordpress plugin called Affiliate Hoover that used MVC (and with a Drupal port); amongst much else. Writing code for a purpose is far more inspiring than just coding for the sake of it. The official PHP documentation and blog articles were vital in my understanding of the best way to write this programming language.

It's the same with CSS: practice, practice, practise. For a long time (even now), I tried to add some code or method that I had never used before with every website build.

For both CSS and PHP the Sitepoint forum users provided a lot of advice when I became stuck.

Conclusion

There is no one source of knowledge for any one web technology. Although I would strongly recommend that you get hold of a quality book before you start learning a new one. These can provide both a guide and they can be used as a reference.

But don't just depend on a book. Join and take part in forums, write down your own discoveries on a blog, use Twitter to keep up to date on the latest news, use an RSS reader to follow web design blogs and publications, read net magazine, bookmark articles of interest in Delicious, go to local tech meetups, and, if you can afford it, go to web design conferences.

Web development isn't a job, it's a way of life. It's not something that you do from 9-5, Monday to Friday and then switch off from the rest of the time. If that isn't what you want, look for another career; take the blue pill instead.

I've just re-factored my Affiliate Hoover plugin into an MVC pattern, and rather than calling each of the two dozen files with require_once() I used the __autoload() function.

If a class is called in a file then PHP will automatically use the __autoload() function to load the file. In order for this to work the class name has to be the same as the file name, ie a class of My_Wordpress has to be in a file called My_Wordpress.php.

The first part requires using set_include_path() to include all directories where the php files might be found:

$paths = array(
    AH_PLUGINNAME_PATH.AH_First_LIBS.AH_DS,
    AH_PLUGINNAME_PATH.AH_First_CONTROLLER.AH_DS,
    AH_PLUGINNAME_PATH.AH_First_VIEW.AH_DS,
    AH_PLUGINNAME_PATH.AH_First_MODEL.AH_DS,
    get_include_path(),
    );

set_include_path(implode(PATH_SEPARATOR, $paths));

The constants were previously defined in a different file:

!defined('AH_DS') ? define('AH_DS', DIRECTORY_SEPARATOR) : die("AH_DS already defined: $xyze");
!defined('AH_PLUGINNAME_PATH') ? define('AH_PLUGINNAME_PATH', plugin_dir_path(__FILE__)) : die("AH_PLUGINNAME_PATH already defined: $xyze");
!defined('AH_First_MODEL') ? define('AH_First_MODEL', 'model') : die("AH_First_MODEL CONSTANT already defined: $xyze");
!defined('AH_First_CONTROLLER') ? define('AH_First_CONTROLLER', 'controller') : die("AH_First_CONTROLLER CONSTANT already defined: $xyze");
!defined('AH_First_VIEW') ? define('AH_First_VIEW', 'view') : die("AH_First_VIEW CONSTANT already defined: $xyze");
!defined('AH_First_LIBS') ? define('AH_First_LIBS', 'libs') : die("AH_First_LIBS CONSTANT already defined: $xyze");

The __autoload() function is as follow:

function __autoload($classname) {

    $file = $classname.'.php';
    
    if (stristr(dirname(stream_resolve_include_path($file)), plugin_basename(__DIR__ ))) {
    
        if (file_exists(stream_resolve_include_path($file)) && is_file(stream_resolve_include_path($file))) {
            
            @require_once($file);

        }

    }

}

If the directory plugin name is found in the path of the class then it checks whether it exists and includes it with require_once();

The if statement using with the stristr function is needed to prevent other non-plugin classes being loaded, causing errors.

You can view the code on the Affilate Hoover GitHub repository.

Therefore, the site architecture involved a number of redirects to the English language website. Admittedly, I didn't find this a particularly user-friendly approach for Russian readers but this decision had already been made before I became involved in the project.

A large section of the site was based on categories. A top parent category would divide down into several child categories which would then separate into more child categories. Some of these would redirect to the English language version of the website.

I started off by using John Godley's excellent Redirection plugin, but the problem was that the user interface was too complicated for the layperson to update and change. I needed to add a field to individual categories so that it was just a simple act for the maintainer of the website to cut and paste a URL into the category form.

My starting point was the code found on the article called Adding Custom Meta Fields to Taxonomies. I won't reproduce the code here because it is quite a faithful use of their PHP expect that I changed it into a class.

This is how the category interface looks:

The key method that I added was this:

/** 
     * Category_Add_Field::redirect() 
     * 
     * @param string $id 
     * @return redirect 
     */ 
    public function redirect($id) { 

        $term_meta = get_option("taxonomy_" . $id); 
        
        if ($term_meta != false && (isset($term_meta['custom_term_meta_url']) && $term_meta['custom_term_meta_url'] != '')) { 

            ob_start(); 
            wp_redirect($term_meta['custom_term_meta_url'], 302); 
            ob_end_flush(); 
            exit; 

        } 

    }

It's very simple. If the category term has a redirect URL in the postmeta table then call the wp_redirect() function.

The method is called in the very top of the header.php file:

if (class_exists('\content\Category_Add_Field')) {
 
$cat = get_query_var('cat');
// category redirection if external URL is set in the category page
 
if ($cat != '') {
 
contentCategory_Add_Field::redirect(get_query_var('cat'));
 
}
 
} else {
 
echo 'No class called Category_Add_Field has been found';
 
} 

Yes, I know that the best method is to add these URL redirects to the .htaccess file, but time was against me. This is a quick way of creating a Wordpress category redirect feature.

You can find the full class on this GitGist

Coding this feature into Wordpress was quite a task. It's one thing to code a complex layout, but quite another to create a user-friendly interface in the admin area. I find with Wordpress that doing so in a theme means you really have to jump through coding hoops, whereas Drupal loves these types of complex forms / layouts.

The first problem is that there is no inbuilt Wordpress validation hook that displays error messages – so you need to write your own. The second issue is the use of multidimensional arrays for creating the form and then processing the data after editing, deletions or additions. This can create some challenging coding problems.

I already have a PHP class that I use when creating post types so I modified that for this purpose. As a caveat, the original code was based on somebody else's blog post that I came across sometime ago. I've tried to find it so as to give acknowledgement and a link. Apologies to that person but if you get in touch I will amend this article to do so. Their particular blog post first introduced me to the idea of using the add_filter() hooks to change the post setting from published to draft as well as adding a redirect that allows the displaying of an error message.

The final code is on this GitGist, but I'll run through it all one method at a time.

Before I start I'll state that this approach is really only for serious PHP heads. If that's not you, then it's best if you try to find a plugin to achieve the same functionality.

This is the structure of the class:

namespace content;

class Content_Type_Jobs_Template {

    static $wpdb = null;

    public function __construct() {

        global $wpdb;
        self::$wpdb = $wpdb;

        add_action('init', array(&$this, 'content_type'));

        // I have a habit of using sessions but forgetting to use session_start()
        // So I place this in the __construct method and use session_regenerate_id() for security
        if (session_id() == '') {
            session_start();
            session_regenerate_id(true);
        }

    }

    public function metabox_attributes() {
    } 

    public function content_type() {
    }

    public function add_metaboxes() {
    }

    public function text_one_html() {
    } 

    protected function validation($form) {
    }

    public function save_postdata() {
    } 

    public function add_redirect_filter() {
    } 

    public function my_redirect_post_location_filter($location) {
    } 

    public function my_post_admin_notices() {
    } 

} // end class

new contentContent_Type_Jobs_Template;

As the code serves one purpose only it makes sense to take an Object Orientated approach to keep it organised in one file. If you are going to use classes then also using a namespace helps to avoid naming clashes. This means that it won't work on servers that run less than PHP 5.3, but as that release is a few years old now that isn't something I'm bothered about.

The first method is metabox_attributes():

public function metabox_attributes() {

    return array(

        'title' => array(
            'name' => 'title',
            'type' => 'text',
            'title' => 'Title',
            'description' => 'The job title',
            ),

        'description' => array(
            'name' => 'description',
            'type' => 'text',
            'title' => 'Description',
            'description' => 'Short description',
            ),

        'location' => array(
            'name' => 'location',
            'type' => 'text',
            'title' => 'Location',
            'description' => 'Location of job',
            ),

        'date' => array(
            'name' => 'date',
            'type' => 'text',
            'title' => 'Date',
            'description' => 'Date posted',
            ),

        );

} 

This is where you declare your form field name and type attributes plus a title and description that is used in the display.

Next comes the content_type() with uses the Wordpress register_post_type() function. For more information on this read the guide on the official Wordpress website.

public function content_type() {

    $labels = array(
        'name' => _x('Jobs Layout', 'post type general name'),
        'singular_name' => _x('Jobs Layout', 'post type singular name'),
        'add_new' => _x('Add New', 'book'),
        'add_new_item' => __('Jobs Layout'),
        'edit_item' => __('Edit Jobs Layout type'),
        'new_item' => __('New Jobs Layout type'),
        'all_items' => __('All Jobs Layout types'),
        'view_item' => __('View Jobs Layout types'),
        'search_items' => __('Search Jobs Layout types'),
        'not_found' => __('No Jobs Layout types found'),
        'not_found_in_trash' => __('No Jobs Layout types found in Trash'),
        'parent_item_colon' => '',
        'menu_name' => __('Jobs Layout'),
        );

    $args = array(
        'labels' => $labels,
        'description' => 'Jobs',
        'public' => true,
        'publicly_queryable' => true,
        'show_ui' => true,
        'show_in_menu' => true,
        'query_var' => true,
        'rewrite' => true,
        'capability_type' => 'post',
        'has_archive' => true,
        'hierarchical' => false,
        'menu_position' => null,
        'register_meta_box_cb' => array(&$this, 'add_metaboxes'),
        'taxonomies' => array('category'),
        'supports' => array(
            'title',
            'editor',
            'author',
            'thumbnail',
            'excerpt',
            ));

    add_action('save_post', array(&$this, 'save_postdata'), 10, 2);
    add_action('admin_notices', array(&$this, 'my_post_admin_notices'), 10, 1);
    register_post_type('jobs', $args);

}

The register_meta_box_cb key uses the following method:

public function add_metaboxes() {

        add_meta_box('jobs_metabox', 'Add individual jobs below', array(&$this, 'text_one_html'),
            'jobs', 'normal', 'high');

    }

Which in turn calls text_one_html().

This is where things get tricky. The method is in two different parts.

The first uses the array in metabox_attributes() to create an empty form:

$new_meta_boxes = $this->metabox_attributes();

$form = '<table id="list-table">';
$form .= '<tbody id="the-list" width="100%">';

foreach ($new_meta_boxes as $key => $result) {

    if ($result['name'] == 'title') {

        $form .= '<thead>';
        $form .= '<tr>';
        $form .= '<th class="left"><h4>Add a new job below</h4></th>';
        $form .= '<th><h4>Values</h4></th>';
        $form .= '</tr>';
        $form .= '</thead>';

    }

    if ($result['type'] == 'text') {

        $form .= '<tr>';
        $form .= '<td class="left" width="30%">';
        $form .= '<label for="'.$result['name'].'"><strong>'.$result['title'].'</strong></label>';
        $form .= '<div>'.$result['description'].'</div>';
        $form .= '</td>';
        $form .= '<td width="70%">';
        $form .= '<input type="text" name="'.$result['name'].'" value="';
        $form .= isset($_SESSION[$result['name']]) ? $_SESSION[$result['name']] : null;
        $form .= '" class="regular-text"/>';
        $form .= '</td>';
        $form .= '</tr>';

    }

} // end foreach

$form .= '</tbody>';
$form .= '</table>';

echo $form;

If the user has already created job listings then this data needs to be placed into forms underneath the empty one.

$meta = get_post_meta($post->ID);

$z = $y = $x = 0;

// takes the meta data from the database and creates forms
// populated by the data

if (!empty($meta)) {

    // remove the _edit_last and _edit_lock arrays from the returned multidimensional array
    $remove = array('_edit_last', '_edit_lock');
    $meta = array_diff_key($meta, array_flip($remove));

    $form = '<table id="list-table">';
    $form .= '<tbody id="the-list" width="100%">';

    foreach ($meta as $key => $value) {

        // remove all digits from the key. New form unique form attributes are created below
        $key = preg_replace('/d/', '', $key);

        // make sure that all returned keys fit the original keys in the metabox_attributes method
        if (!in_array($key, array_keys($this->metabox_attributes()))) continue;

        // for every number of total keys in the metabox_attributes add an extra digit
        // this is to ensure that all name attributes are unique
        if ($x++ % count($this->metabox_attributes()) == 0) {

            $y += 1;

        }

        // remove digit from the string
        // and then use array_intersect_key() and array_flip() to find the array of
        // the relevant corresponding key from the meta_attributes() method
        // this is then used in the html

        $key_array = array_intersect_key($this->metabox_attributes(), array_flip(array($key)));

        if ($key_array[$key]['name'] == 'title') {

            $form .= '<thead>';
            $form .= '<tr>';
            $form .= '<th class="left"><h4>'.implode('', $value).'</h4></th>';
            $form .= '<th> </th>';
            $form .= '</tr>';
            $form .= '</thead>';

        }

        if ($key_array[$key]['type'] == 'text') {

            $form .= '<tr>';
            $form .= '<td class="left" width="30%">';
            $form .= '<label for="'.$key.$y.'"><strong>'.$key_array[$key]['title'].
                '</strong></label>';
            $form .= '<div>'.$key_array[$key]['description'].'</div>';
            $form .= '</td>';
            $form .= '<td width="70%">';
            $form .= '<input type="text" name="'.$key.$y.'" value="';
            $form .= isset($_SESSION[$key.$y]) ? $_SESSION[$key.$y] : implode('', $value);
            $form .= '" class="regular-text"/>';
            $form .= '</td>';
            $form .= '</tr>';

        }

    }

    $form .= '</tbody>';
    $form .= '</table>';

    echo $form;

}

What the code is doing is removing unwanted keys from the array ('_edit_last' and '_edit_lock'), stripping the previously added digits at the end of the name attribute values; making sure that the key is in the metabox_attributes() array and it uses the modulus operator to add new a digit with every iteration of the total number of arrays in metabox_attributes() . This is necessary not just to keep the form accessible with valid HTML, but also to ensure that the database entries are unique. Phew, there's a lot happening in this block of code.

Here is the validation:

protected function validation($form) {

    $error = array();

    // filter out unwanted parts of the $_POST
    foreach ($form as $key => $value) {
        if (!in_array(preg_replace('/d/', '', $key), array_keys($this->metabox_attributes()))) {
            unset($form[$key]);
        } else {
            // this session data is used if there is a form error to repopulate the form fields
            // if the form has no error then the session data is destroyed
            $_SESSION[$key] = $value;
        }
    }

    // make sure that the the values are in proportion to that specified in the number
    // of fields in the metabox_attributes. For instance if there are 4 fields in the method, then there must
    // be no blank values in multiplications of 4, ie 4, 8 12
    if (count(array_values(array_filter($form, 'strlen'))) % count($this->metabox_attributes()) == 0) {

        return true;

    } else {

        $error[] = 'Please make sure that all '.count($this->metabox_attributes()).
            ' fields are filled in or leave all form fields empty for the job listing to be deleted';

        return $error;

    }

}

Firstly it again uses the metabox_attributes() array so as to remove unwanted parts of the form. What is left are only the elements that are used for the job listing data. Then it counts the total number of FULL values and using the modulus operator compares it to the number of keys in the multidimensional array in metabox_attributes(). count(array_values(array_filter($form, 'strlen'))) was something I took from php.net and which removes empty array values.

If the number is different it means that a field has been left blank which then creates an error message.

Note how all job form attributes and values are saved as a session. These are used in the forms if validation fails. They are destroyed on successful completion.

The save_postdata() method is in two parts. After validation, the code is forked between success or failure.

If there are no errors, then the data is either saved or deleted:

if ($error === true) {

	// destory session here and save meta data

	foreach ($form as $key => $value) {

		// filter out unwanted parts of the $_POST
		if (!in_array(preg_replace('/d/', '', $key), array_keys($this->metabox_attributes()))) continue;


		if ($value != '') {

			update_post_meta($post->ID, $key, strip_tags($value), false);

		} else {

			delete_post_meta($post->ID, $key, false);

		}

		// destroy session

		$_SESSION = array();

	} // end foreach

}

The second part handle errors:

if ((isset($_POST['publish']) || isset($_POST['save'])) && $_POST['post_status'] == 'publish') {

    self::$wpdb->update(self::$wpdb->posts, array('post_status' => 'pending'), array('ID' => $post->
            ID));

} // end fi

add_filter('wp_insert_post_data', array(&$this, 'add_redirect_filter'), 102);

$this->add_redirect_filter();

$_SESSION['error'] = serialize($error);

Firstly it changes the post status from published to pending, it then calls the add_filter() hook and the add_redirect_filter() method and finally the $error array is serialised into a session to be used later on.

The last method in the class is my_post_admin_notices(). This is how the error messages are displayed to the user.

public function my_post_admin_notices() {

    if (!isset($_GET['message'])) return;

    if ($_GET['message'] == '102') {

        global $post;

        // abort if not my custom type
        if ($post->post_type != 'jobs') return $post->ID;

        $message = '<div id="notice" class="error"><p>';
        $message .= "Error: please check that all form values are correct - <br>";
        $message .= isset($_SESSION['error']) ? implode('<br>', unserialize($_SESSION['error'])) : null;
        $message .= '</p></div>';
        echo $message;

        unset($_SESSION['error']);

    } // end if

} 

Conclusion

The code works and is used on a site soon to be moved to production. I'll post up the URL when it is live. Again, the full class can be found on this GitGist.

I accessed the data to create a table in the theme with this code:

if (class_exists('contentContent_Type_Jobs_Template')) {

    $meta = get_post_meta($id);

    $table = '<table>
<caption>Current vacancies</caption>
<tr class="header-row">
<td id="job-title">Title</td>
<td id="job-description">Description</td>
<td id="job-location">Location</td>
<td id="job-date">Date posted</td>
</tr>';

    $array_keys = array_keys(contentContent_Type_Jobs_Template::metabox_attributes());

    // loop through metabox jobs content to create the table data

    foreach ($meta as $key => $value) {

        // make sure that all returned keys fit the original keys in the metabox_attributes method
        if (!in_array(preg_replace('/d/', '', $key), $array_keys))
            continue;

        static $i;
        $number = $i++;

        if ($number % (count($array_keys)) == 0) {
            $table .= '<tr>';
        }

        if (stristr($key, $array_keys['0'])) {
            $table .= '<td headers="job-title">' . implode('', $value) . '</td>';
        }

        if (stristr($key, $array_keys['1'])) {
            $table .= '<td headers="job-description">' . implode('', $value) . '</td>';
        }

        if (stristr($key, $array_keys['2'])) {
            $table .= '<td headers="job-location">' . implode('', $value) . '</td>';
        }

        if (stristr($key, $array_keys['3'])) {
            $table .= '<td headers="job-date">' . implode('', $value) . '</td>';
        }

        if (($number - (count($array_keys) - 1)) % (count($array_keys)) == 0) {
            $table .= '</tr>';
        }

    } // end foreach

    $table .= '</table>';

    echo $table;

} // end if  if (class_exists('menuContent_Type_Jobs_Template'))

contactQaStudio: (_private.form.contactQaStudio.checked) ? _private.form.contactQaStudio.value : '',
contactQaDirect: (_private.form.contactQaDirect.checked) ? _private.form.contactQaDirect.value : '',
contactStarMine: (_private.form.contactStarMine.checked) ? _private.form.contactStarMine.value : '',

This is fine if you have a small form but when you have 32 separate fields it creates non-elegant code. To be honest I felt slightly embarrassed and I'm sure that whoever maintains this script will be cursing the day I was born.

The best solution would be one where you drop in a reusable JavaScript class and access it like so:

// name attribute of form
var contactForm = new FormClass('contactUs');

// id attribute of form elements
// use required if the form field is essential
contactForm.required('contact-name', 'Please fill in your contact name');
contactForm.required('contact-email', 'Please fill in your email address');

// id attribute of form elements
// use validationInd to create individual form field validation
contactForm.validationInd('contact-email', 'email');
contactForm.validationInd('contact-name', 'Please enter a minimum of 10 characters for a contact name');

// use validation to run validation function
// will produce error messages or save form if okau
contactForm.validation();

This is just what I have done. My aim was to leverage the composite pattern, but in the end I fell short of that. I liberally use the prototype keyword in my script. To understand how, why and when this should be used will make you are far better equipped JavaScript coder. If you don't then I recommend that you read Ross Harmes and Dustin Diaz's book Pro-JavaScript Design Patterns.

Using the above method the id of the form field and the error message is added to an object, which is then looped through.

Individual form validation is handled with the help of regex. For instance, a coder writes 'Please enter a minimum of 10 characters for a contact name'. In the loop if the word 'minimum' is found in the string then the appropriate statement is run with the number of characters, in this case 10, extracted with regex, just like this:

if (this.validationIndValues[key].match(/minimum/g)) {

    // check if number of characters is less than specified

    if (parseInt(doc.querySelector('input#' + key).value.length) < parseInt(this.validationIndValues[key].match(/d+.?d*/g))) {

        anArray.push(this.validationIndValues[key]);

    }

}

By building up the user-specified form objects it is then necessary to run the validation on form submit:

addEvent(document.forms[this.formName], 'submit', validForm.bind(this));

Note the use of the bind() function. This is essential to bypass JavaScript function scope so that the this object is passed into the validForm() function and can then be accessed directly.

Checking for empty values is straight forward. It loops through the id attributes in the object, running a check for empty values on the required form fields:

// loop through ruleList object literals
if (this.formRequired.hasOwnProperty(key)) {

    // check if any of the required values are empty

    if (doc.querySelector('input#' + key).value === '') {

        anArray.push(this.formRequired[key]);

    } // end if

} // end if

The error message is passed into an array which is then added to the errorMessage() method afterwards.

Individual form field validation is a little more complex but essentially follows the same pattern:

for (key in this.validationIndValues) {

    // loop through ruleList object literals
    if (this.validationIndValues.hasOwnProperty(key)) {

        if (this.validationIndValues[key].match(/email/g)) {

            // check if valid email address

            if (!doc.querySelector('input#' + key).value.match(/^(.+)@([^();:,<>]+.[a-zA-Z]{2,4})/)) {

                anArray.push('You have entered an incorrect email address');

            }

        }

        if (this.validationIndValues[key].match(/minimum/g)) {

            // check if number of characters is less than specified

            if (parseInt(doc.querySelector('input#' + key).value.length) < parseInt(this.validationIndValues[key].match(/d+.?d*/g))) {

                anArray.push(this.validationIndValues[key]);

            }

        }

        if (this.validationIndValues[key].match(/maximum/g)) {

            // check if number of characers is more than specified

            if (parseInt(doc.querySelector('input#' + key).value.length) > parseInt(this.validationIndValues[key].match(/d+.?d*/g))) {

                anArray.push(this.validationIndValues[key]);

            }

        }

    }

This is fine for text or textarea fields, but validating checkboxes or radio buttons would require something different.

Conclusion

It works in all browser apart from IE7 because it uses querySelector. However, it should be fairly painless to substitute querySelector with a JS library DOM transversal interface.

What I don't like about the code is that the validation function is too fat and needs to be broken down. It's good JS practice to keep individual methods / functions as thin as possible with each only serving one purpose. It makes the code more readable and it's easier for debugging and unit testing.

Still, it's a good starting point and it's code I will return to in the future when form validation rears its head again.

The code can be found on this GitGist.

Note: I've now re-factored this code to use the cached form object rather than querySelector(). It's quicker code and it works in IE7. The GitGist is here

Wanting a monitor upgrade I looked around for the particular Samsung make that had been recommended to me. On Amazon the cheapest price was £220 (about $350).

Despite being a bunch of tax-dodging skivers, I've had a positive customer relationship with this company with no past issues to complain about. Based on this I went ahead and brought the monitor sold by an Amazon Associate. These are companies that sell their goods on Amazon, so although you pay via the Amazon website, they distribute the items direct to you. I regret making this decision now.

The first issue was although it stated delivery was 3 – 10 days on the payment page, what wasn't clear was that HD-Systemstore, the monitor seller, was a German company based in Berlin. I wouldn't have used a German-based company if I had known. It's not that I have a buy British only stance, it's that a delivery from a British-based company would have been quicker. (I checked HD-Systemstore feedback and it was wholly positive).

Because I work full-time the monitor was delivered to a relatives address. By the time the item arrived, and I could pick it up, two to three weeks had passed. When I got the package home it was immediately clear that the monitor screen was cracked and useless. This probably happened in transit.

Like any consumer I presumed that the next step was either they would replace the item or I would receive a full refund. Neither happened.

Firstly, the company in question ignored my direct email, so I went through the Amazon complaints interface. Please return the item to us, they asked.

I then discovered that packages posted to the rest of Europe cost three times as much as those sent to a British address, so I had to pay £60 to have the thing couriered back using ParcelForce. Under British consumer rights law, there is no stipulation that the company has to pay for an item to be returned if it is faulty.

Eventually it arrived back in Berlin and HD-Systemstore acknowledged the item was defective but stated that because I hadn't returned it within 21 days then I was not eligible for a refund. Of note, they only wrote this in their last email rather than the first one.

The relationship between Amazon and Amazon Associates is a loose one. They enforce a returns policy created by the Associate company, not their own. Which in the case of HD-Systemstore seemed to be what they made up as they went along.

As Amazon sided with HD-Systemstore I appealed to my credit card company who have a chargeback scheme. After supplying all the evidence they wrote back stating that the dispute needs to be resolved through Amazon. Amazon couldn't give a fig.

So where does that leave me? £300 down and with nothing to show for it.

Yes, I should have read the small print, but I naively presumed consumer law would protect me if the item was defective. I unquestionably thought that consumer protection law was clearly laid out and unambiguous. So if you do buy expensive electronic goods from an Amazon Associate always do the following.

1. Make sure the company is based in the same country as you. As I detailed above, this adds a lot more hassle when they deliver the item or if you have to return it.

2. Read the companies returns policy. Make sure you are crystal clear what the procedure is if the item is faulty.

However, what won't die out is the need for a JavaScript animation library. This requires mathematical knowledge that the everyday JS coder doesn't have.

CSS3 animation, although a welcome addition, has its limitations; although I'm sure that the spec will be built on and improved in the coming years.

It certainly does have its uses on the average web-build and it's something that I regularly use.

On my personal portfolio I have some CSS3 animation that runs in the left hand corner. I should state that creating animation that automatically runs on page load is a bad design decision because it distracts from the text, but it's my own personal site so I can experiment with it.

The code for this animation is particularly verbose. Here it is... gulp:

@keyframes dazzle {
    0% {
        box-shadow: -50px 40px 2px -13px rgba(255, 255, 255, 0), -60px 60px 2px -13px rgba(255, 255, 255, 1), -35px -20px 2px -12px rgba(255, 255, 255, 0), 40px 60px 3px -13px rgba(235, 255, 255, 1), 30px -50px 2px -13px rgba(255, 255, 255, 0), -50px 35px 3px -11px rgba(255, 255, 235, 1), -25px -20px 3px -13px rgba(235, 255, 235, 0), -40px 10px 4px -11px rgba(255, 255, 255, 1), -40px -65px 1px -13px rgba(255, 245, 255, 0), -10px 50px 3px -12px rgba(255, 255, 255, 1), 10px -30px 3px -12px rgba(235, 255, 255, 0), -30px -20px 2px -12px rgba(255, 245, 255, 1), 70px 40px 3px -13px rgba(255, 255, 255, 0), 20px 50px 2px -13px rgba(205, 255, 255, 1), -40px 45px 6px -11px rgba(255, 255, 255, 0), -35px -60px 3px -13px rgba(255, 255, 225, 1), -30px 40px 4px -11px rgba(255, 255, 255, 0), -70px -55px 1px -13px rgba(255, 255, 255, 1), -10px 50px 3px -12px rgba(235, 255, 255, 0), 20px -40px 3px -12px rgba(225, 255, 255, 1), -20px -10px 2px -13px rgba(255, 255, 255, 0), -50px -20px 5px -12px rgba(245, 255, 255, 1), 70px 30px 3px -13px rgba(215, 255, 245, 0), 40px 90px 2px -13px rgba(255, 255, 255, 1), -40px 35px 3px -11px rgba(165, 235, 215, 0), 35px -40px 3px -13px rgba(245, 255, 255, 1), -70px 20px 4px -11px rgba(215, 215, 235, 0), -40px -25px 1px -13px rgba(255, 245, 255, 1), 10px -60px 3px -12px rgba(255, 225, 245, 0), -20px 70px 3px -12px rgba(255, 255, 255, 1), -25px 80px 2px -13px rgba(245, 255, 255, 0), -40px 90px 2px -12px rgba(170, 235, 255, 1), -35px 20px 3px -13px rgba(225, 215, 255, 0), 60px -20px 3px -12px rgba(255, 255, 255, 1), 20px -80px 2px -13px rgba(255, 255, 255, 0), 10px 40px 3px -13px rgba(225, 255, 255, 1), -45px -40px 2px -13px rgba(255, 245, 255, 0), 40px -10px 3px -12px rgba(255, 255, 255, 1), 15px 30px 2px -13px rgba(225, 235, 255, 0), 10px -30px 2px -12px rgba(255, 245, 245, 1), 40px 50px 2px -13px rgba(255, 255, 255, 0), -55px 40px 4px -13px rgba(225, 245, 255, 1), -40px -10px 2px -12px rgba(195, 255, 175, 0), 30px -20px 2px -13px rgba(255, 255, 255, 1), 50px 20px 3px -13px rgba(255, 255, 255, 0), -55px -10px 2px -13px rgba(255, 205, 255, 1), 10px -30px 7px -12px rgba(255, 255, 255, 0), 10px 60px 2px -13px rgba(255, 255, 255, 1), 20px -30px 2px -12px rgba(225, 225, 225, 0), 40px 50px 2px -13px rgba(195, 255, 255, 1), 30px 70px 3px -13px rgba(235, 255, 235, 0), -60px 60px 2px -13px rgba(255, 255, 255, 1), 10px 70px 3px -12px rgba(225, 205, 255, 0), 20px 90px 2px -13px rgba(235, 255, 235, 1), 30px 70px 5px -12px rgba(225, 255, 225, 0), 10px -40px 2px -12px rgba(195, 255, 175, 1), 20px -60px 2px -13px rgba(255, 255, 255, 0), 30px 60px 3px -13px rgba(255, 255, 255, 1), -75px -30px 2px -13px rgba(255, 205, 255, 0), 30px -30px 7px -12px rgba(255, 255, 255, 1), 40px 60px 2px -13px rgba(255, 255, 255, 0), 20px -30px 2px -12px rgba(225, 225, 225, 1), 20px 50px 2px -13px rgba(195, 255, 255, 0), 40px 20px 3px -13px rgba(235, 255, 235, 1), -40px 30px 2px -13px rgba(255, 255, 255, 0);
    }

    100% {
        box-shadow: -50px 40px 2px -13px rgba(255, 255, 255, 1), -60px 60px 2px -13px rgba(255, 255, 255, 0), -35px -20px 2px -12px rgba(255, 255, 255, 1), 40px 60px 3px -13px rgba(235, 255, 255, 0), 30px -50px 2px -13px rgba(255, 255, 255, 1), -50px 35px 3px -11px rgba(255, 255, 235, 0), -25px -20px 3px -13px rgba(235, 255, 235, 1), -40px 10px 4px -11px rgba(255, 255, 255, 0), -40px -65px 1px -13px rgba(255, 245, 255, 1), -10px 50px 3px -12px rgba(255, 255, 255, 0), 10px -30px 3px -12px rgba(235, 255, 255, 1), -30px -20px 2px -12px rgba(255, 245, 255, 0), 70px 40px 3px -13px rgba(255, 255, 255, 1), 20px 50px 2px -13px rgba(205, 255, 255, 0), -40px 45px 6px -11px rgba(255, 255, 255, 1), -35px -60px 3px -13px rgba(255, 255, 225, 0), -30px 40px 4px -11px rgba(255, 255, 255, 1), -70px -55px 1px -13px rgba(255, 255, 255, 0), -10px 50px 3px -12px rgba(235, 255, 255, 1), 20px -40px 3px -12px rgba(225, 255, 255, 0), -20px -10px 2px -13px rgba(255, 255, 255, 1), -50px -20px 5px -12px rgba(245, 255, 255, 0), 70px 30px 3px -13px rgba(215, 255, 245, 1), 40px 90px 2px -13px rgba(255, 255, 255, 0), -40px 35px 3px -11px rgba(165, 235, 215, 1), 35px -40px 3px -13px rgba(245, 255, 255, 0), -70px 20px 4px -11px rgba(215, 215, 235, 1), -40px -25px 1px -13px rgba(255, 245, 255, 0), 10px -60px 3px -12px rgba(255, 225, 245, 1), -20px 70px 3px -12px rgba(255, 255, 255, 0), -25px 80px 2px -13px rgba(245, 255, 255, 1), -40px 90px 2px -12px rgba(170, 235, 255, 0), -35px 20px 3px -13px rgba(225, 215, 255, 1), 60px -20px 3px -12px rgba(255, 255, 255, 0), 20px -80px 2px -13px rgba(255, 255, 255, 1), 10px 40px 3px -13px rgba(225, 255, 255, 0), -45px -40px 2px -13px rgba(255, 245, 255, 1), 40px -10px 3px -12px rgba(255, 255, 255, 0), 15px 30px 2px -13px rgba(225, 235, 255, 1), 10px -30px 2px -12px rgba(255, 245, 245, 0), 40px 50px 2px -13px rgba(255, 255, 255, 1), -55px 40px 4px -13px rgba(225, 245, 255, 0), -40px -10px 2px -12px rgba(195, 255, 175, 1), 30px -20px 2px -13px rgba(255, 255, 255, 0), 50px 20px 3px -13px rgba(255, 255, 255, 1), -55px -10px 2px -13px rgba(255, 205, 255, 0), 10px -30px 7px -12px rgba(255, 255, 255, 1), 10px 60px 2px -13px rgba(255, 255, 255, 0), 20px -30px 2px -12px rgba(225, 225, 225, 1), 40px 50px 2px -13px rgba(195, 255, 255, 0), 30px 70px 3px -13px rgba(235, 255, 235, 1), -60px 60px 2px -13px rgba(255, 255, 255, 0), 10px 70px 3px -12px rgba(225, 205, 255, 1), 20px 90px 2px -13px rgba(235, 255, 235, 0), 30px 70px 5px -12px rgba(225, 255, 225, 1), 10px -40px 2px -12px rgba(195, 255, 175, 0), 20px -60px 2px -13px rgba(255, 255, 255, 1), 30px 60px 3px -13px rgba(255, 255, 255, 0), -75px -30px 2px -13px rgba(255, 205, 255, 1), 30px -30px 7px -12px rgba(255, 255, 255, 0), 40px 60px 2px -13px rgba(255, 255, 255, 1), 20px -30px 2px -12px rgba(225, 225, 225, 0), 20px 50px 2px -13px rgba(195, 255, 255, 1), 40px 20px 3px -13px rgba(235, 255, 235, 0), -40px 30px 2px -13px rgba(255, 255, 255, 1);
    }
}

I was wondering if I could change the rgba values whenever a visitor hovers their mouse over one of the nine main code blocks. Changing animation on mouseover other than hovering over a link is a bad usability decision, but again, as it's my personal portfolio I have room to experiment.

One option is to create different animation blocks in the CSS file and use JavaScript to change the class. Theoretically this is the correct approach because it keeps the CSS and JS separate. However, I really didn't fancy creating multitudes of complex CSS code. (Another possible option is to use SASS to auto-generate the code, but I'll leave that for another time).

So I set about creating a JavaScript module that can create random rgba values and then change the animation blocks on an event change.

If you want to create random digits in JavaScript then the Math object is your friend. This in-built JS object is very inexpensive to use.

So using Math I sketched out the basis for a JS module to create random rgba values (this code was changed in the final version):

ANDY.ANIMATION = (function () {
    'use strict';
    var _private = {
        headers: null,
        randomOne: function () { /* 70 to -70 */

            return Math.floor(Math.random() * 141) - 70;

        },
        randomTwo: function () { /* 2 to 6 */

            /* recursive function. Only return numbers from 2 to 6 */

            var random = Math.floor(Math.random() * 7);

            if (random < 2) {

                return arguments.callee(true);

            } else {

                return random;

            }

        },
        randomThree: function () { /* -11 to -13 */

            var numbers = [-11, -12, -13];

            return numbers[Math.floor(Math.random() * numbers.length)];

        },
        randomFour: function () { /* 0 to 255 */

            return Math.floor(Math.random() * 256);

        },
        randomFive: function () { /* 0 or 1 */

            return Math.floor(Math.random() * 2);


        },
        set: function (val) {
            this.headers = val;
            _private.run();
        },
        setNumbers: function () {



        }
    };
    return {
        init: function () {

            console.log(_private.randomTwo());

        }
    };
}());

Using this as a starting point I created a method to generate the CSS block. The do-while loop builds up the array of rgba values which is finally returned as a string.

 setNumbers: function () {

     /* create 66 different values for the style 
          sheet like so: -50px 40px 2px -13px rgba(255, 255, 255, 0) */
     var x, l, finalArray = [];

     x = 0;
     l = 66;

     do {

         finalArray.push(this.randomOne() + 'px ' + this.randomOne() + 'px ' + this.randomTwo() + 'px ' + this.randomThree() + 'px ' + 'rgba(' + this.randomFour() + ',' + this.randomFour() + ',' + this.randomFour() + ',' + this.randomFive() + ')');

         x += 1;

     } while (x < l);

     return finalArray.toString();

 },

My method next looped through my CSS files to find the file (768.css) that contained the animation and I saved it to the memory of the object (the this keyword refers to the parent object):

 findStyleSheet: function () {

     /* find the 768.css stylesheet */

     var x, l;

     for (x = 0, l = this.styleSheets.length; x < l; x += 1) {

         if (this.styleSheets[x].href) {

             if (this.styleSheets[x].href.indexOf('768') !== -1) {

                 this.styleSheetExtra = this.styleSheets[x];
                 break;

             }

         } // end if

     } // end for loop

 },

Then I used CSSOM to find the keyframe rule:

 findKeyframesRule: function (rule) {

     /* in the 768.css stylesheet find the animation*/

     var ruleList = this.styleSheetExtra.cssRules,
         i, key, l;

     // loop through the cssRules object 

     for (i = 0, l = ruleList.length; i < l; i += 1) {

         for (key in ruleList[i].cssRules) {

             // loop through ruleList object literals
             if (ruleList[i].cssRules.hasOwnProperty(key)) {

                 // find the keyframe animation
                 if (ruleList[i].cssRules[key].type === window.CSSRule.WEBKIT_KEYFRAMES_RULE && ruleList[i].cssRules[key].name === rule) {

                     return ruleList[i].cssRules[key];

                 } // end if

             } // end if

         } // end for object

     } // end for ruleList 

     return null;
 },

This was difficult code to get exactly right but perseverance pays off. I tried window.CSSRule.WEBKIT_KEYFRAMES_RULE and window.CSSRule.MOZ_KEYFRAMES_RULE but window.CSSRule.KEYFRAMES_RULE returned undefined although both browsers are supposed to have implemented a non-prefixed version.

Here is the CSS3 animation change that happens on the choosen event, using the previously created setNumbers() method:

changeRule: function () {

    var keyframes = this.findKeyframesRule("dazzle"),
        cloneBlock, parentBlock, domNode;

    if (keyframes !== null) {

        // change the CSS3 animation here

        keyframes.deleteRule("0%");
        keyframes.deleteRule("100%");
        keyframes.insertRule("0% { box-shadow:" + this.setNumbers() + "; }");
        keyframes.insertRule("100% { box-shadow:" + this.setNumbers() + "; }");

        /* it is necessary to redraw the block for the new animation to work */

        domNode = doc.querySelector('div[role=banner] h1');

        cloneBlock = domNode.cloneNode(true);
        parentBlock = domNode.parentNode;
        parentBlock.removeChild(domNode);
        parentBlock.appendChild(cloneBlock);

    }

},

Here comes the event methods:

onHover: function () {

    var wrapper = doc.querySelector('div[role=main]');

    wrapper.addEventListener('mouseover', _private.onHoverEvent, false);

},

findUpId: function (elem) {

    while (elem.parentNode) {
        elem = elem.parentNode;
        // only use the right node type and that which has an id attribute
        if (elem.nodeType === 1 && elem.hasAttribute('id')) {
            // only if the id attribute value contains block
            if (elem.getAttribute('id').indexOf('block') !== -1) {
                return elem.getAttribute('id');
            }
        }
    }
    return null;

},

onHoverEvent: function (event) {

    // check again to make sure the correct id is choose
    var domResult, idArray = ['block-1', 'block-2', 'block-3', 'block-4', 'block-5', 'block-6', 'block-7', 'block-8', 'block-9'];

    domResult = _private.findUpId(event.target);

    // check again to make sure that the right id block is used 
    if (domResult !== null && idArray.indexOf(domResult) !== -1) {

        // place chosen id into object memory
        if (_private.dom === null || _private.dom !== domResult) {

            _private.changeRule();
            _private.dom = domResult;

        } // end if

    } // end if

}

The coding theory behind this is to set the event on the parent element – div[role=main]. On mouseover I wanted to use the parent id block of the item, ie block-1 or block-2, then change the animation. The choosen DOM block needed to be kept into the object memory on mouseover because I only want to fire the changeRule() method once for every div block.

The result? Not amazing. The problem is that the animation starts from the beginning rather than the colours changing mid-animation so it creates a stuttering affect. The needs to be a bit of morphing happening! To alleviate that I added an opacity and webkit filter blur rule to the animation.

The full code can be found on this GitGist.

If you are creating a Wordpress website and you know PHP then it is good practice to avoid third-party plugins wherever possible. There is only minimal peer review of plugins on the Wordpress repository, and many are substandard with unnecessary database calls, sloppy code or outright security issues. And just because you have bought a Wordpress plugin don't presume that it is well-coded. I've seen some appalling paid-for Wordpress plugins.

There is third-party software to create a breadcrumb but it is easy enough to do it yourself. Googling this lead to dozens of results, but many are very verbose with one person even creating a whole class.

For my starting point I decided to use Greg Rickaby's code. However, there were some issues with this. For starters, he uses the the_category() function which only works in a loop, he also connects it via a add_action() hook which I believe to be unnecessary, plus it's a little too simple.

My version is as follows:

function my_breadcrumb($id = null) {

    echo '<a href="';
    echo get_option('home');
    echo '">';
    echo 'Home';
    echo "</a> > ";

    if (is_category() || is_single()) {

        if (is_single()) {
            echo " > ";
            the_title();
        }

        if(is_category()) {

            $category = get_category(get_query_var('cat'));
            $cat_id = $category->cat_ID;
            $cat = get_category_parents($cat_id, TRUE, ' > ');
            // remove last >
            echo preg_replace('/>s$/', '', $cat);

        }

    } elseif (is_page()) {

        if ($id != null) {

            $parent = get_the_title($id);
            $parent = '<a href="' . get_permalink($id) . '">' . $parent . '</a>';
            echo !is_null($parent) ? $parent . "> " : null;

        }

        echo the_title();

    }

}

This is added to the functions.php file.

It is then used in the theme like so:

<div id="breadcrumb">

    <?php if (!is_search() || !is_404()) {

        global $post;

        if ($post != null) {
            my_breadcrumb($post->post_parent);
        } else {
            my_breadcrumb();
        }

    } else {

        print ' ';

    } ?>

</div>

You can find it on this GitGist.

I've also created a more complex breadcrumb function that incorporates custom taxonomy on this GitGist

Locating and rewriting the CSS involved far too much scrolling through 2,000 lines of code for my liking. It stuck me that if the code was divided intelligently between several different files rather than one long one, then maintenance would be a whole lot easier.

Yes, SASS and Apache Ant give the coder the ability to merge several style sheets together, but it should be an inbuilt feature of the CSS browser implementation.

When Google employee and CSS Working Group member Tab Atkins wrote his post 2013 Work Plans, I left a comment underneath suggesting that there should be an alternative to @import which, although allowing you to insert separate style sheets into one, comes at a performance cost.

Is @import the devil?

Using @import is such a taboo that to use it in a production site is almost the equivalent of putting an “I'm an idiot coder” banner on the home page

But why is it so wrong and do these arguments stand up to scrutiny?

@import and download speeds.

Front-page optimization guru Steve Souders had this to say about @import in an article from 2009:

* Using @import within a stylesheet adds one more roundtrip to the overall download time of the page.
* Using @import in IE causes the download order to be altered. This may cause stylesheets to take longer to download, which hinders progress rendering making the page feel slower.

I thought I would test this out with the help of Web Page Test, so changing the code to a finished website still sitting on a development server, I divided the CSS up into five separate files: reset, reusable classes, navigation, content and footer. It is object orientated CSS in its most primitive form. Then I added these five files to the central style sheet using @import.

I tested download times before and after:

There is a noticeable difference in Internet Explorer 7 and 8, but far less so in IE9, Chrome, Firefox and Android. Perhaps if you are not bothered with IE 7 and 8 (and most of us are), then maybe the 100 milliseconds differences is something you could live with.

@import placed in the footer

The second point made by the prosecution against @import is that it loads the files in the footer, as is written in the Yahoo Performance guide:

One of the previous best practices states that CSS should be at the top in order to allow for progressive rendering.
In IE @import behaves the same as using at the bottom of the page, so it's best not to use it.

Looking at the cascading downloaded resources that Web Page Test details, I can confirm that IE10, Firefox, Chrome and Andriod do load any style sheets added with @import as if they are in the footer, while IE7 to IE9 do not. It's extremely bad practice to place CSS in the footer as it will create a disconcerting page rendering experience for the user.

Conclusion

Avoid using CSS @import. It's not fit for purpose. You're probably thinking, Tell me something I don't know; but it's always good practice to question what your are told rather than accepting it as correct. As some dead guy with a beard once wrote: “We must have merciless criticism of all things existing”.

However, I do hope that browser manufacturers and the CSS Working Group will create an alternative to @import, although I don't see any evidence of demand coming from CSS coders themselves. While many talk about mixins, functions and variables, few seem interested in addressing this problem.

Thankfully there is the wonderful Readability browser plugin that lets us change an article into a beautifully rendered page of text which is perfect for printing out. However, I'm amazed how many web design sites and blogs that, while look stunning, have given no thought at all to providing CSS rules for print. Surely this should come under the roof of good usability? Give your reader the choice of printing your article so that they can read it at their leisure later.

The sad thing about this is that it is so damn easy to implement as the CSS rules for print are the same for almost every web build.

Below is the print CSS I use on every site. It's based on the HTML5 Boilerplate code, but with some additions:

@media print {
    
    * {
        color: #000 !important;
        box-shadow: none !important;
        text-shadow: none !important;
        background: none!important;
    }

/* below choose which page sections you want to hide for print */

    div[id=sidebar], div[role=navigation], div[id=footer] {
        display: none!important;
    }

    body {
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        font: 62.5%  Garamond,"Times New Roman", serif!important;
        line-height: 2em;
    }

    h1,h2,h3,h4,h5,h6 {
        font-family: Helvetica, Arial, sans-serif;
    }

    h1 {
        font-size: 2em;
        margin-bottom: 1em;
    }

    h2 {
        font-size: 1.9em;
        margin-bottom: 1.05263158em;
    }

    h3 {
        font-size: 1.8em;
        margin-bottom: 1.11111111em;
    }

    h4,h5,h6 {
        font-size: 1.7em;
        margin-bottom: 1.17647059em;
    }

    p, li {
        font-size: 1.6em;
        margin-bottom: 1.25em;
    }

    code, pre {
        font: 15px Courier, monospace;
	border : none!important;
    }

    blockquote {
        margin: 16px;
        padding: 1em;
    }

    img {
        display: block;
        margin: 1em 0;
    }

    a img {
        border: none;
    }

    table {
        margin: 1px;
        text-align: left;
    }

    th {
        border-bottom: 1px solid #333;
        font-weight: bold;
    }

    td {
        border-bottom: 1px solid #333;
    }

    th, td {
        padding: 4px 10px 4px 0;
    }

    caption {
        background: #fff;
        margin-bottom: 2em;
        text-align: left;
    }

    a {
        text-decoration: none;
        color: black;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group;
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
   
}

The problem with using SVG at the moment is that it is either partially or not supported at all in Internet Explorer 7 and 8 and most Android-based devices.

This makes using inline SVG particularly problematic. Although I have experimented with using JavaScript as an image replacement technique (SVG Plug), this isn't a suitable commercial solution.

Just recently I was coding a Wordpress theme for a client and thought I'd try using SVG again but this time only as a background image rather than inline.

I asked the designer to import the icons into the PSD as an Illustrator vector object. From there it was a simple process of right clicking on the layer, choosing edit contents and opening it in Illustrator.

It was easy to then export the file as both SVG and PNG.

Instead of embedding these inline I used them as background images. A number of articles have recommended using background images with the background-size property as a solution to responsive design challenges, and I used the same technique but with a few changes.

To detect browser SVG support I used Modernizr so there is a fallback to non-SVG supporting browsers and those who choose to disable JavaScript.

The CSS typically looks like this:

div[id=logo] {
    height: 102px;
    width: 226px;
    display: block;
}

.svg div[id=logo] {
    background: url('/resources/svg/best-bits-logo.svg') no-repeat center center;
    background-size: contain;
}

.no-svg div[id=logo], .no-js  div[id=logo] {
    background: url('/resources/images/best-bits-logo.png') no-repeat center center;
}

Once you get into the swing of it it really doesn't add much time to the web build, and by my own testing I found that once GZIPed, SVG is up to a tenth smaller in size than its PNG equivalent.

The website in question is currently on a development server but will go live soon: http://bestbits.andywalpole.me/

I've been coding a Wordpress theme that although wasn’t responsive didn’t mean that it was any the less likely to be accessed on the go by phone or tablet users.

It got me thinking about how to best deal with the perception of speed when the internet slows to a crawl.

Back in the day I’m sure you must remember those full-immersion Flash experiences that took an age to download. Thankfully, progress bars allowed the user to gauge the time until the site loaded and gave a sense of reassurance that sometime, eventually the website will be visible.

So for hanging pages on mobile couldn’t there a similar usability feature? Obviously, determining the page load time would be impossible, but by adding animation it could give a perception of speed despite in actual fact stalling.

Two ideas I had to bring this about were using the new webkit filters to blur the page and use a CSS3 spinning wheel that is centred in the foreground.

As this is feature would only be necessary on the mobile platform then my coding logic was as follows.

1. Use the HTML5 API matchMedia to detect for smaller devices:

   
   var matches = window.matchMedia("(max-width: 1024px)").matches;
   
   

2. Attach a click event to the body tag this filter links with event.target:

   
   if (event.target.tagName.toLowerCase().toString() === 'a') {
   // code here
   }
   
   

3. On clicking a link add the blur class to the

   
   body:document.body.classList.add('blur');
   
   

4. Then use setTimeout to display then loading spinning wheel and remove it after 5 seconds:

   
   setTimeout(function () {
       // display ajax loading symbol
       doc.getElementById('ajaxLoader').style.display = 'block';
   }, 100);
   setTimeout(function () {
       doc.getElementById('ajaxLoader').style.display = 'none';
   }, 5000);
   
   

It’s important to only let the animation run for no more than five seconds in case the speed is so slow it leaves the user stranded on the same page. If the traffic speed is fast enough then the next page is loaded without any waiting animation running.

The JavaScript module code is here: https://gist.github.com/4564346

For the CSS animation I based it on code Craig Buckler wrote for his article How to Create a CSS3 Ajax Loading Icon Without Images:

div[id=ajaxLoader] {
    position: absolute;
    left: 45%;
    top: 50%;
    z-index : 999;
    display : none;
    width: 15vmin;
    height: 15vmin;
    border: 6px solid #fff;
    border-left-color: transparent;
    border-right-color: transparent;
    border-radius: 50%;
    box-shadow: 0 0 12vmin 0.8vmin #eee;
    -webkit-animation: spin 1s linear infinite;
    -moz-animation: spin 1s linear infinite;
    -ms-animation: spin 1s linear infinite;
    -o-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    background: -moz-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0)));
    background: -webkit-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: -o-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: -ms-radial-gradient(center, ellipse cover, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
    background: radial-gradient(ellipse at center, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
}

div[id=ajaxLoader]::after{
	border-left-color: transparent;
	border-right-color: transparent;
}

@-webkit-keyframes spin {
    from {
        -webkit-transform: rotate(0deg);
        opacity: 0.4;
    }

    50% {
        -webkit-transform: rotate(180deg);
        opacity: 1;
    }

    to {
        -webkit-transform: rotate(360deg);
        opacity: 0.4;
    }
}

I made some changes such as using the new VM unit instead of pixels to allow the animation to scale to the device size.

Testing it in the real world showed that it is quite erratic, but then that’s because page load speeds on the mobile platform are.

Still, it’s just an idea.

In the blue corner is new kid on the block and CSS Wizardry owner, Harry Roberts, who makes a stand with this argument:

This one is very specific to me, and to larger teams. I have written before about how IDs are a bad idea because of their heightened specificity; they are of no use to anyone and should never be used in CSS. Use IDs in HTML for fragment identifiers and JS hooks, but never in CSS.

In the red corner can be found Jeffrey Zeldman:

Say it with me: There is nothing wrong with id when it is used appropriately (semantically, structurally, sparingly). There is plenty wrong with the notion that class is always preferable to descendant selectors and semantic, structural ids.

Then followed a discussion about whether IDs are inherently semantic (they are not) but this missed the key point in Zeldman’s article:

To my knowledge, this notion comes out of Nicole Sullivan’s brilliant Object Oriented CSS, an approach for writing HTML and CSS that is designed to scale on sites containing thousands of pages, created by dozens of front-end developers over a period of years, generally with no rules or style guide in place (at least no rules or style guide until it is too late). On sites like these—sites like Amazon or Facebook that are hosed from the get-go thanks to too many cooks and no master chef—the use of structural id and descendant selectors can be problematic, especially when inept coders try to overwrite an id-based descendant selector rule by creating ever-more-specific descendant selector rules.

The same applies to JavaScript. Douglas Crockford, a man who I have immense respect for, is infamous for his intolerance towards deviations from his strict coding rules. Many of these rules are in place to deal with the inherent deficiencies to be found in JavaScript – and quite right too – but they also come from his experience of managing banks of developers at large multinational digital companies. In these circumstances it is understandable why all coders should adhere to such rigid rules. Smaller teams need to think about what works for them in their group.

But nevertheless should using IDs in a CSS file really be such a forbidden practice? I would argue not. For those of us that deal with CSS on a daily basis IDs signify the declaration block of an important layout element, ie #header, #content, #footer; while classes, traditionally, point to DOM children of the parent items.

When you need to scan a CSS sheet this helps in quickly appraising the code layout.

Personally, I’m in favour of using ARIA roles over HTML5 tags or IDs; but to deal directly with the CSS specificity argument, is there a way of using IDs without building specificity to high levels? Yes, by using attribute selectors. Instead of #testing write [id=”testing”]. This uses IDs but the selector is only given the number of points awarded to classes. Try it out on the specificity calculator. Attribute selectors like this work in all browsers from Internet Explorer 7 and up.

As a final word, Harry Roberts also argues against using, what he calls, qualified selectors. These can look like a.first-link or li.last-item. Instead, he pleads for coders to write .first-link and .last-item.

Because of the lack of universal CSS3 support in browsers, I often use HTML classes like this. When writing CSS it makes total sense to me to link them to their HTML hook because it makes reading CSS easier.

The original inspiration came from my use of a JavaScript bookmarklet. This service (sorry, can't find it now or I would give credit to the developer) allowed me to automatically add the name and shortened URL of the page I was visiting when clicking on my browser menu bar. This meant I could comment on an article or video without leaving the page or using the embedded Twitter link. I used it for ages because it was so convenient.

It is possible to add unicode symbols to a Tweet to give a message a different twist to it, so I mixed the above idea with providing the ability to add unicode icons like a musical note or peace symbol. Unicode symbols were originally created in the 1990s but have never found any common use and so they remain largely unloved and ignored.

You can, if you wish, cut and past the unicode characters straight into your own Tweets, but TwtTwt allows the user to easily insert them into any part of a message.

Although there are hundreds of unicode characters only a few of them have universal browser support, so it took some research to find the couple of dozen that worked in all browsers. Oddly, Safari on Windows offered the worse support with IE9 and Firefox the best. Safari on the Mac accepts a far wider range of unicode symbols then its counterpart on the PC (this was before their recent branching).

The back-end and front-end coding are all my own work although I have made use of jQuery, Selectivizr and Modernizr, albeit only when absolutely necessary.

Code hightlights

The trickiest part of the JavaScript was allowing the user to insert the Unicode symbol anywhere in the body of text. I used the setSelectionRange method for this but, oh boy, is it tricky to get right. I had to seek help on Stackoverflow. setSelectionRange is implemented in IE9 but it wasn't working in the same way as all the other modern browsers so I fell back to a more simple solution for Internet Explorer 9 and below.

The JavaScript function for this is below:

function insert(elmt, txtToIns) {

    if (typeof _private.isIE === "undefined") {
        // setSelectionRange either doesn't work or fails to work properly on IE9 and below
        val = elmt.value;
        start = elmt.selectionStart;
        end = elmt.selectionEnd;
        elmt.value = val.slice(0, start) + txtToIns + val.slice(end);
        elmt.focus();
        caretPos = start + txtToIns.length;
        elmt.setSelectionRange(caretPos, caretPos);

        total = _private.total - elmt.value.length;
        _private.charId.textContent = total;

    } else {

        elmt.innerText += txtToIns;

        total = _private.total - elmt.value.length;
        _private.charId.innerText = total;

    }
}

Just like the message box on twitter.com, I wanted to count the number of characters as the user typed. This wasn't difficult, but I used two jQuery events that I didn't even know existed: cut and paste. So when a user cuts and pastes some text into the message box it counts them to. The snippet for that is here:

jQuery(_private.textArea).on('keyup', function () {

    total = _private.total - this.value.length;
    _private.charId.textContent = total;
    _private.charId.innerText = total;

});

jQuery(_private.textArea).on('cut paste', function () {

    // makes sure that any text cut and pasted into textarea is counted in character count

    var text = this;

    setTimeout(function () {
        total = _private.total - text.value.length;
        _private.charId.textContent = total;
        _private.charId.innerText = total;
    }, 150);

});

The website is not responsive. As it uses a JavaScript bookmarklet, mobile users are not going to be interested. I did though do some media query tweaks for tablets.

Nearly all the images are SVG. After being GZIPed they were up to a tenth smaller in size then their PNG equivalent and, of course, being vector based means their detail holds up well in devices and laptops with a high DPI.

To fall back to non supporting SVG browsers I used Modernizr object detection in the CSS and IE conditional comments in the HTML like so:

<!--[if (!IE)]> -->
 <object data="/resources/new-images/central-image.svg" type="image/svg+xml"  width="970" height="458" >
      </object>
<!-- <![endif]--> 
      <!--[if (IE 9)]>
 <object data="/resources/new-images/central-image.svg" type="image/svg+xml"  width="970" height="458" >
      </object>
<![endif]--> 
      <!--[if lt IE 9]>
<img src="resources/no-svg/central-image.png" width="970" height="458">
<![endif]--> 

A lot of Android devices do not have SVG support so it's not a recommended markup solution until the latest Android version is more widely adopted.

The backend code that enabled me to access the Twitter API was the well-loved and well-used TwitterOAuth by Abraham Williams. It was relatively easy to implement. On the back of this I built my own classes to deal with user registration and sending Tweets. As has been documented countless times PHP is not naturally unicode friendly, so I had to enable the Internalization extension on my server so that I could access the Normalizer class.

I used the Google API URL shortener over other URL shortener APIs because it is so generous in it's daily limits (1 million!) and I presumed it would be the most reliable.

My approach to the project was to let the browser do all the work so instead of keeping user details in a database I stored them in cookies. To handle security issues I encrypted all details with rijndael-256 Mcrypt and used an SSL certificate. Although the user details I choose to store was only the bare minimum necessary like a user picture URL and their name.

Conclusion

I started the project before Twitter's recent shift in attitude to third-party services, and although I have invested a lot of time in the project I've barely spent any hard cash. So if Twitter pulls the plug, well, at least I have another collection of tested code that I can use in future projects.

I hope you are enjoy TwtTwt as much as I have enjoyed making it. Tweet away!

Wordpress isn't a fully fledged CMS (I've avoided calling it as such in this article) but is a versatile blogging platform. This is not a criticism because that is what it is intended to be. Drupal, on the other hand, is a full-blown CMS that offers features in its core not found in Wordpress unless you add third-party plugins.

I've spend a lot of time developing for both platforms and this is my thoughts on their positive and negative sides.

This article is not a thorough review of both content platforms but is subjective opinion based on my experience. It would be interesting to hear the views of others who have experience of Drupal and Wordpress.

The APIs

The first thing of note if comparing the two is that their code is aimed at two different groups of users. Wordpress wants to allow non-professional developers to create themes and modules. Drupal was created and used by professional developers. This in itself lead to problems and the Drupal community has been engaging in a constant process of modifying and reviewing both the admin UX and the APIs to allow greater access beyond hardcore developers.

The downside of the Wordpress approach is that there isn't the strict coding rules and the myriad of inbuilt functions that is a feature of Drupal. This leaves open the possibility to sloppy written third-party addons which is less likely in Drupal because of their strict coding standards and its bigger API collection.

A lot of the Drupal API is really nice to work with, although the learning process is somewhat steeper than that of Wordpress. I think the form API is the best PHP form creation code I have ever used. The database API uses PDO so if you have knowledge of PHP Data Objects you'll find working with the Drupal database abstraction layer a smooth experience as they also use a lot of the same PDO methods like fetchAll() and fetchObject().

The Wordpress form API, called Settings, isn't to my liking. For those that are used to creating PHP / HTML forms on a regular basis, then the user interface of the Settings API is too far removed from the meat and bones of HTML forms. It is important to create a user interface that allows the creation of form elements in the structure that you would if you handcoded it.

This is an example of creating a form in Drupal:

$form['affiliate_hoover_unique_form'] = array(
        '#type' => 'item',
        '#description' => 'Some description here for form intro',
        );

    $form['first_part'] = array(
        '#type' => 'fieldset',
        '#title' => t('Feed details for '.arg(4)),
        '#description' => 'Fieldset description here',
        );

    $form['first_part']['form_title'] = array(
        '#type' => 'textfield',
        '#title' => t('Title'),
        '#required' => TRUE,
        '#maxlength' => 255,
        '#description' => t('Do not add anything other than the above codes for a title'),
        '#default_value' => !empty($_REQUEST['form_title']) ? check_plain($_REQUEST['form_title']) :
            check_plain($form_data->form_title),
        );

    $form['first_part']['form_body'] = array(
        '#type' => 'textarea',
        '#title' => t('Post body'),
        '#required' => TRUE,
        '#description' => t('You can use HTML in here. Examples:<br>To place an image: '.
            htmlspecialchars("<img src="[#7#]">")."<br>To create a link: ".htmlspecialchars("<a href="[#5#]">[#1#]</a>").
            '<br>If you are going to include internal links you must write the full URL, ie '.
            htmlspecialchars("http://www.example.com/category/page-here")),
        '#default_value' => !empty($_REQUEST['form_body']) ? $_REQUEST['form_body'] : $form_data->
            form_body,
        );
    $form['first_part']['form_taxonomy'] = array(
        '#type' => 'textfield',
        '#title' => t('Taxonomy'),
        '#maxlength' => 255,
        '#description' => t('Can be either text or code. All values must be separated with a comma'),
        '#default_value' => !empty($_REQUEST['form_taxonomy']) ? check_plain($_REQUEST['form_taxonomy']) :
            check_plain($form_data->form_categories),
        );

    $form['first_part']['post_status'] = array(
        '#type' => 'checkbox',
        '#title' => t('Status'),
        '#description' => t('Click to immediately publish the item. Otherwise, create item and manually switch to publish one at a time'),
        '#default_value' => !empty($_REQUEST['post_status']) ? $_REQUEST['post_status'] : $form_data->
            post_status,
        );

    $form['update'] = array(
        '#type' => 'submit',
        '#value' => 'Update and create',
        '#submit' => array('affiliate_hoover_uniqueform_build_form_submit')
        );
        
     $form['submit'] = array(
        '#type' => 'submit',
        '#value' => 'Create only',
        '#submit' => array('affiliate_hoover_uniqueform_build_form_two_submit'),
        );

    return $form;

Note the clear association between the form attributes and their values.

With the Wordpress Settings API this is largely absent and I found it unnecessarily confusing when I tried to push it beyond basic use.

In the end I created my own Wordpress form API which I documented in detail on Pro Blog Design.

Less code is needed for Drupal development

Writing modules for Drupal means writing less code.

As an example, when you uninstall a module on Drupal the database tables are automatically deleted, while with Wordpress you have to create a database call in the uninstall hook. It's touches like this that when all added together create a far smaller code base.

What warms me to Drupal is I feel that I am treading on the footsteps of previous work stretching back years. Drupal developers are particularly forward in adding inbuilt functions to deal with the many issues they have faced in the past. One negative aspect of this is that there are hundreds of functions in Drupal which, considering the already chaotic nature of the thousands of native PHP functions, means a lot more time is needed to fully learn the Drupal codex.

Performance

In my experience Drupal performance tops that of Wordpress. I created a module called Affiliate Hoover for both platforms. The module parses CSV data and creates individual posts from the content. As as test I parsed one file with 1153 content items, Drupal took 14 seconds while Wordpress took 37 seconds to create 1153 posts.

The variable isn't because of my code. The actual process of parsing the file into arrays / objects ready for database entry takes less than a second. The rest of that time is used by the respective platforms creating database entries for each item.

Even when flicking between the two platforms, admin Wordpress pages have a noticeable time lag before they fully load while Drupal renders admin pages instantly.

Hosting servers

Both Drupal and Wordpress need at the very least a VPS but most likely a dedicated server. A big performance issue for Wordpress is the widespread availability of badly-coded plugins. If you start using a dozen of these in your build then Wordpress really has trouble coping on a server without generous memory allowance.

Online documentation

On a plus side for both platforms there are a ton of online videos and tutorials to refer to, with a particular help being the stackoverflow sub forms for each software item. Both, to, have a number of high quality published guides which are available for purchase.

Easy of use for non-technical users

The big win for Wordpress is its excellent admin section. This, I feel, is the main reason so many web designers are happy to recommend it to clients. The thought of handing over a site built with Drupal 6 to a client and expecting them to master it is laughable. Thanks to Mark Boulton's web design company Drupal 7 made dramatic improvements to the admin UX but there is still some way to go which I hope will be fully realised in version 8.

Theming

The next big win for Wordpress is its theming. It's a real pleasure to work with. The Drupal Theme API is horrendous. What with all the processor and pre-processor hooks there is often several different solutions to one problem. Please, just one solution for one problem and no more. Thankfully, Drupalistas now recognise this and in version 8 it will be replaced by the Symfony template system, Twig. Once implemented this has the potential to dramatically increase the take up of Drupal by web design agencies who need a faster and less complicated way of creating Drupal themes (time is money).

Conclusion.

There is no Drupal vs Wordpress debate. It's simply the case that one may be more suitable for a particular project than the other. Any commercial company should potentially be prepared to use either.

As detailed above, both have many positive sides to their API approach and each have some negative parts. Neither is perfect, but they are mature platforms much in demand by clients. If you are a professional developer it makes sense to learn both platforms so as to increase your opportunities in finding work.

If you are unfamiliar with developing for either or both here are some books that I would recommend:

Pro Dupal 7 Development by Todd Tomlinson and John K. VanDyk (Apress, 2010)
Professional Wordpress Plugin Development by Brad Williams, Ozh Richard and Justin Tadlock (Wrox, 2011)
Drupal 7 Module Development by Matt Butcher, Matt Farina, Ken Rickard, Greg Dunlap, Larry Garfield and John Albin Wikins (Packt, 2010)

One method of handling these dull jobs was first introduced to me by a fellow member of Forrst.

The Pomodoro Technique is a time management method developed by Francesco Cirillo in the late 1980s. It works by breaking down the work time into the following segments:

• 20 minutes of work
• 5 minutes break
• 20 minutes of work
• 5 minutes break
• 20 minutes of work
• 5 minutes break
• 20 minutes of work
• 20 minute break

And then repeat again.

This has the advantage of making you more disciplined with the time at hand. Not only does this strict structure of working to the clock mean you are less likely to let your mind wander, but it is easy in coding to become fixated on minor bugs. With the clock ticking down I release that these minor problems aren't fundamental to the current state of the project and so I put them aside for later.

Another positive aspect is that it stops me from continuously working in front of a monitor for hours at a time. In the break segments I make myself a cup of tea or have a fag. These moments are also important reflection periods.

To assist with timekeeping I use a great AIR app called Pomodairo. It's a small little device that runs in the background as you work and chimes when a segment has ended.

Give it a go and tell me what you think.

I'm pleased to announce the launch of a little side project of mine, Penny Books. It is a quirky book search engine that uses the Amazon API to find books which are on sale for one penny.

This idea originally came to me years ago. I bought a book called The Web Developers Guide to Amazon eCommerce Service by Jason Levitt, but being the coding pup I was then, the contents went over my head. Today I'm more than intellectually equipped for the job!

Amazon uses SOAP as its preferred information sharing protocol but, thankfully, I didn't have to spend time on the details of this technology because I used Jan Eichhorn's Amazon Product Lookup and Product Search Library. This little script is fantastically user-friendly and I never had any problems that couldn't be easily overcome.

Another part of the server-side code was limiting the number of searches per person per hour. Amazon places very strict limits on access to its data and it would have taken only a small number of visitors to exhaust the hourly rate. The only foolproof method is by building a database and tracking visitors' IP addresses and their number of searches. It's important as well to have fields for the time of their last visit and the time of their “banning”. By using all these fields it is possible to effectively block access to the remote API call if the user exceeds the limit and also delete old and unwanted database entries.

Also on the server-side, the site uses Bad Behavior and Project Honeypot to help repulse spam.

For the client-side code I used the jQuery library for the usual cross-browser compatibility issues and the wonderful Backstretch plugin for the central fixed background image. It is possible to use a background image in CSS and the background-size property, but, like all CSS3, it isn't supported in Internet Explorer 8 and below. Also, I've used Backstretch on a number of different projects now and I've found that it renders the images a lot sharper than “background-size: contain” does.

As the site uses AJAX, I also used the HTML5 History API in order to create usable URLs (Twitter is currently in the process of swapping over to this new API). The only sane way of beginning to achieve acceptable cross-browser working code is to use Benjamin Lipton’s History.js. I write “beginning” on purpose because there are bugs in the code and it is necessary to write more JavaScript to fill in this hole.

The CSS is fully responsive with a dependence on relative and percentage measurements.

On the left hand side on the home page are social media buttons. I wanted these removed from the mobile version. The lazy way is to hide it with “display: none” but the mobile platform will still download the code. The method I used was to build the social media buttons with JavaScript and, using screen.width, to only access the code on large devices.

So, I hope you have fun with Penny Books and you find those reading bargains!

If you know your CSS then you should only occasionally need to worry about targeting particular legacy versions of Microsoft's browser, but there are occasions when it is a necessity.

If you only require a small amount of code it hardly seems worth creating a different style sheet.

There are a number of hacks that enable the coder to target versions of Internet Explorer within the main CSS file. Here are a few of them. All that is needed is to add the following to the root of the selector list:

IE6 and below

* html /* selectors here */{

/* properties and values */

} 

IE7 and below

*:first-child+html /* selectors here */{

/* properties and values */

} 

IE7 and up

html>body /* selectors here */{

/* properties and values */

} 

The last isn't really a hack as it just ultilizes the descendent selector that isn't understood by IE6.

I needed to hide a class called “spinning-wheel” from versions of IE8 and below. It used a lot of CSS3 and as it was only a minor usability feature so it was easier to hide it from older versions of IE rather backport the code.

One way of doing that was to create different style sheets with conditional comments and use display: none for the class. But that's overkill. Instead, I placed :root at the foot of the selector. In HTML the :root is always HTML (it's different in XML).

:root .spinning-wheel{

/* properties and values */

}

The CSS block is now totally ignored by IE8 and below.

I'm not quite sure whose idea the CSS3 :focus pseudo-class class was, but including it in the CSS spec was a minor act of ingenuity.

When you view CSS-only animation then :focus is usually at the centre of the code. For examples, take a look at this login and registration form, content navigator and page transition effect.

As :focus is so wonderful why don't we see more use of it outside of exhibition demos? The answer is two words, Internet Explorer. Versions 8 and below of Microsoft's browser do not support this useful CSS pseudo-class.

Due to this lack of support coders have preferred using JavaScript and its event-driven programming approach to user interaction; but as the demise of the legacy browsers continues and CSS continues to claim greater chunks of the presentation layer, then the appeal of :focus will grow in tandem.

JavaScript object detection

I'm currently working on a version of the well-known lightbox script. I wanted to fully utilise CSS3 animation but have a credible full back for the legacy browsers. As my version was dependent on :focus, the first step was to create a feature detection script so as to then provide a JavaScript event-driven fallback.

It seems though that feature detection for :focus is far from straight forward so I had to resort to a hack. A hack, by my definition, is to use code for a purpose other that what it was intended for. In my example below, I looked for CSS opacity support. Now I know that this property is not supported in IE versions 8 and below and :focus is not supported in versions 8 and below so, therefore, I tested for opacity support because it is easier to script for.

JavaScript purists might throw their legs in the air and have a bit of a fit to this approach, but Internet Explorer is an imperfect browser so solutions to dealing with it are also sometimes imperfect.

The code I created is below. To see it working click through to this jsfiddle page I have created.

var testFocus = (function () {

    var legacy = {
        test: function () {
            return document.getElementsByTagName('body')[0].style.opacity !== undefined;
        }
    };

    var nonLegacy = {
        test: function () {
            return document.getElementsByTagName('body')[0].style.opacity !== undefined;
        }
    };

    if (nonLegacy.test() !== undefined) {
        return nonLegacy;
    } else {
        return legacy;
    }

})();

// Run script like this:
testFocus.test();

I wrote back in January 2011 about the calc() function and stated it would be one to watch in the future:

I can guarantee that you will see a multitude of articles written about this function in the coming years. It will be particularly useful when a number of new CSS3 units such as viewport height and width come into play, and when the use of the attr() function is expanded upon.

Now that it has been incorporated into the Webkit engine the time of calc() has arrived, and one critical use will be the horizontal and vertical centring of page elements.

To briefly summarise calc(), it allows mathematical equations to be used in style sheets. So the basic mathematical operators are permitted and, importantly, so is the mixing of value types. As an example, the following is permissible:

calc(50% - 20px);

Its key benefit will be to responsive design as it allows for better control of fluid layouts.

As a demonstration I'll centre an image on a page. The dimensions of the image is 320 x 305.

The first part of the calculation reads as so:

img {
position : absolute;
 top: calc(100% - 50% );
 left: calc(100% - 50%);
}

That is 100% or the parent container's height and width minus 50% of this figure. It is not necessary to specify the height and width of the parent container in the HTML or CSS as the browser calculates this.

The image is now semi-centred but it does so on its top and left axis.

We need to take the image dimensions into consideration:

img {
position : absolute;
 top: calc(100% - 50% - 305px);
 left: calc(100% - 50% - 302px);
}

Almost there, but we need to evenly distribute the image dimensions across all axis' like so:

img {
position : absolute;
 top: calc(100% - 50% - (305px / 2));
 left: calc(100% - 50% - (320px / 2));
}

Perfect! Now make sure the browser prefixes are present:

img {
position : absolute;
 top: -moz-calc(100% - 50% - (305px / 2));
 left: -moz-calc(100% - 50% - (320px / 2));
 top: -webkit-calc(100% - 50% - (305px / 2));
 left: -webkit-calc(100% - 50% - (320px / 2));
 top: calc(100% - 50% - (305px / 2));
 left: calc(100% - 50% - (320px / 2));
}

Lets see the above code in action.

Centring elements on a page like this is only possible if you know the dimensions of the object you wish to centre.

At the time of writing, calc() works in Firefox and Internet Explorer versions 9 and above. It is now a part of Webkit but has yet to filter out to Chrome or Safari.

calc() will become even more user-friendly once the attr() function is expanded on. We could then use code that looks like this:

img {
position : absolute;
 top: -moz-calc(100% - 50% - (attr(height) / 2));
 left: -moz-calc(100% - 50% - (attr(width) / 2));
 top: -webkit-calc(100% - 50% - (attr(height) / 2));
 left: -webkit-calc(100% - 50% - (attr(width) / 2));
 top: calc(100% - 50% - (attr(height) / 2));
 left: calc(100% - 50% - (attr(width) / 2));
}

As I wrote above, the main beneficiaries of calc() will be the responsive design crew but it's just as useful on the desktop.

Now it's over to you, dear coder, to see what other uses calc() can bring to the CSS-using masses. Report back!

Sometimes the most obvious solution isn't the one that comes to you first.

wp_localize_script() is a wonderful little slice of Wordpress code that allows you to easily add PHP-created info into an accessible JavaScript object.

On an admin form I needed to trigger a JavaScript object on successful completion. My method was to create an option field which was updated on successful form completion, with the same option field being called by wp_localize_script() .

However, the JavaScript object created by wp_localize_script() was only ever updated after the form had been sumitted twice. Why? It took me a couple of hours to work it out but as the wp_localize_script() was called in the class constructor then any form action would always happen afterwards.

So now I'm thinking, What about using AJAX? But the best and most simple answer was to use cookies.

After form completion I set a cookie with a name of “_multi_cov” and the name of the form as its value:

setcookie("_multi_cov", $option_name);

The first part of the JavaScript checks to see if the "_multi_cov"cookie is set, if so run the object method:

if (document.cookie.indexOf("_multi_cov") !== -1) {
            OptionForm.multiFormName();
}

Now in the multiFormName() method it is necessary to filter out the name of the form from the cookie:

 var key, cookieMonster, mySplitResult, lastSplitResult;

 function removeArrayElement(element, index, array) {
     return (element !== "_multi_cov");
 }

 cookieMonster = document.cookie;
 mySplitResult = cookieMonster.split(";");

 for (x = 0, l = mySplitResult.length; x < l; x += 1) {

     if (mySplitResult[x].indexOf("_multi_cov") !== -1) {
         lastSplitResult = mySplitResult[x].split("=");
         key = lastSplitResult.filter(removeArrayElement).toString();
     } // end if
 } // end for

In the key variable is the name of the form.

I also deleted the cookie at the end of the JavaScript method:

document.cookie = "_multi_cov" + '=; expires=Thu, 01-Jan-70 00:00:01 GMT;';

The problem was that I was so in love with wp_localize_script() that it blinkered me to exploring a more appropriate alternative. In future I'll use wp_localize_script() for complex arrays and an alternative cookie solution for simple strings.

My personal favourite is phpDesigner 8. Although this is proprietary software, it has all the features needed for PHP and JavaScript devs. Included in the package is debugging, code beutifying and auto-completion. What I most like about it is that it comes complete in one install package and there is no need for modification.

phpDesigner is for Windows but it is easy to install on Linux or a Mac if you use a Windows emulator like Wine.

Eclipse has been around for several years and is a particular favourite with Java programmers. It is also possible to customise Eclipse for use with PHP and JavaScript.

I just set up a version up on my desktop but I had a lot of problems along the way. Like a typical open source project, the online documentation is poor. Here is how I installed it.

Firstly, download the latest version of Eclipse here. Make sure you download the JavaScript devs version.

Now you will need to install the Aptana plugin. Visit the Aptana website and follow the instructions.

Next, you'll need to add some more plugins.

Go to this article here and at the bottom download the attachment. Follow the instructions in the article about how to install the file.

My advice would be to deal with one plugin at a time rather than all together at once. Beware, some take a long time to download and install. Once you have installed all the addons go to “help” > “check for updates” in the Eclipse menu. Again, this may take some time so go make yourself a cup of tea.

After you have achieved all of the above you now have Eclipse modified for PHP and JavaScript development installed on your OS.

There is now a Serbo-Croatian version of this article which was translated by Anja Skrba

There are lots of different solutions to this problem posted on forums all over the web. But here is a very simple solution I came up with the other day.

Below was an array whose values were from a form. I wanted to make sure that the user only submitted unique data for every field.

array
  1 => 
    array
      'feedName' => string 'Name of feed here' (length=17)
      'input_gen' => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a383a22666565644e616d65223b733a323a226964223b733a393a22666565642d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32313a22546865206e616d65206f662074686520666565643a223b733a393a226d61786c656e677468223b733a333a22323030223b733a353a2276616c7565223b733a31373a224e616d65206f6620666565642068657265223b733a363a2273656c656374223b623a303b7d' (length=430)
  2 => 
    array
      'urlName' => string 'http://www.bbc.co.uk/news/world-middle-east-17323093' (length=52)
      'input_gen' => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a373a2275726c4e616d65223b733a323a226964223b733a383a2275726c2d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32303a225468652055524c206f662074686520666565643a223b733a393a226d61786c656e677468223b733a333a22333030223b733a353a2276616c7565223b733a34373a22687474703a2f2f7068702e6e65742f6d616e75616c2f656e2f66756e6374696f6e2e61727261792d706f702e706870223b733a363a2273656c656374223b623a303b7d' (length=484)
  3 => 
    array
      'urlName' => string 'http://www.bbc.co.uk/news/uk-politics-17323504' (length=46)
      'input_gen' => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a373a2275726c4e616d65223b733a323a226964223b733a383a2275726c2d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32343a225468652055524c206f662074686520666565642074776f3a223b733a393a226d61786c656e677468223b733a333a22333030223b733a353a2276616c7565223b733a38313a22687474703a2f2f737461636b6f766572666c6f772e636f6d2f7175657374696f6e732f373338393137362f636f6d706172652d6d756c746964696d656e73696f6e616c2d6172726179732d696e'... (length=560)
  4 => 
    array
      'feedName' => string 'Name of feed here too' (length=21)
      'input_gen' => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a383a22666565644e616d65223b733a323a226964223b733a393a22666565642d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32313a22546865206e616d65206f662074686520666565643a223b733a393a226d61786c656e677468223b733a333a22323030223b733a353a2276616c7565223b733a333a22594553223b733a363a2273656c656374223b623a303b7d' (length=400)
  5 => 
    array
      'urlName' => string 'http://www.bbc.co.uk/news/uk-england-tyne-17324795' (length=50)
      'input_gen' => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a373a2275726c4e616d65223b733a323a226964223b733a383a2275726c2d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32303a225468652055524c206f662074686520666565643a223b733a393a226d61786c656e677468223b733a333a22333030223b733a353a2276616c7565223b733a333a22594553223b733a363a2273656c656374223b623a303b7d' (length=394)
  6 => 
    array
      'urlName' => string 'http://www.bbc.co.uk/news/uk-17282903' (length=37)
      'input_gen' => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a373a2275726c4e616d65223b733a323a226964223b733a383a2275726c2d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32343a225468652055524c206f662074686520666565642074776f3a223b733a393a226d61786c656e677468223b733a333a22333030223b733a353a2276616c7565223b733a333a22594553223b733a363a2273656c656374223b623a303b7d' (length=402)

The first part of the code meant trimming down the multidimensional array to something more manageable like so (don't be distracted by the long strings of hex numbers - that's another story for another time):

$tmp = array();

foreach ($array as $row) {

    foreach ($row as $result) {

        $tmp[] = $result;

    } // end foreach
    
} // end foreach

So now the array looks like this:

array
  0 => string 'Name of feed here' (length=17)
  1 => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a383a22666565644e616d65223b733a323a226964223b733a393a22666565642d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32313a22546865206e616d65206f662074686520666565643a223b733a393a226d61786c656e677468223b733a333a22323030223b733a353a2276616c7565223b733a31373a224e616d65206f6620666565642068657265223b733a363a2273656c656374223b623a303b7d' (length=430)
  2 => string 'http://www.bbc.co.uk/news/world-middle-east-17323093' (length=52)
  3 => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a373a2275726c4e616d65223b733a323a226964223b733a383a2275726c2d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32303a225468652055524c206f662074686520666565643a223b733a393a226d61786c656e677468223b733a333a22333030223b733a353a2276616c7565223b733a34373a22687474703a2f2f7068702e6e65742f6d616e75616c2f656e2f66756e6374696f6e2e61727261792d706f702e706870223b733a363a2273656c656374223b623a303b7d' (length=484)
  4 => string 'http://www.bbc.co.uk/news/uk-politics-17323504' (length=46)
  5 => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a373a2275726c4e616d65223b733a323a226964223b733a383a2275726c2d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32343a225468652055524c206f662074686520666565642074776f3a223b733a393a226d61786c656e677468223b733a333a22333030223b733a353a2276616c7565223b733a38313a22687474703a2f2f737461636b6f766572666c6f772e636f6d2f7175657374696f6e732f373338393137362f636f6d706172652d6d756c746964696d656e73696f6e616c2d6172726179732d696e'... (length=560)
  6 => string 'Name of feed here too' (length=21)
  7 => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a383a22666565644e616d65223b733a323a226964223b733a393a22666565642d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32313a22546865206e616d65206f662074686520666565643a223b733a393a226d61786c656e677468223b733a333a22323030223b733a353a2276616c7565223b733a333a22594553223b733a363a2273656c656374223b623a303b7d' (length=400)
  8 => string 'http://www.bbc.co.uk/news/uk-england-tyne-17324795' (length=50)
  9 => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a373a2275726c4e616d65223b733a323a226964223b733a383a2275726c2d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32303a225468652055524c206f662074686520666565643a223b733a393a226d61786c656e677468223b733a333a22333030223b733a353a2276616c7565223b733a333a22594553223b733a363a2273656c656374223b623a303b7d' (length=394)
  10 => string 'http://www.bbc.co.uk/news/uk-17282903' (length=37)
  11 => string '613a383a7b733a343a2274797065223b733a343a2274657874223b733a343a226e616d65223b733a373a2275726c4e616d65223b733a323a226964223b733a383a2275726c2d6e616d65223b733a353a22636c617373223b623a303b733a343a2264657363223b733a32343a225468652055524c206f662074686520666565642074776f3a223b733a393a226d61786c656e677468223b733a333a22333030223b733a353a2276616c7565223b733a333a22594553223b733a363a2273656c656374223b623a303b7d' (length=402)

The magic comes in using array_unique(). If there are any values that are the same then this function will remove them. So, by comparing the number of elements in the array with and without using array_unique() we know there is repetition if there is a dissonance between the numbers. How easy is that!

The full function looks like so:

function duplicate_entries($array) {

    $tmp = array();

    foreach ($array as $row) {

        foreach ($row as $result) {

            $tmp[] = $result;

        } // end foreach

    } // end foreach

    if (count($tmp) !== count(array_unique($tmp))) {
        return FALSE;
    }

}

I'm just in the middle of creating a Wordpress plugin that downloads affiliate scripts from a remote server. The files can be in any of the three formats.

Previously I've used the XMLWriter and XMLWriter classes, the SimplePie library and some dabbling with SOAP, but this was my first introduction to dealing with CVS.

Below are some functions that I created for this project with explanations. In time I'll re-factor the code into class methods and with the appropriate inbuilt Wordpress functions.

The first step in downloading a remote source is to check whether it actually exists. It may be the case that the user has wrongly typed the URL or maybe the server is temporarily down.

This is the function I created for this purpose:

function remote_file_exists($url) {

    // IMPORTANT : Check to see if the file exists on the remote server
    // If the HTTP code is 200 then return true - everything else false

    $ch = curl_init($url);

    curl_setopt($ch, CURLOPT_NOBODY, true);
    curl_exec($ch);
    $retcode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
    curl_close($ch);

    if ($retcode === 200) {

        return true;

    } else {

        return false;

    }
}

It uses the Client URL (cURL) library which has been a component of PHP since version 4.0.2. CURLOPT_NOBODY used in the curl_setopt function excludes the body from download as we are only after the header details, while CURLINFO_HTTP_CODE in curl_getinfo returns the HTTP status code. A 200 HTTP status code means the file is okay to download.

PHP & ZIP

The first thing when accessing a ZIP file is to download it onto the server with the following code:

function grab_file($url, $new_file) {

    //get file
    $ch = curl_init();
    $fp = fopen("zip/$new_file", "w");

    $options = array(CURLOPT_URL => $url, CURLOPT_HEADER => 0, CURLOPT_FAILONERROR => 1, CURLOPT_AUTOREFERER => 1, CURLOPT_BINARYTRANSFER => 1, CURLOPT_RETURNTRANSFER => 1, CURLOPT_FOLLOWLOCATION => 1, CURLOPT_TIMEOUT => 5, CURLOPT_FILE => $fp);

    curl_setopt_array($ch, $options);
    $file = curl_exec($ch);
    curl_close($ch);
    fclose($fp);

    if (!$file) {
 
        return false;

    } else {

        return true;

    }
}

Again, back to cURL. This component of PHP can initially look deceptively simple but is a Swiss army knife that has a multitude of options. For a list of which take a look at this page.

CURLOPT_FILE is the new file the contents will be written to, CURLOPT_TIMEOUT is set to five seconds, CURLOPT_URL is the resource to be downloaded, CURLOPT_RETURNTRANSFER sets the return as a string while CURLOPT_BINARYTRANSFER permits binary data.

I had lot of trouble setting the right options in the function above but thankfully a thread on Stackoverflow pointed me in the right direction.

Now there is a copy of the ZIP file on your server it is time to unzip it to reveal the goodies underneath. This can be done with the PHP ZipArchive class:

function get_zip($data) {

    $zip = new ZipArchive();
    $filename = $data;

    if ($zip->open($filename, ZIPARCHIVE::CREATE || ZIPARCHIVE::OVERWRITE)) {

        $zip->extractTo('feeds');
        $zip->close();

        return true;

    } else {

        return false;

    }
}

The above code should be self-explanatory. However, I have been informed that some shared servers have the PHP ZIP option switched off. I'm not sure if this is still the case in 2012 but I decided to use instead a third-party class called PclZip which is released on a GPL and LGPL free software license.

function unzip($file) {

    $archive = new PclZip("zip/$file");

    $list = $archive->extract(PCLZIP_OPT_PATH, "feeds", PCLZIP_OPT_REMOVE_ALL_PATH);

    if (!$list[0]['filename']) {

        die("Error : " . $archive->errorInfo(true));

    } else {

        $path = "zip/$file";
        unlink($path);
        return $list[0]['filename'];

    }
}

There are a number of optional arguments that can be used when extracting the file for a full list of which read this page.

PHP & GZIP

The difference between the Zip and the Zlib module is that it is possible to save a resource to memory which is why I haven't used cURL here.

function get_gzip($url, $new_file, $ext) {
    
    $new_file = "feeds/$new_file.$ext";

    $remote = gzopen($url, "rb");
    $home = fopen($new_file, "w");

    while ($string = gzread($remote, 4096)) {
        fwrite($home, $string, strlen($string));
    }
    gzclose($remote);
    fclose($home);
    
    if($home !== null) {
        
        return $new_file;
        
    } else {
        
        return false;
        
    }
}

Thanks go to a user on Stackoveflow who pointed out a far more memory efficient way of grabbing massive files by downloading it in chunks.

RSS & PHP

There are several different RSS formats which are all XML but are radically different from each other. I would strongly suggest that you don't try to be a PHP superhero and attempt to write your own code for parsing RSS but instead use a third-party script.

The leading industry favourite for this job is SimplePie, originally created by Ryan Parman, Ryan McCue and Geoffrey Sneddon. Seriously, use SimplePie – the alternative may be premature ageing or madness.

Here is the most basic SimplePie example:

$feed = new SimplePie();

$feed->set_feed_url( url here );

$success = $feed->init();

After creating an instance of the class, call the feed and then run the init method. Easy!

CVS & PHP

Comma-separated values (CSV) files are wildly popular amongst a whole range of software applications but it's not a format that finds common use amongst web developers. Unlike XML, CVS is not a mark-up language but plain text which uses commas to separate the data. PHP does have its own CVS file function, but it's probably best if you use the PEAR class, File_CSV_DataSource. Created by Kazuyoshi Tlacaelel it is released under the permissive MIT license.

Here is File_CSV_DataSource used in a function that returns the entire CSV file in an array:

function parse_csv($file) {

    $csv = new File_CSV_DataSource;

    $feed = $file;

    if ($csv->load($feed)) {

        return $csv->getrawArray();

    } else {

        return false;

    } // end if ($csv->sadfsad
}

XML & PHP

For XML use the simplexml_load_file, a SimpleXML function.

In its most basic form we can create an array as so:

function parse_xml($file) {

    $xml = simplexml_load_file($file);

    return $xml;
}

If you are developer that has experience in the above areas then please feel free to leave a comment because in PHP there are many different ways to skin a cat.

IE 8 was launched with the proud boast of being CSS 2.1 and ECMAScript 3 compliant, which for Microsoft was quite an achievement in 2009. But this technology is looking particularly old hat now. IE9 saw a massive jump in JavaScript support and I would expect that there will be an equally big jump between IE10 and IE9. For ECMAScript 5 browser compatibility see kangax's pretty table here.

However IE8 is still one of the most popular browsers but being held back by only using ECMAScript 3 is no longer a necessity because of the underscore.js library. Here you will find a full range of EMCA5 array methods which cannot be used in the legacy browsers. There may well be other JavaScript libraries that offer the same goodies but that isn't what this post is concerned with. Underscore.js nicely compliments jQuery so let them both flow some code love into your next project.

indexOf

JavaScript array methods are split into three camps: mutator, accessor and iteration.

You'll probably be already familiar with many JavaScript mutator methods, which are pop, push, reverse, shift, sort, splice and unshift; but JavaScript 1.6 introduced a new but extremely useful accessor method, indexOf.

This is already widely used as a string object method, but has now been extended to the array object and offers the equivalent to the PHP in_array function.

When Jonathan Snook wrote Testing for a Value in a JavaScript Array in 2006 he fell back to using the in operator in the for loop to achieve the same result, but now the in operator can be thrown out and indexOf let loose:

var anArray = ['john','mary','george','freddy','jane']

console.log(anArray.indexOf("mary"));

// answer 1

forEach

The foreach loop is a feature of all the main programming languages and now, thanks to ECMAScript 5, we can use it in JavaScript. It is one of many new iteration methods incorporated into all modern browsers.

forEach is useful for looping through array values:

var anArray = ['john', 'mary', 'george', 'freddy', 'jane'];
var aString;

if (typeof anArray !== "sring") {

    console.log("I am an array object");

}

// result: I am an array object

anArray.forEach(function (result) {

    aString = result;

    if (typeof result === "string") {
        aString += " is a string";
    }

    console.log(aString);

});

// Result:
// john is a string
// mary is a string
// george is a string
// freddy is a string
// jane is a string

filter

This allows the coder to take out values from an array like so:

var anArray = ['john', 'mary', 'peter', 'susan', "", 'mark', 'sarah', undefined];

var newArray = anArray.filter(function (value) {

    return !(value === 'john' || value === 'peter' || value === 'mark' || value === "" || value === undefined);

});

console.log(newArray);

// return ["mary", "susan", "sarah"]

Above removes the boys from the list plus empty or undefined values. Admittedly, the repeated use of OR in the example above is a little clumsy but it demonstrates the purpose of filter clearly. This is an array iteration method that would buddy up well with regex.

every

This allows you to loop through an array to find all elements that meet the declared criteria and returns true or false. This new method is particularly useful for dealing with numbers like so:

var anArray = [10, 21, 56, 124, 450];

anArray.every(function (value) {

    return (value > 50);

});
// returns false

anArray.every(function (value) {

    return (value > 5);

});
// returns true

map

In the above methods .forEach() returns nothing (it iterates through array and spits out strings), .every() returns a boolean value, while .map() returns a new array of objects. Let me explain with an example:

var anArray = [2, 67, 789, 223454];

var newArray = anArray.map(function (result) {

    return Math.sqrt(result) + Math.PI - Math.LOG10E * Math.LN10;

});

console.log(newArray)

// result: [3.555806215962888, 10.326945425462243, 30.23073646396607, 474.85080559533054]

Above used an array of digits, did some funky maths manipulation and then returned the results into a new array.

Some end notes

Hopefully this short post has opened up a number of possibilities for array iteration to you other than using the for loop.

The code in this post uses anonymous functions as callbacks but they can also be named. Also, I referenced underscore.js in the introduction but you don't even have to go as far using this script. The Mozilla developers have provided compatibility code for all the array methods which extend the Array.Prototype. As an example, cut the paste the code below and place it at the beginning of your script if you want to start using the filter method in all browsers. For other code visit their global objects page.

if (!Array.prototype.filter) {
    Array.prototype.filter = function (fun /*, thisp */ ) {
        "use strict";

        if (this == null) throw new TypeError();

        var t = Object(this);
        var len = t.length >>> 0;
        if (typeof fun != "function") throw new TypeError();

        var res = [];
        var thisp = arguments[1];
        for (var i = 0; i < len; i++) {
            if (i in t) {
                var val = t[i]; // in case fun mutates this
                if (fun.call(thisp, val, i, t)) res.push(val);
            }
        }

        return res;
    };
}

For a further more fuller intellectual appraisement read Dmitry Soshnikov's article, JavaScript array “extras” in detail, on the Opera Developers website

Written in OOP code it takes a liberal approach to the Model–view–controller (MVC) architecture that underpins all modern PHP frameworks, and it has a very active and supportive community around it.

I put aside some time during the winter to learn CodeIgniter. Anybody who has prior experience of using OOP PHP should pick up most of the code within a couple of weeks, but I went further and created my own Content Management System which I called CodeSharp.

It was a fun but lengthy exercise as it stretched on further that I expected not least because of the JavaScript and AJAX I added to the administration section, but it pays dividends to recreate the wheel if you are trying to fully understand a new web technology.

Learning Resources

There are a number of tutorials that I used while learning this MVC framework, the most important of which were the Nettnuts+ online CodeIgniter from Scratch video series. Easy to follow and free to watch they cover most of the code basics. Just using this online series alone will provide a solid foundation to your learning process.

Nearly all available resources concerning CodeIgniter are for the older 1.7 version so the least confusing option for me was to pick up the framework using 1.7. Afterwards, I updated the code from 1.7 to the current 2.1. The backwards compatibility between the two major versions was excellent and it required very little code change. At the time of writing the next version will be 3.0 and it is currently in development stage.

The second must-use online resource is the CodeIgniter User Guide, available for both versions 1.7 and 2. I think this is the most easy to use and comprehensive online guide for any web technology that I have ever come across. Perhaps this is because a private company – Ellis Labs – is behind the entire initiative and so is better organised than other Open Source projects I have used in the past. As opposing examples, php.net and the jQuery documentation contains valuable information but they are non-user friendly and need to rewritten from the ground up.

I brought two books on the Packt imprint: CodeIgniter 1.7 by Jose Argudo Blanco & David Upton and CodeIgniter 1.7: Professional Development by Adam Griffiths. They were useful but the beef I have with Packt is that their books lack the depth that you would find in an O'Reilly or Apress publication. The feeling after finishing a Packt book is akin to eating a sandwich when you was hoping for a three-course meal.

Some CodeIgniter feedback

If anybody is looking for a PHP framework to learn then I would certainly recommend CodeIgniter. Below are elements of the script I liked, and some which I didn't.

Pagination class: Pagination is one of the more trickier server-side coding problems to solve. Using the CodeIgniter pagination class makes this challenge dead easy with typical code in the controller class looking like this:

$config['base_url'] = site_url("content/index/");

$config['total_rows'] = $this->content_model->find_content_rows($visible = true);

$config['per_page'] = 3;

$config['num_links'] = 2;

$config['uri_segment'] = 3;

$this->pagination->initialize($config);

Encryption class: If want to be 100% sure of securing your database in the event of a cracking, then using PHP Mcrypt is the only feasible solution. Hashing using SHA1 alone will not secure your data to the necessary unbreakable level. CodeIgniter has its own encryption class that uses PHP Mcrypt, hashing, base64 encoding and adds cipher noise to protect against Man-in-the-middle attacks.

The encryption class, while being secure, increases the size of the encoded messages 2.6 times the size of the original message – according to the documentation. I found that it was increasing the size of my data by as much as eight or nine times. If you use the encryption class keep an eye on this expansion because if the database field isn't big enough then the encrypted information becomes unusable.

The Database class: I used the Active Record Class (ARC) for all database queries as I prefer the placeholder method of inserting database info rather than escaping data. As I am already using PDO I'm not sure whether the ARC brought anything new to the table, and it will be slower than using straight inbuilt PHP objects.

Form helper: I used the form helper in my views but it never saved any time as I am already more than familiar with correct HTML form markup. Perhaps its useful if you are working on a collaborative project and need to make sure that the code is consistent throughout.

Image manipulation class. I wasn't happy with the quality of the image thumbnails it was producing so I used the Imagine script instead.

Typography class: The auto_typography() class is really useful for formatting non-HTML text taken from the database. On previous PHP builds I was using HTML Purifier for the same functionality.

Routes / _remap: This is a sane way of creating human and search engine friendly URLs without pissing around with regex in the .htaccess file. It took a bit of tinkering to work out the correct code, but it is the most sensible method for altering a URL.

Conclusion

I hope above has given you some enthusiasm to try out CodeIgniter if you haven't already. If you want to write safe, well-tested PHP code then this certainly is a framework that you will need to investigate. It is not the only PHP framework but it is one that is widely used in commercial development.

Footnote: PHP queen Lorna Jane Mitchell has just written a short piece on the net magazine site called PHP: land of a thousand frameworks and which is worth reading as a supplementary article to this post.

One year on and I've learned so much more about JavaScript. Having gone through various stages of anger and confusion, I have got to a state where I've grown quite fond of its peculiar idiosyncrasies and welcome the challenge JavaScript coding brings. Dare I say it, JavaScript is fun!

If you have just started learning JavaScript then you too will go through the stages of anger, acceptance and then, hopefully, enjoyment.

In the same spirit as my original item, I hope some points below will help you in your quest to learn this important development language.

JavaScript isn't PHP (or Ruby or any other common web development language)

The first point of confusion many new users face is: Where are all the functions? If you have used a server-side language like PHP then you would be familiar with clicking through the php.net trying to find the right inbuilt function as solution for your problem. There are thousands of inbuilt functions that come with PHP. JavaScript only has a fraction of these functions (actually they are methods not functions in JS) and it even has some vital functions missing that are regularly used in PHP like trim() (now in modern browsers – see ECMA5) or a simple way of formatting dates and times such as used in PHP date().

What initially seems like a handicap then hits you as liberation because you realise that you don't have to worry about thousands of already existing functions, with many – like in PHP – not subservient to a standard naming convention. In JavaScript, when necessary, you create your own functions and methods to be reused again in later jobs.

There is a well established Open Source project called phpjs.org. On this site contributors have recreated dozens if not hundreds of PHP functions in JavaScript. I've no doubt that the intention behind this project is well-meaning but aiming to ape PHP in JavaScript is not the way forward.

JavaScript has its own unique approach different to common web development languages and that is prototypal inheritance. To understand this and use it is to truly harness the power of this client-side script (Now server-side also too! See node.js for further details).

Take for instance the trim function on php.js:

function trim(str, charlist) {
    // Strips whitespace from the beginning and end of a string  
    i = 0;
    str += '';

    if (!charlist) { // default list
        whitespace = " nrtfx0bxa0u2000u2001u2002u2003u2004u2005u2006u2007u2008u2009u200au200bu2028u2029u3000";
    } else {
        // preg_quote custom list
        charlist += '';
        whitespace = charlist.replace(/([[]().?/*{}+$^:])/g, '$1');
    }

    l = str.length;
    for (i = 0; i < l; i++) {
        if (whitespace.indexOf(str.charAt(i)) === -1) {
            str = str.substring(i);
            break;
        }
    }
    l = str.length;
    for (i = l - 1; i >= 0; i--) {
        if (whitespace.indexOf(str.charAt(i)) === -1) {
            str = str.substring(0, i + 1);
            break;
        }
    }

    return whitespace.indexOf(str.charAt(0)) === -1 ? str : '';
}

I count two loops in there and some regex plus lots of use of the indexOf and charAt methods.

Now take a look at a version as created by Douglas Crockford using the prototype object. This means that in browsers where there is no trim string method (IE8 and below) then the regex will be used.

if (!String.prototype.trim) {
    String.prototype.trim = function () {
        return this.replace(/^s*(S*(?:s+S+)*)s*$/, "$1");
    };
}

This seems to me a much more manageable solution.

You would use the above code like so:

var aString = “ This is a sentence that needs white space from the beginning and end to be removed ”; 
var newString = aString.trim();

Object Orientated JavaScript and Design Patterns

If you are serious about learning JavaScript then make a point of using Object Orientated Programming (OOP) as early on as you can. John Ressig has a whole chapter donated to OOP techniques in his book Pro JavaScript Techniques but I found Ross Harmes and Dustin Diaz's book Pro JavaScript Patterns particularly invaluable in dramatically improving the quality of my code.

It's a bit confusing talking about Object Orientated Programming with JavaScript as nearly everything in the language is an object, but I use OOP and design patterns interchangeably in this section as a means of a call to bring order to the code.

Before using OOP my output was becoming a mess with all the code written procedurally and which became impossible to maintain beyond 500 lines. If any poor bugger had hoped to collaborate with me on a project she would have run away screaming!

Using some of the design patterns in Harmes and Diaz's book made my output so much more manageable. If you don't come from a programming background then you would not of heard of the singleton, facade or module patterns (amongst many others). Nevertheless, these are well-established programming approaches that are applied to lots of different languages, JavaScript included, and understanding them will result in more professionally written code.

There are also other advantages to OOP like the ability to use a global namespace. This means that clashes between other JavaScript libraries you might be using or somebody else's code is kept to a minimum. Also, using OOP properly will mean a far more efficient code reuse and ultimately a much shorter page of script.

Much that we take for granted in other languages such as private and public attributes and methods, constants, passing variables by reference and even classes themselves are not used in JavaScript. But there are various ways to emulate them. “My god,” I hear you cry, “This is nothing but a hack script!”. Well, that's one of looking at the Big J, but if you are programmer who loves a challenge - and what programmer worth his / her salt doesn't? - then you will enjoy climbing over the hurdles JavaScript brings.

One last point about OOP design patterns in JavaScript. In my previous Think Vitamin article I stated that I used a dollar sign in front of variables so as to make scanning a document easier. Once I started using OOP and in particular the module pattern which uses private and public attributes and methods, the addition of the dollar sign for extra readability became unnecessary.

Use semantic names

Try to avoid abbreviations or, heaven forbid, just a single letter for variables and attributes.

I use single letters in loops when that letter represents a digit:

for (var i = 0; i < form.elements.length; i += 1) {

    // loop through the values of the form elements
    alert(form.elements[i].values);

} // end for loop

But other than for loops I use names for variables / attributes that demonstrate their purpose.

As an example, look at the names for the attributes I created in an object called CS.GlobalSet:

nameForm: null,
sloganForm: null,
emailForm: null,
metaDescription: null,
metaKeywords: null

These were the name of the form fields from where they took their values.

CS.GlobalSet.nameForm = this.nameForm.value.trim();
CS.GlobalSet.sloganForm = this.sloganForm.value.trim();
CS.GlobalSet.emailForm = this.emailForm.value.trim();
CS.GlobalSet.metaDescription = this.metaDescription;
CS.GlobalSet.metaKeywords = this.metaKeywords;

This makes the code far easier for others to understand then if I had given them initials like nF, sF or eF.

(The full object referenced above can be found here).

There are lots of JavaScript coding standards that should be observed. Read from beginning to end the collaborative document hosted on GitHub called Principles of Writing Consistent, Idiomatic JavaScript. No matter your level of JavaScript skills, you will find some new ideas in this extensive article.

Keep you code neat and tidy

In my 2011 article “Tips on Learning JavaScript” I endorsed using JSBeautifier for automatic spacing and advocated liberally using comments so as to leave a clear explanation of the purpose of the code for when you return to utilize it at a later date. I still state that the correct use of space and full commenting are not optional, but essential.

If you want to see JavaScript as code poetry then look at some work produced by Juriy Zaytsev - aka kangax – in his fabric.js project. Note how he spaces out his code and how and when he leaves comments. This clearly is a project intended for collaboration between two or more developers and with over 12,000 lines of code it needs to be super-organised so as to keep it manageable.

Can you use JavaScript and never use a library?

Well that depends on the complexity of the code you are writing and the experience of the coder. But it's really tough to use 100% of your own DOM JavaScript and never, ever use a library.

As an example, I just recently I created a form with two different submit buttons. Each button produced two totally different outcomes: submit and delete. This wasn't a problem for the server-side script to handle, but JavaScript was a bloody nuisance. I found one event property called explicitOriginalTarget that was perfect for the purpose, but it is only used in Firefox! Similar alternatives in Webkit such as originalTarget were not cutting the mustard.

Eventually, I fell back to using jQuery like so:

$(document.forms['adminEditContent'].elements['submit']).click(function (event) {

                    // code here for form submission
                    event.preventDefault();
                });

$(document.forms['adminEditContent'].elements['detete']).click(function (event) {

                    // code here for deletion
                    event.preventDefault();
                });

Clearly, there is JavaScript solution because jQuery are using it in their script, but I didn't have the experience to work it out myself so I used a library. There's nothing wrong with relying on an established Open Source project when needs must. Just make a note of trying to crack the problem yourself at a later date.

I've also had a lot of problems in creating smooth animation in Internet Explorer so I use a library like animator.js or one of the big beasts such as jQuery or Dojo if I need to use JS animation.

And if you are working on a commercial project such as creating a Drupal or Wordpress theme, then using jQuery is a logical solution as it will save you considerable time. This is an important consideration if you are a professional because time is money.

Conclusion

So after two years of learning JavaScript can I now state that I have reached an intermediate skill level? Yes, I think so, but thoroughly learning any programming language is an exhaustive process that takes years; and although I have learned a hell of a lot there's still so much more to soak up yet.

I say, bring it on! I'm loving it.

There seems to be a craze for recreating cartoon characters like Homer Simpson in HTML and CSS only, but I don't see any point in creating work with no practical value. Of far more interest to me are those that are pushing CSS to its limit but whose work can be replicated and expanded upon by other coders.

Pseudo Elements, Box Shadows and some CSS3 animation

Pseudo elements have a lot of practical, albeit minor uses. I've use them to add typographically correct smart quotes around blockquotes such as below (note the added space in the value for the before content property):

blockquote:before {
	content :"201C" ' ';
	font-size : 2em;
	vertical-align : middle;
	font-style : italic;
}

 blockquote:after {
	content : "201D";
	font-size : 2em;
	vertical-align : middle;
	font-style : italic;
}

I use unicode characters rather than HTML entities because the latter has a habit of producing strange mistakes when cutting and pasting CSS.

I have also used pseudo elements in the past to add an extra oomph to menu links on the hover state like so:

#main-menu ul li a:hover:after {
content: " GO! ->";
color : #ffffff;
}

Other coders are taking it further.

I really like Chris Coyier's use of pseudo elements to create full browser width bars, while Nicolas Gallagher combines CSS3 transitions with ::before to create impressive shiny buttons (hover over the them).

The W3C working draft document CSS3 Generated and Replaced Content Module dated May 2003 and allows multiple pseudo elements per element. When browsers implement this standard expect another wave of ultra-complex CSS experimentation on par or more inventive then these pure CSS GUI icons.

Unfortunately, CSS 2.1 pseudo elements :before and :after do not work in Internet Explorer versions 6 and 7. Thankfully though there is a polyfil in the form of Dean Edwards ie7-js script. This script covers a myriad of advanced CSS not used in IE versions 6-8. It is the only script that gives support to pseudo elements. Be careful when using it though as it is a big file and it will create a Flash of Unstyled Content as the JavaScript is loaded.

Box shadows have been implemented for a couple of years now in Firefox and Webkit-based browsers. It didn't take long for coders to realise that adding layers of values, with pseudo elements and CSS3 transforms can create amazingly attractive and complex shadows.

A popular demo was created by Nicolas Gallagher.

Likewise the Viget crew have had a lot of fun creating their 39 Box Shadows, No Good Reason page (only works in Webkit-based browsers).

Like Nicolas Gallagher they only achieved their complex shadow effects by mixing box shadows with other important CSS3. In their case they liberally used gradients, pseudo classes and animation.

CSS3 transitions and transforms are a nice added bonus to the coders arsenal. When they first appeared my initial reaction was, 'Well that is what JavaScript is there for'; but they do add another welcome means of adding motion to elements on a page.

In its favour the syntax is easy to implement. There really is very little to using CSS3 animation. Secondly, it can animate elements on a page and animate them in particular ways that would be difficult even with a JavaScript library like jQuery.

I particularly like using animation on forms to give an extra usability feature. On the :focus selector I add a scale value like so:

input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus, textarea:focus {
	-moz-transform : scale(1.05);
	-webkit-transform : scale(1.05);
	-o-transform : scale(1.05);
	transform : scale(1.05);
}

Through experience I wouldn't recommend using CSS3 animation on page load and only use it on mouse and keyboard events. Presumably CSS3 transitions and transforms are quite resource hungry as whenever I have added them to a style sheet to fire on page load it creates a stuttering, non-smooth movement on the page.

Unfortunately, due to lack of support in the legacy browsers, you would have to be cautious in using a lot of the above in commercial jobs; but they clearly signpost a future direction for CSS users in which far, far more complex code will become standard.

CSS branching

Due to the frustrations of using a non-programming language like CSS, JavaScript and Ruby developers have created their own forks called LESS and Sass respectively.

Here you can create CSS but do so too with variables, mixins, namespaces and nested rules amongst much else. Both LESS and Sass have their own bands of loyal users who would only reluctantly return to straight CSS as used by the vast majority of front-end developers.

Both of these projects have created a valuable contribution to the industry because they present working alternatives to CSS that are radically different to the current W3C recommendations and drafts. However, should we be branching out into mutually exclusive CSS formats? To me this seems like walking into an uninspiring dead-end rather a viable and sustainable future.

Boilerplates & resets

A number of years ago Eric Mayer produced his famous CSS reset. It allowed web developers to approach a project knowing that before they have even written a single line of code, many browser inconstancies and quirks had been levelled.

Today, YUI reset and David Hellsing's Tripoli Reset have been become, if not obsolete, then certainly dated in the face of software and HTML and CSS changes.

As a modern CSS reset, Nicolas Gallagher (him again!) and Jonathan Neal created normalize.css. I'm particularly impressed with their detailed comments that describe the purpose of every line of code and I like the attention to detail in the form section.

Beyond just a CSS reset is HTML5 Boilerplate, the creation of Irish Paul. There's a ton of code in this project to learn from. I really like the work they have done in the .htaccess file. Proper Apache configuration is vital for a fast, non-buggy website, and they have covered a wide territory including GZIP, expires headers, proper MIME types and UTF-8 encoding.

Building upon this project is Andy Clarke's 320 and Up Boilerplate that takes a “mobile first” approach to web design. Again, this is a really interesting project to study and use.

I can't begin to tell you how much I have learned by examining the code in these boilerplates and resets. But, as a word of caution, the worse thing you can do is just cut and paste code without a clear understanding of what it does. Question everything. Just because a face like Irish Paul or Eric Mayer deems a particular line of CSS a necessity, doesn't mean that it is or is suitable for your web builds.

New layout modules

Last year saw a buzz of activity around new CSS layout modules. Originally back in the 90s tables were the preferred method of page layout. During the last decade this approach was chased out of existence by standards evangelists such as Jeffrey Zeldman who insisted on the separation between presentation and content, and in its place came the CSS solution of floats. However, CSS floats were never intended as means of laying out an entire page but of positioning objects like images within a body of text. Many involved in the web design industry have longed for a different approach to layout.

By my counting there are now five different W3C sponsored alternatives to floats! They are Exclusions and Shapes, Regions, Template Layout, Grid Layout and Flexible Box Layout. For a thorough explanation of all of them read net magazine's article The Future of CSS Layouts.

I find it difficult to get exciting about these new layout options. Using floats can be tricky (hello clearfix), but ultimately I've never had any serious problems creating complex layouts. Also, none of the above will be backwards compatible. I'm not against a fundamentally different approach to CSS page layout, but I would baulk at having different layout systems for different browsers in the same web build. It's also worth noting that Flexibox was first introduced in 2009 and it is now going through a radical rethink because the original draft proved lacking. I wonder how many of the other four will also be subject to major revision in the coming years?

Conclusion

CSS: use and abuse it. Time spend trying out new techniques is important to personal development. Make sure that you set aside some quality time to play around with CSS3 and see what you can produce. Look at the code linked to above and learn from it. Use it as a base for further experimentation. Avante!

Search Engine Optimisation, Andy Walpole, Suburban Glory Web Design

How to Maximise your Branding, Ray Calder, Acumen Design

Simple tips to increase your £££ Flow and reduce Tax bill in 2012, Ron Mansfield, TaxAssist Accountants

Date: Wednesday, 1 February, 2012

Time: 9.30am - 12.30pm

Address: Seminar Room, Ground Floor, Roycroft House , 15 Linton Road, Barking, IG11 8HE

No Cost to Attend but please download and fill in the form below and send to the B&D Chamber of Commerce: http://www.bdchamber.co.uk/i/events/1325604512.pptx

One such script is Deck JS. Created by Caleb Troughton, it is a jQuery plugin and has recently recently been exposed to wider attention after being promoted on the Smashing Magazine Twitter feed.

I recently spent a few days using Deck JS in order to create a presentation for a forthcoming Foundation Internet Marketing course at Redbridge College, and I would recommend this nifty little script to others.

Using it is straightforward and requires only the bare minimum knowledge of jQuery.

Firstly, download the files and link to them from the head of the document.

Then, create you HTML as so:

<div class="slide" id="frame-one">
  <h1>Frame One</h1>
  <p>Sed sem ligula, rhoncus et pharetra vel, vulputate interdum lacus. Ut turpis magna, dictum vel porttitor eu, mattis ut ipsum. Vestibulum varius lorem a diam varius pretium. Phasellus condimentum, turpis id pretium accumsan, augue felis adipiscing orci, vitae ultricies massa justo vitae ipsum. Maecenas consectetur, ligula sit amet auctor dictum, orci odio elementum nulla, in rutrum lectus lectus vel ipsum. </p>
</div>
<div class="slide" id="frame-two">
  <h1>Frame Two</h1>
  <p>Integer massa massa, tincidunt interdum convallis vitae, sollicitudin id nisi. Aenean dictum hendrerit metus, eu tempus eros placerat eleifend. Vivamus mi felis, ultrices at dapibus nec, dapibus eget odio. </p>
</div>
<div class="slide" id="frame-three">
  <h1>Frame Three</h1>
  <p> Sed nulla libero, scelerisque nec laoreet a, pellentesque sed diam. Donec venenatis, arcu ac tempus cursus, mi felis malesuada justo, vel consectetur eros diam vel diam. Proin non risus ut elit tristique gravida eget sed mauris. Praesent neque dolor, rhoncus eu lobortis facilisis, consequat et lacus. Praesent scelerisque viverra arcu ut aliquam. Ut luctus sapien vehicula nibh tristique hendrerit. </p>
</div>

And now in the head add the following jQuery:

/* <![CDATA[ */
$(document).ready(function() {

$.deck('.slide');

$.deck([
 '#frame-one',
 '#frame-two',
 '#frame-three'
]);

}); // End document ready
/*  */

]]>

And that is it. Easy. Note that the order of presentation is decided by jQuery not the divs in the HTML.

In the best tradition of Blue Peter here is one I made earlier: http://www.linkbuilding.suburban-glory.com/

And here is another one: http://www.keywords.suburban-glory.com/

The biggest upside of creating a presentation with Deck JS is that you also have the full arsenal of HTML, CSS and JavaScript at your disposal and all you need to display it is a browser.

Universally loved by software developers, the Twitter API has set the standard for other companies when allowing open access to their database.

Recently I had reason to use the Twitter API on a personal project (a new personal portfolio actually). Since the summer of 2010 Twitter has made access to their API mandatory only if using QAuth authentication – or so I thought.

The problem with using QAuth for Twitter is one of finding the right script because you'll stumble upon that old chestnut - a PEAR module without any documentation.

After faffing around for a couple of hours I thought, “Why do I need QAuth for if all I want to do is access my personal Twitter stream and not update it on a third-party site?”

Then a more simple method hit me and all it involved was building up a query string from GET statuses/user_timeline like so: http://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=andywalpole&count=20&exclude_replies=true

If you read the Twitter resource linked to above then you can add many different queries to the string including specifying whether you would like the returned resource to be JSON or XML; the number of tweets, or whether you would like to exclude replies.

From there it is just a case of using PHP's trusted Client URL Library (cURL) like so:

$ch = curl_init();

$file = fopen("textfile.json", "w+");

curl_setopt($ch, CURLOPT_URL,
    'http://api.twitter.com/1/statuses/user_timeline.json?include_entities=true&include_rts=true&screen_name=andywalpole&count=20&exclude_replies=true');

curl_setopt($ch, CURLOPT_FILE, $file);

curl_setopt($ch, CURLOPT_HEADER, 0);

curl_exec($ch);
curl_close($ch);

fclose($file);

Now that you have your Twitter stream in a JSON file it is just a question of accessing and then looping through the content:

$twitter = file_get_contents('textfile.json');

$twitter = json_decode($twitter);

$rows = "";

foreach ($twitter as $keys => $rows) {
    
    // looped data here

    }

And that is it :)

Tuesday September 20th, 6.30pm – 8.30pm

Are you starting a business or already running a business? Are you frustrated that your competitors outrank you on Google? If you are unhappy with your current online marketing or just want to find out more come along to our workshop. It has been designed for small to medium-sized businesses and is delivered by two industry experts. The aim of this two hour workshop is to teach you both the theory and practice of some key aspects of online marketing.

A one-off workshop especially for business owners in east London including Romford, Ilford, Barking and Dagenham who are interesting in learning about some of the basic concepts behind internet marketing and SEO.

For more information please visit this site.

This lack of native support in IE has lead to a wide array of workarounds which now come under the banner of polyfills. These usually consist of a JavaScript solution that replaces the lack of advanced HTML support in legacy browsers.

A comprehensive polyfill list curated by Paul Irish can be found on GitHub.

But where possible it is always best to create your own solution rather than rely on somebody else's script.

Placeholders are a new HTML5 attribute which allow text to be placed in a form input field so as to guide the user to what they should be entering. They are a great asset to usability in form design.

Form placeholders are integrated in the latest version of Safari, Firefox, Opera and Chrome but are absent from versions of Internet Explorer 9 and below.

Using a little DOM JavaScript and the for loop it is possible to emulate their behaviour in IE.

This tutorial will run through the following steps:

1. Use Modernizr object detection to check whether the browser is capable of using HTML5 placeholders.

2. If not, loop through form elements replacing the blank input value with that of the placeholder attribute value.

3. Make sure placeholder text in Internet Explorer is a light colour.

4. Make sure placeholder text disappears when user enters value into the input form.

5. Text entered into the input field must have high contrast with the background.

Firstly, if you have not come across Modernizr before then let me introduce you to this essential third party script.

This little helper is an intelligent way of detecting whether various components of HTML5 and CSS3 are present in the user's browser. In this tutorial we will use its object sniffing method like so:

if (!Modernizr.input.placeholder) {

// code here

}

If placeholder is not an active feature of this browser then run some code. First we'll take all the elements for the form with an id of “contact-form” and declare them in a variable called $form.

if (!Modernizr.input.placeholder) {

    var $form;

    $form = document.getElementById('contact-form').elements;

}

Now we'll use a common method to loop through all the form elements and which allows us to give the placeholder value to the form input value. If you are unsure about this method then read Chris Pietschamnn's tutorial.

if (!Modernizr.input.placeholder) {

    var $form, $i;

    $form = document.getElementById('contact-form').elements;

    $i = 0;

    //set placeholder values for internet explorer
    for ($len = $form.length; $i < $len; $i += 1) {

        if ($form[$i].getAttribute(“placeholder”) != undefined) {

            // five placeholder value to form value
            $form[$i].value = $form[$i].getAttribute(“placeholder”);

        } // if not undefined
    } // end for loop

}

And that is it. If you have used the HTML5 placeholder attribute in your form, the text will now be visible in Internet Explorer.

However, we also need to make sure that the placeholder text itself is a light colour. If you need to change the placeholder text in Firefox or Chrome then you can use the follow CSS:

::-webkit-input-placeholder {
   color: #cccccc;
}

:-moz-placeholder {
    color: #cccccc;
}

In JavaScript we'll need to do it by looping through the form input values. Notice the !== submit. We are not interesting in styling the submit input field here, just the input fields such as text and email.

$inputField = document.forms.contactUs.getElementsByTagName('input');

$x = 0;

// loop through input areas to make sure placeholder disappears on focus
for ($len = $inputField.length; $x < $len; $x += 1) {

    if ($inputField[$x].type !== "submit") {

        $inputField[$x].style.color = "#999";


    }

Lastly, we need to make sure that the placeholder text disappears when the user starts to enter their own text and the colour changes to something more darker and readable:

   $inputField = document.forms.contactUs.getElementsByTagName('input');

$x = 0;

// loop through input areas to make sure placeholder disappears on focus
for ($len = $inputField.length; $x < $len; $x += 1) {

    if ($inputField[$x].type !== "submit") {

        $inputField[$x].style.color = "#999";

        // place holder text disappears on focus
        $inputField[$x].onfocus = function () {

            this.value = "";
            this.style.color = "#000";

        };

    }

And altogether the code looks like this:

if (!Modernizr.input.placeholder) {

    // always declare javascript variables at the top of the script
    var $elements, $i, $x, $len, $formInput, $inputField, $form;

    $form = document.getElementById('contact-us').elements;

    $i = 0;

    //set placeholder values for internet explorer
    for ($len = $form.length; $i < $len; $i += 1) {

        if ($form[$i].getAttribute("placeholder") != undefined) {

            $form[$i].value = $form[$i].getAttribute("placeholder");

        } // if not undefined
    } // end for loop

    $inputField = document.forms.contactUs.getElementsByTagName('input');

    $x = 0;

    // loop through input areas to make sure placeholder disappears on focus
    for ($len = $inputField.length; $x < $len; $x += 1) {

        // Don't change the submit input!
        if ($inputField[$x].type !== "submit") {

            // Give placeholder text a grey colour
            $inputField[$x].style.color = "#999";

            //Delete the placeholder text and change CSS text colour to black on user focus
            $inputField[$x].onfocus = function () {

                this.value = "";
                this.style.color = "#000";

            };

        }

    } // if not undefined
} // end modernizr

You can see a live example of this code on a website I built here - will writer - and you grab the code on Gist.

This code has been tested on IE versions 7, 8 and 9.

With the last version of HTML being released back in 1997 and XHMTL never really fulling its initial promises, a new version is needed that reflects the exhilarating pace of technological change and in particular meets the needs of the new platforms such as mobile and tablets.

And some of the biggest web opinion formers and industrial heavyweights are HTML5 evangelists.

When in 2010 Steve Jobs published a demolition job of Adobe's animation software in an article entitled “Thoughts on Flash”, it brought a lot of focus to the maturing standard:

Rather than use Flash, Apple has adopted HTML5, CSS and JavaScript – all open standards. Apple’s mobile devices all ship with high performance, low power implementations of these open standards. HTML5, the new web standard that has been adopted by Apple, Google and many others, lets web developers create advanced graphics, typography, animations and transitions without relying on third party browser plug-ins (like Flash). HTML5 is completely open and controlled by a standards committee, of which Apple is a member.

When the boss of Apple Inc. makes announcements like above then every developer should sit up and listen.

The other great commercial tech player, Microsoft, has also thrown their immense weight behind HTML5 with Vice President Julie Larson-Green recently announcing their intention to focus on the new format for their Windows 8 developer platform.

When I wrote an introduction to HTML5 Canvas at the beginning of the year I noted how limited the new technology is with a big block to uptake being the prohibitive low-end, verbose coding, especially when compared to ActionScript.

I finished the article with this paragraph:

Hopefully, somebody will create a code library for canvas animation. Creating objects is cumbersome but straight forward; however, in order for the popularity of this particular HTML5 API to spread there needs to be easy access to animation features as you would find in jQuery or Mootools.

In this article I will examine a number of HTML5 canvas libraries. This is mainly a usability review and I won't examine the code too closely, but I also wanted to create some solid code examples with supporting comments as an aid to other developers interested in using these projects.

The projects reviewed are jCanvaScript, CAKE, fabric.js and doodle.js

If you do want to try these scripts out then you really need knowledge of vanilla JavaScript. If your only experience is through a package like jQuery or Mootools then you'll struggle when attempting to use any of these tools.

I should firstly state that they are all competent libraries but some are more ready for wider adoption than others, in particular a couple have a lack of documentation and working demos.

They are all open source and are issued under liberal licenses that allow integration into commercial projects. Also note that all the libraries featured are being regularly updated by their respective developers.

jCanvaScript

Alexander Savin is the prime mover behind this library released under the MIT and GPL2 licenses. The jCanvaScript beta was launched at the beginning of 2011 and several versions have since been released.

The features of this library are the main planks of HTML5 canvas: the ability to create shapes, animation, images and text and to animate them and also allowing user interactivity via the mouse or keyboard.

To use jCanvaScript you first need to create the jc object and from their you can access its methods. The code below creates a white circle 100px wide positioned 150px from the left and 250px from the top of the canvas:

jc.start("canvas_1");

jc.circle({
    x: 150,
    y: 250,
    radius: 100,
    color: '#ffffff',
    fill: 1
});

The above method uses literal notation but it's also possible to use shorthand like so:

jc.circle(150.250.100,'#ffffff',true);

I prefer to use the more robust literal notation where ever possible, that way the objects are labelled and are also self documenting which serves a similar purpose to code comments.

The documentation for jCanvaScript is excellent with clear examples of both functions and objects given. I would state that it would take a day to master the entire library.

An example of animation is as below:

jc.start('canvas_1', 160);
jc.circle({
    x: 90,
    y: 500,
    radius: 150,
    color: 'rgb(255,241,12)',
    fill: 1
}).animate({
    x: 500,
    y: 90
}, 100, {
    type: 'in',
    fn: 'linear'
}).fadeOut(100, {
    type: 'in',
    fn: 'linear'
});

The second parameter in jc.start is frames per second. It's possible to join the methods together – in the above example animation and fadeOut are added to circle object. Anybody familiar with a common JavaScript library will be familiar with this syntax. The use of object notation for animation reminds me of Dojo.

I was using setTimeout to repeat the animation but I found it confusing to compare the FPS of the library code with the milliseconds of setTimeout, but that's says more about my skills than the library.

Click on here to see a jCanvaScript demo.

Compressed, the script weighs 50kB.

Fabric.js

Released under a MIT license fabric.js is the work of former Prototype developer Juriy Zaytsev - aka kangax - that grew from a commercial project he was engaged in.

The first commit on GitHub dates from the summer of 2010 and since then the principle coder has been regularly expanding and revising the script.

Fabric.js is a far more feature rich offering than jCanvaScript. Included in the hefty download file is an SVG-to-canvas parser, unit testing and even limited IE support through Explorer Canvas.

Below is how to use fabric.js to create a red triangle 200px by 200px in size:

// create the canvas object
$canvas = new fabric.Canvas('canvas_1');

// create a triangle
$triangle = new fabric.Triangle({
    top: 450,
    left: 500,
    width: 200,
    height: 200,
    fill: 'rgb(204,0,107)'
});

// add it to the canvas
$canvas.add($triangle);

The quality of the code is fantastic – it's more like looking at art; but the entry point for interested users is too high.

The documentation is minimal or non-existent with the technical manual being impenetrable for those not already familiar with the code. For instance, could you work out how to create a gradient from the information on this page?. No, neither could I and as there isn't a live example to study this makes matters especially problematic. An API reference is important – but there needs to more than just that.

The are some live demos but too few of them – there needs to be examples of every type of class / shape. Of those that exist none feature crucial code commenting as this animation page highlights.

It looks promising as feature-rich HTML5 canvas Swiss army knife, but there's too many unnecessary barriers that will prevent wider adoption.

Click on here to see a fabric.js demo

CAKE

Written principally by Google employee Ilmari Heikkinen CAKE is, in a description from the homepage, “a JavaScript scene graph library for the HTML5 canvas tag. You could think of it as SVG sans the XML and not be too far off.”

Ilmari is a regularly contributor to HTML5 Rocks and has a host of HTML5 related projects under his belt.

Unlike all the other libraries reviewed in this post, CAKE actually has a number of comprehensive online tutorials. Written by Matthew Casperson they cover both a basic introduction and more complex animation.

The code below is how to create a yellow circle 150px wide with a 20px border stroke.

var $canvas, $circle;

$canvas = new Canvas(document.getElementById("code"), 600, 400);

$circle = new Circle(150, {
    x: 200,
    y: 200,
    fill: 'rgb(0,147,211)',
    stroke: 'rgb(255,241,12)',
    strokeWidth: 20,
    endAngle: Math.PI * 2
});

$canvas.append($circle);

Notice that with CAKE you create the HTML element first – declared above to be the child of “code” and 600 x 400 – rather than reference an already existing one.

Also note the value for endAngle – ouch. A library should avoid the use of radians for creating basic shapes.

Beyond the Casperson tutorials there a number of working demos: a simple introduction and a serious of full-on examples.

There is also some limited documentation on the home page.

The whole point of creating a HTML Canvas library is to create an accessible entry point for developers. CAKE fails to do that. While there are a number of clear tutorials, CAKE has an over-reliance on geometry for even basic functionality. While this can't be avoided altogether (see the conclusion) it should be minimalised.

It's just far too low level for a library – I laughed at the complexity of some of the coding examples.

Finn Ilmari Heikkinen is clearly a coding genius but he's left most of us behind with CAKE.

Click here to see a demo of CAKE.

Doodle.js

Doodle.js takes a totally different approach to all the other libraries presented here in that it doesn't try to fit in with either JavaScript or the Canvas API but instead mimics ActionScript.

It's an original take on Canvas and one worthy of further inspection.

Billy Lamberta together with Keith Peters created the library for their forthcoming book Foundation HTML5 Animation with JavaScript [edit: this wrong. See comments]. The premise behind the project is that it will be of assistance to Flash developers who are interested in using HTML5.

This is how you create a circle with doodle.js:

 // declare variables
 var $canvas, $element, $circle;

 //dom block element wrapper
 $element = doodle.createDisplay("canvas");
 //creates new canvas element wrapper
 $canvas = $element.createLayer();

 $circle = doodle.createSprite();
 $circle.graphics.beginFill(0xfff10c);
 $circle.graphics.circle(0, 0, 150);
 $circle.graphics.endFill();

 $circle.x = $element.width / 2;
 $circle.y = $element.height / 2;

 $canvas.addChild($circle);

The breadth of coding demos attached to doodle.js is easily the most thorough of all the other libraries reviewed. By studying the code you'll be able to create smooth up and down motion, make the object follow the mouse and even create complex 3d shapes.

Doodle.js also has the most complex API reference of the lot.

As it's a relatively new project and built to coincide with the release of a yet to be published book, hardly any attention has been given to doodle.js from the wider developer community. But don't let that put you off from trying it out. It's one to watch.

Click on here to see a demo of doodle.js.

Conclusion

Due to time restrictions none of the above are complete reviews but I hope they gave you a flavour of what to expect if you try either jCanvaScript, fabric.js, doodle.js or CAKE.

There are a number of other Canvas projects out there such as Gury, HTML5 Canvas Library and MooTools Canvas Library but they are either too fresh or too stagnant to be worthy of review.

From my investigation all have elements which are commendable but all are far from being complete, rounded libraries.

Many coders have been spoilt by JavaScript libraries such as jQuery and Dojo over the last few years. The ease of creating animation means no more than adding slideUp() or slideDown() at the end of a coding chain.

These are at such a high-level that they bear no resemblance whatsoever to the underlying JavaScript that creates these methods.

jCanvaScript attempts to follow this path and because of that it is easy learn. However, as we look to using the Canvas API for more complex purposes other than fade in and out or horizontal linear movement, more full code will be required – complex animation will require complex code.

Sure, a library will assist in this process but it will require a deeper understanding by the developer of programming techniques that use geometry calculations.

For that reason, I really don't see how jCanvaScript can produce the sort of necessarily complex animation such as this and this (created with doodle.js).

So for now perhaps doodle.js edges in front of the others but fabric.js could be a serious contender if usability issues are addressed.

If you have tried any of the above then please feel free to add your thoughts below.

For developers and designers, creating and styling forms is the bread'n'butter of their trade and one of their most regular activities.

Some parts of the form such as checkboxes and file uploads can only be partially altered by CSS with these form elements being reliant on the inbuilt OS and browser style, but the submit button can be radically altered. It can even be totally replaced with an image like so:

Image submit button:
<input type=”image” src=”button.png” alt=”submit” name=”submit” />

Normal submit button:
<input type=”submit” name=”submit” value=”submit” />

As creating an image button is so straight forward it may seem pointless to use another method; however, there are a number of problems with HTML image buttons.

Firstly, there are issues with PHP form submission because it follows the mouse coordinates and creates two different values based on the X and Y coordinates instead of just one straight submission.

Secondly, you may be using a CMS and it may be not immediately obvious just how to alter an HTML form.

This is a foolproof way of using an CSS to replace a form submit button with an image and which works in any browser and platform.

The first part of the code uses CSS3 attribute selectors and places an image as a background for the element (use an alternative selector method for Internet Explorer). Make sure the background image isn't repeated and is centred on both axis'. The width and height must be the same as the image.

Now make sure that there is no border and the text has a transparent colour so that it is invisible.

form input[type=submit] {
	background : url("submit.png") no-repeat center center;
	width : 115px;
	height :52px;
	border : none;
	color : transparent;
}

One problem though is that Internet Explorer below version 8 doesn't recognise transparent as a valid value so for the legacy browsers we'll give the font a size of zero.

form input[type=submit] {
	background : url("submit.png") no-repeat center center;
	width : 115px;
	height :52px;
	border : none;
	color : transparent;
	font-size : 0
}

It's easy to change the image on the hover state:

form input[type=submit]:hover {
	background : url("submit-hover.png") no-repeat center center;
}

Screen readers will still be able to read the submit button text despite it being invisible to other web users.

These are a couple of examples from recent jobs that I have done:

Using sliding doors for submit buttons

It is also possible to use the sliding doors technique for submit buttons. For those that don't know, sliding doors is a means of creating a dynamic background image that expands as the text increases. It is most commonly used on menu list items.

Here's the image. A left hand side and a right hand side:

The HTML submit button is as before but this time we will encase it in a div like so:

<div class=”outer-submit”>
<input type=”submit” name=”submit” value=”submit” />
</div>

And here is the CSS code:

form .outer-submit {
	margin : 0 auto;
	background:transparent url("images/topic_button.png") no-repeat top left;
	max-width : 240px;
	width : 50%;
	padding : 0 0 10px 0;
}
form input[type=submit] {
	color : #fff;
	padding:9px;
	margin:0px 0px 5px 3px;
	border : none;
	width : 100%;
	background:transparent url("images/topic_button.png") no-repeat top right;
}
form .outer-submit:hover {
	background:transparent url("images/topic_button_hover.png") no-repeat top left;
}
form input[type=submit]:hover {
	background:transparent url("images/topic_button_hover.png") no-repeat top right;
}

This is what the above code looks like on a website.

Drupal was originally a developers toy but over the last few years the thrust of the CMS has been to try lower the entry point for non-technical users.

The administration section in version 7 is now far, far more user friendly to lay people and is closer to Wordpress in its logical layout and smooth navigation.

However, creating themes can still be a taxing process.

Out of the box, primary and secondary menus do not allow nested structures (unless you use them in the blocks). This isn't a CSS issue – it simple won't publish the necessary HTML despite being allowed to create a nested menu in the admin section.

Secondary and primary are placed into the theme by using the theme() function which creates a nested array like so:

        <?php print theme('links__system_main_menu', array('links' => $main_menu, 'attributes' => array('id' => 'main-menu', 'class' => array('links', 'inline', 'clearfix')), 'heading' => t('Main menu'))); ?>

The above sets the id, classes and a header title and associates this with the menu in the database.

In order to allow nested menus it is necessary to replace the above code with this:

	<?php
$pid = variable_get('menu_main_links_source', 'main-menu');
$tree = menu_tree($pid);
$tree = str_replace(' class="menu"', '', $tree);
$main_menu = drupal_render($tree);
print $main_menu; 
?>

This uses three different inbuilt Drupal functions: variable_get(), menu_tree() and drupal_render().

To explain, persistent variables are created with the variable_set() function and are kept cached in the database to prevent easy retrieval with variable_get().

The id of the main menu – called 'main-menu' – is then used as a parameter in the menu_tree() function. This calls the nested array for the main menu.

The magic comes with the simple PHP str_replace() function. You are looking for the needle menu class in the menu nested array haystack and removing it.

Then it is stuck back together again using the drupal_render() function.

Isn't there a way of doing this with just the theme() function? Those nested arrays make my head spin. Perhaps a more experienced Drupalista can comment.

For those not familiar with the default Drupal layout, the read more link is at the bottom of the node teaser with other links such as comments. It's positioning there doesn't flow very well and it looks better sitting directly underneath the teaser text.

It is easy to remove this link in Drupal 7 by using the new functions hide() and render(). ( render() uses an old Drupal function, drupal_render() ).

Drupal code originates from a PHP era before the widespread adoption of Object Orientated Programming, therefore much of it is dependent on nested arrays.

These can be quite maddening to deal with and it is not recommended do so without the Devel module and using the Devel helper dsm() function.

Hide() and render() allows themers to modify arrays without using preprocess functions in the template.php file.

In node.tpl.php they work as so.

By using render() it is possible to display the whole node – text, date, comment, links, the lot:

<div>
<?php print render($content); ?>
</div>

Removing parts of the page and then placing them elsewhere is easy with Drupal 7.

Before calling the parent $content you can hide some or all of its children.

Below prevents comments from being rendered.

<div>
<?php
hide($content['comments']);
php print render($content); 
?>
</div>

If you then wish to display them separately you'd then need to call comments like so elsewhere on the page:

<?php print render($content['comments']); ?>

Using this method hiding the read more link is achieved with the following:

<?php hide($content['links']['#links']['node-readmore']); ?>

Simple, er?

Inserting it elsewhere requires the use of the l() and t() functions to create a link:

  <?php 
if($teaser){
      print l(t('Read more'), 'node/' . $nid, array('attributes' => array('class' => t('node-readmore-link')))); 
  } 
?>

The l() and t() functions are needed when inserting links into Drupal so as to ensure they integrate safely with the rest of the code.

Adding all of the above together would create a node.tpl.php page like so:

<div id="node-<?php print $node->nid; ?>" class="<?php print $classes; ?> clearfix"<?php print $attributes; ?>>

  <div class="content-box">
  
    <div class="views-field-title"> <?php print render($title_prefix); ?>
    
      <?php if (!$page): ?>
      
      <p><?php print $title; ?></p>
      <?php endif; ?>
      
      <?php print render($title_suffix); ?> </div>
    <!-- End views-field-title -->
    
    <?php
	
		hide($content['comments']);
      hide($content['links']);
	  hide($content['field_image']); 
	  hide($content['links']['#links']['node-readmore']);
	 ?>
     
    <div class="field-content"> 
	<?php print render($content['field_image']); ?>
    
      <div class="content-date"><?php print $date; ?></div>
	  
      <?php print render($content); ?>
      
      <?php if($teaser){ ?>
      <p class="last-read"><?php print l(t('Read more'), 'node/' . $nid, array('attributes' => array('class' => t('node-readmore-link')))); ?></p>
      <?php } ?>
    </div>
    <!-- End field-content -->
    
    <div class="read-more"> <?php print render($content['links']); ?></div>
    <!-- End read-more -->
    
  </div>
  <!-- End content box -->
  
  <?php print render($content['comments']); ?> 
  
  </div>

There are a small number of tried and tested CSS techniques to achieve equal height columns but an ever increasing favourite amongst designers is to use server-side script.

This can be achieved by using DOM JavaScript as below:

// This function below is necessary to take the CSS values as they appear in the external style sheet
function retrieveComputedStyle(element, styleProperty) {
    var computedStyle = null;

    if (typeof element.currentStyle != "undefined") {
        computedStyle = element.currentStyle;
    } else {
        computedStyle = document.defaultView.getComputedStyle(element, null);
    }
    return computedStyle[styleProperty];
}

var $columnOne = document.getElementById("content-left");
var $columnTwo = document.getElementById("content-right");

var $columnOneHeight = document.getElementById("content-left").offsetHeight;
var $columnTwoHeight = document.getElementById("content-right").offsetHeight;

var $columnOneBorderTopWidth, $columnOneBorderBottomWidth, $columnOnePaddingTop, $columnOnePaddingBottom;
var $columnTwoBorderTopWidth, $columnTwoBorderBottomWidth, $columnTwoPaddingTop, $columnTwoPaddingBottom;

// Find border and padding dimensions of #content-left
$columnOneBorderTopWidth = retrieveComputedStyle($columnOne, "borderTopWidth");
$columnOneBorderBottomWidth = retrieveComputedStyle($columnOne, "borderBottomWidth");
$columnOnePaddingTop = retrieveComputedStyle($columnOne, "paddingTop");
$columnOnePaddingBottom = retrieveComputedStyle($columnOne, "paddingBottom");

// Find border and padding dimensions of #content-right
$columnTwoBorderTopWidth = retrieveComputedStyle($columnTwo, "borderTopWidth");
$columnTwoBorderBottomWidth = retrieveComputedStyle($columnTwo, "borderBottomWidth");
$columnTwoPaddingTop = retrieveComputedStyle($columnTwo, "paddingTop");
$columnTwoPaddingBottom = retrieveComputedStyle($columnTwo, "paddingBottom");

// Remove pixels with replace method aand then add top and botton heights
var $columnOneBorderNumber = Number($columnOneBorderTopWidth.replace("px", "")) + Number($columnOneBorderBottomWidth.replace("px", ""));
var $columnOnePaddingNumber = Number($columnOnePaddingTop.replace("px", "")) + Number($columnOnePaddingBottom.replace("px", ""));
var $columnTwoBorderNumber = Number($columnTwoBorderTopWidth.replace("px", "")) + Number($columnTwoBorderBottomWidth.replace("px", ""));
var $columnTwoPaddingNumber = Number($columnTwoPaddingTop.replace("px", "")) + Number($columnTwoPaddingBottom.replace("px", ""));

// Now take the total margins and padding numbers away from the height
var $columnOneFinal = $columnOneHeight - $columnOneBorderNumber - $columnOnePaddingNumber;
var $columnTwoFinal = $columnTwoHeight - $columnTwoBorderNumber - $columnTwoPaddingNumber;

// Use the Maths object to find the highest number and set that in the maxNumber variable
var maxNumber = Math.max($columnOneFinal, $columnTwoFinal);

// Set the height of the columns to be equal
$columnOne.style.height = maxNumber + "px";
$columnTwo.style.height = maxNumber + "px";

The enormous slab of code above creates equal heights for two divs, but by using a library such as jQuery it is possible just to use this:

    var $columnOne = $('#content-left').height();
    var $columnTwo = $('#content-right').height();

    var maxNumber = Math.max($columnOne, $columnTwo,);

    $('#content-left').css("height", maxNumber + "px");
    $('#content-right').css("height", maxNumber + "px");

The above finds the height of the two columns and then uses the JavaScipt Math object to find which value is the largest and then sets that in the CSS. This method does not take into account padding or margin measurments. If required, you'll have to add that separately.

Using this method recently I had a problem with the Webkit browsers. I worked out that Webkit was adding the height of the images to the above calculations, thus, creating uneven columns.

Thinking that it was a new Webkit DOM glitch that jQuery hadn't caught up with yet I tried the JavaScript longhand method but it was still the same.

I finally worked out that the problem lay in how JavaScript was being called as the page loaded.

The usual method of placing jQuery on the page is by using the $(document).ready() function. This calls the JavaScript after the DOM has loaded but before the page content.

Another option is to use the $(window).load() function like so:

$(window).load(function() {

// Code here

});

This allows the script to be executed after both the DOM and the page has been rendered.

Using this function meant that the equal height columns code now worked perfectly.

Twitter is first-class for the quick dissemination of breaking news stories and the writing of witty one-liners has become an art in itself, but with only 140 characters maximum this provides a break on the style and substance of the platform. Bloggers face no such restraints.

There is still a need for traditional blogging.

At the moment Google is waging a war against content farms as it seeks to improve the quality of the search index. Few, if any, could seriously complain that this isn't a righteous move by the big G. At WebProNews Chris Crum questions whether we want high ranking content from non-professional sources on important subjects such as cancer:

You can still search for "level 4 brain cancer" on Google and the top 2 results are from eHow. The top one comes from a freelance writer with a background in marriage psychology and family therapy, whose other featured articles on the site include titles like "Kohler Toilet Won’t Flush Completely", "Roper Dryer Won’t Start", and "My Toilet Water Smells

In my Google reader I subscribe to about 100 feeds. Some of these are magazines such as Sitepoint, Smashing and SeoMOZ, but most of them are individual bloggers like Stephen Dean, Murray Woodman, David Walsh, Janko Jovanovic, Debra Mastaler and Jeff Starr.

If, during my web travels, I come across a quality post then I check the output of the author and if they write consistently top notch items I subscribe to their feed. Using this methodology rarely do I subsequently unsubscribe.

For the online industries such as web design and search engine optimization, bloggers have played a crucial role in the dissemination and revision of ideas and best work practices. Blogging, at its best, provides quality information to the web audience.

I don't envisage this changing in the future.

Rachel Andrew reflects on ten years of blogging and how Twitter has eaten into her daily routine:

As I stopped posting trivial stuff to my blog, without any conscious decision, the blog then became the place I posted important things. My recent posts tend to be about business or web issues, and take the form of short essays rather than the short posts of the past. Again, this hasn’t been a conscious change of direction for the blog, however the more I post things I feel are important, the less I feel able to post the trivial. (her emphasis)

I would suggest that Rachel's experience of moving the whimsical to Twitter and leaving in-depth analysis on her blog is the norm rather than the exception.

So if blogging is on the retreat then perhaps this is just the quantity rather than quality?

Intellectual detractors of the net often disparagingly talk about “the cult of the amateur”. But this is both a strength and weakness. Clearly, I don't want to be handed information about brain cancer by a non-medical writer; but the professional, semi-professional or amateur enthusiasts are an essential part of the web environment and especially in the new media and creative industries.

To celebrate and rejuvenate blogging Chris Shiflett recently issued a call under the banner of “Ideas for March”. The points of his manifesto read:

• Write a post called Ideas of March.
• List some of the reasons you like blogs.
• Pledge to blog more the rest of the month.
• Share your thoughts on Twitter with the #ideasofmarch hashtag.

This is my contribution under the Shiflett standard.

I blog for both altruistic and selfish reasons. Sometimes during the course of work I come across tricky problems that take time to solve. Often partial ideas for solutions have already been recorded by other bloggers or forum users and I want to contribute to the wider discourse. Using PEAR Cache Lite with Drupal 6 and Varnish and Google Analytics and Drupal are two recent articles in this vein. I don't do anything to promote these types of posts. I just write them, publish them and then let them float.

Other posts are about self-promotion (SEO) and autodidacticism. As an example, I recently spent a few days playing around with HTML5 canvas. Afterwards I wrote what I had learnt into a tutorial and then went on a link building exercise. Writing my coding experience down solidifies my knowledge of the subject matter and improves the learning process. Read Using HTML5 canvas, A Complete Guide to CSS Functions and A complete guide to CSS pseudo-classes.

Most importantly, I enjoy writing. As a young adult I had little grasp of the English language and I found it impossible to spell any word over six letters. I was so awful that I wondered whether I was dyslexic (Don't be stupid, my mum said, You just didn't pay any attention at school).

Many years have passed since then but throughout most of my adult life I have learned to love both writing and reading and consider them fundamental to a healthy, informed outlook to life. Indeed, the written word is the bedrock of modern civilisation.

Writing quality blog posts takes time. For me, they are often 1,500 to 2,000 words long, and I want to be certain that all information is correct and spelling and grammar mistakes are kept at a minimum. This often means revisions before publication. To sum up, I take it seriously.

This is why I blog: contributing to a community, self-promotion and enjoyment.

And in keeping with the spirit of things I pledge to write one extra article in March.

Fellow bloggers trending at the moment for #ideasofmarch are

Matthew Weier O'Phinney, Lisa Denlinger, Nate Abele, Kevin Schroeder, Leon Paternoster, Stu Robson, Sean Prunka, Elizabeth Naramore, Cameron Koczon, Rafael Machado Dohms and Sam Hardacre

The Canvas API is a means of creating shapes, graphs and even animation using just JavaScript and which, unlike Flash, doesn't require a plug-in and, unlike Flash again, is not proprietary but open.

Due to all the euphoria around HTML5 you may have come across list articles such as 48 Potential Flash-Killing Demos and 10 HTML5 Demos to Make You Forget About Flash, and which in their screaming hyperbole give the impression that all the cool kids hang out with HTML5 while Flash is the preferred technology for your senile, incontinent granddad.

But this is not the case. HTML5 canvas is still a juvenile cousin to a much more mature Flash. As Mozilla themselves admit on their own canvas guide:

Unfortunately the canvas element was never designed to be used in this way [to make animation] (unlike Flash) so there are limitations.

Probably the biggest limitation is that once a shape gets drawn it stays that way. If we need to move it we have to redraw it and everything that was drawn before it. It takes a lot of time to redraw complex frames and the performance depends highly on the speed of the computer it's running on.

A user on Stack Overflow started a thread entitled Why is creating content with HTML5 Canvas much more complicated than authoring with Flash? with the following exasperated plea:

Hi, I've been doing Flash for couple of months and I love it. I can easily use a rectangle tool to draw a rectangle and do shape/motion tweening within seconds.

Lots of people are talking about HTML5 vs Flash nowadays and I took a look on HTML5 Canvas today. To my surprised, I see whole bunch of "code". It's so complicated, they need to make a lot of calls (fill, stroke, moveto, closepath etc...) to make a simple shape. And even dozens lines of code mixing with javascript to do a simple movement???

Am I missing something? It'll make animation 10x more complicated with HTML5 Canvas than Flash.

Read the answers to understand both the underlying differences between the two different technologies and reasons why Flash is still best for online animation.

Two problems for canvas at the moment are the lack of thorough tutorials and a decent library so as to allow more widespread access to the complicated animation features.

At the time of writing there is no one comprehensive book on the subject although a number are due to be released in 2011 including HTML5 Canvas by Steve and Jeff Fulton on the O'Reilly imprint (Send me a copy to review please!!).

Nevertheless despite these handicaps below are some ways that it can be used.

Create a rectangle with HTML5 canvas

The current development of the canvas API means that it is only possible to create rectangles or squares – all other shapes need to be made using paths.

The first and most important thing is to create the html:

<canvas id=”canvas-one” width=”400” height=”400”></canvas>

If no width or height is specified then the browser will fall back to a pre-defined size.

Every use of the canvas API must begin with calling the rendering context, which below is 2d:

var $canvas = document.getElementById(“canvas-one”);
var $cd = $canvas.getContext('2d');

Note that there is no 3d rendering yet.

If you are creating a rectangle shape you will need to first declare the colour of the body and specify the colour and width of the border:

    $cd.strokeStyle = "#000";
    $cd.fillStyle = "#FFFF00";
    $cd.lineWidth = "5";

</pre>

<p>And now reference the above and create a rectangle:</p>

<pre><![CDATA[

$cd.fillRect(30,30,200,300);
$cd.strokeRect(30,30,200,300);

The values above are, from left to right, x coordinate, y coordinate, width in pixels and height.

Place all of the above in an object detection statement so that it looks like below:

if ($canvas.getContext) {

    $cd = $canvas.getContext('2d');

    $cd.strokeStyle = "#000";
    $cd.fillStyle = "#FFFF00";
    $cd.lineWidth = "5";

$cd.fillRect(30,30,200,300);
$cd.strokeRect(30,30,200,300);

} else {

    alert("Your browser does not support HTML5 canvas. Use a decent browser, douchebag");

}

This creates the following shape:

It is possible to delete all the canvas content by using the following line of code:

$cd.clearRect(0,0,$canvas.width,$canvas.height);

Or just:

$canvas.height = $canvas.width;

Create a face with HTML5 canvas

Now use some different methods and create a face like so:

Start off as before:

var $canvas = document.getElementById("canvas-one"),
    $cd;

if ($canvas.getContext) {

$cd = $canvas.getContext('2d');

$cd.strokeStyle = "#000";
$cd.fillStyle = "#FFFF00";
$cd.lineWidth ="2";

// New code here

} else {

alert("Your browser does not support HTML5 canvas. Use something decent, douche bag");

}

To create a face you are going to need different shapes to represent the different parts.

You'll need to create a circle for the face shape. Unlike the previous rectangle you always begin creating a shape by calling the beginPath method:

$cd.beginPath();
$cd.arc(300,200,50,0,Math.PI*2, false);
$cd.fill();

The arc method creates a circle. The measurements, from left to right, are the x coordinate, the y coordinate, the radius size, the start angle, the end angle and whether it runs clockwise or anti-clockwise. Note how the mathematical formula PI is used to create a perfect circle.

Now for a mouth:

$cd.beginPath();
$cd.moveTo(270,210)
$cd.lineTo(330,210);
$cd.stroke();

Again, call the beginPath method before you create the shape. Here the straight line moves along the specified X and Y coordinates. MoveTo starts the line and lineTo is the next coordinate. By using more lineTo methods it is possible to create a myriad of different shapes.

Now add some more line paths to create the eyes and the final code looks like this:

var $canvas = document.getElementById("canvas-one"),
    $cd;

if ($canvas.getContext) {

    $cd = $canvas.getContext('2d');

    $cd.strokeStyle = "#000";
    $cd.fillStyle = "#FFFF00";
    $cd.lineWidth = "2";

    $cd.beginPath();
    $cd.arc(300, 200, 50, 0, Math.PI * 2, false);
    $cd.fill();

    $cd.beginPath();
    $cd.moveTo(270, 210)
    $cd.lineTo(330, 210);
    $cd.stroke();

    $cd.fillStyle = "#000";
    $cd.beginPath();
    $cd.arc(285, 180, 5, 0, Math.PI * 2, false);
    $cd.fill();

    $cd.beginPath();
    $cd.arc(315, 180, 5, 0, Math.PI * 2, false);
    $cd.fill();


} else {

    alert("Your browser does not support HTML5 canvas. Use something decent, douche bag");

}

Note above how the colour isn't kept in a variable but needs to be changed as the document progresses.

Create a smiling face with HTML5 canvas

The face looks very glum so give him a smile by using the quadratic bezier curve method.

$cd.moveTo(270, 210);
$cd.quadraticCurveTo(300, 250, 330, 210);
$cd.stroke();

As always, moveTo is at the start. The measurements in the quadraticCurveTo, from left to right, are the first control point, the second control point, the x coordinate and the y coordinate. Just like using bezier curves in Illustrator, they are not easy to master.

Added with the rest of the code it looks as so:

var $canvas = document.getElementById("canvas-one"),
    $cd;

if ($canvas.getContext) {

    $cd = $canvas.getContext('2d');

    $cd.strokeStyle = "#000";
    $cd.fillStyle = "#FFFF00";
    $cd.lineWidth = "2";

    $cd.beginPath();
    $cd.arc(300, 200, 50, 0, Math.PI * 2, false);
    $cd.fill();

    $cd.strokeStyle = "#000";
    $cd.beginPath();
    $cd.arc(300, 200, 50, 0, Math.PI * 2, false);
    $cd.stroke();

    $cd.moveTo(270, 210);
    $cd.quadraticCurveTo(300, 250, 330, 210);
    $cd.stroke();

    $cd.fillStyle = "#000";

    $cd.beginPath();
    $cd.arc(285, 180, 5, 0, Math.PI * 2, false);
    $cd.fill();

    $cd.beginPath();
    $cd.arc(315, 180, 5, 0, Math.PI * 2, false);
    $cd.fill();

} else {

    alert("Your browser does not support HTML5 canvas. Use something decent, douchebag");

}

Create random multiple circles with HTML5 canvas

Next, create this:

It is 5,000 little circles of varying size and colour and uses the methods already detailed above:

var $canvas = document.getElementById("canvas-one"),
    $cd;

if ($canvas.getContext) {

    $cd = $canvas.getContext('2d');

    for (i = 0; i <= 5000; i++) {

        $cd.fillStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";

        $cd.strokeStyle = "rgb(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + ")";

        $cd.lineWidth = "2";

        var $x = 150 + Math.floor(Math.random() * 150);
        var $y = 150 + Math.floor(Math.random() * 150);
        var $radius = 0.1 + Math.floor(Math.random() * 10);

        $cd.beginPath();
        $cd.arc($x, $y, $radius, 0, Math.PI * 2, true);

        $cd.stroke();
        $cd.fill();

    }
}

Create random multiple spots with HTML5 canvas

Finally, introducing the essential JavaScript method for animation and motion, setTimeout. This instructs the browser to re-run the function after the number of milliseconds specified:

var $canvas = document.getElementById('canvas-one'),
 $cd;
if ($canvas.getContext) {

    function create_spots() {

        $cd = $canvas.getContext('2d');

        for (i = 0; i <= 100; i++) {

            $cd.fillStyle = "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 10) / 10 + ")";

            $cd.strokeStyle = "rgba(" + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 255) + "," + Math.floor(Math.random() * 10) / 10 + ")";

            var $x = 10 + Math.floor(Math.random() * 491);

            var $y = 10 + Math.floor(Math.random() * 491);

            var $radius = 0.1 + Math.floor(Math.random() * 2);

            $cd.beginPath();

            $cd.arc($x, $y, $radius, 0, Math.PI * 2, true);

            $cd.stroke();

            $cd.fill();

        } // End for loop
        setTimeout('create_spots()', 1000);

    } // end create spots functions
    create_spots();

The above code creates 100 multi-coloured spots every 1000 milliseconds: check it out here.

The truth is that apart from the famous website for Arcade Fire's The Wilderness Down, much of the current showcased HTML5 looks no more impressive than Java animation from 10 or 15 years ago.

Of course, this will change. The Canvas API will develop, browsers will become faster and more capable and the community of users around this HTML5 feature will grow and become stronger.

Hopefully, somebody will create a code library for canvas animation. Creating objects is cumbersome but straight forward; however, in order for the popularity of this particular HTML5 API to spread there needs to be easy access to animation features as you would find in jQuery or Mootools.

If you are interested in finding out more about canvas then read the following guides:

• Create great graphics with the HTML5 canvas
• Mozilla canvas tutorial
• Stories in Flight: HTML5 / CSS3 cheatsheet
• HTML5 Canvas Animation Overview
• HTML5 Canvas Tutorials
• Lets Call it a Draw(ing Surface) – Dive Into HTML5
• HTML5 canvas - the basics
• How to Use the Canvas and Draw Elements in HTML5
• HTML5 Canvas Element Guide

The best guide for setting up Varnish can be found in the excellent Lullabot video Drupal Performance & Scalability. This video covers Varnish, Pressflow and PHP and MySQL optimisation techniques. However, although only released at the turn of the year, some of the information is now out of date. For instance, it recommends using a replacement init script for memcached; but the latest version of the Memcache Drupal module makes this script redundant.

You can also find help on the Drupal Performance group site.

One big issue with Varnish is that the presence of even a single cookie will mean the user bypasses the cached content. That is why it is essential to use Pressflow because it removes unnecessary session cookies that can be found in Drupal.

If you follow the existing guides carefully then you shouldn't encounter too many problems installing Varnish, however trying to deal with Google Analytics cookies gave me a real headache.

There is a Drupal-optimised Varnish configuration file script that is possible to cut and paste into the default.vcl file; but getting to grips with it requires knowledge of the homegrown language that it uses, details of which can be found here.

In the script linked to above there is a line that strips Google Analytics cookies before it is processed, thus allowing the cache to proceed.

  // Remove has_js and Google Analytics cookies.
  set req.http.Cookie = regsuball(req.http.Cookie, "(^|;s*)(__[a-z]+|__utma_a2a|has_js)=[^;]*", "");

I've tried the above code and a number of different variations that I found elsewhere on the web and I couldn't get the cache to work with Google Analytics. There is clearly something fundamental I'm misunderstanding about how the script processes cookies.

However, there is an alternative to the standard JavaScript analytics code and which is not dependent on cookies.

Because a number of mobile phone browsers don't accept JavaScript or cookies, in 2009 Google released a version that was non-JavaScript and non-cookie analytics code for sites aimed at this market.

So what is good for mobile phones is good for Varnish. When you sign up and grab the code click on the advanced tab and then click on “a site built for a mobile phone” and from there use the code provided.

As an aside, I use a couple of co.cc domains for sites in development. I couldn't get Google to recognise the tracking code when placed on co.cc domains. Has anybody else encountered this problem before? It is mickey mouse domain so I suppose there must be problems with the DNS.

This article describes how I implemented Cache Lite with Drupal CMS.

One aspect of Drupal that can give users grief is its cache. The inbuilt Drupal cache is, although better than nothing, dependent on database storage and isn't the best solution. Easily the best solution for top notch Drupal performance is using Alternative PHP Cache (APC), Varnish HTTP accelerator and Memcache for the database. Most major Drupal sites use all or some of these three.

It is unthinkable to run Drupal without a server-side cache as slow load times are detrimental to the user experience, especially for an eCommerce cart where there is a well-proven correlation between fast page load times and happy customers.

However, if you are running Drupal on a shared server then these solutions are not going to be possible to use. There are a number of credible Drupal third-party cache modules such as Boost but I wanted to try Drupal with PEAR Cache Lite.

If I was to build a PHP site from scratch I would consider using PEAR Cache Lite which uses PHP output buffering with OOP.

It's certainly one of the easiest solutions to implement.

Lets take a look at Cache Lite implemented for caching various blocks on the standard Drupal page.tpl.php page:

<?php
require_once (drupal_get_path('module', 'cachelite') . '/Cache/Lite/Output.php');

$id = md5('http://'.$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI']);

$options = array(
'cacheDir' => './sites/default/files/cache/',
'lifeTime' => 3600,
'caching' => TRUE
);

/* Set a key for this cache item */
$cache = new Cache_Lite_Output($options);

if ( !($cache->start($id . 'block-one')) ) {
	 
    	     echo '<!-- Served From Cache block one: '. date('l jS of F Y h:i:s A').' -->';
	
				 ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">

<head>
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyled Content in IE */ ?> </script>
</head>
<body class="<?php print $body_classes; ?>">
  <div id="page">
    <div id="header">
      <div id="logo-title">

        <?php if (!empty($logo)): ?>
          <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
            <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
          </a>
        <?php endif; ?>
		
		<?php  

$cache->end();

	}

?>

<p>This will not be cached</p>

<?php
if ( !($cache->start($id . 'block-two')) ) {
	 
    	     echo '<!-- Served From Cache block two: '. date('l jS of F Y h:i:s A').' -->';
	
				 ?>

        <div id="name-and-slogan">
          <?php if (!empty($site_name)): ?>
            <h1 id="site-name">
              <a href="<?php print $front_page ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
            </h1>
          <?php endif; ?>

          <?php if (!empty($site_slogan)): ?>
            <div id="site-slogan"><?php print $site_slogan; ?></div>
          <?php endif; ?>
        </div> <!-- /name-and-slogan -->
      </div> <!-- /logo-title -->

      <?php if (!empty($search_box)): ?>
        <div id="search-box"><?php print $search_box; ?></div>
      <?php endif; ?>

      <?php if (!empty($header)): ?>
        <div id="header-region">
          <?php print $header; ?>
        </div>
      <?php endif; ?>

    </div> <!-- /header -->
	
		<?php  

$cache->end();

	}

?>

<p>This will not be cached</p>

<?php
if ( !($cache->start($id . 'block-three')) ) {
	 
    	     echo '<!-- Served From Cache block three: '. date('l jS of F Y h:i:s A').' -->';
	
				 ?>

    <div id="container" class="clear-block">

      <div id="navigation" class="menu <?php if (!empty($primary_links)) { print "withprimary"; } if (!empty($secondary_links)) { print " withsecondary"; } ?> ">
        <?php if (!empty($primary_links)): ?>
          <div id="primary" class="clear-block">
            <?php print theme('links', $primary_links, array('class' => 'links primary-links')); ?>
          </div>
        <?php endif; ?>

        <?php if (!empty($secondary_links)): ?>
          <div id="secondary" class="clear-block">
            <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')); ?>
          </div>
        <?php endif; ?>
      </div> <!-- /navigation -->

      <?php if (!empty($left)): ?>
        <div id="sidebar-left" class="column sidebar">
          <?php print $left; ?>
        </div> <!-- /sidebar-left -->
      <?php endif; ?>

      <div id="main" class="column"><div id="main-squeeze">
        <?php if (!empty($breadcrumb)): ?><div id="breadcrumb"><?php print $breadcrumb; ?></div><?php endif; ?>
        <?php if (!empty($mission)): ?><div id="mission"><?php print $mission; ?></div><?php endif; ?>
		
			<?php  

$cache->end();

	}

?>

<p>This will not be cached</p>

<?php
if ( !($cache->start($id . 'block-four')) ) {
	 
    	     echo '<!-- Served From Cache block four: '. date('l jS of F Y h:i:s A').' -->';
	
				 ?>

        <div id="content">
          <?php if (!empty($title)): ?><h1 class="title" id="page-title"><?php print $title; ?></h1><?php endif; ?>
          <?php if (!empty($tabs)): ?><div class="tabs"><?php print $tabs; ?></div><?php endif; ?>
          <?php if (!empty($messages)): print $messages; endif; ?>
          <?php if (!empty($help)): print $help; endif; ?>
          <div id="content-content" class="clear-block">
            <?php print $content; ?>
          </div> <!-- /content-content -->
          <?php print $feed_icons; ?>
        </div> <!-- /content -->

      </div></div> <!-- /main-squeeze /main -->

      <?php if (!empty($right)): ?>
        <div id="sidebar-right" class="column sidebar">
          <?php print $right; ?>
        </div> <!-- /sidebar-right -->
      <?php endif; ?>

    </div> <!-- /container -->

    <div id="footer-wrapper">
      <div id="footer">
        <?php print $footer_message; ?>
        <?php if (!empty($footer)): print $footer; endif; ?>
      </div> <!-- /footer -->
    </div> <!-- /footer-wrapper -->

    <?php print $closure; ?>

  </div> <!-- /page -->

</body>
</html>
	<?php  

$cache->end();

	}

?>

At the top of the page the require_once is used to link to the Cache Lite PHP file that is in the module; cacheDir is the folder that needs to be manually created and where the cache files will be stored; lifeTime is the amount of seconds that the cache will be kept and caching can either be TRUE or FALSE.

For a full list of parameters read the manual: http://pear.php.net/manual/en/package.caching.cache-lite.cache-lite.cache-lite.php

From there the first cache block is built. The $id I used was a uniquely generated number for every individual page plus the block number for every section. I also added a time stamp so that it can be determined whether the section has been cached or not. In the example above the areas not being cached are clearly labelled.

There is no mechanism for flushing the cache and that needs to be integrated with the administration section. The code below will do that:

<?php
// $ID$
// Andy Walpole andy@suburban-glory.com January 23 2010

// Sets permissions
function cachelite_perm()
{
    return array(
        'cachelite module'
    );
    
}

// Implementation of hook_menu()
function cachelite_menu()
{
    $items = array();
    
    $items['admin/settings/cachelite'] = array(
        
        // Title of module as it appears on the <title> tags
        'title' => t('Cache Lite Settings'),
        
        // Appears at the top of the screen
        'description' => t('Configuration options for the Cache Lite module'),
        
        // Function that is called when the page is loaded
        'page callback' => 'cachelite_admin_form',
        
        // find more about access callback
        'access callback' => 'user_access',
        
        'access arguments' => array(
            'administer site configuration'
        )
        
    );
    
    return $items;
    
}


function cachelite_admin_form()
{
    // call the function below
    return drupal_get_form('cachelite_form');
    
}

function cachelite_form()
{
    $form = array();
    
    // This below creates a fieldset for the submit button
    $form['fieldset-one'] = array(
        '#type' => 'fieldset',
        '#title' => t('Flush the cache here')
    );
    
    $form['fieldset-one']['submit'] = array(
        // creates the submit button
        '#type' => 'submit',
        '#value' => 'Submit'
        
    );
    
    return $form;
    
}


// Presents message on successful completion of email
function cachelite_form_submit($form_id, &$form_state)
{
    $result = "";
    
    require_once(drupal_get_path('module', 'cachelite') . '/Cache/Lite/Output.php');
    
    $options = array(
        'cacheDir' => './sites/default/files/cache/'
    );
    $cache   = new Cache_Lite($options);
    $cache->clean();
    $result = true;
    
    
    if ($result == true) {
        drupal_set_message(t('The cache has been flushed'));
    } else {
        drupal_set_message(t('There have been problems with the cache'));
    }
    
} // end cachelite_form_submit

The code above is standard Drupal module creation code and uses hook_perm() and hook_menu() as well as the Form API. In the admin section it is now possible to flush the cache with just a quick form submission.

But this still leaves the problem of old pages from the cache being called despite user interaction. For instance, if you want to show a message after the user has submitted the form this will not be possible with the current set up because it will pull an old page from the cache.

So I added a bit more code to the module file:

function cachelite_form_alter(&$form, $form_state, $form_id)
{
    $key = $form_id;
    
    // Flushes the cahce on submitting a button - clumsy
    
    $form['#submit'][] = 'cache_flush';
    
    switch ($key) {
        
        case 'uc_cart_view_form':
            $form['checkout']['#submit'][] = 'cache_flush';
            $form['update']['#submit'][]   = 'cache_flush';
            break;
            
            
    }
    
    
} // end cachelit_form_alter


// Presents message on successful completion of email
function cache_flush()
{
    $result = "";
    
    require_once(drupal_get_path('module', 'cachelite') . '/Cache/Lite/Output.php');
    
    $options = array(
        'cacheDir' => './sites/default/files/cache/'
    );
    $cache   = new Cache_Lite($options);
    $cache->clean();
    
} // end cache_flush

Whenever a user submits a form the cache is now flushed. It's a clumsy, primitive way of regenerating the cache but it is okay for now.

So above is an implementation of PEAR Cache Lite for Drupal.

BUT testing the page rendering times with Apache benchmark it is apparent that there is hardly any gain by using Cache Lite with Drupal – at least, not the class I have used.

So in conclusion Cache Lite is... useless with Drupal. LOL! Oh well, it doesn't hurt to try these things out.

The full code including that of Cache Lite is in a module which you can download here. Be my guest if you want to persist with this experiment.

For more info on Cache Lite then read: Speedup your website with Cache_Lite and Cache it! Solve PHP Performance Problems.

CSS 2.1 colour and background properties

Level 2.1 CSS colour and background is the nuts and bolts of any website build. If you aren't familiar with any of these then practice and practice until you are and then move on to CSS3 later.

color

For newcomers this can an early stumbling block because although color can refer to any foreground colour of an element it is always used for the color of text only.

An example being:

p {
color: #008000;
}

The above would change the text in the paragraph (stipulated by the p selector) to green.

There are several different ways of specifying colour in CSS and they are HEX, RGB, RGBA, HSA, HSLA and set CSS color names.

This post does not concern itself with the different web colour values but the official W3C guide to colour units is here: http://www.w3.org/TR/css3-iccprof#colorunits. As with all W3C documents it is a dull read – if you know of a worthy article on this subject then post a link in the comments section.

Those not familiar with colour on the web should familiarise themselves with HEX and RGB (the same values but two different formats) first and then pay closer attention to the remainders listed above later.

Newbies please also note the American English spelling of color (compared to British standardised colour). It has to be spelled color in your stylesheet.

background-color

Following on from changing the colour of text here is how you change the colour of the background. An example being:

#example {
background-color : #000000;
}

This would change the background of the HTML element on the page labelled with the id of example to black. The notation is a HEX value.

background-image

Images are placed into a stylesheet by using the URL path, for instance:

#example {
background-image : url(images/background-portrait.jpeg);
}

This places the JPEG called “background-potrait” into the example id.

The path can be absolute or relative. To explain, this is an absolute path: http://www.suburban-glory.com/images/main-icon.png, while this is a relative path: /images/main-icon.png/. It means relative to the page you are currently on.

background-position

Once you have specified an image to be used for a background then you may need to position it. This is done on the X and Y coordinates.

#example {
background-image : url(images/background-portrait.jpeg);
background-position : right bottom;
}

This places the image in the bottom right-hand corner. A background position of “left top” would place the image in the top left-hand corner.

The total list of usable keywords are:

left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom

These should be self-explanatory.

The values can also be specified as pixels or percentages:

#example {
background-image : url(images/background-portrait.jpeg);
background-position : 40px 50px;
}

The above places the image 40px from the left and 50px from the top.

background-repeat

Unless you specify otherwise any background image is automatically repeated both along its X and Y coordinates until the element is filled.

You can take control of that by using the background-repeat property:

#example {
background-image : url(images/background-portrait.jpeg);
background-position : right bottom;
background-repeat : no-repeat;
}

Using the same declaration block as previous we have now made sure that the image appears only once.

Simple, yes? Changing the value of “no-repeat” to “repeat-x” or “repeat-y” means that the image can be repeated along either the x or y axis respectively.

background-attachment

Out of all of the above this is probably the least used but can provide an impressively stylistic touch. All background images scroll with the content, but be declaring a fixed background attachment the image remains static no matter the scrolling.

body (
background-image : url(images/background-portrait.jpeg);
background-repeat : no-repeat;
background-attachment:fixed; 
}

The above will fix an image to the body of an html page. Note that background-attachment does not work in Internet Explorer 6.

As a live example see this website I created here – the fixed background is on #wrapper.

It is worth noting that all of the above five properties can be shortened onto one line; however, this isn't an article about CSS shorthand and for that I would recommend Dustin Diaz's feature CSS Shorthand Guide or Shane Jeffers item CSS Shorthand – A Guide to Cleaner and Faster Coding.

CSS3 colour and background properties

These are now regarded as advanced features of CSS, but very soon – when all the browsers catch up with CSS3 specifications – they will be regarded as basic to a designer as 2.1 is now.

background (multiple images)

With CSS2.1 it is only possible to add one background image for every element, but with CSS3 it is now possible to add as many images as you desire.

The only way this could be done before was to add extra HTML markup but now it is possible to do this as so:

#example {
background : url(images/picture-one.jpg), url(images/picture-two.jpg), url(images/picture-three.jpg);
}

Just list the images and separate them with a comma.

I cannot begin to tell you just what a bonus this is when it comes to web design. It really does open up new aesthetic doors to explore.

The bad news? It doesn't work in the legacy browsers, namely Internet Exploer 6, 7 and 8. The good news? Use CSS3 Pie for a solution to this problem. I bless thee CSS3 Pie developer, Jason Johnston.

background-size

This, as the name suggests, changes the background image size; and, like much of CSS3, lacks IE support (apart from version 9).

However, this CSS3 property has been receiving a lot of attention and is being widely adopted despite of the usual IE issues.

Although Webkit (Safari and Chrome) have supported this property for sometime; Firefox 3.6, launched in January 2010, added it to their browser through the usual Mozilla prefix.

There are two basic values that can be used: cover and contain.

They are written like so:

#example {
background : url(images/picture-one.jpg);
-moz-background-size : cover;
background-size : cover;
}

(-moz-background-size is required for versions of Firefox less than 4).

This stretches the image to cover the entire container, in this case the example id.

To stretch the image but keep it's proportions then use contain instead:

#example {
background : url(images/picture-one.jpg);
-moz-background-size : contain;
background-size : contain;
}

But the fun doesn't stop there. It is also possible to specify percentages and pixels.

This would change the dimensions of the image to 75% of the size of the container (not shrinking to 75% of the original size!)

#example {
background : url(images/picture-one.jpg);
-moz-background-size : 75%;
background-size : 75%;
} 

It is also possible to use pixels:

#example {
background : url(images/picture-one.jpg);
-moz-background-size : 75px;
background-size : 75px;
} 

The above changes the size of image to 75px square.

This property also allows the coder to change the proportions on its X and Y axis, so “background-size: 75px 100px” would create a rectangle shape.

An example of background-size in action is this website here.

If you look at the central wrapper area (in non-IE browsers) then that is actually a 12 pixel square cut from the image in the left hand corner. I gave it a slight opacity and then used the background-size cover value to stretch it across the entire div.

For further reading take a look at A List Apart's seminal article Supersize that Background, Please!

background-origin / background-clip

I've grouped these two properties together as the same keyword values are used for them both.

To recap, we have learned how to add an image, position it, repeat it (or not) and even stretch it in various way. Background-origin / background-clip is concerned with how the background image relates to the padding and border of the container it is within.

As way of a visual representation I'm going to nick the diagram from the CSS3.info page:

Compared to background-size, these are only capable of relatively minor design changes.

If you wish to check cross-browser issues with CSS backgrounds then take a look at the table on Quirksmode.

Often it was the case that web designers were adding extra classes or ids to page elements just so that they could use CSS to alter their design; but with CSS 2, and especially in the ongoing version 3, the push has been towards minimising HTML markup.

CSS combinators assist in this quest but it isn't just about following theoretical aesthetics, but also about making you a faster, more efficient web designer.

They may be slightly confusing at first, but practice makes perfect so try to incorporate them into your designs wherever possible.

Like much of the other CSS I have been highlighting in this series of guides, they aren't used as widely as they should be. As Vitaly Friedman of Smashing Magazine wrote:

Combinators are an overlooked part of CSS development. Most juniors don’t even know they are making use of them, others are unaware of their full potential and let’s face it, even most professionals don’t really know about the ins and outs of css combinators.

It's worth noting that there is total support for these CSS properties from Internet Explorer version 7 onwards and partial support in IE6.

CSS 2.1 Combinators

E + F / Adjacent Sibling

Before explaining the finer points of this CSS code lets present a problem first and then bring the adjacent sibling property in as the solution.

Example: You want to style the first paragraph under each heading and the first paragraph only. Lets say you want to change the first letter in the paragraph.

You could just add an extra class to this paragraph, but has been stated before the aim is to minimise HTML markup.

Here comes the adjacent sibling combinator to the rescue:

#content h1 + p:first-letter{
font-size : 2em;
color : red;
font-style : italic;
}

And this is how it would look:

Without the + sign then no design changes would be made as p is not a straight descendent of h1.

More practical examples of uses for the adjacent sibling can be found here: Fine Use for the Adjacent Sibling (“+”) Selector, The Adjacent-Sibling Selector and In Between the Lines: The adjacent sibling selector technique.

E > F / Child

The child selector is probably the most complicated of all four to understand. It involves having to climb up and down the DOM tree and probably even falling off now and again as you become lost!

Lets take a look at inheritance. Whenever you place HTML onto a page it is always the child of another page element.

Take a look at this simple makup.

<body>

<div id=”wrapper”>
</div>

</body>

The wrapper is a child of the body. The HTML order starts from the body (as on every HTML page) and in this example then moves on to the #wrapper.

With a line of text added:

<body>

<div id=”wrapper”>
<p>This is a line of text</p>
</div>

</body>

The paragraph is a child of the wrapper while the wrapper is a child of the body but a parent to the paragraph.

Take note of the terminology parent and child. They are used a lot in JavaScript libraries like jQuery as well as in CSS.

However, the paragraph is not a child of the body, it is a descendent.

The daughter is the child of the mother, but if the daughter then has a baby of her own then that baby is a descendent or the original mother, not her child.

Here is an example of child selectors in action:

<div id="example">
 <ul>
  <li>List item 1</li>
 </ul>
 <div>
  <ul>
   <li>List item nested
    <ul>
     <li>Nested list item</li>
    </ul>
   </li>
  </ul>
</div>
</div>

#example > ul > li {
font-weight : bold
}

The only way of changing “list item 1” without adding a class is to use the child selector.

Confused? Well I never promised it would be easy. It is logical but it's an issue that needs explaining from different angles. Read CSS don Eric Meyer's article from 2000, The Child Selector, for a different guide.

To sum up: child selectors allow pin point precision of elements on a page while at the same time minimising markup, although if you have clean, semantic HTML you should only need to use child selectors infrequently.

Perhaps if you regularly use child selectors you may like to post up an example and an explanation of why you feel it is the best solution for that particular purpose.

E F / Descendant

From the hard to the easy. This is actually from CSS1 released in 1996.

Lets take a look at some code:

<body>

<div id=”wrapper”>

<div id=”content”>
<p>This is a line of text in the wrapper</p>
</div>

<div id=”footer”>
<p>This is a line of text in the wrapper</p>
</div>

</div>

</body>

In order to highlight the text content div then you would write:

#content p {
font-style: bold;
}

P is a descendent of #wrapper.

This would highlight the text in the content div too:

#wrapper p{
font-style : bold;
}

But also in the #footer as p is a descendent of #wrapper, #content and #footer.

As a rule, in webdesign you keep your list of descendent selectors as short as possible. It makes it easier to edit later on but it is also more efficient for browser speed; read the Mozilla article Writing Efficient CSS for use in the Mozilla UI. Also don't forget to separate the selectors with white space.

If you are having trouble understanding the concepts discussed here then read the Sitepoint articles called Inheritance and CSS Layout and Formatting.

CSS3 Combinators

E ~ F / General Sibling

If you understand adjacent siblings (E + F) then you'll have no problem comprehending this.

See the following code:

h2 ~ p {
color : #ffffff;
}

This changes the colour of every sibling paragraph under the h2 header.

Again, to understand this CSS correctly you need to have an appreciation of inheritance and the DOM tree which is why I have linked out several times in this post.

It's not just efficient CSS though that requires a working knowledge of these types of CSS properties but also JavaScript libraries such as Dojo and jQuery that use Sizzle. Learning CSS combinators will also help you become a better equipped JavaScript user too – bonus!

CSS functions are values used in conjunction with certain types of properties, as will be explained.

CSS 2.1 functions

url()

The url() is used with either the background, list-style-image or border-image properties. They enable the CSS coder to bring an image into the page for either list or background purposes. You may well have been using this without referring to it as a function.

An example:

#wrapper {
background : url(images/photo-one.jpg);
}

The path in url() can be either absolute or relative and is case sensitive.

Counter()

As you are aware it is possible to have two different sort of HTML lists: ordered (ol) and unordered (ul).

For instance, the following CSS code will produce an ordered numbered list:

<ol>
    <li>List item one</li>
    <li>List item two</li>
    <li>List item three</li>
</ol>

However, it may be desirable to create a numbered list on block or inline level elements such as headers or paragraphs.

This has particular relevance to academically presented work which requires a very tight structure but one that is easy to navigate and read.

Of course, it is possible to just manually add numbers to the text in the HTML, but this method allows the web designer to add numbers dynamically.

In order to use the counter function you must use the following three properties: counter-reset, counter-increment and content.

Here is the code for number number every single paragraph on a page:

body {
	counter-reset: paras 0;
}

p:before {
	counter-increment: paras 1;
	content: "New Paragraph: " counter(paras, decimal) ": ";
}

To explain the above code, counter-reset always comes first. It is given a name, in this case paras with the subsequent number stipulating that the first occurrence is the number one.

Counter-increment calls the previously named counter-reset and again declares a starting number.

Lastly, in the content property is placed the counter() function. The first variable is the name of the counter-reset being called, the second is the numbering system and which corresponds exactly with the options for list-style-type.

Surely though there can't be an easier CSS syntax for an incremental increase? This feature is common in all programming and development languages with its use in PHP being merely the addition of two plus signs to a variable: $variable++

There are two detailed articles on the counter() function published on the web. Louis Lazaris has written a very comprehensive blog post, CSS Counters: counter-increment and Friends, while David Storey at Opera has written Automatic numbering with CSS Counters.

attr()

There is a commonly used jQuery function called attr(), and, like its jQuery namesake, the CSS function refers to a HTML attribute.

Take a look at the code for this link:

<a href="www.suburban-glory.com" title="This is the title attribute for this link"> Nullam varius convallis accumsan</a>. 

The above has two attributes, the href and the title.

If you are unsure what a HTML attribute is then read the W3Schools guide: http://www.w3schools.com/html/html_attributes.asp

Attr() in CSS is a means of content generation and can only be used with the content property in conjunction with the :before and :after pseudo-elements. (Functions, pseudo-elements and the content property – ouch, who said CSS was easy?!)

As the fundamental idea of CSS was to separate presentation and content it may seem a little strange that there is some deliberate muddling between the two, but attr() does have a few useful purposes.

Used with the print media declaration, like below, it allows the full URL to be revealed when a page is printed.

@media print{
       a:after{content:" (" attr(href) ") "}
}

This would create the following:

As the above testifies this is useful CSS code as it allows your visitor to take note of full link details when they print off a page (rather than just “click here”).

In the same fashion, they can also be used with HTML accessibility aids such as abbr and acronyms. W3C accessibility guidelines recommend the use of these HTML tags when using abbreviations or acronyms in the text. As an example, UN is an abbreviation of United Nations while an acronym, although being similar, can also be used for informal purposes – ASAP is an acronym of as soon as possible.

Take a look at the following use of abbr:

 <p>The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.</p>

On the screen the title is not immediately visible – it is there as an aid for screen readers.

By using the print media query it is possible to print out the full title and not just the abbreviation:

@media print{
       abbr:after{
content:" (" attr(title) ") ";
}

Note the concatenation in the string to allow the addition of brackets.

One other possible use is by allowing the URL to be revealed when the hovering over the link.

a:hover:after{
content:" Page: (" attr(href) ") ";
}

Hover over any link in this blog post as a demonstration.

As with most advanced CSS, Internet Explorer support below version 9 is poor or non-existent so don't expect your adventures in attr() to shine in these legacy browsers.

It is planned that the use of the attr() function will be dramatically expanded in CSS3 by allowing it to be used with other properties other than content.

CSS 3 functions

calc()

Get ready to throw out your calculators because soon CSS will enable you to add maths sums to your stylesheets, but it's more than a simple 1+1 feature as will be explained.

The Webkit developers have been working on implementing calc() in their engine since 2007 but at the time of writing there are still no plans to incorporate it into a release. I have no knowledge of programming in C but I imagine it must be quite a nightmare to create due to its complexity.

calc() is present in IE9 beta but there isn't a full implementation as stipulated by the W3C. Unfortunately they haven't added a browser-specific prefix that other browsers do as a matter of routine for experimental CSS. calc() on Firefox can be accessed with -moz-calc() from version 4 onwards.

calc() is particularly useful when it comes to fluid layouts and which are currently undergoing a revival due to design for mobile, and as Internet Explorer is an irrelevancy on the mobile platform designers will soon be free to use this CSS function without worrying about degradation for the legacy browsers.

Here is typical CSS code for a fixed width HTML form layout

form {
font-size : 1.4em;
border : 1px solid #000;
padding : 5px;
width : 465px;
}
legend {
display : block;
padding-bottom : 9px;
}
label {
width : 200px;
float : left;
display : block;
margin-bottom : 9px;
}
input {
width : 200px;
float : left;
display : block;
margin-bottom : 9px;
}
textarea {
margin-bottom : 9px;
width : 455px;
}
input[type="submit"] {
width : auto;
clear : both;
}

Using calc() as below is how a form could be coded for a fluid layout:

form {
font-size : 1.4em;
border : 1px solid #000;
padding : 5px;
margin : 0 10px;
width: -moz-calc(50% - 20px);
}
legend {
display : block;
padding-bottom : 9px;
}
label {
width : -moz-calc(50% - 10px);
margin-right : 10px;
float : left;
display : block;
margin-bottom : 9px;
}
input {
width : -moz-calc(50% - 10px);
float : left;
display : block;
margin-bottom : 9px;
}
textarea {
margin-bottom : 9px;
width : -moz-calc(100% - 10px);
}
input[type="submit"] {
width : auto;
clear : both;
}

Note the addition of the padding and margin measurements in the functions. Potentially, relative or absolute units such as centimeters, pixels or percentages will be able to used, while -moz-calc() allows for standard mathematical operators +, -, * and /.

Admittedly, the use of CSS3 box-sizing in the above example could also achieve the same results but it only uses calc() at its most basic level.

I can guarantee that you will see a multitude of articles written about this function in the coming years. It will be particularly useful when a number of new CSS3 units such as viewport height and width come into play, and when the use of the attr() function is expanded upon.

François Remy on the W3C mailing list gives some examples of the likely possible uses of calc() once CSS3 matures:

Calculating the width of a 'progress' element dynamically:

#example {
width: calc(100% * (attr(value) - attr(min)) / (attr(max) – attr(min))
}

Ensuring a fixed element will be visible:

#example {
position: fixed;
height: 25px; width: 300px;
top: calc(min(500px, 1vh-25px));
left: calc(min(30px, 1wh-300px));
}

The downside of calc() is that while making the job of the web designers easier it will also make the syntax more complicated. It will be an absolute necessity to create well-commented style sheets so as to make your co-workers life easier as the origins of measurements will not necessarily be obvious.

As long as Pesto (Opera) and Webkit (Chrome and Safari) quickly catch up with Gecko (Firefox) I can see the calc() function being widely used for mobile design by the end of 2011. It could be used for desktop design as well as it is easy to create a fallback for Internet Explorer without using conditional comments.

Keep an eye out on how quickly the main browsers are implementing CSS3 by regularly checking the Comparison of layout engines page on Wikipedia.

max() and min()

Lastly, these functions are part of the CSS3 Values and Units module draft dated August 27, 2010 but it's not clear, at the time of writing, whether they will be incorporated into Firefox 4 or any other browser.

Part Two

Part two of this guide will cover the functions for 2-D and 3-D transforms.

The plugin creates a gentle but aesthetically sharp animation over an image of your choice (but not background image) that plays for a few seconds every time the page is loaded.

A download link is at the bottom of this article.

For an example of the animation see this page here: http://www.little-colour-boxes.suburban-glory.com/

Another example is here: http://www.cleaner-one.suburban-glory.com/

It is easy to set up.

Firstly link to the file in the header as you would any other script:

<script src="pathhere/jquery-littlecolourboxes.js"></script>

Then give the image you want to animate an ID of “image-boxes” like so:

<img src="images/nice_pattern_islamic.gif" width="425" height="425" id="image-boxes">

And in the header call the function as you usually do with jQuery and add the colour of your choice:

<script>
$("image-boxes").colboxes("#fff");
</script>

At the moment the script is divided into 7x7 boxes. The next release will allow control of the number of boxes via a function parameter.

The animation does not work in Internet Explorer 6.

It is released under the GNU General Public License (GPL) Version 2.

We'll set up jQuery page and a an appropriate control system in the next couple of days, but for now you can download it from here.

And when it comes to technology the web is at the centre of much of the latest innovation with the mobile platform being the next great horizon closely followed by internet access via our TV's.

These are all items that have arrived in my Google Reader inbox (subscribed to 70 plus blogs and counting) and which I have marked as worthy of referring to at some later unspecified date; either for personal reasons, or as something worth passing on to a client.

If your thing is CSS3, HTML5, JavaScript, PHP and internet marketing then there'll be something here for you.

This is my first post since July and I have, dear reader, decided to set aside one day per week to enable me to write some quality posts, in particular I want to finish my complete guides to CSS.

So, here we go...

Beginner's Guide To Web Data Analysis: Ten Steps To Love & Success

This is one for the statisticians amongst us but if you want to become serious about SEO then you'll need to be able to take apart the mountain of analytical data that even a modest website can accumulate. Avinash Kaushik gives us ten tips on how to do that in this lengthy article.

Top 10 MySQL Mistakes Made By PHP Developers

The title of this Sitepoint article is self-explanatory but it's a worthy read for all PHP munchers out there.

Accelerate Web Pages Automatically using Google Mod_PageSpeed: Unusual Site Speedup Techniques Part 4 - PHP Classes blog

Google are on a Mission To Speed Up The World Wide Web and they have just released a module for Apache servers to assist us.

Manuel Lemos explains the features of mod_pagespeed stating “Mod_PageSpeed is definitely an awesome idea. I would say that it is kind of magic. It is like having an expert on Web page optimization working for you for free.”

Google Places Updates Quality Guidelines

I saved this one so as to forward the link on to my clients. If you use Google Places for you business website than you MUST read this article as it provides valuable advice about to avoid being rejected or penalised.

All You Need To Know About Link Building (in 60 seconds)

This is another one I saved so as to use with clients: “There's this link building thing blah blah blah I tell you what read Zeke Camusio's article as that summarises the important points”.

50 Insanely Creative Examples of Single Page Websites

One-page websites look set to continue with their popularity and here 1stwebdesigner.com present a number of examples from this particular style stable.

jQuery One Page Navigation Plugin

And here's a jQuery plugin to help you with your one-page thang.

Drupal: Exposed: Peeking behind the curtain at what makes Drupal tick/p>

One for all the Drupal coding kids from Lullabot's Angie Byron

How To Run A Creative Design Process For A Big Project

Nica Lorber gives a fantastically insightful run-down of the Three Chapters design and development methodology. Kudos goes to Nica for this and for giving document examples at the end.

PHP: Password Hashing [Video Tutorial]

A short, easy to follow vid on PHP password hashing from Think Vitamin

Understanding APC

I bookmarked this one as a greater understanding of server technology is on My Things To Do In 2011 list.

How do colors affect purchases?

I love this item – check out the diagram.

Creating Dojo Widgets Programmatically or Declaratively

JavaScript extraordinaire David Walsh kindly gives to us another Dojo tutorial.

Scaffolding a Buildable Dojo Application

Rebecca Murphy gives a detailed guide on how best to use the the Dojo framework without all the unnecessary code that comes with the CDN version. This is one for only the most serious Dojo heads.

40 Awesome Free Fonts for Big Headlines

Lots of font inspiration here

25 Incredibly Useful CSS Snippets for Developers

I bet even the most seasoned CSS coders will find a new snippet or two here.

Kick Ass Kickoff Meetings

A List Apart does it again (and again and again and again). Kevin M. Hoffman details how to get the most out of those initial planning meetings with clients.

How to Avoid 404s and Redirect Old URLs in PHP

This Sitepoint article by Craig Buckler does what it says on the tin

Javascript as an accessibility concern

Debunks the myth that graceful degradation is essential for accessibility.

As with much advanced CSS, pseudo-element take up has been slow amongst web designers because of poor support in Internet Explorer.

However, as IE6 is rapidly becoming extinct that only leaves IE7 to consign to the dustbin of history.

CSS 2.1 pseudo-elements

There are only two pseudo-elements that are understood by all popular browsers including IE from version 5 upwards, and they are :first-letter and :first-line.

Their purpose should be quite obvious but below are two examples of how they work.

p:first-letter {
font-size : 150%;
}

p:first-line {
font-size : 150%;
}

The first code block increases the size of the first letter in the paragraph by 150% while the second increases the first line of the paragraph by 150%. It's definitely worth trying out :first-letter as that can add a nice typographic touch to your design.

The final two CSS 2.1 pseudo-elements are :after and :before.

A vital part of these two is also the :content declaration.

As an example:

p:before {
content : " Text added to the beginning of the paragraph";
}

p:after {
content : " Text added to the end of the paragraph";
}

This can actually add text to a document without using HTML! But you don't have to use it to add text, try adding images with a line such as content: url(“image.gif”).

As with any CSS it really is a good to roll your sleeves up and experiment with it. Use the code above and play around with images, margins and padding – why not add an image of quotation marks on either side of a blockquote?

You'll be surprised just how great it can look in action. They work in every browser apart from Internet Explorer 6 and 7.

CSS 3.0 pseudo-elements

It was decided by the W3C that as of 3.0 pseudo-elements should use the double colon instead of a single one. This is so they can be clearly distinguished from pseudo-classes.

So the difference is:

We all should be using the double colon declaration by now but the problem with this is – yes, you guessed it – Internet Explorer, where support for the double colon version is buggy. So stick with CSS 2.1.

However, CSS 3.0 has brought us five new pseudo-elements:

::selection ::value ::choices ::repeat-item ::repeat-index

Lets examine them all.

::selection

When you drag your cursor across the page in order to then right click and copy, the browser uses its inbuilt style sheet to change the background colour and the colour of the text. This is always a dark background and a light text colour. ::selection allows you to change this, as below:

::-moz-selection{
  background-color: red;
  color: yellow;
}

::selection {
 background-color: red;
  color: yellow;
}

If you use the CSS above then when the user drags their mouse over some text there will be a red background and yellow text in Opera, Safari, Chome and Firefox (but only with the moz prefix)

Is it also possible when using this pseudo-element to change the cursor and outline.

::value / ::choices / ::repeat-item / ::repeat-index

These four are all directly connected to XForms. What are they?! I hear you cry. Xforms are a never-ending W3C project that is supposed to be “an XML application that represents the next generation of forms for the Web”.

There was once going to be an XForms module for XHMTL 2.0 but that version of XTHML has now been retired.

Nevertheless, in October 2009 XForms 1.1 became an official W3C Recommendation so there's still some life in it. For further details read the XForms Wikipedia entry.

As usual, there is a mixture of CSS, HTML5, JavaScript, PHP and SEO.

I hope you find some inspiration here as there are some fantastic articles which any web creative can learn from.

Patience is an SEO Virtue

This is one to show your client when their expectations are one of an immediate return.

dojo.connect: A Powerful Object and Event Listener & Better Pull Quotes with the Dojo Toolkit

David Walsh continues on his Dojo quest. I do mean to write a guide to using the Dojo JavaScript framework – perhaps in the Autumn.

Reducing server resource utilization for busy sites by implementing fast 404s in Drupal

This is a useful tips for fine tuning a busy Drupal site

The CSS white-space Property Explained

Louis Lazaris does a useful job at explaining this little used and little understood feature of CSS

The Ultimate Roundup of Indispensable and Helpful HTML5

HTML5 – what all the cool kids are talking about

How Local Search Works in 2010

There's valuable information here for all this interested in the subject of local SEO, but I really do wish they would provide it in a format which is easy to print off.

How The Mainstream Media Stole Our News Story Without Credit

Written by Danny Sullivan, this is one of the most fascinating stories on the relationship between bloggers and the mainstream media that I've read in a long time.

SEO Site Audits: Getting Started

Lindsay at SEOmoz provides a guide to guerilla SEO.

An Illustrated Guide to the Science of Influence & Persuasion

Rand brings psychology into the SEO equation.

HTML5 Watch

A new websites that gives exposure to HTML5 related articles

Google Font Directory

It's early days yet for the Google Font Directory but I'll be watching to see how it matures.

Responsive Web Design

It's very rare that you an article that is genuinely ground-breaking but Ethan Marcotte achieves that with this item on A List Apart. In essence, he proposes a workable way of designing for smaller mobile resolutions.

Getting started with pdf generation in PHP

Abhin Sharma explains an incredibly easy way of generating PDFs by using the FPDF PHP library.

appendChild vs insertBefore

Steve Souders looks at the most efficient way of including files using JavaScript.

Drop that cron; use Hudson instead

I'm very much in to looking for alternatives to cron so I've bookmarked this one for future reference.

a:link {color:#3344dd}
a:visited {color:#804180}
a:hover {color:#b50010}
a:active {color:#b50010}

The above CSS pseudo-classes should already be familiar to you, but if they aren't here is a brief explanation.

:link is the declaration for the link before the user has clicked on it. :visited is the state of the link after the user has visited the page it points to. :hover is the declaration for a link when the cursor moves over it. :active is the selected link

These are all used for styling links while :focus below is used for fields in forms.

This will give the field a yellow background when the cursor is clicked in the box:

input:focus{
background : #ffff00;
}

:focus is not support in IE6 and IE7 and :active is not supported in IE6 and only partially supported in IE7.

The five remaining CSS 2.1 pseudo-classes are below.

:lang(C)

Similar to the attribute selector, this pseudo-class will allow you to match your CSS in the language specified in the HTML document, like so:

:lang(en) p {
background : #ffffcc;
}

The above will give a yellow background behind all paragraphs that have either xml:lang="en" or lang="en" specified in the page.

:first-child

This is a useful CSS rule and it serves as an introduction to the myriad of CSS 3.0 pseudo-classes.

The only browser it doesn't work in is IE6. Here's how it looks in action and it does what you would expect:

p:first-child {
background : #ffffcc;
}

ul li:first-child {
background : #ffffcc;
}

The first block of code changes the background of the first paragraph while the latter does the same to first list item.

@page :first / @page :left / @page :right

These three are part of a number of CSS rules intended to create beautifully printed pages. They are quite arcane though and little used. For further information read this article here. They are only supported in a few browsers.

CSS 3.0 pseudo-classes

For me, this is where CSS becomes really very powerful and interesting. The key aspect of understanding this code is that it serves as a way of pinpointing certain elements on a page using only CSS and without adding any extra HTML.

I would suggest that this is about as complex as CSS gets at the moment so don't expect to pick it up immediately, let alone become fluent in its use after reading this article.

None of these work in any version of Internet Explorer but they all work in the latest versions of Opera, Chrome, Firefox and Safari. There is though a JavaScript solution to enable limited support in IE which is linked to at the bottom of this post.

:nth-child()

To demonstrate this pseudo-class lets say you have a list with five items. You need to style the third item and the third item only. If this is the case then use :nth-child() as below.

ul li:nth-child(3) {
background : #ffffcc
}

But it's more powerful than just this simple use.

ul li:nth-child(even) {
background : #ffffcc
}

ul li:nth-child(odd) {
background : #ffffcc
}

The above will target all even numbered list items and odd numbered lists respectively. I'm using lists as an example but it could just as easily be paragraphs, table columns or a variety of different purposes.

There's even a more precise use for :nth-child():

ul li:nth-child(3n+2) {
color: yellow;
}

Note the addition of the letter n. This is a number expression an+b and this will target the second and fifth list item and so on in a pattern of 3.

ul li:nth-child(4n+3) {
color: yellow;
}

Above will target the fourth and seventh list item and upwards in a pattern of 4.

Confused? The best way of understanding this is by creating a simple HTML list and playing around with this CSS syntax yourself.

:nth-last-child()

This is exactly the same as :nth-child() but it reverses the order, for instance the code below would target the last list item on a page:

ul li:nth-last-child(1) {
background : #ffffcc;
}

:nth-of-type()

As with :nth-child() this can either be a number, odd or even and a number expression; however, this matches a child of a specific element type while :nth-child() matches any child.

Again, lets give an example:

p img:nth-of-type(1) {
border : 2px solid #ffff00;
}

This will target the first image in any paragraph which :nth-of-type() is particularly useful for.

p img:nth-of-type(1) {
float : right;
}

p img:nth-of-type(2) {
float : left;
}

Above will float the first image in the paragraph to the right and the second image to the left.

The use of nth-of-type() over nth-child() allows more precision in targeting elements which need sometimes demands.

nth-last-of-type()

The same as :nth-of-type expect it selects from the bottom up. Below will give a border to the last image in a paragraph:

p img:nth-of-type(1) {
border : 2px solid #ffff00;
}

:last-child

The reverse of :first-child. Below will highlight the last item in a list:

ul li:last-child {
background : #ffffcc
}

:first-of-type and :last-of-type

What :nth-of-type() is to :nth-child(), so :first-of-type and :last-of-type are to :first-child and :list-child respectively.

:only-child

This targets a single child of its parents. Look at the following code:

#wrapper p:only-child {
background : #ffffcc
}

Above would give a background colour to the paragraph only if there was one paragraph in the wrapper div. It's a struggle to find an example where this would come handy. If you can think of one post it up below!

:only-of-type

Matches the only child element of its type. If you want to create a border around an image in a paragraph if there is only one image then use the following code:

p img:only-of-type {
border: 2px solid #ffffcc;
}

:empty

With this pseudo-class you can target an element with nothing in it. Maybe you are using a CMS and you want to hide a box until there is some user-generated content in which case you could use the code below. However, it's not particularly practical because even white space within the box would prevent it from working.

.box:empty {
display: none;
}

:target

This is a really useful little addition to the CSS library which allows styling when using fragment identifying in the URI.

Www.example.com#extra - #extra is the fragment identifier in this URI.

For a great tutorial on practical uses of :target read Craig Grannell's article Enhance Internal Page Links which appeared in issue #180 of net magazine

:not()

Also known as the negation pseudo-class this targets everything except that declared in the brackets. As an example this CSS will give every paragraph a yellow background except that with a class of highlight:

p:not(.highlight) {
background : #ffffcc;
}

:root

In a HTML document the root is html.

-----------

Now I'm going to show you some advanced CSS for forms which are a key constituent of most web sites.

There are two attributes in HTML that help restrict the users ability to input data into a field. They are disabled and readonly. For instance you may want to add disabled=”disabled” to the submit button until the user fills in all the required details. They are mostly only used in conjunction with JavaScript and CSS 3.0 allows styling of one of these – disabled.

input:disabled {
background : #ffff00;
}

input:enabled {
background : #ffff00;
}

The first example above would allows styling of all fields using the disabled attribute while the latter would affect fields not using it.

:checked

This is a useful little bit of CSS to use. It allows the styling of a form checkbox when it is checked. Below enlarges the box upon user interaction:

input:checked {
width: 20px;
height: 20px;
}

:indeterminate

This matches checkbox elements whose indeterminate DOM attribute is set to true by JavaScript.

:default / :valid / :invalid / :in-range / :out-of-range / :required / :optional / :read-only / :read-write

These are all for use with XForms, details for which read the Wikipedia entry

------------

It depends how you use the above CSS but if used thoughtfully and sensibly then I see no reason why you can't use most of it without worrying about IE users. What it will give users of the more advanced browsers is some extra subtle and pleasing aesthetics that if IE users don't see won't harm their use of your site.

However, as of January 2010, CSS3 pseudo-class selector emulation JavaScript has been released which allows some support in IE versions 5-8. Developer Keith Clark is responsible for this most welcome script and it works with all the main JavaScript libraries including jQuery, MooTools, DOMAssistant, Prototype, YUI and NWMatcher. I strongly recommend that you check out Keith's script.

-----------------

Epping Web Design

If they are that helpful then why isn't their use more widespread, you may ask? Two words: Internet Explorer. Although they have almost 100% support in IE7 they have only patchy support in IE6. However, IE6 has one foot in the grave and anyway, depending on your reason for using them, it's easy enough to use conditional comments to find another solution for IE6 or use the JavaScript linked to at the end of this article.

Use the free tool at css3.info to check for browser support

CSS 2.1 attribute selectors

Firstly, in XHMTL and HTML an attribute is a class, id, style or title. So it would be possible, for instance, to give a paragraph a yellow background that had a class called highlight, with the following code:

p[class] {
background : #ffffcc;
}

p[class=highlight] {
background : #ffffcc;
}

The top code means that by matching the p selector to any class attribute then that paragraph background will be a light yellow, while the second example makes sure that only the class entitled highlight has a different background.

I think this is fairly simple to understand now lets try something a little more complex.

What happens if the title has two or more words and with white space between them such as “highlight this” ?

The previous code won't work so you'll need to use slightly different CSS. Notice the inclusion of the ~ character:

p[title~=highlight] {
background : #ffffcc;
}

Lets look at another example of how this could be used.

You have a link which uses the title attribute with text that reads “This link goes to an important page”. In order to give that link a different background you would use the following code:

a[title~=important] {
background : #ffffcc;
}

So every link in your page with the word important somewhere in the title would be affected.

As this article is a complete guide to attribute selectors I'll cover a little used case, that for targeting particular languages in the page.

p[lang|=en] { 
background : #ffffcc; 
}

This matches the language subcodes specified by the lang attribute which in XHTML is xml:en with the abbreviation changing depending on the language used.

It should be noted that multiple attribute selectors can be used on the same line if you need to pinpoint text.

p[class=highlight] a[title~=important] {
background : #ffffcc;
}

The above CSS would highlight the link with important in the title if it is in the paragraph with the class called highlight.

Okay, the above examples aren't exactly that radical as much of the above could be achieved by simple class selectors, but in CSS 3.0 matters get more interesting.

CSS 3.0 attribute selectors

So if CSS 2.1 hasn't flipped your mind lets move on to the next, more intricate level.

Here's our first code example that gives a special background to all links in the document that point to a PDF:

a[href$='.pdf'] {
background : #ffffcc;
}

The syntax is almost identical to 2.1 but notice the inclusion of the dollar sign which needs to equal the suffix of the file name.

As you can appreciate, changing the pdf to doc or txt would mean that different types documents are affected:

a[href$='.doc] {
background : #00ffff;
}
a[href$='.txt'] {
background : #ff00ff;
}

Changing $ to ^ means changing the end to the beginning while * specifies that it contains the value.

Lets say you wanted to highlight a link in the page that went to a secure https connection then you would use the version below as that is for the beginning of the URL rather than the end.

a[href^='https'] {
background : #ffff00;
}

This would give a background colour to a link that had paypal somewhere in the URL:

a[href*='paypal'] {
background : #ffff00;
}

The methods above are ideal for placing different icons next to different file types.

Read this article on css3.info for further information.

As I noted in the introduction support for this CSS is very poor in IE6 and not quite complete in IE7 (although very good). Some assistance comes from the jQuery plugin SuperSelectors which allows IE support for all CSS 2.1 selectors.

--------------

Colchester web design

Where you there?! Actually, I wasn't having been born in '75. Still, it's nice to hear some of this Mars music again - it still sounds like it's from another planet rather than this one.

This was always about taking drugs to make music to take drugs to.

Who would ever have thought it would be dad's music?! I bet today's dads don't cane it like they did over 20 years ago.

You can download Ben Sims mix here.

Virgo - In A Vision/Vocal mix - Radical Records 1989 Shawn Shegog featuring Barbara Shegog - Love Traxs/Love dub - No Name Records 1988 Satoshi Tomie featuring Arnold Jarvis - And I loved You/Red Zone Dub - FFRR 1990 The Alliance - Thoughts Of You/Techamental Mix - Revenge Records 1989 China + L.I.A.M - Do You Love Me (Say Yes) - Missing records 1987 Steve 'Silk' Hurley - I Don't Know/Dubs From The Dungeon - Silk Trax 2000 Unknown Artist - Hiccup Track - Warehouse Box Tracks Records 2009 Disco D - High Noon - Alleviated Records 1986 Vincent Floyd - I'm So Deep - Dance Mania 1990 Rocky Jones - Choice Of A New Generation/Deep Underground - DJ International 1987 Jamie Principle- Waiting On My Angel/Bob Heckmann Remix - Instrumental Dub Mix - ZYX Records 1985 Phuture - Cocane (Alternative Version Of 'Your Only Friend') - Trax 1996 Unknown Artist - Your Love/Female Vocal Version - Warehouse Box Tracks 2009 Fred Brown - House Wop/Re-Mix - Rockin; House 1987 Ca Sa - 15 minutes - Bocca life 1988 Vienna - Tell Me/Innerspace Remix - Palmares 1991 G Strings presents The Motivation Songs - The Life Beyond This World - G Strings 1990 Robert Owens - Bring Down The Walls - Trax 1986 Joe R. Lewis - Separate Ways/Insane Mix - Target 1988 DJ Rush - Cruising - Dance Mania 1991 Lil Louis - How I Feel - Dance Mania 1987 William S - I'll Never Let You Go/Alternative Instrumental Mix - Trax 1987 William S - I'll Never Let You Go/Original Instrumental Mix - Trax 1987 Steve Poindexter presents Kareem Smith - N B Battle Track - Saber 1991 The Children - Work The Box/Original 4 Track Mix - Underground 1987 DZ's Pump Girls - Pump It Up - Dezzarotic 1986 E.S.P - Let's Move/Thums Up Mix - Underground 1987 House Family - No Control - Underground 1987 Raz - Amour Puetro Riqueno - Underground 1986 DJ Duke - Jefferson - Power Music 1996 Ben Mays - Rated X/Jungle Mix - Westbrook 1990 Mission Control - Outta Limits - Atlantic 1992 N-2-U - Touch It -House Jam 1991 Project 122 - Kiss Me Baby - House 1986 Liz Torres - Music - Jive 1990 Trybe - Psychedelic Shack - Wild Pitch 1988

----------------

Chelmsford Web Design

I first heard a Chrissy Murderbot jungle mix a few years ago and it saw some serious action on my stereo, now somebody has pointed my towards his blog, My Year of Mixtapes, subtitled 'A Mixtape a Week, For One Year, So Help Me Gosh'.

Every week Chrissy throws out a mix from a particular dance genre whether that is techno, ragga, Eurodisco, synth pop or Chicago house.

He's now put up two original happy hardcore mixes from the golden mid-90s era.

Download the first mix from here.

I can guarantee this mix will put a smile on your face :)

Tracklist:

1. Sy Project; Emotions (Quosh Records) 2. Vibes & Wishdokta; Feel Good (Asylum Music ) 3. Higher Level; Visions of Light (Zodiac Records) 4. Naughty Naughty vol. 9; Pride (white) 5. Ravers Choice vol. 1; Feel Real Good (white) 6. The Beatmen; Seventh Way (4 The Floor Recordings) 7. Naughty Naughty vol. 10; Voodoo Ray (white) 8. Spicelab; The Spirit of Fear (Harthouse) 9. Higher Level; Feel The Sky (Zodiac Records) 10. Slipmatt; Hear Me (Awesome Records) 11. Naughty Naughty vol. 5; Stay Here (white) 12. SMD Vol. 2; Side B (white) 13. Higher Level; I Need You Now (Zodiac Records) 14. 4 The Floor vol. 5; Side A (4 The Floor Recordings) 15. DJ Seduction; My Own (Slipmatt Remix) (Impact Records) 16. Naughty Naughty vol. 7; Where Love Lives (white) 17. Bass Selective; Blow Out Jungle VIP (S.O.U.R.) 18. VW001; Sweet Love (white) 19. SMD vol. 3; Vol. 1 Remix (white) 20. S&A; Peaked Up (4 The Floor Recordings) 21. Force & Evoluion; Perfect Dreams (Vibes & Wishdokta Remix) (Knite Force)

---------------

Bishops Stortford Web Design

They cover the weird and wacky world of SEO and the latest news from the CSS3, PHP and JavaScript fronts.

I hope you enjoy these items and find them educational.

30 SEO Problems & the Tools to Solve Them

Rand Fishkin lists a couple of dozen valuable tools that he recommends. No doubt you'll already be using many of these but there's bound to be some new applications that you've never come across before.

Web Spam: The Definitive Guide

SEO is very much about trial and error and along the way you'll bound to make mistakes. David Harry details some spam techniques that you may accidentally have used (and been penalised for!).

CSS3 Transitions – Are We There Yet?

A thorough explanation of CSS transitions from Samuli Hakoniem, but as far as I'm concerned this is what JavaScript is there for!

cssSandpaper – a CSS3 JavaScript Library

Zoltan “Du Lac” Hawryluk introduces his cssSandpaper project to the world. If you are interested in CSS transforms, opacity, box shadows and gradients but are worried about their lack of cross-browser support then try this script out.

Accomplishing Common Tasks Using MooTools, jQuery, and Dojo

A brief side-by-side examination of MooTools, jQuery and Dojo.

15 Time-Saving JavaScript Tools to Speed Up Development

I bookmarked this post because it linked to a couple of resources such as GotAPI and Damnit that are new to me.

Child and Sibling Selectors

Chris Coyier gives a very thorough introduction to these useful CSS features.

Where to Submit Your Web Design and Development News

A mega list of sites to submit your worthy web design related blog posts to.

How Accessible is Your Website? 8 Tools to Analyze Your Website’s Level of Accessibility

You'll bound to find some useful applications here to assist your accessible discipline.

Calculating Color Contrast for Legible Text

[If you are looking for a web designer in east London then please visit web design Hackney ]

Colourlovers mixes PHP, CSS and the W3C

How to Override PHP Configuration Options

A useful article to bookmark if you need to configure your PHP installation on your server.

-----------------------

Dunmow web design

The script has full or partial support when used with the following JavaScript frameworks: jQuery, MooTools, DOMAssistant, Prototype, YUI and NWMatcher.

One important framework left out is Dojo and Keith is working to include this open source project in future releases of ie-css3.js.

As I've been playing around with Dojo for the past week I volunteered to thoroughly test out the lastest pre-release version of ie-css3.js with Dojo version 1.4.1. Below are the results. They are marked as either working, not working or working incorrectly.

Edit: As of April 14 this version of the script is now available for everybody: http://www.keithclark.co.uk/labs/ie-css3/

I usually have about 50 different posts per day sitting in my feed reader and I try to keep abreast of latest developments, which, in this field, really are changing all the time. I brought myself a second-hand copy of the second edition of Designing with Web Standards by Jeffrey Zeldman (he of Happy Cog and A List Apart) the other week, and although it was only published in 2006 I couldn't believe how dated the information was.

How Google’s Algorithm Rules the Web > >

This article from Wired magazine may not necessarily reveal anything new but it does encapsulate much of the sophisticated algorithms that make Google the leader of the search engine pack.

How To Use Color To Enhance Your Designs > >

I'm not sure if Steve Bradley at Vanseodesign has swallowed a book but he's getting all intellectual on our arses. This excellent article is from a series about colour theory.

A Step by Step 15 Minute SEO Audit (A Sample from SEO Secrets) > >

Danny Dover reveals how to give a quick SEO audit on any site at SEOmoz.

Anatomy of a Hands-on SEO Site Audit – Part 1 > >

Alan Bleiweiss' article on the Search Engine Journal should be read in tandem with Dover's item above.

Applying Mathematics To Web Design > >

I loved this in-depth article on Smashing Magazine. When I get a chance I'll play around with the free PSD templates given away for free.

The Golden Grid PSD Template > >

Vladimir Carrer finds a free PSD template on the Google code respositary.

30 Link Builders Discuss Backlink Analysis For Campaign Design – Part 1 > >

Search Engine Land trumps again. There are lots of people who would pay to have the information given away for free in this article.

[If you are looking for a web designer in east London then please visit Hackney web design]

Debug PHP with Firebug and FirePHP > >

A Firefox addon to try out.

62 steps to the definitive link building campaign > >

Mark Nunney divulges more solid link building advice.

-------------

Shenfield web design

Around five or ten years ago businesses wanted to create a website simply because it was the done thing but now many realise that they need to effectively utilise this cyber-real estate.

As an example, just before Christmas I went to visit a prospective client. He was the boss of a company in the manual trades and wasn't computer literate at all. He didn't even have any PC's at work. Nevertheless, with next-to-no knowledge on the subject he knew that what was essential wasn't just to have a website but also to rank well for his industry and regional keywords (he didn't use the phrase keywords).

The outlook of some businesses though are still stuck in a different era.

A regular on Urban75 forums, weltweit, recently made a very acute comment on some attitudes:

“A lot of small businesses know a cousin or a mate who will knock up a site for them almost for free. It does not matter to them that it will actually achieve nothing, they just want to be able to say at the golf club that they have a website, they have hardly any idea what is possible with internet marketing.

“A proportion of people like that make good prospects a year or two down the line when the chairman's sons website has brought them absolutely no business, their site has had no visitors etc ... they divide into two groups, group 1 says the internet is crap, tried it and it did nothing, and group 2 who figure a little more deeply and realise that their existing site was simply pants.”

A cross-section of small businesses

17 individuals responded to the survey with the majority having a turnover of between £50k and £200k. One respondent declared a gross income of over 400k.

The industries were a broad cross-section including the manual trades of plumbing and gas central heating to clothing retail and gardening to computer spare parts and IT

A few were eCommerce cart owners.

Web design expectations

The first question was how they found the web designer who had created their site. Interestingly, over half said they made their site themselves while a smaller group went on recommendations. A couple stated Google or a sales call.

The next question was whether their site lived up to their expectations and then whether they felt their web presence is currently used to its full potential.

Nearly everybody said that they were happy with their initial creation but at the same time almost all respondents confessed that they had varying degrees of ground to gain on the web.

Some comments included:

“We need to invest in marketing, but are unsure how to get the best return on investment, and which marketing tactics work best. Previous attempts, including Adwords, have not proven to a good RO”

“Work is needed at the moment for keywords, adding photo album, adding content, links, also we need to integrate our blog to our site rather than hosted with Wordpress”

“I think it could be better if I had a fuller understanding of SEO, and utilised other marketing”

“Would like to be able to offer online order tracking, re-ordering, ect for my clients, but I don't have the skills to do this and cannot afford thousands for somebody else to do it.”

“The site isn't good enough, the SEO is not good enough and we have spent very little money on marketing it”

How much for web design?

Essex-based web designer Sarah Parmenter has written about the gulf between customers expectations and the financial reality in “Why I can't build a website for £500...”, so to gauge this issue I asked two questions: What would you consider a fair price to have a website made and what would you consider a fair price to have an eCommerce cart made?

It's not possible to work out an average price quoted as they were often given conditionally (“£50 per page”) but responses varied, some quotes being:

“For my needs I wouldn't pay more than £500 but it would be have to be really good as I have made several websites using HTML and it's not really that hard. The only reason I would pay someone is if I just don't have the time or I wanted something really amazing. I would have very high expectations of a professional.”

“No set costs. It ranges for hosting only charges using WP to many thousands using a Flash based dynamically drive site which is cloaked for SEO purposes.”

“Depends on the site. £500 to £2000 – the £2000 would have to be the Rolls Royce of websites!”

“This I suppose would depend entirely on the site, but maybe £100 for the main page, £25-£50 thereafter?”

“For our needs probably around £600-700.”

Ranges for eCommerce carts, when given, were from £1k to £15k.

Asked whether in the coming years they regarded a strong web presence to be more important to their business, less important or about the same three quarters said more and the rest said about the same.

Web terminology

Finally, it's easy for those involved in the online creative industries to forget that what are common industry terms are not necessarily well known elsewhere. I presented a number of web technology terms and asked those filling out the survey whether they fully understood them. The phrases and the percentage of those stating they did are here:

Without doubt, pound-for-pound when compared to other means of marketing and promotion, a web presence – if done correctly – is a good investment. These results testify that many small businesses recognise it's importance and are clearly attuned to much of what it entails. With the help of clear communication from the web designer any gaps in knowledge are not insurmountable.

-------------

Brentwood web design

Every time I read an article and think “That'll come I handy in the future. I'll bookmark it,” I click on the little yellow star to put it to one side.

The list of articles I saved in January is an interesting and varied list and I present them to you below:

Dissecting the Unlicense: Software Freedom in Four Clauses and a Link > >

A fascinating article from Arto Bendiken that promotes a new software license – the Unlicense. This allows code to be donated to the public domain but it has some great ethical clauses at the bottom:

May you do good and not evil May you find forgiveness for yourself and forgive others May you share freely, never taking more than you give.

Introducing morality into licensing seems like a good idea to me.

My Life with Panels, Vol. 1 > >

A Drupal Panels tutorial from Chapter Three's Farsheed Hamidi-Toosi

Form Design with Sliding Labels > >

This is a really impressive jQuery plugin for creating an attractive form effect. Definitely one to use on a forthcoming website. Check out the demo.

Drupal Basics: Insert Module > >

Matthew over at Nonprofits and Web 2.0 introduced to me a Drupal module that I wasn't familiar with before and which allows non-technical users greater control when uploading and placing an image in a node. Very useful.

A Stationary Logo That Changes on Page Scroll with CSS > >

Another CSS effect to use on a future clients' website. Really, really impressive. For a demo see here.

[If you are looking for a web designer in east London then please visit Hackney web design]

Build Links with Better Answers > >

It's very rare that you read an SEO article that provides new and practical link building strategy tips, but Jennifer Van Iderstyne on Search Engine Journal did just that in this item published on |January 12. It details how you can use Wordtracker to provide article ideas.

53 Promotional Websites To Gain Traffic Quick And Easy > >

Dainis at 1st Web Designer does it again. If you are writing a web design blog then this list will provide you invaluable link building ideas. Check it out.

65 Resources for Nature-Inspired Design

This one does what it says on the tin. I've already created nature-based websites but this list is worth saving in case I need to find some green grass and blue sky inspiration in the future.

Tips for Coding and Designing Usable Web Forms > >

One from Noupe. More ideas on all-important form presentation.

The purpose of the box-shadow property is self-explanatory – it creates a shadow around an element.

I've used box-shadow quite a few times in the past and it is an impressive addition to the CSS stable. I've tried to find an alternative for IE - using either filters or JavaScript - but I haven't found one that works properly yet.

Here's an example of the code:

-webkit-box-shadow:5px 5px 5px #999999; 
-moz-box-shadow: 5px 5px 5px #999999; 
box-shadow:5px 5px 5px #999999; 

The three measurements in order are the horizontal offset, the vertical offset and the blur radius.

Here's how this would look in Firefox, Chrome or Safari – the only browsers to read this CSS3 feature so far:

It produces an attractive grey border.

Lets change the code:

-webkit-box-shadow:0 0 15px #ffffff; 
-moz-box-shadow: 0 0 15px #ffffff; 
box-shadow:0 0 15px #ffffff; 

Reducing the horizontal and vertical offset to zero, increasing the blur radius and changing the shadow colour to white so that there is a more striking contrast between the foreground and background creates this:

As you can see it creates quite a pleasant glow and it degrades gracefully as the browsers that don't recognise box-shadow merely see a border.

I first tried Flash when it was in its Macromedia Version 3 incarnation - it had so many bugs that it should have been the subject of a David Attenborough wildlife documentary. By version 4 though somebody had managed to master it as is evidenced by the website for Primal Scream's XTRMNTR album in 2000. A colliding montage of sound and shapes, it was the first site that opened up the possibility to me of a multi-dimensional web without an unhealthy reliance on JavaScript, animated GIFs or Java Applets. 10 years on and the site still looks great.

Fast forward to 2010 and Adobe Flash has held on to its position as the primary animation web authoring tool but it remains a niche choice with many companies afraid to fully embrace a technology that isn't search engine friendly. However, it retains a loyal following in the creative industries and I would need more than two hands to count the number of exceptional Flash-based sites that land in my feed aggregator in-tray everyday from design showcase sites.

Combining Flash with Drupal has obvious benefits. Flash can bring sophisticated, interactive animation to the table while Drupal is great for a modular backend structure.

If you don't have any experience in ActionScript, and if you plan to follow the exercises in Flash with Drupal then intermediate knowledge of the language would be an advantage, failing that previous programming experience is essential.

Likewise, in itself, the book is not an introduction to Drupal. If you are a Flash developer who is interested in using Drupal than this book runs through a basic installation guide. However, you will still need to seek out other sources to fully understand Drupal administration and other aspects of the CMS.

Flash with Drupal is mainly concerned with Flash widgets, audio and video embedding and in particular using the power of JavaScript to connect widgets within a Drupal template rather than creating one massive, unwieldy Flash site.

The author himself is responsible for a number of Drupal / Flash integration modules Dash Media Player and FlashVideo. The book also covers the use of Services, Views, Content Contstruction Kit, Flash Node, ImageField, Audio and number of other modules which provide valuable assistance in the web developers tasks.

Of particular interest in this Packt Publications release is what Travis Tidwell calls a hybrid approach by binding the two technologies together with JavaScript, and his tutorial for creating a Flash user login box is one to bookmark for future reference.

Admittedly, HTML5 promises to encroach on the traditional Flash territory of embedded video and audio but we are some way from multi-browser HTML5 compatibility at the moment. Flash will remain the technology of choice for these purposes for the foreseeable future and those that wish to harness the power of Drupal with that of Adobe Flash can use this book as a source of ideas and a reference point.

It's not a book for novices but it's certainly a starting point for those seeking a different approach to Drupal and at 356 pages long it is clear that much thought and work has gone into its creation.

--------------------------

Flash with Drupal is released by Packt Publishing and at the time of writing retails at £23.79 on amazon.co.uk and $35.39 on amazon.com.

--------------------------

Note: Packt Publishing sent me a free book to review. There are no affiliate links in the article.

---------------------------

Grays Web Design

No, not every hotel website has the high usability and design standards of Premier Inn.

Tucked away in the corner of German website munich-info.de you will find the page of accidentally kitschy Hotel Hubertus.

Witness the completely out of focus and barely legible pictures, read the badly spelt information, wonder if the real hotel is as grotty as its online brochure.

Hotel Hubertus I salute you for being so completely useless that you've created something quite original.

-----------------

Shadwell web design

It's clear as well border-image will be play an increasingly important part in web design as the CSS2.1 border style property is limited to only nine different values, namely; dotted, dashed, solid, double, groove, ridge, inset, outset and inherit. Border-image allows these options to expand indefinitely.

The border-image property was first introduced into the WebKit rendering engine as far back as 2005 and first appeared in Firefox through the nightly builds in the summer of 2008. Opera will be using border-image from version 10.5 onwards. No current version of Internet Explorer supports this code yet (see workaround at the bottom) but there are mumblings of CSS3 support for IE9 whenever that is released.

It can look quite a complex syntax at first and there are some important differences between border-image and all other CSS, as will be explained.

In this tutorial all examples of the property in action are images so that they can be viewed in any browser.

The important thing to remember with using images for a border is that it is not a case of just repeating the same small image but of slicing it into 9 different parts.

This may sound confusing so lets give you an example.

Here's the code for example one:

p {
border-image: url("images/border-example-image-fill.gif") 0% stretch;
-moz-border-image: url("images/border-example-image-fill.gif") 0% stretch;
-webkit-border-image: url("images/border-example-image.gif") 0% stretch;
}

Here's the image that we'll use for the border:

And here's how the border will look when wrapped around a paragraph.

It's pretty obvious what has happened here. The image has been stretched across the entire size of the element.

So it is possible to use border-image this way but what you really need to do – and something that other border-image tutorials elsewhere don't make clear – is declare a border width.

Lets give a second example of border-width and we'll use a different image this time.

Here's the code:

p {
width: 300px;
border-image: url('images/border-example-two-image.gif') 27 27 27 27 stretch stretch;
-moz-border-image: url('images/border-example-two-image.gif') 27 27 27 27stretch stretch;
-webkit-border-image: url('images/border-example-two-image.gif') 27 27 27 27 stretch stretch;
border: 10px solid black;
}

Notice in the code above I have now specified that the border will be 10px wide. I have also declared values to make sure that the border is solid and black. This is important as it means that IE will show the 10px solid black border, while the other browsers will show a 10px image border.

For the record note how I am using the webkit prefix for Chrome and Safari browsers and the moz prefix for Firefox. I have also used border-image straight as that is the correct CSS3 code and will be recognised by Opera 10.5 and upwards.

And here is the background image:

The dimensions for this image are 64px square with nine circles 30px wide and a 1px gap around every circle. As I stated before, border-image slices the picture nine different ways.

And here is how the border-image looks:

Lets change the code a little:

p {
width: 300px;
border-image: url('images/border-example-two-image.gif') 23 23 23 23 round round;
-moz-border-image: url('images/border-example-two-image.gif') 23 23 23 23 round round;
-webkit-border-image: url('images/border-example-two-image.gif') 23 23 23 23 round round;
border: 10px solid black;
}

Notice how I now specify round instead of stretch. Look how this affects the border:

Lets take a detailed look at a line of code:

border-image: url('images/border-example-two-image.gif') 23 23 23 23 round round;

It should be stated this is the shorthand version. Look at the measurement 23 repeated four times. The is the same as the border shorthand property so each digit goes in clockwise fashion from top to right to bottom to left. So changing the third digit to 23 23 27 23 would change the bottom border only. The first instance of round dictates the style the top and bottom border and second changes the right and left border – so this a little different to other CSS.

The actual measurement is in pixels although you can use percentages. It's best to experiment with this as the effect of the measurement changes for different images.

Now I previously stated that you need to specify a border width in order for border-image to work as intended. However, not declaring a border width does produce some interesting design results.

Lets use the same background image as before but this time leave off a border width and change the measurements.

The code reads:

p {
width: 300px;
border-image: url('images/border-example-two-image.gif') 21 25 21 25 round stretch;
-moz-border-image: url('images/border-example-two-image.gif') 21 25 21 25 round stretch;
-webkit-border-image: url('images/border-example-two-image.gif') 21 25 21 25 round stretch;
}

And the border looks as so:

As you can see using the same image but changing the code slightly produces a radically different type of border.

Just recently while creating a Drupal theme I used this same technique. I used a small 4px, two colour, transparent image and here is how it looks:

It created a very visually pleasing semi-transparent background style that has a lovely 3D twist in it.

So go armed, oh online creative, into design battle with border-image!

Google already had a well-established relationship for the Mozilla Foundation so it was a complete surprise when they released their first version of Chrome for public use in 2008. It was talking point not just within the tech community but also within the mainstream media.

Jump through to 2010 and today Google are currently carrying out a high profile advertising campaign on billboards and in newspapers.

I presume that Chrome is an integral part of their forthcoming netbook OS and there can be little doubt that this is a stepping stone to releasing a Google PC OS in the future. If everyday web users like and use their browser then they are going to be more susceptible to switching to their OS when it comes onto the market.

Chrome is released under a BSD licence which means that the code can be incorporated not just into other Open Source projects but even into proprietary software.

I have though real concerns about how Google has used Open Source for this project as I'm not sure that they have done so out of principle or as a business decision. Yes, it's great that a large IT company releases their code for all to use but at the same time they are a corporation that makes billions of dollars profit every year – they have the means to pay those that contribute to their software projects an appropriate commercial rate.

In December 2009 Google announced that its extension repositary was now open to Beta users on the Windows platform. As of date there are 1,525 free extensions available for Chrome users to install and use.

For us Firefox users, the Firebug addon and the Web Developer toolbar are essential aids in our everyday design and development work. It would be impressive feat for Chrome to equal these comprehensive offerings let alone beat them.

As a signing off note though I would recommend, as I mentioned before, using the inbuilt Chrome inspector as it's very comprehensive and useful. That in itself is worth playing around with but whether it will make you ditch Safari or Firefox for Chrome is a different matter.

Have you found a Chrome extension that you would recommend to others? If so, fill in the comment form below.

-----------------

Chafford One Hundred Web Design

If any old folk ever attempt to lecture you on how fun and exciting the internet was in the 1990s then I give you permission to poke them in their eye with your iPhone.

It was so crap that comedians Adam and Joe parodied the experience in this sketch to be found on YouTube

Fast forward to the present day and BT have recently announced that by 2012 over 30% of us Brits will have access to download speeds of over 40Mbps – an increase of a factor of 731 on 2000s 56 kbit/s maximum speed.

With such a jump in data transfer speeds and a noticeable increase in software quality and hardware power, the web today is a far more attractive place to spend time on. At least your friends and family can call you when you are logged-on, with the old dial-up they would only hear an engaged tone if they called while you were surfing (ha! that's an old term) as one form of communication would cancel out the other by blocking the line.

The Millennium Bug that didn't happen

When we did eventually wake up on January 1, 2000 after celebrating like it was 1999 on the previous night, we found that our entire information technology infrastructure hadn't collapsed at the stroke of midnight as supposedly would happen after the Millennium Bug kicked in.

Unless you were blind, death and dumb you would not have escaped alarmist media conjecture throughout 1999 that the Millennium Bug – also known as Y2K – would send our electronic systems crashing due to a common software date bug.

In fact, other than Percy's Office Supplies PC on Nuneaton High Street crashing absolutely nothing happened. The strangest fall out from this was the complete lack of debate about the Y2K flop afterwards and nobody asked why millions of government pounds had been spent combating a non-threat.

Dreamweaver 3 and ronsangels.com

In design software terms, matters were quite limited.

It may be hard to believe but once upon a time web designers were eagerly awaiting for Dreamweaver 3 to be released. Reviewer Karl Hodge from Net magazine wrote:

“From an early look at Dreamweaver 3, Macromedia seems set to blow away the competition once again with an application that builds Dreamweaver's famed ease of use, power and flexibility”.

Elsewhere what we now call link bait was then called a scam. Ronsangels.com announced that it was planning to start selling the ovum of choice from a selection of stunning models by auction. Starting at offers of $9,000, punters could bid on the egg of their choice. But ronsangels.com was only interested in signing up users to its porno service and no eggs were for sale.

Over 5,000 articles and 500 television stations worldwide were to feature Ron's Angels leading to sales of $39.2 million over the next five years.

[If you are looking for a web designer in east London then please visit Stratford web design]

The Dot Com bubble: boom and bust

But the real big story of 2000 was the dot com bubble and implosion as new technology stirred the selfish money genes of both the venture capitalists and the old moneyed interests.

Here's how things looked at the beginning of the year, as the news reader says in her introduction: “The new economy – is it a boom without an end?”. Ha ha!

YouTube: CNN Special Report on dot.com Bubble 1999

And here's how things looked after the boom:

YouTube: Dot-Com Bust Lessons Learned from Silicon Valley

At the heart of the bubble was the disastrous $164 billion merger between Time Warner and AOL. It was supposed to be a corporate coming together that showed how the entertainment industry could straddle the old and new economies, and it appeared to make commercial sense as after all AOL had 27m subscribers in the US and had announced profits of $1.2bn in the previous year, while Time Warner had the second largest US cable system and owned the Warner Bros film studio amongst much else.

One of reasons for the merges flop was that AOL Time Warner were dependent on dial-up subscribers in a time when internet users would increasingly flock to broadband.

Richard Morgan, journalist on The Deal magazine, reflected 10 years later:

“Back then a lot of people were drinking the Kool-Aid about the "new economy." When they announced that they were going to create the deal of the century, they put the value at $166 billion. Today, the market cap of Time Warner, which contains AOL, is only $28 billion. So that's a loss that's greater than 80 percent.”

The then CEO of Time Warner, Jerry Levin, was to confess:

“I presided over the worst deal of the century. I guess it's time to say I'm really very sorry”.

The figures that litter the history of the dot com boom are eye watering. Freeserver was an arm of electrical goods retailer Dixons, and appeared to be a roaring success. Launched in 1999, by the summer of 2000 they had 2 million subscribers, dwarfing BT's mere 400,000. After being floated on the stock market they were valued at £9 billion, more than Dixons and even many British banks. But Freeserver never made any profits in 2000 and by the year's end their share price had fallen below the £1.50 issue price.

As the Freeserver story illustrates, it wasn't just Silicon Valley that went dot com crazy. In July 2000 UK company boo.com folded after spending £90 million in its first year. Boo.com was a fashion retailer and failed because according to net magazine:

“Web sites miss their predicated launch dates by a few days or weeks, but Boo launched six months after its initial blaze of media attention. When it arrived, the site was unworkable, with an over-ambitious design that strained users' attention.”

Ray Taylor, MD of on-line media agency eyeeconomy was equally aghast:

“The major reason for the failure of [boo.com] is clearly, emphatically, and without doubt the lack of cost control. This seems to me obvious, given the rate at which is burnt it's investors' money”.

Many technology-based share prices shot to the outer financial reaches and then nose dive down again: InfoSpace was $1,305 per share in March 2000, but only $22 a share one year later; eToys reached a high of $88 per share and then went bankrupt in February 2001; theGlobe.com shrank from $97 per share to less than 10 cents.

And during the dot com boom when anybody questioned the viability of the technology expansion responders muttered about a “new paradigm” that meant that profits were optional and no longer the bottom line, and when it was all over commentators and economists were queuing up to tell the world that they had personally prophesied its downfall despite their previous tacit or open approval.

Some companies from Web 1.0 survived - Amazon, eBay and Lastminute.com being a few notable exceptions; but most crashed and burned.

You ever want to watch a great documentary on the dot com fiasco then I recommend startup.com. Here's a trailer:

YouTube: startup.com trailer

------------

Forest Gate Web Design

I count 11 separate spelling mistakes in their introduction, apparently: “Through incsive action, experience and our proximity to the UK's fatest court we achieve this with speed and efficiency. ”

In fact the spelling is so bad that I wonder if it is some sort of screwed up link bait attempt!

If by the time you read this article they have bothered to spend five minutes proof reading their text then here is their offending attempt at communication for you all:

Connell Associates is a specialist commercial litgation pratce. Our objective is qute simply to deliver results. Through incsive action, experience and our proximity to the UK's fatest court we achieve this with speed and efficiency.

In commercal litgation cases the financial impact on a client’s business is our priority. Whether involved in a straghtforward debt recovery procedure or a lengthy contract dispute we understand that the results need to be cost effective.

All pees at Connell Associates are relative to the aim, earing any case from a minor to a six-figure dipute will remain worthwhile pursuing. Our regional position guarantees you highly competitive rates whilst maintaining the services you would expect from a top legal.

We operate assertively to ensure the best results are obtained for our client. Focusing on a particular area of litgation gives us a competitve edge.

We invite you to take and commercial astuteness within the commercial litgation sector.

------------

Beckton web design

But it is an aspect that companies ignore at their peril as server problems lead directly to a loss of income.

Doug Kaye, one of the very few authoritative authors on this subject writes:

"Unlike other decisions one has to make in the course of getting and keeping a business online, the selection of a hosting or management vendor is very high risk. In particular, the cost of making the wrong decision can be great. For many new-economy businesses, their web sites are their business. If the site is down, so are they”

Kaye recommends the following means for accurately working out loses due to a server outrage. His formula reads:

Revenue loss = annual revenues x length of outrage (in hours) x 0.014 x multiplier.

The 0.014 is an hourly percentage of the total number of hours in the year, 8,769. The multiplier is a figure between 0.028% and 0.14% and is dependent on the level of loss of customer goodwill and cascading losses.

For instance, if a company with $1m annual revenues has a website downtime of 3 hours in the run up to Christmas, then the significant knock-on effects could cost them $2,940.

Every hosting company will give you an uptime figure, which is the business is called "The Nines" due to the calculation system.

A company may declare a 98% uptime but this means 3 hours and 22 minutes without a functioning website per week. The server needs to ideally have an uptime of 99.9% or more and this must be written as a guarantee in the contract. This will mean that the most the website is down in the course of a whole week is 10 minutes and 5 seconds.

For your information, "The Nines" and actual time figures are:

Shared, virtual and dedicated hosting

When it comes to the different categories of web hosting there are three types: shared, virtual and dedicated.

In order to highlight the benefits of any of these three services lets create a hypothetical company.

You are a relatively small business that has just relaunched its online ecommerce site. You have 3000 live registered customers and a further 3000 that are not registered. The site is visited 200 times per hour.

As you are spending money on a redesign you are also investing in site promotion and expect a steady increase in customers over the next couple of years.

There is the possibility that you can own your own hardware and have complete control over the hosting yourself, but the expertise needed for this endeavour means that the vast majority of online businesses are happy to go down the outsourcing route.

Shared servers: This is how most of the worlds websites are hosted. They are cheap because dozens if not hundreds of websites share the same harddrive resources. They are best suited for small websites as they tend to only be able to offer limited resources such as disk space, bandwidth and memory. The advantages of a shared server is the cost, while the disadvantages are that you are competing with hundreds of other websites for limited resources. If you have a traffic spike it is likely that your website will grind to a halt.

Virtual servers: Virtual server packages come from partitioned servers. Because they share the same hardware, maintenance costs can be distributed across a number of customers. Due to multiple clients running on a single server there are RAM and disk space limitations but they are typically far more generous then that found on a shared server. Because virtual servers have their own independent operating system this allows the user root access which is indispensable when it comes to fine tuning a website for speed and reliability.

Dedicated servers: This allows you to rent a whole server and not be obliged to share it with anybody else. This is reflected in the cost of most commercial packages. Due to unshared resources this option is best for the large sites that have considerable numbers of visitors.

Managed servers: Your website will be using technology that needs performance and security updates on a regular basis. Your can hire virtual and dedicated server space and take on the responsibility of this yourself but you will need to dedicate trained members of staff to undertake these technical responsibilities. The alternative is to pay for managed servers.

Leading hosting company modVPS promises:

"ModVPS will monitor your VPS around the clock 24 hours a day 365 days a year. If we find any service including http (Apache), mySQL, DNS, SMTP, IMAP, POP failed we'll login to your VPS and restart it as necessary and if required reboot your VPS to get it back up and running without you having to worry about your VPS being offline at 3am.”

Can you provide staff that will keep look after the site 24 hours a day 365 days a year? If the answer is no then a managed server is your only option.

Another aspect of hosting is that it is probably best looking to rent server space in the dominion where your business is conducted. Author and frontend engineer Steve Souders states that large geographic distances between the server and the user could lead to a 20% difference in page load times, which is why the largest companies distribute their website using a Content Delivery Network.

Recent statistics have revealed that 52% of online shoppers stated that quick page loading is important to their site loyalty and over half of all shoppers expecting a page load time of 2 seconds or less - a drop from 8 seconds in 1999.

Admittedly, server reliability is only one factor in page load times but it is still an aspect that needs attention.

Getting back to our ecommerce example. For this moderately sized online business, it would seem that the best option here is a managed virtual server. It gives the flexibility for growth and bandwidth spikes and is extremely cost effective.

When you sign up with a web hosting company they will present to you their Service Level Agreement (SLA). Read this thoroughly and ask the company questions about any or all of it.

It should be noted that when it comes to getting the most out of a SLA it may be worth using the services of one of the many internet law firms in existence. However, the following questions should help you in judging the worth of a web hosting package:

• It should be clear on their website but make sure you clarify what their disk space, monthly transfer and guaranteed memory (RAM) is.
• Do they have 24 hour, 7 days a week support?
• How long will it take them to respond to technical support requests? A few minutes, ideal; a few hours, okay for shared but not for dedicated; a day or more, go elsewhere.
• Is it easy to upgrade the RAM or harddrive size if the site outgrows its current virtual server?
• What is the guaranteed uptime level of the server?

-----------------

Manor Park Web Design

In the autumn of 2009 the open source community was stunned when it was announced that the White House was to relaunch on a Drupal platform.

Clearly, it was a milestone not just for Drupal but for all those working on the countless open source projects.

But Drupal hasn't just conquered the internet real estate space of 1600 Pennsylvania Avenue, but also many major business and governmental hubs across the world. Below are just 10 of these.

Queen Rania of Jordon

University-educated and former banker Queen Rania has taken an active interest in many philanthropic causes including inter-faith dialogue, UNICEF campaigns and environmentalism.

In a Middle Eastern society where women have traditionally played secondary roles to men, Queen Rania's articulate and out-spoken support for social and political causes remains an unusual example.

For some years the Queen of Jordan has recognised the importance of using the internet as a communication tool and has a lively presence on YouTube, 115,688 fans on Facebook and 1,169,359 Twitter followers.

It seems only natural that somebody so concerned with cutting edge technology should chose Drupal. This website is a good example of integrating Flash with the CMS.

The Grammy Awards

The Grammy's are America's main award music award programme that was started in 1958 by the National Academy of Recording Arts and Sciences.

Former winners from the last 50 years read as a Who's Who of post-war mainstream US chart success.

There can be little doubt, as the former lead singer of Tool once said that “the Grammys are nothing more than some gigantic promotional machine for the music industry... It's the music business celebrating itself. That's basically what it's all about.” But still, what they lack in street cred they make up in corporate big bucks.

Grammy.com was the work of leading commercial Drupal specialists Lullabot.

Albert II, King of the Belgian

The Belgium Royal Family is an oddity in Europe in that their reign only commenced relatively recently, in 1831 in fact. In the previous year the southern provinces had bloodily succeeded from the United Kingdom of the Netherlands, creating an independent Kingdom of Belgium. Deciding on a constitutional monarchical system of government the leaders of the new Belgium state asked the House of Saxe-Coburg and Gotha to rule.

This site is quite conservative in design but I guess this is a reflection of the subject matter.

There are rumours that the Belgium government are working on switching over all their sites to Drupal.

Enjoy the site but whatever you do don't mention the Congo! They're a little sensitive on that subject ;)

Monty Python

Old comedians never die, they just fade away; and to prove that point here is the official Monty Python website waving the flag of surrealism 40 years after the series begun.

If are looking for a CMS that allows full participation by registered members then without doubt Drupal is the software solution for you, as the tagline “community plumbing” suggests it really is the ideal CMS for a service with a large, active membership base. To see how this plays in action have a flick through the Monty Python site.

The BBC

The British Broadcasting Corporation is arguably the biggest and most respected media outlet in the world, and they have used Drupal on a number of sites including their music magazine, their history magazine and their science and technology site for Focus magazine.

These provide good examples of how an online presence built on Drupal can blend seamlessly with the parent print version.

Eric Clapton

Back in the 60s Eric was the don of the guitar, only (a reluctant) second to Jimi Hendrix. Graffitti across London read: “Clapton is God”.

Starting in Sixties R'n'B bands The Yardbirds and John Mayall & the Bluesbreakers, he peaked with the power trio Cream who achieved adulation and commercial success on both sides of the Atlantic. Even today, songs such a Badge and White Room have enough ferocity and velocity to kick most contemporary music into touch.

But even God needs a website and ericclapton.com offers both an historic run down of his long career as well as current tour dates for old slowhand.

British government

This clean attractive design is built on a Drupal site. From here you should be able to find about further details on most sections of the British section including benefits, education, transport and pensions.

In keeping with a government site direct.gov.uk is focused on full accessibility for all.

Robbie Williams

Admittedly, there's a lot, lot more in my life that takes a priority for me than listening to the cheeky chappie musical banter of Robbie Williams, ex member of leading 90s boy band Take That; but respect goes to the crooner for using Drupal. (Note to Robbie: hire yourself a new web designer).

Stanford University

Established in 1891 by United States Senator and former California governor Leland Stanford, this university is today one of the leading further education institutions in the world.

With an estimated endowment of over $12billion, it's hardly like they are short of a bob or two to pay for a proprietary CMS, but these boffins love Drupal.

They love it so much that they have used it for 67 different sites and counting including the Stanford Humanities Centre, The Program in Human Biology and Standford Tech Commons.

Go boffin kids, go!

Mattel

If you have ever owned a Cabbage Patch Kid, a Barbie doll or a Matchbox car then you will be familiar with the multinational toy manufacturer Mattel.

In September 2009 they relaunched their online presence with the help of Drupal, and what an explosion of juvenile fun mattel.com is!

-------------

Barking Web Design

"Historically, we haven't had to use it in our search rankings, but a lot of people within Google think that the web should be fast. It should be a good experience, and so it's sort of fair to say that if you're a fast site, maybe you should get a little bit of a bonus. If you really have an awfully slow site, then maybe users don't want that as much."
(Source: href="http://www.webpronews.com/topnews/2009/11/13/google-page-speed-may-be-a-ranking-factor-in-2010" )

And to bring this point into focus for all webmasters a new feature called site performance was launched as part of their Webmaster Tools section and which lists average download times for registered websites.

Not only is Google making this an issue that requires attention but usability data tells how response times expectations have increased over the years. According to a report by Forrester Research two seconds is now users' threshold page acceptable download level. Amazingly, even speed differences of 100 milliseconds can adversely affect user behaviour (Source: http://code.google.com/speed/files/delayexp.pdf)

Leading frontend engineer Steve Souders states that at least 80% of page load times are down to non-HTML factors. As a case study, I decided to redesign a site I own – rss001.com – to bring a number of speed-enhancing factors into play. RSS 001 is a feed directory that I launched in the spring. As it is just about to reach 10,000 unique visitors per month and with the potential for traffic to dramatically increase in 2010, I thought it was a good site to optimise for speed.

Below are some points to take into consideration.

Keep your CSS basic and tight

I'm sure you are all writing good quality CSS code by which I mean that you are only using one id selector in the property list. You can use as many classes as you want in the property list but the less the better. Try to limit the number of descendent selectors.

The jury is out on how much of a difference shorthand properties make to load times but I always use them as a matter or routine anyway as they make for a more cleaner CSS code page. I use shorthand properties as I work and then go back and refector the code after I have finished the design.

Other CSS aspects to take note of:

• If you are writing for speed it is best to avoid the use of the :hover pseudo-selector on non-anchor elements. This reputedly cases problems in IE 7 and 8 when a strict doctype is used.
• Use CSS sprites as this will reduce the number of server requests. For further information read the guide at w3schools.com: http://www.w3schools.com/css/css_image_sprites.asp
• Avoid using the * selector to reset the stylesheet as this can add up to two seconds on the download time. (If this was Wikipedia I would provide you reference for that, but it's not, so I won't. There is an article out there somewhere that goes into detail on this subject – Google it).
• It has been stated that using some advanced CSS selectors has an impact on performance. I'd like to see some hard facts backing this argument up but I avoided using attribute and child selectors as well as CSS 3 structural pseudo-classes when redesigning rss001.com.

Minify JavaScript and CSS

Removing unnecessary white space and comments creates a leaner CSS or JavaScript file. You can do this manually but it would be a very tedious and error-prone endeavour. If you are using a reputable CMS then the core files or a third-party module will give you the ability to do this automatically. If you are handcoding then take a look at the YUI Compressor and the Minify PHP-based project at Google code.

Keep CSS and JavaScript in one file

No, not in the same file – but one file each for CSS and JavaScript. This reduces the number of server requests down to a minimum.

Put JavaScript at the bottom

Placing JavaScript in the head will cause a page download delay in some browsers as all of the other content underneath has to wait until the JavaScript file has been fully downloaded. Placing the JavaScript at the bottom of the page prevents this from happening. This is fine as long as you are not using JavaScript to assist or create your page layout. (Note: DO NOT put CSS at the bottom. Keep that in your head)

Use Gzip compression

Using Gzip can dramatically shrink the size of a file by as much as two thirds. Apache uses mod_gzip and mod_deflate modules for versions 1.3 and 2.x respectively. Again, any decent CMS will give the administrator easy access to turning on Gzip, but if you are handcoding then read the Apache online documentation: http://httpd.apache.org/docs/2.0/mod/mod_deflate.html

Add an expires header

This tells the users' browser how long to keep images and files in the browser cache. Yahoo recommends to set this for a month. Explaining expires header is an article in itself so please read your CMS documentation or read the Yahoo or Google guide to browser caching.

Ration your third-party modules

CMSs like Wordpress and Drupal have thousands of third-party modules listed. There is a temptation to act like a child given free run in a sweetshop and to download and use as many as possible. Look at all the modules you have installed and ask yourself the question, “Do I really need this? Does this provide something vital to either the user or the administrator experience?” I can can guarantee that you'll find at least one module where the answer will be no. Removing the module would not only remove unnecessary dynamic code that could include database calls, but may also remove unnecessary JavaScript or CSS that comes with the module.

Cut down the size of you images.

When it comes to saving images for the web when using Photoshop think carefully what purpose the image is going to serve on the website. Few images require the close attention of users and are only there for decoration; if this is the case then keep the quality of the file down to a minimum.

Try to stick to 8 bit PNGs as 24 and 32 bit PNGs can really be quite hefty in size. If you do use 32 big PNGs for its alpha transparency then you'll run into the usual IE6 problems. Avoid using the AlphaImageLoader filter to fix the problem as it will really cause the download to lag in IE6. As an alternative take a look at the jQuery PNG Fix.

Once you have you finished images then run them through Yahoo's free service, Smush It. This Yahoo application is wonderful. It utilises a number of command line tools such as Pngcrush and Gifsiclef and allows the user to shrink images without loss of quality. Smush It is now integrated with the YSlow Firebug plugin.

So after its redesign and optimisation how does RSS 001 perform? Using the Web Page Analyzer it is possible to quantify the page download time as 20.41 seconds on a 56K connection. Okay, so the vast majority of internet users in the Western world use broadband but it is a useful comparison metric. RSS 001 is positioned third in the following speed league:

Craiglist: 4.77 seconds;
Google: 4.82 seconds;
RSS 001 : 20.41 seconds;
24 ways: 39.35 seconds;
Net magazine: 60.49 seconds;
Smashing Magazine: 107.67 seconds
The Guardian: 146.25 seconds;
SEOmoz: 156.76 seconds;
BBC News: 164.15 seconds;

-------------

Dagenham Web Design

The Phantom Menace was the Star Wars story brought back to life by George Lucas in 1999.

It had a lukewarm reception by the critics who no doubt held out hope for a return to form with any subsequent film episodes.

If the like the aggressive review style of Charlie Brooker, then you'll like this.

Below is the first part of seven:

The ePrivacy Directive will lead to legal clarification and restraints on the use of cookies and compulsory disclosure of privacy breaches.

Currently in Britain the 1998 Data Protection Act is enforced by the Information Commissioner's Office which keeps a central list of organisations and companies. From the ICO website: “The Data Protection Act 1998 (DPA) requires every data controller who is processing personal information” except:

“organisations that process personal data only for: - staff administration (including payroll); - advertising, marketing and public relations (in connection with their own business activity); and - accounts and records;” (source: http://www.ico.gov.uk/upload/documents/library/data_protection/detailed_specialist_guides/notification_handbook_final.pdf).

However, even if you not on the Information Commissioner's register you still have to respect the law, which according to their guide means you must:

• Have legitimate reasons for collecting and using the personal data
• Not use data in ways that have unjustified adverse effects on the individuals concerned
• Be open and honest about how you intend to use the data, and give individuals appropriate privacy notices when collecting their personal data
• Handle people's personal data only in ways they would reasonably expect
• Make sure you do not do anything unlawful with the data

(Source: http://www.ico.gov.uk/upload/documents/library/data_protection/practical_application/the_guide_to_data_protection.pdf).

It is recommended that the exact wording of a privacy policy is created by a professional legal body so as it complies with current legislation.

Other than EU and UK legislation, there is also the privacy initiative called the Platform for Privacy Preferences (P3P) Project which was created by the World Wide Web Consortium (W3C), the web governing body.

For a privacy policy to satisfy P3P requirements the following points need to be addressed:

• Who is collecting data?
• What data is collected?
• For what purposes will data be used?
• Is there an ability to opt-in or opt-out of some data uses?
• Who are the data recipients (anyone beyond the data collector)?
• To what information does the data collector provide access?
• What is the data retention policy?
• How will disputes about the policy be resolved?
• Where is the human readable privacy policy?

(Source: http://www.p3ptoolbox.org/guide/section2.shtml)

The idea behind P3P is that two different versions of the privacy policy are published – one for users to read and the other machine-readable. Software such as browsers can then read the policy and inform the user if a website doesn't have a suitable policy in place.

Although created in 2002, P3P failed to be as widely adopted as hoped for by the W3C although it is used by large multinational companies such as IBM and Adobe.

It is certain now that P3P will be surpassed by new privacy protection innovation, with the European Union funded Prime Life Project being a forerunner (Source: http://www.out-law.com/page-10435); but being associated with P3P does give extra assurance to your customers that you take such matters seriously.

It is important that any privacy policy is clearly linked to and not obscured from the users' attention.

• Make sure that your privacy policy is easy to find and read and it placed on a HTML page.
• Use the P3P Policy Editor to create a machine-readable XML version in compliance with the P3P initiative.

--------------

Homerton web design

I found the mix linked to below on a Russian site. It's worth a download and listen.

1. Dj Luck & Mc Neat – A Little Bit Of Luck (Red Rose) 2. Blazin’ Squad – Standard Flow (Dnd Remix Ft. Elephant Man) (Weighty Plates Vol.3) 3. Zed Bias – Neighbourhood (Zed Bias Y2k Vocal Mix) (Locked On) 4. Roots Manuva – Dreamy Days (Mj Cole Vocal Mix) (Big Dada) 5. Sticky Feat. Tubby T – Ganjaman (Social Circles) 6. M Dubs Ft. Lady Saw – Bump N Grind (Twice As Nice Lp) 7. Suburban Lick – Here Comes A Lick (Locked On) 8. Ms Dynamite Vs Jahiem – Just In Boo! (Urban Gorilla) 9. Artful Dodger Ft. Richie Dan & Sevi G – Ruff Neck Sound (London Republic) 10 Genius Cru – Boom Selection (Incentive) 11. Maxwell D – Serious (4 Liberty) 12. The Surgery (Sticky) – More Weed (Social Circles) 13. Blowfelt Feat. Slarta John – Back Up, Back Up (Wordplay) 14. Ms Dynamite + Menta – Ramp (Bigger Beats) 15. Zed Bias Ft. Juiceman & Simba – Jigga Up (Ring The Alarm) 16. Freestylers – Ruffneck (Trick Or Treat Mix) (Freskanova) 17. Basement Jaxx Ft. Slarta John – Jump N Shout (Stanton Warriors Mix) (XL) 18. Freestylers – Get Down Massive (Trick Or Treat Mix) (Freskanova) 19. Outkast Vs Jucxi – Ms Jackson (White) 20. Pd Syndicate (Mj Cole, Rodney P, Courtney Melody) – Ruff Like Me (Artful Dodger Mix) (London Republic) 21. Emma Bunton Vs K-Warren – What I Am (Ft. Richie Dan) (White)

You can download load the mix here

------------

Dalston Kingsland web design

For those that don't know, 302 is the HTTP status code for a temporary redirect and 301 is a permanent redirect. It's not a good idea to confuse the two as you'll be sending the wrong message to the search engines.

Anyway, eventually I found the only way of doing this was using the RedirectMatch directive. Just cut and paste the two lines and place it in you .htaccess file. Change the example.com domain name to anything you want.

RewriteEngine on
RedirectMatch 302 / http://www.example.com/downtime.html

They were seen in November in Munich, Barcelona in October, in Rio de Janeiro in July and is supposedly due to be seen at the Business Design Centre in London on Friday 26th February 2010.

If you spot an elePHPant near you then take a snap and post up on the net at the elePHPant Flickr group.

Brazil:

Belgium:

Germany:

USA:

Psychedelic elePHPant:

They're breeding!

Now they are marching!

-------------

Newham Web Design

I've created five Drupal themes now that have been uploaded and distributed under a GPL license at drupal.org but before my first creation I looked at the most popular Wordpress templates to see if I could gather any ideas about the reasons for their popularity. It soon became clear that those that were using these Wordpress themes were doing so with little or no changes to their original layout and design.

A Drupal theme that was going to have a wide a potential user base as possible was going to need to style all aspects of the core installation. This meant space for all three types of navigation menu, the different search boxes and the slogan, the mission and breadcrumbs amongst much else. It also meant styling for all the core modules: polls, contact form, forum, user profiles and search.

It's quite a challenge as Drupal is far more versatile than the Wordpress blogging platform.

Not only was styling all the Drupal core important but I needed to include the possibility of most types of HTML elements been used including, but not limited to all six headers, ordered and unordered lists, blockquotes and quotes.

I don't necessarily consider advanced theming a necessity when creating a quality Drupal theme. There are thousands of third party modules catering for all aspects of Drupal functionality and these are easy to plug in and go. For instance, the standard date and time format is quite ugly. It's a fairy easy process of using PHP to change this in the template.php file. But what exactly is the best format is a subjective opinion and the Submitted By module can change this node information easily enough.

One aspect though of advanced theming that is essential in any build is the use of the body classes. This allows the designer to create a layout that doesn't look stupid or falls apart if only some of the available module regions are used. For further information on this read Dana Pellerin's article Drupal Theming: Regions and $Body_Classes.

I chose as well to keep a $left region in every theme. The standard Drupal install starts with three modules in the left region and in no other. I wanted to make the theme much as plug-in-and-go as possible.

Having a $left region in every theme does cramp the designers room to manoeuvre somewhat and using these guidelines will not create radically different layouts. It is the same with Wordpress templates. There's no doubt that their feel is often very alike and as Drupal is similarly module-based it will be the same here too.

Finding images to use in a Drupal theme is quite easy as they can be found at Stock.XCHNG or Multimedia-stock.

In the case of Stock.XCHNG it states in their license agreement that if you intent to use a featured picture in a template then you need to contact the photographer for permission, but once I've explained that it will be used on a free Drupal theme and distributed under a GPL license they have always been more than happy to say yes.

Other common aspects of a Drupal theme fit in with general usability rules: the search box above the fold, the breadcrumbs at the top of the page and a logo or header that links back to the home page.

On every theme too I have made sure that the headings are semantically ordered and do not repeat more than once on any one page.

For fonts I kept to the much trusted and loved Helvetica for headlines and Verdana for the main body of text. I not really a great fan of using @font-face although it does increasingly seeming to be coming into fashion and although I use image replacement techniques for headlines and menus all the time (see above as an example) it is not possible to do so for a theme.

It's worth keeping the main column at least 468px wide as that leaves the user room to place a banner advert if they so do desire.

You may not be enthusiastic about creating a theme for Drupal.org but if you are professional web designer then there is no better way of familiarising yourself with the Drupal code and its idiosyncrasies (hello compose tips!). Although I stated that advanced theming with heavy PHP is not necessary, if you do want to become more familiar with Drupal as a framework than just a CMS, then creating a free theme provides a practical means of learning the backend code.

Of the Drupal themes that I've created I've particularly focused on playing around with the advanced CSS that I wouldn't ordinarily have used on a clients site, and I've also gradually increased my knowledge of the scripting code, creating new PHP theming chunks as I've gone on.

To finish off I'll state that the most important reason to create a theme for drupal.org is because Drupal is an open source project and relies on everybody providing their time for free, and this includes designers as much as developers.

-----------

Stratford Web Design

If you chose a virtual or dedicated host then a quicker response would be expected. You are not just paying for the use of more advanced hardware, but also the support that comes with this extra financial levy; particularly if you are paying for a managed environment.

Reading the online reviews of many shared hosting companies it is clear that many of the negative comments come from a misunderstanding of what a shared hosting company will offer.

Likewise, no matter what hosting package you go for don't expect the company to sort out your web design and development mistakes. They are not there to either advise or take action on the configuration of your script or site.

However, I do demand a certain level of customer care.

Just recently a client emailed to me details of a hosting package. It was this company that had sold him the domain and he wanted to know whether their list of specifications would be suitable for his needs.

As it was only a small four page PHP-based site (with out a database) their deal looked fine.

I uploaded the clients finished site via FTP on a Sunday and straight away I noticed that the mod_rewrite rules in the .httaccess file were not working. I spend about two hours playing with the code before I decided that the problem lay with the host.

So I asked the client to email them and ask them to turn mod_rewrite on. They emailed back stating that it was on and working.

I then took over and emailed them on his behalf:

I'm having trouble with mod_rewrite and I can't pinpoint why. Has it anything to do with the way the server is configured?

As you can see, it works perfectly here: http://www.cartrader.suburban-glory.com/ but not here: http://www.cartradermail.com/

The code is a regular syntax in the .htaccess file, ie

RewriteEngine On

RewriteRule ^style.css$ style.php [NC,L]
RewriteRule ^index.html$ index.php [NC,L]

They replied a day later (note a trend here):

I can advise that it is not configured in any different manner so there is no reason the site should appear differently to the one that does work for you.

I then emailed and asked them whether I had placed the files in the right folder. The next day they responded that I had.

Still stumped as to what problem was I asked them how I could manually change the file permissions as there was no control panel and I couldn't do this via my FTP client.

Eventually they responded that it was not possible to change the file permissions (!) but having to wait a day for a response is ridiculous and by now I was really getting fed up with this slow customer care. It was clear that an email conversation that should have taken just a couple of hours was going to take all week.

I snapped and send them a directly worded email informing them that as the client had paid for a managed server then they need to fulfil their duties and get this sorted.

After 48 hours and they still had not responded I emailed the client and recommended that he claim a refund and look elsewhere.

The website was up and running as soon as my time allowed and can be seen here.

What are the lessons that we can learn from this?

1. Don't recommend to a client a hosting package that doesn't come with a control panel or even, as I was to find out, the most rudimentary provisions such as the ability to change file permissions.
2. Hosting companies: Don't have a policy of only responded to emails once a day. This is the 21st century. With that kind of customer care policy I may as well write a letter to you and put it in the post.
3. Don't use Easily (easily.co.uk) web hosting company. They are frigging useless.

--------------

Limehouse web design

A new set of shorts videos from the Muppet creators has been launched on our favourite streaming site, You Tube.

Below are a selection of these vids. Will this lead to a new generation being converted? Lets hope so.

The Muppets: Bohemian Rhapsody

The Muppets: Meh

The Muppets: Skateboarding Dog Gets Served!

Muppet Labs Experiment 2Q975: Carve-O-Matic

Over the past year a number of large corporations have switched over to Drupal but this surely trumps any other announcement. Joomla, suck on this!

The Washington Post broke the news stating:

A programming overhaul of the White House's Web site has set the tech world abuzz. For low-techies, it's a snooze - you won't notice a thing...

"We want to improve the tools used by thousands of people who come to WhiteHouse.gov to engage with White House officials, and each other, in meaningful ways," Phillips said.

It's also a nod to Obama's pledge to make government more open and transparent. Aides joked that it doesn't get more transparent than showing the world a code that their Web site is based on.

So if the security of Drupal is okay for the US government you can bet your bottom dollar it will be for your site too. What a great selling point to my clients: “I'm going to build your website using Drupal CMS. It is the same Content Management System as used for the website of the White House in the United States”.

-----------------

Upminster web design

A constant moan in the Drupal community is the apparent lack of quality themes for users to download from drupal.org; especially in comparison to Wordpress or Joomla. One explanation for this is that the complexity of the CVS system discourages designers from contributing work to the central Drupal pool.

Here mortendk lets rip in his article CVS Haiku:

If we think that Drupal should look as diverse and fantastic as it is on the inside then we need to do something else that we are doing today. It should be clear to everyone that were not getting asskicking wonderful designed themes into the Drupal repository as long as the designer/themer/frontender have to get an developer involved to hold his hand to get him safely over the road - so big bad cvs dont hurt him.

In a similar vein, the following comments were added to Designing for the wrong target audience and Why Drupal.org lacks good themes:

If you’re new to version control, chances are nobody is going to recommend you learn CVS for your first project. Instead, they’re going to recommend an open source VCS that most companies, organizations, and projects use today…SVN and if SVN doesn’t suit your needs…Bazaar or Git. When my workplace began looking at VCS there was not one person, group, or consultant, or contractor that recommended VCS to us.

As for theming, I think the biggest obstacles right now are the Great Wall of CVS and the Issue Queue. Drupal’s contribution methods include many technologies that are utterly foreign to the design community.

I've uploaded three different themes now and it originally took about a day to satisfactorily learn how to use the CVS system in order to do this. Frustrating sure, but far from impossible.

I was mainly dependent on the guide called Using Windows to contribute themes to CVS which itself was taken from Themebot.

Although the article was crucial in helping me upload a Drupal theme I felt that there were a couple of points that needed clarifying and would have made the process simpler.

So below is a (slight) rewrite of the above item with added screenshots. These are instructions for version 6 but for version 5 or 7 all you need to do is change the appropriate digit up one or down one.

Firstly, what you need to do is apply for CVS with Drupal.org and then download and install TortoiseCVS here.

Presuming that you have successfully done both of these then closely follow the guide below. The screenshots are from a Drupal theme called Winter Wonderland which I recently uploaded.

In preparation for adding your code to CVS, you should also add a CVS $Id$ tag to all of the files in your project. The Id tag should be at or near the top of each file, and for PHP, CSS, JS, and .info files, it needs to be embedded in a comment. When you check the file into CVS, the CVS system will expand the tag to add information about the check-in and version. Here are the lines to add:

• // $Id$
  inside the <?php ?> in a PHP file, or in a JavaScript file
• /* $Id$ */
  in a CSS file
• ; $Id$
  in a .info file
• $Id
  in a plain text file

The first step is to right click on the theme folder and then click on the TortoiseCVS option Make New Module.

From here the following interface will spring up:

In the CVSROOT you need to add the following line of code: :pserver:username@cvs.drupal.org:/cvs/drupal-contrib

As you can see from the screenshot I've added my username in the appropriate space.

Make sure the server and the repository folder are the same as in the image above and then add the path to your theme, which will be contributions/themes/your-theme

After you have clicked okay you should see the following message informing you that your actions have been successful

Now you need to check that a folder has been created in the Drupal CVS depositary by going to here: http://cvs.drupal.org/viewvc.py/drupal/contributions/themes/

As you can see below my folder for Winter Wonderland has been created.

If you can't see your folder then you have done something wrong. You either need to retrace your steps and start the process again or seek help (see the bottom of this article for places your can go for help).

Now go back to your theme folder on your harddrive and right click again. This time click on the TortoiseCVS option Branch. When the box opens input DRUPAL-6--1 and then click okay.

You should get the following confirmation of your successful action:

Now right click on your theme folder again and this time click on the tag option. Type in DRUPAL-6--1-0 and then click okay.

Again, the message "Success, CVS operation completed" should appear:

Now right click on the theme folder and add the contents

You'll see a list of checkboxes like below which list the entire contents of your theme. Click okay.

This is the point where all your individual files are uploaded. However, it is unlikely that they would have all have been transferred so look in the folder and check. If there is a white tick on an orange background then they would have been successfully uploaded to drupal.org but - as below - if there is a white cross on a orange background further action is required. Right click and then click again on CVS Update.

To check that everything is okay go to the drupal theme depository. My Winter Wonderland files look as so:

Now you have your entire theme successfully uploaded to the Drupal.org theme section you now need to make the public page.

The screenshots for this stage were too big to be displayed here but what you need to do is the following

1. In your Drupal account go to create content -> create project
2. For project type click on the theme checkbox.
3. For full project name write whatever it is called but for short project name write the name of the uploaded theme folder which in my case was winter_wonderland with an underscore. It is essential that this is exactly the same.
4. In the full description give users as much detail as possible about your theme. Please read Best Practices at drupal.org before you do so
5. In project resources -> CVS tree put the URL of your upload theme which for Winter Wonderland is http://cvs.drupal.org/viewvc.py/drupal/contributions/themes/winter_wonderland/
6. In CVS integration -> CVS directory put the path of the theme directory which in this case is /themes/winter_wonderland/
7. It's also well worth uploading a screenshot for interested users to look at.

Now you have your published page and an uploaded theme you need to create your first release

Click on add release at the bottom of the published theme page

You'll come to the following interface. Enter the information as below:

It may take up to 12 hours for the nightly build to happen but then you'll have your first dev release!

To finish off, we'll look at how to upload new or altered files and then subsequently create a new release afterwards.

Lets say you've added some CSS to your main style file. Right click on the CSS file on your harddrive and then click on CVS update.

Now right click on your main theme folder and then click on tag. Lets say that you want this release to be called beta 1 so in the box you type DRUPAL-6--1-0-BETA1 and click okay.

Now go to the public theme page and underneath click on add new release. You should be presented with only one option. Click okay and the beta 1 release will be available for public download in around five minutes.

If you are having problems with this process where can you find help?

The place where you are most likely to get the quickest and most helpful response isn't the Drupal forums but the IRC channel at #drupal-themes.

Over at Four Kitchens, Todd Ross Nienkerk has kindly put himself forward to personally help themers who are having CVS trouble. His email and other contact details can be found at the bottom of this article

I don't claim to be an expert on CVS but if you have any questions then I will do anything I can to help you out.

---------------

This guide is released under the GNU Free Documentation License

---------------

Hornchurch Web Design

---------------

Susan Moskwa on Google’s webmaster forums said:

We’ve been telling people for a long time that they shouldn’t focus on Pagerank so much; many site owners seem to think it’s the most important metric for them to track, which is simply not true. We removed it because we felt it was silly to tell people not to think about it, but then to show them the data, implying that they should look at it.

I have opinionated on discussion forums in the past that Google would never close down their PageRank to webmasters and the SEO community as all that would happen is that another company would create their own metric system to replace it with. Well if they have shut it down then that company is SEOmoz and their metric system is mozRank.

Introduced in 2008, mozRank is based upon their now quite significant accumulation of Linkscape data. Like PageRank, mozRank is based on a score out of ten (although the latter goes to decimal places). Page mozRank is primarily based upon the number of incoming links, while domain mozRank also factors in domain diversity.

Admittedly, PageRank has become less and less important to SEO over the last five years but it does provide some crude measurements to the worth of a site / page. As an example, I run a feed aggregation site and I stipulate in the submission rules that sites with a homepage of less than a PageRank of 2 will not be included in the index. This is to insure that only sites that have been around for six months or more are accepted. I have found that crappy Made for Adsense websites are normally less than a PageRank of 2.

In the coming months it looks like I'll be switching over from PageRank to mozRank for my site.

Essex Web Design

This rings true for all freelancers out there...

I've used the code for over a year now without any problems although some people reported bugs which lead to Roel at Krimson to produce his own version.

There is also now the iTweak Upload module created by Ilya Ivanchenko which is a more advanced take on the above.

One of the accusations laid against Drupal is that in order to get the most out of the CMS then an advanced knowledge of PHP is necessary. This charge though could be laid at a whole number of CMS' in existence not just Drupal.

However, all the solutions above are for a design and presentation problem and I so I tried to find a CSS answer.

Firstly, this is how the block of code looked on a theme I was working on before I styled it:

As you can see it's very, very dull.

The first thing I did was add some CSS to lay it out better.

#attachments {
font-size : 1.2em;
}
#attachments th {
font : 1.2em Helvetica, Helvetica Neue, Arial, sans-serif;
}
#attachments tbody {
border : 5px groove #00E8AE;
background : #00E8AE;
}
#attachments td {
padding: 5px 2px 5px 2px;
}
#attachments .odd {
border-bottom : 1px solid black;
background : white;
padding-bottom : 5px;
}
#attachments .even {
border-bottom : 1px solid black;
}

So now it looks like this:

That's much better as I'm sure you'll agree.

The PHP solutions added special little icons for the different attachments. This is a commonly used technique across the net but designers mostly use JavaScript. As I like to avoid that spawn of the devil where ever possible I picked CSS attribute selectors instead.

As an example, the following code will add a PDF icon to the end of a URL if that link points to a PDF document:

#attachments a[href$='.pdf''] {
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/application-pdf.png") no-repeat right;
}

The $= specifies that we want to match links whose hrefs end with ".pdf".

The second stage was to get a pen and a piece of paper and list all the major file extensions. It would be silly to list all of them as there are hundreds, if not thousands of these types of suffixes but below are the major ones that came to mind:

PDF:

pdf

HTML:

.html, .htm

Audio:

.aac, .cda, .fla, .flac, .m3u, .mp4, .m4a, .m4p, .mp3, .ogg, .wma, .wmv

Text:

.text, .txt, .info

Video:

.avi, .m4v, .mov, .mp4, .mpg,

Document:

.doc, .dotm, .dotx, .sxw

Presentation:

.potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx

Spreadsheet:

.ods, .scx, .xls, xlsm, xlsx

Script:

.asp, .aspx, .css, .inc, .ini, .js, .json, .lib, .php, .php3, .rc,

Compressed:

.7z, .7zip, .ace, .arj, .gz, .rar, .zix

Graphics:

.bmp, .eps, .gif, .ico, .iff, .png, .jpeg, .jpg, .svg,

Now it was a question of putting it all together to create a CSS block for the attachments div:

/* PDF file extension 

.pdf

*/

#attachments a[href$='.pdf''] {
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/application-pdf.png") no-repeat right;
}

/* Audio file extensions 

.aac, .cda, .fla, .flac, .m3u, .mp4, .m4a, .m4p, .mp3, .ogg, .wma, .wmv

*/

#attachments a[href$='.aac'], #attachments a[href$='.cda'], #attachments a[href$='.fla'], #attachments a[href$='.flac'], #attachments a[href$='.m3u'], #attachments a[href$='.mp4'], #attachments a[href$='.m4a'], #attachments a[href$='.m4p'], #attachments a[href$='.mp3'], #attachments a[href$='.ogg'], #attachments a[href$='.wma'], #attachments a[href$='.wmv']{
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/audio-x.png") no-repeat right;
}

/* HTML file extensions 

.htm, .html

*/

#attachments a[href$='.html'], #attachments a[href$='.htm'] {
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/text-html.png") no-repeat right;
}

/* Text file extensions 

.text, .txt, .info

*/

#attachments a[href$='.txt'], #attachments a[href$='.text'], #attachments a[href$='.info'] {
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/text-plain.png") no-repeat right;
}

/* Video file extensions 

.avi, .m4v, .mov, .mp4, .mpg, 

*/

#attachments a[href$='.avi'], #attachments a[href$='.m4v'], #attachments a[href$='.mov'], #attachments a[href$='.mp4'], #attachments a[href$='.mpg'] {
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/video-x-generic.png") no-repeat right;
}

/* Document file extensions

.doc, .dotm, .dotx, .sxw

*/

#attachments a[href$='.doc'], #attachments a[href$='.dotm'], #attachments a[href$='.dotx'], #attachments a[href$='.sxw'] {
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/x-office-document.png") no-repeat right;
}

/* Presentation file extensions

.potx, .pps, .ppsm, .ppsx, .ppt, .pptm, .pptx

*/

#attachments a[href$='.potx'], #attachments a[href$='.pps'], #attachments a[href$='.ppsx'], #attachments a[href$='.ppt'], #attachments a[href$='.pptm'], #attachments a[href$='.pptx'] {
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/x-office-presentation.png") no-repeat right;
}


/* Spreadsheet file extensions

.ods, .scx, .xls, .xlsm, .xlsx

*/

#attachments a[href$='.ods'], #attachments a[href$='.scx'], #attachments a[href$='.xls'], #attachments a[href$='.xlsm'], #attachments a[href$='.xlsx'] {
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/text-x-script.png") no-repeat right;
}

/* Script file extensions

.asp, .aspx, .css, .inc, .ini, .js, .json, .lib, .php, .php3, .rc, 

*/

#attachments a[href$='.asp'], #attachments a[href$='.aspx'], #attachments a[href$='.css'], #attachments a[href$='.ini'], #attachments a[href$='.inc'],
#attachments a[href$='.js'], #attachments a[href$='.json'], #attachments a[href$='.lib'], #attachments a[href$='.php'], #attachments a[href$='.php3'] , #attachments a[href$='.rc']{
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/x-office-spreadsheet.png") no-repeat right;
}

/* Compressed file extensions

.7z, .7zip, .ace, .arj, .gz, .rar, .zix, .zip

*/

#attachments a[href$='.7z'], #attachments a[href$='.7zip'], #attachments a[href$='.ace'], #attachments a[href$='.arj'], #attachments a[href$='.gz'], #attachments a[href$='.zix'], #attachments a[href$='.zip'] {
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/text-x-generic.png") no-repeat right;
}

/* Graphics file extensions

.bmp, .eps, .gif, .ico, .iff, .png, .jpeg, .jpg, .svg, 

*/

#attachments a[href$='.bmp'], #attachments a[href$='.esp'], #attachments a[href$='.gif'], #attachments a[href$='.iff'], #attachments a[href$='.png'], #attachments a[href$='.jpeg'], #attachments a[href$='.jpg'], #attachments a[href$='.svg'] {
  padding-right: 25px;
  background: url("/sites/all/themes/sports/icon-images/image-x-generic.png") no-repeat right;
}

So it now looks like this:

The only downside to this CSS is that it doesn't work in Internet Explorer 6, however it does look neat and tidy:

The above CSS code will work in all installations of Drupal.

You can download the 16 x 16 icons used in this tutorial from here

It's an extremely well-informed piece that offers a myriad of tips including cross-browser compatibility details and usability and accessible markup advice.

However, one aspect of Cameron's article that I didn't like was the use of an ordered list. I really hate to add extra code unless it is absolutely necessary and, lets face it, styling a form by using a list is just a hack.

How to style a HTML form with CSS and no extra markup is amazingly simple really. This is what the code looks like:

input,
select{
display : block;
}
label {
float : left;
width : 200px;
}

And that's it. It produces a form like in the image below with no extra HTML coding such as an ordered lists or line breaks. It works across all browsers including Internet Explorer.

The above code is just the foundation for form design and reading Cameron Adams article will give you lots more ideas about how to get it right.

You move into a new flat in a different city. You spend a great deal of time picking the right flat to move into. After all, you don't want to move into a bad neighbourhood. The outside of the flat is pretty and attractive, while you spend a great deal of time both finding and arranging the furniture to your taste.

So the big day comes and your new flat is ready. You sit back and admire your new home. Then you realise that as you've moved to a new city you haven't got any friends nearby. So you sit in and wait for new friends to knock on the door. Nobody comes. You sit in night after night waiting for new friends to come and knock on the door. But nobody comes.

Starting a blog is like this. No matter how long you take on picking the right niche, working on the design and writing the articles, just launching it and expecting web users to come won't work. Even established and internationally known digital companies such as Google and Facebook can't just launch a product or service and expect an audience to find it, keep coming back and refer it to their friends.

But yet, this "build it and they will come" attitude is prevalent and is often the downfall of many new bloggers, applications and campaign microsites. There's much work involved in promoting a blog or other type of website in finding the right target audience, making sure it meets their needs and having them return.

It me be the case that you are already a celebrity in your own right and so your name is already a brand, but unfortunately for the rest of us there are no shortcuts and the work takes countless hours of often repetitious, dull tasks.

Going back to the analogy of moving into a new flat in a new city, I would say that it takes a good three years to build up a new network of friends. The same too with building a blog as it takes a good three years to go from nowhere to creating a wide ranging network of visitors and fellow bloggers.

And as for making money, forget it. You may end up being one of the 0.001% of bloggers who can actually earn a living out of their writing, but otherwise don't expect an equal return for all the hours that you are going to put into making it a success.

Unfortunately, there seems to be prevailing attitude amongst many new bloggers that in this "gold rush" all it takes is to pick up the gold nuggets that are scattered around. Most of these bloggers with this attitude give up disillusioned. Blog for fun first, but that doesn't mean that you shouldn't go about your business with determination and a sense of purpose.

The most vital part of aiming to be a successful blogger is reading others experience, and not just before you start but continuously throughout your blogging time. Make sure you find other blogs, forums and social networking sites and subscribe to their RSS feed.

Learn from those that are already successful at it.

--------------------

Grange Hill web design

I've used it quite a few times now and it will compress your file by around 50%. Which, if your CSS file is over 1,000 lines or you are using a Javascript framework like Prototype, will decrease the download time.

The files should be read fine by every browser.

So here is what you do.

Take the contents of the CSS file and place it in PHP file with a .php extension. Put the following line of code at the top of the document:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>

Then at the very bottom place this line of code:

<?php if(extension_loaded('zlib')){ob_end_flush();}?>

And that's it. Now link from your HTML head to this PHP file rather than the CSS file.

For Javascript it is a case of doing the same but change the content type like so:

<?php if(extension_loaded('zlib')){ob_start('ob_gzhandler');} header('Content-Type: text/javascript'); ?>

I don't use this for HTML but I do place the following in my .htaccess file:

# BEGIN GZIP
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript
</ifmodule>
# END GZIP

As a warning, use this method only if you are hand coding and not if your are using a CMS or blogging platform. You'll find that a CMS will have this written into their core code or you'll be able to use a third-party add-on to achieve the same results.

As a piece of software it is widely used in professional web design circles, but nevertheless many designers openly discourage its use when writing in forums and blogs.

This is because of its WYSIWYG features. WYSIWYG is an acronym for What You See Is What You Get. This means that the software writes the actual code for you as you write the text or import pictures.

Professional web designers get aggravated about its use not because they feel that it's "cheating", but because the correct way of learning the trade is to look under the bonnet of the website and understand the engine, the code.

However, many people are attracted to the creative possibilities of web design by first using the WYSIWYG features of Dreamweaver. It allows the user to more quickly create something visually tangible rather than just lines of code.

My first website was created using FrontPage, which was part of the Microsoft Office Suite from 1997 to 2003. It is now defunct and has been replaced by Expression Web, but as it came bundled with Word and Excel there is no doubt that many of today's web designers got their first taste of site creation through that piece of software.

FrontPage was, to say the least, rather basic, but it served as an entry point to the profession.

I use an old version of Dreamweaver, version 8, on an almost daily basis. As a web designer there are many aspects of the software that really appeal to me, although I've never seen the benefit of upgrading to more recent versions.

I've long stopped using it as a WYSIWYG editor as I now hand code, but I really like the layout. It's very easy to flip between the code and preview views, or a split combination of the two, and all the files for the project site neatly stacked meaning quick and easy access when needed.

I particularly like how easy it is to preview the page in the browser of your choice and the code validation function.

Of real benefit to quick web design is its template system. Say, for instance, that you need to create 30 near-identity pages then it is easier to create one master template page and base all subsequent pages on that. Changing the template page then automatically alters all the 30 individual child pages.

It is rather useless for PHP coding and I use a separate PHP IDE for that. Subsequent versions of Dreamweaver also have extra features for ease of incorporating AJAX, Adobe AIR and XML.

There are other basic WYSIWYG editors out there such as KompoZer and Mozilla's SeaMonkey, but none come close to the Dreamweaver experience.

Popular software coding packages are Notepad 2 and Notepad++, both of which are widely recommended, but again, their interface is still not as intuitive to feel your way around as that of Dreamweaver.

So do you need Dreamweaver in order to learn web design? It's not essential, but it will certainly be a key aid in you quest if you are just starting out.

--------------

East London Web Design

All these CMSs are created using dynamic server-side development languages, with PHP being the most common followed by ASP.NET, Python and Ruby.

But don't worry, you don't need to have any working knowledge of these languages in order to use them, although a knowledge of HTML and CSS is very useful if you really want to get to grips with designing and developing your own site that is built with a Content Management System.

I create websites for people all the time with different CMSs and I often build them so that the user doesn't need any knowledge of web design at all in order to update it.

Perhaps first it may be worth noting what Content Management Systems you should avoid. PHP-Nuke and many of its forks such as Postnuke were once the most popular CMSs, but today few serious users would go near them as they have lagged behind new innovation for years.

[If you need a web designer in east London then please visit Stratford web design and development]

Dragonfly CMS though, one fork from PHP-Nuke, has a band of loyal, dedicated followers - and the same goes for XOOPS.

The two most popular CMSs in existence are Drupal and Joomla. It's hard to know how many websites are built with either Drupal or Joomla, but many hundreds of thousands would be a fair estimate. Both are quite easy to download and install, and if you rent server space that has Fantastico as a feature in the control panel it's as easy as clicking a few buttons in order to have a full working website up and running. Joomla tends to attract the less experienced website creator as the administrator interface is more user-friendly and there are thousands of free and paid template themes.

In contrast, there are a great deal less ready-built themes for Drupal. The documentation for Joomla is more thorough than the equivalent guides for Drupal, but both have extremely large online communities where you can seek advice. Drupal forums have over 500,000 members, while Joomla has over 250,000 - it's always best to use the search function first to see if your query has been asked before as 90% of the time you'll find that it has.

The biggest problem for the novice Drupal user is getting to grips with the administration back-end section. This can be very confusing for those new to Drupal, however this situation should improve by the time Drupal version 7 is released as they are spending a great deal of time and money in fixing the poor usability aspects of the CMS.

A recommended book to help you understand Drupal better is Building Powerful and Robust Websites with Drupal 6 by David Mercer (Packt Publishing). This starts at the basics and is easy to for anybody to read and follow.

Drupal and Joomla are fine for most small to mid-sized concerns, however for large, popular sites that will see a lot of traffic it may be worth looking at eZ Publish or ExpressionEngine.

Don't let the name fool you - eZ Publish, from the Norwegian company eZ Systems, is far from easy to learn! The robust CMS, ExpressionEngine, created by EllisLab, has won over a lot of professional web designers in recent years. ExpressionEngine offer a free limited core, with a full paid version if you intend to use it for commercial reasons. eZ publish is free and released under the GPL licence but there is a paid supported version called Publish Premium.

So here are some ideas for picking the right Content Management Systems. Often, website creators find their own personal preference after using a number of different CMSs - it's good to try out as many as you can to see if they fit your needs and requirements.

---------------

Fairlop web design

To check whether the submitted URL is a properly formatted address I use FILTER_VALIDATE_URL but there is no such filter function for RSS feeds.

So after putting on my thinking hat I came across the following way of checking whether a URL is an RSS feed.

Firstly, I used cURL to take the entire contents of the page and save it in a txt file:

$ch = curl_init(trim($_POST['blog-rss']));
$fp = fopen(LIB  . DS ."textfile.txt", "w");

curl_setopt($ch, CURLOPT_FILE, $fp);
curl_setopt($ch, CURLOPT_HEADER, 0);

curl_exec($ch);
curl_close($ch);
fclose($fp); 

Then I took the contents of the text file and put it into a string:

$filename = LIB  . DS ."textfile.txt";
$handle = fopen($filename, "r");
$contents = fread($handle, filesize($filename));

From there I used the stristr() function.

if (stristr($contents, "version="1.0"")) {
	null;
} else {
	$error[] = "There appears to be a problem with the submitted RSS field";
}

But this is where the problem lies. There are several different feed formats and the only constant I could find between them was the opening XML declaration: “version=1.0”.

So the URL is passed as okay if “version=1.0” is found within the contents of the file. However, this is also in a XML sitemap so while it passes RSS and Atom feeds, it will also accept other different types of files.

Do you have a better solution for this?

To start off with I will state why Search Engine Optimization (SEO) should matter to you. Lets say you are a small business that is selling shoes. You invest a couple of thousand pounds in a competently designed website. Your website is published but you receive no visitors and visitors equal money because they will hopefully be buying your shoes.

So in order to get visitors to your website you write a list about how you will publicise it.

At number one on the list is paying for advertising space in the print media, whether national or local publications, or niche magazines. This has been done for centuries and clearly does work judging by the billions of pounds spent on advertising every year.

At number two on your list is Pay Per Click (PPC) advertising which on the World Wide Web is mainly run by Google AdWords, Yahoo! Search Marketing, and Microsoft adCenter.

You've all seen these types of adverts in Google search results: they always in the right hand column. It works as a bidding system. You pay, say, £1 to Google every time somebody clicks on your advert and visits your site. If you pay more than £1 then your advert will appear higher in the list and so consequently you will receive more visitors. The amount that you pay for an advert depends on how competitive your niche and keywords are. For instance, you will pay more to advertise with a keyword like “home insurance” (extremely competitive) than you would “Gardening Services in Bolton” (not very competitive).

Done correctly PPP advertising will yield a financial return. This industry is called Paid Search Advertising and although related to Search Engine Optimization, is a separate sphere in its own right.

Getting back to your list.

At number three is SEO. At the most basic level of explanation this means getting to the number one spot in the search engine results for your niche or keywords. Going back to the previous example then this means that if somebody types “Gardening Services in Bolton” then your Bolton-based gardening site is the first result in the list.

Why is being first so important? Won't being number two or three or even number 27 on the third page do?

Time and time again investigations into people's user habits revel that users are more likely to click on a result if it is on the number one sport. They are then more likely to click on the number two result than the number three result, but less likely to click on the number two result than the number one result. Simplified, the higher on the list you are the more visitors your will receive.

So how do you get to number one? And now here is the rub – the only people who can truly answer that question are the search engines themselves. They keep their formulas – like the Coca-Cola and KFC recipes – a secret.

This is because if they were completely open with their formula – technically called algorithms – then every two-bit spammer in existence would take advantage of this in order to get their viagra or porn site to dominate the search engine results. Google would crumble into uselessness over night.

What they do is give us some information. Enough so that we can safely calculate that if we do X and Y then our website will eventually succeed in receiving a more prominent profile in the search engine results.

Lets examine this very page for these absolute SEO certainties.

Look at the top left hand corner and you will see “An Introduction to Search Engine Optimization (SEO) – Suburban Glory”. This is the title. You can't see it from here but if you examined the code you will see this text inbetween the HTML title tags -

. We know that this is the most important part of a page to place keywords. Getting back to our Bolton-based gardening site, this is where you would ideally put “Gardening Services in Bolton”.

Another example, look at the top of this article and you'll see “A Blog in Suburban Glory” and the name of this item again “An Introduction to Search Engine Optimization (SEO)”. You can't see it unless you examine the code but both of these lines of text are placed between headers called

and

respectively. We know that these are fairly important (albeit less so) places to put keywords.

The search engines bots look at these prime spots on a webpage and consider them indicative about what the subject matter of the entire page is about.

So these are just a couple examples of what we objectively know about SEO.

The trouble comes in that which we don't know, or at least that which we are unsure about.

Many of those involved in SEO often guess about the unknown factors, sometimes they make educated guesses, other times the herd mentality prevails.

Consequently, because of the vast grey areas SEO has a bad reputation amongst many people.

As SEO professional Laura Callow wrote recently:

Personally, I’m really, really tired of the uninformed or the simply ignorantly arrogant stating with utter conviction that SEO is a ‘waste of time’ and that it is conducted only by ‘snake-oil salesmen’.

Actually, effective SEO is pretty hard work, it’s not that easy, and it is a big deal. In my books, SEO remains misunderstood by the masses and I’m fast turning into Ms. Cranky-Pants when it comes to answering these detractors.

Laura is right – there is much to learn from SEO.

So as stated above the layout and code of a website (called on-page optimisation in the SEO industry) can be changed and that will make the website more attractive to search engines.

I would state this is only maybe a 25-30% slice of the complete SEO pie. The rest is down to incoming links: links that point towards a website.

Let me introduce to you academic Albert-László Barabási. In the 1990s he carried out a famous study into how the World Wide Web has evolved organically and he found that despite no one person or body organising the expansion of the WWW, a very definite structure had taken shape rather than just chaos.

At its centre were a few hub websites and around them were the many node websites. The hub websites were the most important as they had a vast number of incoming links pointing at them. To give an example, BBC.co.uk is a hub website as there are tons of links going towards it from every conceivable direction, while a node website is this site, suburban-glory.com. I would like to think that it will one day be a hub, but at the moment it is a node and a drop in the internet ocean.

His formula for this reads:

D(k) = Z(k) -^A

This is probably one of the most important mathematical equations from modern times. It underpins the growing discipline of network science as well as the the main search engine algorithms. You've heard of the thesis about six degrees of separation? And that we are connected to anybody else on the planet by no more than six places? Well that originates in the work of Barabási.

The central part of the search engine formula is based on the importance of being linked to from these web hubs.

An incoming link from the BBC or the Times newspaper if far, far more important than a incoming link from Old Miss Tibbles Northampton Cat Lovers site. In the search engines eyes this really is a BIG thumbs up to your site. If these hubs are linking to your site then its value goes up in the eyes of the search engines and they deem it suitable for greater exposure in the rankings.

Google doesn't employ people to manually review every single site. It is reliant on automatically interpreting the quality and number of incoming links so to judge the worth of a site.

So if incoming links in SEO are extremely important and how do you get quality incoming links? That's another tutorial for another time. The point of this article is merely to emphasis the importance of SEO and its potential effect on the fortunes of any one website if understood and implemented correctly.

---------------

Havering Web Design

Lets examine what makes a good directory and what makes a bad one.

The first rule of linking out is don't link to a bad neighbourhood. Traditionally, this means a malware site and you'll know when you link to one of those as Google informs you that this is the case in their Webmaster Tools section.

But other than sites that have been hacked and have viruses waiting to pounce on unsuspecting users, are there any other types of sites that you should not link to?

As a rule it is best to avoid gambling, porn and pharmacy sites. This isn't for any puritanical religious reasons, but simply the fact that most of the sites in these niches engage in blackhat tactics.

There are two reasons why they do so. Firstly, most webmasters refuse to link out to these types of sites. Google Adsense rules state that although they don't prohibit links to these niches, they certainly prohibit content. And the Google search engine bot won't particularly like indexing a page with sexually explicitly content on it. Consequently, owners of these types of sites carry out blackhat SEO techniques if they want to be successful.

Blackhat, for those that don't know, is to use tactics that violate Google rules in order to achieve good rankings.

That's not to say that there aren't reputable gambling, adult or pharmacy websites, there just aren't many of them; and with the money that can be made in these niches lots of webmasters would do anything in order to be successful.

So if you wouldn't link out to these types of websites would you submit your site to a directory that does?

The vast majority of the free directories that are listed on a site such as Digital Point freely link out to all these types of niches and demonstrate no editorial policy at all.

Some people even use semi-automatic directory submission software like DigiXmas and submit their site to hundreds, if not thousands of these spam-infested sites.

Having the bulk of your incoming links coming from these rubbish directories will not do your SEO campaign any good in the long-run. Google examines the quality of sites in any link pattern and it knows that spam loves spam; which means, spam sites are more likely to link to other spam sites.

A lot of SEO is about risk aversion - why take unnecessary risks in grey areas? Always check a directories index for dirty links before you submit to it by running through some keywords such as "viagra", "sex", "poker" and "gambling" in their search facility.

-----------

Barkingside Web Design

The Democrats with Obama at their head are trying to push forward the health care reforms that they failed to do in the 90s, and in the fierce debate organised opponents of the changes are telling complete lies about the British NHS.

To give an example US newspaper, the Investor's Business Daily, wrote:

"The controlling of medical costs in countries such as Britain through rationing, and the health consequences thereof, are legendary. The stories of people dying on a waiting list or being denied altogether read like a horror script.

"People such as scientist Stephen Hawking wouldn't have a chance in the UK, where the National Health Service would say the life of this brilliant man, because of his physical handicaps, is essentially worthless."

To which Professor Stephen Hawkings himself - currently in the US receiving the presidential medal of freedom - said: "I wouldn't be here today without the NHS".

Millions of Brits that have been deeply offended by these outlandish attacks are now hitting the Twittersphere with #welovethenhs.

---------------

Redbridge Web Design

It is a very powerful module and for those serious about Drupal web design it is inevitable that sooner or later you will end up using it.

There were some fundamental code problems with Panels 2 that could only can be resolved by tearing it up from the roots and starting again. Hence the recent release of Panels 3, albeit as a release candidate.

The main coder for this project is Earl Miles and the funding for much of the work has come from Sony due to the necessity of this module on their own Drupal site.

Panels like Views, CCK and Contemplate are essential addons for most Drupal installations as they allow the webmaster to create fundamental changes in layout and structure with little or no knowledge of PHP.

I took a deep breath before upgrading from Panels 2 to 3 as I wasn't sure what sort of learning curve to expect. The first thing I did was completely remove version 2; including deleting the MySQL tables. It was clear that such a version jump would need a clean slate.

Then I read the “Read Me” text file which said:

A little documentation should go here, but Panels 2 is a beast - you're best off checking the online handbook on Drupal.org, or the developer/API docs, which are available at http://doxy.samboyer.org/panels2/

Well that wasn't helpful and the file it pointed to looked seriously complicated.

Looking for help elsewhere I found some tutorials but they were from the beginning of year when Panels 3 was in a more primitive state.

Okay then, I thought, lets make some coffee and get prepared for a long day.

As it happens it only took a couple of hours to get the layout I wanted (see dofollow001.com). The interface of Panels 3 is extremely intuitive as it allows a step-by-step progression from the first parts of creating a layout to the last. In this regard it is certainly a far superior beast than Panels 2 ever was.

Admittedly, I have used both Views and Panels before so I'm not sure how a complete novice to this side of Drupal would find it, but I reckon it wouldn't be too complicated for somebody who is a bit green.

I think what I'll do is create a guide to the basics of using this module with screenshots.

--------------

Seven Kings Web Design

These users are particularly keen on submitting items that are based around pay day loans. I use the Modr8 module that reinstates useful functionality that was removed from the core of version 5 onwards and which allows the webmaster to hold back submissions in a moderation queue and then send a refusal or acceptance email after they have been denied or approved.

Now one would think that repeatedly receiving rejection emails would put off these individuals from submitting anything further to PressRelease001, but it isn't the case.

This service is free for everybody and at the moment I'm hardly making any money from Adsense. A couple of weeks ago I snapped while looking at yet another moderation list of “info-spam”.

I've had False Account Detector installed and active for some months so I knew that the problem users didn't number in their hundreds but were actually four or five individuals who were creating multiple accounts. There is a supposed block facility with False Account Detector but it doesn't seem to be working.

So in stepped Troll and Misery. The particular benefit of Troll is it allows the webmaster to easily ban a user by IP address; while Misery allows a user to be inflicted with random 403 or 404 pages, forcing them away from the site without actually banning them outright.

And to war I went. It took a couple of weeks but eventually I managed to stop most of these idiots – inflicting “misery” on them was particularly satisfying.

If you are dealing with user-generated content on a Drupal site then it is impossible to stop spam outright, but you can contain the problem and stop it from getting out of control.

------------

Hackney Web Design

It is for the latter case that I needed both two and three column layouts for a directory script I was writing for my own personal site.

If you have a grasp of PHP and CSS it is actually a fairly straight forward task and below are two ways of achieving this with tables or CSS for styling.

Firstly, lets take a look at the code for creating a table layout:

$find_data = mysql_query("SELECT * from category");

while ($result = mysql_fetch_array($find_data)) {
	
$data[] = $result;

}

$data = array_chunk($data, 2);

echo '<table id="data-output" border="1">';
foreach ($data as $row) {
	
    echo'<tr>';

    foreach ($row as $column) {
        print '<td>' . $column['name'] . '</td>';
    }

    echo '</tr>';
}

echo '</table>'; 

PHP coders will be familiar with the first part of this block of code. It is simply taking all data from the table called category and leaving it in an array called $data.

From here it is a case of putting it through the array_chunk() function and cutting it down into equal sized amounts, which above is 50/50.

This is then passed through two foreach loops to achieve a tables-based layout.

Change the number of columns by changing the number in the array_chunk function; 3 for three columns, 4 for four columns and so on.

And that's it.

But what about a non-table output?

Lets make some simple changes to the code and add a little CSS.

So we're call the data from the table as before and we'll still pass it through the array_chunk() function, but instead of tables we're now make sure the code outputs as an unordered list:

foreach ($data as $row) {
	
    echo'<ul class="row">';

    foreach ($row as $column) {
        print '<li class="column">' . $column['name'] . '</li>';
    }

    echo '</ul>';
}

And add a bit of styling to the row class:

.row {
list-style-type: none;
float:left;
width: 150px;
margin-right : 15px;
}

The margin-right declaration will create guttering inbetween the columns.

You need to play around with the CSS and the number in array_chunk() to achieve the right number of columns for your needs.

What I also do is add an incremental number to the PHP like so:

$i = 1;

foreach ($data as $row) {
	
    echo'<ul class="row">';

    foreach ($row as $column) {
        print '<li class="column' . $i++  .' ">' . $column['name'] . '</li>';
    }

    echo '</ul>';
}

This allows the styling of each column though it does create a lot more CSS code.

So here are two different ways to present data in a multicolumn format using PHP and tables or CSS.

To see an example of this in action then take a look at my directory here: http://www.suburban-glory.com/directory.html

In many ways it's a good thing for usability as the submit and preview buttons are at the bottom of a form and the less scrolling down to reach these the better.

However, the other day on one of my sites I was using a prototype.js JavaScript framework and I noticed it was clashing with the collapse.js file and causing the collapsible sections to be unavailable.

I wanted keep this extra Javascript on the site as it was there for a useful purpose (I'll be revealing all soon!) but not being that proficient with this client-side language I needed a way of dealing with the bug without tampering with Javascript.

The hack was actually pretty simple. I merely changed a name of HTML class in the core files so that it read “no” (I could have written anything) rather than “collapsed”:

function phptemplate_fieldset($element) {
  if (!empty($element['#collapsible'])) {
    drupal_add_js('misc/collapse.js');


    if (!isset($element['#attributes']['class'])) {
      $element['#attributes']['class'] = '';
    }

    $element['#attributes']['class'] .= ' collapsible';
    
    if (!empty($element['#collapsed'])) {
      $element['#attributes']['class'] .= ' no';
    }
  }

  return '<fieldset'. drupal_attributes($element['#attributes']) .'>'. ($element['#title'] ? '<legend>'. $element['#title'] .'</legend>' : '') . (isset($element['#description']) && $element['#description'] ? '<div class="description">'. $element['#description'] .'</div>' : '') . (!empty($element['#children']) ? $element['#children'] : '') . (isset($element['#value']) ? $element['#value'] : '') ."</fieldset>n";
}

The actual function is called theme_fieldset() and it can be found in form.inc. I renamed the function phptemplate_fieldset() to override it and placed it in the template.php file.

Now no Javascript collapsible boxes are enacted on any form in Drupal.

This guide reveals that the fonts available across both Windows and Macs are Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS and Verdana.

And that's it! Even my precious Helvetica is not available across the board as it does not come shipped with Windows.

Obviously specifying a font that isn't available will lead to all sorts of trouble so web designers counter this by creating a fall back list. The pre-configured Dreamweaver choices are:

• Arial, Helvetica, sans-serif
• "Times New Roman", Times, serif
• "Courier New", Courier, monospace
• Georgia, "Times New Roman", Times, serif
• Verdana, Arial, Helvetica, sans-serif
• Geneva, Arial, Helvetica, sans-serif

So taking the first line as an example, the first choice is Arial but if that is not available on the operating system then it falls back to Helvetica, and if that is not available it requests the machines sans-serif as a last resort. In CSS these are called font stacks.

Much of what web designers use as their choice of font comes through experience.

For instance, a much under discussed problem is that of cheap (standard?) LCD screens that bleach out colour and make the smoothest of font curves resemble a jagged cliff edge, and I've found that as long as they are less than 20px then Helvetica and Verdana are best able to deal with the large variety of screens on the market.

When it comes to font stacks Nathan Cord at Unit Interactive has graciously bestowed his font stack wisdom to us.

The font stacks below are based on grouping fonts together from the same type classification or the same type designer.

p - balanced for paragraphs or body copy

t - balanced for headlines or titles

• Arial, Helvetica Neue, Helvetica, sans-serif - p, t
• Baskerville, Times New Roman, Times, serif - p
• Baskerville, Times, Times New Roman, serif - t
• Cambria, Georgia, Times, Times New Roman, serif - p, t
• Century Gothic, Apple Gothic, sans-serif - p, t
• Consolas, Lucida Console, Monaco, monospace - p, t
• Copperplate Light, Copperplate Gothic Light, serif - p, t
• Courier New, Courier, monospace - p, t
• Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif - p, t
• Futura, Century Gothic, AppleGothic, sans-serif - p, t
• Garamond, Hoefler Text, Times New Roman, Times, serif - p
• Garamond, Hoefler Text, Palatino, Palatino Linotype, serif - t
• Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif - p
• Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - t
• Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif - p
• Georgia, Times, Times New Roman, serif - t
• GillSans, Calibri, Trebuchet, sans-serif - p
• GillSans, Trebuchet, Calibri, sans-serif - t
• Helvetica Neue, Arial, Helvetica, sans-serif - p
• Helvetica, Helvetica Neue, Arial, sans-serif - t
• Impact, Haettenschweiler, Arial Narrow Bold, sans-serif - p, t
• Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - p, t
• Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif - p
• Palatino, Palatino Linotype, Hoefler Text, Times, Times New Roman, serif - t
• Tahoma, Geneva, Verdana - p
• Tahoma, Verdana, Geneva - t
• Times, Times New Roman, Georgia, serif - p, t
• Trebuchet, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif - p
• Trebuchet, Tahoma, Arial, sans-serif - t
• Verdana, Geneva, Tahoma, sans-serif - p
• Verdana, Tahoma, Geneva, sans-serif - t

I would wager that a finer list of appropriate font stacks can't be found anywhere else on the web.

----------

Hackney Web Design

My initial reaction was surprise that so many companies were like the Monty Python Parrot and had ceased to exist.

Has the creative industries during the last 12 months of economic recession taken such a pounding? Or have these sites died off over a number of years and Yahoo is rubbish at clearing out dead links from its directory?

I tried to carry out some research by checking the domain names on the Internet Archive to see the last time their were active, but in recent years they have seemed far less likely to index a site and so TheWayBackMachine drew a blank.

Other than this place I'm not sure how to check the last time a website was active.

So as of yet the opening question - Are web design companies going bust left, right and centre or is the Yahoo directory shit? - is yet to be answered.

--------------

Ilford Web Design

But if you really want to get under the bonnet of your own backlinks then Majestic is the service you should sign up for.

Other free methods of analysing backlinks are through Google's Webmaster Tools console, which is as good as useless due to only selective links being shown; while Yahoo offers a more complete listing but only 1,000 links are viewable or available to download as CSV file.

Majestic-SEO claims to be the biggest backlinks and anchor text database in the world, with over 77 billion webpages and 539 billion individual links analysed, although SEOmoz claims 38 billion URLs across 240 million domains.

Majestic-SEO is owned by Majestic-12 Ltd and the data they hold is for their own search engine here.

From their "about us" page:

Anchor Index is a system designed for research of relevancy algorithms that are heavily based on backlinks and anchor text. This index is currently under heavy development, so consider this interface being a beta version that can change or go down at any time.

Information on websites you own is free to access. Majestic-12 Ltd make their money by charging for reports on competitors.

They aim to one day hopefully launch a search engine 'to mount an attack on the leading search engines in terms of quality and quantity of the index'. Although having used their search engine I would state that they have some way to go yet.

However, the data available to webmasters and SEO practitioners is fantastic.

Backlinks can be organised via the following ways: anchor text, countries, TLDS, IPs, Class C Sub Nets and referring domains.

It can even go as far as breaking down newly found links on a daily basis. That's not to say that a link created one day will be visible in their data the next as it depends on when that link is found by their crawler.

They also mark links that have the nofollow microformat and list whether the link is an image or uses alternative text in the image.

Links are measured with their own graded numbers system which they call ACRank. This is similar in intention to MozRank or PageRank in that it provides a quick measure of the worth of a page, although it is based on a more primitive calculation than either of those two with only the total number of incoming links involved in the calculations.

And, what's more, it is possible to download the details about your entire number of backlinks as an Excel-readable file.

The free service offered by Majestic-SEO is, er, rather majestic!

------------------

Buckhurst Hill web design

There can be no doubt that the business model of the Mozilla Foundation has dramatically altered the software creation world with the proprietary model now seen as slow and cumbersome and the open source alternative having the necessary fluidity.

Let us remind ourselves of Bill Gates infamous “Open Letter to Hobbyists” from 1976:

The feedback we have gotten from the hundreds of people who say they are using BASIC has all been positive. Two surprising things are apparent, however, 1) Most of these "users" never bought BASIC (less than 10% of all Altair owners have bought BASIC), and 2) The amount of royalties we have received from sales to hobbyists makes the time spent on Altair BASIC worth less than $2 an hour.

Why is this? As the majority of hobbyists must be aware, most of you steal your software. Hardware must be paid for, but software is something to share. Who cares if the people who worked on it get paid?

Previously all software code was open and available for everybody to use; Gates' declaration put barriers around it and locked it down to the company that produced it.

The open source methodology has now superseded Gates' proprietary software, and by and large we have Firefox to thank for that.

The collective of coders who contribute their time for free have created something far more cutting edge and progressive than Microsoft's Internet Explorer. This, in turn, has been emulated by Google and Yahoo who have entered the open source spirit with gusto. Even Twitter, while not embracing open source, have opened up their database for developers to create their own applications.

The success of Firefox has been borne out in the statistics, with IE once commanding over 95% of the browser market and now Firefox commands 22.51% of the recorded usage share of web browsers and increasing on a month-by-month basis.

It has now reached a staggering one billion downloads.

Congratulations to all the Mozilla team.

--------------------

Woodford web design

They are all lively, popular hubs of discussion, with Digital Point having over 260,000 members and Warrior Forums being filled with nearly 450,000 posts in its second incarnation.

Under various names I have been a regular reader and contributor on all four of these websites. I've enjoyed some more than others and here is my review of them all.

Warrior Forums

Warriors is more focused on affliate marketing than the other three, and is the only one of the four to have a paid section.

Sub-forums include The Copywriting Forum, Ad Networks and Programming Talk.

What makes me most laugh about Warrior (other than the name!) is the sub-forum entitled "Mind Warriors - Success, Power, Self-Improvement". Think your way to success... that'll work! It's like a throwback to Samuel Smiles and Eighties self-help VHS tapes.

A typical thread reading:

I am writing this message to all the rookies like me! Well, now that I think about it, you are probably not like me. I am a 57-year-old grandmother who lives on a tiny farm in the middle of a cow field in Central Washington.

Anyway, last December I was financially desperate. I won't tell you my whole sob story, but the bottom line is that I was out of money and still had $1000s of bills to pay each month!

So I had to reinvent myself. I had been in real estate investing and when the bottom dropped out of the market, it took all my financial resources with it.

I started reading Your Portable Empire by Pat O'Bryan and that's when I decided to try Internet Marketing.

So I bought a couple eBooks that taught me what to do . . . and I started. I followed the writers' advice to the letter. One of the eBooks was about writing eBooks and the other was about getting traffic to your site.

Here is my encouragement to you! I had never done this before! I was a writer and I had a laptop, but that's about as much as I could bring to the table. On top of it, I had very little money! So I had to make things happen with a minimal investment!

I ended up spending less than $100, wrote and started selling two eBooks of my own . . . and within just over 5 weeks, I made more than $12,000. What I’ve since learned is that this is even more amazing since the two eBooks I wrote and I sold were both priced at under $10 each.

And it goes on and on - it's almost as believable as Nigerian 419er: "Hello Sire, I am a princess living on a tiny farm in the middle of a cow field in Central Washington. My husband King Nuembela has just deposited $20 million dollars in an offshore account, I need you to... "

The comments underneath are ridiculous:

What a terrific story Susan!...also, I'm going to pick up Your Portable Empire by OBryan. Sounds like it belongs in my library, too.

Thanks for your inspiration. I'm a new warrior and new to IM and you have given me a lot to think about. I wish you much more success and happiness. Thanks for sharing.

That's inspiring! Just goes to show you that more can happen on the Internet than most people can dream of

It's like - get real people. This isn't the outpourings of a 57-year-old grandmother from Washington. It's somebody trying to sell you an Ebook - it's a marketing pitch.

(I couldn't resist it. On the thread I wrote: "This story filled me with tears. God bless America! God bless the world!" The sarcasm was lost on these schmucks though)

A forum for warriors? Whatever.

Digital Point

Over at nickycakes.com, Mr Cake(hole)has been less then complimentary to Digital Point:

The place is just a cesspool of 3rd world scammers trying to make a few dollars a month clicking their own adsense ads. It’s really impossible to describe, and the Cakes is probably preaching to the choir here, but if you’re part of the 1% of the readers who have not been there before, you really have to see it for yourself. Make your way to the google adsense section on a rainy sunday weekend for more laughs than you can handle.

I myself haven't visited much over the last 12 months - and even then it was just to go to the politics sub-forum.

The reason for that is I haven't had anything to drink since last summer (no, I've not been going to AA meetings instead).

You've got to be pissed to find Digital Point alluring. The drunken man never listens - he is only intent on giving an opinion. Read the threads. People just post with out properly reading the OP or its responses, consequently threads go on for pages without focus. It really is Digital "fluff" Point.

This all comes from a mistaken believe that building up 5,000 signature links will result in a successful SEO campaign.

Note as well the obligatory new daily thread in the Google sub-forum entitled 'When is the next PageRank update?'.

Digital Point seems to attract the youngest crowd with past surveys revealing that the majority of members are lads under the age of 21.

Sphinn

This Digg-clone was created by Danny Sullivan's Search Engine Land, and because it came from the god-awful Pligg CMS it seems to be the major stopping off point for every spam whore on the net.

Admittedly, there are some good articles that make it to the frontpage but at the same time in typical SEO fashion there's a lot of gaming going on which means your more likely to find mediocre items then anything inspiring; and debates, when they happen, frequently boil down to the "I've got the biggest SEO cock" variety.

Sitepoint

The atmosphere at Sitepoint is really quite chilled and it has an ambiance of a caring uncle about it.

It is somewhere where I would point people if their are seeking qualified advice - although it is probably the only place on the internet where people become over-defensive about the Opera browser.

At times though it is just too slow with not enough new threads to keep me coming back regularly.

So, for now anyway, you're more likely to find me over at Sitepoint, although all of them hold some sort of attraction, no matter how weird.

-------------------

Chigwell web design

Some of these directories require that you register first while some others ask for a reciprocal link, but they are all free to submit to.

I've examined them as so: The year the site was created; the exact number of pages indexed in Google; the number of backlinks to the domain as recorded by Yahoo; the Google PageRank of the homepage; whether the links are "dofollow", nofollow or a redirect; Quantcast data, if any; whether there is any editorial policy or whether they accept anything, and I also checked the index for gambling, pharmacy and porn sites to see if they link out to loads of low-quality spam sites.

----------

Goodmayes Web Design