The One with the Thoughts of Frans

The following post on the MyOpera forum spurred me to complain about something I call the prettiness disease. By this I mean adding features that either don’t help usability or actually impair it just because it looks good (according to some). A prime example is most of the features added to Mac OS X as compared to preceding incarnations, but Microsoft and the open-source community have also bought into it.

[…] the thing that most annoys me about [combine always, hide labels] is the fact that it removes the ability to simply click the taskbar icon to minimize/maximize. […] This is the case only, when taskbar buttons are not set to the default ‘combine always, hide labels’. Then it needs CTRL-click to directly switch to the last visible window of a ‘grouped’ application. This is standard Win7 behaviour also with IE8. So, if you disklike the current behaviour disable grouping of taskbar buttons for now. Perhaps there might be an option within Opera later on…

I don’t care for the “combine always, hide labels” setting in Windows 7. I think it’s a failed copy of Apple’s crappy dock, where looking pretty is the only thing that counts while losing out on usability.

Oh wow, look how clean this looks, with all the pretty icons. No text. Whoopie. Now try to identify your windows when there’s 10 different ones. What’s that, thumbnails? Oh how useful, now I can really spot the difference between my 10 directories filled with files, my 10 web pages on the same forum, my 10 text documents in my word processing application, and so on and so forth. There’s a reason I give my directories names, you know. The same applies to just about any other application. The icon only identifies the application, the text-based title identifies what the heck it actually is. Thumbnails would only work the way Microsoft seems to think they should work in Windows 7 if all I ever opened was pictures.

It’s easy enough to combine a text-based title with thumbnails (for those who like thumbnails) and flashy effects (OK, I admit that as long as they’re shorter than a second I don’t completely dislike effects like burning or fading windows, things that light up, etc), but writing your own Compiz plugin is near-impossible without completely reverse-engineering the code (documentation? comments? what’s that?), and for Windows that situation isn’t very different, at least for me.

This tool is now named Tubes and is hosted on Bitbucket.

As I wrote a few months ago, Yahoo Pipes is a nice tool. Nonetheless, it has a few shortcomings which annoyed me because I could neither fix nor work around them. Therefore, I decided to write my own mashup tool. For the impatient, you can download the file right now before reading anything else.

Since SimplePie seems to be the feed aggregation library of choice for many projects, I decided to go with it. I ran into a few minor issues, but nothing I couldn’t handle easily. The code I wrote is based on the multifeeds.php demo file and SimplePie 1.1.3, because in 1.2 it didn’t work (the multifeeds demo, that is — by extension I suppose this file won’t either). It’s a little rough around the edges, and SimplePie is clearly meant for HTML output rather than XML (although its HTML isn’t quite decent either, even if the input feed is), so I decided to fix the whole thing up with Tidy, which takes care of low quality input material as well. Hopefully that makes this whole thing more robust than it would otherwise be. The code is based around bringing various Opera feeds I read together in one big feed, but this can very easily be changed.

So now that I’ve got the basics of output into a feed taken care of, I can easily duplicate other functionality of Yahoo Pipes if I want. Much better.

Someone asked me how to find a shortcut key to call something like Task Manager to terminate a program.

In Ubuntu 9.04 and 9.10, the following applies:

1. The easiest option in this particular instance:

   Alt + F2, gnome-system-monitor, Enter

2. The slightly more complicated (though still easy), always applicable option:

   System > Preferences > Keyboard Shortcuts

   Click Add

   Type whatever you like in name. “System Monitor”, “Task Manager” or anything you like. It doesn’t really matter, just so you can identify it yourself.

   Type gnome-system-monitor in Command.

   Click Apply.

   Scroll down to the bottom (Custom Shortcuts)

   Click on where it says “Disabled”

   Press Ctrl + Alt + Del (by default this keybinding gives you the logout/shutdown screen, so you’ll probably get a warning about reassigning this particular combination).

For more information on keybindings in Ubuntu, I’d advise you to read the community documentation. If you’re interested, you can also check out the original context of what I wrote in this post.

I do agree with Joe Clark’s recent blog entry protesting shared streets without sidewalks, but I feel that the Netherlands was mistreated by the Toronto Star and to a lesser extent Joe Clark himself. For starters, the sidewalk-free erf as apparently exists in Cologne (assuming that’s what Koln is supposed to mean — if you don’t know how to type Köln, type Koeln or just use the English name) is something that, in the Netherlands, usually only exists where there is no place for sidewalks, and all erven are culs-de-sac. Erf is a Dutch word that means something like yard or court, but in the context of roads it rather refers to an area that is supposed to be more or less as safe as a yard for those cycling, walking, or playing in it. A place where the road-function (transport) is secondary to the area-function. By the way, woonerf is a now an outdated word that means something like living yard. Erven originally only existed in residential areas.

