One opinion I hear every now and then concerning javascript unit testing for the frontend is "It sure is good, but we can't do that. The code is a piece of crap anyway. We should just re-write it, from scratch, with tests".

This is kind of a reckless statement, especially taken out of its' context. But I think it bears som truth in it. Writing testable javascript requires slightly different paradigms and patterns. Applying tests to existing code does often require some refactoring.

1. "Some old cruft we had lying around"

In this post, we gonna look at some weird lightbox code that's been on our page like forever. Now, your javascript looks much better than this :), but chances are you might at one point have written code that looks somewhat similar.

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

/* 
 * Karl Westin
 * Part of the "refactoring javascript for unit testing" blog post
 */

$(document).ready(function() {

    $("#boxlink").bind("click", function(e) {
        var content = "<div class='js-overlay'></div>" +
                      "<div class='js-dialog'>" + 
                          "<a href='#' class='js-close'>Close</a>" + 
                          "<div class='js-content'>" + 

                          // content:
                          "<img height='331' width='500' src='img/spaceshuttle.jpg' title='Space shuttle on a Plane!'>" +
                          "<br>Gorgeous photo of the space shuttle by <a href='http://www.flickr.com/photos/deg_io/5702042693/'>flickr user deg_io</a>" + 

                          "</div>" +
                      "</div>",
            width, 
            height;

        e.preventDefault();
                      
        $("body").append(content);

        $(".js-overlay").bind("click", closeBox);
        $(".js-close").bind("click", closeBox);

        width = $(".js-content").width();
        height = $(".js-content").height();
        $(".js-dialog").width(width)
                       .height(height)
                       .css("margin-left", -width/2)
                       .css("margin-top", -height/2);

        $(".js-overlay").hide().fadeIn();
    });

    function closeBox(e) {
        e.preventDefault();
        $(".js-close").unbind("click");
        $(".js-overlay").unbind("click").fadeOut($(".js-overlay").remove.bind($(".js-overlay")));
        $(".js-dialog").remove();
    }

});

I tried to put some elements in here that you might encounter in your legacy codebase. First of all, everything is wrapped in $(document).ready(). Second, we try to avoid setting any global footprint. Not a single variable is exposed to the world.

2. Creating a class, and exposing it to the test suite

Step one in any testing-oriented refactoring is to make sure you can access what you need to access from the tests. We would also like to make the code a little bit more reusable. That's why we're rewriting it as a class instead.

We also need to expose the Lightbox class to a global, to be reachable. We could (or maybe even should) write it as a part of an AMD module instead. However, this blog post is not about AMD, and I'd like to keep the code simple here.

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

/* 
 * Karl Westin
 * Part of the "refactoring javascript for unit testing" blog post
 */

function Lightbox(boxcontent) {
    var content = "<div class='js-overlay'></div>" +
                  "<div class='js-dialog'>" + 
                      "<a href='#' class='js-close'>Close</a>" + 
                      "<div class='js-content'>" + 
                      boxcontent +
                      "</div>" +
                  "</div>",
        width, 
        height;

    $("body").append(content);

    $(".js-overlay").bind("click", this.closeBox);
    $(".js-close").bind("click", this.closeBox);

    width = $(".js-content").width();
    height = $(".js-content").height();
    $(".js-dialog").width(width)
                   .height(height)
                   .css("margin-left", -width/2)
                   .css("margin-top", -height/2);

    $(".js-overlay").hide().fadeIn();
}

Lightbox.prototype = {

    closeBox: function(e) {
        e.preventDefault();
        $(".js-close").unbind("click");
        $(".js-overlay").unbind("click").fadeOut($(".js-overlay").remove.bind($(".js-overlay")));
        $(".js-dialog").remove();
    }

};

$(document).ready(function() {
    $("#boxlink").bind("click", function(e) {
        var content = "<img height='331' width='500' src='img/spaceshuttle.jpg' title='Space shuttle on a Plane!'>" +
                      "<br>Gorgeous photo of the space shuttle by <a href='http://www.flickr.com/photos/deg_io/5702042693/'>flickr user deg_io</a>";

        e.preventDefault();
        new Lightbox(content);
    });
});

