I like to believe that I’m 95% decided to buy an iMac. The remaining final question is: which one?

Out of the relatively big choice one currently has (new version released a couple of weeks ago, old version still available) I narrowed it down to these:

• Old version of iMac 27″: i3 3.06GHz, 4GB RAM, 1TB hard disk, ATI 4670 256MB: 1439.00 EUR
• Old version of iMac 21.5″: i3 3.06GHz, 4GB RAM, 1TB hard disk, ATI 4670 256MB: 1295.00 EUR
• New version of iMac 21.5″: i3 3.2GHz, 4GB RAM, 1TB hard dis, ATI 5670 512MB: 1429.00 EUR

After all the difference between the old and recently released new version of the iMac is not really significant. At least if you’re not going for one of the high end versions with i5 / i7 quad core processors and high end ATI graphics. Since I’m not playing on the Mac, I’m not doing any video editing, etc, I probably can narrow the choice further down by eliminating #3 in the list: new version of 21.5″ iMac.

So old version with 27″ or 21.5″. Is the ATI 4670 powerful enough for the huge screen with its enormous resolution? I guess tomorrow I’ll decide : – )

Inside the Tornado is subtitled with “Strategies for Developing, Leveraging, and Surviving Hypergrowth Markets“.

Though I’m not working in Marketing, or maybe just because of that, I really enjoyed reading “Inside the Tornado”. There is a lot of valuable information in this book; unfortunately much more then I can keep in mind longterm. Therefore here some key concepts I thought are worth remembering even if you are, like me, not working in the Marketing or Sales department of your company.

The foundation of the whole book is the Technology Adoption Life Cycle.

This is pretty much the life cycle every tech product goes through during its lifetime. Each phase has it’s own dynamics and groups which are important to address and communicate with. Each phase needs its own strategies. As main customers of each phase, Moore defines below groups:

• Innovators = Technology enthusiasts.
• Early Adopters = Visionaries.
• Early Majority = Pragmatists.
• Late Majority = Conservatives.
• Laggards = Skeptics.

The Chasm

The chasm is the phase of the technology adoption life cycle which needs to be crossed by the product in order to enter the mainstream market. Refining above diagram, we are getting this:

Add this point I’d like to quote from the book two paragraphs which, in my opinion, contain the central message ragarding “crossing the chasm”:

The fundamental strategy for making a successful “crossing” is based on a single observation: the main difference between the visionaries of the early market and the pragmatists in the mainstream is that the former are willing to bet “on the come” whereas the latter want to see solutions “in producion” before they buy. That is, when a visionary sees that you have 80 percent of the solution to her problem, she says, “Great, let’s get started right away on building the other 20 percent together.” A pragmatist, on the other hand, says, “Wait a minuate – aren’t you supposed to be the one improving my productivity? I’ll buy this thing when it’s done not before.” Specifically, what pragmatists want, more than anything else, is a 100 percent solution to their problem – what we came to call the whole product.
[...]
the key to a winning strategy is to identify a single beachhead of pragmatist customers in a mainstream market segment and to accelerate the formation of 100 percent of their whole product. The goal is to win a nice foothold in the mainstream as quickly as possible – that is what is meant by crossing the chasm.

In order to come to the main topic of the book we need one more refinement of the life cycle and introduce the Bowling Alley and, finally, the tornado.

And more quotes directly from the book:

• The Bowling Alley: A period of niche-based adoption in advance of the general marketplace, driven by compelling customer needs and the willingness of vendors to craft niche-specific whole products.
• The Tornado: A period of mass-market adoption, when the general marketplace switches over to the new infrastructure paradigm.

Bowling Alley Market Development

So what this diagram wants to say is that from the one niche market you already dominate you have to spread out to other niche markets, ideally such markets which are close to the initial market. Thus you can use knowledge and and possible connections you gained by building and selling a whole product for the first market segment you entered. A lot more interesting stuff about market development during the Bowling Alley phase you will find on page 39 of “Inside the Tornado”.

Moore advices, that the Tornado is the market phase in which you need to become the “gorilla”. What that means in terms of market share and profit show these diagrams:

This is the time when it’s more important than anything else to just ship your product. The profits of the gorilla are so high, even compared to its market share by revenue, because the gorilla in the market is the one who sets the price bar. All competitors must discount below that price in order to successfully compete! There are quite a few advantages of being the gorilla and the tornado is the only phase of the market to gain these.

Main Street

Unlike during crossing the chasm and in the Bowling Alley where you try to create whole products for each market niche, on Main Street, you extent your product in order to serve niche markets which could use your product if only you added very little functionality to it.

So….

This is just a very rough summary of approximately the first half of the book. There are plenty of details which are interesting and I totally recommend reading “Inside the Tornado”! I believe that having at least some background in marketing (like e.g. the stuff I talk about above) helps to understand certain dynamics which are observable in every tech company. And understanding something is the first step to make you even better in your job ;-)

Buy Inside the Tornado at Amazon:

Like jQuery, I’m using the Google Closure Compiler to minify the code of my Image Color Picker plugin.

When I looked over the minified code, I noticed that quite a few function names don’t get minified.
Let’s take a closer look at the v0.1 version of ImageColorPicker.js (github):

$.widget("ui.ImageColorPicker", {
 options: {},
  _create: function() {
  },
 
  destroy: function() {
  },
 
  selectedColor: function() {
  },
 
  _d2h: function(d) {
  },
 
  _h2d: function(h) {
  },
 
  _createImageColorPicker: function() {
  }
});

option, _create, destroy, selectedColor and all the other function names don’t get minified. Everything within these function gets minified pretty well. The reason for this is that the Closure Compiler regards all these functions and objects as public. Since they are public the compiler does not know whether another, external library uses one or more of the functions. In order not to break external libraries or, more generally, code that depends on our code, the Closure compiler does not touch the names.

In case you have quite a few “private” functions and / or use them heavily, it can become pretty space wasting to not minify them. So how to fix this?

The solution is: Use a Javascript Closure. By using closures you can make functions truly private, compared to marking them private by using the underscore convention. This is ImageColorPicker.js after the refactoring (github):

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

var uiImageColorPicker = function(){
 
	var _d2h = function(d) {
	};
 
	var _h2d = function(h) {
	};
 
	var _createImageColorPicker = function(widget) {
	};
 
 
 
	return {
		options: {},
 
		_create: function() {
		},
 
		destroy: function() {
		},
 
		selectedColor: function() {
		}
 
	};	
}();
$.widget("ui.ImageColorPicker", uiImageColorPicker);

In line 1 a function is assigned to uiImageColorPicker. But not really. Take a closer look at line 27. It’s directly executed. Therefore the value which is assigned to uiImageColorPicker is not a function, but the object which is returned by the function. This object is supposed to contain all public functions of your plugin and option, _create and destroy, since these are expected by the jQuery UI Widget implementation.
All private functions go to the function body, outside of the object. After the outer function ran, they won’t be accessible any more, but if you use them in functions of the returned object they are bound through a closure and thus can be used by the object’s functions even after the outer function finished execution.

When doing such thing, there are two things I can think of which require a little extra attention:

• Don’t store object specific data in the function body. That’s like storing data in an object prototype. All objects would either read the same data, or worse, overwrite data. Therefore, keep object related data in the object.
• this refers to the object when used within the object and to the function when used outside of the object in the function body. If you need to use the object’s this reference in your private function, pass it in as a parameter. I’m doing this for example in the create function. Check out github for the code.

A bonus: In case you ever forget to remove a private function which you don’t use anymore it will be removed entirely by the Closure Compiler in the minified version of your plugin ;-)

Measuring the result

After refactoring the code, I ran the Closure Compiler again. Before the minified version of the plugin had 3729 bytes. After the refactoring it had 3475 bytes. That’s about 8% smaller. Hm, not quite a lot you’d say. But:

• ImageColorPicker is a very small plugin anyway. If your plugin has a lot more private functions and / or uses them more frequently the savings will increase.
• If you have thousands of hits per day, each percent you save in download size will save yourself or your company cash money.