I’d say a typical erf does have sidewalks. Its distinguishing features are that cars have to drive really slowly (no precise speed is specified, but in practice it definitely doesn’t mean anything over about 10 kmph) because everybody except cars can utilize the street however they like, and that traffic can’t pass through: it’s a cul-de-sac after all. Most important it means a place where it’s safe for kids to play on the entire street and where everybody can utilize the street however they like. By no means does it mean that there aren’t supposed to be any sidewalks, and to claim that it does is a misunderstanding at best. Sadly some misguided people have managed to introduce erven without sidewalks in some places where there is enough space for them, but I’m glad to say that this is far from the norm.

Another typical situation is the 30 km zone, though you might see lower speeds like 20 km at times. This kind of zone will typically have a number of speed bumps in place to keep people at this speed and it is usually a through-going road, though seldom the preferred one. This zone will always have sidewalks and may or may not have separate cycling lanes, the latter being almost universally present on roads where the speed limit is 50 or above.

In conclusion, the Toronto Star must have projected its own vision of “better” street conditions on what is actually going on in countries such as the Netherlands and Belgium. An erf does not mean a lack of sidewalks, its application is only in carefully selected areas, and it is always meant to be a cul-de-sac. If you want to copy erven, at least do it right. Don’t claim they’re things they’re not.

The 30 Days to Becoming an Opera 6 Lover series may very well have been what pulled me over the edge. That which made me choose Opera instead of MyIE2 (now Maxthon). It should therefore be no surprise that I still harbor warm feelings toward it. While it may be old, and the original series is no longer hosted by TnT Luoma as far as I can tell, I think that the series could still teach current (aspiring) users of Opera a thing or two — even the 30 Days series for Opera 6. Due to the large part the Opera 6 series played in my personal discovery of Opera, however, my judgment may be somewhat impaired.

I dug into the Internet Archive and I was pleasantly surprised to discover that the 30 Days series for Opera 6 is available through the archive in a nice ZIP file. The original Opera 6 lover pages do not seem to have been preserved, but the ZIP file is easier to use regardless.

The 30 Days series for Opera 8 was also preserved. The Opera 8 series is still available in the archives of TnT Luoma, but the pictures and some other things are broken. Besides, I like the old layout better; it used to be blue, however, which was even better — you probably don’t want to read the oldest text available, though. While I would not recommend a detailed read (it is quite outdated after all), I would certainly recommend skimming through most of it.

By the time Opera 8 came out — and consequently, the 30 Days to Becoming an Opera 8 Lover series — I was already a seasoned Opera user, so the series didn’t do much for me. I did discover one very important Opera feature thanks to it, however. In the default keyboard setup, Shift + F2 is bound to go to nickname. If you don’t know what nicknames are, you can give bookmarks so-called nicknames; if you type them out in the address bar and press enter it will take you to the bookmark, and it will offer autocomplete suggestions while you’re typing. Useful, but not a huge time saver.

Go to nickname is better, because it starts going to the nickname as soon as it’s got a match. So if you have only one bookmark with a nickname that starts with a, you’ll only have to type a and you’ll be on your way. I had not realized this prior to reading the Opera 8 Lover series, and it wasn’t actually written in the series, but without it I might very well never have tried this feature again. After some consideration and major inspiration by Moose I rebound F2 to new page & go to nickname, which means that ever since, pressing F2 automatically opened a new page and this tremendously useful dialog. The introduction of speed dial didn’t do much for me thanks to this keyboard shortcut. It might take a few seconds more to configure, but it’s worth it. Additionally, new tabs will open even faster if you disable speed dial.

WordPress can’t cope with day/month/year (/%day%/%monthnum%/%year%/) permalinks properly by default. I had no idea because I’ve always used year/month[/day]. It’s fine for the posts, but in the archives /date/month/year fails. Luckily WP (WordPress) supports plugins in a clever manner, and it has a great API (application programming interface).

Initially I tried the WP API:

add_rewrite_rule('date/(\d{1,2})/(\d{4})', 'index.php?m=$matches[2]$matches[1]', 'top');

