Event delegation in Backbone views

I ran into an issue recently on a project using Backbone.js. It’s a great library but I ran into some unexpected behavior when binding events. I’ve submitted this pull request but if you’re having difficulty binding events to Backbone views (v0.5.3) this info may help you out.

If you attempt to do something like this:


function btnClick(){
console.log(':(');
//BTW I DO exist
}
var v = Backbone.View.extend({
el : "#page",
events : {"click .btn" : btnClick}
});

You will get this error:

line :958 of backbone-0.5.3.js
Uncaught Error: Event "function btnClick(){
console.log(':(');
//BTW I DO exist
}" does not exist

This error is particularly odd because it shows you the function body you want and then claims it doesn’t exist. I’m pretty sure we can all agree that it does exist which is why I think this may just be a oversight. Especially considering that the fix I submitted is only a half a line long. This minor modification to line 958 opens up more possibilities.

- var method = this[events[key]];
+ var method = this[events[key]] || events[key];

With this modification you can use a function confided to a clouser:

(function(){
function btnClick(){
console.log("You'll never overwite me :)");
}
var v = Backbone.View.extend({
el : "#page",
events : {"click .btn" : btnClick}
});
})();

Or you could use functions from some preferred library, directly without over complicating things.

this:
var v = Backbone.View.extend({
el : "#page",
events : {"click .btn" : theBestLibraryEver.awesome }
});

or this:
var v = Backbone.View.extend({
el : "#page",
events : {"click .btn" : "extraneous" }
extraneous : function(){
theBestLibraryEver.awesome.apply(this, arguments);
}
});

Which is your choice?

Advertisements
Posted in Uncategorized | Leave a comment

US Boogie

I’ve been playing with the amazing D3 library lately. There are some mind blowing visualizations in the examples folder in the github repo. I’m going to work a lot of these into a fork I have of hummingbird. Stay tuned. But for now how about a quick peek at how you might display traffic variations from a norm broken down by US states.

The example simulates a metrics feed by altering the metric for each state by walking the data point up to +-5% each 200 milliseconds. A state with a metric that is trending below target will be smaller and less saturated, over target the opposite.

Posted in Uncategorized | Leave a comment

How to SSH when you can’t normally SSH

Many corporate firewalls block port 22, the normal port for SSH. But if you control the server that you want to SSH into you may have an option. Take a look at this chart of TCP and UDP port numbers and find one that may be open to you. (hint: There’s a good chance some of the ports for chat protocols are open 1503, 5190, 5050, etc. )

Armed with the knowledge of an open port you can now reconfigure SSH on your destination server to listen on that port. Sorry, but you’ll have to do that from outside your corporate jail. Log into your server with a user that at least has sudo privileges. You’ll need to modify the config file for your SSH daemon and then restart the service.  On an recent Ubuntu box you can edit the config with nano using this command:

sudo nano /etc/ssh/sshd_config

Add individual ports one line at a time to the config file like so:

Port ####

The head of the config file should look something like this after your done:

# Package generated configuration file
# See the sshd_config(5) manpage for details

# What ports, IPs and protocols we listen for
Port 22
Port 5190

Restart your SSH daemon  by hitting it with a:

sudo /etc/init.d/ssh restart

Then test it out

ssh username@YOUR_HOST_OR_IP -D YOUR_NEW_SSH_PORT

That should do it. Have fun with your new found freedom.

Posted in Uncategorized | Leave a comment

Introducing, the Kraken

So, this article, Consultant to ‘Vampire Squid of Expert Network Firms’ Questioned by FBI, got a lot of attention at work recently. Ever since reading it I’ve had an image stuck in my head of “a vampire squid on steroids” which kinda looks like this guy.

Luckily I’ve been interested in Raphaël lately and this was the perfect inspiration for a project.  The Kraken was the result of this project. I created a user script that you can drag and drop into Chrome to install. Once installed on ANY web page the key combo [cntrl]+[shift]+Z will
summon the Kraken. Enter a jQuery selector into the input area, hit [enter],
and then…

The Kraken be smackin’ your DOM.

 

Kinda like this

Posted in Uncategorized | 1 Comment

A 5 minute pitch for node.js

I’ve been doing some HTML 5 development lately and was groaning about lack of server side support for Websockets when a college suggested I look at Node.js …

Node’s goal is to provide an easy way to build scalable network programs. …Node will show much better memory efficiency under high-loads than systems which allocate 2mb thread stacks for each connection. Furthermore, users of Node are free from worries of dead-locking the process—there are no locks. Almost no function in Node directly performs I/O, so the process never blocks.  Node.js

To keep this to the 5 minutes promised in the title, these 3 articles sold me on the potential of Node.js :

5 minutes later I finished my first node.js script that did exactly what I needed. And honestly more than half the 32 lines are comments:

/*
This script will tail (following) a file and stream new data out to clients
connected  via a WebSocket. The file to tail and the tcp port need to be
specified when launching this process:

Usage: node tail2socket.js MY_LOG_FILE 8000

This uses miksago's node-websocket-server
https://github.com/miksago/node-websocket-server

NOTE: As of 2010-10-20 the WebSocket spec and this library are in active
development. If this code doesn't work check for updated lib and browser.

*/
var ws = require('./lib/ws');
var tailFile = process.ARGV[2];
var port = process.ARGV[3];
var spawn = require('child_process').spawn;
var eachLine = /^(.*)$/mg;
var server = ws.createServer();
     server.listen(port);
var tail = spawn("tail", ["-f", tailFile]);
  tail.stdout.on("data", function(data){
  var line = String(data).match(eachLine);
  if (line && line.length){
    for (var i = 0 ; i < line.length; i++){
      server.broadcast(line[i]);
    }
  }
});
Posted in Uncategorized | Leave a comment

Become your own webmaster

Do you know how Google see your website? If your answer was “No” then you’ll want to read on… You can use Google Webmaster Tools to find out all kinds of information about your site like:

  • Google’s crawl rate
  • crawl errors
  • Links to your site
  • Subscriber stats
  • Keywords leading to your site

To get started log in to your Google account or create a new account. Then go on over to Google Webmaster Tools and click on “Add a site” and enter the domain name of your site:

Click on continue and you’ll be presented with options to prove that you own your domain. Just claiming that you are the owner isn’t enough, which you’ll appreciate in a few minutes, considering that you don’t want your competition to lay claim to your domain. The 2nd (metatag) and 3rd (html) options are best suited for smaller sites because they are simple and can be completed in a few minutes. The 1st option (DNS) is better suited for a larger site but more on that in the details to follow.

Metatag

Choosing the metatag option will reveal a snippet of code that you need to copy and paste into your home page.  Once you’ve published that change on your site push the verify button and Google will check your site to confirm you as a webmaster!

HTML file

This option is comparable to the meta tag option but it’s probably easier to manage multiple webmasters this way. Each webmaster will get a unique file that verifies them as a webmaster.

DNS record

The DNS record option is certainly the most technical of all the options. But if you have a corporate website that needs to promote through Development, QA , Staging and  Live environments then you will appreciate this option. The keys that Google generates are tied to the fully qualified domain (i.e. qa.example.com and  staging.example.com would need different keys) Multiple that by each Google account that wants to be webmaster and you’re into a key management nightmare with the metatag or file options.  With the DNS option your code is free of keys so packaging and deployment are easier. You’ll need to get the team that manages your DNS involved but you can pretty much copy and paste the “Other” option instructions into an email to them and you should be all set.

Posted in Uncategorized | Leave a comment

Mega Map feed

 

I had a whiteboard session today which produced this:

Now for the fun part….

Posted in Uncategorized | Leave a comment