One nice side effect of the unit-testing is that the code gets executed multiple times. That gets us some kind of verification that the code is somewhat clean, and it can help us detecting unintentional modification of the prototype.

3. What and how to test - finding the endpoints

So, after this first, very basic, refactoring, I would like to add some tests before moving on. Before doing this, we need to define what behavior we'd like to test, and also (which I'm kind of missing in the discussion around testing), how we would like to test the behavior. Here's the behaviors we'd like to test:

• Creating the necessary DOM

• Adding the content

• Auto-resizing the lightbox

• Closing the box when clicking the "close" link or overlay

• Removing the necessary DOM when closed

How do we test this in the best way? One "rule" in the testing community that you've surely heard is to test behavior, not implementation. This makes the tests more robust, and makes it easier to refactor code without rewriting the tests.

I'd like to think of it as finding the endpoints in the code. If I'm testing ajax, the endpoint is the ajax call itself (native or jquery depending on how I'm building it). The path from the interface call to the ajax call is implementation, and I try to leave that out of the test suite.

Let's look at a couple of examples:

• Creating necessary DOM:

  1. Creating a lightbox
  2. Making sure the overlay is there
  3. Making sure the content box is there
  4. Making sure the close button is there

• Adding the content:

  1. Creating the lightbox (with known content)
  2. Making sure the content is placed

• Auto-resizing the lightbox:

  1. Creating the lightbox (with content with known size)
  2. Checking the size of the lightbox
  3. Checking margins for positioning

• Closing the box when clicking "close"

  1. Creating the lightbox
  2. Clicking the close-button
  3. Asserting "close" got called, we'll do this for now by seeing if the overlay got removed.

• Repeat the same steps for the overlay

• Removing necessary DOM when closed

  1. Creating the lightbox
  2. Closing it
  3. Making sure overlay is removed
  4. Making sure content box is removed

So let's write those tests. I'm using Jasmine, but it should be simple to rewrite them to QUint, JSTestDriver or whatever you feel like.

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

describe("Lightbox tests", function() {

    beforeEach(function() {
        var content = "<div style='width: 100px; height: 110px; position: relative; display: inline-block; background-color: #fff;'>My test-content</div>"

        // for unit-testing purposes, we turn jQuery.fx off
        $.fx.off = true;

        setFixtures(sandbox());
        this.$sandbox = $("#sandbox");
        this.lightBox = new Lightbox(content, this.$sandbox);
    });

    afterEach(function() {
        $.fx.off = false;
    });

    it("should create the necessary elements", function() {
        expect(this.$sandbox).toContain(".js-overlay");
        expect(this.$sandbox).toContain(".js-close");
        expect(this.$sandbox).toContain(".js-dialog");
    });
    
    it("should contain the content", function() {
        expect(this.$sandbox).toHaveText(/test-content/i);
    });

    it('should auto-resize the box', function() {
        expect($(".js-dialog").width()).toEqual(100);
        expect($(".js-dialog").height()).toEqual(110);
    });

    it("should remove the box when clicking 'close'", function() {
       $(".js-close").click();
       expect(this.$sandbox).not.toContain(".js-overlay");
    });
    
    it("should remove the box when clicking the overlay", function() {
       $(".js-overlay").click();
       expect(this.$sandbox).not.toContain(".js-overlay");
    });

    it("should remove the lightbox completely", function() {
       $(".js-close").click();
       expect(this.$sandbox).not.toContain(".js-overlay");
       expect(this.$sandbox).not.toContain(".js-dialog");
    });

});

Small notes in this steps:

I did a few extra changes to the source for further testability. First, I added an optional "parent" parameter to the Lightbox constructor. This just a convenient thing to be able to add the lightbox to a fixture instead of the specrunner DOM.

I'm using jasmine-jquery for fixtures. Fixtures can be either a specially loaded template (or html file), or just an empty, as in our case, that you can use to test DOM manipulations that you need to perform. With Jasmine-jQuery, you can load the actual template or html file where the script is going to be used, and make sure that you test the real html. This could be useful for integration tests with Jasmine. Also, some of the testing matchers: toHaveText for example, comes from jasmine-jquery.

Lightbox (constructor)
  close     (method)
  $closeBtn (prop)
  $overlay  (prop)
  $dialog   (prop)

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

/* 
 * Karl Westin
 * Part of the "refactoring javascript for unit testing" blog post
 */

function Lightbox(boxcontent, $parent) {
    this._addElements(boxcontent, $parent);
    this._autoSize();
    this._bindEvents();
}

Lightbox.prototype = {

    _addElements: function(boxcontent, $parent) {
        var content = "<div class='js-overlay'></div>" +
                      "<div class='js-dialog'>" + 
                          "<a href='#' class='js-close'>Close</a>" + 
                          "<div class='js-content'>" + 
                          boxcontent +
                          "</div>" +
                      "</div>",
            width, 
            height;

        $parent = $parent || $("body");
        $parent.append(content);

        this.$closeBtn = $parent.find('.js-close');
        this.$overlay  = $parent.find('.js-overlay');
        this.$dialog   = $parent.find('.js-dialog');

        this.$overlay.hide().fadeIn();
    },

    _autoSize: function() {
        var $content = this.$dialog.find(".js-content"),
            width =  $content.width(),
            height = $content.height();

        this.$dialog.width(width)
                    .height(height)
                    .css("margin-left", -width/2)
                    .css("margin-top", -height/2);
    },

    _bindEvents: function() {
        this.$overlay.bind("click", this.close);
        this.$closeBtn.bind("click", this.close);
    },

    close: function(e) {
        if(e) {
            e.preventDefault();
        }
        $(".js-close").unbind("click");
        $(".js-overlay").unbind("click").fadeOut($(".js-overlay").remove.bind($(".js-overlay")));
        $(".js-dialog").remove();
    }

};

$(document).ready(function() {
    $("#boxlink").bind("click", function(e) {
        var content = "<img height='331' width='500' src='img/spaceshuttle.jpg' title='Space shuttle on a Plane!'>" +
                      "<br>Gorgeous photo of the space shuttle by <a href='http://www.flickr.com/photos/deg_io/5702042693/'>flickr user deg_io</a>";

        e.preventDefault();
        new Lightbox(content);
    });
});

Permalink | Leave a comment  »

I recently needed to build an app with nested collections and models using Backbone.js, and adding a persistence layer with Backbone.LocalStorage, so that the data created would stay in the browser for the user. When doing this, I was stumbling around a little, and I found an open issue on the Backbone.LocalStorage github page saying that support was missing. However, my conclusion after doing this is that Backbone.LocalStorage already supports nested collections and models, and that it works really well.

Please see the example below. For each Team that is created, a new LocalStorage instance is made. Each team needs their own storage for this to work. When the premier-collection is fetched on application start, the teams are fetched recursively on when each Team-model is created.

Teams are recursively saved with the League.saveAll() method. Note that this save both the team model, and each of the player models in the team's player collection. With this, one idea could be to bind the League.saveAll method to certain important events, for example window.onunload, that way you only save data when necessary.

This example only supports one league, but it could be taken further by creating a League model, with a "teams" collection. Those could then be managed by a Federation collection at the top.

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

/*
 * Example of using nested collections/models with backbone.js and backbone.js localStorage
 *
 * Read the complete blog post at karlwestin.posterous.com
 *
 * 1. run populate() from command line first time
 * 2. reload the page (or open in another browser tab), and check the following:
 *
 * premier.at(0).get("name") => "Tottenham"
 * premier.at(0).players.length => 3
 *
 */

var teams = [{ name: "Tottenham" }, { name: "Manchester United" }],
    players1 = [{ name: "Ryan Giggs" }, { name: "Wayne Rooney" }, { name: "Michael Owen" }],
    players2 = [{ name: "Emmanuel Adebayor" }, { name: "Ledley King" }, { name: "Rafael van der Vaart" }],
    Team,
    League,
    premier

Team = Backbone.Model.extend({

    initialize: function(config) {
        this.players = new (Backbone.Collection.extend({
            localStorage: new Backbone.LocalStorage(config.name)
        }))()
        this.players.fetch()
    },

    saveAll: function() {
        _.each(this.players.models, function(player) {
            player.save()
        })

    },

    add: function(models) {
        this.players.add(models)
    }

})

League = Backbone.Collection.extend({

    localStorage: new Backbone.LocalStorage("league"),

    model: Team,

    saveAll: function() {
        _.each(this.models, function(team) {
            team.save()
            team.saveAll()
        })
    }
})


premier = new League()
premier.fetch()


function populate() {
    premier.add(teams[0])
    premier.add(teams[1])
    premier.at(0).add(players2)
    premier.at(1).add(players1)

    premier.saveAll()
}

Update: Scott Nelson was reviewing this post (Thanks man!), and pointed out while it doesn't matter with local storage, the technique shown here makes unnecessarily many server calls when used against a server API. If i understand him right, he meant that the "Players" collection could be created on parse (Backbones handler for pre-processing the data returned from a fetch() call). I think this technique sounds really interesting, however I haven't really grasped how to recursively save the models and collections then. Please post any ideas around this in the comments! 

If you want to see a further developed example, please see my music player example

Permalink | Leave a comment  »

If you use jsbin.com (by Remy Sharp) every day, like I do, you may have wanted line numbers at some point. Well, it turns out you can have it, I created this bookmarklet for convenience: 

1
2
3
4

// Since Posterous don't support javascript:
// Just add whatever link as bookmark, and paste this as the link instead

javascript:(function() { editors.javascript.setOption("lineNumbers", true); editors.html.setOption("lineNumbers", true); })();

Since JSBin is based on Codemirror, you can set any of the options that Codemirror allows you to set, including line-wrapping, tab-size and color theme. Check out the Codemirror options page for all the details.

Permalink | Leave a comment  »

I would like to show a neat trick on looping through arrays, not using one value every time but sometimes one, sometimes two and so on.

I found this while doing the Bowling Game Code Kata. A kata is like a code practice, you try to solve a problem in many different ways to see what you find. I find this very interesting, cause I'm learning test driven development at the moment, and it's perfect to try different implementations once you got your tests set up.

A guy named Zach Leat has set up a very nice repository of javascript katas, and I will show you part of his Bowling Game, very true to the original Java implementation:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

// This is the implementation from https://github.com/zachleat/JavaScript-Code-Katas

Game.prototype.score = function()
{
    var points = 0,
        frameIndex = 0;

    for(var frame = 0; frame<10; frame++) {
        if(this.isStrike(frameIndex)) {
            points += this.strikeBonus(frameIndex);
            frameIndex++;
        } else if(this.isSpare(frameIndex)) {
            points += this.spareBonus(frameIndex);
            frameIndex += 2;
        } else {
            points += this.sumOfBallsInFrame(frameIndex);
            frameIndex += 2;
        }
    }

    return points;
};

What you see above is the "score" function, the way the bowling scores are summed up. As you see, when you hit a strike, you use one value from the array, and then you add up the following two but not passing by them. When you hit a spare, you use two values from the array, and then adding one following value, without passing by it. 

A nicer way of doing this, without having to deal with a counter variable, is simply shifting the array. That way you don't have to count, because you always use the latest values, like this:

1
2
3
4
5
6
7
8
9
10
11
12
13

var score = function() {
          var score = 0;

          for(var i = 0; i < 10; i++) {
              if(rolls[0] === 10)
                  score += rolls.shift() + rolls[0] + rolls[1];
              else if(rolls[0] + rolls[1] === 10)
                  score += rolls.shift() + rolls.shift() + rolls[0];
              else
                  score += rolls.shift() + rolls.shift();
          }
          return score;
};

The shift, unshift, push and pop functions are really great for working with arrays, though i have to admit it took me long to memorize. I think most people know push and pop. Here's an overview:

1
2
3
4
5
6
7

var arr = [1,2,3,4,5,6,7];

var first = arr.shift(); // first = 1, arr = [2,3,4,5,6,7]
arr.unshift(0); // arr = [0,2,3,4,5,6,7]

arr.push(8); // arr = [0,2,3,4,5,6,7,8]
var last = arr.pop() // last = 8, arr = [0,2,3,4,5,6,7]

Hope that helps with something! Anyway if you sit on any good code katas, i would really appreciate if you post them in the comments! Looking forward to it!

PS. Here's my entire bowling score kata, if you find it useful!

Permalink | Leave a comment  »

Bitwise NOT: ~

The bitwise "not"-operator has some pretty weird but interesting side effects. Its basic functions on numbers can be described as:

~N = -(N+1)

Now, the way you see this operator used is more often than not for flooring numbers:

~~10.23342 // returns 10

The reason this works is because all bitwise operations are performed on 32-bit integers in javascript:

~10.23342 // => -11 (Rounded when converted to integer)
~-11 // => 10 (-(-11+1) = 10)

Taking this one step further, this can be used to convert -1 to false. Functions like Array.indexOf, String.indexOf and String.search returns -1 on "not found".

var facon = "sundriedtomatoesisvegetarianbacon";
if(~facon.search("bacon")) eat(facon); 
// HAHA! tricking meat eaters into eating vegetarian

@webreflection Has written much better about the javascript tilde trick, and it's also mentioned by Dreaming Javascript

Bit-shifting ( >>, >>>, << )

One possible use-case for bitshifting in javascript is when working with hex colors, for example can we use bit-shifting to filter out Red, Green and Blue values:

Filtering out hex values:

111111111111111111111111

32-bit (16 777 215 in Base 10)

R        G        B
11111111 11111111 11111111

Mask for filtering G-value:
00000000 11111111 00000000

Combine with bitwise & (Only saving the spots where BOTH numbers are 1)
Example: Base-10 color-value: 16737792 – the orange color in the "Hacker News"-logo

00000000 11111111 00000000 // Mask
             &
11111111 01100110 00000000 // Color value
                         =
00000000 01100110 00000000 // result => 26112

Bit shift it to get only the "green"-value:
26112 >> 8 => 102 // removing the lowest (rightmost) 8 bits

Raphael.js uses bitshifting for the reverse operation, converting an object like { R: 10, G: 20, B: 255 } into a hex value:

rgb.hex = "#" + (16777216 | blue | (green << 8) | (red << 16)).toString(16).slice(1);
(Line 855, Raphael.js)

The bit-operator part is: (16777216 | blue | (green << 8) | (red << 16))

Dimitry is using the | (and/or) operator to add up a hex number:

So let look at this:
First we create a mask, that we add the numbers to: in base(2) 1000000000000000000000000. This is one number bigger than the highest RGB-color value on Base(10). We'll soon see why.

The "blue" value is a normal color-value, for example 255:

16777216 | 255 means:

1 00000000 00000000 00000000
                        | (inclusive or)
0 00000000 00000000 11111111
                        =
1 00000000 00000000 11111111

The green value needs to be shifted 8 bits to the left: 66

66 << 8 => 16896

1 00000000 00000000 11111111 // number after adding blue value:
                        |
0 00000000 01000010 00000000                        
                        =
1 00000000 01000010 11111111

(And the same thing repeated with the red color, that needs to be shifted 16 bits.)

  Red      Green    Blue        
1 01100100 01000010 11111111                        

This number is now converted to Hex with (number).toString(16):
(parseInt("1011001000100001011111111", 2)).toString(16) 
// we need to convert out binary number to Base 10 first, hence parseInt

Now we'll delete out initially added "1 time bigger" number:
(parseInt("1011001000100001011111111", 2)).toString(16).slice(1)

And add a # to the start, then we'll have a hex number.

Bit-shifting is extensively used in Mozilla's pdf.js and also appears in Mr Doob's Three.js. I'm sure it's relevant in those extremely performance-heavy use-cases, because when you start creeping up towards tens of millions of loops per second, the difference between shift-right 2 bits and divide by four (which is the same operation on integers) starts to make sense

Permalink | Leave a comment  »

Most people i have a professional relationship with know that i nurture an almost passionate hate for Wordpress. Sometimes even other people ask me for my opinion, hence this blog post.

So, the answer to "Can I use wordpress?", seems to be other questions:

You run your won company, wanna create a quick site yourself, and don't wanna pay a consultant/agency?

YESSS!!! Actually you SHOULD use wordpress. And you should use a *.wordpress.com-hosted blog, and have a friend setting up a custom domain name for you. It will be limited, but it will always be better and more hassle-free than any self-hosted wordpress installation with all the fancy functionality you can dream of. In fact, wordpress.com is the ONLY "create-your-own-website"-service i can recommend.

You want to accept payments on your site?

NO. To accept payments from a wordpress site, it will need to be self-hosted. Getting the security right on a self-hosted Wordpress blog is very hard. Get help. From someone else. I'm not an expert on internet payment systems, unfortunately.

You're looking for an extendable, lightweight, CMS?

NO. Wordpress is very extendable, but the problem is that the plugins are often very low quality, and when you need to upgrade a system, you're likely to end up having a broken website with 15/20 plugins broken because of Wordpress changes, or because they were badly written from the beginning. 

You're looking to have more than 1000 visits/day?

NO. Well i know there's a plugin called WP-Super Cache. Still, every day i see wordpress blogs crumbles under the load of 5-10 000 Hacker News visitors. It's just not easy to get it right. And if you do, you're very likely to break your site's security. The problem, must be admitted though, is also often in Apache settings rather than Wordpress. Did you have better load tolerance with other servers? Please comment!

You already know Wordpress, and want to get started now?

YES. See first question. Use a wordpress.com site and buy a custom domain. When it's time to add payments, bookings and other things, Wordpress has excellent export tools for getting your content out and move it to another system. 

Your question not here? Ask it in the comments! If i have a good answer, i'll add it!

Options to check out:

• Jekyll: Generating static pages from Markdown. For extremely lightweight, fast blogging that can take a hit from reddit, digg or whatever. For self-hosted sites.
• MojoMotor: Small, extendable, lightweight CMS based on the CodeIgniter PHP framework, for self-hosted sites.
• ExpressionEngine: Also based on CodeIgniter. Full blown stuff, extendable for e-commerce, booking, applications etc. Self-hosted.
• BigCartel: E-Commerce as a service. Good templates, they host it = take care of the hassle :)
• Shopify: Same as above. Note that i haven't tried any of these two myself, but that'd be the first place i'd look if i needed to

