Baking cakes with CakePHP.

  • Bash autocompletion for Git

    One thing I often wished to have when using Git was the ability to autocomplete Git commands and branch names. As I had to learn this week from Markus Prinz’ article A few of my Git tricks, tips and workflows, Git comes with an autocompletion script for the Bash shell.

    But to use the autocompletion, you have to enable it. To do that, add the following snippet to your ~/.bashrc file (if you are using a Mac, see the aforementioned article):

    source /etc/bash_completion.d/git

    You can then either reload the .bashrc file with source ~/.bashrc or open a new shell to see the autocompletion in action.


  • Array iteration with JavaScript

    Till recently I always used a for-loop when I had to iterate over an array in JavaScript. For example:

    var myArray = [1, 2, 3, 4];
    for (var i = 0; i < myArray.length; i++) {

    However, with ECMAScript 5 the Array object itself got some methods for iteration purposes. With those methods you often can write cleaner code than by using a for-loop. Let’s have a (short) look at those methods. For details, please follow the provided links.


    The forEach() method calls the provided function for each array element. Using forEach(), we can rewrite the example from above to:

    var myArray = [1, 2, 3, 4];
    myArray.forEach(function (element) {


    The filter() method applies the provided filter function to each array element and returns a new array with all elements for which the filter function returned a true value.

    For example, to get only the even numbers of an array we could write the following code:

    var myArray = [1, 2, 3, 4];
    var evenNumbers = myArray.filter(function (x) {
        return x % 2 == 0;
    // evenNumbers is [2, 4]

    every & some

    The every() and some() methods are similar: whereas the every() method only returns true if the provided testing function returns a true value for each array element, the some() method returns true if there is at least one array element for which the testing function returns a true value. You can see the difference in this example:

    var oddNumbers = [1, 3, 5, 7];
    var mixedNumbers = [1, 2, 3, 4];
    var evenNumbers = [2, 4, 6, 8];
    oddNumbers.every(isEven); // returns false
    oddNumbers.some(isEven); // returns false
    mixedNumbers.every(isEven); // returns false
    mixedNumbers.some(isEven); // returns true
    evenNumbers.every(isEven); // returns true
    evenNumbers.some(isEven); // returns true
    function isEven(x) {
        return x % 2 == 0;


    The map() method applies the provided function to each array element and returns an array with the results.

    For example, to square all values of an array we can do the following:

    var myArray = [1, 2, 3, 4];
    var squared = (x) {
        return x * x;
    // squared is [1, 4, 9, 16]

    reduce & reduceRight

    The reduce() and reduceRight() methods reduce an array step-by-step to a single value by using the provided function and an optional initial value. It works in the following way: the first two array elements (or the initial value and the first array element) are passed as parameters to the provided function. The result of this function call plus the next array element are then used as new parameters for the function. And so on, until there are no more array elements left.

    The difference between reduce() and reduceRight() is that reduce() iterates over the array from left-to-right whereas reduceRight() iterates in the opposite direction, from right-to-left.

    Here is a simple example to calculate the sum of the values of an array:

    var myArray = [1, 2, 3, 4];
    var initialValue = 10;
    myArray.reduce(add); // performs 1 + 2 + 3 + 4 and returns 10
    myArray.reduceRight(add); // performs 4 + 3 + 2 + 1 and returns 10
    myArray.reduce(add, initialValue); // performs 10 + 1 + 2 + 3 + 4 and returns 20
    myArray.reduceRight(add, initialValue); // performs 10 + 4 + 3 + 2 + 1 and returns 20
    function add(x, y) {
        return x + y;

    That’s it. I hope I could give you an overview over the available iteration possibilities in JavaScript. Happy coding!

    Update 2011-04-02: I found a site by Microsoft where you can test those methods in your browser: ECMAScript 5 Arrays


  • 2-legged vs. 3-legged OAuth

    From emails I receive it seems like there is a bit of confusion about what the terms 2-legged OAuth and 3-legged OAuth mean. I hope I can clear up this confusion with this article (and don’t contribute more to the confusion…).

    In short, they describe two different usage scenarios of OAuth involving two respectively three parties.

    3-legged OAuth describes the scenario for which OAuth was originally developed: a resource owner wants to give a client access to a server without sharing his credentials (i.e. username/password). A typical example is a user (resource owner) who wants to give a third-party application (client) access to his Twitter account (server).

    On a conceptual level it works in the following way:

    • Client has signed up to the server and got his client credentials (also known as “consumer key and secret”) ahead of time
    • User wants to give the client access to his protected resources on the server
    • Client retrieves the temporary credentials (also known as “request token”) from the server
    • Client redirects the resource owner to the server
    • Resource owner grants the client access to his protected resources on the server
    • Server redirects the user back to the client
    • Client uses the temporary credentials to retrieve the token credentials (also known as “access token”) from the server
    • Client uses the token credentials to access the protected resources on the server

    2-legged OAuth, on the other hand, describes a typical client-server scenario, without any user involvement. An example for such a scenario could be a local Twitter client application accessing your Twitter account.

    On a conceptual level 2-legged OAuth simply consists of the first and last steps of 3-legged OAuth:

    • Client has signed up to the server and got his client credentials (also known as “consumer key and secret”)
    • Client uses his client credentials (and empty token credentials) to access the protected resources on the server

    Above I used Twitter as an example, though strictly speaking, they don’t use 2-legged OAuth, but a variant of it. They not only provide the client credentials but also the token credentials (see also Using one access token with OAuth).

    As you have seen, 2-legged OAuth is nothing new, it is simply using OAuth in a different scenario than it was designed for. And hence you can use (almost?) all existing OAuth libraries for 2-legged OAuth, too.


  • Bugfix release v2010-12-08 of the OpenID component

    There is a new bugfix release of the OpenID component available:

    This release fixes a bug in the isOpenIDResponse() method. So far this method only recognized OpenID responses from a GET request. But as I had to learn, there are OpenID providers (e.g. Hyves) responding with a POST request… So, if you use the isOpenIDResponse() method, please upgrade to the new version.

    However, this bug not only affected the component itself but also the examples and the example application. They contained code that looked like:

    if ($this->RequestHandler->isPost()) {
        // make OpenID request
    } elseif ($this->Openid->isOpenIDResponse()) {
        // handle OpenID response

    This snippet will fail if the response from an OpenID provider is a POST request. Instead it should look like:

    if ($this->RequestHandler->isPost() && !$this->Openid->isOpenIDResponse()) {
        // make OpenID request
    } elseif ($this->Openid->isOpenIDResponse()) {
        // handle OpenID response

    Please fix this in your code if you followed the examples.

    Thanks go to Sam Mousa for reporting this issue.


  • Navigation with the “j” and “k” keys

    If you are using Vim you already know the meaning of the “j” and “k” keys: they navigate one line downwards resp. upwards. Some websites like The Big Picture adopted this functionality to provide an easy way to navigate, in the case of The Big Picture to jump from photo to photo.

    As I wanted to use the same functionality and didn’t find an existing solution I wrote a simple jQuery plugin for this purpose: jquery-jknavigable. Its usage is pretty simple, to make the posts of a blog navigable with the “j” and “k” keys you would use the following code:


    By default the active element is marked with the class “active” so you can style it differently. If necessary, you can specify your own class name:

    $('.post').jknavigable({'activeClass': 'someClass'});

    That’s it. Feedback is, as always, welcome.

    PS: a good starting point for writing your own plugin is jQuery’s Plugin Authoring page.


© daniel hofstetter. Licensed under a Creative Commons License