Monday, September 29, 2014

Kratu - Decision Matrices on Steroids

Leave a Comment
Have you ever had to make a complex decision, involving factors of varying degree of importance? Say, choosing which spaceship to buy next?

Or have you ever found yourself wanting to focus on where your efforts can have the greatest impact?

The latter is what caused me to create Kratu - a real time, open source, decision matrix analyzer on steroids: One of Google's premium partners had a (very) large number of AdWords accounts.

AdWords has a whole range of complex performance indicators that you want to optimize against to get the best value out of your advertising money. When multiplying this with a vast number of accounts, figuring out which accounts to focus on for the best bang for your buck is a non-trivial challenge.

Kratu allows you to assess all of the performance indicators in aggregate across all accounts, and rank the accounts according to where you have the highest potential for optimization.

It  also highlights which indicators to focus on, effectively turning it into a todo-list for account managers:

It allows you to work with your data in realtime by toggling and tweaking indicator thresholds and importance on the fly:

If you're interested, check it out on GitHub, have a look at the tutorial or simply just try it out for your self :

Simply download Kratu and extract, or check out the repository:
$ git clone
Note: If you're running Kratu locally, you might have to start your browser with a flag to allow local file loading. If you're using Chrome, use --allow-file-access-from-files

Quick start

If you want to see more of what Kratu can do, have a look at the examples included.
Otherwise, here's a quick look at how to render a simple report
// Instantiate a new Kratu object
var kratu = new Kratu();

// Set the data we'd like to render

// Tell Kratu where to render our report
kratu.setRenderElement( document.getElementById('kratuReport') );

// And render it!

In-depth tutorial

To get a better understanding of what Kratu has to offer, go through this in-depth tutorial, where we'll build a product comparison analysis that can help users figure out which spaceship to buy.


Friday, September 26, 2014

It gets better

Leave a Comment

What is the It Gets Better Project?

In September 2010, syndicated columnist and author Dan Savage created a YouTube video with his partner Terry to inspire hope for young people facing harassment. In response to a number of students taking their own lives after being bullied in school, they wanted to create a personal way for supporters everywhere to tell LGBT youth that, yes, it does indeed get better.

Help spread the word

Friday, September 19, 2014

My Great Underwater Adventure

Leave a Comment
Talking to some colleagues today, I thought of this video of my Ignite Sydney presentation back in 2012 and remembered that I'd forgotten to post it here.

So here you go - my talk on trying to go out of your comfort zone and do something completely different:


Thursday, July 18, 2013

Book review: Learning Node.js: A Hands-On Guide to Building Web Applications in JavaScript

Leave a Comment
Disclaimer: This book was written by my colleague Marc Wandschneider
I got the book as a free copy.

TL;DR - This book is exactly what you need if you want to dive right into web development with Node.js. If you're already familiar with web technologies, it teaches you everything you need to know to start building end-to-end web applications using Node.js.

One of my top annoyances are longwinded texts, trying to explain complex concepts. Especially when it comes to non-fictional books, and in particular books about programming.

Show me a few lines of good, concise code, and I'll immediately understand what you're talking about. Try explaining it with just text, and I won't have the willpower (let alone the attention span) to read beyond the first couple of sentences.

So, when I got a copy of Learning Node.js: A Hands-On Guide to Building Web Applications in JavaScript, I was really excited that it was only 250+ pages long.
But my excitement quickly turned to skepticism, when I discovered the wide range of content covered in the book: Installation, debugging, an introduction to JavaScript itself, asynchronous programming, writing web servers, package handling, modules, routing, templating, SQL, NoSQL, deployment, command line programming AND testing... Phew..

Could it really cover that much ground in only 250+ pages, and still provide enough context and explanations to be able to teach you something?

In short; Yes - most definitely. The book is very tightly written. It has a healthy code-to-text ratio. The code is well structured and easy to understand. It has quite a few diagrams to help explain the more complex concepts. The layout and general structure is very well done, so you can easily skim/skip the parts that you're not interested in.

