• JavaScript: The Good Parts by Papa Crock
• High Performance Web Sites by Steve Souders
• Even Faster Web Sites by Steve Souders
• High Performance JavaScript by Nicholas C. Zakas
• Professional JavaScript for Web Developers by Nicholas C. Zakas
• Pro Javascript Techniques by John Resig
• Secrets of the JavaScript Ninja by John Resig

If you're totally new, these probably aren't the best books to dive into, but I still recommend picking up JavaScript: The Good Parts. It's amazing reading, really gave me a much better understanding of the language, and incredibly dense.

Recently I did a post on Data Binding in JavaScript using the YUI3 Library as my base. h3 and MikeInVB wanted to see it in jQuery, so I rewrote it and it turns out is a great example of PubSub (publish / subscribe) for jQuery.

For this example, we're using an object named DB, which is short for DataBind. Basically it's an object with getters and setters.

 
  var DB = function (data) {
      this._d = null;
 
      this.set = function (data) {
           this._d = data;
      };
 
      this.get = function () {
          return this._d;
      };
 
      this.set(data);
  };
 

Really, this is just an abstracted way to store data. To create an instance of it, set it and get the value back, we would do something like:

 
var myData = new DB();
myData.set("We can't fight in here, this is a war room!");
console.log(myData.get();) // "We can't fight in here, this is a war room!"
 

But lets say, we want to subscribe to this data object, and be notified whenever it changes. Instead of polling it and checking to see if the value is the same as last time, we can use jQuery's custom events to trigger a custom event.

 
  var DB = function (data) {
      this._d = null;
 
      this.set = function (data) {
           this._d = data;
           // notify all subscribers when this function is used
           $(this).trigger("change");
      };
 
      this.get = function () {
          return this._d;
      };
 
      this.set(data);
  };
 

Now, we can subscribe to it like this:

 
$(myData).bind("change", function() {
     alert("The data was changed!");
});
 

Additionally, we can access that data in our handler:

 
$(myData).bind("change", function() {
     alert("My data was set to " + myData.get());
});
 

You can set up any number of subscribers to myData this way now, and they'll be triggered when that instance is set().

If you want to further improve DB, you can add a function to make it easier to attach change events, jQuery style:

 
  var DB = function (data) {
      this._d = null;
 
      this.set = function (data) {
           this._d = data;
           // notify all subscribers when this function is used
           $(this).trigger("change");
      };
 
      this.get = function () {
          return this._d;
      };
 
      // shortcut for functions trying to bind to the change custom event
      this.change = function (fn) {
          $(this).bind("change", fn);
      };
 
      this.set(data);
  };
 

With our new shortcut, we can subscribe to it like this:

 
var alexSez = new DB();
alexSez.set("Initiative comes to thems that wait.");
alexSez.change(function() {
    alert("Alex says: '" + myData.get() + "'");
});
alexSex.set("Welly, welly, welly, welly, welly, welly, well. To what do I owe the extreme pleasure of this surprising visit?")
// an alert will come up that says "Alex says: 'Welly, welly, welly, welly, welly, welly, well. To what do I owe the extreme pleasure of this surprising visit?'".
 

In the same way, you can set up two input boxes to "share" the same value by subscribing to a shared instance of DB like this:

 
<input type="text" id="in1"/>
<br/>
<input type="text" id="in2"/>
 

 
  var myData = new DB();
 
  var inputs = $("#in1, #in2");
  myData.change(function() {
      inputs.val(myData.get());
  });
 
  inputs.bind("keyup", function(ev) {
      myData.set($(ev.target).val());
  });
 

Ta da!

If you're still interested in PubSub for jQuery, I recommend checking out Jamie Thompson's example using the $(document) namespace instead of specific object instances, or Peter Higgin's jQuery.pubsub, which reportedly is significantly faster, although doesn't allow object specific subscribing.

Demo: PubSub in jQuery

