The Tech Stuff

Hello, I’m James Bridle, the author of this fine book, and I am a geek.

So, when I wrote a cookbook, I also thought of all the geek-related stuff I could do with it. Here are some of them. My own experience has shown that someone, somewhere will find some of it interesting and/or useful.

Code

This site is built using web standards, with valid XHTML and CSS, for accessibility and other reasons. I like this explanation:

This is an attempt to make a code that can go decades and centuries, getting broader in scope without ever shutting out it’s early versions. Because that’s what we need the code to do: this code is for recording what we think. There are no paper backups of the web. Every day we put more on it that we’re not putting in our traditional medias. If we don’t use extensible code, then our current history evaporates with the next minor tech change. We’ve never had this problem before. Before a mark on a page could go centuries; there’d always be daylight to read it by. This is a new problem and it required a new solution. [Source]

If you work on the web, you have to write valid code. No exceptions.

The Back End

This site is run on Wordpress. Free software rules. I use WP for most of the sites I build, as much for content management as blogging (the blog is a very small part of the site). One of the greatest things is that if you need to do something WP doesn’t do already, someone’s already written a plugin for it. Some of the plugins that have helped me, in this case, are:

The last one merits a mention. I’m not sure about SEO - a snake-oil business at best - particularly as WP does a very good job of making itself searchable without extra help, but this plugin does create excellent metadata out of posts and pages - very handy for recipes and the like.

InDesign and XML

I did the typesetting for Cooking With Booze as well as writing it, and it was laid out in InDesign. I’ve used InDesign quite a lot, and as I was writing it and typesetting at the same time it helped give the book structure. Because I knew I was going to want to put the book online, I was careful to make good use of paragraph and character styles throughout the typesetting process.

When the time came to create the website, I used InDesign’s XML features to generate much of the code automatically. XML.com has in-depth material on this, but the basic procedure is this:

  1. Mark up InDesign document with paragraph and character styles
  2. Open the Tags palette (Window > Tags) and create XML tags (New Tag... in the Tags dropdown menu) for all your paragraph and character styles.
  3. Match the styles to tags (Map styles to tags in the Tags dropdown menu). InDesign automatically tags your entire document.
  4. File > Export... - select XML format.

And you’re done. This produces an XML document you can edit elsewhere (I use Coda). Here’s an example of one of the recipes as exported by InDesign:

<recipe_header>Brandy Baked Brie</recipe_header>

<recipe_subheading>Go on, say it. Say "Wheel of Cheese". Sounds good, doesn’t it?</recipe_subheading>

<recipe_ingredients>375 ml (1 1/2 cup) brown sugar</recipe_ingredients>
<recipe_ingredients>225g (1/2 lb) walnuts, finely chopped</recipe_ingredients>
<recipe_ingredients>1 (900g/2lb) wheel of brie</recipe_ingredients>
<recipe_ingredients>125ml (1/2 cup) brandy</recipe_ingredients>

<recipe_instructions>In a small bowl, mix the brown sugar, brandy and walnuts. Place brie on top of something you can put in the oven (a small grill pan will do) and spoon the walnut mixture over top, covering it completely. Wrap the brie and pan in clingfilm and stick it in the fridge for a good couple of hours. When ready, preheat the oven to 205C (400F), unwrap the brie and bake for 10 to 15 minutes - until it starts to melt. Allow to cool a little before serving with thin toast or crackers.</recipe_instructions>

All the tags were chosen arbitrarily by me, and InDesign’s output is actually a lot messier than this, but once in this format, it’s easy to do search and replace operations on the full document to lay it out a bit better, and change the tags to useful ones:

<h1>Brandy Baked Brie</h1>

<p>Go on, say it. Say "Wheel of Cheese". Sounds good, doesn’t it?</p>

<ul>
<li>375 ml (1 1/2 cup) brown sugar</li>
<li>225g (1/2 lb) walnuts, finely chopped</li>
<li>1 (900g/2lb) wheel of brie</li>
<li>125ml (1/2 cup) brandy</li>
</ul>

<ol>
<li>In a small bowl, mix the brown sugar, brandy and walnuts. Place brie on top of something you can put in the oven (a small grill pan will do) and spoon the walnut mixture over top, covering it completely. Wrap the brie and pan in clingfilm and stick it in the fridge for a good couple of hours. When ready, preheat the oven to 205C (400F), unwrap the brie and bake for 10 to 15 minutes - until it starts to melt. Allow to cool a little before serving with thin toast or crackers.</li>
<ol>

Which can then be pasted straight into your HTML (if I was smarter, I’d have written a script to import them straight into the Wordpress database, but hey).

For more uses of this, see the next section.

Microformats

I’m a massive fan of Microformats, and I try to use them in everything I do. Unfortunately, at time of writing (10/07), there is no agreed format for a recipe microformat, although there are various possible examples, some similar projects, and a discussion underway.

So, I thought I’d try to contribute by marking up my recipes in an experimental microformat, and giving the community some data to play with. All the recipes on the site are marked up as follows:

<div class="hrecipe">

<h2 class="title">An Example Recipe</h2>

<p class="note">Here is some introductory text to the recipe. It serves 4 people.</p>

<ul class="ingredients">
<li class="ingredient">X of something</li>
<li class="ingredient">X of something else</li>
</ul>

<ol class="instructions">
<li class="instruction">Here is the first step</li>
<li class="instruction">Here is the second step</li>
<li class="instruction">Here is the third step</li>
</ol>

</div>

I originally tried to include more information about, for example, the number of servings (<span class="serves">4</span>), amounts of ingredients, and so on, but this proved far too time-consuming - if I’d used character styles while typesetting it in the first place, this would have been trivial. A lesson there.

However, anyone who wants to have a crack at this is welcome to download the entire recipe collection in the XML output by InDesign (tidied up a bit):

↓ cookingwithbooze.xml [Zipped, 36K]

CC-licensed, etc. - let me know what you do with it.

Booktwo.org

If you’re interested in this kind of book-related geekery, you may be interested in booktwo.org, a site I write about literature, technology, and the growing intersection between the two. Just a thought.