The One with the Thoughts of Frans

Archive for Site

Is My Firefox Out of Date?

When I logged in, WordPress tried to inform me that the particular browser I was using was out of date.

WordPress’ “Your browser is out of date” greeting.

So, is it?

Well, we can take a look at the Firefox ESR download page to find out.

The current version of Firefox ESR is 52.4.1, releasenotes here.

Nope. Still Firefox 52, which will remain supported until Firefox 60.

The Firefox support window. Source:

Always fun, these automated checks. πŸ™‚


Warlords II Deluxe

This post is recycled, and was originally published on WatchZine on Thursday 2004-05-27 at 19:34:38 CEST. I tweaked some grammar and spelling here and there, but I resisted the urge to rewrite this entry almost entirely. I did not, however, refrain from commenting on myself.

Warlords II was released in 1993 as the successor to the successful turn-based strategy game Warlords. In the following years there were other additions to the series, such as Warlords III, it’s stand-alone expansion pack Darklord’s Rising, and Warlords IV. But Warlords II Deluxe has always been my favorite entry in the series.

Whereas Warlords II came with a limited number of army sets and maps, trapping the storytelling within the same imaginary place, Warlords II Deluxe came with hundreds of army sets, several different terrain sets and hundreds of city sets. This allows you to dive into a fantasy version of WWI today, while playing a mighty pirate the next. Or you could just play some fantasy setting, like the game was originally intended to.

For some 1995 polish to a 1993 game, the graphics look quite well. Just like with the original C&C, you don’t really see the pixels. [You did see them less on CRT monitors. But what I meant was that they were very well-done pixels, so that you didn’t notice them in an intrusive manner.] This is made possible because the units exist of one image, never changing. This also is the reason it is possible to create the hundreds of different settings I spoke about before.

I am not sure if Warlords II already contained it, but WIIDELUXE also came with a feature later introduced as “revolutionary”, Play By E-Mail. [Later introduced as revolutionary by whom? I guess we’ll never know. My best guess is that I was referring to Civilization III.] This shows us one of the positive things about turn-based games. Do what you want and send it to your friend. Such a game can go on for a long time. [A very, very long time. Let alone if you’re trying to play with more than two people. That being said, it’s still a lot easier to coordinate than trying to get online at the same tmie.]

Also the diplomacy is nice. Have a peace treaty with one player and have war with the other. For the time it was great, though it doesn’t come close to more modern games like Alpha Centauri and Civilization III. Regardless whether you’re playing Warlords II, Alpha Centauri, Civ or one of the Total War games, the AI’s diplomacy stance is always stacked against you from the moment of booking even the tiniest military success.

This is probably the only game I have regularly played since 1995. Because it doesn’t run on computers created after about 1997/1998 (unless they run an NT based OS) this is the main reason I still have my Pentium 100. [Well, there’s actually a patch for faster CPUs if you can still find it, although DOSBox is probably your best best now.] Quite amazingly, I don’t feel like the gameplay of Warlords II Deluxe has ever been beaten, except perhaps by Warlords III. But sadly Warlords III didn’t feature the many different settings of Warlords II Deluxe. [Truly, the game is incredibly elegant and well conceived. You can enjoy its gameplay through the open-source reimagining LordsAWar!, play the very similar online game warbarons, or you can even play the original Warlords II (not Deluxe) in your browser (!) over at]

But I’ve probably praised the game too much already. Let’s continue with the bad things. The AI isn’t the best available. When you are a reasonably experienced player, the computer opponents aren’t really difficult to defeat, even on the highest difficulty setting. There is a setting which tries to undo this (called “I am the greatest”). When you use this setting you are constantly at war with all computer opponents. This is indeed very difficult, but it doesn’t give the same feeling as using the diplomacy. For optimal gameplay you should play it with 8 humans. [I don’t think I ever played it with more than 4, maybe 5 people. But the more the better, I guess?]

The units, the buildings, the terrain etcetera are completely editable. But you can’t skin the entire game with the standard settings. For example, on the start of a turn there is a dragon, with the turn number. It would’ve been nice if you simply could’ve selected a tank for that in, say, the WWI scenario. [A tank? You mean a zeppelin!]

