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.

message-queue

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

Code

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
        this.clearMessages();

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

            flash.classList.add('flash-message');
            flash.classList.add(this.messageQueue[index].msgType);
            flash.appendChild(message);

            messageFrag.appendChild(flash);

        }
        this.container.appendChild(messageFrag);
    }

    remove() {
        this.messageQueue.shift();
        this.displayMessages();
    }

    /**
     * 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);

        this.messageQueue.push(msg);
        this.displayMessages();
    }
}

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

Posted by & filed under JavaScript, Uncategorized.

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

IMG_6468

Code

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
  sensor.trigger(); 
}, 500);

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

Posted by & filed under books, web developing.

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

Introduction

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.

Conclusion

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

Posted by & filed under CSS, html, web developing.

Get the source at Github

I struggled with SVG, creating an early protoype of a mobile webapp. I wanted to create an interesting background for the webapp. It needs to be resolution independent and scalable without quality loss, SVG seems the best choice because of the vectors.

My initial thought was to make a 9-slice attempt for SVG. However since the app should be used with a phone in portrait orientation and I felt that repeating parts of the background would not be sufficient for final app. Therefore stretching should be full isze and strechable.

Steps

First I created an illustrator file with the symbol sprayer to create a framelike graphic, I exported it as svg with the default setting with “Save for web”. You can see the example below.

Background in illustrator for SVG export

Secondly make sure the svg element has the folowing style:

	position: absolute;
	width: 100%;
	height: 100%;

The trick is to make sure that the width and height of the input SVG in pixels matches the width and height of the viewbox, and that the start corner matches you desired result. Viewing the examples makes it more clear.

Examples

example : desired results

SVG properties

As you can see Illustrator defaults the viewbox as desired. Is moves the mask (viewbox) to the position 166.646, 114.09 of the dimension of the available vector art in the drawing.

	 x="0px" 
	 y="0px" 
	 width="100%" 
	 height="100%" 
	 viewBox="166.646 114.09 720 1280"
	 preserveAspectRatio="none"
	 meetOrSlice="slice"

example : undesired result now it shows all the artwork

SVG properties

In this example the viewbox contains all the available vectors in the illustrator file.

	 x="0px" 
	 y="0px" 
	 width="100%" 
	 height="100%" 
	 viewBox="0 0 994 1517"
	 preserveAspectRatio="none"
	 meetOrSlice="slice"

Code

The examples and the illustrator file can be downloaded from Github

 

Posted by & filed under 3D, JavaScript, web developing.

Get the source at Github

For a while I wanted to experiment with audio visualisation in the browser, with the new functionality in Chrome. My graduation project concerned the other way around, namely the sonification of the dom of any webpage. To create this demo I mainly used, some html5rocks info

Example

Check the “chrome only” demo

WebGl audio visualisation

Parts explained

The workhorse of the visualisation is the “webkitAudioContext” currently available in Chrome. With the webkitAudioContext it is possible to create an audio analysis. The following snippet is the setup for the analysis .

     // create the analyser
     var context = new webkitAudioContext();
     var analyser = context.createAnalyser();

    //initialize
    function onLoad(e) {
                startThreeJs();
                var source = context.createMediaElementSource(audio);
                source.connect(analyser);
                analyser.connect(context.destination);
                rafCallback();
     }
     window.addEventListener('load', onLoad, false);

The rafCallback function is where the visualisation happens, the data of the audio is stored in an bytearray every available frame. For this visualisation I only used 15 ‘frequency’ bars to keep the animation smooth, for real purposes you should use the whole spectrum.

     // bind the audio data to the web gl cubes
     function rafCallback(time) {
                window.requestAnimationFrame(rafCallback);

                var freqByteData = new Uint8Array(analyser.frequencyBinCount);
                analyser.getByteFrequencyData(freqByteData);

                for (var j = 0; j < MAX_BAR; j++) {
                    var magnitude = freqByteData[j];
                    var delta = magnitude / 100;
                    cubes[j].position.y = cubesPos[j] + delta * 0.25;
                    cubes[j].scale.y = delta;
                    // categorize color on amplitude
                    var color =  0xf5a711;                
                    if( delta > 0 && delta < 1 ){
                       color = 0xf5a711;
                    }else if( delta > 1 && delta < 2 ){
                        color = 0xf55c11;
                    }else{
                        color = 0xcd0505;
                    }
                    cubes[j].material.color.setHex( color );
                }
      }

Feel free to use and abuse the source