This kept giving me an error which I couldn’t (be bothered to) debug since it went several functions deep into the WP core, so I gave up on the API and circumvented it with the help of something I found.

Anyhow, here’s the plugin. Save in a file named rewrite-day-month-year.php or just name it whatever you like.

<?php
/*
Plugin Name: Rewrite Rules for Day/Month/Year
Plugin URI: http://frans.lowter.us/2010/01/22/teaching-wordpress-some-manners-enabling-daymonthyear-archives
Description: WordPress can't cope with /%day%/%monthnum%/%year%/ for some reason. That is to day, it fails when you try to go for an archive in the form of /date/month/year/ This teaches it some manners. Probably/hopefully shouldn't interfere with other structures, but why you'd activate it if you don't need it I wouldn't know.
Version: 1.0
License: GPL
Author: Frans
Author URI: http://frans.lowter.us

Based on http://dd32.id.au/files/wordpress/test-rewrite.php
*/

function test_add_rewrite_rules( $wp_rewrite ) {
	$new_rules = array(
		"date/(\d{2})/(\d{4})" => 'index.php?m=' . $wp_rewrite->preg_index(2) . $wp_rewrite->preg_index(1),
		"date/(\d{4})" => 'index.php?year=' . $wp_rewrite->preg_index(1)
	);
	$wp_rewrite->rules = $new_rules + $wp_rewrite->rules; //NOTE: You must add it to the start of the array, Else WP's greedy rules at the end of the array will eat the request
}

register_activation_hook( __FILE__, 'flush_rules_initiate' );
register_deactivation_hook( __FILE__, 'test_flush_rules' );
// add_action('init','test_flush_rules'); // for testing

function flush_rules_initiate() {
	// Add the permalink override stuff
	add_action('generate_rewrite_rules', 'test_add_rewrite_rules');
	test_flush_rules();
}

function test_flush_rules(){
	//Flush the rewrite rules so that the new rules from this plugin get added,
	//This should only be done when the rewrite rules are changing, Ie. When this plugin is activated(Or Deactivated), For simplicity while developing using WP Rewrite, I flush the rules on every page load
	global $wp_rewrite;
	$wp_rewrite->flush_rules();
}
?>

Inputs that say things like “search here” are generally messed up. In this post I will first explain why and then I will show you how to do it properly.

The WordPress theme I’m modifying for my wife had the following HTML in it:

<input type="text" value="Search this site" onfocus="if (this.value == 'Search this site') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Search this site...';}" name="s" id="searchbox" />

There are three main problems with this.

1. It prefills the search box with “Search this site.” This is incredibly annoying and obnoxious behavior for people with Javascript disabled. If you must add such text, add it through Javascript.
2. The values don’t even match up, so if you focus on the INPUT, deselect it and select it again the text stays there. Even for users with Javascript enabled. Errors of this type could easily be avoided if the text value were stored in a variable.
3. Which brings me to the third problem. The script should be external so it can be cached. That would save bandwidth for both you and your visitors and if there are people with Javascript disabled, they won’t even have to load the junkscript once.

Because just about every such box I have ever encountered is complete and utter crap (this is actually one of the better ones), I decided to reproduce its functionality in an unobtrusive manner, eliminating all of the mistakes I outlined above.

The HTML is now reduced to this:

<input name="s" id="searchbox"/>

You could remove the trailing slash if you’re writing HTML, or put a space in between if that’s the way you write XHTML, but that’s of no consequence otherwise. The type="text" is not essential because it’s the default, but it shouldn’t hurt to leave it in. Also see Anne van Kesteren’s Optimizing Optimizing HTML for some tips on going somewhat over the top with minimalism.

The Javascript that changes the text to “Search this site…” is now in an external file:

(function() {
	function searchbox_text_change() {
		var s = document.getElementById('searchbox');
		var s_text = 'Search this site...'
		if (s.value == '') s.value = s_text;
		else if (s.value == s_text) s.value = '';
	}
	document.addEventListener('DOMContentLoaded',
	function(){
		var s = document.getElementById('searchbox');
		searchbox_text_change();
		s.addEventListener('focus', searchbox_text_change, false);
		s.addEventListener('blur', searchbox_text_change, false);
	},
	false);
})();

All of this took me about five minutes. There’s a tiny bit of redundancy going on, but I can’t be bothered to fix that. It’s superior to just about any stupid such script I ever encountered and likely to most of the same type that I will encounter in the future. Use this script as much as you please. You don’t even have to link back to me, since I just want those bloody things to work in a way that doesn’t make me cringe.

