I read Getting Things Done by David Allen about 6 months ago at the suggestion of a coworker and it has been vital to my daily workflow. I won’t go into details about why GTD is so helpful in increasing productivity; it’s a short book and you should definitely read it if you haven’t already. Instead, I want to focus on how to effectively apply the methodologies using a free application called Evernote .

Why I started using Evernote

After learning that Omnifocus was the de facto application for GTD and being a compulsive buyer, I took no time paying $39.99 for a copy from the Mac Appstore (it now costs $79.99). At the time, my work machine was an Apple MacBook Pro, my home/entertainment machine was a Windows 7 desktop, and my mobile device was an Android-powered HTC MyTouch 4G (I currently have a Retina MacBook Pro, a hackintosh tower, and a Galaxy Note II, but that’s besides the point). I quickly became frustrated with Omnifocus; I didn’t have an iPhone so I couldn’t take Omnifocus on the go, I couldn’t use it on my home computer since I was using Windows, and it didn’t make sense for me to pay another fee just to have it on my iPad. I was already using Evernote to store short web clippings so I did a quick google search for “GTD with Evernote” and a particular thread caught my attention. I borrowed some ideas from the discussions and crafted a workflow that worked for me.

What’s so great about Evernote

It’s Free

Well… they have a freemium business model. You can upgrade your account to premium for $5/month or $45/year. Fortunately, larger upload size, work collaboration, note history, and priority support are not necessary for implementing a GTD workflow.

It’s Flexible

Evernote is not a task/todo list manager, it’s a feature-heavy cloud-storage note application. The features I enjoy the most are the ability to add multiple tags to a note, attach images to a note, create audio/video notes, and generate a publicly-accessable html document from a note.

It’s on every platform imaginable

There’s a Windows and a Mac client. There’s even an open-source third party app for linux called Everpad. And of course, you can also download it on the Android Play Store and the iOS AppStore.

It’s completely open!

If you’re a developer and want to write third-party apps, Evernote has an API. There’s a nodejs package, ruby gem, and python package to help you get started on your project. Also, check out Evernote Trunk to see all the cool third-party apps.

What my workflow look like

Start with a GTD notebook

Evernote allows organizing notes based on different notebooks. I personally keep only one notebook and rely heavily on tags. However, this isn’t a strict requirement; If you’re already using Evernote and have existing notebooks, just make a new one and name it “GTD”. Every single thing that needs to be written down no matter how big or small can be worded as getting something done. By this logic, one should only need a single notebook consisting of notes about GTD.

Creating a new item

There is only one thing to keep in mind when creating a new activity; be comfortable with an empty note. Smaller tasks such as calling someone to make an appointment or picking up something from the grocery store should only warrant text in the note’s title. However, the great thing about using a note which comprises of a title and body rather than just a single line of text representing the task or goal is that it’s possible use the body block to store more information about an activity. Utilize this extra field to store information about a long term goals such as learning a new language or an information-heavy task such as refinancing a home. Take advantage of other core features as well. If your task is to call someone or pick up clothes from the cleaners and since Evernote supports photo uploads, it’s much more efficient to take a photo of the business card or receipt than to manually type in the phone number or tracking ID.

Tagging your notes

The minimum required tags are:

1. !Today
2. #Next
3. ~Basket
4. &Done

Whenever you come up with a task/goal, create a note and add a ~Basket tag to it. Visit notes with this tag often and replace the ~Basket tag with the #Next tag when you plan to tackle it within the next few days. Items you plan to resolve the same day should have the !Today tag. After accomplishing a task, If you like to archive, add the &Done tag to the note, otherwise either delete the note or remove all tags in the above list from it.

I chose these symbols because the old Evernote desktop app would list all the tags in the sidebar in a certain order. These particular symbols would ensure that the four tags will appear at the top of the tag list. Even though the Evernote app now has a customizable “shortcuts” section in the sidebar, having unique symbols for easy tagging is still invaluable. Just type the first character symbol and hit tab, Evernote will automatically select the first/only matching tag.

