Monday, October 29, 2007

Immersing Tutorials

It is widely accepted that less context switching, more productivity. For example, suppose you have two tasks, say task A and B. If you focus on task A for one hour, and then switch to task B, your productivity would be much higher compared with the case that you work on two tasks for 10 minutes alternatively. The reason is that it requires really long time to enter the state of one particular task, therefore context switching consumes too much time, leading to less productivity.

Let's now consider how we learn the usage of one program. Although this is only one task per se, it typically seems to be two completely different processes on computer. We need to start the program to learn, and also open another program to read the tutorial. Normally tutorials are distributed as HTML, PDF, or Info files. So when learning, we read several paragraphs in tutorial, and when we meet something intersting enough for practicing, we switched to the target program and try something there. We then switch back and read again. Sometimes we may switch several times within one minute. Such learning practice normally is not so satisfactory. Fortunately there are some programs whole learning process is not segmented as what we described above. The characteristic of such programs is that the tutorial itself is distributed in one of the formats that the program itself can view and/or manipulate. For example, web browser, PDF reader, Emacs when used as an Info reader obviously fall into such category, since they are designed to be the program for these file types. There are also other examples:

  • Emacs: although I have already mentioned it before as an Info reader, I'd like to point out that the plain Emacs tutorial is also excellent. Simply typle C-h t to bring up this nice tutorial. The tutorial file is self is a plain text file, however the command you just typed manuipulates the file, and setup a nice environment full of interactivity, which guide you into the realm of this mighty editor.
  • Inkscape is yet another excellent example. When I first tried to learn it, I googled around and find the tutorials online. I soon discovered that those tutorials are already bundled with the distribution in SVG format, which encourages you to fool around. This is the first time I ever feel that learning a drawing program is so pleasant.
  • FreeMind is another example. It distributes its help in the form of mind map, which is what the program is created for. When you read the help along, you immediately got the idea on how the program is used and what it can do. The only drawback is that you cannot try some modification operations when you read the help. But this can be easily overcome by copy the help file into a different place and open it directly.

In summary, these nice programs provide immersing tutorials. When you are learning, you are reading and practicing simultaneously. You use the same mouse/keyboard operation to scroll/zoom the tutorial as you would use for the program itself. You try things out on the tutorial directly, which provide great involved experience.

Can programs other than viewers or editors provide us immersing tutorials? Currently my thinking is that it would be good for programs to at least support displaying HTML. This can be done by reuse some nice web engines like Gecko. Then the help window can be opened in a separate window in the program. The learning process might not be so amazing as the examples listed above, but the productivity can still be improved compared with two-separate-program-approach.

Friday, October 19, 2007

Edit Blog Post Seriously

Previously when I edit my blog posts, I rely on WYSIWYG editor provided by Blogger, and made minor tweaks if necessary.

When looking at the HTML code by clicking tab "Edit Html", I realized that the code generated is not what I desired. For example, it used tag <span> a lot with inline style to make font bold or italic, which violates basic HTML/CSS principle to separate content and display. It may also messy the structure of the post, which makes reading the HTML code rather painful.

In addition to the problems generated by the automatic tools, I now feel greater temptation to modify the HTML code by myself, e.g. using the nice tags (code, var, kbd, samp etc.) provided by HTML to describe source code in post, and also to make my post strictly conforming to XHTML standard.

Therefore I decided to use Emacs to edit blog posts. The bundled HTML mode is not satisfying, therefore I tried nXhtml mode instead. It is pretty good at the job: auto-completion of tags and attributes, validating the code on the fly, etc.

There are two settings needing modifications:

  • In "Settings/Basic" tab, select No for "Show Compose Mode for all your blogs?". The intention is to avoid Blogger to mess up the post when swithing between "Compose Mode" and "Edit Html" mode.
  • In "Settings/Formatting" tab, select No for "Convert line breaks". By selecting this, when you edit in Emacs, you can use <p>tag for paragraph, command M+Q to fill the paragraph, and the pasted code into Blogger would result in the same look as you previewed in Emacs. If this option is kept to "Yes", you have to manually tweak your code (remove <p> tag and also hard line breaks since Blogger will add line breaks in that case).

I also plans to rewrite my previous posts, seriously.

Tuesday, October 9, 2007

Tag Local Files

Nowadays we use tags for almost every online service: blogs, photos, videos etc. They are quite helpful for organizing contents. How about our local files? We still need them for various reasons e.g. archive, privacy, security and so on. I'm going to discuss a simple way to tag local files. We assume you are using a Unix-like system (Linux in the example), where soft link is an inherent system feature.

The idea is quite simple: we setup directory ~/tags and make a subdirectory for each tag. For every file/directory with tags, one soft link to the original file is put under each tag subdirectory. To make tags, we use a command called tag which has the following synopsis:

tag src tag-name...

where src is the path to the original file/directory, and tag-name... are the list of tags to be applied delimited with spaces.

For example, assume there is a image file ~/photo/wonderful.jpg. When you change to directory ~/photo and type the command

tag wonderful.jpg france paris 2007 october

(assume that the image is taken in Paris in October 2007), there will be four directories created: ~/tags/france, ~/tags/paris, ~/tags/2007, ~/tags/october, and each directory contains a soft link to the original file.

Following is a snippet of the content of script tag.

#!/usr/bin/env bash

src=$1
dir=`pwd`
shift 1
for x in "$@"
do
  dst=~/tags/${x}/
  mkdir -p $dst
  ln -s $dir\/$src $dst
done

In the above script, we create directory for each tag and then make soft link within that directory.

To install this script, simply make it executable (by typing command chmod 755 tag), and copy it into a directory included in your search path (e.g. /usr/local/bin, you might need to su to root to gain access for these system directories).

In addition to the operation of adding tags as shown above, you might wonder how can we handle other operations on tags, e.g. deletion, search, and renaming. Fortunately, we don't need additional scripts any more. The reason is that tags are themselves ordinary directories, therefore we can use normal console commands to perform these tasks (e.g. rm for tag deletion, find for search and mv for renaming).

Enjoy organizing your local files with tags!

Update (October 10, 2007) As pointed out by aspir8or: The original script creates links whose paths are missing. He also provides a correction to the issue. The current script is based on his update, with slight changes purely from the author's own preference on variable naming.

Saturday, October 6, 2007

History of Header Images

Just like the record of milestones of this blog, this entry documents the header images used. The date format used is yyyy-mm-dd.

  • 2008-06-14 ~ Present: Manipulation of words, inspired by GEB, drawn with Inkscape..
  • 2007-10-06 ~ 2008-06-13: Panorama view of volcano Kintanami of Bali, taken on 2004-06-15.