Today I’m releasing my first jQuery plugin :-)

Read more about it here: Image Color Picker or check out the demo.

You can find the code on Github.

Today I played a bit with Canvas and getImageData. What I tried to figure out was how to get the color of a certain pixel. The solution is easy to find via Google. The code looks somewhat like this:

var ctx = document.getElementById('canvas').getContext('2d');  
var img = new Image();  
img.onload = function(){  
  ctx.drawImage(img, 0, 0); 
  var objImageData = ctx.getImageData(0, 0, img.width, img.height)  
  alert("Pixel at (0,0): rgba("+objImageData.data[4]+", "+objImageData.data[5]+", "+objImageData.data[6]+","+objImageData.data[6]+")")
}  
img.src = 'test.jpg';

If you run this locally in Firefox. It will show the image, but it won’t show the popup. Instead, you’ll see this exception in the Firebug console:

Security error" code: "1000
var objImageData = ctx.getImageData(0, 0, img.width, img.height)

Here is why:

• If the image is hosted on a different domain than the script, you can’t access image data without causing above security exception.
• If you run this locally, you anyway will get this exception because, locally there’s no domain, so Firefox thinks for sure: different Domains >> Panic!
• If you upload above code to some web server, image and HTML page with the Javascript code on the same domain, the code will work perfectly.
• If you want to get the image data of an image which is not on the same domain, but e.g. on Amazon S3, you will end up with above security exception.

One way to handle the exception is to catch it, enable the appropriate browser permission and retry.

try {
  try { 
    var objImageData = ctx.getImageData(0, 0, img.width, img.height)  
  } catch (e) { 
    netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
    var objImageData = ctx.getImageData(0, 0, img.width, img.height) 
  } 						 
} catch (e) {
  throw new Error("unable to access image data: " + e)
} 
 
alert("Pixel an (0,0): rgba("+objImageData.data[4]+", "+objImageData.data[5]+", "+objImageData.data[6]+","+objImageData.data[6]+")");

Now, that works, at least in Firefox, but it is ugly, because the user will get a security warning and he has to decide whether to grant the script the requested additional permission.

The only “nice” way of getting the code to work, without browser specific try / catch statements and without security warnings is to host the images on the same domain as the script. Luckily Amazon S3 supports that through Virtual Hosting of Buckets.

If anyone knows about additional solutions for this, I’m happy to hear about it.

Most information I got from this article on Aaron’s blog.

Guter, trotz der 800+ Seiten, kurzweiliger Roman mit einigen interessanten Punkten:

Der Abschnitt auf Seite 305 ff. hat mich dazu angeregt “Die Grenzen des Wachstums” auf meine Amazon Wunschliste zu setzen. Im Roman geht es an dieser Stelle um die Analyse und Voraussage der Entwicklung hochgradig vernetzter Systeme; in diesem konkreten Fall: der Welt in der wir leben. In denke “Die Grenzen des Wachstums” kann interessante Denkansätze zu folgender Frage geben: Welche Faktoren beeinflussen die Entwicklung der Menschheit und wie hängen diese Faktoren zusammen?

Auf den Seiten 452 ff. wird beschrieben wie der Golfstrom funktioniert, warum er auf Grund des Klimawandels versiegen könnte und welche Auswirkungen das wiederum auf unser Klima haben könnte. Mittlerweile ist die Rolle des Golfstroms für das Klima in Europa kein großes Geheimnis mehr. Nichtsdestotrotz sind die Zusammenhänge interessant. Mehr zu dieser Thematik erfährt man hier, hier, hier und hier.

Oft hört man Sätze wie “Du musste Dein Geld für dich arbeiten lassen”. Aber: Geld arbeitet nicht. Menschen arbeiten. Jeden Euro um den ein Konto wächst, hat irgendjemand erarbeitet. Jemand, der Schulden hat und deshalb von dem Geld, dass er verdient, abgeben muss an den, bei dem er dieser Schulden hat. Also: Reiche lassen nicht ihr Geld für sich arbeiten, sie lassen andere für sich arbeiten, wenn auch nicht direkt.