Keep in mind you can and should have multiple tags outside of the above four, just make sure they don’t have a character precedence clash. I often tag notes with a location or activity context such as @shopping, @home, @phone, @work, etc. I also have a unique first character for tags I use the most such as $Programming (the dollar sign has some history with programming languages) and ?Reading (a question mark seemed appropriate for reading and learning).

Getting things done is a slightly different process for each person, and Evernote gives plenty of room for personal implementation. The someday tag is popular and is suggested in the GTD book, but I prefer tags such as one week out and one month out because it forces me to continually make sure I check my backlog and move tasks along. At the end of the day, you’re successful as long as you’re getting things done efficiently.

Oh and by the way, this blog entry was written in Evernote with the title “write a blog entry about GTD using Evernote”. I can remove the !Today tag now.

I’ve been working on a very data-intensive, client-facing application at work for a few months now. The application is a WYSIWYG editor which requires outputting some markup and parsing the LESS tree to be inserted onto the page as a user makes changes. Naturally, I used Backbone to help structure the models. At the end of the day, I needed to burn out and persist the markup and LESS files to the server as well.

One of the main reasons I chose Node, and I think this is the same reason for most people, is because I wanted the same consistent code in the client as well as the server. Since I already created Backbone models describing my data, it was a no brainer to use these models on the server. Normally, this is extremely simple, but lets face it, who doesn’t write large client applications these days without a JavaScript module loader? The problem is that node already implements the CommonJS pattern but RequireJS uses the AMD API. However, since require has a node module, it wasn’t too tricky using this to require other client-side modules.

The following is a sample Backbone model wrapped in RequireJS’s define call. If this file is being loaded on the server, the define function will not exist; as you can see, resolving this is as simple as setting define to require('amdefine')(module). I specifically included references to both LESS and jQuery to illustrate how these libraries can be used appropriately inside models and how to resolve conflicts when loading it on the server. You can find comments inside the code.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

// if 'define' is not a function, this file is being requested from the server
if(typeof define !== 'function') {
  define = require('amdefine')(module);
}

define([
  'underscore',
  'backbone',
  'less',
  'jquery',
  'some_collection'
], function(_, Backbone, less, $, SomeCollection) {

  // In the next file, you will notice requirejs's sever
  // configuration points the 'less' module to a null object
  // this allows us to know if we're on the server and
  // reset references accordingly
  if(!less) less = require('requirejs').nodeRequire('less');
  var lessParser = new (less.Parser)();

  // If the model needs to output HTML markup, it's useful to
  // include jQuery to perform node and attribute changes
  // cheerio wraps strings and implements jQuery's API
  if(!$) $ = require('cheerio');

  return Backbone.Model.extend({

    // this model may have dependencies on other models/collections
    // after we resolve the define call, these files will automatically
    // be loaded properly without having to make them CommonJS-compatible
    initialize: function() {
      this.someCollection = new SomeCollection();
    },

    markup: function() {
      var $node = $('<div/>').html(this.get('contents'));
      // do some crazy manipulations here
      return $node.html();
    },

    css: function(fn) {
      lessParser.parse(this.get('bar'), function(e, tree) {
        if(typeof fn === 'function') fn(tree.toCSS());
      });
    },

    data: function() {
      return {
        slug: this.get('id'),
        foo: this.someCollection.toJSON()
      }
    }

  });

});

Now in your server file, you just need to require the requirejs module and configure the paths. Notice less and jquery both point to a file called empty – all this file contains is define(null);. As stated above, this is to let you know that the file is being included on the server and you need to make the right reference adjustments. You’ll also likely want to turn this file into a CommonJS module. To do this, just export the object first; after you’ve successfully used requirejs on the server to load your Backbone model, attach methods/objects to the exported object that has the Backbone model as a dependency.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

