(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
};
}));
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.
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-meanThursday, September 26, 2013
Knockout.js Gotchas
- Knockout's observableArray dependency tracking breaks if you bind with a call to sort,reverse, etc.
- 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.
- 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
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");
}
})
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
Friday, July 26, 2013
Backbone JS lessons learned ... Ongoing
- 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.
- 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.
- 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, ...
- 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.
- 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.
- 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?
Subscribe to:
Posts (Atom)