Posted by & filed under JavaScript, web developing.

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.

Posted by & filed under JavaScript, web developing.

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