Thin & Light

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.

JavaScript is a dynamically typed language. To test your knowledge about this, here are some expressions:


a = '24' - 3;
b = '24' + 3;
c = '24' - '3';
d = '24' + '3';


Now after executing this piece of code, what’s the values of a, b, c, and d? Numbers? Strings? Or NaN’s?

OK. Bring out Firebug and execute the statements to see the results. (What is Firebug? Get it now. It’s awesome!)

Were you right? Now you should understand some type conversion rules of JavaScript.