Thin & Light

Recently I noticed that one of my Greasemonkey script called “Google Reader Unread Count in Gmail” was displaying the wrong count. I was too busy but at least two users urged me to solve the problem so I took a look into the issue, which turned out to be very simple and easy to fix.

In fact Google changed the xml schema of the output so my script was displaying a timestamp. That’s why the count look so strange

Now the source code on userscripts.org is updated(here’s the diff). Please update your local version if you’re facing the same problem.

A very common purpose of Greasemonkey scripts is modifying the DOM structure of the document, mostly adding something new.

I’ve written several scripts before and have been doing such modifications in the “load” event handler, as in this script. The problem is that “load” event is fired after all images on the page have been downloaded completely, so users may suffer a great delay to see the changes occur if there’re many images.

jQuery users know that jQuery has a function “ready”. It won’t wait for the images to load. We are writing Greasemonkey scripts, so we only care about Firefox. Firefox has a “DOMContentLoaded” event explained in detail here.

Fired on a Window object when a document’s DOM content is finished loaded, but unlike “load”, does not wait till all images are loaded. Used for example by GreaseMonkey to sneak in to alter pages before they are displayed.

So when writing my last script I tried to rely on this event:

window.addEventListener('DOMContentLoaded', function(e) {
	...
}, false);

But the codes in the handler were not executed.

I was confused and did some searching. Finally I got this page saying that “the code in a Greasemonkey user script gets invoked when the DOMContentLoaded event fires”. That explains all. The “DOMContentLoaded” event was already fired so the codes never had a chance to get executed.

The solution, of course, is pulling the handler codes out of the wrapper. If your script doesn’t really rely on the “load” event, don’t put them into its handler because there may be a obvious delay.

I’m a fan of Google Reader. Although FeedDemon went free recently and it offers synchronization with NewsGator which is great attraction for many people, I still couldn’t drop Google Reader.

However the panel above the subscription list takes up too much space for my humble screen resolution of 1024×768. As Google rolled out the much complained “Friends’ shared items” feature, it became an urgent task for me to hide the annoying but never used panel. It took up 1/3 of the vertical space on the left sidebar!

No, not just hiding. Sometimes I need to clear the number of unread friends’ shared items. So it should be a “toggler” like the sidebar (or nav-bar as called by Google) toggler natively built in Google Reader. Like this:

Before hiding, with mouse hovering on the toggler:

When the panel is hidden:

You can still open it at any time. Basically, it works in the same way as the native sidebar toggler.

This is done by writing a user script for Greasemonkey, so you must have Greasemonkey installed to use it.

Get it now.

Today I did some modifications to Starbox to let it utilize the power of Prototip. They are both cool JavaScript libraries written by Nick Stakenburg.

How does it work? When you hover your mouse on a star, a tip shows you a brief word like “lame” or “great” which helps you with your choice. If the rating box is locked, a single tip is shown wherever you hover on the box. Check out the demo. View its source to see how to get it working.

You can globally set the tips, or specify a group of tips for each specific rating box instance.

Get it

View Diff | Download the modified version

CSS for the tip (included in the zip archive):

.prototip .startip {
 color: infotext;
 background-color: infobackground;
 border: 1px solid infotext;
 padding: 1px;
}

I saw on the web many discussions about “the best JavaScript editor”. This kind of discussions are quite like “the best PHP editor”. Neither of these two languages has a good editor as other languages like C++/Java. The difficulty in making a good PHP editor is that PHP codes are always mixed with HTML. And the difficulty in making a good JavaScript editor is that JavaScript is too flexible and even worse, different browsers have different implementations.

But there are some good JavaScript editors that’s recommended by people engaged in the discussions. The most mentioned two are JSEclipse and Aptana.

Aptana

I only tried it (the free plugin for Eclipse) for two weeks and gave up.

In Aptana’s editor, you can select a piece of code and press Ctrl+Shift+F to format it, which is like the Java editor. That’s good. But the formatting result is not as good, unfortunately. I couldn’t configure it to generate the same formatting as Java code. So actually this good feature is of no use for me. Even worse, when you press } to close a block, it will “help” you format this block. Clever, but ugly.

Aptana shows its suggestions for you almost every time in type in a character. But the suggestions are absolutely useless most of the times.

Features described on its homepage are quite promising but I didn’t try them all. These two mentioned above are already too annoying. So I switched back to JSEclipse.

JSEclipse

I use JSEclipse most of the time. It’s very simple compared to Aptana. You can see a list of features on its homepage. For me, the most useful feature is that when the cursor is on some identifier (variable, function name, etc.), all occurrences of the same identifier are highlighted. Even though sometimes it will wrongly mark some extra identifiers, it doesn’t matter much.

Sadly it’s acquired by Adobe. You see, the links given above are adobe’s. The original homepage, however, is here. The last update to JSEclipse was on April 2, 2007. So it’s almost dead. It’s really a pity. See this post in Adobe forums.

Anyway, these are only my own experiences and may be full of prejudices. Which editor are you using for editing JavaScript? please comment below.

From: Core JavaScript 1.5 Guide:Variables – MDC

1. Declaring a variable without “var” keyword always declares a global variable and generates generates a strict JavaScript warning. So don’t omit the “var” keyword.
2. JavaScript does not have block statement scope; rather, it will be local to the code that the block resides within.
3. In JavaScript you can refer to a variable declared later, without getting an exception.
4. Global variables are in fact properties of the global object. In web pages the global object is window.

Something about “undefined”

A variable that doesn’t have an assigned value is of type undefined. And evaluating such a variable will return undefined.

What is undefined? There’s an answer on MDC.

undefined is a property of the global object, i.e. it is a variable in global scope.

The initial value of undefined is the primitive value undefined.

I’m a bit confused. It’s a property of the global object, so I can change its value at any time.

var a;
document.write(a === undefined); // true
undefined = 3;
document.write(a === undefined); // false

Pity it’s not a keyword like “null”. So don’t rely on it. In my eyes, it’s no different with the variable that doesn’t have an assigned value. See the following code.

var a;
var b;
document.write(a === b); // true
b= 3;
document.write(a === b); // false

I don’t know whether this is described in ECMA specification or not, but I think it would be clearer if undefined was a keyword as null.

So if you really want to test if a variable is undefined, use the typeof operator instead.

typeof a == "undefined"

It’s really a mess.