CHENG Fu's blog

This blog is moved to http://alexcheng1982.wordpress.com/

2010-01-07T20:24:00.000-08:00

Because Blogger is not accessible in China, I moved the blog to Wordpress. http://alexcheng1982.wordpress.com/

Auto margin on RTL page doesn't work on IE

2009-05-13T01:19:00.000-07:00

Auto margin is used extensively to center an element horizentally. But it doesn't work on IE for RTL pages.

A solution is found here :

Set the direction of <html> element to "ltr" while setting the direction of <body> element to "rtl". I tried this solution, it works. Great!

html {direction:ltr;}

body {direction:rtl;}

Bookmarklet of URL shortener

2009-04-22T20:23:00.000-07:00

I created a bookmarklet for the url shortener and a testing page for it.

Drag the link below to the bookmark bar.

URL Shortener

The main motivation behind this small tool is to help me writing tweets. Twitter is smart that it can convert long URLs to short ones using tinyurl, but that only happens when the whole text is shorter than 140 characters, otherwise the "update" button is disabled and you can not go further. So I want this tool which can be accessed quickly in the twitter's page.

Create a small gadget "URL Shortener"

2009-04-22T17:34:00.000-07:00

I have to say that there exists several gadgets that do the same thing. Frankly speaking, I don't try them, I just keep telling myself that what I made is the best.

In my gadget, you can choose the URL shortening service to use. Currently, you can choose tinyurl or bit.ly. I used GAE to implement the background service, i.e. the scraping thing.

You can try in on my blog, it's on the right side. Or add it to iGoogle via the link below.

A screenshot:

And the real thing:

Paste in Cygwin window

2009-04-07T07:25:00.000-07:00

I want to paste some text from Windows to Cygwin's bash window, but I don't want to enable the quick edit mode of the command window, because it may lock the command window.

So I used the context menu to paste the text. Just click the cygwin icon in the top left of the window, you can see the menu. See the screen-shot below.

Get viewport size using JavaScript

2009-04-07T02:28:00.000-07:00

The main idea of the JavaScript is stolen from here. I just rewrote the code a little to make common path faster.

function getViewportSize() {

var w = (document.documentElement && document.documentElement.clientWidth) || window.innerWidth || document.getElementsByTagName('body')[0].clientWidth;

var h = (document.documentElement && document.documentElement.clientHeight) || window.innerHeight || document.getElementsByTagName('body')[0].clientHeight;

return {width : w, height : h};

}

Add JavaScript code to posts on Blogger

2009-04-07T01:11:00.000-07:00

I tried to add some JavaScript code in my post, but it seemed to be harder than I thought. I googled a lot of pages about it and found pages like [1], [2] and [3]. For JavaScript code that not run immediately after the page is loaded, using plan <script> tag is ok. But my JavaScript code needs to be executed after the page is loaded, I tried the approach using <code>, it didn't work. Then I decided to use window.setTimeout to hack that. It works.

See the script below, the content of "viewport" is modified by script after the page is loaded. Note, the script should be only one line to avoid <br> tags inserted by Blogger.


<script type="text/javascript">function fn() {var ele = document.getElementById("test");if (ele) {ele.innerHTML = "Content set by script ";window.clearTimeout(arguments.callee._timeout);}else {arguments.callee._timeout = window.setTimeout(arguments.callee, 500);}}fn();</script>
<span id="test"></span>

The script in action:

Yahoo! Search BOSS

2009-04-03T01:40:00.000-07:00

Yahoo! is continuing to open up its search platform. It has SearchMonkey, and now the BOSS. BOSS means "Build your Own Search Service". It's free now but will have a fee structure in the near feature. What interests me is the mashup framework, a Python library to manipulate data.

Yahoo! Search Boss at Alt Search Engines 03 2009

View more presentations from YahooSearchBlog.

Apache's Ftp Server

2009-04-02T19:20:00.000-07:00

Maybe I'm out of date now, but I just found Apache's ftp server yesterday. I've tried many ftp servers, such as Serv-U, Cerberus, and several other home-made software. All these software I used are quite good. But I have to say Apache's ftp server is what I need as a programmer. The GUI is fancy and great, but my favorite is still XML configuration.

