JustGage is a handy JavaScript plugin for generating and animating nice & clean gauges. It is based on Raphaël library for vector drawing, so it’s completely resolution independant and self-adjusting.

URI.js is a javascript library for working with URLs. It offers a “jQuery-style” API (Fluent Interface, Method Chaining) to read and write all regular components and a number of convenience methods like .directory() and .authority().

Why use PDO?

The number one reason is security. With plain MySQL functions you need to sanitise the input manually using type casting or mysql_real_escape_string(). With PDO this is all taken care for us and means we no longer have to worry about SQL injection. Great.

The ability to easily migrate to a different database engine (SQLite, Oracle, MSSQL, ODBC, etc.) is the cherry on top of the cake.

How to connect to a database

Connecting is just as easy as in standard MySQL functions, it just looks slightly different. We wrap the connection attempt in a try-catch statement so we can gracefully handle errors. E.g.

<?php
try {
    $dbh = new PDO("mysql:host=localhost;dbname=my_db_table", 'username', 'password');
} catch(PDOException $e) {
    echo $e->getMessage();
}

One thing I always do is instantly tell PDO I want associative arrays returned. I prefer them to objects, but your milage may vary. I also say that we want to deal exclusively in UTF8.

<?php
// Connection string, UTF-8 encoding, and fetch associative arrays
$dbh = new PDO("mysql:host=localhost;dbname=my_db_table;charset=utf8", 'username', 'password');
$dbh->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);

Inserting rows

Finally, some database interaction which lets us use the benefit of PDO – prepared statements. Essentially we insert placeholders into our SQL and define a value for those outside the statement. We do not, I repeat, we do not ever place user input directly into the SQL. This is susceptible to SQL injection.

Secondly, there are two ways to define these placeholders in your SQL statement: Positional and Named. You only ever want to use Named placeholders. Positional are, quite frankly, a silly idea. Positional placeholders ultimately will end up in inserting data in the wrong columns, or selecting data using an incorrect parameter. I’m only going to show you the correct way (in my opinion) so as to not give you bad habits.

// Define the SQL with named placeholders
$sth = $dbh->prepare("INSERT INTO `table` (`id`, `title`) VALUES (:id, :title)");
 
// Execute the query, replacing the placeholders with their true value
$sth->execute(array(
    ':id'    => 123,
    ':title' => 'I am the title'
));

You can see that we create a variable $sth (statement handler) which calls the $dbh (database handler) prepare method. The SQL should look pretty standard until we reach the :id and :title. These are our named placeholders. We can run this query by calling the execute() function which takes an array of the placeholder data. Quite simple.

The benefits of this are that our data is automatically escaped – we do not have to worry about calling mysql_real_escape_string(), after all we might not be using MySQL. Also, the benefits are that we can call the execute() functions many times without re-declaring the SQL statement, which will speed up our code execution.

// Insert three rows into the table
$sth->execute(array(':id' => 123, ':title' => 'First title'));
$sth->execute(array(':id' => 456, ':title' => 'Second title'));
$sth->execute(array(':id' => 789, ':title' => 'Third title'));

Selecting

Now that you have just mastered inserting data, selecting is a piece of cake, it’s very similar, and also gives us a chance to go over a few new functions.

// Select some data
$sth = $dbh->prepare("SELECT `id`, `title` FROM `table` WHERE `id` > :country_id");
 
// Execute the query, replacing the placeholders with their true value
$sth->execute(array(
    ':country_id' => 200
));
 
// How many records did we find?
echo 'We found ' . $sth->rowCount() . ' records.';
 
// Loop over the data
while ($row = $sth->fetch()) {
    echo 'My ID is ' . (int)$row['id'] . ' and my title is ' . htmlentities($row['title']);
}

To get the number of rows returned you can use the rowCount() function (akin to the mysql_num_rows()), and to loop over the data you can use the fetch() function (akin to the mysql_fetch_assoc()). If you wanted to return all of the rows into a variable without performing a loop you can do fetchAll(). Otherwise there are no gotcha’s here.

Updating data

You’re going to be bored of me saying this, but there is nothing different here than the previous examples:

// Update a row
$sth = $dbh->prepare("UPDATE `table` SET `title` = :title WHERE `id` = :id LIMIT 1");
 
// Execute the query, replacing the placeholders with their true value
$sth->execute(array(
    ':title' => 'I am the newly updated title',
    ':id'    => 123
));
 
