The module I wrote is called CoolBeans. (Thanks for the name, Mr. Chris Peterson). CoolBeans is an Inversion of Control (IOC) / Dependency Injection (DI) library for Node.js. CoolBeans is loosely based on ColdSpring for ColdFusion and Spring IOC for Java. It’s a single js file and currently appears to be quick and easy.

To install:

npm install CoolBeans

To use CoolBeans you simply create an instance of the CoolBeans and load the configuration file like this:

var cb = require("CoolBeans");
cb = new cb("./config/dev.json");

The above code is the only require function you should need in your entire application. Once you’ve required CoolBeans you need to create a new instance and pass in the path to its’ configuration. This is shown above.

Once you have the fully loaded CoolBeans you can use it to quickly create fully configured singleton objects based on its’ configuration. The config file for CoolBeans is a JSON file so the entire thing is wrapped in {}.

Each element in the root of the configuration file is a bean (bean = Java for object) that CoolBeans can create. Here’s an example:

{
     "fs": {"module": "fs"}
}

This is essentially the same as:

var fs = require("fs");

However, we now only need to define this one time for an application, rather than in each file that requires it.

You can also specify paths to modules that are not node_modules. For example:

{
     "Recipient": {"module": "./entities/recipient"}
}

At the most basic, the above means that CoolBeans will call require for the module and cache the results in a variable named Recipient.

As a relative newb to Node.js, I think I’ve handled this correctly. CoolBeans is a node module which means that NPM will install into ./node_modues/CoolBeans. The actual CoolBeans script is in the lib directory. That means, that from the perspective of CoolBeans your components are three directories above it. For this reason, CoolBeans looks three directories above it for the module specified. So, the Recipient module above actually turns into ../../.././entities/recipient. This has the effect of making the paths to modules specified in the configuration file relative to the root of your module or application. So, if you make a module that depends on CoolBeans and later publish it via NPM I think it should work correctly when used in other projects.

You can get any of the configured beans by calling cb.get(“beanName”) where beanName is the name of the bean you want to get. For example:

cb.get("Recipient");

The above will lazily create the Recipient bean, cache it as a singleton, and return it.

You can get a lot more complex with configuration too. For example, you can specify if CoolBeans should call a constructor and what arguments to pass into the constructor. For example:

"codeGenerator": {
     "module": "./util/codeGenerator",
     "constructorArgs": [
         "foo",
         123
    ]
}

What the above is saying is that when we get the codeGenerator bean, we need to load the module specified then call new on the module and pass in the values specified in the constructorArgs section to the constructor. The above means:

new codeGenerator("foo", 123);

You can also specify more complex values to pass into constructor arguments:

"codeGenerator": {
    "module": "./util/codeGenerator",
    "constructorArgs": [
        "foo",
        123,
        {"value": [1, 2, 3]},
        {"value":
            {
                "foo": "bar",
                "bar": "foo"
            }
        }
     ]
}

Note that while you can specify a string without indicating explicitly it’s a “value”, for arrays and anonymous objects you need to provide an object with a property named “value” whose value is the value you’re trying to pass in. The above could be written more explicitly as:

"codeGenerator": {
    "module": "./util/codeGenerator",
    "constructorArgs": [
         {"value": "foo"},
         {"value": 123},
         {"value": [1, 2, 3]},
         {"value":
             {
                  "foo": "bar",
                  "bar": "foo"
              }
         }
    ]
}

Strings, numbers, arrays, and anonymous objects are not the only things you can pass into constructors. You can also specify other beans that could be passed in. For example, let’s say we had a database configuration object you want to pass into any object that is used to access data you could do the following:

"mysql": {"module": "mysql"},
 
"dbConfig": {
    "properties": {
        "host": "server.hostname.com",
        "port": 3306,
        "user": "mysqlUser",
        "password": "password123",
        "database": "foobar"
    }
},
 
"recipientDao": {
    "module": "./db/recipientDao",
    "constructorArgs": [
        {"bean": "dbConfig"},
        {"bean": "mysql"}
    ]
}

The mysql bean is simply the same as saying require(“mysql”). The dbConfig is an anonymous object with properties specified (more on this in a bit). When the recipientDao (dao = data access object) is created, CoolBeans will see the “bean” property and will create and pass into the constructor the fully-constructed dbConfig object and the mysql object. Here’s what that recipientDao might look like:

module.exports = function(dbConfig, mysql){
    this.listRecipients = function(userId, callback){
        var client = mysql.createClient(dbConfig);
        client.query(
        "SELECT id, name, addressLine1, IfNull(addressLine2, '') as addressLine2, city, state, zip, taxDeductible, created, updated, 0 as netDonations " +
        "FROM recipient " +
        "WHERE userId = ? AND deleted = 0 "+
        "ORDER BY name",
        [userId],
        function(err, results, fields){
            client.end();
            callback(results);
        });
    }
}

Note that there are no require statements. The object just gets its’ dependencies when it’s instantiated and can immediately use them. These dependencies are also automatically singletons.

Also note that if you want to use a transient object you would still create an instance of it the way you always have.

I also mentioned above that CoolBeans can be used to create create and populate anonymous objects. For example:

"dbConfig": {
    "properties": {
        "host": "server.hostname.com",
        "port": 3306,
        "user": "mysqlUser",
        "password": "password123",
        "database": "foobar"
    }
}

This is a somewhat long-winded way of saying

dbConfig = {
    "host": "server.hostname.com",
    "port": 3306,
    "user": "mysqlUser",
    "password": "password123",
    "database": "foobar"
};

However, once this object is configured in CoolBeans you can easily pass it into other objects when they are created.

You can also specify properties for not-anonymous objects. You can also mix and match constructorArgs and properties.

For example:

"creditCardDao": {
    "module": "./db/creditCardDao",
    "constructorArgs": [
        {"bean": "dbConfig"},
        {"bean": "authorize"},
        {"bean": "mysql"},
        {"bean": "CreditCard"}
    ],
    "properties": {
         "service": {"bean": "service"}
    }
}

When CoolBeans creates the creditCardDao it will first load all the beans specified in the constructorArgs. It will then create the creditCardDao and pass in the four already-created beans to the constructor. Once the object is constructed it will set the service property on the object to the specified service bean. Note, CoolBeans will look for a setter and use that if it can find it. For example, in the service property above, ColdBooks will first look for a function named setservice (note that this is case sensitive). If it can find it, it will pass in the service bean to that function. If not, it will simply set a public property on the object.

There are a few other interesting capabilities of CoolBeans:

Beans don’t have to be lazily loaded. You can set a bean to load when the container loads. For example:

"dateFormat": {
    "module": "./util/dateFormat",
    "lazy": false
}

Also, if you have a factory that is used to construct other objects, you can specify this using the factoryBean and factoryMethod properties. For example:

"knox": {"module": "knox"},
 
"s3client": {
    "factoryBean": "knox",
    "factoryMethod": "createClient",
    "constructorArgs": [
        {"value":
            {
                "key": "myKey",
                "secret": "mySecret",
                "bucket": "myBucket"
            }
        }
    ]
}

The above s3client bean is configured so CoolBeans uses Knox to create it. The constructor args are passed into the factoryMethod as if it were a constructor. The above essentially boils down to:

s3client = knox.createClient({
    "key": "myKey",
    "secret": "mySecret",
    "bucket": "myBucket"
});

The really nice thing about CoolBeans is that it lets the objects in your system stay focused on what they do best. It shouldn’t be your object’s responsibility to know what they need to work. They should simply get what they need to work when they’re created. CoolBeans also helps avoid situations in complex apps where you have dozens of lines of code just getting dependencies created just to create one object that otherwise happens to have a lot of dependencies. Lastly, CoolBeans allows you to easily change how your application is configured in different environments.

If you’re a Node.js developer I’d love to hear your thoughts on CoolBeans! Heck, I’d love to hear your thoughts even if you’re not.

First of all, if you have not used node before, know this: node is FAST! I mean, blow your socks off fast. I’m used to a J2EE app running in a JRun / Tomcat style context, and waiting for the various application frameworks and entities to get loaded up usually takes some time. Well, when you type ‘node app.js’, the app is running, instantly. Making requests to the page from your browser, they load *instantly*. Stop / restart the server, seems only limited by how fast you can type. I was curious and made some simple page returns from node, and ran a load tester against it. With no delay in my jMeter test, on my local development system, I was retrieving the root page of this node app at approx. 180 page requests / second, regardless of how many simultaneous users I sent in.

