Anonymous function calls in PHP

Anonymous function calls are a well-known pattern in JavaScript but there are also use cases in PHP where they make sense. Of course PHP 5.3 with its Lambda Functions is required!

But let me first introduce the pattern shortly:

In JavaScript you often have code that just has to be executed when loaded but you really don’t want to pollute the global namespace. The solution is to create an anonymous function and call it directly:

(function() {
  var some, local, variables;
  // do something
})();

Why should you want this in PHP?

Imagine an application that is not fully object oriented (yes this is the reality and yes, sometimes that even makes sense) and has some include files which execute code directly. Now if you don’t unset all local variables at the end you leave a big mess in the global namespace. See the analogy?

Unfortunately the following is not posible with PHP Lambda Functions:

(function() {
  $localvar = 'foo';
  // do something
})(); // Parse error: syntax error, unexpected '('

But there is still good old call_user_func(). Since Lambda Functions are objects of the Closure class which again is of the callable “type”, it fits perfectly our needs:

call_user_func(function() {
  $localvar = 'foo';
  // do something
});

Now what if there are variables from the outer scope that you need or want to change? Of course you could use the global keyword but that only works if you are refering to the global scope and there is a better way: The use keyword.

Look at this example:

// test.php
function test() {
  $readMe = 'Hello';
  $writeMe = 'World';
  include 'include.php';
  echo 'index.php: ', $readMe, ' ', $writeMe, "\n";
}
test();

// include.php
call_user_func(function() use ($readMe, &$writeMe) {
  $temp = $readMe . ' ' . $writeMe;
  echo 'include.php: ', $temp, "\n";
  $readMe = 'Good Bye';
  $writeMe = 'Internet';
});

test.php results in the following output:
include.php: Hello World
index.php: Hello Internet

Let’s go through it step-by-step:

The $readMe and $writeMe variables are present in the local scope of test(). Since we also include include.php there, the scope stays the same within this file.

Using the anonymous function call we then open a new scope but take over $readMe and $writeMe with the use statement. Any other local variable from test() will not be present!

It is important to know that variables passed with use work similar to function parameters, so a copy is used by default (call-by-value). You can change this behaviour to call-by-reference exactly like in function declarations with a “&” denoting a reference.

Now our function prints the contents of $readMe and $writeMe to the screen (“Hello World”) and assigns new values to both variables.

Afterwards, back in test() the $writeMe variable that was passed by reference will hold this new value whereas $readMe is still the same because it was passed by value. Therefore the output is “Hello Internet”.

Of course $temp will not be set, it was a local variable in the anonymous function scope and destroyed after its execution.

One step further

To keep code maintainable the inclusion of files should not have side effects on variables which is on one hand assured by the anonymous function call but on the other hand bypassed again with use parameters by reference. To keep this transparent I recommend doing the wrapping around the include statement instead of (or even additional to) inside the included file:

// test.php
// ...
  call_user_func(function() use (&$writeMe) {
    include 'include.php';
  });
// ...

Now regardless what include.php contains it is clear that it will only have effects on $writeMe

Conclusion

If you work with procedural code and include files (and let it be just configuration files) anonymous function calls are a good way to keep the code more maintainable. They constrain unwanted side effects and make wanted side effects more visible without further documentation. So the two extra lines should really be worth their effort!

Update

Someone at reddit pointed out namespaces so let me clarify: Namespaces do not solve this problem!

Only classes, functions and constants are namespaced, a namespace does not have its own scope, so they share any variables within the parent scope!

CSS: 3D Ribbon Generator

Inspired by this article on pvmgarage.com I recently created a generator for 3D CSS ribbons and made it available on css3d.net. It creates CSS and HTML code for a cross-browser compatible ribbon effect (not limited to CSS 3!) based on parameters for sizes and colors. The red headers you see in this screenshot are also generated like that:

Have fun with it and feel free to comment if you have any suggestions.

If you are interested in how it works, visit the aforementioned link or read about the CSS Triangle trick at css-tricks.com.

CSS: Pseudo Bold Fonts

Sometimes you want to emphasize text but the bold version of a font is too “big”. With CSS 3 there is a simple way to thicken the regular font.

.pseudo-bold {
  text-shadow: 1px 0 0;
  padding-right: 1px;
  letter-spacing: 1px;
}

It creates a duplication that is shifted 1 pixel to the right, the padding and letter-spacing properties prevent overlapping. Of course such hacks will never look as nice as a real typographic bold font, so there are always other possibilities to consider. A way to make wide bold fonts more unobstrusive is reducing the letter spacing:

.narrow-bold {
  letter-spacing: -1px;
}

Here is a complete example with the Georgia font-family

<style type="text/css">
	#pseudo-bold-example {
		font-family:Georgia; font-size: 24px;
	}
	.bold {
		font-weight: bold;
	}
	.pseudo-bold {
		text-shadow: 1px 0 0;
		padding-right:1px;
		letter-spacing:1px;
	}
	.narrow-bold {
		font-weight: bold;
		letter-spacing:-1px;
	}
	.narrow-pseudo-bold {
		text-shadow: 1px 0 0;
		padding-right:1px;
	}
</style>
<div id="pseudo-bold-example">
	<p>Lorem Ipsum - normal text<br />
	<span class="bold">
		Lorem Ipsum</span> - bold text<br />
	<span class="pseudo-bold">
		Lorem Ipsum</span> - pseudo-bold text</span><br />
	<span class="narrow-bold">
		Lorem Ipsum</span> - narrow bold text<br />
	<span class="narrow-pseudo-bold">
		Lorem Ipsum</span> - narrow pseudo-bold text</span></p>
</div>

This is how it should look like:

pseudo-bold.png

For my current project I eventually decided to go with the narrow bold version, instead of the pseudo bold one. Bonus points: It is fully compatible with CSS 2.