var fs = require('fs');
var requirejs = require('requirejs');

requirejs.config({
  nodeRequire: require,
  bareUrl: 'public/src',
  paths: {
    'less': '../lib/empty',
    'jquery': '../lib/empty',
    'backbone': '../lib/backbone',
    'underscore': '../lib/underscore'
  }
});

function Compiler() {
  this.initialize.apply(this, arguments);
}

// Export this object first
module.exports.Compiler = Compiler;


requirejs(['models/Template'], function(Template) {

  // successfully loaded the Backbone model, now we can
  // set methods to Compiler that has model dependency
  Compiler.prototype = {

    initialize: function(someObject) {
      this.template = new Template(someObject);
    },

    compile: function() {
      var dataString = JSON.stringify(this.theme.data(), undefined, 4);
      fs.writeFile('some_json_file.json', dataString, function(err) {
        if(err) throw err;
      });

      fs.writeFile('some_template_file.dust', this.theme.markup(), function(err) {
        if(err) throw err;
      });
    }

  };

});

Here’s a video of an RC car I rigged that’s controlled using the raspberry pi’s GPIO headers.

I know JavaScript is a terrible language to write autonomous cars in – it’s single threaded and has a terrible timer. Your accuracy is limited to ms and even then it’s not precise because of the single threaded nature.

That said, I wrote a node.js raspberry pi gpio library (you can run “npm install gpio” to install) and wanted to use it. I was already planning to make an autonomous car from an existing RC car with my Arduino board and decided to throw a raspberry pi on it for kicks, and I wanted to prove that my node gpio package works.

The node-rc library I used in the video can be found here

I like that rpi [can] have an entire operating system and I can ssh into it. I have a wireless usb dongle set up on the Pi and I had this lying around. I might build the autonomous car using the rpi in C or python or something.

edit

A few people have been asking about the RC car so here goes…

I connected the gpio headers directly to the chip on the car, not the remote (the rpi needs to be on the car so I can connect sensors to it later). You can’t connect it directly to the motor as many people on this board have said – the pi can’t produce a constant current to drive the motors.

The nice thing about working with an RC car is that the motor driver is built in for you. Google the RX-2B datasheet; I’ve taken apart 3 RC cars so far and they all use the same chip. In general, pin 2 is ground, 6 is right, 7 is left, 10 is reverse, and 11 is forward. Connect the Pi’s ground to pin 2, then whatever gpio header you want to the corresponding pin. Word of advice, some cars have bigger chips than others. The Targets near me sells New Bright and Jada (brand) RC cars; the New Bright ones had such a small chip that it was impossible to solder anything on. The Jada was much easier to solder but had a terrible set of wheels and turning mechanism. I actually replaced the whole board on my New Bright car with the one from Jada (just connect the right wires to the motor and it’s fine).

Note: you can remove the chip altogether and solder your wire directly into where the hole used to be, but this will disable the remote controller. If you choose to keep the chip, in your software, remember to change the direction to “in” before using the remote.

I personally love spaces, but I only prefer spaces over tabs because it’s not tabstop-dependent. There are editors (and code hosts such as github) out there using different tabstops and not intelligent enough to interpret tabs as different whitespace characters depending on the number of tabs/spaces used on the line right above it.

For that reason, what you see as…

1
2
3
4

/**
 * @string1      String      Hey I'm a string
 * @boolean1     Boolean     And I line up with the guy above me
 */

may look like..

1
2
3
4

/**
 * @string1                String              Hey I'm a string
 * @boolean1     Boolean      Uh oh, I don't line up =(
 */

There are worse examples, I promise. The point is my tabstop value may be different than yours and my editor may not be as intelliJent as yours, so try to play nice. When you’re working on a project with other people, using JUST spaces or JUST tabs should never be a topic of discussion. The only way I’ve found so far that can allow us to respect everyone’s coding standards and play nice with github is…. dun dun dun..