Now, not having worked with node before, I spent some time gathering resources online. One of my favorite so far is http://howtonode.org/. We have decided to use Express, an application development framework for node. You can get an express intro http://www.screenr.com/elL, and you can install using npm (the node package manager) with ‘npm install express’. Get more information about express from https://github.com/visionmedia/express/blob/master/Readme.md.

My favorite part so far for node (besides the insane speed and low server resource utilization) is that I am leveraging existing knowledge. I have been working with javascript many years, so in a lot of ways I feel like I’m just learning a new framework, rather than an entire new language. I like the level of control that I have over the request, and am enjoying using a whole new stack for app development (git, node, textmate as IDE). Watch this 2nd screencast about using route specific middleware http://www.screenr.com/mAL, very exciting the capabilities of this framework, and I look forward to learning more as this project develops!

For example, this was written before I realized that writing fat controllers was a bad idea.  In fact, this is such an early project that it ran on a pre-1.0 version of Model-Glue.  There was no concept of ColdSpring at all.  It used a stand-alone tool to generate the data access layer (which eventually inspired me to write Reactor, which is now also defunct).

Furthermore, the business requirements have changed over time.  The site was initially built to satisfy one specific use case: selling a given product in one specific way.

Overtime the business team has requested new features that are difficult or impractical to implement in the existing architecture.  For example, they want to be able to edit and add content on the site without involving me or any other technical staff.  They also want to start selling other products in slightly different ways from their original plans.

Long story short, it’s time for a rewrite.  I now need to choose a stack of frameworks, languages, etc, that are appropriate for this project. I’m afraid that I’m over complicating things and was hoping that the general Internet might have some suggestions.

So here’s what I can say I think I need:

• I need a Content Management system that allows the business and marketing team to add pages to the site, edit content, and generally manage the Information Architecture of the site.  They need this because I am not as responsive to their requests as they would like.  I do have Alagad to run on a day-to-day basis.
• I need to write custom code that integrates with the CMS to support the unique business requirements of this application.  This would include management of the product being sold, reporting, integration with other third party systems, and more.  There really are not any off the shelf tools that I could use to replace this custom work.  I really want to write this code to leverage IOC and OO.  One of the biggest challenges we’ve had with the existing site is that it is mostly pseudo-OO, which makes changes and enhancements more difficult to implement.  Hence, the rewrite we need to do!

For a content-heavy site I’d typically use an off-the-shelf CMS like Mura or Farcry.  For a custom-code-heavy site I’d typically use Model-Glue and ColdSpring to help me structure clean maintainable code.

The problem comes in when I try to do both:  Use a CMS and write clean maintainable code.

My experiences (though dated) with Farcry pretty much suggest that you have to write code Farcry’s way if you want to do anything custom.  I honestly just don’t like Farcry’s approach.

I’ve also worked with Mura quite a bit over the last year on a different project. For that, we used Mura as the CMS and wrote a Mura plugin to run Model-Glue events based on how a content element is configured in Mura.  It’s my opinion that this was a reasonably good stack.

I’ve even considered writing my own CMS that integrates nicely with Model-Glue, but that’s really a non-starter.

For this rewrite I have been planning to use the following stack:

• Mura for content Management.
• ColdSpring, Model-Glue and Hibernate for custom code that will be run within Mura via a Mura plugin.
• JQuery
• This would be run on Railo, which would run in Tomcat.
• Eventually this would be deployed as a WAR to Amazon Elastic Beanstalk or another Java Platform-As-A-Service provider.

And while that seems like a reasonable stack to me, I have a few concerns:

• Overall performance: The Mura + Model-Glue project I mentioned earlier has been suffering general performance woes.   Many of these could be attributed to the sheer volume of custom code and the fact that it is not running the latest updates to Mura and Model-Glue. These have mostly been ironed out, but it’s still an area of concern to me.
• I might be crazy: To me, the stack above makes sense.  However, every other developer who has worked with me on this stack doesn’t like it.  At all.  Some developers dislike Mura.  Some developers dislike the Model-Glue integration.  Some developers think the stack is too deep.  Some dislike using unfamiliar platforms like Tomcat and Amazon EBS.  Lastly, very few developers have experience with the complete stack (even when you ignore Tomcat and Amazon).

I know I could build this system using the stack I’ve outlined above and I’m reasonably sure I can get it to perform well.  However, I feel like I’m not seeing something that everyone else sees.  I’ve even had three contract developers quit in the early phases of this project.