Permalink | Leave a comment  »

Faith gave me the chance to lay my filthy hands on a Nokia N9 this weekend. Not very long, but at least it gave me some impressions:

First of all the UI as smooth and snappy as in the videos

It looks really great to use! Trying to push it, the only time i saw a hiccup was the first time i got the notifications drawer out. I'm not enough of an iOS user to be able to compare, but my impression was that speed and animations were better than on my Nexus S running Android 2.3.4

Swipe to switch apps rocks

Swipe to switch apps is like the Dude's carpet. It really ties the phone together. It works like this: when you swipe on the screen, it is a normal swipe that for example browses photos in a gallery. When you swipe from the edge of the screen, it switches apps. The difference felt very distinct and far easier to perform than the 4-finger-swipe-to-switch-apps in iPad on iOS 5. 

Browser: 3D CSS Transforms, CSS Animations, Homescreen apps 

So during the few minutes i had i had the chance to run a html5test.com test. I don't remember the exact score, but it was something around 300. Accordning to the site, iOS 5 scores 303, so i guess they're around the same. The features are quite different though. Let's do some comparison:

According to the Nokia engineer i spoke to, the phone supports CSS3 3D transforms and CSS3 transitions and animations. I can't applaud this enough. He also claimed the phone to have good support for the application cache manifest, as well as Local Storage + WebSQL. This means that Nokia goes down the Apple path, and don't support the IndexedDB type of local database used by Google and Mozilla. According to the engineer i spoke to, they also included javascript touch-events and gesture-events, detecting up to 5 fingers on the screen.

