HOWTO display sharp Chinese in Gentoo Linux?

Desktop, Development, Gentoo May 11th, 2007

It has been the biggest headache to configure Linux desktop environment to display sharp Chinese glyphs. Personally, I would rather trace the segmentation errors rather than setup the Chinese font. For years, I was satisfied with the bottom line, i.e to browse the Chinese web page using Firefox, input Chinese when necessary.

It is quite embarrassing to stick to the ugly Chinese display as a geek, I would summarize my efforts to configure the Chinese fonts.
Read the rest of this entry »

Debugging Web(4) - Swiss Army Knives

Web December 28th, 2006

Web Developer Toolbar and Firebug are two must-haves for the Web developers, I will introduce another powerful debugger, venkman later.

Web Developer Toolbar

Yellow box

This all-in-one toolbar gears towards getting the Web designer out of the tedious work, such as fine-tuning CSS, troubleshooting block layout, validating to the Web standards. My favorite functionality is Display Element Informaton, the Ctrl-Shift-f shortcut will call a yellow box, once the element is clicked, its attributes are shown in the yellow box, quite nifty.

FireBug

The official website have a very detailed introduction of the FireBug. Further more, the prototype’s author demonstrates the FireBug in action here. Unlike Error Console, the FireBug expose the targeted window’s document node to the global scope, therefore, the developer can test the JavaScript code snippet in the console without hassle.

The console supports one-line command, when you click the Up button on the right, a multi-line textbox is popped out for multiply line code editing. What a considerate design!

FireBug's console


Debugging Web(3) - Poor man’s debugger

Web December 18th, 2006

This post is for the real poor Web developers who even could not install add-ons on Firefox, at least, there are two spartan debuggers available:

DOM Inspector

A neat tool to demonstrate the DOM structure of the Web page. It is far less attractive than the Web Developer Toolbar’s Display Element Information. However, you might find it useful to inspect the add-on’s XUL.

DOM Inspector in action


Error Console

Error Console supports to evaluate the JavaScript snippet directly. However, the targeted window’s document is not exposed in the global scope, that cripple the usability of this tool and push me to embrace FireBug.
Please leave a comment if I am wrong.

Debugging Web(1) - Live HTTP Headers

Web November 21st, 2006

This problem has been bothered me for quite a long time. Although only 5.4% of my blog readers use MSIE, and I always promote Mozilla Firefox, their browsing experience should not be disregarded by all means.

Here is a good tool to analyzes the underlying HTTP traffic, Live HTTP Headers, if you think WireShark is overkill. This add-on captures all the HTTP header requests and status codes, like this:

Live HTTP Headers in action


Surprisingly, I found that there is also a 404 error in Firefox when accessing /nitfyCorner.css after all the elements are loaded. It is possible that Firefox and other browsers(Konqueror, Opera) just simply ignore the missing style sheet while MSIE refuses to render the whole page at all. I dived into the niftycube.js and found the following code snippet:

var oldonload=window.onload;
if(typeof(NiftyLoad)!=‘function’) NiftyLoad=function(){};
if(typeof(oldonload)==‘function’)
   window.onload=function(){oldonload();AddCss();NiftyLoad()};
else window.onload=function(){AddCss();NiftyLoad()};

function AddCss(){
niftyCss=true;
var l=CreateEl(“link”);
l.setAttribute(“type”,“text/css”);
l.setAttribute(“rel”,“stylesheet”);
l.setAttribute(“href”,“niftyCorners.css”);
l.setAttribute(“media”,“screen”);
document.getElementsByTagName(“head”)[0].appendChild(l);
}

Once the niftycube.js is referenced, the script hacks the windows.onload to add the CSS to the header, however, the hardcoded target is wrong. Since I manually added the style sheet in the header, it always takes effect regardless whether AddCss works or not. After I fixed this bug, MSIE shows the gallery without any problem.

Here arouses another question: how comes MSIE manages to render the blog with the same bug?

Upgrade to Firefox 2

Gentoo October 28th, 2006

Firefox 2 was released two days ago, and I got an upgrade in yesterday’s world update. Compared to Firefox 1.5.x, the speedup is barely noticeable, but there are some neat features I have demanded for a long time:

Built-in spell check This is quite essential for all the bloggers. It marks the typo on the fly, and you can easily add the new word to the dictionary. Unfortunately, I do not find any configuration in the Preference for the spell-check, but I believe that there would be a neat plugin ready in a few weeks to tweak: import/export custom dictionary, more language support, etc.

Search Suggest Yes, I must admit I am a bad speller. The search suggest would help to reduce the key strokes. Google, Yahoo and Answers suggests work out of the box. Other search engine add-on developers may catch on later.

Some joyful surprise:

Javascript 1.7 Javascipt 1.7 steals lots of cool features from Python, I would compare them head to head later.

And some annoyance:

Default ugly font The default font is quite ugly(left), you need to override the font and theme in ~/.gtkrc-2.0:

gtk-theme-name=“Clearlooks”
gtk-font-name=“Bitstream Vera Font 8″

and restart the Firefox(right).

Firefox 2.0 Preview


Backspace no longer stands for “Back” The Firefox 2.0 uses a new set of Hotkeys, the Alt - left arrow is assigned to Back, while the Backspace is assigned to Page Up. Thanks for your consideration for the Laptop users, Firefox team, but I prefer to stick to my habit. Anybody knows how to override the default Hotkey settings?

Update: Thanks to ehh, the solution is in page about.config,
change browser.backspace_action to 0.

Memory leak? It is still unclear whether the core or the add-ons have memory leak problem. Is it feasible for Firefox developers to QA the add-ons listed , and issue “Designed for Mozilla Firefox” certification for qualified add-ons?

Firefox memory footprint


Supported content
Don’t forget to check your website design in multiple browswers. Find web site design resources and a directory for web design at Edezines. Find a good web designer who will take your site to the next level.