I recently discovered a very nice tool for GUI prototyping, called Pencil. It can be installed as a Firefox AddOn or as a standalone software. The Firefox XPI is unfortunately not in the Mozilla repositories which means you have to install it from their site, which also means no package verification and no automated upgrades.

Apart from that, Pencil is a very nice tool. It’s a very easy to use it allows to create interface prototyping in no time. Of course, you should know what wireframes are and what they are used for.

To demonstrate how quick you can create drafts for a website layout, let’s assume we are creating a booking site for events and we want to create a first draft of the home page. Here’s what you could get after 15 minutes sketching with Pencil. (Yes, that is Comic Sans MS. As awkward as it sounds: this font is actually suitable for this sort of work.)

Of course, Pencil doesn’t offer the fancy features of elaborate drawing software like, for example, Inkscape. In fact, it doesn’t offer much more than a collection of common web UI elements which can be easily placed, resized, aligned and colored. The great thing about this is that you don’t need a tutorial or FAQ to get started – Pencil is completely self-explanatory.

It has multi-sheet documents, and you can copy/paste elements from one sheet to another one, which allows to quickly create variations of one screen. A variety of exporters (ODF, PDF, HTML) will help you to discuss your ideas with co-workers or customers.

Although Pencil still misses a number of essential features like guides, more shortcuts or better configurability, it is an ideal tool to put your ideas to paper.

As a Gentoo user, you sometimes emerge packages which you don’t want to be in the world set, you just emerged them because you needed to fix or test something. (Of course, there’s the -1 flag, but you don’t always remember to use it.) With time, these packages become unneccessary, pull in useless dependencies and cause stupid conflicts. Therefore you should remove them from the @world set.

The @world set is stored in a plain text file located at /var/lib/portage/world. You should be aware that manipulating it may cause problems, therefore you’re advised to make a backup before editing. Also, you should do a full update of your system with emerge -uND world. Now you can open the world file in an editor of your choice, as root.

You may delete entries for packages you don’t need anymore, line by line. In order to actually remove those packages and their dependencies from your system, you must run depclean and revdep-rebuild:

emerge -a --depclean
revdep-rebuild -- -q --keep-going

After this, you will have a much leaner system.

Bonus hint: Also check your /etc/make.conf as well as your /etc/portage/package.use for no longer needed USE flags. These also tend to cause conflicts and stuff your system with needless dependencies. (Remember to run emerge -auND world; emerge -a --depclean; revdep-rebuild -- -q --keep-going afterwards.)

Google’s + operator is appearently no longer supported.

For those who didn’t know, Google used to have a + operator which you could place directly in front of a word and which had two features: it would make sure that the word was included in every result, and it would make sure that only results with the exact spelling of that word would be returned. This feature is not the same as using the quote operator, because that one only enforces the exact spelling – but it does not make sure the word is included in each result.

Of course, not always both features were desired at the same time – for example, you may have wanted to make sure the word was included in the results, but you would have accepted alternative spellings. But even then, the + operator was be a nice addition for a search strategy.

I like search engines who provide advanced tools for fine-tuning searches. And this move of Google is one in a direction I don’t like.

There are lots of URL redirecting services – all of them do the job. But if you still want to do redirects yourself from your own domain (especially if you have a short domain name ), you may want to have your own little service for that. And, it just feels nice to have the power over redirects in your own hands.

I have created such a service for this website, so have a try right away: lxg.de/r/eff.

The URL should be as short as possible. Also, you don’t want the URL shortener to conflict with your other web stuff. Therefore, you should create a subdirectory r/ in your document root and put a .htaccess file with the following content there.

<IfModule mod_rewrite.c>
	RewriteEngine On
	RewriteBase /r/
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteRule . /r/index.php [L]
</IfModule>

Now create the file index.php with the following content:

<?php
 
$req     = preg_replace('|[^a-z0-9\-\_\.]|i', '', strrchr($_SERVER['REQUEST_URI'], '/'));
$list    = file(__DIR__.'/list.php', FILE_IGNORE_NEW_LINES & FILE_SKIP_EMPTY_LINES);
$url     = '';
 
