JavaScript: the Good Parts

JavaScript: the Good Parts

JavaScript: The Good Parts
by Douglas Crockford, Dec 2008, 978-0596517748

It is interesting that I never really picked up JavaScript seriously before, though it has been the language of the web for over 10 years. By serious, I mean of course I have produced a few code snippets in it, but I’ve never even bothered to actually learn the syntax. You know, most people write JavaScript just like this, cut-n-past, trial-n-error. The perception of the language for most people is quite lame. Well, it turns out not to be lame at all.

This book to JavaScript is very much like Martine Fowler’s book to UML. I liked UML Distilled so much. I prefer the approach of learning by the best yet small parts first, at least as a start. Not only the learning curve is made more appealing, but those not-so-useful parts are avoided if we don’t ever use them. Why bother if I never used diagrams other than class, activity, or sequence diagrams in UML? Wouldn’t it be great to just learn how to use those 3 diagrams?

In this book, Crockford talks about JavaScript only. No DOM, no browser, pure JavaScript, simply the language itself. He also only focuses on a subset of JavaScript. He calls this subset “good parts”, which is a selected set of constructs and concepts in the language he considers good for programming. So what are the good parts of JavaScript?

  1. loose typing
  2. expressive object literals
  3. functions
  4. prototypal inheritance

Personally I think the most important concepts to grasp in JavaScript is the prototypal inheritance and functions. Chapter 3 has a great introduction to JavaScript’s object model and how prototype works. Chapter 4 introduces functions, including the function scope, closure, and the 4 kinds of function invocation pattern. The usage of constructor is also introduced in this chapter to let you understand what the following code snippet does and how it works:

var Quo = function (string) { this.status = string;};
Quo.prototype.get_status = function ( ) { return this.status;};

var myQuo = new Quo("confused");
document.writeln(myQuo.get_status( ));

Understanding this is vital to either pseudo-classical or prototypal inheritance, which are introduced in chapter 5. Crockford considers pseudo-classical inheritance as a “bad” part of the language and advocates the usage of prototypal inheritance or even functional style instead.

These 3 chapters are probably the most important ones in the book (chapters 3, 4, and 5). The rest mostly introduces various parts of the languages by mentioning what should be noted when using them. The style is more like “gotchas”. In the appendices, Crockford also lists the awful and bad parts of the language he thinks you should be aware of (the awful parts) and avoid (the bad parts).

This book is very good in helping understand the core parts of JavaScript. Though the book is recommended by most people, its intention (using only “good” parts of the language) is rather controversial. For example, some don’t agree that pseudo-classical inheritance as bad part, but some agree that given 2 ways of doing the same things, why choosing the confusing one. Nevertheless, it’s always a good thing to know the opposite sides before you make your mind.

I do have a slight complaint about the book. Some places are inconsistent across the whole book. For example, Crockford has provided a very useful method for creating objects with the ability to designate their prototype objects (so you don’t need fiddle with the use of “new” operator). However, most of the time he calls this method “Object.prototype.beget” in the book but in the provided source code it was named “Object.create” (which is quite confusing, isn’t it?). Checking from his Prototypal Inheritance in JavaScript, it’s obvious that many places mentioning “Object.prototype.beget” was not updated accordingly while introducing the improved version of that method into the book. The same problem also exists in the way he introduces to identify array object type, which is inconsistent between chapter 6 and appendix A.

Another one I found rather annoying is that his terse explanation is sometimes, well, too terse. For example, while mentioning the wrapping of JSON text from the wire in parentheses, he simply explains:

The concatenation of the parentheses around the JSON text is a workaround for an ambiguity in JavaScript’s grammar.

which was too terse in my opinion.

Overall I really like this book. It’s light but deep, and yet easy to grasp.

Password Nightmare

Almost every useful/interesting web site requires a password (Digg, del.icio.us, you name it). If you want to play with them, you’ll need to register. To register, you’ll need a password. It’s just the way it is on the net these days.

However, it’s a nightmare considering the number of my daily visited web sites.

Well, I don’t know how you handle it, personally I have my own mental system for this. Obviously I shouldn’t use the same password for every web site. I don’t trust anyone, not even Google (do you?). Therefore, I use a few primary words plus some special characters to generate a unique password for each site. For example, for web site foobar.com I might choose a primary word foobarcom mixed with 6&8 to generate a unique password foo6bar&com81.

