DevFest 2013 Berlin

Making Music With JavaScript and Gamepads

JS AudioContext

Gamepad API in Browser

JavaScript parseInt is sometimes not enough!

after 2 hours I finally figured out, that you can not rely on a single parseInt(...), see

http://jsfiddle.net/8pPL9/9/

parseInt is used the first time during reading values from table in JS line 18

comment out JS line 27 and activate JS line 29 and you will see, that the value comparison still works with string insteadt of int values


Test-Code from jsfiddle

<div id="table_div">
    <table border="1">
        <tr><td>Value 1</td><td>2</td></tr>
        <tr><td>Value 2</td><td>3</td></tr>
        <tr><td>Value 3</td><td>10</td></tr>
    </table>
</div>

var tableEl = document.getElementById("table_div").getElementsByTagName("table")[0];
var rowsEl = tableEl.getElementsByTagName("tr");
var chartDatasetData = [];
for ( var r = 0; r < rowsEl.length; r++ ){
    //log("in row " + r);
    var columnsEl = rowsEl[r].getElementsByTagName("td");
    for ( var c = 0; c < columnsEl.length; c++ ){
        //log("in col " + r);
        if(c > 0){
            var columnData = chartDatasetData[c-1];
            if( columnData == undefined ){
                chartDatasetData[c-1] = [];
            }
            var columnRowData = chartDatasetData[c-1][r];
            if( columnRowData == undefined ){
                chartDatasetData[c-1][r] = [];
            }
            var iValue = parseInt(columnsEl[c].innerHTML);
            log("pushing value " + iValue + " to " + (c-1) + "," + r);
            chartDatasetData[c-1][r].push(iValue);
        }
    }
}
var newData = [];
for (var j=0; j<chartDatasetData[0].length; j++){
    //data has to be casted to int again!!
    newData.push(parseInt(chartDatasetData[0][j]));
    // this will not work
    //newData.push(chartDatasetData[0][j]);
}

var upperValue2 = Number.MIN_VALUE;
var lowerValue2 = Number.MAX_VALUE;
for (var j=0; j<newData.length; j++){
    log(newData[j] + ">" + upperValue2 + " = " + (newData[j] > upperValue2));
    if ( newData[j] > upperValue2) {
        upperValue2 = newData[j]
    };
    log(newData[j] + "<" + lowerValue2 + " = " + (newData[j] < lowerValue2));
    if ( newData[j] < lowerValue2) {
        lowerValue2 = newData[j]
    };
}
log("Table-Values: min " + lowerValue2 + ", max " + upperValue2);

function log(msg){
    document.getElementById("log").innerHTML = document.getElementById("log").innerHTML + msg + "<br/>";
}

DevFest 2013 Berlin

Cutting Edge Web Applications

Code

JS utility lib: underscore.js

Framework for Single Page Sites: Angular JS

Build

Building WebApp with Grunt
- like Ant or Maven

Test

- Quality Check on SourceCode: JSLint
- JS Unit Testing: Jasmine
- WebApp Integration Testing: Selenium

Server

node.js
- google v8 engine (c++) kernel

Measure

parse your logfile for errors
- logstash
- kibana

measure Visits
- Google Analytics
- Comscore

Spring Roo Rest Service with JSON Interface

Here are the steps to build up a REST Service with Spring Roo from the scratch! This Service is accessible via JSON requests.

I did this on my ubuntu 11.10 system. Open JDK and Sun Java were already installed. 

1. Java Enrivonment
   - Sun Java is installed by default at /usr/lib/jvm/java-6-sun-1.6.0.26/
   - I moved the /usr/bin/java , which was pointing to the other java installation ( open JDK ), to /usr/bin/javaopen
   - renewed /usr/bin/java by:
   > sudo ln -s /usr/lib/jvm/java-6-sun-1.6.0.26/bin/java /usr/bin/java
   > sudo export JAVA_HOME= /usr/lib/jvm/java-6-sun-1.6.0.26
   
2. Install Maven2
   > sudo apt-get install maven2
   
3. Install Spring Roo ( Version 1.2.0 )
   - Download spring-roo.zip from springsource site and unzip it somewhere. (let's call it $ROO_HOME)
   > sudo ln -s $ROO_HOME/roo.sh /usr/bin/roo
   
   
4. Setup Roo Project> mkdir myrooproject
   > cd myrooproject
   > roo
   roo> project --topLevelPackage org.klarblick
   roo> hint
   roo> jpa setup --provider HIBERNATE --database HYPERSONIC_IN_MEMORY
   roo> hint
   roo> entity jpa --class ~.domain.Note
   roo> hint
   roo> field string note
   roo> json all
   roo> web mvc setup
   roo> controller all --package ~.controller
   roo> web mvc json all
   roo> quit
   
5. Start Roo Project
   > mvn tomcat:run
   
6. Test Roo Project
   - browse to http://localhost:8080/klarblick and create a new Note
   - get a REST Client for your browser
   - JSON GET Request on: http://localhost:8080/klarblick/note/1
   Don't forget the request header: Accept: application/json