One peculiar thing is that you can't actually bookmark a web-page. Only place it as a home-screen app. In the category "no's" we'll also find Websockets and WebGL. I honestly forgot to check whether it supported the DeviceMotion and DeviceOrientation javascript APIs for the accelerometer. So if you get the chance to check that out, please let me know!

On the video side, the browser supports the MPEG4, H.264 and Ogg Theora codecs. That means no WebM.

The browser priorities are right 

Whether this makes the phone and its' browser good or not is too early to say. But as a web developer i say that i have the impression that Nokia got their priorities right. CSS3 transitions and 3D animations might be eye-candy, but it's really important for creating user-friendly, touch-enabled websites that even comes close to the feel of native apps. While i pity the exclusion of websockets, I wouldn't prioritize WebGL for mobile on this point. Don't get me wrong, i think WebGL is one of the most interesting technologies to show up lately, but it still has to prove its' user value beyond cool demos and videos.

Permalink | Leave a comment  »

So, yesterday microsoft released the first platform preview of IE10. I'm happy to see they seem to adopt shorter release cycles. Let's see what they put in there for now!

I was a little bit lazy, so i basically jsut went to modernizr.com and checked the new feature list. Microsoft seem to keep their habit of adding proprietary prefixes and stuff, but on the other hand, so does webkit and firefox too. Let me just say it sucks.

