The True Delight

Soul Burn !

2010-08-31T17:43:00.001+08:00

Soul Burn !
Originally uploaded by Faisal | Photography / (OFF)

Bee

2008-01-21T19:08:00.001+08:00

Bee
Originally uploaded by LoopZilla

Testing out flickr's blog this button.

2007-03-12T12:28:00.000+08:00

Why I prefer JQuery to prototype/script.aculo.us?

Because it's more pipe friendly, more powerful to traverse the DOM tree and last but not least more maintainable.

pipe friendly: Like unix pipe, you could select amazing complicated elements using chains of filters like this: $("a").addClass("test").show().html("foo");
powerful DOM traversal: Still use for(var i=0;i to loop through your list and do something to the parent elements? That's so quaint compared to this $("div#nav span").parents("p").attrs({'font-weight':'bold'}). Image what could be done by combining this with "chinas of filters"!!
maintainable:I was totally blowed away when I first saw jquery's selector syntax. Simple it is, but it allows we use the same CSS/XPath selector syntax in javascript. Combine this with "DOM traversing" parents, prev, sibling and "Filters" like lt(5), eq(0), gt(4), contains and you could do magic with only one line of code. Yet more readable. CodeEye also mentions a couple of very nicely constructed, highly readable selector here and a very nice, neat FAQ page built using jquery at here.

Yes, do everything with one line of code and make the code more readable. This is the magic of jquery.

2007-03-09T08:45:00.000+08:00

Jeff Hawkings, the author of On Intelligence and founder of Palm,
founded this new company called "Numenta". To quote Slashdot [1]:
"Numenta's goal is to build a software model of the human brain
capable of face recognition, object identification, driving, and other
tasks currently best undertaken by humans. "

Yesterday they released the first version of their free development
platform and the source code for their algorithms to anyone who wants
to download it. [3] Even better, Numenta offers a three week, one
hour webcast for FREE. [2]. Go and register it if you are interested.

I've been dreaming of applying his theory into use for a long time,
but just don't have the time/money to build something. Now the time
has come. :-)

Alex

1. http://developers.slashdot.org/article.pl?sid=07/03/06/220213
2. http://www.numenta.com/htm-jumpstart-subscribe.php
3. http://www.numenta.com/for-developers/software.php

2007-03-07T07:50:00.000+08:00

How to ignore .svn directories in grep?

This has bothered me for a while. A google search shows two popular implementations to work around this: using grep's --exclude parameter or use find to filter out the hidden directories. I chose the --exclude parameter approach since it is pretty neat and easy to integrate into my own bash environment by defining an alias.

Here is the alias definition in my ~/.bash_profile

alias g="egrep --exclude=\*.svn\* -r -n "

2007-02-15T21:26:00.000+08:00

Password-less login for dreamhost
It turned out to be fairly easy once I figured out the right manual to refer to. Here are what I've done.

Concise guide to Passwordless Authentication for Windows users
Add a "putty.exe" shortcut on your quick start bar with `C:\Tools\putty.exe -load "dreamhost"`
Auto start Pageant.exe

2007-01-28T11:14:00.000+08:00

How to add reddit.com button to your blogger account?

I'm using the new blogger classic template. So YMMV. But the basic idea should be the same.

Go to "Edit Template"->"Edit HTML",
Expand all widgets HTML code by checking "Expand Widget Templates"
Scroll down to near the bottom, replace<div class="'post'">
<a name="'data:post.id'/"></a>
with
<div class="'post'"><a name="'data:post.id'/">
</a><a name="'data:post.id'/">
<script>reddit_url='<data:post.url/>';</script>
<script language="javascript" src="http://reddit.com/button.js?t=1"></script></a>

2007-01-28T10:23:00.000+08:00

Javascript tags generator: A MUST have for serious Ajax developers using vim

The following python script could build tags file for your javascript files. It's still version 0.0.1, but it does support extracting most methods and class definitions. Here are a list of the syntax it supports for now. If you find this script misses something, please let me know and I'll add them for you.

Supported Syntax

# - functions
#   * function info(msg) {
#   * info: function(msg) {
# - classes
#   * var logger = {

Usage

