The One with the Thoughts of Frans

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.

Installation

As always, in Ubuntu it’s a piece of cake with sudo apt-get install exiv2.

Adjusting Exif Date/Time

With exiv2, exiv2 ad -a [-]HH[:MM[:SS]] file does the job.

For example, my camera was still on DST when I shot my new year’s fireworks pictures, which made them appear as if they were shot at 1 AM. Thus, I ran the command exiv2 ad -a -1 *.JPG to fix it.

Using a Command File

I use a file named exif-copyright-2010.txt (and another one for 2009 etc.) with just two lines in it, which I apply instantly when grabbing pictures from my camera. This file contains the following lines.

add Exif.Image.Artist	Ascii	"My name"
add Exif.Image.Copyright	Ascii	"Copyright © 2010 My name"

This can be applied using exiv2 -m /somewhere/exif-copyright-2010.txt file. I used to mess about with batch processing in graphical applications — which worked fine — but this is much faster.

Read More

You can read more about all of this on the official website.

I don’t care much for Twitter. The maximum message length of 140 characters is extremely limiting and, unless you resort to chatspeak, it’s hard to say anything meaningful in such a limited space. If you do resort to chatspeak, it won’t look meaningful even if it is. Catch 22! I imagine the best way to say something meaningful is to link to a blog post offering more explanation, or maybe I’m just prejudiced against chatspeak. Regardless, since most people comment on blog posts using Twitter, and everybody and their grandparents is using it, I figured I should look into a way to utilize it in a more meaningful way than logging in about once a year.

microblog-purple offers convenient integration into Pidgin, which I already use for chatting. It’s easy to install on Ubuntu using sudo apt-get install pidgin-mbpurple, but you may want to consider using PPA for both Pidgin and microblog-purple. Note that the microblog-purple from PPA is named pidgin-microblog, so if you already installed pidgin-mbpurple you’ll have to remove that first. That’s what it is, after all: a chat service with a 140-character limit — most chat services offer at least 500 characters or so. At least it has better offline and history support than most. You also need to enable the plugin named Twitgin so you get a character count on the window where you communicate with Twitter.

Since, like I said, almost everybody uses it, I figured it might also be a good idea to announce new blog posts on Twitter automatically. I searched around a bit in the forest of Twitter plugins and WP to Twitter sounds like it best meets my needs. This post is a test of the plugin, and it announces my partial submission to the crowd — not submission in the sense of Islam, but submission in the sense of realism.

Last night I decided to try to take some pictures of fireworks without a tripod. Considering the freezing temperatures I knew I was in for disaster, but with plenty of space available on my memory card, that didn’t really matter.

1. 
   Large (290 KB)
2. 
   Large (258 KB)
3. 
   Large (270 KB)

I think the most important thing we just observed is that if you want to take nice pictures of fireworks, you should probably not stand upwind — although considering the distance involved that would have taken almost as long as the fireworks lasted (about 20 minutes). I did zoom in quite a bit. On the other hand, you’ll miss some or most of the smell of gunpowder if you do that, which is an important part of the watching experience, after all.

Happy new year!

I decided to join the crowd over half a decade after this kind of post started showing up across the Internet — and I bet it wasn’t new when I first saw it either. Here is my 2009 in places, alphabetically. I spent the night at most of these places, but some were “merely” the subject of day trips.

• America
  • Chicago
  • West Bloomfield (+Detroit)
  • Holland: where they tried to explain the flags of the Dutch provinces and Wilhelmina peppermint to me.
  • Palatine
  • Saugatuck
• Belgium
  • Antwerpen
  • Brugge
  • Brussel
  • Gent
• France
  • Lille: on the way back the conductor told us we’d better be glad he’s Flemish, ’cause the French would give us a huge fine for not validating our dated return ticket prior to boarding the train (had already been checked on the way there, as well…), and that this was apparently written “clearly in 4 languages at the station.” Maybe on the validating machines themselves, but certainly nowhere else. Other than that it was quite nice.
• Germany
  • Nürnberg: old looking city, but actually quite new due to WW2. Nice museums and metro system. Each church was apparently built by killing all the Jews who lived where the church is now located. A Nazi past, so to speak. The hotel had rooms based around local fairy tales, and was a total dream: both for the price we paid, and compared to our accommodations in Italy.
