The UI of Write a New Note of Facebook is quite straightforward and … shabby:

If you happen to use Firefox, this userscript would make Facebook’s notes suck less.

Screenshot

Requirement

• Firefox
• Greasemonkey

Usage
Exactly the same as WordPress’s quicktags, — no wonder, the core functionality is a port from WordPress’s quicktags.js:

• You may click to button to start a tag, type some words, then click button again to close the tag.
• Select the words, and click the button to surround it with the corresponding tag.

License
This piece of script is released under the GNU General Public License as WordPress, a compatible license would make my life much easier.

Development
The development is a little bumpy than my expectation. The biggest obstacle in the way is the namespace in Greasemonky is not consistent to the general DOM model. When the page is loaded, GM takes control, we may manipulate the DOM nodes using various ways. When it is done, all the object in GM’s anonymous global namespace runs out of the scope, and they are garbage-collected.

For every rule, there is an exception: the closure as documented in the bible. The anonymous function would create a closure that wraps a function in the GM’s namespace. However this does not work for us since we need to maintain several records to bookkeeping the status. So eventually we have to inject the scripts and objects into the host. Here is a tip to inject the functions, but for the Javascript objects, we have to manually do the dirty work, error-prone and tedious. If you have a better idea to access the objects that resident in the GM namespace, please leave a comment here.

Happy New Year! The traditional Chinese new year aka the Spring Festival is coming. And I decided to change the look of this blog, *finally*, after two years.

The new theme is based upon ericulous‘ GenkiTheme. I really love the built-in color scheme which is the last thing I would do it from the scratch. And the three-column layout is such a different experience for me as well.

The following plugins are used for the navigation and SEO:

• Customizable Post Listings
• Sitemap Tags
• WP 2.3 Related Posts
• Top Posts By Category

Since WordPress 2.3 supports tag out of the box, the Simple Tag plugin is not longer needed,
WP 2.3 Related Posts uses the tag for relation between posts, that is much more lightweight than the full-text search alternative.

Top Posts By Category is used for the Popular Post since Popular Contest does not work very well with WP-Cache. Customizable Post Listings is just for Random Post.

There are also some minor modification tailed for my personal preference as well:

• The color of the blog title is OK in Firefox on Linux, but too flashy either in MSIE or Firefox on Windows.
• The HTML tag for post title is h2. h1 may make more sense for the bot.
• The same applies to the blog title in the sidebar

There are still more things to go:

• Embrace OpenID/Live ID and other 3rd party authentication to encourage comments
• Add avatar support

I just moved out from Globat to a new place, Jumpline. It is a good time to clean the house, and throw out all trashes.

Enable WP-Cache + GZIP

Although the official WP-Cache suggests to disable GZIP support, there are some hacks(1, 2) to enable it. That is quite neat.

After this optimization, the total size of front page is 247.6K, 85.1K of that is JavaScript, the built-in prototype.js takes 71.2K. We should take some actions for it.

GZIP the JavaScript and Stylesheet

dailyApps suggests to dynamically gzip the stylesheet and JavaScript to reduce the HTTP download. jotsheet goes even further, a neat method is demonstrated to consolidate all the CSS/JavaScript into one to save the HTTP request.

For normal users, the big bottleneck is the size of prototype.js, and it is most unlikely change unless major version update. So let’s gzip it first and check out the performance boost:
Using Dojo ShrinkSafe, the prototype.js is cut to 49K, not bad.

Thanks to the flexibility of VDS powered by Jumpline, I could easily add mod_deflate to Apache, and enable mod_deflate globally to all CSS and JavaScript. Check out the doc for details.

This helps me to save tens of kilobytes, now the gzipped-shrunk protoype.js is 14.6K only, the overall improvement is gzipped 30.2K versus original 142.0K, that is quite impressive.

Use client-side cache

mod_expires just did the right work, load the module and enable it wherever the content would not change:

Remove ETag

Use these directive to disable ETag globally in httpd.conf:

I get B(87) with cache, A(95) without cache in YSlow performance score. The next step optimization may introduce CDN service, for example, Amazon S3.

I’ve been bothered by the long latency and slow responsive of my WordPress blog, last night, I would like to dig into this problem and figured it how easy to improve the overall performance.

FireBug is our best friend, there is a built-in module to profile the page loading time, here is the original bloated blog:

Without annoying popups, free ipod advertisements, the front page cost 156 KB, and it takes 5.97s to load, that is sooo bloated.

Step 1: Get rid of redundant plugins

The AJAX spell checker plugin consumes around 54 KB, and I seldom uses it since Firefox 2.0 has built-in typo check, say bye bye to AJAX spell checker.

Step 2: Tradeoff between the eye-candy and usability

Nifty Corners decorates the tag block with rounded corner using Javascript and CSS. It is small and neat, but take 690ms to render, that is probably not worthy.

I have never been a big fan of Technorati, the name of the service is too obscure. Just remove the hook and save 250ms.

Now it looks much better

Step 3: Find the less expensive alternatives

I love tag, but Ultimate Tag Warrior is kind of expensive, two php files are parsed in sequence and consume almost 1s. Here is an alternative, Simple Tagging for the similar functionalities, but less expensive. The developer is so considerate to provide the tag import from UTW.

Step 4: Shrink the CSS and JavaScript

Browser does not care the indent or space, developer does. The reader-friendly source code wasted the traffic to transfer the spaces. Here are some tools to help to condense the source code: get rid of the space, shrink the variable name etc. I tried CleanCSS, it cut down the size from 10k to 4k, quite impressive. You might take a try of Dojo ShrinkSafe for your verbose JavaScript as well.

Step 5: Cache

WordPress Cache is a powerful tool to cache the dynamic content to static pages to shorten the loading time and leverage the CPU usage. This is an essential tool if your web site is Slashdotted or Digged.

Now the blog is much more responsive:

Further usability optimization may involve AJAX operations, for example, using AJAX to navigate the posts, search. I would try this later.

The theme of this blog is based upon Yadda, a fixed-width, two-column wordpress theme. To take the full advantage of the current wide-screen, I modified the stylesheet to make it adaptive to the screen width:

Since the position style of sidebar is absolute, if the height of the “main” is smaller than the “sidebar”, the “sidebar” would overlap the “footer”, the height of the “main” is only determined in the run-time. Here is the solution:

Now the content’s height is the maximum of “main” and “sidebar”.