I’m not sure if my stack should change.  Thinking pragmatically, can you think of an alternative approach to this problem?  One that lets the business and marketing teams have the flexibility they need and also allows developers to write clean, well structured code, using the latest best practices?

I’m open to all suggestions.  I’ve been considering other languages and platforms.  However, I also need to keep in mind my learning curve on any other tools or languages that might be used as well as unique business requirements that may make some choices impractical.

I’d greatly appreciate your suggestions.  What are your thoughts?

I have so many ideas that I started a twitter account, @DougsIdeas, where I try to tweet one new idea a day.  Not all of my ideas are great, but I truly believe some have real potential.  This particular idea, the one I’m writing about right now, may or may not have legs.  But, its one of the simpler ideas for me to try and, if it works, it will be awesome!

But before I explain my idea, allow me to try to explain myself:

There is nothing I enjoy more than having an idea and bringing it to life.  I have worked on more than a hundred unique projects in my career.  These projects have been for past employers, clients in a plethora of industries, and myself.  The one thing that these projects all have in common is that they were all quite distinct.  Rarely have I done the same thing twice.

Because of this, I have become not just a reasonably talented programmer, but I’ve also very good at quickly understanding problem domains, finding solutions, and implementing those solutions.  Quite simply, this is what I excel at!

An interesting side effect of this is that I find myself subconsciously analyzing the world around me and finding problems or inefficiencies. I simply can’t help but think up ways I would solve these problems.  Ideas are always popping up into my head.  And some of these ideas I really, really, want to work on.

But I have a challenge: I have to pay my bills and the bills of my employees.  To pay my bills I have to do work for my clients.  (Which, by the way, I also really, really, enjoy!)  However, it has become increasingly difficult to do my “real” job to the best of my abilities, fulfill my familial roles of husband and father, and also work on any of these ideas.  Something has to give, and naturally it’s the idea work.

This challenge led me to today’s idea:

My idea is that there must be someone who will invest in… me.  Well, really, to invest in my ideas – to partner with me on bringing some of my better ideas to fruition.

Without getting into details, here are a few one-line summaries of some of the ideas I have in my head.  I have ideas on how to monetize all of the following concepts.  Take a look and see if any of these pique your interest:

• A social rating tool that lets anyone express their opinions about any given topic in real time. (This one is actually almost done and has huge potential.)

• A unique tool to help people identify things in the world around them such as bugs, plants, and anything else.

• A way to get rich from the lottery. (I know how this sounds.  It’s not what you’re thinking!)

• A way for people who use social networks to share their lives to also share that same information with friends and family who aren’t on the social networking bandwagon, or even the internet.

• A way for audiences of any size to provide input for the purposes of information gathering, education, entertainment, and more.

• A tool that will very efficiently calculate cut plans for wood working projects based on the needs and what’s available. It’ll even create a shopping list for you. (This is pretty much done.)

• A self-scooping cat litter box that would, believe it or not, actually work. (And I’ve owned just about all of the ones on the market.  They’re all terrible.)

• A new drive mechanism for remote control cars that uses neither battery nor nitro fuel.

• I even have a few philanthropic ideas related to health care and helping the world’s poor become less poor.

• And much, much more.

More ideas are listed over @DougIdeas.

I think some of my ideas have real potential.  Maybe not all of them are million or billion dollar ideas, but I believe there is some real potential.  Personally, I’d rather have 10 $100,000 per year streams of income than one $1,000,000 stream.

If I simply had time to work on these ideas sequentially, one at a time, I believe I could fail quickly.  What I mean is that many of these ideas would take only a few weeks or perhaps a couple of months to get working to a point where they could be released for general usage.  Those ideas that don’t grow quickly could be sold off or thrown out.  Those that do grow would be reinvested in.   Many of these projects will also yield potentially patentable or resalable intellectual property.

As it is now, I may get 10 or so hours per week to work on my concepts.  A project that should only take two months of concerted effort currently takes me eight months or more to complete.  I could be doing upwards of six or more projects a year where, right now, I’m doing perhaps one.  The inefficiency is taxing and very frustrating!

What I want to do is find a partner – someone with more money than sense, I suppose.  This person would invest in me – and my ideas.  I would work with them to identify and develop specific concepts, define a road map for these ideas, and build and market these ideas.  Our focus would be on growing (or failing) quickly with minimal investment.  Those ideas that succeed would be spun off into separate companies with their own management and staff and be self funded.  I suppose some of these ideas could even potentially go public some day.

