No public Twitter messages.

Archive for the ‘Web Development’ Category

Simplified Chinese Language Pack for NextGEN Gallery

Monday, April 13th, 2009

NextGEN Gallery in Chinese NextGEN Gallery is a very powerful plugin for WordPress that can manage the photo easily. It has many features and provides multiple language support. I've just made the Simplified Chinese language pack for the current version. Download: Simplified Chinese Language Pack for NextGEN Gallery 1.21 1.33 1.43

(Following bug has been fixed after 1.21)

There is a bug in this version when using other languages which will result in a notice's translation can not be shown. It a very small issue but if you are completist you can fix it in this way: Open this file [NextGEN plugin folder]/lib/core.php and find out line 419.  Replace it with following code:

  1. $result = sprintf(  __( 'Note : Based on your server memory limit you should not upload larger images then <strong>%d x %d</strong> pixel', 'nggallery' ), $size['width'], $size['height']);

This notice appears in [Add Gallery / Images] -> [Upload a Zip-file] and similar pages. Well, in fact, there are two more bugs if you really want to fix... Open this file [NextGEN plugin folder]/admin/tinymce/window.php and find out line 29-30.  Replace them with following code:

  1. </strike></p>
  2. <p><strike><span></span></strike></p>
  3. <p><strike><span></span>

Checkout what I did (very simple) with this wonderful plugin and know more about how to use it.

Coding standards

Monday, April 13th, 2009

For a beginner of programing, it's a good habit of writing codes in standard format. There are different rules in different companies/teams. Better than form your own, follow a standard of a popular application could be easier and more acceptable by people. For example, the WordPress Coding Standards and Inline Documentation.
Some good approach I just learned from it:

  • When doing logical comparisons always put the variable on the right side.
    I saw this in some codes, now I know why: If you forget an equal sign it'll throw a parse error instead of just evaluating true and executing the statement. It really takes no extra time to do, so if this saves one bug it's worth it.
  • Use real tabs and not spaces, as this allows the most flexibility across clients.
    In some courses, it's suggested that using spaces instead of tabs. Either of they has their reasons. As mentioned above, using the standards of popular applications could be better. And I have already had the habit of using tabs, so I just follow WordPress here.
  • Tabs should be used at the beginning of the line and spaces should be used mid-line.
    Exception for previous point: if you have a block of code that would be more readable if things aligned, use spaces.
  • Ternary operators are fine, but always have them test if the statement is true, not false. Otherwise it just gets confusing.
    1. // GOOD example:
    2. // (if statement is true) ? (do this) : (if false, do this);
    3. $musictype = ( 'jazz' == $music ) ? 'cool' : 'blah';

Feeling web-based 3D graphics

Wednesday, March 18th, 2009

3D graphics on mobile Safari

After turning to Mac, in a sudden, I'm thinking why it's so attractive to me? When there are a lot of reasons like OS X is more stable, virus free (though partly because of  market share is smaller than Windows) and so on, it's much more important to me that OS X has a great user interface. I got the impression from friends that Mac has a strong graphic engine, more powerful than PC. Since they are using similar hardware, then it's all about the beauty of software.

Apple mobile system inherits this.  Safari on iPhone could provide web-based 3D graphic. 3D graphic is not new to web browser. JavaScript, Java Applet, Flash has been working on it all the time. You can even start a 3D virtual tour of  THE FOBIDDEN CITY which requires extra plug-in. Powered by WebKit, Safari supports CSS Transforms and now CSS Animation. With Safari 4, you can see beautiful leaves falling here. The more wonderful thing is on iPhone OS:

Though this 3D animation can be created by JavaScript too, WebKit's CSS transforms offer greater performance. And CSS could be handier for Web UI designer to create and manipulate elements to interact with users.

"It's hardware accelerated, and all the timing and intervals needed for the animations are handled more efficiently by Safari itself instead of Safari's JavaScript engine," Peter Zich, a Chicago-area developer, told Ars. "The framerate for JS animations on the iPhone usually doesn't get past 5fps, for instance, while with CSS it is far more."

Personally, I'm using Firefox more for there are many convenient plug-ins. Hope it could catch up soon.

When 3D graphic control becomes a standard of industry and more web applications get involved, we are getting one step near to the Matrix world.

Fix the bug of ANCHOR not working in IE

Monday, February 23rd, 2009

Broken anchor in IE
ANCHOR may not work in IE when it's working fine with Firefox. Check the HTML code to see if the ANCHOR is written in this way:

  1. <div><a name="anything"></a></div>

Then it can not work in IE. Don't know why. Maybe another bug?
Note that there's nothing in the ANCHOR tag. Here's how to fix it: Simply add something even a space in it. For example like this:

  1. <div><a name="anything">&nbsp;</a></div>

Auto-stretch asymmetric background

Wednesday, October 29th, 2008

Auto-stretch asymmetric background

When designing the website, sometimes I need the background to be asymmetric. Here is a example: I want to keep the main content in the center of the page while extending the green bar marked by the blue box to the right. The problem is, the background attribute of body tag is already used, both the background-color and background-image. The background-image is set to a fix-height, horizontal repeated gray bar as the main background of the content. And the background-color is set to gray to make sure the background-image can merge into it at the bottom area when enlarge the window vertically. I want an extra background bar for the menu which is also extensible. That is I have to use other elements' background attribute to achieve the goal.

It's somewhat easy to make it with TABLE. In this way:
Put a 3 column table in the body tag. Set the table's width to 100%. Set a fixed width for the middle column, let's say 960px. Then the other two columns extend to left and right automatically. Just set a background image for the right column is ok.

But it's now CSS age. I tried many times and here is what I got:
(more...)