// Did we manage to update the row?
if ($sth->rowCount() >= 1) {
    echo 'Yup, the row was updated.';
} else {
    echo 'Nope, row was not updated.';
}

Deleting data

Again, nothing too complex:

// Delete a row
$sth = $dbh->prepare("DELETE FROM `table` WHERE `id` = :id LIMIT 1");
 
// Execute the query, replacing the placeholders with their true value
$sth->execute(array(
    ':id' => 123
));
 
// Did we manage to delete the row?
if ($sth->rowCount() >= 1) {
    echo 'Yup, the row was deleted.';
} else {
    echo 'Nope, row was not deleted.';
}

bindParam(), bindValue(), and execute()

This comes down to preference. I prefer the execute() because we are avoiding function calls, speeding up our code, and easier to update. But I’ll go over all three.

bindParam() is asking for a reference. It is not asking for an immediate value, it only receives the value once the execute() function is called. This is probably the most confusing aspect of PDO, so let me give you an example.

// Select some data
$sth = $dbh->prepare("SELECT `id`, `title` FROM `table` WHERE `id` > :country_id");
 
// Set binds
$sth->bindParam(':id', $tableId);
 
// Define variables
$tableId = 123;
 
// Execute
$sth->execute();

This works because, although $tableId does not exist when referenced, it is defined before our execute() call. The reason I do not like this is because it is leaving an uncertainty to the statement. You could quite easily bind the parameter, then change the variable for some reason and cause an error. You also have the problem that literals can not be used since they cannot be referenced. So, bindParam(':id', 123) would result in an error.

bindValue() to the rescue! This works in the same way as bindParam(), but it uses the value straight away, be it a literal or a variable.

execute() is what we have been using in the previous code samples, so does not need an introduction.

exec(), execute(), and query()

These all do the same thing, run a query. But they do so in different ways. In my opinion you should only ever use execute() as it is the only one which works with prepared statements which, in time, the other two can become susceptible to SQL injection. They also have their nuances, exec() can only be used for queries that do not return data objects (e.g., SELECT statements), and generally speaking query() is only used on SELECT statements. But since you cannot use prepared statements (e.g., placeholders), I wouldn’t bother with them.

Wrapup

You now know the basics of PDO. You can see it isn’t a scary monster and it really is easy to switch. You now know how to insert, select, update, and delete rows. You know how to safely pass in parameters using placeholders (remember, named not positional!) and so you now never have to worry about SQL injection.

Handsontable is a minimalistic approach to Excel-like table editor in HTML & jQuery. Now with column and row headers!

Making good-looking graphs shouldn’t be hard. Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy.

Turn.js is a JavaScript library that will make your content look like a real book or magazine using all the advantages of HTML5. The web is getting beautiful with new user interfaces based in HTML5; turn.js is the best fit for a magazine, book or catalog based in HTML5.

Git allows groups of people to work on the same documents (often code) at the same time, and without stepping on each other’s toes. It’s a distributed version control system.

Brackets is a new open source project founded by Adobe to push tooling on the web forward. Based on the principle that the best developers to build tools for web developers are in fact web developers, Brackets is built in JavaScript, HTML and CSS.

Demonstration and Download

To view a demonstration of the code in action, click here.

You can view the Github repository here.

The PHP backend

It is designed to be flexible — it can handle boards of any size and will place the starting 4 disks in the center. The PHP is also very quick — the size of the board does not really effect the performance due to the way its programmed. It only allows legal moves to be played, each move needs to flip at least one of your opponents disks, if you play an invalid move it will give you the option to skip your play.

A quick snippet of the traversing function in the PHP class

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

<?php
/**
 * Traverse the board to see if we can take any of our opponants disks.
 *
 * To traverse the board we can add, substract, or do nothing with each X and Y coord.
 * Keep traversing until we reach an empty position, a wall, or our own disk. Once
 * reached an end, traverse back down the coords replacing the disks with our own.
 *
 * @param $xDiff int
 * @param $yDiff int
 * @access private
 */