foreach ((array)$list as $line)
{
	if (strpos($line, "$req\t") !== 0)
		continue;
 
	$url = trim(strrchr($line, "\t"));
	break;
}
 
if ($url)
{
	header("Location: $url", true, 302);
	printf('If your browser doesn\'t redirect you, click here: <a href="%1$s">%1$s</a>.', $url);
}
else
{
	echo 'Sorry, no redirect found. Please check the spelling of the URL.';
}
 
exit;
?>

The actual mapping of redirection identifiers to target URLs is in the file list.php:

<?php die('Error') ?>
 
eff		http://www.eff.org/
aclu		http://www.aclu.org/

The first line of this file is important to make sure that nobody can simply download the list (this is also why we use a PHP file and no plain TXT). The other lines consist of arbitrary identifiers and the target URLs, separated by one or more tab characters. The identifiers may contain latin letters, numbers, and the dot, minus and underscore characters. It may be advisable to make them human readable, but you may also optimize them for length.

Who else with a developer account from eBay has gotten more than five dedicated e-mails from eBay about their freakin’ confercence within the last days? Everybody? I thought so.

Ok, eBay: so you’re holding a conference on X.com, the new blabla of eCommerce, whatever. Send me one e-mail, ok. Send me two e-mails, well. But is your crappy conference selling so badly that you need to constantly spam everybody about it? – Yes? I thought so.

Goodbye, eBay. Hope you’re announcing that you’re going the way of all dinosaurs.

I’ve seen horrible things today. Somebody (the file didn’t carry an author … good for him or her) tried to get the first element of a PHP array – using array_shift. Of course, array_shift modifies the source array, so he worked on a copy of his original array, as (of course) he didn’t want to alter the array itself. Looked something like this:

$copyOfArray = $array;
$firstElementOfArray = array_shift($copyOfArray);

That is obviously a waste of memory and CPU cycles. Usually not noticable, of course. But with large arrays or when frequently executed, it will add stress to the system.

There’s a very “cheap” way to get the first value of any given array. The reset function does just that. (end returns the last element.)

$firstElementOfArray = reset($array);

Now, reset will set the internal array pointer to the first value. However, unless your doing crazy things or writing sloppy code, you shouldn’t care about that anyway.

Assume you work on an SVN’d project have fixed something in the trunk. Now you want to backport this to a different branch. Here’s a quick and easy way to do so.

# enter the target branch directory
cd branches/YOUR_BRANCH
 
# make sure that only the changes you want to backport are visible in the trunk
svn diff ../../trunk
 
# directly apply the differences
svn diff ../../trunk | patch -p3

Remember (as always) to do an svn diff or svn stat on the entire SVN local copy before you commit.