Well. This is just the very very first platform preview, so i hope there's more to come. At the moment it still looks pretty lame I'd say.

Feature table, according to modernizr:

Permalink | Leave a comment  »

Since iOS 4.2, Mobile Safari supports accelerometer events. The native browser on Android doesnt do that yet. (I've heard that it does accelerometer in WebViews, ex via phonegap, but i couldn't confirm this now) Firefox 4 (currently in Beta 13, 28 March 2011) does support accelerometer events! Of course, this is awesome, not least for building games on websites!

So, this is how you do it:

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

//Accelerometer Javascript example by @karlwestin, Nerd Communications, Berlin

// Firefox, works on desktop too
window.addEventListener("MozOrientation", updateText, true);

// Mobile Safari
window.addEventListener("devicemotion", updateText, true);

function updateText(e) {

	if(!!e.x)
		// Firefox
		updateCounter(e.x*10, e.y*10, e.z*10);
	else if (!!e.accelerationIncludingGravity)
		// Mobile Safari
		updateCounter(e.accelerationIncludingGravity.x, e.accelerationIncludingGravity.y, e.accelerationIncludingGravity.z);	
	else
		alert("you don't really support devicemotion, do you?");

}

function updateCounter(x, y, z) {
	document.getElementById("xAxis").innerHTML = x;
	document.getElementById("yAxis").innerHTML = y;
	document.getElementById("zAxis").innerHTML = z;
}