That’s for generating passwords, the easy one. The hard one is to actually remember them. Currently I rely on Firefox2. But there’s one problem: it’s hard/troublesome to keep sync between multiple computers. Also, if I can’t use my own computer, I’m in trouble.

A more thorough refection on this issue could be found here: More on Passwords. And there’s a new way of handling it: Web Password Hashing.

Basically PwdHash lets you generate a unique password for each site based on a primary word you choose. Yes, it’s a little like my system described above but without requiring you to remember the special characters (and how to mix them with the primary word). So now all you need to remember is a few primary words (and on which web sites they are used).

PwdHash is a Firefox extension and is very easy to use. Whenever you need to enter a password (for a specific web site), just press F2 (or a special prefix “@@”) before you type your chosen primary word. PwdHash would generate a unique password for this site (only) based on the primary word you type3.

Please bear in mind that I don’t really think it’s a good idea to use the exact same method for treating your critical passwords. Be very serious about your critical, secret passwords.

Keep your secrets in you mind only, or it is not secret anymore.

1 Well, this might work for non-critical web sites. But for other critical, life-supporting sites (like E*Trade, NetBank), using the same system to generate passwords is simply unacceptable. It is wise to keep them completely separate from those used for non-critical web sites. If you’ve never been worried about it, you should start to worry.

2 Again, that’s for normal non-critical web sites. For critical passwords, I use Oubliette. These days, web sites start to require you to change your passwords every few months. I really can’t remember them without some kind of help.

3 If you don’t know what hashing means. Hashing is a process for generating unique word from a given input. It will always generates exactly the same word if the same input is given. And by unique we mean hashing will generate a completely different word if a different input is given (even just a single character change).

Advanced SQL – Selecting Rows with Max Value from Groups

SQL is never hard but definitely tedious. You know what I mean.

Occasionally I tend to create a relatively complicated query instead of fetching the data back and do the processing in my code. Sometimes for the performance, and sometimes just because I like challenges.

I know, I never am a SQL expert. But anyway, it might help.

Say we have a table like the following:

DepartmentEmployeeSalary
AJohn1000
AMichael1200
ABob880
BTed2000
BJane2000
CAlly2000
CKent4000

And we want to get a query of all employees having the highest pay from each department. What SQL query should we have?

Well, first we need to find what the highest pay of each department is:

SELECT 
  DEP.DEPARTMENT, MAX(DEP.SALARY) 
FROM 
  DEPARTMENT DEP 
GROUP BY 
  DEP.DEPARTMENT 

This will give you a list of department with its highest pay. But we do want to fetch the complete row so that we could know who that employee is. So how do we proceed from here?

We need sub query and EXISTS predicate:

SELECT * 
FROM 
  DEPARTMENT 
WHERE 
  EXISTS (
    SELECT 
      DEP.DEPARTMENT 
    FROM 
      DEPARTMENT DEP 
    GROUP BY 
      DEP.DEPARTMENT 
    HAVING 
      DEPARTMENT.DEPARTMENT= DEP.DEPARTMENT AND 
      DEPARTMENT.SALARY = MAX(DEP.SALARY)
  )

The result looks like this:

DepartmentEmployeeSalary
AMichael1200
BTed2000
BJane2000
CKent4000

The speed of this query doesn’t seem very bad. In fact, it performs far better than I originally thought since it involves sub query.

Stock Quote Feed

OK, I admit I cannot live without Bloglines.

I read news, technical publications, and friend blogs everyday on my Bloglines page. Almost everything has feed these days and it’s just damn convenient to be able to have-it-all in a single place.

Well, almost ...

One of the strangest thing keeps knocking my head is that there’s no stock quote feed (or at least I’m not aware of). There are a lot of web site for you to check the current stock quote, but none of them provide a feed. All I want is a simple feed of stock quote so I can read it on Bloglines once a day (or maybe once a week). I don’t want to maintain a portfolio on a financial portal site and have to manually log in everyday just to learn the current stock quote.

Luckily, someone has a solution: Yahoo stock to RSS converter. It’s a PHP script which parses Yahoo’s stock quote data to generate a feed. Simply put it on a PHP supported server and you get a personal stock quote feed for your own needs (there are quite a few parameters which let you tune the generated RSS content).

Since I’m using it with Bloglines, I have modified it a little bit to fit Bloglines’ interface. The original version makes Bloglines treat each quote update as a new entry. That ends up generating lots of entries for each stock (Yahoo’s stock quote updates every half an hour) and annoys me since I only care about the most current quote. Here’s the modified version (download and rename it): stockrss