public function doTraverse($xDiff, $yDiff) {
    // Set variables
    $x = $this->_x;
    $y = $this->_y;
    $continue = true;
 
    // Begin the loop
    do {
        // Work out the new coords to test
        $x += $xDiff;
        $y += $yDiff;
 
        // What is in the next position?
        $next = isset($this->_boardContent[$y][$x])
            ? $this->_boardContent[$y][$x]
            : 'e'; // Edge
 
        // Have we hit an edge or an empty position?
        if ($next == 'e' || $next == '-') {
            $continue = false;
        }
 
        // Have we reached our own disk colour?
        else if ($next == $this->_turnInPlay) {
            // We are currently at our own disk, move back one so we are at our
            // .. last free (potentially) disk.
            if ($xDiff > 0) { $x--; } else if ($xDiff < 0) { $x++; }
            if ($yDiff > 0) { $y--; } else if ($yDiff < 0) { $y++; }
 
            // Are we where we started?
            while ($x != $this->_x || $y != $this->_y) {
                // Change this disk to the player who just moved
                $this->_boardContent[$y][$x] = $this->_turnInPlay;
 
                // Set the number of disks this flipped
                $this->_disksFlipped++;
 
                // Move back one coord to begin another replacement
                if ($xDiff > 0) { $x--; } else if ($xDiff < 0) { $x++; }
                if ($yDiff > 0) { $y--; } else if ($yDiff < 0) { $y++; }
            }
 
            // We have converted all of the possible disks, exit the traverse
            $continue = false;
        }
    } while ($continue);
}

The Javascript frontend

Javascript provides a real-time view of what disks will be flipped. The traversing function is a virtual copy of the PHP classes.

Functionality to be built

One piece of functionality that is really needed is ensuring a legal move is actually possible. If it isn’t then it automatically skips to the next player, and if that player cannot play a legal move either then it ends the game. I’m not sure if it will be best to implement this in either PHP or Javascript — both options have their benefits.

I am thrilled to announce the arrival of a new stable version of Node.js. Compared with the v0.6 releases of Node, this release brings significant improvements in many key performance metrics, as well as cleanup in several core APIs,

Researchers have clocked light beams made of “twisted” waves carrying 2.5 terabits of data – the capacity of more than 66 DVDs – per second.

Ratchet is a component library for PHP that provides developers with the tools to create real time, bi-directional applications between clients and servers. This is not your Grandfather’s Internet.

Google Maps users may soon find it easier to plan a trip on some of England and Wales’s waterways. The search engine has teamed up with the Canal and River Trust, a charity that will be in charge of the two countries’ water network from July.

Demonstration

To view a demonstration of this plugin, click here.

What does it look like?

How to use the plugin

You use it the same as any other plugin. Simply make sure the DOM has fully loaded, then call the function on an element ID or class:

$(document).ready(function() {
    $(".element").blindEffect({
        speed:  1000, // Each panel will animate for 1 second
        panels: 10    // Split the element into 10 different panels
    });
});

The plugin code

(function($){
    $.fn.blindEffect = function(options) {
 
        // Define the default settings
        var defaults = {
            speed:           1000,   // How fast the animation will last for each panel
            panels:          10,     // The number of panels to animate
            backgroundColor: "#FFF", // What background colour should the panels have?
            leftToRight:     true,   // Animate from the right to the left?
            delay:           75,     // How long to delay the animation between each panel
            opacity:         "0",    // Also animate the opacity of the panels?
        };
 
        // Merge the users options in with the settings
        // We can now refer to these options in our function via options.variable
        var options = $.extend(defaults, options);
 
        // Run through each of the found elements
        this.each(function() {
            // Assign $(this) to e for simplicity and speed
            var e = $(this);
 
            // Is this element already in animation?
            if ($(".panel", e).length >= 1) {
                return false;
            }
 
            // What is the height of this container?
            var containerHeight = parseInt(e.css("height"));
 
            // How wide will each panel need to be?
            var panelWidth = parseInt(e.css("width")) / options.panels;
 
            // Start placing the panels over the image
            for (var i = 0; i <= options.panels; i++) {
                // Prepend the panel
                e.append('<div class="panel"' +
                    ' style="' + (options.leftToRight ? 'right' : 'left') + ':' + (i * panelWidth) + 'px;' +
                        'width:' + panelWidth + 'px;' +
                        'height:' + containerHeight + 'px;' +
                        'background:' + options.backgroundColor + '">&nbsp;</div>');
            }
 
            // Now that the panels are visible we start to hide the panels
            // Do we want right to left, or left to right?
            var marginLeft = 0;
            if (options.leftToRight) {
                marginLeft = panelWidth + "px";
            }
 
            // Loop over each panel
            for (var i = 0; i <= options.panels; i++) {
                $(".panel:eq(" + (options.panels - i) + ")", e)
                    // Add a delay so the animation is nice
                    .delay(i * options.delay)
                    // Animate the width and opacity
                    // Also animate marginLeft so left to right looks nice
                    .animate({
                        width:      "0",
                        opacity:    options.opacity,
                        marginLeft: marginLeft
                    },
                    // How fast we need to animate each panel
                    options.speed,
                    // Remove the panel after the animation, it serves no use
                    function() {
                        $(this).remove();
                    }
                );
            }
        });
 
        // Return jQuery object
        return this;
    }
})(jQuery);

