React (Redux) Github Browser

After reading the documentation and having watched some of the excellent videos about redux I wanted to create something to get a deeper understanding. My main goal was to create a simple application, with some sort of API connection. To keep it simple (read no authentication), I chose for the github connection.


The result, is a simple github-browser. Enter a username to receive a list of repos, click one of the repos to view the repo details and urls.


React Redux experience

I still have lot to learn, but I do have a deeper understanding about Redux and I can see the advantages of the immutable states in Redux. It will be more easy to grasp a complex application because of the single state. Besides reduced complexity it will also be more easy to implement cool functionalities like ‘undo delete item’. I would advice to invest in es6 (spread operator and class ) before diving into Redux. You can watch the source and clone it here.

Message queue class

Recently at work I needed to implement a message queue. I like the pattern and I think I will need it more often in the future. I recreated the message queue with a class for personal reference and study purposes.


I absolutely like some of the new features: for example proper ‘this’ binding with the arrow functions and parameter defaults in function.


you can see the full code below, or get the example from my github account

 * MessageQueue create notification messages
class MessageQueue {

     * constructor optional container and delay
    constructor(container = document.getElementById('messageContainer'), delay = 5000) {
        this.messageQueue = [];
        this.container = container;
        this.delay = delay;

    clearMessages() {
        this.container.innerHTML = '';

    displayMessages() {
        let messageFrag = document.createElement('div');

        // clear

        for (let index = 0; index < this.messageQueue.length; index++) {
            let message = document.createTextNode(this.messageQueue[index].text);
            let flash = document.createElement('div');




    remove() {

     * add messages optional type (CSS class)
    add(message, type = 'error') {
        let msg = {
            text: message,
            index: this.messageQueue.length,
            msgType: type,

        setTimeout(() => this.remove(), this.delay);


Feel free to modify and extend the code, to run the code you need to install babel-cli and run the following watch statement

babel messagequeue.js --watch --out-file messagequeue-compiled.js

Designing for Behavior Change, Book review


  • Author: Stephen Wendel
  • publisher: O’Reilly Media ( No Starch Press )
  • pages: 400


Designing for behavior written by Steve Wendel, is an excellent book guiding developers and entrepreneurs, managers in making behavior changing apps or webapps that really work.

The fact that the book takes a, practical approach based on academic literature and personal experiences of the author makes it valuable. Many of the experiences comes from his dayjob, Working as a Pricipal Scientist at HelloWallet, nevertheless most of the examples in the book are taken form a daily live perspective.

Decision process

The book gave me a clear insight and made me conscious about my and others brain and its decision process. And of course which steps should be taken to build an “habit” changing app. And more importantly how the app should tested, refined and reevaluated.

The book never leaves the main “brain decision flow”. The CREATE funnel

  • Cue: The user needs to think about something related to your product
  • Reaction: The mind reacts is the thought appealing enough to do something with it or does the user dislike the thought.
  • Evaluation. How much effort will the effort take and will I be rewarded
  • Ability. The person must actually be able to act some actions might not be possible driving a car for example, or doesn’t like to run in the rain when a fitness bracelet gives a notification
  • Time pressure. The user must have the time, or be pressurized enough to drop the current tasks or occupation.

This flow returns throughout the book and makes it sure that you never forget that there is a long process/ action sequence necessary before the user, will download your app. And if the app is downloaded, the sames CREATE sequence is necessary for the user to use your app to change behavior every time.

The book also makes it clear that most apps and webapps still have a difficulty to keep the main focus on the main task the app is for. This is a known lesson but forgotten easily through the lifetime of an app / webapp

One minor issue with the book is the localized content, for example using America’s pension/retirement fund 401k to illustrate principles. This makes it harder to understand for non americans.


Overall I surely can recommend this book, especially for developers who like to build ideas before they have given ideas a proper thought or dicussed them with others. Myself included 😉

The books product page