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

Espruino Pico received

I was awaiting it for some time, until yesterday. It is amazing easy to play with hardware with espruino. It is easy to transfer my daily web workflow onto hardware. Still lots of thing to learn, hence I feel the the learning curve of Espruino is a very rewarding one ;-). See below for my first very small tinkering project with the Espruino Pico.

Controlling servo with distance sensor



var servo = require("servo").connect(B7);

var sensor = require("HC-SR04").connect(B3,B4,function(dist) {
  //module output in cm
  if(dist <= 20){
    servo.move(0.5, 500);
  if(dist >= 30){
    servo.move(1, 500);
setInterval(function() {
  //send pulse
}, 500);

As you can see the code is very compact. The possibility to console.log sensor reading in the console is priceless!