You can view the demo here: http://nerdcommunications.com/demos/accelerometer/

You can download the demo source here: http://nerdcommunications.com/demos/accelerometer/demo.zip

Permalink | Leave a comment  »

Permalink | Leave a comment  »

have you seen any of you're facebook friends clicking something like this lately?

Hmm... maybe not something you wanna show off to your friends. But how come?

It comes in various size and colors, Chinese Videos that makes you fall asleep (you MUST see it!), cutest pets, whatever. But what is it, and what do the people behind this want?

Since this one seems to be pretty common, plus that it's working in a lot of different versions currently. I wanted to look through it a little!

0. What is it?

Basically, some people want to fool you into filling out a survey, to see some old crappy content. The content is usually not even theirs.

The scam doesnt seem to attempt to steal anything from you PLEASE LOOK THIS UP, PEOPLE WITH THE RIGHT KNOWLEDGE.

Btw that porn-site you were looking for is here: http://www.maxim.com/girls/girls-of-maxim/92660/2010-hot-100.html

Here's what happens!

1. The moving "like button"

Wonder when you ever clicked "Like" on that link? You just clicked the normal link? No, you clicked the "like" button, which moves around with javascript:

    function lololol(e){

    if (window.event) 

    { // for IE

        aaaa.style.top = (window.event.y-5)+standardbody.scrollTop+'px';

        aaaa.style.left = (window.event.x-5)+standardbody.scrollLeft+'px';

    } 

    else 

    {

        aaaa.style.top = (e.pageY-5)+'px';

        aaaa.style.left = (e.pageX-5)+'px';

    }

    }

       document.onmousemove = function(e) {

        if (xxx == 0) {lololol(e);}

    }