A large majority of web designers still uses the CSS property clear: both to stabilize floating boxes in CSS layouts:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<style type="text/css">
		div            { border: 1px solid #444; padding: 15px; margin: 5px; }
		.div1, .div2   { height: 100px; width: 100px; float: left}
		.clear         { clear: both }
	</style>
	<title>Demo</title>
</head>
<body>
	<div class='container'>
		<div class='div1'>div1</div>
		<div class='div2'>div2</div>
	</div>
	<div class='clear'></div>
</body>
</html>

However, there is a much more elegant way to solve the problem – with overflow: hidden. This solution is known since many years, but nobody ever uses it. Instead, everybody is moaning about clear: both.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<style type="text/css">
		div             { border: 1px solid #444; padding: 15px; margin: 5px; }
		.container      { overflow: hidden; }
		.div1, .div2    { height: 100px; width: 100px; float: left}
	</style>
	<title>Demo</title>
</head>
 
<body>
	<div class='container'>
		<div class='div1'>div1</div>
		<div class='div2'>div2</div>
	</div>
</body>
</html>

Why is it more elegant? Because it doesn’t create an extra element, and all CSS properties only influence the behaviour of the elements they’re applied to.

Where’s the catch? There’s none. This works in all major browsers, including IE 6. You can float left or right. You can give inner and outer elements margin, padding, height, width. You can nest floating elements. So why is everybody using clear:both? I don’t know.

My guess is that it is evolutionary. Somebody influential started with bad code, and everybody else just copied it.

If you have one of the Broadcom wireless chipsets that are not supported by b43, you were stuck with broadcom-sta … until now.

The nice people at linuxwireless.org have created an OpenSource driver which is now part of the official Linux kernel. It’s actually quite easy to set up and mostly documented, but there are a few pitfalls. So I thought I’ll write a little Howto to sum up the necessary steps.

First, you need a 2.6.38 Linux kernel or higher. Gentoo’s latest gentoo-sources currently are at 2.6.38-r1.

Start menuconfig, and go to:

-> Staging drivers
	-> Exclude Staging drivers from being built
		-> Broadcom IEEE802.11n WLAN drivers
			-> Broadcom IEEE802.11n driver style

In the selection menu, select the correct driver type. For 4353, this will be the “SoftMAC” driver.

The new driver still needs firmware to be built into the kernel. This firmware is available from the kernel’s Git repository:

mkdir ~/kernelgit
cd ~/kernelgit
git clone git://git.kernel.org/pub/scm/linux/kernel/git/dwmw2/linux-firmware.git

This will give you a bunch of firmware files. For 4353, we need two files which are in the linux-firmware/brcm/ directory and are named something like bcm43xx-0-610-809-0.fw and bcm43xx_hdr-0-610-809-0.fw. The numeric parts may vary.

Now here comes the special part, which isn’t documented, at least not good enough: Usually, you would simply put these files in /lib/firmware, and add them to

Device Drivers  --->
	Generic Driver Options  --->
		External firmware blobs to build into the kernel binary

resulting in something like this:

		(bcm43xx-0-610-809-0.fw bcm43xx_hdr-0-610-809-0.fw) External firmware blobs to build into the kernel binary
		(/lib/firmware) Firmware blobs root directory

If this is done, you can build the kernel the usual way.

But: When starting the system, you will see with lsmod that although the driver is loaded, iwconfig won’t show wireless devices. Why’s that? The answer is provided by dmesg:

brcm80211: module is from the staging directory, the quality is unknown, you have been warned.
brcm80211 0000:02:00.0: PCI INT A -> GSI 17 (level, low) -> IRQ 17
brcm80211 0000:02:00.0: setting latency timer to 64
brcm80211: fail to load firmware brcm/bcm43xx-0.fw
brcm80211: Failed to find firmware usually in /lib/firmware/brcm
brcm80211 0000:02:00.0: PCI INT A disabled
brcm80211: wl_pci_probe: wl_attach failed!

Apparently, the driver doesn’t use the firmware built into the kernel, but it loads the firmware from the userspace. And: it expects a different file at a different location!

Therefore, you must create the directory /lib/firmware/brcm directory and put the files – renamed! – there:

cd /lib/firmware
mkdir brcm
cp bcm43xx-0-610-809-0.fw brcm/bcm43xx-0.fw
cp bcm43xx_hdr-0-610-809-0.fw brcm/bcm43xx_hdr-0.fw
modprobe -r brcm80211 && modprobe brcm80211
dmesg | tail -n 15

where the dmesg command will issue:

brcm80211: module is from the staging directory, the quality is unknown, you have been warned.
brcm80211 0000:02:00.0: PCI INT A -> GSI 17 (level, low) -> IRQ 17
brcm80211 0000:02:00.0: setting latency timer to 64
Found chip type AI (0x1381a8d8)
Applying 43224B0+ WARs
wlc_bmac_attach:: deviceid 0x4353 nbands 2 board 0xe macaddr: c4:46:19:0e:dc:46
ieee80211 phy4: Selected rate control algorithm 'minstrel_ht'
wl_set_hint: Sending country code US to MAC80211
wl0: Broadcom BCM43xx 802.11 MAC80211 Driver (1.82.8.0) (Compiled at 02:08:44 on Apr  4 2011)

And iwconfig will now show the device, too.

Hooray!

(Of course, it makes sense to put the firmware files into the expected location directly, so we don’t need to keep each file twice.)

In Firefox 4, the lower status bar is hidden by default, which is nice for today’s wide screens. On the other hand, there are some Firefox addons/plugins which use the status bar, for example DNS flusher, which is very helpful for web developers. To toggle the visibility of the status bar, Firefox 4 features a key shortcut, namely Ctrl+/. (On German keyboards, this is Strg+Shift+7.)