Reichtum hängt in erster Linie mit den Einnahmen zusammen nicht zu sehr mit der Ausgabenseite. Schaut man sich die Einnahmeseite an, so kann man folgende Hierarchie des erreichbaren Einkommens erkennen:

• Arbeit (dass was die meisten “ehrliche Arbeit” nennen)
• Spezialisierte Arbeit
• Handel
• Unternehmen
• Geld (mit dem man weiteres Geld verdient; siehe oben “Geld arbeitet nicht”)

If you ever wanted to use jQuery’s delay function to delay the execution of any other function than e.g. jQuery’s effect functions you probably tried something like this:

$(document).ready(function(){
  $("#myElement").delay(2000).trigger("click");
});

My intension was to trigger the “click” event on #myElement two seconds after the DOM was loaded. During testing however it turned out that the event was triggered right away without any delay.

Taking a closer look at the delay function showed me that only functions that are queued in jQuery’s default “fx” queue are delayed by a delay-call like the one above. If you want to delay e.g. the trigger function you either need to queue it in the fx-queue or in a separate queue. Here is how that works:

$("#myElement").delay(2000).queue(function(){ 
  $(this).trigger("click"); 
  $(this).dequeue(); 
});

If you don’t want to use the default fx-queue, this is how to queue the function in your own queue:

$("#myElement").delay(2000, "myQueue").queue("myQueue", function(){ 
  $(this).trigger("click"); 
}).dequeue("myQueue");

Say the HTML is this

<div id="mydiv" style="border:10px solid #ff0000;">Hello World</div>

then you get the width of the border with this:

var borderWidth =($("#mydiv").outerWidth() - $("#mydiv").width()) / 2;

Using ActiveRecord’s serialize method you can save Ruby objects in a single field of your model. The serialization is done through YAML.

Today I tried to save a nested object structure with this method. These are the classes:

class PhotoStyle
  attr_accessor :image
 
  def initialize
    @image = StyleElement.new
  end
end
 
class StyleElement
  attr_accessor :selector, :style
 
  def initialize
    @selector = '*'
    @style = {}
  end
end

The model which saves a PhotoStyle object:

class Photo < ActiveRecord::Base
  serialize :style, PhotoStyle
end

This first approach didn’t quite work out. Saving the model worked fine, but when I loaded it only PhotoStyle got deserialized to the original type. The nested StyleElement didn’t:

p = Photo.last
p.style
=> #<PhotoStyle:0xb70a906c @image=#<YAML::Object:0xb72079a4 @ivars={"selector"=>"#theimage", "style"=>{"border"=>"0", "box-shadow"=>"1px 3px 15px #555"}}, @class="StyleElement">}, @class="PhotoStyle">>

Note the YAML object assigned to the @image instance variable.

I’m not sure if that’s a bug in Rails3 or if that is by design. You can however “fix” it by running this code snippet when your application starts up:

YAML::Syck::Resolver.class_eval do
  def transfer_with_autoload(type, val)
    match = type.match(/object:(\w+(?:::\w+)*)/)
    match && match[1].constantize
    transfer_without_autoload(type, val)
  end
  alias_method_chain :transfer, :autoload
end

Save it e.g. in yaml_autoloader.rb in the config/initializers folder of your app.

Now all types will autoload:

#<PhotoStyle:0xb73dcb08 @image=#<StyleElement:0xb73dd058 @selector="#theimage", @style={"border"=>"0", "box-shadow"=>"1px 3px 15px #555"}>>

I found above code snippet here. Thanks!

Read more about ActiveRecord’s serialize method here: Simple user preferences for your Rails app.

Update:
Still not sure if that’s a bug, but I submitted a lighthouse ticket.

Update 2:
Apparently this is not a bug in Rails, but a problem in my code :-) Please see Aaron’s comment in above ticket.

Today I tried to use Heroku on Ubuntu / RVM for a Rails 3 test app. I ran into a similar problem like I had yesterday with OpenSSL.