#   jstags.py logger.js
#   ls *.js | jstags.py
#   find ./ -name *.js | jstags.py

Source code


#! /usr/bin/env python
#
# jstags.py
#
# Create a tags file for javascript programs, usable with vi.
#
# Benefit:
#   Just in case you haven't used tags in vim, you could jump
#   to class/function definition using  and jump back
#   using . Once you start using tags, you can no longer
#   live with it.

import sys, re, os
tags = []    # Modified global variable!

def main():
   if sys.stdin: files = [s.strip() for s in sys.stdin.readlines()]
   else: files = sys.argv[1:]
   for filename in files: parse_file(filename)

   fp = open('tags', 'w')
   fp.write("!_TAG_FILE_FORMAT\t2\n")
   fp.write("!_TAG_FILE_SORTED\t1\n")
   fp.write("!_TAG_PROGRAM_AUTHOR\tAlex Dong\n")
   fp.write("!_TAG_PROGRAM_VERSION\t0.0.1\n")
   fp.write("!_TAG_PROGRAM_URL\thttp://thetruedelight.blogspot.com/2007/01/javascript-tags-generator-must-have-for.html\n")


   tags.sort()
   for s in tags: fp.write(s)

patterns = { re.compile('\s*var\s*(\w+)\s*=\s*{'):'c',
       re.compile('\s*function\s*(\w+)\s*\('):'f',
       re.compile('\s*(\w+)\s*\:\s*function\s*\('):'f'
}

def parse_file(filename):
   fp = open(filename, 'r')
   while 1:
       line = fp.readline()
       if not line: break

       for pattern in patterns.keys():
           m = pattern.match(line)
           if m:
               c = m.group(0)
               n = m.group(1)
               s = "%s\t%s\t/^%s/;\"\t%s\n" % (n, filename, c, patterns[pattern])
               tags.append(s)
              
   fp.close()

if __name__ == '__main__':
   main()

2007-01-22T23:13:00.000+08:00

Facts about Unicode which you might not know

There is no such thing called "Plain Text". All text and strings are byte data stored in memory and disk. So a better word for previous "Ascii string" might be "binary string" or "byte string".
The operation system needs a way to transform meaningless in memory binary data into meaningful string to display on monitor, print on paper. In the old time before Unicode, this semi-standard byte-to-string mapping table is called "Code Page".
A byte can contain 256 characters with the low 128 characters common agreed as "ASCII" character set, but for the rest 128 characters, different country/culture choose a different way to use them. Thus a 0xc5 should be different in Hebrew and Russian language.
IBM PC has defined one way to use 128-255 byte space, which is common called "latin-1" character set, or "iso-8259-1". This character set is so standard that many modern softwares, like MySQL, still makes it the default encoding for database connection, which causes tons of headaches. Someone even calls it "Character Set Hell".
Chinese and other east asia characters requires at least two bytes to represent a word. Thus, the need for a multi-byte string. In Window, this is where the notorious MBCS comes into play. Plus the tons of methods in ATL/MFC to convert from one type to another.
A more precise way for "UTF-8" is "an unicode string encoded using UTF-8 encoding rules". So first of all, UTF-8 can be used in transmission from one machine to another, but inside a computer, it still needs to be converted into bytes. UTF-8 is not Unicode.
Unicode is a standard way to define how to represent any given character in memory. It has nothing related to how the character rendered on the monitor or on paper. It's only a world-level unique way to ensure that given any character, no matter it's a Thai, Chinese, Russian, Hebrew or French, there is only one single way to represent it in binary format.
Unicode, as an internal representation, looks like like U+0048 U+0065 U+006C. When it's encoded into ASCII encoding and saved, it'll be the as 48 65 6C. The ASCII string could, understandably, be decoded into Unicode representation.
The decode process requires an explicit definition of which encoding the input string is "encoded" in. Otherwise, the system level default encoding will be used.
Major modern database software, Oracle, MSSQL, MySQL, PostgreSQL, SAP DB, Sqlite, all supports storing unicode string as content.
UTF-8 is a preferable way to transmit and store data in because it has two unique characteristics: 1) UTF-8 is fully compatible with ASCII character set since it either uses one byte for 0-128 characters, or three bytes for the rest. Since most network applications, especially HTTP protocol accepts only ASCII character set, UTF-8 is the only encoding choice that's compatible with these network protocols. 2) UTF-8 contains the same character set as defined in Unicode. The process of encoding Unicode into ASCII is downcasting because it shrinks the amount of characters that could be represented.
In order to make your web pages display correctly, it's recommended to include a META tag in your HTML code: meta equiv="Content_Type" charset="UTF-8". If you're using Apache, you could add AddDefaultCharset utf-8 into your httpd.conf to let Apache server add this to all the web pages your website is servicing.
If you need to make your web forms have multi-lingual support, like Google's search textbox, you'll need to

