String Variable Concatenation

I stumbled across something odd today in PHP:

$r = '';
$r .= $r .= $r .= 'a';

Now, personally, I’d have expected a syntax error from the above code, but the result was even more confusing at first…

print $r; // 'aaaa'

Not sure if this was the expected output or not I tested similar code in other languages:


r = ''
r += r += r += 'a'
puts r # 'a'


r = ''
r += r += r += 'a'
#   File "", line 1
#     r += r += r += 'a'
#             ^
# SyntaxError: invalid syntax


var r = '';
r += r += r += 'a';
alert(r); // 'a'


my $r = '';
$r .= $r .= $r .= 'a';
print $r; // 'aaaa'

That explains it!

So the reason the string is ‘aaaa’ seems to be that the code is evaluated from right to left:

$r = '';
$r += $r += $r += 'a';

// How it works:
// $r += 'a'; // 'a'
// $r += $r += 'a'; // 'a' + 'a';
// $r += $r += $r += 'a'; // 'aa' + ('a' + 'a')

I don’t think it’s a bug, well, at least I assume not, but is there a name for this?

Update: I asked some clever people for help understanding it.

jQuery Ajaxify

Probably not the first person to implement this, but I wanted to make an automatic form AJAX-‘ifier’ that could capture which submit button had caused the submit event to be fired too.

It’s implemented fairly simply:


There’s a demo page or you can just download it and have a look.

Update: As pointed out by Andrea in the comments below, this would return the value of radio and checkboxes even if they weren’t selected. I have released 0.1a and updated the link above to fix this issue. Thanks Andrea!

Update 2: I have updated this plugin, view this post for more information.

Update October 2010: I have updated this plugin for jQuery 1.4.3 as a ‘lite’ version.

jQuery Parallax 0.2 – Minor updates

So I’ve updated the parallax script a little. It’s called in a more jQuery like manner now and has a couple of useful options for inverting the movement and changing the unit of measurement to any jQuery/CSS supported unit.

Example code:

  'elements': [
      'selector': 'body',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 0,
            'multiplier': 0.1,
            'invert': true
      'selector': 'div.outer',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 50,
            'multiplier': 0.02,
            'unit': '%'
      'selector': 'div.inner',
      'properties': {
        'x': {
          'background-position-x': {
            'initial': 0,
            'multiplier': 0.3

You can see a demo of the updated script, or just download the package (includes jQuery 1.3.2).

Edit: I’ve added a post with a couple of working examples here.

Trackr 0.1 – jQuery based user interaction tracking (PHP/MySQL)

Trackr is a very simple, lightweight (well, if you’re already using jQuery) user interaction tracker. It’s not particularly robust and is only in a fairly simple form right now.

The back end is written in PHP using MySQL for storage, but could easily be implemented in other languages.

To log data, you simply add a call to Trackr.init() to the page load event, passing the desired options as the only parameter to the function.

There are a variety of options that can be specified and for more information please see the test page.

You can get it here (includes jQuery 1.3.2).

Parallax 0.1 – Simple parallax effect for jQuery

I’ve seen some very cool parallax effect around lately, especially liking the Silverback site. But none of them are particularly interactive, so I thought I’d make a small implementation of the Parallax effect that interacts with the mouse.

Very early stages (and I haven’t tested it on IE yet… but you could just you conditional comments to exclude ‘those’ people anyway…) but it seems to be working ok. The options aren’t really simple, but they should be fairly self-explanatory…

Check out the demo (it is a very poor demo, please don’t look at the images, imagine it with a lovely hand drawn vector!) and get it here (minified).

Update: Created a quick demo of the silverback homepage with interactive parallax.

Update 2: Tested on IE8, seems to work fine!

Update 3: I have modified the script slightly, you can view the post here.

JSS – Nested CSS using Javascript

Update: I have worked on a newer version with more features and a PHP conversion, here.

Ever wanted nested stylesheets?

I have!

Now you can have them! If you code your stylesheets as JSON and parse them using JSS 0.1. You could have the following:

        'html': {
          'body': {
            background: '#fff',

            'div#header': {
              height: '100px',
              background: '#00f'

            'div#footer': {
              height: '40px',

              'span#copyright': {
                color: '#0f0'
              'span#testing': {
                color: 'black',
                background: '#eeccff'
          width: '800px'

Turned into:

      html {
        width: 800px;

      html body {
        background: #fff;

      html body div#header {
        height: 100px;
        background: #00f;

      html body div#footer {
        height: 40px;

      html body div#footer span#copyright {
        color: #0f0;

      html body div#footer span#testing {
        color: black;
        background: #eeccff;

You can get it here or view the test page here.

jsDebug 0.1 – Dump javascript objects

There have been many times I’ve wanted to debug an object in various browsers, and see why that particular key is null in IE6 or whatever, so I’ve made this small independent ‘Debug()’ function for use in all the major browser

It’s not dependent on any frameworks and gives a simple interface listing all information about objects required. Each call to Debug() adds a new table at the top of the panel showing the information retrieved from the pass variable.

It’s only a first draft and the depth feature doesn’t actually work as object depth yet, but rather as the number of internal objects to dump before not doing any more… Any recursion experts feel free to add this, but please share it 🙂

Not so pretty, functional though...
Not so pretty, functional though...

You can get it here or see it in action too. Oh it’s free, do what you want with it.

Simple Inheritance on Javascript Objects

I’ve been playing a lot with javascript lately and needed to extend an object, retaining all the existing methods but also adding more.

This simple script allows exactly that:

Object.prototype.implement = Function.prototype.implement = function(props) {
  for (var key in props) {
    this[key] = props[key];
  return true;

Object.prototype.extend = Function.prototype.extend = function(props) {
  var obj = new this.constructor();
  obj.prototype = this.prototype;
  if (props) {

  return obj;

It should be used similar to how you would extend a class in PHP i guess:

var Class = function() {

Class.prototype.test = function() {

var Class2 = Class.extend();

Class2.prototype.test2 = function() {

var obj = new Class();

var obj2 = new Class2();

// alerts test
// throws an exception
// alerts test
// alerts test2

I know there are many frameworks that probably already do this better, but if you just need a simple object extension method, this should work.

jsInflections – Ruby style inflections for Javascript

Small class, that handles inflections like ruby for javascript strings, eg:

alert('cow'.pluralize());  // alerts cows
alert('cows'.singularize()); // alerts cow

Pretty simple, all methods except constantize have been replicated.

This file is probably mostly the work of the rails team, so the same license applies to this, as rails itself.

Download (3.3KB)