What do you think? Would you do this differently? Leave a comment, I read them all!

Back when I was in Flex land one of the things that I found to be really neat was data binding... you could essentially have widgets that would update if the data updated automagically. I also wanted to take a stab at doing publishing and subscribing in YUI3, so built this an object called DB, which stores data. It can do three things, it can set() data, it can get() data, and it's an EventTarget, so you can subscribe to it's change event:

 
var DB = function (data) {
    this._d = null;
 
    this.publish("change",{emitFacade: true});
 
     this.set = function (data) {
         this._d = data;
         this.fire("change");
      };
 
      this.get = function () {
          return this._d;
      };
 
      this.set(data);
};
 Y.augment(DB, Y.EventTarget);
 

And to instantiate an instance of DB you just do var myData = new DB();, and then you can subscribe to it any number of times to be notified when the data has been updated. For example:

 
<input type="text" id="in1"/>
<br/>
<input type="text" id="in2"/>
 

 
var myData = new DB();
var inputs = Y.all("#in1, #in2");
myData.on("change", function() {
    inputs.each(function(node) {
        node.set('value', myData.get());
    });
});
 
inputs.on("keyup", function(ev) {
    myData.set(ev.currentTarget.get('value'));
});
 

This code is pretty simple. In YUI3 it creates an instance of DB, which has it's own private data (unset initially), subscribes to the change event with a function that updates both text inputs on the page if myData gets set(), and then binds to the keyup event on the text inputs to call myData.set() whenever the contents of either text input has something typed into it. This results in a page where both inputs update whenever you type into either one.

See the demo here: Data Binding in JavaScript

Is this useful? Practical? UnJavaScripty? I don't know, but I'd love to hear what you think

 
It's been <%= (new Date()).getTime() %> milliseconds since the epoch.
 

Which, if you're like me is great. You could use Google Closure Templates, which probably is faster, but then you would have to precompile your templates, which is a pain.