Just download the package, unzip it and run the bat script. It's simple but enough. Remember, YAGNI.

Maven 2.0.9 doesn't work with IBM JDK 6 SR1 - An interesting problem of JDK

2009-03-24T06:20:00.000-07:00

I was trying to compile Apache Axiom using Maven 2.0.9. But it didn't work when I was using IBM JDK 6 SR1. Then I found this issue. It turns out to be a very interesting problem with IBM JDK 6 SR1.

So I repeated the same test on my machine. Yeah, I have to say the output is quite weird. How can you image this kind of problem occurs in the JDK?

Will web workers be shipped with Firefox 3.1?

2009-03-11T19:06:00.000-07:00

Update: The next release of Firefox will be Firefox 3.5 instead of Firefox 3.1. See the news : Firefox 3.1 may become Firefox 3.5

It has been said for a long time that web workers will be shipped with Firefox 3.1. That was really a great news. But when I was reading the article of "Using web workers", I found out that it's said in this article that web workers would be shipped with Firefox 3.5. This change was made in March 6. Any mistakes here or the plan has been changed? I took a look at the plan, but it seems that the plan is the same.

See the screen-shot below. The top is the latest version and the bottom is previous version.

Safari 4.0

2009-03-02T01:19:00.000-08:00

Safari 4.0 public beta is there. At the first sight, it reminds me of Google Chrome. Just like Chrome, it adds "fast dial" for mostly used web sites. Safari 4.0 calls it as "Top Sites". I think Firefox would provide the same function without the extension "fast dial".

I used "UA Profiler" to test it and the result shows that Safari 4.0 supports parallel scripts, which is a great improvement to Safari 3.x.

Firefox uses different fonts for input and textarea

2009-03-01T20:16:00.000-08:00

By default, Firefox uses different fonts for input and textarea. If you don't set the font family used by input or textarea, even though the font size of them is identical, the display of text in them is different. This is because that Firefox uses monospace fonts for textarea, but variable-width fonts for input.

So besides setting the font size of input and textarea, you need to set the font family directly in CSS. A sample can be found here.

input, textarea
{
color: red;
font-family: Verdana,Arial,Sans-serif;
font-size: 0.8em;
}

Disable Firefox cache

2009-03-01T20:01:00.000-08:00

Firefox's cache can be quite annoying when you're developing web applications. You may have to manually clear it to let the browser load the latest version of you code.

So a good approach is to disable it, then you don't need to clear it. A good instruction can be found here.

Basic steps:

1) Type "about:config" in the address bar

2) Filter the configuration using "cache"

3) Change the value to "false" if it is "true"

Check directories and files existence in Ant

2009-02-23T17:59:00.000-08:00

Well, it's common to check whether a directory or file exists before using it in Ant scripts. I just did some quick searches and find out a general solution in here.

Taks <available>is used.

Just copy from that post.

<available file=\"${your.file.path.here}\" property=\"your.file.path.here.present\"/>

<if>
<equals arg1=\"${your.file.path.here.present}\" arg2=\"true\"/>
<then>
</then>
<else>
</else>
</if>

"Zero Width Space" hack for wrapping words in HTML

2008-11-07T02:16:00.000-08:00

It's not easy to wrap words in non-IE browsers. IE has its proprietary CSS property : word-wrap. But for other browsers, if the word is too long, the text stretches. This is because that the wrapping happens between the words' boundaries, i.e. white spaces.

A small hack for this is to add "Zero Width Space" between all the characters in the word. By doing this, word wrapping can happen between all the characters, but the users can not see them since the width of the spaces is zero. This can be done by the following small function:


function breakWords(str) {
     Array.prototype.slice.apply(str).join("&#8203;");
}

Securing extension updates for Firefox 3

2008-10-26T22:53:00.000-07:00

