Google Maps API’s Error Handling

Requirements to try out things described below:

Super large numbers as LatLng’s

Open this page from Google’s example. In firebug’s console, execute the following code:

map.setCenter(new GLatLng(1e100, 1e100));

Setting super large numbers as latitude and longitude like this always makes my Firefox 2.0.0.11 in Windows XP hang.

I don’t know why Google didn’t restrict the range of the numbers, and what computation it did to consume so much CPU time. It should ignore such numbers after a simple judgment.

Strings as zoom parameters

In the same page, execute this piece of code:

var zoom = '16';
map.setZoom(zoom);

As you see, nothing happens. Google must be ignoring the parameter when expression typeof(zoom) == ‘number’ is false. In my situation, I got the value of variable zoom from the url, and didn’t noticed it was the type mismatch which prevented the code to work, since I’m used to JavaScript’s dynamic type conversion feature:

a = 2 * '3'; // a = 6

It will be converted to number when needed. Of course, it’s good to perform strict type checking. But it’ll be better if the API threw an exception instead of being silent.

Toggling the Google Reader Shared Items Panel

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:

toggler

When the panel is hidden:

panel 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.

JSEclipse vs Aptana – Quest for the Best JavaScript Editor

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.

MyBlogLog Widget Colorer

When I started to use MyBlogLog days ago, I thought it should have another widget generator besides the current one (http://www.mybloglog.com/buzz/community/[community name]/widgets/). The current widget customizer first give you a preview of color scheme but no layouts. When you’re satisfied with the colors, click the button and you’ll see the actual layout with the colors.

The problem is that a color scheme good for the default layout is not necessarily good for customized layouts. When you realized this and want to tweak the colors, you just can’t do this based on previous customization. Even you hit ‘Go back’ button of your browser, the color scheme is lost.

It’s more natural for users to choose a layout first and customize the colors based on the “real” layout.

Widget is critical for MyBlogLog. It won’t go far without providing the widgets for bloggers to put on their sidebars.

So I created the tool – MyBlogLog Widget Colorer.

Features

  • Live preview of colors on real widget. You’ll get the *real* effect whenever you change a color (click to enlarge):

    live preview

  • Unrestricted colors. With the color picker you can choose any color available and there’s an input for hex color code, so you can make it exactly match your site theme. (I did this by editing the code by hand before :) )
  • Quick adoption of user submitted themes. If you like a color theme listed in the right panel, use it with just one click. Also you can share your beautiful theme with others by clicking the show off button.

    quick adoption

How to use

  1. Go to MyBlogLog Widget Colorer.
  2. Enter the mblID. It’s a 16-digit number assigned to your community by MyBlogLog. You can see it in the code provided by MyBlogLog:

    MyBlogLog widget code sample

  3. Change the layout settings.
  4. Click the “Customize Colors” to go to the next step. Here you can tweak the colors or directly use a color theme listed on the right. When you’re done, copy the code to use in your site. Don’t forget to show off your beautiful theme!

Beneath the scene

Thanks for mooRainbow – the great JavaScript color picker from w00fz. If you’re feeling great joy when selecting a color, thank him :) . This color picker is made with mootools JavaScript Framework. I had no experience with mootools before, but since it adopts the similar way with Prototype, it’s not too hard for me to use.

If this tool become popular, I may enhance it with more features like customization history, etc. Sadly there is still no API from MyBlogLog, though expected by many people.

Please leave a comment here if you have questions or suggestions :)

JavaScript Variables Notes

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.

Small Flaw of Digg Podcasts

Digg Podcast

Now Digg is beta testing its “Podcasts” section. There is a module on the right of the page, with two tabs, “Find Podcast” and “Add New Podcast”.

Open the page and try clicking the tabs. You will discover the weird behaviors of this module.

Digg is using this single JavaScript function to handle the click events of the two tabs (Note that Prototype framework is used.):

function pcSwitchTabs(){
  var tab1 = $('podcastFind');
  var tab2 = $('podcastAdd');
  var addbox = $('podcast-add-box');
  var errordisplay = $('podcast-error-display');
  var ad = $('podcast_ad_switch');
  var psearch = $('podcast-search');
  var psubmit = $('podcast-submit');
  if (tab1.className == 'active') {
    tab1.className = '';
    tab2.className = 'active';
    if (addbox) {
      addbox.style.display = 'block';
    }
  }
}

You should ignore several lines of unused code. What does this function do? As its name, it switches the tabs back and forth. And it’s called either of the tabs is clicked. So the weird thing happens – whichever tab you click on, the current tab changes. This can make users very confused.

Another thing is that when you click on a tab, the page scrolls back to the top after the tab switch. This will definitely make users lose their attention. The code for the click-able tab:

<a onclick="pcSwitchTabs()" href="#">Find Podcast</a>

After executing the onclick event handler code, the browser tries to open the link specified by the “href” attribute. A “#” makes the page scroll back to the top. There are some common solutions to this. For example, give href attribute a value of “javascript:void(0)” or append “return false” to onclick attribute to stop the event.

These two bugs are very easy to fix, but leaving them aside will definitely make users confused or unhappy. I don’t know how the beta process is going, but hope Digg will fix them one day.