References
I've done a quite extensive reading on this topic. Basically I found all the articles on this topic and continue reading them until I could no longer find any concepts that's new. Here are a few links I'd recommend:

2007-01-09T15:18:00.000+08:00

Bash Alias for Darcs users

I've been using darcs for quite a while. I really love its simplicity and distributed nature. I found myself repeating myself again and again typing basic darcs commands after using the techniques described in this excellent blog. Here are a few additions I added to my ~/.bash_profile to minimize the types I need to make. Explanations in lines.


# Setup editor environment editors to let darcs know.
EDITOR=gvim
VISUAL=gvim
export EDITOR VISUAL

# My typical patch naming convention is {year-month-date-hour-min-sec}.
# instead of manually making on up every commit, I'd like to automate it.
PATCHNAME=$(date +%Y%m%d%k%M%S)

# 'commit' will tell darcs to record all (-a) changes using the patch name as mentioned above.
#   we also tell the darcs command to launch our default EDITOR to let us add a long comment.
#   last, we'd like to add a signature to the patch by associated with our email address
alias commit='darcs record -a --patch-name=$PATCHNAME --edit-long-comment --author=alex.dong@you-mail.com'
alias diff='darcs whatsnew | less'

2007-01-05T22:33:00.000+08:00

The Tale of Two Document

This afternoon, I spent three hours figuring out what's the different between window.document and content.document from Mozilla or FireFox extension's point of view. Figuring this out solves lots of my questions or "why the heck this doesn't work" wonders. This article explains what are the differences, when to use which and ends with some very practical kludges that I've found quite handy.

Document? Which document?
My previous Ajax experience told me that document is the HTML document, aka the DOM model, which I could modify the node attribute, change element layout, or remove one. When I write document.getElementById('sidebar'), I mean find an element whose id is sidebar. This is the document. But, in the Mozilla's world, this could cause you big trouble as I did.

In Mozilla's point of view, the whole browser is a rendered DOM tree. Which means that the menu, the toolbar, the status bar are all elements on a DOM tree. When you add a toolbar, you're inserting a toolbar element into the DOM tree. When you see the status bar, you're actually looking at a label. This is the beauty of XUL and Mozilla, the extensible architecture where other wonderful technologies like RDF, XBL, and overlay. Now when you write document.getElementById, the document is not referring to the HTMLDocument. But it's referring to XULDocument, which represents the current browser window, aka the chromeWindow.

Here is a concrete example. Run this and you'll see a "hello" showing up on your status bar. window.document.getElementById('statusbar-display').label="hello"; If you want to try this out, paste this into your Javascript Environment which comes along with FireFox Extension Development add-on. If you don't have it, get it now.

The statusbar-display is the left most status pane in your firefox, where you could find "Transferring data from ...". So here the window.document points to the current ChromeWindow's document, which is the XULDocument. Your HTML document doesn't and probably won't have an element with id like that.

Then, how could I get a pointer to the HTML document? Use window.content.document. If you see _content, it's an obsolete way of representing the HTML DOM tree. As a result, in order to find the sidebar in the current HTML document, you need to write the code like this: window.content.document.GetElementById("sidebar");, where the content means the real content instead of the user interface.

This script explains it much better:


print(window);
print(window.content);
print(window.content.document);
print(window.document);

Here is the output:


[object ChromeWindow]
[object Window]
[object HTMLDocument]
[object XULDocument]

Shorthand for window.content vs window.document

window.content can be written as content when there is only one window. The window is the current window or frame which the document is contained. If you are working on a multi-frame document, you'll have to write code like framelist[i].document.
window.document can be written as document because of the same reason explained above.