• Italy
  • Atrani, Amalfi, Amalfi Coast: wonderful scenery, a horrible road that makes a 20–30 minute drive into one that’s more like two hours, lots of touristy shops, and the most laid back people anywhere, ever.
  • Capri: didn’t spend quite as much time here as we’d liked; blue grotto is nice but overpriced.
  • Florence: northern Italy is so refreshing after the south, recommended.
  • Torre Annunziata: Naples suburb that is near the Pompeii and Oplonti archeological excavations; also has a convenient train connection to Naples. Very impressive Roman ruins, and nice landscape, but the modern-day suburbs, city, and nearby villages are not very inviting. The atmosphere is a lot better in the villages than around the city, but the natives peer at you like you were some creature from outer space, which is rather uncomfortable.
  • Rome: definitely need to go back sometime; we barely scratched the surface despite being there for a while. Scariest and oldest elevator I’ve ever used. Who says elevators aren’t supposed to go down like 10cm when you step into them?
  • Sorrento: lots of stairs, just like anywhere else along that coast.
  • Venice: involved quite a bit of dragging with suitcases. Very special place.
• The Netherlands
  • Amsterdam
  • Den Haag: they didn’t have a sand sculpture. Lame.
  • Den Helder
  • Middelburg
  • Rotterdam
  • Scheveningen
  • Texel
  • Utrecht: I lived here, after all.
• Sweden
  • Stockholm
  • Tippen, Saltsjöbaden: where we spent the night and enjoyed the hospitality and company of a good friend.

If you copy (or move) the files in %appdata%\utorrent to the same directory where you keep utorrent.exe, it will exist independently from your Windows installation, and will be unaffected by reinstalling Windows. By reinstalling Windows I mean reformatting your dedicated Windows partition and starting fresh.

Browser Size is a utility by Google Labs which overlays a semi-transparent image with percentages indicating what part of the website people can see without scrolling. I don’t know how long it has been around, but I found out about it, played a couple of minutes with it, and read the about page a couple of days ago. I mentally stumbled when I read the following.

Browser Size works best on web pages with a fixed layout aligned to the left (emphasis added). If the content reflows as the width is adjusted or it is centered, then the results can be misleading. In this case, you can obtain more accurate results by reducing the browser width to a percentage column, e.g. 90% and seeing what content falls below the 90% horizontal line.

I realize it would be hard to implement it any other way, and I would certainly hope that most people understand you have to play around with the size of your window to use the tool in a meaningful way without having read the preceding message — those that don’t probably won’t read the message either. It seems to me that this should certainly be the preferred way to use the tool — how it works best. Don’t encourage those who produce such annoying designs by saying their methods work best. What they hopefully meant to say is that it works best to expose web pages with a fixed layout for the excrements they are.

A couple of days ago, I wanted to print some photos on my Epson printer. I don’t do this often because I usually merely print text, but it is capable of it. I had always thought that the discrepancy between what was on my screen and what came out on paper was a matter of RGB to CYMK (or whatever my printer uses internally) conversion, but today I found out that it is merely a stupid driver. I am embarrassed that I only discovered this after utilizing the printer for several years, but in my defense, I have barely used it for printing pictures.

I’ll start off by showing the culprit. If you select some combination of a type of photo paper with one of the photo quality settings, PhotoEnhance is automatically checked. Despite being somewhat of a control freak in regard to my software and hardware, I wrongfully assumed that this meant some other kind of optimization in ink usage for photo paper as compared to normal paper. Hovering it quickly revealed my mistake: Enhances photos by optimizing color levels. Useful for low resolution images. EXCUSE ME!? I am not printing any low resolution images, and if I were, I would most certainly fix any potential color level issues myself prior to printing, if only because I could try various algorithms for blowing the picture up to a resolution more suitable for printing. Now it’s fine that this switch is there to save me such trouble if I happen to be printing low resolution imagery, but I am not doing any such thing. Tampering with it unasked could potentially have somewhat favorable results, somewhat detrimental results, or results that are so bad that they cause me to write this post.

Let’s start with exhibit one. A picture of us on the beach. Perhaps it could be made a little better by playing a bit with some color or brightness levels prior to printing, but I deemed it sufficiently decent.

Here is the first print-out I made of this picture. As you can see, the colors were made a little brighter, and the results of the PhotoEnhance feature were actually not too bad. It’s not the picture I wanted to be printed, but it’s close enough that I wasn’t suspecting anything to be fundamentally wrong. In this sense it’s comparable to the few pictures I printed previously.

This is the picture I printed later, without PhotoEnhance. Scanning it introduced some color distortions compared to the original picture, but it should nevertheless be clear that it’s closer to the original, i.e. what I wanted to be printed.

Here is the picture that sparked all of this. It’s a perfectly innocent picture of us standing at some random bridge in Amsterdam.

The monstrosity my printer made of this actually seems a touch less bad in the scanned version, but it should still be clear how horrible it is.

And finally, the same picture without PhotoEnhance. As before with the beach, most of the color differences with the original were actually introduced by scanning, and not by printing.

In conclusion, my printer is perfectly capable of producing very nice, approaching color perfect reproductions of photographs, but by default it creates something that made me think its photo printing capabilities were highly exaggerated for years. Since I didn’t buy it to print photos this was not an issue, but it’s certainly yet another example of a hardware manufacturer messing up their otherwise perfectly fine products with bad software.