For this blog, I wanted to include some nicely-formatted formulas. An easy way to do so, is to use MathJax, a javascript-based math processor where you can write formulas using (among others) the often-used Tex math syntax.

However, I use Markdown to write my blogposts and including formulas directly in the text can be problematic because Markdown might interpret part of my math expressions as Markdown and transform them before MathJax has had a chance to look at them. In this post, I present a customized MathJax configuration that solves this problem in a reasonable elegant way.

See more ...

As you might have noticed, my blog is no longer layouted at a fixed width of 800 pixels, but stretches to fill the entire width of the page. I had meant to do this a long time ago, but I just could not get it to work with CSS alone, the only way to do it that I saw was using tables. Since I dislike tables for layouting, I made the width fixed.

Yesterday, somebody on IRC said it was perfectly possible using CSS and pointed out how. His suggestion did not work, though the idea behind it was good (Make the left bar a float, and to prevent the right bar from flowing below the left bar, give it a very wide margin, so the float will stay in the margin). I did some more digging in the CSS 2.1 spec and found a part about block formatting contexts.

From this section (and a number of others) I concluded that if the right bar (with the posts) would start a new block formatting context, it would be properly shortened to fit besides the left bar and I could use floats and the clear property inside the bar without interfering with the float(s) outside the bar.

So, I tricked Firefox into giving me a new block formatting context by setting overflow: none on the bar. This did not really work for IE, I needed to set float: left to make it work on IE. Of course, this breaks on Firefox for reasons I do not fully understand. So, I used the html>body part of the IE box model hack to make Firefox forget about the float part again...

Now my CSS is ugly, but it works!

Yesterday, I've fixed up the menu and breadcrumbs plugins I installed recently to display Inter-Actief with proper italicization.

Just now, I've added some syntax to the markdown plugin to support left and right floating images. Also fixed a small issue with nesting images in links in markdown.

As you might have noticed, there is a new block to the left: "Recent feedback". Since it is nice to be able to see comments to older posts, I wanted this feature. After some fiddling (it even exposed a bug in the feedback plugin) I got it to work.

I'm using Frank Hecker's feedback plugin for my comments and writebacks instead of the "normal" comment or writeback plugins or derivatives. Yet, all the recent feedback kind of plugins were written for those. Still, since the feedback plugin uses a format very similar to the other plugins, I decided to give it a try.

After some comparing plugins, I found the writeback_recent plugin, which pretty much did what I wanted and even got comments and documentation (as opposed to some of the other plugins). To my surprise, it pretty much worked out of the box with feedback.

I used the following configuration in writeback_recent:

my $writeback_dir       = "$feedback::fb_dir";
my $trackback_extension = "wb";
my $trackback_flavour   = $blosxom::flavour;

I use $blosxom::flavour here, since feedback does not use a different flavour to display commetns as writeback does. To make sure that the reference to $feedback::fb_dir in the first line would work I updated the feedback configuration replacing my with our in the fb_dir configuration line:

our $fb_dir = "$blosxom::basedir/feedback";

I've prettified the category listing at the top of the page using the menu plugin this week. Instead of showing all categories recursively, it now shows just the (sub)categories in the current category, so you can browse them. Also, the current category is show using the (slightly modified) breadcrumbs plugin.

I've also started tagging posts using the tagging plugin. Tagging is a very freeform way of categorizing posts, without limiting them to just one tag. At the bottom of the posts, all the tags that are stuck onto the post are show, click on them to see other posts with the same tag. The tagging plugin also supports listing related stories, I might enable that as soon as I've tagged a few more posts.

Also, look at the fancy "tag cloud" to the left, which shows all tags I've used (bigger and darker means more frequently used). Not too many yet, but that'll change soon.

I've found a bunch of other plugins that seem useful too, so I'll be spending some more time in the train (as I do now) configuring and embedding those plugins soon. Let's see if I can get some kind of photo gallery up and running now...

Due to a recent abnormally long post I decided to finally look for a plugin to chop up my posts, using a "read on" link or similar. This keeps my blog frontpage is little more clear, prevents huge RSS feeds and makes sure I won't take up the entire front page of the Wereld van Pro Deo.

To do this, I installed the seemore plugin, which pretty much works out of the box. I think I want to replace the "See more..." text with something different, but I should first think about what that should be.