Use tabs at the beginning of a line and spaces everywhere else

Alot of developers seem to have adopted this, heck even JSHint at default warns you about this (kinda). If you’re OCD like me and prefer your code to line up nicely, that’s fine, but please don’t mix spaces and tabs. After your first non-tab character in a line, try to resist hitting space, then tabbing a bunch of times just to line something up.

If you’re a Vim user, here’s a great script that will automatically use spaces instead of tabs when you try to tab after a non-white character. It will even line up with the indentation above using spaces! Just throw in your vimrc.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

function VaryTabs()
  if &expandtab
    return "\<Tab>"
  else
    let nonwhite = matchend(getline('.'),'\S')
    if nonwhite < 0 || col('.') <= nonwhite
      return "\<Tab>"
    else
      let pos = virtcol('.')
      let num = pos + &tabstop
      let num = num - (num % &tabstop) - pos +1
      return repeat(" ",num)
    endif
  endif
endfunction
inoremap <Tab> <C-R>=VaryTabs()<CR>

Note: I got the huge chunk of the code from this blog post.

If you’re a VIM lover like me and using zsh for your shell, there’s a simple command to enable vim mode on your command prompt.

1

set -o vi

It works fine other than the fact that I usually had no idea if I’m in normal or command mode. If you want to read about the hows, following the link above. Below is the zsh script I use to indicate my editing mode on my prompt.

1
2
3
4
5
6
7

VIMODE=">> "
function zle-keymap-select {
    VIMODE="${${KEYMAP/(main|viins)/>> }/(vicmd)/}${${KEYMAP/vicmd/<< }/(main|viins)/}"
    zle reset-prompt
}
zle -N zle-keymap-select
set -o vi

Now you can place $VIMODE in your zsh prompt declaration. >> will display for normal mode and << will appear for command mode. Of course you can easily change that to whatever you prefer.

Bind and trigger in JavaScript is one of those design patterns that are widely used but not discussed anywhere outside of the scope of the framework that utilizes it. A google search for “bind and trigger” brings up mostly references to jQuery discussions, and their context seems to revolve around attaching event handlers to DOM nodes rather than implementing it in your own application.

Javascript is an event-driven language. As such, it’s common practice to pass in function callbacks to be triggered by an event. For instance, an AJAX request requires a function callback since the callstack will finish long before the request is completed. Passing in a function callback is the only way to guarantee that your function will get called after the request has completed and with the correct data from the request. But what if you want multiple callbacks to happen after the request is done? Or if you’re building an application which accepts plugins; how do you allow these plugins to hook into events triggered from the core application? This is where the bind and trigger paradigm really shines.

Sidenote. There are plenty of frameworks out there like jQuery and Spine which have a very complete implementation of the bind and trigger paradigm. Mine is very incomplete for the sake of explaining the model.

In this example, we will build a Button Class which allows you to create an anchor element.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

var Button = function(param) {
   var text, href, anchor;

   if(typeof param !== "object") {
      // ok, seriously?
      return false;
   }
   anchor = document.createElement('a');
   anchor.innerHTML = param.text;
   anchor.setAttribute('href', param.href);

   this.anchor = anchor;
   this.param = param;
};

var button = new Button({
   text: "Link Text",
   href: "http://dph.am"
});

Now lets assume that when a button is appended to the page, you want a callback to happen. This is pretty common in an element design pattern where anchors are the elements and your application wants to proxy the button’s append event. This is typically done two ways; through the method’s parameter callback and Class initialize parameter.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