Just tanked a job interview where I was asked to implement a function with this signature: function justify($str_in, $desired_length) It needs to mimic what HTML’s text-align: justify would do, here’s some examples (desired_length = 48)

Quite an interesting little test, I thought. Has zero practical world application, but it does require the person to have a somewhat analytical mind and problem solving skills. Also a reasonable knowledge of PHP. So I thought I would have a go (without looking at others’ solutions). 10 minutes later a working script which does exactly what was requested.

Quick walkthrough

We start off by exploding the string into separate lines and looping through each one. Start with the simplest first: if the line is already over 48 characters in length then simply truncate the string and replace the spaces with dots. Next we want to explode the words into an array, which allows us to handle the second simplest test case: single words. If there is only one word then simply use str_pad().

Multiple words now. The hardest part (though not very). We need to work out how many dots we need, and how many that should be between each word (don’t forget to floor() it so we have a whole number!). The problem is this can leave fractions, so work out how many extra dots we need. We can then loop over each word and add the dots. If we have any extra dots then we can output just one of them—there will never be more than 1 extra dot per word as then that would mean the dots per word would increase!

A nice way to spend 10 minutes whilst watching a Euro 2012 game.

The resulting PHP

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

<?php
function justify($strIn, $desiredLength) {
    // First lets split the lines into an array
    $strIn = explode("\n", $strIn);
 
    // Loop over each line to test
    foreach ($strIn as $line) {
        // Strip whitespace from beginning and end
        $line = trim($line);
 
        // Is the string longer than 48 characters?
        if (strlen($line) >= $desiredLength) {
            // Cut it down to 48 characters and replace the spaces with dots
            echo str_replace(' ', '.', substr($line, 0, 48)) . '<br />';
            continue;
        }
 
        // Less than 48 characters
        // Split words into an array
        $words = explode(' ', $line);
 
        // How many words are there?
        $wordCount = count($words);
 
        // Are we dealing with only one word?
        if ($wordCount == 1) {
            // One word, just str_pad it
            echo str_pad($words[0], $desiredLength, '.', STR_PAD_BOTH) . '<br />';
            continue;
        }
 
        // Multiple words
        $stringLengthMinusDots = strlen(implode('', $words));
        $dotsRequired = $desiredLength - $stringLengthMinusDots;
 
        // How many dots do we need inbetween each word?
        // Note: We want to deduct 1 from $wordCount, we do not want dots after the last word
        $inbetween = floor($dotsRequired / (count($words) - 1));
        $inbetweenOver = $desiredLength - ($stringLengthMinusDots + ($inbetween * ($wordCount - 1)));
 
        // How many dots have we outputted?
        $dotsOutputted = 0;
 
        // Loop over the words
        foreach ($words as $index => $word) {
            // Echo out the word
            echo $word;
 
            // Have we already gone over our allowance?
            if ($dotsOutputted >= $dotsRequired) {
                continue;
            }
 
            // Do we have extra dots that we need to output?
            else if ($inbetweenOver >= 1) {
                // Extra dot, deduct one from our over count, increase the output dot count
                echo '.';
                $inbetweenOver--;
                $dotsOutputted++;
            }
 
            // Echo dots and add to count
            echo str_repeat('.', $inbetween);
            $dotsOutputted += $inbetween;
        }
 
        // New line
        echo '<br />';
    }
}
 
// And run the function
justify('hello world there ok then
hello
ok then
this string is almost certainly longer than 48 I Think so needs to be shorter
two words
three ok words
1 2 3 4 5 6 7 8 9', 48);

Update: Just saw someone on the StackOverflow post performed a benchmark with peoples answers. Run 100,000 times mine clocked in at 2.3 seconds on a 2011 MacBook Pro using MAMP (with quite a few applications running!). I imagine this will be faster than the users “single core Ubuntu VM”, though, so not too scientific…

Resize your browser to reveal just a handful of the kind of devices you should expect web pages to be viewed on.