Moves the button around. Then it redirects you:

function updateActiveElement()

{

    if ( $(document.activeElement).attr('id')=="xxx" ) 

    {

        clearInterval(interval);

        xxx=1;

window.location = "gallery.html";

    }    

}

2. The "tamper-proof" survey page

Is just an iframe with the link above. But there's some interesting JavaScript going on. It checks the following things:

• That you haven't got an adblocker
• If you're using mozilla firebug or other javascript console
• If you're moving around the elements using this console or css editor

3. WTF is "surveys for charity?"

It's a website set up by the CPA leads (the company behind this). CPA Leads doesn't seem to be a serious company in any way. Registrar info for "surveys for charity": (whois.domaintools.com)

Domain Name:SURVEYSFORCHARITY.ORG
Created On:22-Jan-2010 20:19:29 UTC
Last Updated On:24-Mar-2010 03:48:04 UTC
Expiration Date:22-Jan-2012 20:19:29 UTC
Sponsoring Registrar:GoDaddy.com, Inc. (R91-LROR)
Status:CLIENT DELETE PROHIBITED
Status:CLIENT RENEW PROHIBITED
Status:CLIENT TRANSFER PROHIBITED
Status:CLIENT UPDATE PROHIBITED
Registrant ID:CR40825751
Registrant Name:CPAlead LLC
Registrant Organization:CPAlead.com
Registrant Street1:6845 Escondido Street
Registrant Street2:#107
Registrant Street3:
Registrant City:Las Vegas
Registrant State/Province:Nevada
Registrant Postal Code:89119
Registrant Country:US
Registrant Phone:+1.8669964666
Registrant Phone Ext.:
Registrant FAX:+1.2629224231
Registrant FAX Ext.:
Registrant Email:

4. Why the fuck are they doing this?

I don't know if there is any money in this. The company, CPA Lead, has at least fooled some people into believing that they can make money by serving up others peoples websites through a CPA Lead script. How much CPA themselves get from this, i don't know... Seems like they only wanna waste your time. By spreading it through facebook, using your friends as referalls, they can quickly get a lot of clicks. Its hard to find any information on how much each of these surveys pay, but it seems to be a couple of dollars, or some cents. 

The site 101hottestwomen.com is registered using a name protection service. That seems to be the case with these kind of things.

All the files i've found can be downloaded on: karlwestin.dienstleistungen.ws/scam_decon.zip

Permalink | Leave a comment  »

Permalink | Leave a comment  »

How to solve:
1. Changing the python:
Go to your application folder, and open the models.py file.

• Change all the table fields that uses the user id from models.IntegerField to models.CharField(max_length=64);
example:
        user_id = models.IntegerField
will be:
        user_id = models.CharField(max_length=64)

Then go to the fbcon folder of your web root.
Find the line that says:
        id = models.IntegerField
into
        id = models.CharField(max_length=64, primary_key=True)

2. Altering the mySQL database:
Log on to your mysql database:
        mysql -u username -p
        use databasename;

First, you'll have to change to pyFacebook user table:
      ALTER TABLE fbcon_use MODIFY id char(64);

Then change the other fields needed in your app with the same command.

That's it, Cheers!

Permalink | Leave a comment  »

All posts connected to a certain location:
This one is the easily most interesting one according to me.
GeoMashup::join_post_queries(true);
query_posts('geo_mashup_saved_name=Your Location');
change Your Location into something you've put into your database. Yes you can use that space sir!
combined with others:
GeoMashup::join_post_queries(true);
query_posts($query_vars.'&geo_mashup_saved_name=Your Location&post_type=post');
and so on... You can combine these with any normal wordpress query parameters.

Other options are:

• geo_mashup_locality (city)
• geo_mashup_country_code (country code)
• geo_mashup_date ("Geo Date" don't ask me why :D)
• geo_mashup_admin_code (administrative area/state code)
• geo_mashup_postal_code (postal/ZIP Code)

You can also order posts by location

GeoMashup::join_post_queries(true);
query_posts($query_vars.'&orderby=geo_mashup_saved_name');
Orders the post by the Location name.
Other possible values:
geo_mashup_country_code
geo_mashup_locality
geo_mashup_date
geo_mashup_admin_code
geo_mashup_postal_code

Thats all for this time :) Thanks!

Permalink | Leave a comment  »