Lotus Notes Parser for MoinMoin and Trac

I have been using MoinMoin and trac in my project for a long time. They are really great tools for development work. It’s imply damn cool to merge bug tracking with wiki (and vice versa).

However, it’s another story when you want to use wiki for project management purpose. One thing that keeps annoying me was that we use Lotus Notes in our company. My work as a project manager has to copy and paste those business emails into wiki. Since nobody would write their emails in wiki format, and in order to make email looks reasonably ok, I have to manually edit each email before I put it into wiki. What a nightmare!

That’s not respectable work anyway.

To make my life (and the team’s) easier, I hacked out a parser for just that purpose. The parser recognize the content you copied from Lotus Notes and will format it in an easier-to-read style (by making email headers stand out). Now I just need to copy-and-paste (but no edit anymore!).

Lotus Notes Parser for MoinMoin

Lotus Notes Parser for trac

Cruisecontrol 2.3 Released

ReleaseNotes

The most notable new thing (to me) in this version is that now we don’t need to install a separate application server for the reporting application. CruiseControl can now embed a Jetty server so it is even easier to set it up.

Oh, the bug of detecting Subversion modification set introduced in version 2.2.1 is also fixed (mentioned in Self-Controlled CruiseControl). It was strange that I couldn’t Google any information related this bug (was it only me?). Anyway, the problem is gone in this new version.

I also complained about the inability of adding/removing projects without restarting build loop before. Guess what? It is now possible to achieve Self-Controlled CruiseControl.

Another major new feature is that we can now define Ant style properties in the configuration file. It should be a lot easier to structure the configuration file (also a lot simpler).

The new release includes many fixes and several new plugins. For example, a new RSS publisher is added (as well as RSS support in reporting pages). There is also a preliminary support for distributed building. Check out the release note for yourself and get it now!

Hiring the Best Does Matter

Recently I’ve been involved in many interviews in order to assemble a project team. It was really hard to find a match. Most of the time, I simply had to compromise since the demands were large. The supply simply is not enough.

It is my belief that only the best can produce quality software. However, that’s not what most people believe. Most managers seem to think all developers (or testers or project managers or whomever) are equivalent (or replaceable if you interpret it).

I feel sad about it as a developer.

The fundamental problem with this is that people (who produce software) don’t differentiate software with quality and software without quality. That’s simply not what they care about.

I still feel sad.

Joel Spolsky says:

The quality of the work and the amount of time spent are simply uncorrelated.

One of my professor once said:

As a computer scientist, it is our responsibility to build high quality software. Only in that way can we change the industry eventually.

I still believe that.

My Favorite List of Firefox Extension

I cannot live (ok, browse) without Firefox. One of the reason is that there are so many usable extensions. Here’s my list, and most of them could be found on Firefox’s update site. Only links of those extensions which could not be found there are indicated here.

Must-Have

  • ieview
    Launch IE for viewed page directly from within Firefox. Also it can remember which page (when viewed by Firefox) should IE be automatically launched. For web sites that can only work in IE, it is really very handy!
  • adblock
    Block partial content with wild card setting. Useful for AD prevention.
  • autohide
    Make Firefox full screen truly full of screen. Help you hide the toolbar as well. Must-have for those using Firefox as presentation tool.
  • spellbound
    Spell checking any text field or text area within Firefox. No need for any external dictionary or spell checker any more.
  • imagezoom
    Add zoom function for images in Firefox. Very useful when image size does not fit very well.
  • outsidebar
    Do you hate the expanding of sidebar to push the window to the right? It expands sidebars to the left to help keep your window static.
  • disable targets for downloads
    Prevents an unnecessary blank page opened when clicking a download link.
  • searchpluginhack
    Ever wondered how to remove an installed search engines? It can help you by providing a simple right click directly on the search box dropdown list.
  • resizable-textarea
    Ever complained about the too-small textarea when editing on the web? It can resize textareas to your needs.
  • pdfdownload
    Allow to choose how to handle a PDF file link (download, view it within Firefox, or view it externally).
  • noscript
    Help control the usage (allowed or not allowed) of JavaScript (by site).
  • all-in-one gestures
    Execute common commands via mouse gestures.
  • linky
    Open/download/validate links and pictures in tabs or windows.

Usable

  • forecastfox
    Shows weather forecast in the status bar.
  • greasemonkey
    User script manager for Firefox. Required by many other useful user scripts.
  • mozcc
    Shows embedded Creative Commons licenses of current pages.
  • better search
    Enhance various search engine (search result page), including Google, A9, MSN, Yahoo, del.icio.us ...
  • customizegoogle
    Enhance Google search result page and removes ads and spam.
  • Merriam-Webster search box
    Merriam-Webster search engine to Firebox search box.