I’m not sure what the final structure of this arrangement would be, but I’m definitely open to suggestions.  One option might be that the investor would get half of everything.  Another might be that we’d both get 33% with another 33% held to the side for additional future investments from third parties.  The more I think about this, the more I realize these details would need to be worked out in negotiations.  I hope that anyone who might consider this can see that I’m open to various ideas.

The only thing I’d be looking for out of this, aside from my portion of the companies that are created, is the funds I need, month to month, to pay for my current staff of four people and our minimal expenses.  The staff expenses may grow over time, but would ideally be paid for out of income earned.

So, there’s my big idea.  Yes, I realize it’s a long shot.  But I’ve always tried to live by the philosophy that it never hurts to ask.  I’ve got to believe that there’s someone out there who would be willing to take a chance on me – and my ideas.

If you know someone who might be interested in talking to me about this investment and partnership concept, please put them in contact with me.

If you’re interested in exploring this concept with me, you can always contact me using the following information:

Doug Hughes
dhughes@alagad.com
651-252-4234 (Office and Cell)

Or you can simply add a comment to this blog entry.

And there we have it, my idea for the day!

So, go forth and contribute.  Then report back!  It’s that simple.  You’ll be helping support the community of OSS developers and you just might get a really, really, nice backpack out of the deal!

Also, to try to drive a little interest in this contest, I’m holding a side contest for yet another Alagad bag.  Simply tweet the following to enter and I’ll pick a random tweet the same day that this OSS contest ends.  Here what you tweet:

Now I wish I’d never contributed to open source! #AlagadBag http://bit.ly/eJvDfi

Also – you may want to note that CodeBass is holding a contest to give away some swag to commemorate their MediaSlurp collaboration.  I’ve donated an Alagad bag to their swag set.  Get more info and learn how to enter their contest here.

The contest title is pretty self descriptive.  I want to encourage those of you who haven’t contributed to an open source project in the past to contribute.  So, go out, choose a project you deem worthy and contribute.  It doesn’t matter how you contribute. Obviously you could contribute code or bug fixes.  You could also write documentation.  There are probably other things you could do as well.  For example, maybe you could start a fundraising or publicity campaign for your designated project. The choice is yours – be creative!

As you make your contribution please put a summary into the comments on this blog entry.  Be sure to make a good sales pitch on why your contribution should be the winner.  When the contest ends I’ll post a survey and the community can choose which contribution is their favorite.  The winner will get a really nice laptop backpack. Everyone else will get the glowing sense of well being and pride in knowing you’ve done a good deed.

The contest starts now and runs through the end of 2010.

I’ve given away several of these backpacks in the past, but, if you’ve never seen them in person, trust me, they’re very nice!  I’ve been using mine for about two years and it still looks brand new.  It’s very well constructed from very nice materials.  It’s well padded and won’t hurt your shoulders, no matter what you load into it. There are about a bazillion pockets on this beast – more than enough to securely store and organize just about anything you might want to cary with you.  Heck, it’s even got ventilation channels to keep your back cool!

So, please, go do a good deed and help out an open source project and report back!

Update: I’ve added a side contest to this contest.  More information can be found here. In short, all you need to do is tweet the following to enter:

Now I wish I’d never contributed to open source! #AlagadBag http://bit.ly/eJvDfi

A few weeks ago I posted a contest where entrants would make a word search generator in an unfamiliar language.  And, well, honestly, that went over like a lead balloon.  I had precisely zero entrants.  Maybe I made it a bit too complex?

I’d like to turn this into a game or a contest or something of the sort and have a little fun with it!  Furthermore, a little promotional activity can’t hurt since it looks like Alagad will be winding up their current contract in April.  (It’s never too early to be looking for the next gig.)  If possible, it’d be really nice to be able to help people learn something new or, perhaps, help out those who are less fortunate, especially durring this time of year.  Winners of these contests would get an Alagad backpack.

So, this time I’m having a contest to come up with ideas for contests, games, or whatever.  If you have an idea on what I should do to give away these backpacks post it in the comments below.  I’ll pick one or more of the ideas and run with them.  If your idea is picked, you’ll get a very nice backpack for your troubles!

So, how should I give away these backpacks?

I don’t plan to sponsor any conferences any time soon and so I thought I should come up with a way to give these backpacks away. (I’ve only got so many backs, myself.) What better way to do this than to have a contest?

