Hawksworx

I have used TiddlyWiki, the popular self-contained wiki, before and had even tinkered under the hood a little, but I have never really tried using it in anger. My uses for it until now have been mostly simple tasks such as keeping lists and jottings in central location up in the cloud.

A useful resource, I think, is TiddlySpot, who will host a TiddlyWiki for you and let you access it via your own URL. TiddlySpot also use AJAX to save your changes back to their server. Neat.

In the past I have spent some time tweaking TiddlyWiki’s CSS to customise the look and feel a little, but this has always been fairly shallow exploration.

Since one of the exciting applications of TiddlyWiki is that it can be used as a platform for hosting your website, it seems good sense for us to use it as our own site at Osmosoft. After all, we should ‘eat our own dog food’, right?

With that in mind, today I have been working on restyling a TiddlyWiki in order for it to look and behave like a company website with all the branding considerations that go along with the task. …and I have to say, this is fun!

I’ll be honest, it feels like there is a bit of a learning curve for this kind of task. Since you can succeed at this task through some determination and a moderate understanding of HTML and CSS, it is easy to miss out on a better way to get the job done. I was quite happy plugging away, embedding HTML into the site’s page template so that I could then style it with some custom CSS to get the site to look just so, and this worked just fine, but then I learned a better way.

Like other wikis, TiddlyWiki parses simple wiki markup into HTML and then renders it on the page. It supports most HTML constructs and so it made no sense for me to be jamming in my HTML just for the sake of providing the structure of the site. Falling back on tiddlers (TiddlyWiki’s inline equivalent of wiki pages) to contain and organise the structural components of the site, such as the navigation elements and live, inline searching (another boon of this single-file tool) means that it is super easy to modify in the future.

You also get a great sense of clarity in your code. Things are organised into bite-sized chunks in their respective tiddlers and consist of wiki markup rather than HTML. Nice and simple.

Even the CSS that you then associate with your HTML lives in a tiddler of it’s own. This really is a one stop shop. Everything, with the exception of your images (but hey, you can just link to those) is contained in this one file which you can then copy onto your web server and bingo. A web site!

I’m still learning, but expect a new-look Osmosoft site coming to a browser near you very soon!