After installing the Heroku gem:

gem install heroku

and running the command for create a new app

heroku create

I got this error

/home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require': no such file to load -- readline (LoadError)
	from /home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/gems/heroku-1.9.10/lib/heroku/commands/app.rb:1
	from /home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
	from /home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/gems/heroku-1.9.10/lib/heroku/command.rb:5
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/gems/heroku-1.9.10/lib/heroku/command.rb:5:in `each'
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/gems/heroku-1.9.10/lib/heroku/command.rb:5
	from /home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `gem_original_require'
	from /home/siebel/.rvm/rubies/ruby-1.8.7-p249/lib/ruby/site_ruby/1.8/rubygems/custom_require.rb:31:in `require'
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/gems/heroku-1.9.10/bin/heroku:7
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/bin/heroku:19:in `load'
	from /home/siebel/.rvm/gems/ruby-1.8.7-p249/bin/heroku:19

Now, the first line looks darn familiar and so does the solution:

First install libreadline-dev:

sudo apt-get install libreadline-dev

Then cd into

~/.rvm/src/ruby-1.8.7-p249/ext/readline

and build the extension:

ruby extconf.rb
make
make install

That’s it… heroku should run after that without problems.

I’m using RVM on my Ubuntu box. This way I can nicely install several Ruby and Rails versions next to each other. With Rails 3 however I had a little bit of trouble. When starting the server using

rails server

the server started fine, but as soon as I clicked “About your application’s environment”, I got this error on the console:

LoadError: no such file to load -- openssl

If you’re getting this too the first thing to check is whether these packages are installed:

• openssl
• libssl-dev
• libssl0.9.8

If they are and it anyway doesn’t work you want to go to the source code of your Ruby installation. In my case the source is in this path:

~/.rvm/src/ruby-1.8.7-p249

Now you cd to ext/openssl and run the following commands:

ruby extconf.rb
make
make install

After restarting WEBrick, everything was good:

For a more complete description on how to install Rails 3 on Ubuntu using RVM, checkout this blog post by Rohit Arondekar: Installing Rails 3.0 Beta 3 on Ubuntu using RVM

Triggering some function when an image is loaded is as easy as this with jQuery:

The HTML:

<img src="image.jpg" alt="" id="theimage"/>

Javascript:

$(document).ready(function() {
  $("#theimage").load(function() {
    alert("loaded");
  });
});

If you load your test page a second or third time, you’ll notice that the alert doesn’t pop up. That’s because the browser cached the image and in that case the load event won’t fire. To work around this you could use the complete property of the image:

$(document).ready(function() {
  var $image = $("#theimage");
  if ($image[0].complete) {
    alert("loaded");
  } else {
    $image.load(function() {
      alert("loaded");
    });
  }
});

So in case the image is already loaded the alert pops up right away. Otherwise we bind a function to the load event.

See the code in action on 365 Days or checkout this gist.

When you focus a link or some other focusable HTML element, you’ll get some more or less ugly outline which might not quite be what you want. In Firefox it’s for example a dotted border:

To remove this outline e.g. for all links, simply add this CSS:

a {
  border: 0;
  outline: 0;
}

This won’t work for any element in Internet Explorer. You might have to add some none standard attribute:

<a href="#" hidefocus="true">some link</a>

This week Apple show’s off Safari’s HTML5 capabilities … check it out, it’s impressive: Apple HTML5

There is also a page for Google Chrome demonstrating some pretty neat HTML5: Chrome Experiments

Today I noticed that List Kung Fu displays the mobile version of the list page when I browse there with regular desktop Internet Explorer. Surfing to the same page with Firefox or Opera on the same machine worked fine and just returned the regular HTML page.

So what’s up?

Simple… Internet Explorer sends a really funny accepts header, none of the formats actually is text/html. Thus HTML is covered with an implicit */*. That’s not awesome (in good IE manner), but not really a problem. A problem it just becomes with something like this in your controller action:

      respond_to do |format|
        format.mobile
        format.html
      end

Since Internet Explorer doesn’t send an explicit accept for text/html, Rails would just default to the first format, in above case format.mobile and then correctly return the mobile version of the view. The fix is easy. Just move format.html to the first position:

      respond_to do |format|
        format.html
        format.mobile
      end

Now */* would default to format.html.