The same kind of principle applies to autofocus junk. Never ever do any such thing if I started typing something. I’d rather you never did it at all, but if you really feel that you must do it for some masochistic reason, at the very least check if the value is still empty with if (s.value=='').

Five years ago there were lots of posts dealing with people’s visions of the least-bad method to include sidenotes — or footnotes — to HTML, and like any self-respecting HTML-geek I created my own take on the matter. As might be expected from five year old writings it is now outdated, and I’m glad it is. It means the cruft can be retired, and media queries can be used to their full glory — except in IE8, that is.

The script I wrote to supply non-Opera browsers with faux-media-query functionality assumes that any browser not Opera should have the script applied to it, because at the time Opera 7+ was the only browser that supported media queries. I knew this wasn’t exactly the proper way to write scripts, but it was meant to be updated to use some more intelligent detection at some point. As such things go, however, it never was. In my defense, the worst the script did was duplicate some functionality that was already provided by media queries, so I rather doubt anybody noticed any adverse effects. Heck, they might have noticed positive effects, since as I wrote at the time, “For now, it might even be the best solution to apply the Javascript to Opera as well, because Opera does not reapply media queries on resize yet (and it does fire the onresize event as every browser does).” For good measure I’m also including the script as I used it on my website since 2006. It has this nifty little added feature that it doesn’t actually do anything if there are no sidenotes present, which is something media queries cannot do. I think I considered writing a more intelligent check based on style features that would be set by the media query back in early ’06, but I can’t recall why I never did. For those interested in hacking the old script, the way I set it up it should be possible to determine whether media queries are supported very easily by combining a test for at least medium width with the marginRight style property on the sidenotes. If set, media queries are working; if not, go ahead and do some scripting magic.

Now, on to the updated sidenotes. I abandoned absolute positioning in favor of going completely for float. I believe I wanted to do this originally, but there were too many float bugs in all kinds of browsers to make it viable (that means everything not Presto or KHTML). Since these appear to be fixed, there is no reason not to take full advantage of floats, which most important means using clear so that sidenotes will not overlap. Previously I had to seriously consider the placement and frequency of sidenotes. Now I can just add them whenever I want. I still think my original reasoning is quite valid, however, which means I don’t think sidenotes should be inserted lightly or contain overly long texts.

Let’s start out. How do we markup a sidenote? Well, as HTML contains no way whatsoever to markup a foot- or sidenote, the logical choice is small. Why small? Well, it means that the content of small is less important. A footnote should not be a footnote at all if it’s as important, or more important than the text itself, right? Thus, the markup of the sidenote is as follows:

<small class="sidenote">A sidenote</small>

This is still what I use, but ASIDE would be more appropriate in HTML 5.

The sidenote as I created it is meant to be put at the end of a sentence, inside a paragraph. Therefore it would be displayed at its original position in the text if author CSS was disabled, or read at its intended location on screenreaders. If it wouldn’t be put as a separate sentence, it would look strange if not displayed the intended way. The sidenote is placed inside the paragraph with the other text, for if it would require multiple paragraphs, should it be a sidenote?

There is one issue I didn’t take into account five years ago. For example, including two paragraphs or so of background information on a country or city in a sidenote would be an appropriate use of sidenotes since it’s not really a part of the text. My original stance (although not explicitly written) was that this should be solved with hyperlinks, but I have somewhat revised this stance. The markup would then become something like:

<div class="sidenote">
	<h3>Were Sidenotes Always Compatible With Any Element?</h3>
	<p>You could always apply the <code>sidenote</code> class to any element, such as <code>P</code> or <code>DIV</code>.</p>
</div>

Or in HTML 5:

<aside>
	<h3>Were Sidenotes Always Compatible With Any Element?</h3>
	<p>You could always apply the <code>sidenote</code> class to any element, such as <code>P</code> or <code>DIV</code>.</p>
</aside>

The main sidenote CSS is still very similar to what it was in 2005.

.sidenote {
	background: #efd;
	display: block;
	float: right;
	clear: right;
	width: 200px;
	border: 1px solid #eee;
	border-right: 0;
	margin: 2px;
	margin-right: -20px;
	padding: 3px;
	text-indent: 0;
	cursor: help;
}
.sidenote:before { content: '\2190' ' '; }
.sidenote:hover {
	background: #ff0;
}
/* enable usage of code in sidenotes without the layout breaking  */
.sidenote code {
	white-space: normal;
}

