I’ve been working on several projects in the past year or so that have required me to write some jQuery plugins and custom JavaScript widgets and I feel like several of them could definitely be useful for other developers. I’ve set a goal this year to release at least two projects to the community, but it’s tough to know which ones people will find most useful. Since it takes a little work to get a library to a place where it works under multiple scenarios and that’s even before the lengthy process of writing documentation, I thought I’d put it up to a vote to see what people would like to see and use. Whatever seems to have the most positive attention is what I’ll probably end up open-sourcing first.

Here are some of the things I’ve done that might make good open-source projects:

• A minimal MVC Framework
• An HTML5 line chart graphing library. My company is probably going to give me some time to get this done during the day, so you’ll probably see it either way.
• A jQuery HTML5 audio plugin with a complete flash fallback
• A JavaScript loader that loads JavaScript and CSS into the DOM using JavaScript build files. It allows you to pass the mode into the query string to either serve up the compressed / minified file, the individual development files or to throw an alert with the code you would need to paste into the terminal to minify the files using YUI
• A basic coverflow jQuery plugin

Those are all the ones I can think of at the moment. Is there any interest in seeing one or more of those? Just leave a comment and let me know.

Most of us can agree that spawning popups with JavaScript is usually a user experience FAIL. We’ve all been to websites that opened several popup ads. That is always something to avoid. Malicious and ad-happy sites have made it necessary for browser plugins and some browsers to block JavaScript popups altogether.

But there are some examples where popups are actually necessary. The main thing to remember when it does become necessary is to make the popup window a response to a user action. Usually a popup should be triggered by a clicking a link or a button rather than opening it on page load. That way the popup is not instantly perceived as an ad and closed by your user.

When using a popup does become necessary and you have exhausted every other options including more attractive modal windows and nothing works for the user interaction, the next concern becomes what to do when the popup is inevitable blocked.

The answer may look very similar to a progressive enhancement technique, but I wouldn’t consider it one since the browsers with a popup blocker enabled are often more advanced than those without.

We’ll start out making a very normal-looking link that targets a blank window to open the site inside of. That should look something like this:

<a href="http://google.com" id="googleLink" target="_blank">Go To Google!</a>

The link will totally work on its own without the aid of JavaScript, it will just open in a new window instead of a popup. Now let’s add the JavaScript. The event listener is written in jQuery, but feel free to rewrite it using your library of choice or none at all.

$('#googleLink').bind('click', function () {
   var popUp = window.open($(this).attr('href'), 'googleWindow',
   'width=600, height=300, scrollbars, resizable');
   if (!popUp || typeof(popUp) === 'undefined') {
      return true;
   } else {
     popUp.focus();
     return false;
   }
});

Popup blockers work by redefining the window.open() function. Part of the beauty of Javascript is that you can redefine literally any variable or object. If you even wanted to redefine the document object or the window object, you actually could. So the popup blockers will typically make the window.open() function return either null or undefined, which means that we can create the popup as a variable and then test to see if the variable actually returns as anything. If it does, we can assume that the popup opened and return false so that the link doesn’t fire off. If it doesn’t, we can return true to let the link do its work.

Here is a working example of the code above:

Go To Google!

As you can see, it’s fairly easy to detect popup blockers and react to them. Be careful with your new-found power. If I haven’t made myself clear, there’s nothing worse than a site with a bunch of popups.

In JavaScript, it is often useful to have a place to set and get configuration options. You can do this by just creating an object and updating it, but a global object is less secure because anyone using Firebug can log the object and see the entire thing. A getter / setter gets around that issue because it doesn’t expose any values unless they are specifically requested.

Another advantage of using a getter / setter is that it puts variables inside the local variable scope instead of exposing them to the global variable scope. Keeping the variables in the local scope speeds up the execution of the code because there is less to parse through in the global scope.

So, let’s make a reusable getter / setter class, shall we? Our class should look something like this:

/**
* @class
* @description A reusable class that extends a basic getter / setter
*/
var getterSetter = function () {

   var items = {};

   /**
   * @function
   * @param {String} get
   * @description Gets a param option and returns it
   */
   this.get = function (name) {
      return item[name];
   };

   /**
   * @function
   * @param {String} get
   * @param {Object} value
   * @description Sets a config option
   */
   this.set = function (name, value) {
       item[name] = value;
   };

};

To use the getter / setter we just created, we just need to do something like this:

// Create a new getter/setter called "config"
var config = new getterSetter();

// Set a config item called "myOption"
config.set('myOption', 'This is my option');

// Get the config option (this will alert the message "This is my option")
alert(config.get('myOption'));

There you have it. Now you have a getter / setter that you can use across your entire application.