Simpletip is a pretty nice jQuery plugin for displaying tool-tips. Minified and packed it’s only 3.4kb.

It comes with a small API, which is quite sufficient for most of the stuff you want to do with a tool-tip. One thing however I am missing: The ability to temporarily disable the tool-tip.You could do simply this:

function createTooltip(ele) {
  ele.simpletip({
    content: 'My Simpletip'
  });
}
 
// create the tool-tip
createTooltip($("#myelement"));
 
// disable the tool-tip:
$("#myelement").unbind("mouseover");
 
// do some other stuff
 
// enable tool-tip again:
createTooltip($("#myelement"));

This works perfectly fine, but it’s not very generic, since the content is hard coded in the createTooltip function. An alternative approach could look like this:

function createTooltip(ele) {
  ele.simpletip({
    content: 'My Simpletip'
  });
}
 
function disableTooltip(ele) {
  var tooltip = ele.eq(0).simpletip();
  ele.data("tooltip-content", tooltip.getTooltip().html());
  tooltip.hide();
  tooltip.update("");
}
 
function enableTooltip(ele) {
  var tooltip = ele.eq(0).simpletip();
  var content = ele.data("tooltip-content");
  tooltip.update(content);
}
 
// create the tool-tip
createTooltip($("#myelement"));
 
// disable the tool-tip:
disableTooltip($("#myelement"));
 
// do some other stuff
 
// enable tool-tip again:
enableTooltip($("#myelement"));

In this version the mouseover event is still bound to #myelement, but we update the content of the tool-tip to an empty string. This has the desired effect of nothing being displayed when hovering over the element. The original content of the tool-tip is stored in the data store of the HTML element. When enabling the tool-tip again, we take the HTML from there and update the tool-tip content with it. That’s it.

If you have any events bound to elements within the tool-tip, you have to make sure you re-bind them in the enableTooltip function. Better would be however to use the jQuery live function in the createTooltip function. This way you don’t have to worry about re-binding events. jQuery will take care of it.

There are few authors of whom you can read just everything. In my humble opinion Carl Zuckmayer is one of them. I’ve always thought I’m not the kind of guy reading theater players. Actually I’m really not. Zuckmayer’s plays are an exception. They are natural, true and entertaining.

While reading The Art Of The Start I was quite surprised how many parallels there are to Rework. Kawasaki’s guide gives a concise overview about many things that are helpful to know when starting either a business on your own or a new product internally within an existing company. It also contains a couple of good references to further readings.





Topics are:

• What’s your business about: Positioning, Pitching, Business Plans.
• Money: Bootstrapping, Recruiting, Raising capital.
• Create a profile: partnering, branding, rainmaking.

Some people call it the “startup bible”. That’s exaggerated. It’s a useful guide, a starting point. You might also want to read The Principles Of Successful Freelancing, since you’ll find more information about the nitty-gritty details of creating a business there.

P.S.: I’m not saying Rework is necessarily a startup guide. Fried and Hansson focus more on work quality and life / work balance. At least that’s how I read the book.

If you want to learn about increasing your productivity most people will recommend you David Allen’s book “Getting things done”.

When reading through the book you might get the impression that Allen evangelizes his productivity principles like a religion. I wouldn’t go so far and call it a religion, but certainly implementing those principles will have a notable effect on your life. It is a methodology to get organized and productive.

Getting things done consists out of three parts:

1. Master your workflow / Natural Project Planning
2. The core principles in detail
3. Key principles for a successful application of the process

If the first part Allen introduces the “Mind like water” concept. The modern world bombards everyone with thousands of inputs. Allen calls it simply “stuff”. This stuff needs to be canalized into a trusted system as fast as possible in order to keep a clear mind and to be able to concentrate on what really matters.

The complete system looks like this:

Let’s look at it a little more detailed. At the beginning stands the collection process.