My son loves word search puzzles. He loves them enough that I’ve often considered writing a simple application to generate word search puzzles for him. In my minds eye I see an application where I can provide various options I can choose from such as:

• How many letters wide and tall a puzzle should be.
  
• A maximum length for and number of words to choose randomly from a dictionary.
• An option to provide your own words and title.
• Directionality settings. Such as forward, down, down at an angle, backwards, backwards at an angle, up, etc. These would control how words would be hidden in the puzzle.

Clicking a button would spit out a word search that I could print out and do with a pen.  I’m sure you could come up with many of your own ideas for how a simple word search generator might work.

Of course there are already a wide number of word search puzzle generators on the web, but as a programmer I was interested in the challenge. And so, here is my challenge to the community in general: Create a word search generating application.

And here’s the twist: Create the word search genrator in any language (or technology) you don’t already know.  If I were to write this right now I’d probably choose NodeJS since I’m interested in its capabilities and it’d be fun to do something more than just a hello world application in it.

Your application can be as complex or simple as you want. Complexity doesn’t guarantee a win and neither does simplicity. What I’m going to be looking for is the uniqueness of the language you choose and how well written the application is from my personal perspective. For example, I’ll be more interested in a well-written Clojure application than a poorly written one in Ruby or C. Yes, it’s entirely subjective, but I’m less familiar with Clojure (and bet most of my readers are too) and therefore would be more interested in seeing what can be learned.

Submissions are due a week from now. I’ll start reviewing them on Tuesday the 26th. Depending on how loudly people complain I may push this deadline back.

Once I’ve had a chance to review the entries I’ll pick three winners, each of whom will get one Alagad backpack. I’ll then write a blog entry (or three) about the entries, the languages used, and the approaches taken in building the applications. Assuming it’s practical, I’ll also host the applications so the whole world can play around with them. Furthermore, I’ll publish a SVN or GIT repository where people can download the source code.

Every time I do one of these contests I forget something important.  So, if you have any questions or concerns please add them in the comments. I’ll reply and clarify.

Good luck!

This isn’t really a problem except that more often than not I fail to notice when the other tab has finished loaded and end up wasting time.  Because of this, I’ve long wished that there were a tab extension that would could play a sound when a tab finishes loading.  However, look as I may, I never found anything that did what I wanted.

In the past I’ve considered writing a simple extension for this.  The thing is, until recently I’ve been a fairly diehard Firefox user.  Having written a now-defunct Firefox extension, I know what a flaming pain in the ass it is to write Firefox extensions.  There was no way I was going to write this extension for Firefox.

However, I recently decided to take Google Chrome for a real test drive and I’ve been using it exclusively for a few weeks.  During this period I also began working on a website that takes a very long time to reload.  So long, in fact, that I became frustrated enough to go and research what’s involved in making extensions for Chrome.  And, as it turns out, there’s not a whole lot involved!

In Firefox, when you write an extension you can change or override just about any feature of the browser.  For example, if you don’t like how bookmarks system works, you can pretty much replace it with something you do like.  The thing is, with all that power and flexibility comes a boatload of complexity.  I really don’t even have the patience to write about the hoops I had to jump through to get started.  Let it suffice to say that I had to run the browser in a different test user account and, if I recall correctly, reload the browser each time I made a chance to my extension.  Then there’s the fact that Firefox extensions are written using XUL (XML User Interface Language). And there was more fun too. In summary: It’s a pain and no fun at all.

Chrome, by contrast, is much more limiting in what you can do.  However, it’s API is a dream to work with.  In Chrome most extensions are either browser actions, which are browser-wide, or page actions, which only affect the current page.   Both of these are quite easy to write, but I’ll focus on browser actions since that’s what I wrote.

In addition to the two basic extension points, Chrome also provides a nice API for interacting with browser features such as bookmarks and tabs.  Like everything else in Chrome, these APIs are very simple and easy to use.

At a minimum, Chrome extensions are made up of HTML files and a manifest file written in JSON.  The manifest defines basic information like the name, version, description, icons, etc.

It also defines a “background page”.  A background page is a page that is loaded by the extension and runs constantly behind the scenes.  This is useful for storing state information and providing the core features of the plugin.

The manifest also allows you to define browser actions.  Browser actions define an image or button that appears to the right of the address bar and provides an entry point into your extension.  When you click on that icon a popup you create appears.

