Dr Nic

Auto-completer for my blog comments

It took 4 hours to return from the town of Strängnäs to Stockholm via train. Normally, its 40 minutes. The train never turned up. 4 * 60 – 40 = 200 minutes of non-travel.

Stuck in a train station for 200 minutes I tackled a problem that has irked me for some time.

In my blog comments, when I reply to someone else’s comment I’ll normally use the syntax: “@chris – thanks for the kind feedback, I’ll send the money via paypal“.

And then Chris says “@Dr Nic – yeah, send it to the usual account; the tax man will never find it“.

And then I say “@chris – no problem“.

Its not that “@chris” is difficult to spell, but I’ve used IRC and Gmail long enough that I like auto-completion. The absence of auto-completion in Skype irks me too.

What I really want is:

“@c” + TAB expands to “@chris – “

So that’s what I now have. And its neat.

Demo of auto-completer

Unfortunately, the first person to leave a comment below won’t have anyone to reply to, and so theoretically wouldn’t get to experience the joys of the feature, that is so awesome and sexy that my very own wife called:

“That’s nice dear, now help with dinner”.

So, by default “Nic”, “Dr Nic”, “drnic” are available. The 2nd commenter will get these + the name of the 1st commenter. The 3rd commenter will get… hehe, you thought I was going to type that out.

Here’s what you’ll see when you save your comments:

Testing Autocompleter

Public release

Its currently implemented for WordPress, using Prototype/Scriptaculous. Well it works on my WordPress theme. It figures out the auto-completion list from the HTML, not from the blog/forum server.

I’m not sure how different everyone’s HTML is for their comment blocks. That makes it tricky to release the conde at the moment for general consumption. You might be an HTML guru and make it work, but your sister isn’t.

So, can you please comment below (wink wink) with the name of your blog software, and include your blog url in the URL field. I might be asking for grief here, but I’ll scope out everyone’s blog comment HTML and see how different/similar they are.


If someone in the comments has already mentioned your blog software (WordPress, Mephisto, etc) then you MUST reply to their comment. If you are first to comment with your blog software, then use “@Dr Nic” instead.

This is life-or-death critical as it gives you an excuse to play with the auto-completer thingy. Lives are at stake here people!

Don’t have a blog, but want to comment anyway to play with it in all its snazziness? Go for gold.

[BTS] Dr Nic’s Civilizations 2.0

I’m not promising there ever will be a Dr Nic’s Online Civilizations game, but it has seemed like a good idea for a few weeks, and today I went from ASCII map through to beautiful CSS rendering of the map.

ASCII to HTML mapping
Base tiles
Correct edges
Convert table to div structure
Simple layout of map Basic tiles Correct edges Removed table structure

I miss home.

TilesheetThis was a technically interesting process. The images used are actually all on the one base tile sheet [1], and each panel of the map is allocated a separate CSS class relating to the specific tile required.

So for example, to show the base grasslands tile, you’d need some CSS like:

.tiles {height: 30px; width: 30px; background: url(tiles.png) top left no-repeat; ...}
.grasslands {background-position: 0px -30px;}

For a desert tile, with some grasslands to the left, you might use:

.desert-left {background-position: -60px -60px;}

This really gives a nice tiling effect without you needing to do any fancy image manipulations or the user loading up lots of small images. You just assign the appropriate CSS class to the panel (a DIV or TD, for example). Want to change a tile? Change the class (e.g. using Prototype/jQuery libraries)

Yes, this solution requires lots of individual CSS class definitions; but you’re clever – you’ll generate them won’t you :)

Reader assistance required

The one technical trick that I don’t have a solution for at the moment is a Google Maps-like interface for scrolling map around. I’d love to hear from anyone with some bright thoughts on how they implement that (I don’t want to have to try to read their compact Javascript code).

Any thoughts?

[1] The source images came from the FreeCiv GPL game

[Preview] Magic Announcements

While other people in the world have been doing real work, I’ve been on maternity leave. Thus in spare time, I’ve been cooking up something much more fun…

Today, you get to see a magic trick. No code to download, no brain cells to engage. Its Sunday after all. A day of rest, BBQs, beer, football, and magic tricks. Everyone knows that.

But I can’t show you the trick here in your feed reader… the lighting is terrible. Jump to my site for the live magic show itself.


Ok, at the top of the screen… I introduce to you the Magic Announcements. They are just brilliant, and good looking to boot.

Once you’ve read each one, you click on them to make them go away and they will never return. Once you’ve read the announcement of verson 0.7.1 of Dr Nic’s Magic Models, you will never see another announcement until a new version is released (be it 0.7.2, 0.8.0, or 1.0.0, etc). Nod your head with me, this is cool.

When you get your hands on this, it will be a pure Javascript install into any page (or domain of pages such as a blog). It will fetch announcements AND version change information from anywhere on the web, not just the presentation site. For example, the version information for the two projects are being retrieved from the project home pages themselves. This way, I never have to modify my blog to enter new announcements or versions: I just update the relevant data at the relevant place.

How cool is this? Imagine if you could plug the Magic Announcements directly into RubyForge or SourceForge, etc, and whenever you released a new version of your code to *Forge, your blog automatically started announcing it to your readers! Keep nodding, sexy, yes.

I’m still writing up the install/usage docco for it, but I hope to release it within a day or two.

But to give you some preparation time, for each project you want to provide announcements for, you will need to create files that look like this:

MagicAnnouncement.show('magicmodels', '0.7.1');

If you want to provide generic site announcements, like “Welcome to my website”, then it will look like this:

MagicAnnouncement.show('general_notes', 1,
  "Very rarely, you\'ll learn something here. Mostly, you'll just be entertained by the programming magic.",
  "<strong>Welcome to Dr Nic's Magic Castle of Programming Mystery</strong>");

In both cases, the 2nd argument is the announcement version number. The 3rd is an additional description (useful for version announcements and site announcements), and the 4th is for the header. You’ll normally want the header to be generated for you for version announcements, as per the Magic Models and Composite Keys announcements above.

Bonus: want to see the announcements again? Turn on the Debug Controller