Goal of this first step is to collect all the various inputs in a single inbox. This makes the next step of “Processing” a lot easier and effective. Collecting all your loose “stuff” is the very first step towards a mind like water.

Next comes the step of processing and organizing.

You need to regularly empty your inbox. If you don’t, it will soon serve as garbage dump rather than inbox. The first question you have to ask for each item is “What is it?“. This might sound dumb, but in the collection process you only collect everything without making a decision about it. Therefore when processing your inbox you first need to find out what you’re dealing with. Without knowing this you cannot figure out a good answer to the next question: “Is it actionable?”

If it’s not actionable, there are three possibilities:

• It’s not needed so trash it.
• No action is needed right now, but someday you might want to do something about it.
• No action is needed, but you want to keep it as reference material.

If it is actionable, you should do things which take less than two minutes right away. If you do that, it means one less item to think about, one less item on your lists to review.

For all other items:

• If you’re not the right person for the task, delegate it. Wait for results, if necessary follow up with the person to whom you delegated the task.
• Since you can’t get the task done within two minutes: Defer it. In case it needs to be done on a specific date / time, put it on your calendar. If it’s not bound to a time, put it on a list that keeps track of the “next action” you need to undertake.

Some things consist out of more than one action, you usually call them projects.

Projects need to be managed vertically and horizontally. They serve as constant source of “next action” tasks.

Managing horizontally means, controlling all the different kinds of topics / projects you’re involved in.

Managing vertically means to think about the distinct tasks of a specific project.

At the end of the processing / organizing step you have at least 8 categories:

• Trash.
• Someday / maybe list.
• Reference.
• A list with projects and for each project a list actionable items (project plans).
• A waiting-for list, holding all things you delegated and are waiting for results.
• A calendar, containing all tasks which need to be done at a specific time.
• A list of “next-actions”, containing atomic actions you need to work on.

Now, after putting all the energy in collecting, processing and organizing you have to regularly review these lists, update them and then most important: getting the specific action items done.
The review step is at least as important as the “do” step. It guarantees that your lists stay up to date and you won’t forget about something. If your lists are not up to date, you can’t trust them. They might contain stuff you have already done or which is outdated. If you don’t trust the system, you won’t use it and you won’t get the benefit of the “Getting things done”-methodology, you won’t feel the relieve of a mind like water ;-)

There’s a whole lot more useful stuff in this book. One of which is “Natural Project Planning”. I will write about this in a future post.

Last week a friend of mine was claiming that you can’t easily capture keyboard events on non-input HTML elements such as div or span. The fact is: it is easy.

See this demo:

You can use the arrow down / up keys to move the selection down or up. Find a working demo here.

The HTML:

<ul id="list">
	<li class="list-item" tabindex="0">test 1</li>
	<li class="list-item" tabindex="1">test 2</li>
	<li class="list-item" tabindex="2">test 3</li>
	<li class="list-item" tabindex="3">test 4</li>
	<li class="list-item" tabindex="4">test 5</li>
	<li class="list-item" tabindex="5">test 6</li>
	<li class="list-item" tabindex="6">test 7</li>
</ul>

Really the only trick here is to add a tabindex attribute to each list element. This way it can receive the focus and starts to capture keyboard events.

The JavaScript:

$(".list-item").bind({
	keydown: function(e) {
		var key = e.keyCode;
		var target = $(e.currentTarget);
 
		switch(key) {
			case 38: // arrow up
				target.prev().focus();
				break;
			case 40: // arrow down
				target.next().focus();
				break;
		}
	},
 
	focusin: function(e) {
		$(e.currentTarget).addClass("selected");
	},
 
	focusout: function(e) {
		$(e.currentTarget).removeClass("selected");
	}
});
$("li").first().focus();

The keydown event figures out which key was pressed. If it was the arrow up key it selects the previous element and sets the focus on it. For the arrow down key the following element gets the focus. The focusin and focusout events add or remove a css class in order to make the selection more visible.

You can find the complete code of the example here: http://gist.github.com/410789 or by clicking view source in the demo.