If you have an old extension developed for Firefox 2, you may have encounter problems when porting it to Firefox 3. One major problem is that you need to provide secure updates for the extension, otherwise the auto-update is disabled. After looking at a good article from Mozilla, the problem seems easy to attack. Just provide a HTTPS connection for the updates and it's done. Yes, if you have a valid certificate for HTTPS connection, that should work. But for those use testing certificates, Firefox can not recognize these certificates and still fails to update the extension.

So we have to use the complex approach mentioned in the article, i.e. signing the updates. You need two tools for signing the updates, one is HashTab ,the other is McCoy. HashTab is used to calculate digital signature of the XPI files, while McCoy is used to sign the update manifests. Detailed steps are:

Use McCoy to create a new key.
Add the key to the install.rdf. ("Install" button in the toolbar)
Package the XPI file with the signed install.rdf.
Use HashTab to calculate the SHA1 signature of the XPI file.
Add to the update.rdf using the signature calculated in the previous step.
Use McCoy to add the key to the update.rdf ("Sign" button in the toolbar).
Place the signed XPI file and update.rdf to your web server.
Done.

Host Firefox extensions on Websphere sMash

2008-10-20T01:24:00.000-07:00

If you want to host firefox extensions on a Websphere sMash server, you need to configure the MIME type of the XPI files to allow Firefox to install it automatically.

This can be done by adding following line in the zero.config file:

/config/mimeTypes += { "xpi" : "application/x-xpinstall"}

Fix the "PKIX path building failed" error in handling SSL in Java

2008-10-19T20:08:00.000-07:00

When using HttpClient to send requests to servers that employed SSL connections, i.e. the URL starts with "https", it's common to encounter the "PKIX path building failed". This is because that the JRE installed on your machine doesn't have the certificate for the request. You have to add it manually.

To do this, you need to export the certificates first, then import it into the JRE's store. You can use Firefox to access the site first, then you got its certificate stored in Firefox. Take Firefox 3 for example. You can open the "Options" dialog, then click the "View Certificates" to open up another dialog which lists all the certificates. Find the one you need and export it in format "X.509 certificate (DER)" to a directory, say "c:\temp". (See figure below)

After that, you can use the JRE's keytool to import the certificate. A sample command is like:

keytool -keystore "C:\Program Files\Java\jre\lib\security\cacerts" -import -alias mycert -file "c:\temp\my.cer" -trustcacerts.

The default password is "changeit" if you didn't change it.

That's all.

Avoid time-consuming POST/PUT XMLHttpRequest for Safari 3.1 on Mac

2008-10-19T20:00:00.000-07:00

Time-consuming POST/PUT XMLHttpRequest causes a problem on Safari 3.1 on Mac. The request will time-out if it

takes a long time to finish.

A bug was issued in Webkit's bugzilla and the bug was fixed in Safari's latest build (version 528.x). So you can wait for

the new version of Safari.

Distinguishing between JavaScript arrays and objects made easier

2008-10-13T21:47:00.000-07:00

In JavaScript, it's not easy to distinguish between objects and arrays. The "typeof" operator returns "object" on both cases. Using the "constructor" property doesn't work neither because the constructors of arrays from different browser windows or frames are not the same, which causes confusing behavior when an array is passed between browser windows as a argument.

In Douglas Crockford's book "JavaScript: The Good Parts", he used a complex function as below:

var is_array = function (value) {

return value &&

typeof value === 'object' &&

typeof value.length === 'number' &&

typeof value.splice === 'function' &&

!(value.propertyIsEnumerable('length'));

};

In one of his recent blog posts, he mentioned that Mark Miller from Google used a simple approach to do the same thing.

Object.prototype.toString.apply(value) === '[object Array]'

I went through the ECMAScript specification and found out the following:

The value of the [[Class]] property is defined by this specification for every kind of built-in object. The value of the [[Class]] property of a host object may be any value, even a value used by a built-in object for its [[Class]] property. The value of a [[Class]] property is used internally to distinguish different kinds of built-in objects. Note that this specification does not provide any means for a program to access that value except through Object.prototype.toString.

The [[Class]] property of Array.prototype is "Array" and Object.prototype.toString uses this value to generate the output in the format "[object " + [[Class]] + "]" which results "[object Array]".

I think the new approach can help us a lot.