Event Handling
In Ajax, if we want to install an event handler for keypress event, here is what we'll do: document.onkeypress = function(event) { ... }. But in Mozilla world, you can't hook the event up with HTMLDocument directly. This works find in the Javascript Environment, but it just doesn't work in your extension javascript code. (My environment is Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.1) Gecko/20061204 Firefox/2.0.0.1). To get it working, you will have to hook the event handler up with window.document.

One side effect of this is that now the event will be triggered for both the content in HTML and the controls in the browser's toolbar, status bar. If your event handler is to delete the element by clicking on it, you could delete the toolbar buttons one by one by clicking through the buttons!

I didn't find a good or official solution to this problem so if you know a better way to do this, please definitely let me know. Here is my kludge which just works.


function onclick(event) {
    if (event.target.toString().indexOf('XULElement')>=0) return;
    // now, do whatever you want.
}

2006-12-26T10:42:00.000+08:00

Simplest way to add "Cygwin Prompt Here" to Windows Explorer

Just like Eric Sink, the first thing I install on my windows laptop is Cygwin and, well not Emacs anymore, gvim. I just can't image using windows so pre-mature shell to get anything done. One little problem with Cygwin is since it uses a unix like directory structure, switching back and forth between Windows Explorer and Cygwin has been a pain in the ass for a long time. Now, time to scratch the itch.

A quick Google search redirects me to Bruce Eckel's article on this same problem. It proposes two solutions but unfortunately none of them works perfectly on my environment. After hacking around, here is my solution. Different from the existing ones, this is the simplest solution I could find so far. No .bashrc, no .bat file, only one tiny .reg file. Enjoy it and see my code comments in lines.


Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\Folder\shell\Cmd Here]
@="Cygwin &Prompt Here"
[HKEY_CLASSES_ROOT\Folder\shell\Cmd Here\command]
@="cmd.exe /c c:\\cygwin\\bin\\bash.exe --login -c \"cd '%1'; exec /bin/bash\""

Notes:

