<jga.me/>

javascript

If you've used jQuery before, you are probably familiar with the extend function. If you need to be reminded... the gist of it is that you can extend an object with another object. For example, if you had a plugin that had some defaults (delay: 3000, auto: true) and you wanted to allow for developers to override them (delay: 5000), you could take in an options object and combine the two objects (delay: 5000, auto: true). Aug is a tiny (354 bytes) library that will let you do that without jQuery. I've modeled the syntax to be identical to jQuery. I've also added the ability to augment javascript classes (adding to the prototype). Here are some examples:

Examples

//Great for overriding defaults
var a = { a: 1 };
var b = { a: 2, b: 3 };
aug(a, b); //a = { a: 2, b: 3};

//Combining two objects without overriding
var a = { a: 1 };
var b = { b: 3 };
var c = aug({}, a, b); //c = { a: 1, b: 3};

//Extending a prototype
var Class1 = function() { };
Class1.prototype.test = function() {
        return 0;
};

aug(Class1, {
        test2: function() {
                return 5;
        }
});
var c = new Class1();
c.test(); //returns 0;
c.test2(); //returns 5

Playgroud

If you want to try out aug. Check out this jsfiddle.

Downloads

You can grab the library here or check out the source in github.

For you nerds, the library has AMD and node.js support.

Node

npm install aug
Leave a comment

In my previous projects, whenever I needed to add cookie support, I would copy and paste the same three functions over and over again. Now that I've been using ender for all my dependency management, I'm able to stop my copy and pasting and start building out some standalone modules.

Cookie Monster is a very simple library that has only three methods: set, get and remove. All are pretty self explanatory. Here is the usage and example:

Usage:

monster.set(name, value, days, path) //days and path are optional
monster.get(name)
monster.remove(name)

Example:

//set a cookie named 'cookiename' to '123' for 1 day
monster.set('cookiename', '123', 1);
//set val to '123'
var val = monster.get('cookiename');
//remove it
monster.remove('cookiename');

Ender:

ender build cookie-monster 

Download

Dev | Prod | Github

Leave a comment

Want to play around and see a live demo of resistance? Check this out on jsbin: http://jsbin.com/uboquz/4/edit.

In case you missed my post on my javascript async flow control library, go here.

Leave a comment

The async nature of javascript is awesome at times and awful at times. For those awful times there are libraries to help ease the pain. Async.js is an great library that has all kinds of different flow control methods. The only problem is that it was complete overkill for 99% of the use cases that I had. On top of that, I wanted to use it in the browser and all those extra functions that I was never going to use would be wasted bytes that would be downloaded by the user. So... if an existing library doesn't fit your needs, write your own.

Resistance is a tiny (463 bytes, 298 bytes gzipped) library that gives you the two most used, at least for me, flow control functions: series and parallel.

Here's where to check it out:
Live Demo (JSBin) | Download (Dev) | Download (Prod) | Github
node: npm install resistance

Here's what it looks like:

//Test Function A
var testA = function(cb) {
  setTimeout(function() {
    console.log("Test A Complete");
    cb();
  }, 500);
};

//Test Function B
var testB = function(cb) {
  setTimeout(function() {
    console.log("Test B Complete");
    cb();
  }, 500);
};

R.series([
  testA,
  testA,
  testA
  ], function() {
    console.log("Series Complete");
});

R.parallel([
  testB,
  testB,
  testB
  ], function() {
    console.log("Parallel Complete");
});

When you run it, you'll see this in the console:

  • Test A Complete - 1st call from series (500 ms)
  • Test B Complete - 1st call from parallel (500 ms)
  • Test B Complete - 2nd call from parallel (500 ms)
  • Test B Complete - 2nd call from parallel (500 ms)
  • Parallel Complete - All of parallel functions have finished (500 ms)
  • Test A Complete - 2nd call from series (1000 ms)
  • Test A Complete - 3rd call from series (1500 ms)
  • Series Complete - All of series functions have finished (1500 ms)
Leave a comment

I've finally gotten around to writing an example app for fidel. Using flickr's jsonp endpoint, I've created a simple flickr search app using fidel. Hopefully this will better show how easy it is to create web apps with fidel.

Here's a preview: Flickr Search with Fidel

View the Demo | View the Annotated Source

Leave a comment

Fidel is a small library for building out ui components (widgets, modules, plugins, whatever you want to call them). It looks very similar to backbone.js and spine.js's controller. I tried both backbone and spine and what I found is that i only ended up using the controller logic and very little of the model and routing side. So, in the spirit of the micro js movement, I have created a standalone controller library.

You'll need a library like ender, jquery or zepto to provide some of the magic behind the scenes and if you are using ender, you can add fidel by running: ender add fidel

Here are the source/docs: github

You can download the latest version here: dev / min

var FlickrSearch = Fidel.extend({
  elements: {
    'photos': '.photos'
  },
  events: {
    'searchOnEnter': 'keypress .searchBox input'
  },
  templateSelector: "#PhotoTemplate",
  init: function() {
    if (this.initialSearch)
      this.search(this.initialSearch);
  },
  searchOnEnter: function(e) {
    if (e.keyCode != 13) return;
    var query = this.searchBox[0].value;
    this.search(query);
  },
  searchAction: function() {
    this.search(this.searchBox[0].value);
  },
  search: function(query) {
    var self = this;
    this.searchBox[0].value = query;
    this.searchBox[0].select();
    this.photos.html("&lt;div class='loading'&gt;Searching Flickr...&lt;/div&gt;");
    $.ajax({
      url: 'http://api.flickr.com/services/feeds/photos_public.gne?format=json&amp;jsoncallback=flickSearch&amp;tags='+escape(query),
      type: 'jsonp',
      success: function(resp) {
        self.render(resp, self.photos);
      }
    });
  }
});

You can check out the demo here

Leave a comment

Categories

Recent Posts