How to publish a chess game on your blog

Contents

What's the problem?

Step One: Plugging in the extension

Step Two: Formatting the chess data

Step Three: Publishing of your post

Editing the CV section

Disclaimer

Annex

What's the problem?

Blogging is already one of the most popular ways of Web publishing for a good reason. The concept of simple to operate environment where authors can quickly publish their articles (i.e. postings) is ap­pealing to everyone, especially those who tried our hands on Web publishing the old-fashioned way (with little or no automation). Authors of chess related content have always had one extra wish - to be able to post a chess game/position so that to illustrate their ideas on a chessboard (e.g. this nice wish-list Publishing of chess games). Sure, pictures could be used but anybody who ventured to gener­ate, store on disk, upload and afterwards modify chess diagrams will tell you that not only is it time consuming, but it isn't much fun either. Moreover, chess diagrams are too static to meet the expecta­tions of today's Web where dynamic content (e.g. animation) is regarded as an essential element of modern design.

Over the years, applying the whole range of Web technologies, several solutions were developed but the problem was solved only to a certain extent. A complete, reliable and truly user-friendly solution remained to be seen. Here are a few of the key contenders:

• Some solutions require a piece of software (an applet) to be installed on the server which may not always be possible, desirable or practical (very common situation in blog's environments). If you’re not a Webmaster and you don’t want to spend much time on maintenance or software upgrades, you might be disappointed by the amount of extra work;
• Other solutions would transform our initial chess data into some proprietary internal format (usually based on HTML) which appears cryptic, illegible and only loosely related to chess. After a while, you may realize that (re)inventing new formats is more destructive than it appears at first sight. In most cases the final representation would be very difficult to modify after publishing (if at all possible);
• Yet, other solutions introduce a whole new system for storing (and retrieving) user's chess data. To do that we are expected to trust our chess data to an external (third-party) repository. Among many drawbacks of such approach is the whole new set of skills that need to be learnt.

On the other hand, we all know how easy it is nowadays to publish rich text, photos and even videos. I kept asking myself: “Why should publishing of chess data be more difficult?”

My solution focuses on usability and leaves chess authors with only one concern: the chess data. All of the underlying implementation details are secondary and designed to stay behind the scenes. Users are expected to follow just a few steps that are easy to understand and carry out. The defining goal of my approach is to meet the best spirit of blogging: Authors should only worry about content.

Step One: Plugging in the extension.

Frankly, this is the installation step. It only needs to be done once and it literally takes a minute. Part of my project is a module called "deployChessViewer.js" which needs to be included in your blog's layout. Not a big task but, if you haven't modified your layout before, some extra caution is well justified. Login to your blog as usual, open the "Layout" tab and click on the "Edit HTML" link. Scroll down the template, which is inside the "Edit Template" box, until you find the </head> tag (there should be only one). On my original layout it was located two pages up from the very bottom. Here is a snapshot of the section of my layout just before the </head> tag.

...
body#layout #footer-wrap1 {
  padding-top: 0;
 }
]]></b:skin>
</head>
...

Carefully, without changing anything else, you need to insert the three highlighted lines from the box below into your template just before the </head> tag. The easiest, of course, is to select and copy the lines, then switch back to your layout editor and paste them into the template. When finished, click the "Save Template" button and you're done. Take your time if you're not comfortable editing the layout and consider making a backup before you start (just in case).

...
body#layout #footer-wrap1 {
  padding-top: 0;
 }
]]></b:skin>

<!-- Chess Viewer stub -->
<script src='http://chesstuff.googlecode.com/svn/deployChessViewer.js'
type='text/javascript'/>

</head>
...

Step Two: Formatting the chess data.

First of all, to get started you need to have your chess data in PGN format. Most likely that's already the case since PGN is the most popular format. Your initial PGN data (the source) needs to go through one extra step of preparation in order to be ready for publishing. I refer to it as data formatting (or wrapping) because it resembles various other formatting we do to improve the layout of our posts. This method of chess publishing stores your chess data in the most natural place - inside your post's body. Exactly like the rest of your article the chess data can be later modified as you wish. Such flexibility brings a lot of good news and accounts for some major advantages. Let's name a few:

• Your chess data will be stored in its original source format exactly the way you submitted it in first place;
• Modifying the source PGN later is not only possible but very straightforward and, best of all, you won't need anything special to do it (no new tools or skills);
• You truly own your chess data and the integrity of your post is by design. This means that your chess data will always be available along with the rest of your post;
• The backup policy that is already in place for your blog will automatically take care and backup your chess data as well (since it is an integral part of your posts).

During the formatting step you may also include some extra instructions to fine-tune the final presentation. Instead of going into lengthy explanations how to do it manually I developed a Web application that does the formatting for you: HTML Code Generator for Blogs. Explore the form and you will quickly have an idea of what this is about. For easy access you can find the same link under the Project's Resources section in the sidebar.

In a nutshell, the chess data is formatted into a ChessViewer (CV) section which consists of three segments nested within each other: the outermost HTML tags, a JavaScript wrapper and the PGN data. The innermost segment is the largest one and is also the easiest to recognize as it contains the original PGN source with its original formatting preserved. You can't do any harm playing with the form so feel free to submit your own PGN and see if you can identify the three segments in the CV section.

Step Three: Publishing of your post.

The result of the previous step should be a CV section (or a block, if you prefer) which is ready to be inserted into the body of your posting. To do so you need to select the "Edit HTML" mode of the post editor, go to the right location in your post and paste the CV section. Once published, the CV section will always be part of your post unless you decide to remove it.

That's all there is to it. At this point, you must realize that you're running out of excuses not to share your games and puzzles with us. Please, tell all your friends and neighbors about the easiest and most powerful method of chess publishing you just came across.

Editing the CV section

When you feel like editing a CV section after publishing (eg fixing or improving it) you’d need to use the "Edit HTML" mode of the post editor. If you're familiar with that mode you already know that your post won't appear the way readers normally see it on their screens. Instead, all of the otherwise invisible tag elements will be shown and that will make editing somewhat trickier. The biggest advantage of "Edit HTML" mode is that it gives you full control over every aspect of your post’s layout and content.

Most of the time you will be modifying the original PGN data (ie the PGN segment). Whether you're fixing an illegal move or introducing a new variation or annotation you can use the full power of the editor. A complex game with complete analyses will have pretty large PGN so you might want to make it friendlier by using line breaks and extra white space. All of your formatting will be preserved making future editing easier.

After a while you might be tempted to tweak some of the parameters in the JavaScript segment. Good example would be if you changed up your mind about a custom color. That won't be a problem if you have (at least) some minimal JavaScript language experience. If not, you might inadvertently break the syntax causing some kind of runtime error when the page is getting loaded by the browser. Of course, you should try to avoid that scenario and be ready to revert back your changes. The next two paragraphs only concern those of us who're brave enough to play with the JavaScript code. Non-technical users are encouraged to skip ahead.

There is this peculiar detail, I should warn you about, which is especially relevant to users of Google's blogger.com software. In your blog's "Formatting" preferences under "Settings" tab you will find the "Convert line breaks" option with Yes/No possible values (also known as "Gratuitous Line Breaks", see sidebar for more info). Regardless of that parameter current setting, your CV section will be published successfully and displayed just as expected. The warning only applies to future editing of the CV section and only if you have the parameter "Convert line breaks" set to "Yes". In such case you should be extra careful modifying the JavaScript segment. For example, inserting new lines will very likely destroy the formatting and cause runtime errors. If you find yourself in such troubles you can always extract the PGN segment and reformat the entire CV section from scratch using the form (above).

In fact, the side effects of that parameter setting are well known in other situations (unrelated to chess) and every blogger gets some experience with them. I can only wish that blogging software providers could find a better, less painful solution. Allow me to say that formatting documents by pressing the "Enter" key was a common practice in the era of typewriters. It still has a limited usage in plain text documents (like PGN ones) but in the on-line world of HTML you should definitely know better. If so, you could completely avoid the possibility of nasty side effects by keeping the parame­ter "Convert line breaks" set to "No". In that case the post editor will be more forgiving to your editing style and you will be more flexible in your choices.

Disclaimer

The author makes no representation about the suitability of this solution for any particular purpose. The software is provided "as is" without any express or implied warranty.

Annex

The following pages make use of the above method:

Using the Chess Viewer Applet
Six Must-Have Features of a user-friendly Chess Viewer (a guide to essential functionality)
Susan Polgar in Austin as posted by Susan on her Blog A very exciting game!
The Pope's Puzzle (along with a curious offshoot puzzle)

Related documents and readings:

Handling illegal moves