The only problem I personally had with the Resig solution was that if you tried to call a variable that didn't exist within your data object, it would fail horrifically, so I modified it slightly to be slightly more forgiving:

 
  // JavaScript templating a-la ERB, pilfered from John Resig's
  // "Secrets of the JavaScript Ninja", page 83.
  // Single-quote fix from Rick Strahl's version.
  _.template = function(str, data) {
    var fn = new Function('obj',
      'var p=[],print=function(){p.push.apply(p,arguments);};' +
      'with(obj){p.push(\'' +
      str.replace(/[\r\t\n]/g, " ")
         .replace(/'(?=[^%]*%>)/g,"\t")
         .split("'").join("\\'")
         .split("\t").join("'")
         .replace(//g, "',(typeof($1)!='undefined') ? $1:'','") // modified to allow undefined variables pass through
         .split("").join("p.push('")
         + "');}return p.join('');");
    return data ? fn(data) : fn;
  };

The 12th line where it says .replace(//g...) includes a test for the data that is being passed into the function that's being created to output just an empty string if the variable is undefined.

This is in response to Daniel Barreiro's post on putting DataTables in DataTables:

http://www.yuiblog.com/blog/2010/03/17/using-nested-datatables-for-row-expansion/

Credit: my coworker Jason R. Smith.

Pretty slick, if you ask me. Normally I'd take the JSONP results and have a JavaScript templating engine like John Resig's Micro-Templating. If you use Yahoo's sanitize function, you can even make the HTML safe to insert via innerHTML, even though innerHTML is evil.

As it gets easier to do HTML layout without markup hacks, I see this approach becoming more common. Get the markup you want, with the metadata you need.

For example:

page = Page(u"Example Page")
page.append(Tag(u"examples"))

from sqlalchemy import *
from sqlalchemy.orm import *
engine = create_engine('sqlite://')
metadata = MetaData(engine)
 
#engine.echo =True 
 
page_table = Table("page", metadata,
    Column("id", Integer, Sequence('page_seq_id', optional=True), primary_key=True),
    Column("name", Unicode(100), nullable=False),
)
 
tag_table = Table("tag", metadata,
    Column("id", Integer, Sequence('taq_seq_id', optional=True), primary_key=True),
    Column("name", Unicode(50), nullable=False, unique=True),
)
 
pagetag_table = Table("pagetag", metadata,
    Column("id", Integer, Sequence('pagetag_seq_id', optional=True), primary_key=True),
    Column("pageid", Integer, ForeignKey('page.id')),
    Column("tagid", Integer, ForeignKey('tag.id')),
)
 
class Tag(object):
    def __init__(self, name):
        self.name = name
 
    def __repr__(self):
        return "Tag(\"%s\")" % self.name
 
class Page(object):
    def __init__(self, name):
        self.name = name
 
    def __repr__(self):
        return "Page(\"%s\")" % self.name
 
mapper(Tag, tag_table)
mapper(Page, page_table, properties = {
    'tags':relation(Tag, secondary=pagetag_table, cascade="all"),
    #    'tags':relation(Tag, secondary=pagetag_table, cascade="all,delete-orphans"),
})
 
metadata.create_all()
 
sess = create_session()
 
page = Page(u"Tags with SQLAlchemy Example")
page2 = Page(u"Hot New Video Game Consists Solely Of Shooting People Point-Blank In The Face")
page3 = Page(u"Congressman's War Hero Son Would Have Wanted Highway Bill Passed")
 
tag = Tag(u"examples")
tag2 = Tag(u"onion")
 
page.tags.append(tag)
page2.tags.append(tag2)
page3.tags.append(tag2)
 
sess.add(page)
sess.add(page2)
sess.add(page3)
sess.flush()
 
tag_q = sess.query(Tag)
tags = tag_q.all()
print "Number of tags:", len(tags)
 
# filter pages by tag(s)
page_q = sess.query(Page)
pages = page_q.join('tags').filter_by(name=u"tag").all()
 
print
print "First Page"
print page_q.first()
print page_q.first().tags
 
print
print "Second Page"
print page_q.all()[1]
print page_q.all()[1].tags
 
print
print "Third Page"
print page_q.all()[2]
print page_q.all()[2].tags
 
# delete-orphans does the work for us here...
#sess.delete(pages[0]
#sess.flush()
 
print
print "All tags"
tags = tag_q.all()
print tags, "Count:", len(tags)
 
print
print "Tag cloud anyone?"
# see the source code linked below for a properly weighted tag cloud.
tag_q = sess.query(func.count("*").label(u"tagcount"), Tag)
tag_r = tag_q.filter(Tag.id==pagetag_table.c.tagid).group_by(Tag.id).all()
#print tag_q
print tag_r
 
# what about pages with related tags?
page_q = sess.query(Page)
 
taglist = [u"tag1", u"tag2"]
tagcount = len(taglist)
page_q.join(Page.tags).filter(Tag.name.in_(taglist)).\
group_by(Page.id).having(func.count(Page.id) == tagcount).all()

I know tag clouds are passe, but I still think from an information architecture perspective, tags still better than categories.

I for one love reading Reddit and sometimes Digg, but I find it to be somewhat a sinkhole. Sure it's funny to read about how someone destroyed their finger with magnets or see a cute picture of a coyote on the BART, but from a learning perspective, I'd be better off spending my time on hacker news.

So to that end, I'm modifying my host file to give up reddit for lent. Who knows, maybe instead of removing the entry after lent, I'll add more instead.

Here's how you can do it too:
Windows | OSX | Linux

I'm bummed out. My old friend, Phil passed away last monday and I missed the get together this last weekend because I've been off the social grid these past months. The above photo is probably the best picture I took in high school, and was used to create a flyer for the Rollcall parties I helped (in a small part) to throw with Phild0g. This picture was taken in the desert, a home away from home for all of us.