diary @ telent

backbone.js 1 0 jQuery#

Sun Jan 29 21:04:06 2012

I've spent a few hours over the last couple of days figuring out how to use backbone.js, and so far I'm impressed by it: it solves a real problem elegantly and doesn't seem to have an entire religion bolted onto the side of it.

5 minute summary: it introduces models (and collections of them) and views to client-side javascript, and connects them with a publish/subscribe event notifier system so that when you make changes to a model all the views of it update without your having to remember to do anything to them.

A Model is an object that knows how to update itself from a Rails-y "REST" server (scare quotes, because as we all know these days REST isn't what you think it is ), and publishes its attributes using the methods set and get. 

	var m=find_me_a_model();
	var selected= (m.has('selected')) ? m.get('selected') : false;
	m.set({selected:  !selected});

Calling set will, if the value has changed, trigger a changed event handler to be called in all objects which have bound to it. These objects are usually Views.

A View is an object with a render method and an el attribute, and in which calling the former creates a piece of DOM tree in the latter, which you can then attach to your document somewhere 

MyApp.Views.ThingView=Backbone.View.extend({
    initialize: function() {
	this.model.bind("all",this.render,this);
	this.render();
    },
    // ... this is not working code - I missed out some important bits ...
    events: {
	"click li" : "do_select",
    },
    do_select: function(e) { ... },
    render: function() {
	var ul=$(this.el);
	ul.html(some_html_for(this.model));
        return this;
    }
})

jQuery(document).ready(function() {
     var myView=new MyApp.Views.ThingView();
     $('#some_element').append(myView.render().el);
});

Collections are provided too. They come with a large number of iteration functions (map, filter, reduce, all that stuff) which makes them really rather useful, and you can build Views of them in much the same way as you can build views of models.

(To complete the completion, there's also a Router, which is an interface for monkeying around with the URL so you can build bookmarkable client-side apps. But I haven't had to use that yet)

As you see in the example above, the view can also take a hash of events which is registered with jQuery using its delegate method. In this case we're asking to have do_select called whenever a click event is received on any li element inside it. Great!

Not so great when it unexpectedly doesn't work, though. Specifically, jQuery drag/drop events don't work with jQuery's delegate method, and there's nothing in the documentation on either page to stop you wasting an afternoon finding this out. Way to go. For more details on just how much hysterical raisins mess is involved with jQuery event handlers, see the pages for on and live - look upon these works, ye mighty, and despair.

js is here There's a Ruby gem for using it with Rails: add rails-backbone to your Gemfile, and you get a handy set of generators which write Coffeescript for you. (A brief inspection of the result says that this is a good thing because there's no way on earth I'd want to write that stuff myself. But I concede, significant whitespace is a valid personal preference, just not one of mine.)

ANN Twitling: a Twitter link digest tool#

Wed Feb 1 11:54:57 2012

Problem: I can't keep up with the Internet

I often check Twitter on my phone. When I see tweets with links in them I tend to skip over them intending to return later when I'm on a computer with a full-size screen, and then forget about them either because I find something else to look at or I can't be bothered with scrolling all the way down again. And looking through old tweets is nearly as bad on the full-size twitter web site as it is in a mobile client.

Proposed solution: I need a computer program to read the Internet for me

Thus, Twitling: a small script consisting of Ruby and Sinatra and OmniAuth and the Twitter gem and Typhoeus to grab links in parallel, the function of which is to read one's timeline and display the resolved URL, the title and an excerpt from the text of each link that was posted. Source code is on Github.

I haven't really used it myself yet in anger: the first thing I notice while testing it is that there are a whole lot more links in my feed than I thought there were, and the original plan to produce a 24 hour digest might become very unwieldy.

Possible further development ideas include

Try not to break it, please.

Sharpening the sawfish#

Wed Feb 22 19:25:20 2012

My son is two weeks old today. I don't usually go a bundle on putting personal info on the public web - I keep that for Facebook, where they at least pretend to keep it private for me - but I mention this to explain why I'm using my laptop a lot more than my desktop lately.

The problem with my laptop is the mouse pointer. It's one of those pointing stick devices technically known (apparently) as an isometric joystick and more commonly known as a nipple , and when the room is warm the little rubber cap gets slippery very quickly. So I decided to invest a little time in a few keyboard shortcuts.

As an Emacs user I know I'm supposed to like tiling window managers, but I don't. My editor windows are windows onto text files that may be any size and shape but in which it's a fairly safe bet (see "locality of reference") that the spot I want to edit next is usually spatially close to the spot I'm currently looking at. The other 'windows' on my screen are things like web browsers and GUI programs where there's no such guarantee, and the only way to make them work is to allow them to take the size and shape that their authors wanted them to have. So after a brief experiment with awesome I punted it and went looking for a programable window manager that was designed for overlapping windows.

And ended up back with Sawfish, which I used to use back when it was fashionable. Sawfish customization is a two-phase process: first you write commands in Lisp, then you use the sawfish-ui program to assign them to keystrokes. A bit like Emacs, really, and perhaps not surprisingly.

First I needed some shortcuts to focus particular windows (Emacs, Firefox, xterms). Happily, someone has done the work for this already: I just had to download the Gimme script and set up bindings for it

Then I needed something to chuck windows around the screen. The requirement is pretty simple here: every window on my screen is aligned against an edge, so I just need commands to pan a window to each edge. Here is the finished script in which the points I would like to draw attention to are

And that's about it. Put the file somewhere that sawfish will find it - for me, ~/.sawfish/lisp seems to be a good place - add the lines 

(require 'gimme)
(setq warp-to-window-enabled t)
(require 'throw-window)

to .sawfishrc, and then set up your keys in sawfish-ui. I assigned them to Windows-key shortcuts: at last, I have a use for the Windows key.

If you hadn't spotted in amongst all that, I have githubbed my dotfiles. More for my convenience than for your edification, but feel free to rummage. If you are one of the three other remaining XTerm users, have a look at the XTerm*VT100*translations in my .Xdefaults - I stole that "press Shift+RET to background the command" trick from Malcolm Beattie nearly twenty years ago and have been using it ever since.

⟪ Jan 2012 Mar 2012 ⟫