Thursday, October 17, 2013

Make your JQuery plugin loadable with Require.JS

A simple and easy way to make your JQuery plugin work in an AMD and NON-AMD context is the  following snippet. See how it cleverly uses the factory.

(function (factory) {
if (typeof define === 'function' && define.amd) {
    // AMD. Register as an anonymous module.
    define(['jquery'], factory);
} else {
    // Browser globals
    factory(jQuery);
}
}(function ($) {

    $.fn.jqueryPlugin = function () {
        // Put your plugin code here
    };  

}));
http://stackoverflow.com/questions/10918063/how-to-make-a-jquery-plugin-loadable-with-requirejs

JQuery Architecture

I found the following code example on JQuery's architecture and found it very helpful. One thing to note is the great use of ensuring JQuery is always called with a new instance. Relevant snippet is the following:
if (!(this instanceof foo))
      return new foo(arg);

(function() {
  var foo = function(arg) { // core constructor
    // ensure to use the `new` operator
    if (!(this instanceof foo))
      return new foo(arg);
    // store an argument for this example
    this.myArg = arg;
    //..
  };

  // create `fn` alias to `prototype` property
  foo.fn = foo.prototype = {
    init: function () {/*...*/}
    //...
  };

  // expose the library
  window.foo = foo;
})();

// Extension:

foo.fn.myPlugin = function () {
  alert(this.myArg);
  return this; // return `this` for chainability
};

foo("bar").myPlugin(); // alerts "bar"
http://stackoverflow.com/questions/4083351/what-does-jquery-fn-mean

Thursday, September 26, 2013

Knockout.js Gotchas


  1. Knockout's observableArray dependency tracking breaks if you bind with a call to sort,reverse, etc.
    1. Therefore don't do things like data-bind="foreach items.sort()", you instead bind normally with sortedItems() and then create a computed property sortedItems that sorts items. Be careful though this technique will sort items in place and not just the new computed property sortedItems.
    2. http://stackoverflow.com/questions/18729643/ko-observablearray-update-breaks-when-binding-with-sort

Friday, August 30, 2013

In Search of an Understandable Consensus Algorithm with CoreOS

http://coreos.com/

http://www.engadget.com/2013/08/22/coreos-looks-to-grab-piece-of-the-server-market-using-chromeos/

In Search of an Understandable Consensus Algorithm

JQuery UI slider with more than 2 handles

$('#slider').slider({min: 1, max: 100, values: [0, 3, 15, 25],
    slide: function(event, ui) {
        var index = $(ui.handle).siblings('a').andSelf().index(ui.handle);
        var values = $(this).slider('values');
        return (index == 0 || ui.value > values[index - 1]) &&
            (index == values.length - 1 || ui.value < values[index + 1]);
    },
    stop: function( event, ui ) {
        alert("VAL 1=" + ui.values[0] + "/n" + "VAL 2=" + ui.values[1] + "/n" +"VAL 3=" + ui.values[2] + "/n" +"VAL 4=" + ui.values[3] + "/n");
    }
})

Monday, July 29, 2013

Awesome Ruby Stack with Vagrant

Environment 
http://www.vagrantup.com/ + vmware = Provisioning of your development environment

https://puppetlabs.com/ - automate installation of needed programs

https://github.com/capistrano/capistrano for deploying ruby code

Ruby Servers
nginx
unicorn

Friday, July 26, 2013

Backbone JS lessons learned ... Ongoing


  1. Two major frameworks to consider, Chaplin and Marionette help give you guidelines when building applications in Backbone. After using both I like Marionette the most especially for the way it manages the screen with Regions and Layouts.
  2. When developing widgets in Backbone you will most likely want to the sync the Model when the view changes and the reverse when the model is updated. Think this through very carefully I have seen many bugs in this type of logic.
    1. One bug occurred when a developer built widgets that would get themselves into a circular event firing loop. He unknowingly did this by listening to the change event on the element, the issue arose because this same view listened to model change events. The model would be fetched and fire a change event which would update the view. Then the change event on the element would fire causing the model to update and so on ... Initially he solved this by checking if the value on the model was different than the value on the element. This got around the issue, but the issue could be avoided by not listening to change events on the element. Instead we should listen to user events on the element like onBlur, ...
  3. Decide early on how you are going to handle the loading part of the application, will widgets simply listen to change events and render when the data comes in, sort of having them pop up when available. Another approach is explicitly showing a loading sign while all the ajax calls are fetching models and collections.
  4. If you are going to need to relate your models and collections you will most likely pick between backbone relational and backbone associations. Be aware that if you pick backbone relational you will only be allow one model with the same id per type. In order to fix this you will likely have to call YourModelType.findOrCreate throughout your code instead of simply instantiating a new model. TODO I need to look into how backbone associations handles this problem.
  5. Routing across your application should also be well thought out. Are you going to need to programmatically navigate from one page of your application to another. Also think about your handling of where your javascript is deployed, will you need to know the context path in order to route properly?