Here was the manifest for my plugin:

{
  "name": "Tab Bing!",
  "version": "1.1",
  "description": "This extension produces a 'bing' when a tab finishes loading.",
  "icons": { "128": "bell_128.png" },
  "background_page": "background.html",
  "browser_action": {
    "default_title": "",
    "default_icon": "bell_19.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "tabs"
  ]
}

The manifest file above defines the name, etc, of my extension.  It also says that the background page, background.html, will be loaded and run behind the scenes at all times.  Additionally, there will be a button to the right of the nav menu.  Clicking this button will show the popup, popup.html.

At this point all I need to do is create the files referenced and load the extension into Chrome.  Just for an example, here is the directory structure of my extension:

You can ignore the mp3 files and play.png file as they’re my extension’s assets.  Really, what I have is three very simple: manifest.json, background.html, and popup.html.

If I wanted to load my extension into my browser how I can do so by putting the extension tab into developer mode.  I do this by opening the extensions tab and clicking on the Developer mode link.

After that I can click on Load Unpacked Extension and simply choose the directory my extension is in.   At this point I can see my button appear next to the tool bar. Clicking the button shows a popup window containing the contents of my popup.html file.  It really doesn’t get much simpler than this!

Now that I have the basics of my Chrome extension in place I can start writing my extension’s features.

The way my extension works is to allow the user to indicate if they want the current tab to “bing” when done loading.  To support this I’ve created a simple popup that collects a few options from the user.  These options are stored by the background.html file that is persistent for the duration of the browser’s lifespan.

So, here’s my popup.html:

<html>
<head>
<style>
body{
	width: 300px;
	font-family: verdana;
}
</style>
<script>
	var background = chrome.extension.getBackgroundPage();
	var tab = null;
	var tabSettings = null;
	var previewedSound = null;
	// get the current tab
	chrome.tabs.getSelected(null, function(_tab){
		tab = _tab;
 
		insureElementExists();
 
		tabSettings = background.bingTabs[tab.id];
 
		// check the bing box
		document.getElementById("bing").checked = tabSettings.bing;
 
		// select the sound
		var sound = document.getElementById("sound");
		for(var i = 0 ; i < sound.options.length; i++){
			var option = sound.options[i];
			if(option.value == tabSettings.sound){
				sound.selectedIndex = i;
				break;
			}
		}
 
		// check the repeat box
		document.getElementById("repeat").checked = tabSettings.repeat;
	});
 
	function toggleBing(bing){
		background.bingTabs[tab.id].bing = bing;
	}
 
	function selectSound(sound){
		background.bingTabs[tab.id].sound = sound;
		preview(sound);
	}
 
	function toggleRepeat(repeat){
		background.bingTabs[tab.id].repeat = repeat;
	}
 
	function insureElementExists(){
		if(background.bingTabs[tab.id] == undefined){
			background.bingTabs[tab.id] = {
				bing: false,
				sound: "Bing",
				repeat: false,
				playing: null
			}
		}
	}
 
	function preview(sound){
		if(previewedSound != null){
			background.stop(previewedSound);
		}
		previewedSound = background.play(sound, false);
	}
</script>
</head>
<body>
<p>
	<input type="checkbox" id="bing" onChange="toggleBing(this.checked)" /> <label for="bing">Make this tab bing when loaded.</label>
</p>
<p>
	<label for="sound">Choose a sound:</label>
	<select id="sound" onChange="selectSound(this[this.selectedIndex].value)">
		<option value="Alarm">Alarm</option>
		<option value="Bing">Bing</option>
		<option value="Bleep">Bleep</option>
		<option value="DoorBuzzer">Door Buzzer</option>
		<option value="Rooster">Rooster</option>
		<option value="Siren">Siren</option>
		<option value="SmokeAlarm">Smoke Alarm</option>
		<option value="Whoop">Whoop</option>
	</select>
 
	<img src="play.png" valign="middle" onClick="preview(document.getElementById('sound')[document.getElementById('sound').selectedIndex].value)" />
</p>
<p>
	<input type="checkbox" id="repeat" onChange="toggleRepeat(this.checked)" /> <label for="bing">Repeat until the tab is selected.</label>
</p>
</body>
</html>

The first thing you may note is that this looks pretty much like any HTML file.  That’s because it is!  Take a look at the body and note that I’m using HTML form elements to define my popup. Heck, I even use CSS to format the popup!