Save the above text into any reg in any folder, double click it and you should be all set. (Assuming you're using the Cygwin default installation path, of course.)
cmd.exe /c : launch the cmd.exe and execute the command after the /c parameter. Close the command window when the bash exits.
bash.exe --login :load the user settings for the login user. -c means to execute the commands after login.
cd %1; :retrieve the folder path from Windows Explorer
exec /bin/bash: to open the bash environment.

2006-12-25T12:07:00.000+08:00

How to automatically install a button onto FireFox Toolbar?

Here are some facts about rdf:local-store in Mozilla architecture from XULPlanet:

The datasource rdf:local-store is included with Mozilla and is used to hold state information such as the position of the browser window, which columns in tree views are displayed, and which toolbars and sidebars are displayed.
This information is saved when Mozilla exits, and is re-applied automatically to the XUL content when the appropriate window is opened again.
Although the local store normally holds XUL state information, you can actually put anything you want into it.
The local store is saved to an RDF/XML file 'localstore.rdf' in your Mozilla profile directory. Since it's an RDF/XML file, you can open it in a text editor and view the information it contains. It's possible to modify the file as well, although that isn't

So the answer to our question on how to add a button to the browser's toolbar lies in the localstore.rdf file. Open the file and find the triple, or assertion, on chrome://browser/content/browser.xul#nav-bar and you should be able to see something like this:


RDF:Description 
    RDF:about="chrome://browser/content/browser.xul#nav-bar"
    mode="icons"
    currentset="back-button,forward-button,reload-button,search-container"

Just add your toolbar 'ID' to the currentset and you're done.

2006-12-24T23:44:00.000+08:00

RDF support in Mozilla

nsIRDFSerivce. The RDF service is an utility interface that serves three primary purposes. First, it is used to manage “named” datasources. A named datasource is a singleton datasource that can be acquired using simple URI-like name [4]; e.g., rdf:bookmarks. Second, it is used to implement the function that maps a URI to a resource (which is the inverse of the one-to-one resource-to-URI function described above). Third, it is used to implement the function that maps a string value to a literal (similarly, the inverse of the one-to-one literal-to-string function described above).

nsIRDFNode. This is an interface for a node in the RDF graph. A node must either be an nsIRDFResource or an nsIRDFLiteral [5]. Objects that implement these interfaces must be acquired from the nsIRDFService.

nsIRDFDataSource. This is the interface that provides access to a collection of “related statements” (or a “subgraph”). This interface includes methods that allow testing for the presence of a statement, enumerating the statements contained in the collection, and adding and removing statements to the set.

nsIRDFCompositeDataSource. This interface is derived from nsIRDFDataSource. An implementation of this interface will typically combine the statements from several datasources together as a collective. Because the nsIRDFCompositeDataSource interface is derived from nsIRDFDataSource, it can be queried and modified just like an individual data source.

nsIRDFObserver. This is an interface that an RDF client implements. The interface allows a client to be notified when a change occurs to the statements in a datasource.

nsIRDFContainer. This is an interface that allows for simplified access to an RDF container object (a bag, sequence, or alternation). This interface, in conjunction with nsIRDFContainerUtils provide straightforward, Java vector-esque methods for manipulating and querying RDF container objects.

I've also updated a few sections on MDC's RDF FAQ.

2006-12-20T21:55:00.000+08:00

Setup FireFox Extension Development Environment

I've found that these links are very helpful:

Official guide: http://kb.mozillazine.org/Setting_up_extension_development_environment
VIM XUL syntax file: http://www.vim.org/scripts/script.php?script_id=241

2006-12-20T16:43:00.000+08:00

Due to the nature of its graphical user interface, windows shell has been ignored for a long time. It's true that having a point-and-click interface doesn't require learning and remembering, but to boost your productivity, master the art of command line is a must. Be sure to install the cygwin environment and expose its bin folder into your %PATH% variable will bring tons of powerful Unix tools into your windows arsenal with almost no cost.

One thing I really love about the shell is its capability to jump right into your destination folder. For example, if you're developing your FireFox extension, following tips might be quite handy to you.

1. Jump into folders

set FIREFOX_INSTALL_DIR = "C:\Program Files\Mozilla Firefox"
set FIREFOX_DEV_PROFILE = "C:\Documents and Settings\adong\Application Data\Mozilla\Firefox\Profiles\k5b2sa
58.Dev"
// Now you could jump right into it by typing:
cd %FIREFOX_INSTALL_DIR%
cd %FIREFOX_DEV_PROFILE%

2. Start the FireFox in a 'dev' mode by

// instead of "C:\Program Files\Mozilla Firefox\firefox.exe" -P dev
set MOZ_NO_REMOTE=1
%FIREFOX_INSTALL_DIR%\firefox.exe -P dev

3. Or, find the merge point id for the "stausbar"

$ grep -r -n "statusbar .* id=" %firefox_install_dir% | grep ".\.xul:"

2006-12-19T22:23:00.003+08:00

Goal: to see a python file code structure from command line.

 egrep 'def |class ' {python file}

The grep comes with cygwin seems to have problem with this:

 grep 'def |class ' web.py

but egrep works fine. Seems like 'def |class ' is not supported by standard regular expression. Or put it in another way, it's part of the extended regular expression set.

This article gives a good quick overview on grep, fgrep, and egrep.

2006-12-19T22:23:00.001+08:00

When debugging firefox bookmark javascript, I found myself always concatenate multiple line javascript code into one line.

Here is the shell script to redirect it to a local file, where the "notepad" kicks in and automatically load it.

js_merger.py bookmark.js  bookmark.txt  notepad bookmark.txt

And here is the code to automatically do this:

import sys
if len(sys.argv)!=2:
  print "Usage: js_merger.py {file.js}"
else:
  l = open(sys.argv[1]).readlines()
  print "javascript:(function(){" + ' '.join([i.strip() for i in l]) + "})();"

2006-12-19T22:22:00.003+08:00

Problem

I have two websites, say one is alex.com and the other is dong.com. I want a javascript in alex.com to send a Ajax.Request to dong.com. In prototype framework, it should be done like this:

new Ajax.Updater('mydiv', 'dong.com/foo/bar', {asynchronous:true});

.The problem is that the second parameter could only be the directory on the same server. AjaxPatterns.com has an article on this topic.

Solution
A little bit HTML+CSS trick,

$('hidden_panel').innerHTML = ' id="cuti_service_request" style="display: none;" src="%27%20+%20url%20+%20%27" title="Server update" iframe -->';

2006-12-19T22:22:00.001+08:00

The recommended steps from Bruce Kroeze works perfectly with a few minor modifications. Here are the steps I took to make it work. Check out Bruce's link post for detail explanations.

# Get the code and some other prep works
mkdir ~/tmp
cd ~/tmp
wget http://jaist.dl.sourceforge.net/sourceforge/cheetahtemplate/Cheetah-2.0rc7.tar.gz

# Build Cheetah without copying it to system wide site-package
tar xzf Cheetah-2.0rc7.tar.gz
cd Cheetah-2.0rc7.tar.gz
python setup.py bdist_dumb --relative

# Setup the environment
cd dist
mv lib ~/
mv bin ~/
vim ~/.bash_profile
PATH=$PATH:~/bin
PYTHONPATH=$PYTHONPATH:~/lib/python2.4/site-packages
export PATH PYTHONPATH
source ~/.bash_profile

# Final step: create the symbolic link
cd ~/web/public/{your_web_project}
ln -s ~/lib/python2.4/site-packages/Cheetah .

2006-12-19T22:17:00.001+08:00

My day job project is down all in FireFox. We just can't image how to write web applications with FireFox and all its wonderful extensions. There have been many friends who asked me which FireFox extensions I use for web development. Well, I can never give them a full list until I ran into this list: http://lesliefranke.com/files/firefoxwdev/firefoxwdev.htm

2006-12-15T21:47:00.000+08:00

What happened before Skype?

Yesterday night, I had a 90 minutes chat with Skype's core founder: Toivo. He is now running Ambient Sound Investment company on behalf of the other three co-founders. Here is a brief list of interesting things we've talked about.

On the team
The average startup founders are 2.5. Yet Skype has four founders. I was wondering how could they make decisions quick enough and, on the same time, have a fair discussion.
Voivo said that they've known each other since elementary school. Have been working together for 4 years when the idea of Skype hit their heads. They know each other's weakness and advantages very clearly. Voivo was managing the project with the other three focused on architecture and implementation.

On the idea
This is the most interesting topic. It turned out that Skype is the forth product the same team have built. Here are some projects Voivo gave out:

1999: A web portal, with basically everything. From news to Email. It didn't go well.
2001: Kazza: Open source P2P technology. This is when they get exposed to the P2P idea I guess.
2002: A CDN, plus PeerCache product. These products brought them some, but not many, customers. The important thing is that during the development process, they used the money to grow the team into 10 people and build Skype as a side project.
Nov 2003: The idea of Skype hit them. It took them 4 months to just "think", do architecture work and layout the features.

Lessons learned
At least from Skype's case, they had the team first, then figure out the general direction, a right product is only a natural result of continuous thinking and packaging the same technology for different problems.

2006-12-13T21:13:00.000+08:00

"""

Synchronize FireFox 2.0 and Microsoft Dictionaries
Author: Alex Dong
Email: $ python -c "'YWxleC5kb25nQGdtYWlsLmNvbQ==\n'.decode('base64')
Blog: http://thetruelight.blogspot.com/
License: GPL
ReadMe:
   Please change the 'word_dict_path' and 'ff_dict_path' to point
   them to your local directories.
"""

word_dict_path = 'c:/Documents and Settings/adong/Application Data/Microsoft/Proof/custom.dic'
ff_dict_path = 'C:/Documents and Settings/adong/Application Data/Mozilla/Firefox/Profiles/yl9sxfvv.default/persdict.dat'
wd = open(word_dict_path).readlines()
fd = open(ff_dict_path).readlines()

def merge(a, b):
   c = [i for i in a]
   for i in b:
      if c.count(i)==0: c.append(i)
   return c

l = merge(wd, fd)
l.sort()

def update(f, l):
   fp = open(f, 'w')
   fp.writelines(l)
   fp.close()
update(word_dict_path, l)
update(ff_dict_path, l)

print "Updated %d entries"%((len(l)-len(wd)) + (len(l)-len(fd)))