I bought this game for about 5 Euro in 1996. [Meaning about Ζ’10,- (10 Guilder).] You can now purchase it on SSG’s website for a small price. [Alas, I don’t think you can buy it anywhere anymore.] If you have a computer at home made before 1998, and after 1993, I assure you, you won’t be disappointed by this game. Even my friends who don’t like strategy like this game. [I probably meant RTS.] Or alternatively, if you have Windows 2000 or XP, get yourself VDMSound and play this game on your brand new computer![Nah, get yourself DOSBox. Works like a charm.]


Cutting Corners With Linear Gradients

Presumably unnoticed by all, back in December 2012 I replaced the image-based cut corners in post headings with pure CSS. Border-radius removed the need for images to round corners, but you don’t need images anymore to cut them either.

Edited down to only the cutting of corners, this is what it looks like now:

.posttitle a {background:#0b0; background:linear-gradient(225deg, transparent 8px, #0b0 8px)}
.posttitle a:hover, .posttitle a:active {background:#6c0; background:linear-gradient(225deg, transparent 8px, #6c0 8px)}

And this is how it used to be:

.posttitle a {background:#0b0 url(images/posttitle.gif) no-repeat top right;overflow:hidden;}/*overflow:hidden for Webkit which insists on adding some kind of margin*/
.posttitle a:hover, .posttitle a:active {background:#6c0 url(images/posttitle.gif) no-repeat 100% -91px;}

Size-wise the difference is small: the GIF was only 107 bytes. You’d pretty much make up the difference by adding prefixed versions of linear-gradient if desired, albeit you do still save an HTTP request and you avoid one of Webkit/Blink’s bugs.

For scaling it matters only very little. But not having to open up an image editor for simple things like this? Fantastic.


Feed Pick: My New Feed Icon

Recently, it came to my attention that most browsers no longer visually notify users of the presence of newsfeeds. To rectify this gross negligence, I decided to add a little feed link on the top right. It was immediately obvious that an icon would go nicely with it. More specifically of course, an SVG icon.

First I looked at the most obvious source. These are some icons Mozilla put out there to promote feeds: the very same icons that for unfathomable reasons they no longer display in their browser by default.
I made some quick modifications to integrate it better with my theme.
I tried a few different looks. I realized this was opposed to the (not legally binding) guidelines for this icon. Partially because of that and partially because I still wasn’t happy with the visuals, I moved on.
I took a quick peek on openclipart, or rather in my local copy that integrates with Inkscape, and found this beautiful icon. So I took it as a new starting point.
And finally, I ended up with this. I’m still debating whether it needs a stroke on the outside, but I’m happy with it for now. Because it’s SVG it scales beautifully, and it’s only 600 bytes after some quick manual optimization. A 24×24 PNG image is twice that. Finally, to be a good net citizen and all that, I uploaded it to openclipart as a remix of the original.

Comments (1)Tags:

On My Header Image

In what is probably the biggest visual change since I first created this theme back in ’05β€Šβ€”β€Šyes, it’s that old!β€Šβ€”β€Šon June 2, 2011 I replaced the header image with a picture I took a month prior in the Keukenhof.

The opportunity presented itself to experiment slightly with decent JPEG compression, rather than simply depending on GIMP’s output, which unfortunately is virtually guaranteed to be suboptimal. Since all I did was crop and resize, I used PNG as my working format. I might’ve been able to use jpegcrop and jpegtran, but since I was going to re-encode in a lossy manner afterward that would have been nothing but needless extra effort.

First I tried cjpeg, which doesn’t support a lot of input filetypes, so I had to save a copy as BMP.

cjpeg -quality 80 -optimize -progressive -dct float -outfile test80.jpg head.bmp

Then I discovered that imagemagick can do the exact same thing, optimized by default and everything. It also uses libjpeg under the hood, so the resulting image is exactly the same.

convert -quality 80 -interlace plane head.png test80.jpg

That results in JPEGs that are about as small as they can get without enabling options that might not be readily supported by all viewers. I wrote a (very) simple shell script to aid with a quick overview of size versus quality.

convert -quality 30 -interlace plane $1 ${filename}30.jpg
convert -quality 40 -interlace plane $1 ${filename}40.jpg
convert -quality 50 -interlace plane $1 ${filename}50.jpg
convert -quality 60 -interlace plane $1 ${filename}60.jpg
convert -quality 70 -interlace plane $1 ${filename}70.jpg
convert -quality 80 -interlace plane $1 ${filename}80.jpg

My rationale is that any quality under 30 is most likely too ugly and anything over 80 will result in a file size that’s too large for my intended purpose of using lower quality β€” but not low quality β€” images on the Internet.

I also decided it was time to get rid of my half-hearted concessions to Internet Exporer. This in no way inhibits readability of the content.

Comments (1)Tags:

Behind the Scenes

Half a year ago’s post, about why we decided to buy a washing machine two years ago, was actually written back in September or October of 2009. I didn’t post it at the time because it made me aware I had no table styling. I then proceeded to make a testcase for table styling, which I presumably finished before October 2009 was over.

Sadly for the post, however, I then forgot about it till last year, when I found my table styles testcase during my switch from NTFS to ext4. This had the side-effect that I started incorporating various stylesheet upgrades I’d written over the past two or three years, giving you a different default width and fancy schmancy transition effects today β€” or actually already back in May 2011 because that’s how long it took me to actually publish this. I really do need to stop putting things in drafts for potential revision without ever picking them up again.



After nearly five years of being hosted at a subdomain of Lowter, this blog is now hosted on my own server. I would like to extend my gratitude to Ethan for hosting me all those years.


Intelligent Alien Life Does Exist, Otherwise They Would Have Contacted Us

This post is recycled, and was originally published on my former weblog on Saturday 2005-02-26 at 18:08:45. I tweaked some grammar and spelling here and there, but I resisted the urge to rewrite this entry almost entirely. I did not, however, refrain from commenting on myself. Sensitive souls beware: I added some brand new explicit content.

This is the only signature I had which really liked. [I guess I must really, really like it, for I still use it.] It looks like a quote from someone famous at first sight [(of course famous by no means implies not stupid)], or just a good old expression (you know, like “an apple a day keeps the doctor away”), but it is entirely a product of my brain. [Whoopee.] I don’t find that so very surprising all by itself; in what may be a form of narcissism, I say things I consider quotable quite often. [Saying quotable things sure is narcissistic. What’s that? You meant I consider things I say quotable quite often, did you? Very well then, carry on. On a very related matter, I’m not so sure if stupid jokes like You’ve got the first pickle (when offering a few pickles) as a play on first pick is all that quotable, though.] But still, this particular “quote of my mind” has a sort of uniqueness over it. [Oh boy. If that means it’s the magnum opus of my brain, I’m fucked.]

You should also know something about my browsing behavior to understand a bit about what happened when the quote came to me. I seldom browse with less than four pages open. [Even at the time that was a lie and you know it. I bet you rarely managed to browse with less than 10.] I basically just open what I find interesting and then read what I have opened one by one, or close it quickly if I see it is not what I expected it to be. [Most people, on the other hand, close pages they don’t want to see as slowly as possible.] I also start writing a reply to something, to interrupt it by going to some other page, after which I will continue writing the reply. [You were also doing that while writing this post, weren’t you?]

The situation where the general idea came into my mind was like this. I was filling in profile information on some site (I don’t remember which one, but it doesn’t matter) and I came to the signature part. I could use the quote which I made up with my Chicken avatar (“The chicken and the egg came at the same time”), but I wanted something new. [I’m sure that everybody knows what your Chicken avatar looks like.] Something catchy. So I decided to go to another site. Meanwhile, I could think about my signature.

It was quite a strange site I visited. A UFO related site, where they argued that UFOs actually were some kind of new technology from the Third Reich, whose descendants still resided on Antarctica. Utter nonsense and therefore enjoyable. [The perfect way to judge whether something is enjoyable.] But then suddenly this thought came into my mind, because of the combination between World War II and UFOs. [Suddenly, I wanted to kill myself.] Why haven’t aliens contacted us? If they’ve observed us they must have noticed the bloodbaths of Alexander, the expansion and fall of the Roman empire, the Conquistadors, Napoleon, and most important, World War II. So yes, obviously alien life is intelligent; if they weren’t, they would have contacted us. Intelligent alien life does exist, otherwise they would have contacted us. [Amazing!]

And there it was. The perfect signature. I had exactly the kind of bad quote I wanted my signature to be. I still like it. [I guess I can live with it for a while longer. Perhaps I should update it. Space dinosaurs do exist, otherwise they would not be extinct on earth.]


Taking Sidenotes to 2010

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.

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>

Or in HTML 5:

	<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>

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) {
	.sidenote {
		margin: 0;
@media all and (min-width: 980px) {

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.


Updates on Twitter

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.

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.


Older Entries »