Here’s what it looks like in the browser:

Looking at the JavaScript in the popup you’ll see that I have this line of code first:

var background = chrome.extension.getBackgroundPage();

This returns a reference to the background.html page.  Once I have this reference I can call functions on it.  Before I show that though, let me show you the code for the background.html:

<html>
<script>
	chrome.tabs.onUpdated.addListener(
		function(tabId, changeInfo, tab) {
			if(changeInfo.status == "complete"){
				if(bingTabs[tabId] != undefined && bingTabs[tabId].bing){
					if(currentTab != tabId && bingTabs[tabId].repeat){
						bingTabs[tabId].playing = play(bingTabs[tabId].sound, true);
					} else {
						bingTabs[tabId].playing = play(bingTabs[tabId].sound, false);
					}
				}
			}
		}
	);
 
	chrome.tabs.getSelected(null, function(tab){
		currentTab = tab.id;
	});
 
	chrome.tabs.onSelectionChanged.addListener(
		function(tabId, selectInfo){
			currentTab = tabId;
 
			stop(bingTabs[tabId].playing);
		}
	);
 
 
	var bingTabs = {};
 
	function bing(id){
		sound = bingTabs[id].sound;
		play(sound, false);
	}
 
	function play(sound, repeat){
		var audio = new Audio(sound + ".mp3");
 
		if(repeat){
			audio.loop = true;
		}
		audio.play();
 
		return audio;
	}
 
	function stop(sound){
		sound.pause();
	}
 
</script>
 
</html>

Not a very long script is it?  It’s entirely JavaScript too!

What this does, is make use of the Chrome extension API to listen for tab updated events.  When they occur it looks to see if that specific tab is set to bing.  If so, it bings by using the HTML 5 audio API to play an MP3 file.

Going back to the popup.html, when you check the checkbox to make the tab bing, the checkbox’s onChange event calls the toggleBing() function.  This toggleBing() function simply calls the background page and tells it to make that tab bing when done loading.

What I really think is cool about Chrome extensions are how quickly I got up to speed. It literally only took about half an hour and I was off to the races.  The Chrome extensions documentation is terrific to!  And once I had a working version I was able to quickly and easily make changes to add additional features. You do have to click reload in the extensions tab, but that beats the pants off reloading the entire browser with each change.

Additionally, with Firefox, it was really very difficult to publish the extension to addons.mozilla.com.  For Chrome it was as simple as uploading my extension’s folder to Google’s Chrome extensions website.

The biggest gripe I have, though, is that Chrome’s simplicity is also a little limiting.  I can’t completely change any feature within the browser.  But, in all honesty, I think it’s a good tradeoff for a much nicer user experience.

If you’re interested you can download my Tab Bing! Chrome extension here.

I figure that next I’ll make my Tab Bing! extension make the tab’s icon blink when a tab is loaded! What extensions would you create if you had the time and know-how?

As the title suggests, I have a – ahem – handy way to figure this out.  What I do is use my knuckles.  Specifically, there are four knuckles on each of your hand (excluding your thumb).  There are also four time zones in the US.   So, if you need to convert from one time zone or another, you simply choose the knuckle corresponding to the time zone and count up to the right and down to the left.  Here’s an image that helps demonstrate the concept:

The idea is that if someone asks you to attend a meeting at 3pm Pacific Time and you’re in Central Time, you simply start at the Pacific knuckle and count up to Central.  Thus, 3pm Pacific is 5pm Central.  And, vice versa.  If someone in Eastern Time suggests a 3pm meeting and you’re in Mountain Time, you start with the right-most knuckle and count down to find out that 3pm Eastern is 1pm Mountain.

For those of you who are naturals at figuring out time zone differences this may be a little less than useful.  For everyone else, I hope you enjoy!

And, while I’m on it, this idea came to me from a similar trick I use to figure out the number of days in each month.

What you do is start from your left-most knuckle and count months to the right.  In this case you count both the knuckles and the space between the knuckles.  So the left most knuckle is January, the first space is February, the second knuckle is March, etc.  (The last space and knuckle on your right hand isn’t used.)  Here’s an illustration:

Any knuckle-month has 31 days and any space-month has 30 days.  The only exception is February, which usually has 28 unless you’re in a leap year and it has 29.

What do you think?  Do you use any hand-based mnemonics?