I gave this a 5 star rating on Amazon, which I think it highly deserves.
In addition to being a very tight book that will teach you Node.js in an efficient way, it's also what I wish more programming books would be like. Straight to-the-point and so well structured that you're able to confidently skip the stuff that you already know (or don't care about), without the risk of leaving out something important.

PS! I hear you asking - what's the catch? In short - there aren't any, but if I had to say something, it would be: 
  1. This is probably not the first book you'll want to pick up if you're completely new to web technologies (and that's not the intended audience either).
  2. Node.js in particular, and web technologies in general, are probably the field of technology with the fastest moving development at the moment. This book is hyper relevant today, but with the rapid transformation of the web landscape, it might have a short "best before" date.


Wednesday, November 23, 2011

Cool things to do with chrome

Leave a Comment
Apart from being an excellent browser for web developers, Google Chrome is also a pretty awesome browser for everyone else. I've collected a few of the cool things you can do with Chrome.

1. Incognito Window
If you ever need to log in to the same service with two different accounts (say, if you're on your wife's computer and both want to check your gmail), open a 'New Incognito Window' (Shift+⌘+N/Ctrll+Shift+N). Cookies and history entries will not affect other windows.

2. Undo a closed tab
Yes, that's right, simply press Shift+⌘+T / Ctrl+Shift+T and the tab you just closed is opened again! AND - you can press it several times!

3. Pinned tabs
Using the same web sites all the time? Wouldn't it be nice if they where always on the same tab so you could use keyboard shortcuts to access them  with ⌘+n / Ctrl+n (n is the tab number you wish to jump to)?
Right click on the tab and select "Pin tab" and you have it! In addition, the tab size get's shrunk to just displaying the webpage's icon, and it's automatically moved as the first tab. Next time you (re)start Chrome, it's still there!

4. Synced chrome
Using chrome on several computers? Setup syncing through your Google account, and your bookmarks and settings is automatically synced across machines. Go to chrome://settings/personal (or preferences > personal) to set it up.

5. Which tab is making the sound
Ever had several tabs opened and suddenly one (or more) of them started playing audio? And you couldn't find which one? Then MuteTab might be just the thing for you!

6. Customized search engines - with shortcuts
If you use a custom search engine/dictionary/encyclopedia often, you might want to consider adding it as a custom search engine with a shortcut.
Go to chrome://settings/searchEngines and fill in the three inputs.
Use %s for the query part of the URL:
Anything you put in the Keyword input will become the shortcut, so in this example, if you type g+ in the location bar you'll be able to search directly (the shortcut for the location bar is -L or Ctrl-L.

7. Developer omnibox
If you're a developer, you certainly don't want to miss the Developer Omniboxes. They allow you to search through API reference documentation for a variety of languages and libraries.

8. Birds on the bleeding edge
If you want to try out the absolutely latest possible Chrome, go for the Canary release. This is the the daily build, but there are other channels as well if you want to try.

9. Tab overview
Got many tabs open and can't find the one you're looking for?
Go to chrome://flags/ and enable Tab Overview. You can now use the three-finger-down-swipe or Ctrl+⌘+T shortcut to have a nice thumbnail view of all open tabs.
Make sure to check out the other stuff there as well, but read the warning first.

10. Isolated chrome 
If you want to have an isolated chrome environment of the same release, you can do this by issuing a different --user-data-dir on startup. This article also explains how to neatly make a convinent shortcut to the different directories you want to create.

Feel free to share YOUR favorite chrome feature below!

Monday, November 21, 2011

Shell gems

Leave a Comment
I found a really good thread via +Patrick Aljord today called Give me that one command you wish you knew years ago on reddit.

It had a few really cool commands that I honestly didn't know about:


Ever been in a situation where you'd like to turn off your laptop, but you just started a long lasting process and forgot to use screen? disown to the rescue:
[1]+  Stopped
$> bg
$> disown
# Process still lives, although terminal is disconnected


How about those simple one-liners that somehow always turn out to
be so long that they really should be done as a script on file instead?
$> ls | perl -nle 'started-out-short-and-neat-but-now-long-and-complex-oneliner'
$> fc
# Opens your $EDITOR and pastes the last command used, ready to be edited and saved!

cd -

cd - is a small little gem that basically changes your current path to
you previous directory (see also pushd and popd):
$/very/long/path/to/somewhere > cd /another/very/long/path/to/somewhere
$/another/very/long/path/to/somewhere > cd -
$/very/long/path/to/somewhere >
You can also use it to copy something from your previous directory:
$/very/long/path/to/somewhere > cp `cd -`/file.txt .


This one speaks for it self:
$> units "100 kg" stones
    * 15.747304
    / 0.063502932

OSX Bonus

For OSX users I tend to find pbcopy and pbpaste really usefull for copying and pasting to the clipboard:
$> ls *.jpg | pbcopy
# Copy file-list to clipboard

I also discovered that my soon-to-be-collegaue +Adam Ohren made a cool tool
called pbfcopy that does the same as pbcopy only for files. Nice!

Monday, October 3, 2011

Automating webcam time lapse

Leave a Comment

Ever wanted to see how stuff changes over time? With a webcam this can be done quite easily.
Set up cron/windows scheduled tasks  to go fetch a new image every minute/hour/day and compile the images to a video.
I've made a really simple script for making a sliding window view of the past 24 hours that can be used on any image feed.

Getting the images and making the video

I wanted to use ffmpeg since it has a solid command line interface and it's available on most platforms. ffmpeg wants the image files in a sequential order, so we need to rename the images after adding the newest image.

I'm not a bash expert (I usually solve stuff like this in Perl - when you have a hammer etc.), so it's probably other ways to make this work, but at least I think my code is quite easy to read and understand:

# Make sure we are in the right directory and that it has an images directory
cd /path/to/where/our/timelapse/stuff/will/be
mkdir -p images

# Delete files older than 1 day
find images/ -name '*.jpg' -mtime +0 -delete

# Download the latest image
curl '' > images/newest.jpg

# Create a prefix so files won't get overwritten in the rename process
prefix="images/$(date +%s)_"

# Rename files, oldest to newest from 0 .. xxx
for oldname in `ls -tr images/*.jpg`
  count=$(( $count + 1 ))
  newname=$prefix$(printf "%.4d.jpg" $count);
  mv $oldname $newname

# Make a video of the images, not overwriting the existing
ffmpeg -r 60 -b 4096k -i "$prefix%04d.jpg" -s 580x384 "$prefix.flv"
mv "$prefix.flv" timelapse.flv

Here I've set the framerate to 60 and the bitrare to 4096 kbit/s. (The less variation in the images the higher the frame rate). With a size of 580 x 384, this gives a file of roughly 11 mb (this will vary with the type of images of course).

Scheduling the process

Depending on your platform, there are several ways of adding scheduled tasks, but on Mac and *nix it's easiest just to add a cron job and silence the script's output so it won't fill your mailbox.

* * * * * bash /path/to/where/our/timelapse/stuff/will/be/ > /dev/null 2>&1

Adding the player

One would think that finding a decent free player capable of streaming video would be easy. I've looked at a lot of players and the only free and really good player I've found is Flowplayer (please leave a comment if you have other good alternatives). It offers lots of configuration options, but what I really like is how easy it is to implement:

<!doctype html> 
    <script type="text/javascript" src="./flowplayer-3.2.6.min.js"></script> 
    <a href="./timelapse.flv"
      style="display:block;width:580px;height:384px;" id="player"></a> 
    <script language="JavaScript"> 
      flowplayer("player", "./flowplayer-3.2.7.swf", {
          clip: { autoPlay: false, autoBuffering: true },

Just download the player and you're ready to go.

The results

I made the video below for a local ski resort.  In order to get a smooth time lapse we need to fetch the images (atleast) every minute, but  rendering the video is quite CPU intensive so this is done once every hour. The result is a "sliding window" from the last 24 hours:

Feel free to copy, although it's nice if you leave a comment and a link back to this article if you find it useful!