There are a few minor differences, but other than the addition of the .sidenote code line nothing worth mentioning. Only a few weeks ago I noticed that adding a line of code to a sidenote somewhat broke my layout because it stretched beyond the viewport. A few more global ways to accomplish normal white space in sidenotes come to mind (such as !important in the main class or .sidenote *), but from what I understand using such methods increases parsing time, if only ever so slightly.

The media queries performing the sidenote magic were significantly slimmed down, and a low-resolution in-line display was added:

@media all and (max-width: 350px) {
	.sidenote {
		display: inline;
		float: none;
		border: 0;
		margin: 0;
	}
	.sidenote:before {content:"";}
}
@media all and (min-width: 750px) {
	#wrapper{margin-right:207px}
	.sidenote {
		border-right:1px;
		margin: 0;
		margin-right:-228px;
	}
}
@media all and (min-width: 980px) {
	#wrapper{margin-right:auto}
}

#wrapper is just in there to keep IE from embarrassing itself; if I were creating my blog’s design today I’d just go with body. Switching completely to float makes it possible to keep the overrides to a minimum, but that’s not the important change here. I switched to simple media queries for two reasons.

1. It’s much easier to maintain and change. No more duplication.
2. I don’t think most media types are as relevant anymore as I did back then. Specifically, in regard to such things as handheld devices what I want to do is offer different layouts based on screen size, not on whether they consider themselves to be handheld, screen, or some other fancy media type. Safari on the iPhone considers itself a big browser, for instance, but should it really get the “big” layout? None of this is especially relevant for my sidenotes, but it does reflect my opinion on it. Additionally, specifically overriding for certain media types rather than being specifically inclusive makes sure that no one is left out. In other words, this is future-safe. If the media type magazine ever emerges (they already did a magazine with an eInk cover, didn’t they?), my media query is ready for it now. And for those who care about such things, it also avoids an IE bug or two.

That’s it. My sidenotes are ready for the nearby future. They’re so 2010. Feel free to use or expand on my ideas, but please add a link back to me somewhere if you do.

This is a condensed and edited version of the Ubuntu Blog guide regarding how to mount a remote ssh filesystem using sshfs, based on my personal experience.

Before you can use sshfs, you’ll need an SSH server. This is useful for all kinds of things, but that’s not important here. To set up an SSH server in Ubuntu, all you need to do is sudo apt-get install openssh-server. Setting it up in Cygwin (like I did to access my Windows box, and to tunnel VNC through it) is a bit trickier, but there are decent tutorials out there. Once that’s taken care of, you can set up sshsf.

sudo apt-get install sshfs
sudo mkdir /media/dir-name
sudo chown `whoami` /media/dir-name
sudo adduser `whoami` fuse

Log out and log back in again so that you’re a proper part of the group.

Mount using sshfs [user@]host.ext:/remote-dir /media/dir-name; unmount using fusermount -u /media/dir-name.

It all worked perfectly for me, but if not, there’s apparently a solution.

If you get the following error:

fusermount: fuse device not found, try ‘modprobe fuse’ first

You will have to load the fuse module by doing:
$sudo modprobe fuse

You can add fuse to the modules that are loaded on startup by editing the file /etc/modules and adding a line with only the word “fuse” in it, at the end.

and then issue the sshfs command above again.

If you’re on Windows, don’t panick. Dokan SSHFS will perform the same task.

It should be noted that this is even easier within KDE applications, where you can simply use fish://your-server.com, but sshfs cooperates better with the rest of my system. Trying the same with Dolphin in KDE on Windows results in a KIOslave going crazy using all the CPU it can, however.

Aside from easy editing of files directly on my Windows box, this finally enabled me to stream videos from my Windows box, although right now only lower quality ones since it’s also connected through WLAN. With Samba things just weren’t working out, and the same applied to FTP (though it was better for file transfers than Samba, I have to say). Admittedly, this still actually uses FTP under the hood, but it just works better. Besides it will also be secure to use remotely thanks to SSH.

This is what update-grub outputs (I keep typing grub-update because it just seems more logical):

$ sudo update-grub
Generating grub.cfg ...
Found linux image: /boot/vmlinuz-2.6.31-16-generic
[…]
Found Windows 7 (loader) on /dev/sda1
[…]
done

This is what /etc/default/grub wants to set the default boot entry:

GRUB_DEFAULT="Windows 7 (loader) (on /dev/sda1)"

Thanks. That really made things so much simpler.