// Callback from initialized parameter
Button.prototype.appendTo = function(container) {
   container.appendChild(this.anchor);
   if(typeof this.param.onAppend === "function") {
      this.param.onAppend(container);
   }
};
var button = new Button({
   text: "Link Text",
   href: "http://dph.am",
   onAppend: function(container) {
      console.log("Anchor was appended to", container);
   }
});
button.appendTo(document.body);

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// Callback from method parameter
Button.prototype.appendTo = function(el, callback) {
   el.appendChild(this.anchor);
   if(typeof callback === "function") {
      callback();
   }
};
var button = new Button({
   text: "Link Text",
   href: "http://dph.am"
});
button.appendTo(document.body, function(container){
   console.log("Anchor was appended to", container);
}

These pattern brings up a few problems.

1. For the first method, callback must be defined when initializing. You might not know what that callback is the when you initialize the Button class.
2. For the second method, you must define the callback every time you call button.appendTo(). This is a bit tedious.
3. Only one callback can happen!

The bind and trigger pattern essentially solves all these problems. You can attach the callback anytime you want, you only need to attach it one time, and best of all, you can “bind” a number of callbacks to be “triggered” later. To do that, we extend our prototype.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

var Button = function(param) {
   // place the following line in your class init block
   this.events = {};
};

// Bind method
Button.prototype.bind = function(event, callback) {
   if(typeof event === "string") {
      if(typeof this.events[event] !== "object") {
         // This event type doesn't exist, create a stack for it
         this.events[event] = [];
      }

      if(typeof callback === "function") {
         // Push this callback into the event's stack
         this.events[event].push(callback);
      }
   }
};

// Trigger method
Button.prototype.trigger = function(event, param) {
   // Making sure the event type stack exists
   if(typeof event === "string" &&
      typeof this.events[event] === "object" &&
         this.events[event] instanceof Array) {

      // Loop through event's stack
      for(var i=0, len=this.events[event].length; i<len; i++) {
         if(typeof this.events[event][i] === "function") {
            // Fires callback with given parameter
            this.events[event][i](param);
         }
      }
   }
};

// Update appendTo method to trigger an "onAppend" event
Button.prototype.appendTo = function(container) {
   container.appendChild(this.anchor);
   this.trigger("onAppend", container);
};

// Now create a button instance and bind to the "onAppend" event
var button = new Button({
   text: "Link Text",
   href: "http://dph.am"
});
button.bind("onAppend", function(container) {
   console.log("Callback 1 fired, button appended to", container);
});

// In fact, you can bind multiple callbacks to that event
button.bind("onAppend", function(container) {
   console.log("Callback 2 fired, button appended to", container);
});

// Now when you call the appendTo() method
// all the "onAppend" callbacks will get triggered
button.appendTo(document.body);

Again, this is a very bare implementation. In practice, one would define an unbind method so that certain bounded callbacks can be unbind and maybe performing a call or apply on each callbacks to give them the instance’s context.

Firefox has a rendering bug with the outline css attribute where the outline will wrap not the element but the overflow elements from its descendants. Below is a comparison of how outline renders in Firefox vs other browsers.

This is a screenshot of a container with 2px blue border, 2px red outline, and an image inside with a -30px left and top margin. As you can see, in Firefox, the outline is around the container as well as the overflowing image.

The following is a fix for it.

1
2
3
4
5
6
7
8
9

.container { position: relative; }
.container:before {
   content: '';
   margin: 0; padding: 0;
   position: absolute; z-index: -1;
   top: 0; left: 0;
   width: 100%; height: 100%;
   outline: 1px solid #ff0000;
}

We create an extra container using the :before pseudo-selector with absolute position set at 0 0 and 100% width and height. We then place an outline around this element, effectively forcing the outline to wrap only the container. The container itself must have a position relative, absolute, or fixed for the :before selector to be positioned properly.

If you’re a sass guy, here’s the mixin for it.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

@mixin outline($definition) {
   position: relative;
   &:before {
      content: '';
      margin: 0; padding: 0;
      position: absolute; z-index: -1;
      top: 0; left: 0;
      width: 100%; height: 100%;
      outline: $definition;
   }
}

.container {
   @include outline(1px solid #ff0000);
}