I make the www


Oct 8, 2014
@ 10:08 pm

Extending Backbone.View

When you build a few applications with Backbone.js, you quickly realize its strengths and weaknesses. This post is about one of its main weaknesses: views.

Views in Backbone are great when you’re dealing with a handful, two or three. But as soon as your app scales to include several different views, things can get a little dicey when it comes to memory management.

One big caveat in Backbone is that it doesn’t do a great job of completely cleaning up views that have been ‘removed’ from the DOM. Some developers refer to this as ‘Zombie Views’. Have you ever been clicking around in your app and suddenly see a view you believed to have been discarded reappear? THAT is a Zombie View; lurking in your application hanging on to memory, sucking down your applications precious resources.

SO, what’s happening here? 

The answer is, Event Binding. In more detail, the bound events between objects in your application are not properly getting cleared or unbound when you’re removing elements from the DOM. Now, If you want a (really great and) detailed explanation about what’s going on please DO read this article.

Here’s one way I’ve been able to get around this issue. By extending Backbone’s View prototype to include a custom ‘close’ method. Here’s some example code.


//extend the View prototype like so...
Backbone.View.prototype.close = function() {
    
  //'this' is the view instance
  //check out the docs for undelegateEvents
  this.undelegateEvents();
  
  //here's where you can define any custom onclose logic
  //this is great for triggering animation or 
  //transitioning prior to removing the view
  if (this.onClose) {
    this.onClose();
  }
  
  //return the view instance for chaining purposes.
  return this;
};

That’s it really. You could even add the ‘remove’ function call in here as well. I don’t explicitly call ‘remove’ inside of ‘close’ because I want to be able to have views fade out or animate out in interesting ways prior to being fully removed. I’ve also used the ‘onClose’ method to trigger ‘close’ on any child views. This is a great way to handle properly closing all parent child views on entire pages during page ‘state’ transitions.

Thoughts?

Jw.


Jul 31, 2014
@ 11:01 am

Great background tracks… TRACKLISTING:

Commodity Place- Walking Lost into The Fog- (Còclea Music)
D.Dozzy & Nuel- D2- (Aguaplano)
Leo Anibaldi- Fusion 1- (ACV)
D.Dozzy & Nuel- A2- (Aguaplano)
Mike Parker- Substratum (Geocentric Mix) – (Orange Groove)
Kassem Mosse – B2- (Workshop)
Brando Lupi- Liquid Garden- (Detune Records)
Deadbeat- Mecca Drum Jack- (Wagon Repair)
Veer- Fieldstrip- (Source)
New World Aquarium- The Games that We Play- (New Religion)
Daniel Stefanik- Reactivity 8- (Statik Entertainment)
D.Dozzy & Nuel- C1- Aguaplano 1111


Jul 29, 2014
@ 7:55 pm

Backbone.history.start

There are so many different JavaScript MVC frameworks out there. As a dev, you’ve taken some time to get familiar with a few. You’ve probably looked at Angular, Ember, and maybe even Backbone.

I prefer Backbone.js. The main reason is,

Read More


Jul 28, 2014
@ 9:15 pm

Evening code session. Soundtrack: TM404’s live set from March 2014. Pretty chill, but keeping the wheels turning…


Jul 28, 2014
@ 9:04 pm

CSS3 Animation: Listeners

So, there’s CSS, and then there’s animation with CSS. Making markup look good on a page is one thing, but after some time spent working with full page transitions and keyframing animations, I’ve found it gets a little more complicated - quickly.

Here’s a little snippet that I’ve used to help listen for the events that are surfaced during CSS3 transitions. Consider this code snippet:

Read More


Jul 28, 2014
@ 6:56 pm

There are several artists from Ghostly International who produce really captivating works.  Glad you like this one, bishopz.  
bishopz:

Thanks James for sending me this artist. Really amazing work, check it out.
A selection of limited edition prints and Ghostly cover art by Michael Cina | The Ghostly Store

There are several artists from Ghostly International who produce really captivating works.  Glad you like this one, bishopz.  

bishopz:

Thanks James for sending me this artist. Really amazing work, check it out.

A selection of limited edition prints and Ghostly cover art by Michael Cina | The Ghostly Store


Jul 27, 2014
@ 3:31 pm

Up and running

Today I settled on a new home for a my personal site.  

After a few years trying to find the time to create some completely custom site / blog / etc to act as a platform for my projects, I’ve decided to go with Tumblr.

Read More