Web Mail

  • gmail s/mime
    Add function of sending/receiving encrypted S/Mime messages in GMail.
  • gmail delete button
    Add a delete button to GMail. Requires greasemonkey installed.
  • webmailcompose
    Directly launch various web mail compose window for mailto: link.

Developer

  • colorzilla
    Advanced eyedropper, color picker, page zoomer, and other colorful goodies.
  • web color names
    Let you select color by name or by hex number.
  • measureit
    Draw a ruler directly within Firefox to get the pixel width and height of any element on a web page.
  • editcss
    Let you modify the currently used CSS content on the fly (in Firefox, not on the server). Very handy when you are experimenting different styles.
  • aardvark
    Let you manipulate(hide/view/view source) pages by block. Very helpful for working with CSS styles.
  • view formatted source
    View source inline or in a formatted (colored syntax) form.
  • view cookies
    Add a cookies tab to view page info dialog to check used cookies for current page.
  • add’n’edit cookies
    Allow you to add/edit session and saved cookies.
  • web developer
    Add a menu and a toolbar with various web developer tools.
  • javascript debugger
    Provide a JavaScript debugger for Firefox.
  • curisecontrol monitor
    Show a CruiseControl monitor green/red light in the status bar.
Environment Verification Test

Just as the importance of unit tests during development phase, so is the environment verification test during deployment phase. Environment verification test is the most important tool for an application during deployment phase or even maintenance phase.

An application often makes assumptions about the environment within which it runs. It might requires a file being present, an environment variable being set, or a functioning network environment. Without any of these assumptions holding true, an application cannot run. And depending on the quality of an application, when the assumptions about the environment are broken, it might or might not be easy to find out.

That’s the first part of environment verification test. An application should be robust enough that even when any of its assumptions does not hold it can still behave reasonably. Under such circumstances, an application should gracefully exit and pop up an easy to understand message indicating what the problem is (what the broken assumption is).

The second part is a tool set for quickly verifying the environment. Normally if the first part is well done, most applications do not need this kind of tool set. However, providing such tools could be handy during deployment. First of all, the person responsible for deployment does not need to start the application simply for verifying the environment. The tool should carefully examine the environment against all the assumptions made by an application. It should produce a complete list of all broken assumptions so that the list could be sent to the developers later for problem determination.

Most of the time wasted during deployment comes from the mismatch of the real environment and the assumed one made by the application. If we can quickly determine whether the problem is related to the environment or not, our lives will be a lot easier.

Self-Controlled CruiseControl

CruiseControl is a tool for implementing Continuous Integration. It helps manage the builds for your projects. You can schedule the builds based on time or on any modification made to the repository storing your project. Beyond controlling the builds, it also provides a reporting dashboard for monitoring the status of your projects.

So, the workflow goes like this. You make some modification to the code base and check it into the repository. After a few minutes of waiting (a cup of coffee or tea), a mail notification will be sent to you telling you whether or not your modification caused any problem to the code base. If no problem, well, you can be relaxed and either go home or get another work item. If there’s a problem, you can quickly check the build log included in the mail to see what was the cause. After you fix the problem, you can sit back and wait for the email notification of the result of this fix. Normally we would like to set the waiting time to be within 10 minutes so we can get quick feedback. Note that there’s no manual operation on the server side in the workflow. Every thing is automated.

This is great, really great indeed!

The configuration of CruiseControl itself is through a XML file. In the file you specify the builder, the schedule, the notification, etc. Usually, we would like to put this configuration file in the repository as well. And that brings the idea of “eating your own dog food”.

A separate CruiseControl builder is set up for updating its own configuration file. Whenever I need to change any settings, I simply modify the XML file and check it in. A few minutes later, all changes to the configuration are taking effect. This is great in that I don’t need to log into the build machine. It could be done on any host as long as I or anyone else can check in the configuration file.

Everything is perfect now, except ...

The current version of CruiseControl does not support adding/removing builders on the fly. That is, if you add a new builder, you have to restart CruiseControl. Well, I admit that the needs for adding builder rarely happens.

I know version 2.2.1 has been out for quite a while. I have just installed it but had problems with it, so I go back to version 2.2. The problem relates to Subversion modification set, which always reports the last modification is 1970/xx/xx ... Not good!