First, let's get some sleep. (And yes, I know that the link above is broken, see my post about markdown for why).

Until now I would type every post I made in pure XHTML. That is, paragraphs start with <p>, links were put into <a> tags, etc. Since that can become quite some work, and I wanted an easy way to insert links into my text (for example, I don't want to type http://www.debian.org everytime I want to include a link to Debian). Therefore, I searched for something that could do this kind of stuff for me.

The are a lot of Blosxom plugins that can automatically create paragrahps and generate other kinds of markup. Most of these plugins are based on some wiki syntax, but I actually liked none of these. Besides easily including links to fixed sites, I also wanted to be able to include links to posts within my blog, or images in some configurable directory.

I've decided to use Markdown for all this. Markdown is simple formatting language meant for blogs. It is designed in the style of email communication and should not just render pretty XHTML, but also look good in plaintext. Nobody will probably ever read my entries in plaintext besides me, but still, they look pretty now :-)

I had to modify markdown a little, though. Normally, all links used by markdown are in the same document (blog post in this case). That is, if I want to link to debian, I don't have to type the URL at the spot of the link (I can just say link to "Debian"), but I do have to type it somewhere in the post (to define that "Debian" actually means "http://www.debian.org").

I've hacked in support for reading a file that defines a number of links that can be used in any document without specifying the URL. This file contains the links that I expect to be using more than once.

This also allows me to easily insert sections and lots of links in a post, which I needed for my huge post about my new laptop. Also note that right now, links to blog entries, wikipedia or images do not work yet, since Markdown has no support for that. I will probably use the macrolinks plugin for that.

Since many people seem to like the alternating layout of my blog main page (which I actually reused from the who's who page from an IRC channel website I made) and comments looked like crap here, I decided to update their layout. I had to make a small modification to the feedback plugin to distinguish between odd and even comments but it works now. I still haven't decided exactly how I want to do the alignment and the borders and stuff, but I'm outta time now. At least it looks way better than it did.

Edit: I've been playing around some more with titles, borders and alignment and dropped the alternating comments thing for now. Expect some more changes soon.

I've fixed the layout a little, since I got reports that it looked like crap on IE. Some investigation turned out that IE handles <pre> html elements wrong.

A few posts below I pasted a piece from a sendmail config file, which I wrapped in to <pre> </pre> to make it look nicer (in a fixed sized font et al). Unfortuanately this means the text doesn't get wrapped and therefore is wider then the column in which I put the posts. Therefore the "box" of the pre element (to speak in CSS terms) gets bigger then the room available (just under 590px). IMHO, this would be tough luck for the pre element, which then gets cut off by or flows outside of the div element that contains it. This is the way firefox handles it, which means everything looks great (since it didn't really flow outside of the div, but just inside the pading that would normally be white).

IE on the other hand, decides it is a good idea to ignore the explicit "width" attribute I have set for my posts and expands the column instead. Hey, whattayouknow? Now the sidebar + posts don't fit anymore. Instead of also expanding the outmost div element (with a fixed width of 800px), it finds a "better" solution: If you put the posts below the sidebar, everything fits! Though it does do this last part (thankfully) according to specs, it obviously looks crummy.

The fix for this is as simple as it is ugly: Decrease the font size inside that pre element by a few percent, to make it fit like everything else. Tada, problem solved. Stupid IE.

In the last week I've been searching for "the" blosxom IRC channel. Turned out there was none. Open source projects without irc channels, what the hell? Anyway, I dug a little and found out there used to be one on Freenode. It's even still registered (I still need to find a "real" blosxom dev that wants to register me as group contact for blosxom, but that's for later), but the channel owner hasn't been around for 2 years :-)

I decided to just hang around the channel as I do with my other dozen channels and see what happens. To improve my chances, I've posted a message to the mailing list stating my intent. By now, there are already 5 people in the channel, maybe some more will join soon. Quickly I understood that the first thing everybody wants to do was see eachother blogs, so urls keep flying around. To facilitate that, I wrote a small (plugin for an) IRC bot that saves everyones urls. This IRC bot is called "blogbot" for now due to lack of inspiration and supports a few simple commands:

• #setblog <url> - Sets the url to you blog.
• #blog [<nick>] - Gets the url of the specified nick, or your own if no nick is there.
• #bloglist - Lists all the blogs the bot knows about. I might kill this command in the future, if the list gets longer...