Dinis Cruz Blog

Adding KarmaJS support to WebStorm to automagically run tests on file changes (and test UI with SublimeText, Chrome and Cmd.exe)

noreply@blogger.com (Dinis Cruz) — Thu, 20 Jun 2013 11:08:00 +0000

On the AngularJs and KarmaJS theme (see A small AngularJS Jasmine test executed by KarmaJS and the related posts linked at the bottom), here is my first attempt at using Karma to test AngularJS code inside TeamMentor.

I’m using WebStorm instead of VisualStudio, since for Javascript coding WebStorm is MUCH better/faster/cleverer, specially since it has good support for AngularJs and Jasmine (with KarmaJS support easily added, as we are about to see).

Also shown below is a cool tool I created that hijacks windows from SublimeText, Chrome and Cmd.exe windows into the same UI (an O2 Platform .NET Script)

Here is the directory structure:

... with Karma.config.js looking like this:

module.exports = function(karma)
{
    karma.configure({
        frameworks: ['ng-scenario'],

        files:
            [
                '../Tests/**/*.Spec.js'
            ],

        urlRoot: '/__karma/',

        autoWatch: true,

        proxies: {
            '/'     : 'http://localhost:12120/',
            '/Tests': 'http://localhost:12120/AngularJs/Tests/'

        },

        //browsers: ['Chrome'],

        reporters: ['dots'],
        //reporters: ['progress'],
        plugins: [
                    'karma-ng-scenario',
                    'karma-chrome-launcher'
                    //,'karma-firefox-launcher'
                 ]  ,
        //logLevel: karma.LOG_DEBUG
        logLevel: karma.LOG_INFO
    });
};

… Simple.html like this:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" __content="IE=EmulateIE9" />
    <title>Simple AngularJS page</title>
    <script src="/Javascript/angularJS/1.0.5/angular.min.js"></script>
</head>
<body>
<div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
</div>
</body>
</html>

… Simple.Spec.js like this:

describe('Test Angular Simple page', function()
    {
        beforeEach(function() 
            {            
                browser().navigateTo('/Tests/AngularJS/Simple.html');            
            });
        it('Open Webpage and check URL', function()
            {                
                expect(browser ().window().path()).toBe("/Tests/AngularJS/Simple.html");
                expect(browser ().location().path()).toBe("");
                browser().navigateTo('/Tests/AngularJS/aaa.html');
                expect(browser ().window().path()).not().toBe("/Tests/AngularJS/Simple.html");
                expect(browser ().window().path()).toBe("/Tests/AngularJS/aaa.html");
            });

        it('Set Field value and check Angular scope update', function()
            {
                var testValue = "This is a value";
                var expectedValue = "Hello "  + testValue + "!";
                input('yourName').enter(testValue);
                expect(element('.ng-binding').text()).toEqual(expectedValue);
            });

        it('get path value manually (using setTimeout)',function()
            {
                var path = browser().window().path();
                console.log("(before timeout) path value = " + path.value );
                setTimeout(function()
                {
                    console.log("(after timeout) path value = " + path.value );
                    //expect("value").toBe("/123");

                },200);
                sleep(1);
            });
    });

… and MarkDown.Editor.Spec.js currently with just

describe('Markdown Editor - View funcionality', function()
    {
        it("Should open", function()
            {
                browser().navigateTo('/Markdown/Editor');
                expect(browser ().window().path()).toBe("/Markdown/Editor");
                expect(browser ().location().path()).toBe("");
                //sleep(10);
            });
    });

This is how I configured Karma to run on WebStorm:

Here is KarmaJS execution log:

Here are two connected KarmaJS Runners (one in IE and one in Chrome)

And finally, here is the (super useful) AngularJS: Scenario Test Runner view, in a collapsed state:

… and in an expanded state:

With this set-up KarmaJS is configured to run continuously and to monitor any file changes, which is really powerful, since it allows for continuous development and testing.

For example (to see the automagically execution in action), here is what the WebStorm UI looks like:

… with an Javascript error: (KarmaJS execution triggered on Save) :

… without the error: (KarmaJS execution triggered on Save)

This is a really nice environment to quickly develop AngularJS apps, specially since the tests are super quick to execute and we can control what tests are executed (for example by creating multiple karma.conf.js files)

O2 Platform Test GUI (created by hijacking 3 processe' windows)

I also created a test GUI using the O2 Platform’s window-handle Hijack capabilities, which looked like this:

In the image above:

The host process is the O2 Platform Util - Win32 Window Handle Hijack (4x host panels ).h2 script/tool (which is a .Net app)

The left-hand side the Sublime Text editor (which is a C++, Pyhton app)

The top-right is Chrome (which is C++ app)

The bottom-right is cmd.exe (C++ app) running the command karma start karma.conf.js in the E:\TeamMentor\TM_Dev Repos\TM_Dev_Dinis\Web Applications\TM_Website\AngularJS\Karma folder

All in a nice, self-contained process/environment

Note that there are 4 separate process at play here (O2 Platform, Sublime, Chrome and Cmd.Exe w/ Karma)

Related AngularJS and KarmaJS posts:

A small AngularJS Jasmine test executed by KarmaJS

noreply@blogger.com (Dinis Cruz) — Thu, 20 Jun 2013 10:51:00 +0000

When I try to understand how a particular technology works I always like to create a simple test case with a small number of moving parts.

This post shows such example for an AngularJS page, a Jasmine test, a NodeJS web server and a KarmaJS execution cycle.

The files used/customised were based on the KarmaJS test/e2e/angular-scenario example:

Let's look at each file's contents and what they do

1) angular.min.js is the latest version of AngularJS

2) index.html is a simple AngularJS example:

<!DOCTYPE html>
<html xmlns:ng="http://angularjs.org" id="ng-app" ng-app>
<head>
  <meta charset="utf-8">  
  <title>Sample Angular App</title>
  <script src="angular.min.js"></script>
</head>
<body>
  <div>
    <label>Name:</label>
    <input type="text" ng-model="yourName" placeholder="Enter a name here">
    <hr>
    <h1>Hello {{yourName}}!</h1>
  </div>
</body>
</html>

3) karma.conf.js is a reduced to the normal KarmaJS config file

module.exports = function(karma) 
    {
        karma.configure(
              {
                  // generic
                frameworks    : ['ng-scenario'],                        
                urlRoot        : '/__karma/',        
                autoWatch    : true,                                
                plugins     : ['karma-ng-scenario'],
                
                //project specific
                proxies        : { '/': 'http://localhost:8000/'},                            
                files        : ['singleTest.js'],
                
                //run specific                
                singleRun : true,                
            });
    };

4) singleTest.js checks if AngularJS is working as expected

/** A Sample Angular E2E test */

describe('SimpleTest', function() {
   
  it('A small Angular Test', function() {
    browser().navigateTo('/index.html');
    input('yourName').enter('A Pirate!');
    expect(element('.ng-binding').text()).toEqual('Hello A Pirate!!');
  });    
});

5) server.js is a working Web NodeJS server (also reduced for easier reading):

var sys = require('sys'),
    http = require('http'),
    fs = require('fs'),
    url = require('url'),
    events = require('events');

var DEFAULT_PORT = 8000;

function main(argv) {
  new HttpServer({
    'GET': createServlet(StaticServlet),
    'HEAD': createServlet(StaticServlet)
  }).start(Number(argv[2]) || DEFAULT_PORT);
}

function escapeHtml(value) {
  return value.toString().
    replace('<', '&lt;').
    replace('>', '&gt').
    replace('"', '&quot;');
}

function createServlet(Class) {
  var servlet = new Class();
  return servlet.handleRequest.bind(servlet);
}

/**
 * An Http server implementation that uses a map of methods to decide
 * action routing.
 *
 * @param {Object} Map of method => Handler function
 */
function HttpServer(handlers) {
  this.handlers = handlers;
  this.server = http.createServer(this.handleRequest_.bind(this));
}

HttpServer.prototype.start = function(port) {
  this.port = port;
  this.server.listen(port);
  sys.puts('Http Server running at http://127.0.0.1:' + port + '/');
};

HttpServer.prototype.parseUrl_ = function(urlString) {
  var parsed = url.parse(urlString);
  parsed.pathname = url.resolve('/', parsed.pathname);
  return url.parse(url.format(parsed), true);
};

HttpServer.prototype.handleRequest_ = function(req, res) {
  var logEntry = req.method + ' ' + req.url;
  if (req.headers['user-agent']) {
    logEntry += ' ' + req.headers['user-agent'];
  }
  sys.puts(logEntry);
  req.url = this.parseUrl_(req.url);
  var handler = this.handlers[req.method];
  if (!handler) {
    res.writeHead(501);
    res.end();
  } else {
    handler.call(this, req, res);
  }
};

/**
 * Handles static content.
 */
function StaticServlet() {}

StaticServlet.MimeMap = {
  'txt': 'text/plain',
  'html': 'text/html',
  'css': 'text/css',
  'xml': 'application/xml',
  'json': 'application/json',
  'js': 'application/javascript',
  'jpg': 'image/jpeg',
  'jpeg': 'image/jpeg',
  'gif': 'image/gif',
  'png': 'image/png',
  'manifest': 'text/cache-manifest'
};

StaticServlet.prototype.handleRequest = function(req, res) {
  var self = this;
  var path = ('./' + req.url.pathname).replace('//','/').replace(/%(..)/g, function(match, hex){
    return String.fromCharCode(parseInt(hex, 16));
  });
  var parts = path.split('/'); 

  fs.stat(path, function(err, stat) {
    if (err)
      return self.sendMissing_(req, res, path);
    return self.sendFile_(req, res, path);
  });
};

StaticServlet.prototype.sendFile_ = function(req, res, path) {
  var self = this;
  var file = fs.createReadStream(path);
  res.writeHead(200, {
    // CSP headers, uncomment to enable CSP
    //"X-WebKit-CSP": "default-src 'self';",
    //"X-Content-Security-Policy": "default-src 'self'",
    'Content-Type': StaticServlet.
      MimeMap[path.split('.').pop()] || 'text/plain'
  });
  if (req.method === 'HEAD') {
    res.end();
  } else {
    file.on('data', res.write.bind(res));
    file.on('close', function() {
      res.end();
    });
    file.on('error', function(error) {
      self.sendError_(req, res, error);
    });
  }
};

StaticServlet.prototype.sendError_ = function(req, res, error) {
  res.writeHead(500, {
      'Content-Type': 'text/html'
  });
  res.write('<!doctype html>\n');
  res.write('<title>Internal Server Error</title>\n');
  res.write('<h1>Internal Server Error</h1>');
  res.write('<pre>' + escapeHtml(sys.inspect(error)) + '</pre>');
  sys.puts('500 Internal Server Error');
  sys.puts(sys.inspect(error));
};

StaticServlet.prototype.sendMissing_ = function(req, res, path) {
  path = path.substring(1);
  res.writeHead(404, {
      'Content-Type': 'text/html'
  });
  res.write('<!doctype html>\n');
  res.write('<title>404 Not Found</title>\n');
  res.write('<h1>Not Found</h1>');
  res.write(
    '<p>The requested URL ' +
    escapeHtml(path) +
    ' was not found on this server.</p>'
  );
  res.end();
  sys.puts('404 Not Found: ' + path);
};

// Must be last,
main(process.argv);

To see this in action

1) start the web server using start node server.js

2) start karma with karma start karma.confi.js

3) on a local browser open http://localhost:9876/__karma which will execute the test

Since we have singleRun set to true (in karma.conf.js), the karma process ends after each execution, which means that the captured browsers will go into a ‘wait state’ (i.e. waiting for another karma server to come back to life)

4) notice that back in karma, the tests executed ok:

So here it is, a petty small example of a really powerful combination of technologies (and UnitTests workflows)

NOTE: while creating this post, I wrote an O2 Platform C# script to help

this script created a nice integrated test UI

Which allowed me to (in the same window) make changes and see its impact

C# script of UI shown above

var topPanel = "PoC - Karma and Angular run".popupWindow(1200,700);
//var topPanel = panel.clear().add_Panel();
//var textBox = topPanel.clear().add_RichTextBox();
var codeDir  = @"E:\_Code_Tests\AngularJS\angular-scenario";
var karma      = @"C:\Users\o2\AppData\Roaming\npm\node_modules\karma\bin\karma";

var testPage = "http://localhost:8000/index.html";            
var testRunner = "http://localhost:9876/__karma/";

var karmaConfig = codeDir.pathCombine("karma.conf.js");
var serverConfig = codeDir.pathCombine("server.js");
var unitTestFile = codeDir.pathCombine("e2eSpec.js");

Process karmaProcess = null;

Action startWebServer = 
    ()=>{
            Processes.startProcessAndRedirectIO("node", serverConfig,codeDir,(line)=>line.info());            
        };
        
Action runKarma = 
    ()=>{
            Action<string> consoleOut = 
                (consoleLine)=>  consoleLine.info(); //textBox.append_Line(consoleLine);
            
            var command = "start \"{0}\" ".format(karmaConfig);
            karmaProcess = "node".startProcess("\"" + karma + "\" " + command, consoleOut);            
        };

if (testPage.GET().notValid())
{
    "Staring WebServer".info();
    startWebServer();
    1000.wait();
}
var toolStrip           = topPanel.insert_Above_ToolStrip();
var codeEditor_Test   = topPanel.add_SourceCodeEditor();
var ie_UnitTestRunner = codeEditor_Test.insert_Right().add_WebBrowser_with_NavigationBar();
var ie_Site              = ie_UnitTestRunner.insert_Below().add_WebBrowser_with_NavigationBar();
var codeEditor_Config  = codeEditor_Test.insert_Below().add_SourceCodeEditor();

codeEditor_Test.open(unitTestFile);
codeEditor_Config.open(karmaConfig);
ie_Site.open(testPage);
ie_UnitTestRunner.open(testRunner);
toolStrip.add_Button("Run","btExecuteSelectedMethod_Image".formImage(),()=>runKarma());


runKarma();

//using System.Diagnostics

KarmaJS AngularJS Scenario Test Runner execution variations in IE 7,8,9 and 10 when using AngularJS

noreply@blogger.com (Dinis Cruz) — Thu, 20 Jun 2013 10:24:00 +0000

While trying to get Karma JS to work, I found a number of different behaviours for its AngularJS Scenario Test Runner in IE’s multiple 'compatibility modes'.

TLDR: some of the Jasmine and AngularJS test apis don't work (although Angular does seem to work ok)

Here is the default web page I was using:

Here is the test executed

Here is KarmaJS starting and successfully executing the tests

... in this captured IE browser session:

Just to confirm that the target page works in the multiple IE configurations, here it is running in:

IE 10 , IE9, IE 8:

... and even in IE 7:

Now lets click on the DEBUG button to open the KarmaJS's AngularJS Scenario Test Runner view and see what happens in multiple IE compatibility modes.

IE 10 Works:

IE 10 Compatibility View

IE 9 Fails:

IE 8 Works (WTF!!)

IE 7 Fails

So unfortunately it looks like this technique can't be used to run e2e (end-to-end) tests on AngularJS apps using KarmaJS

If AngularJS doesn’t work on your O2 Platform IE scripts (the fix is to change browser compatibility mode)

noreply@blogger.com (Dinis Cruz) — Thu, 20 Jun 2013 10:16:00 +0000

If when trying to open an AngularJS page inside an O2 Platform script, you see:

... this means that the IE browser embedded in that .NET process is set to run under IE 7

To confirm it, try opening the http://www.whatismybrowser.com and you should see something like:

As mentioned in the set .NET WebBrowser Control to use latest version of IE post to. change it on your system, run this script

... as admin with no UAC

...and now after restarting the O2 Platform process, IE should be on Internet Explorer 9 compatibility mode

... and AngularJS should work:

Note 1: if you control the site you are testing, you can also add this also works to make it work (with the advantage that it is not exe specific)

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9" />

Debugging a weird case of missing module in AngularJS and KarmaJS

noreply@blogger.com (Dinis Cruz) — Wed, 19 Jun 2013 17:48:00 +0000

When I was trying the Running KarmaJS’s AngularJS example test/e2e/angular-scenario (on Chrome) I hit on the the following weird behaviour.

TLDR; the solution was to run npm install –g karma@canary

Setup

Chrome window opened in:

... a local website at port 8000:

… which is a nodeJS powered website, started using node server.js (below)

A simple (as I could make it) Karma.config.js file

.... and AngularJS test

Scenario A) Running from folder with karma clone (and npm install)

karma start ..\angular-scenario\karma.conf.js works OK

Scenario B) running from parent folder

karma start angular-scenario\karma.conf.js fails with a module is not defined error

So what I think is happening is that because I run npm install on the karma folder (the one I got from a GitHub clone), there are more modules in there than in the global karma (which I got when I installed karma using npm install –g karma)

At the moment there are 49 modules in the GitHub karma:

And 20 modules in the global karma install

So let’s try running npm install on this folder

And now there are 33 modules installed:

but that still didn’t work :(

At this stage I remembered reading something about installing the latest version of karma (globally), which is probably what I’m getting from the github clone, and that could explain the different number of modules.

So I executed npm install –g karma@canary

which installed ok:

Now runnig the scenario B) case throws a different error:

It looks that we also need install the karma-ng-scenario module

And now it works :)

Running KarmaJS’s AngularJS example test/e2e/angular-scenario (on Chrome)

noreply@blogger.com (Dinis Cruz) — Wed, 19 Jun 2013 17:43:00 +0000

To learn and get an idea of how Karma (the 'Spectacular Test Runner for JavaScript') works, and how it can be used to create browser automations tests, here are the steps I took to get the test/e2e/angular-scenario example to work.

It all started with a clone of: git@github.com:karma-runner/karma.git

With this KarmaJS test example (see below), being the one that we are going to use:

I then opened an nodejs command prompt and navigated to the folder shown above:

... used node server.js to start a local webserver

... on port 8000:

The test case we are using (on KarmaJS's test/e2e/angular-scenario) is a simple AngularJS example, which just consumes the angular-min.js file model attribute:

... and uses angular to populate the {{yourName}} value dynamically (wired to the input field via the ng-model="yourName")

Next we are going to run this Jasmine ('Behavior-Driven Development framework for testing JavaScript code') test using KarmaJS

... which should work with just: karma start karma.conf.js

... but it didn't

There is a module dependency missing, which in this case can be resolved by running this command from the root of the karma repository:

UPDATE: the issue above was caused by the fact that I had an the official released version of karma installed globally which is the one that was running when I tried it on the 'test/e2e/angular-scenario' folder'

And now (based on an option from the karma.conf.js) a Chrome window opened up:

Clicking on the Debug button:

… we can more details on the test that failed:

In this case the problem is that the ‘proxy mapping’ that karma does is not correct

If we look at the karma.config.js file

.... and the unit test brower().navigateTo command

... we can see that karma will try to open /index.html from http://localhost:8000/test/e2e/angular-scenario/index.html

That is not going to work since the page we want it is on http://localhost:8000/index.html (which happened because we started node server.js on the …/test/e2e/angular-scenario folder)

One way to solved this, is to change the ‘proxies’ mapping to ‘/’ : ‘http://localhost:8000/’

... and after stopping and starting the karma server:

all tests pass :)

Changing and executing tests in real time

What is really cool with this set-up is that (as long as the karma process is running), because the autoWatch value (in karma.config.js) was set to true, if I make a change to the test file:

… the karma runner will detect the changes and rerun the tests (note that there are 2 tests executed now)

This 2nd test shows an interesting behaviors since it will make the test wait for 15 seconds (with the browser window opened):

Note how the time execution time for the 2nd test was ~15 secs

And if we modify the 2nd test to:

... the execution test UI will look like this (note that the execution was triggered when I saved the test file :)

NOTE 1: to solve the ENOENT error shown the first screenshot of localhost:8000, we just needed to a favicon.ico file to the lib/nodeserver folder

… and now the error doesn’t happen anymore

Note 2: when trying to run Karma for the first time, I had a prob with grunt where it was failing with an Error: spawn ENOENT:

... this was resolved by installed the 32bit version of nodeJS and running npm install on the karma folder (after cloning it)

Trying to running HuBot (and being stuck on ‘ERROR XMPP authentication failure’)

noreply@blogger.com (Dinis Cruz) — Sun, 16 Jun 2013 16:08:00 +0000

Sitting on a Starbucks in a Saturday morning (after dropping the kids on PSSA) it felt like a good time to try HuBot (repo is here).

Since I already had NodeJS installed on my test VM, I stated with the Deploying Hubot onto Windows instructions:

Running the installer, downloads a bunch of missing modules:

Which worked but, but when I started Hubot for the first time I had this error

I turned out to be because HuBot defaults to port 8080

… which I already had a server running there.

So after stopping that service, HuBot started with no errors

Since this is the first time I’m running HuBot I don’t really know what to do :)

And the browser didn’t help too:

Weirdly the main HuBot website didn’t had a ‘start here’ article, so I started digging through the documentation and found:

... which implied that /hubot/version was a valid url, which it was :)

So we know the HuBot is alive :)

I googled a bit and found http://server.dzone.com/articles/installing-and-running-hubot which looked like a good place to start:

I skipped the installation bit (since we already have HuBot installed) and started here

...which indicates that we should use the ‘hubot’ prefix to talk with Hubot

Good, HuBot is also alive from there :)

Next step was to install OpenFire and Spark, which you can read how I did it here

It this stage I tried to run the ./bin/hubot script, but I was missing CoffeeScript

After installing coffee-script

… I was able to execute .bin/hubot ok:

… and execute the next instruction from Deploying Hubot onto Windows which is hubot –c ./my-bot

This created a folder called my-bot in the .bin folder (UPDATE: this should had been done of the folder above (i.e. not inside the .bin folder)

... containing what looks like the contents of a Git repo:

The next steps from Deploying Hubot onto Windows are to:

After making the config changes I executed npm install

... which failed because of this error:

... caused by the lack of python:

Here is the script I used to install python 3.3.2:

Here is the python shell being automatically picked up from the command line (which was not the default option in python install (you will need to manually check the box to add Python to system path)

But running npm install still fails because it doesn’t like the python 3.3.2

So I installed Python 2.7 with this script:

After the install I set the PYTHON environment variable to:

And now the npm install worked with just a couple warnings (note: I had to clear the node-gyp compilation cache before):

Trying to run HuBot (the custom my-bot one) gives this error:

.... which says that we need to install the node-stringprep module, which fails to install with this error:

The error above has nothing to do with node-stringprep , and related to the lack of this environment variable:

We’re getting close, now it starts the connection but we get an authentication failure

which I think is caused by the current environment HUBOT environment variables that I have setup

Lets change the authentication values to the credential used to connect to OpenFire directly using Jabber-net (see Using Jabber-net to talk to OpenFire post) :

And just to make sure, I added those values directly to the xmpp.coffee file

But the Authentication failure still happens:

Looking at the logs

in info.log

in jive.audit*.log (which looks like an xml)

So to see it I quickly wrote this script:

...which showed this formated view of the xml content:

... which unfortunately didn't help, because there were no any references to the o2-user account

Note: if I remove the preferredSaaslMechanism value, I get no errors or log messages:

STOPPING FOR NOW

At this stage I can’t spend more time on this, so I’m going to blog as it is and ask for help to the the HuBot community

Using Jabber-net to talk to OpenFire

noreply@blogger.com (Dinis Cruz) — Sun, 16 Jun 2013 16:02:00 +0000

After Installing Ignite’s OpenFire and Spark (IM server and client), using Jabber-Net, I wrote a O2 Platform C# script to access OpenFire, which will:

Connect to a local OpenFire server
Login as a user
Find the HuBot room
Join that room
Post public messages to it

(see end of post for the source code)

The script can be compiled as a stand-alone exe:

....which when executed will show a list of current messages

... from the HuBot chat room:

To see the interaction between both tools, we can write a message on the Spark client (on the bottom-left):

... which shows in the Jabber Test tool

... and a message from the Jabber Test tool (on the top-right)

... will show in Spark

Troubleshoot: If you try this script and get a pink treeview, it means the connection or login failed:

Source Code used to create the Jabber Test tool

//var credentialsFile = @"..\_UserData\TestAccounts.xml".inTempDir();
//var account = credentialsFile.credential("OpenFileClient");
var userName = "o2_user"; 
var password = "aaaaa"; 

var firstMessage     = "Hello room";
var serverName      = "win-fgnq5aarj8o";
var roomName         = "hubot";

var jabberClient = new JabberClient()
    {
        Server = "localhost",
        Port = 5222,
        User = userName,
        Password = password,
        AutoStartTLS = false
    };
    
var conferenceManager = new ConferenceManager
        {
            Stream = jabberClient
        };

var jid     = new JID(roomName, "conference."+serverName,userName);
var room     = conferenceManager.GetRoom(jid);               


//var topPanel = panel.add_Panel(true);
var topPanel = "Jabber Test".popupWindow()
                            .insert_LogViewer();
var treeView = topPanel.add_TreeView();

Action<string,string> showMessage = 
    (from,text) =>{
                     var nodeText = "{0}: {1}: {2}".format(DateTime.Now.ToShortTimeString(), from,text);
                     treeView.add_Node(nodeText).selected();                     
                  };
                 
Action<string> sendPublicMessage =
    (text)=>{
                room.PublicMessage(text);    
                showMessage(userName, text);
            };    
    
room.OnJoin += (r)=>
        {                            
            treeView.white();
            sendPublicMessage(firstMessage);
        };
room.OnRoomMessage+= (sender,message)=>
        {
            "[OnRoomMessage] {0}".info(message);            
            showMessage(message.From.User, message.Body);                    
        };
                        
Action onAuthenticate = 
    ()=>{    
            "[OnAuthenticate]".info();                         
            room.Join();
        };
Action onConnect = 
    ()=>{
            "[OnConnect]".info();             
            //O2Thread.mtaThread(()=>jabberClient.Login());  // this wasn't working all the time            
        };
        
jabberClient.OnConnect         += (sender,stream)=> onConnect(); 
jabberClient.OnAuthenticate += (sender)=> onAuthenticate(); 

topPanel.insert_Above(20).add_LabelAndComboBoxAndButton("Message","","Send",sendPublicMessage);

treeView.pink();

jabberClient.Connect();

200.wait();
jabberClient.Login();                                     // have to trigger this from here


//var state =  (BaseState)jabberClient.property("State");
return "done";

//using jabber;
//using jabber.client
//using jabber.connection
//Installer:JabberNet_Installer.cs!JabberNet/jabber-net.dll
//O2Ref:JabberNet/jabber-net.dll

NDepend Query to visualize call flows

noreply@blogger.com (Dinis Cruz) — Sun, 16 Jun 2013 12:08:00 +0000

After installing NDepend and writing a first simple CQL query, it was time to try something more interesting, namely a query that could help me write rules to find security vulnerabilities like SQL Injection.

So I decided to write a rule to find out the call flows into/from a particular method, ie ‘Who calls this method and who it calls?’

With NDepend enabled on the source code of TeamMentor/Master , I opened a class and chose this option:

... which opened this Dependency Graph

If I now select a method, an helper tab will appear below:

... which for example, explains how to generate a call graph:

As per the instructions above, to create a call-graph, I select the direct/indirect callers

... which creates a (custom) CQL rule and executes it:

Following the 2nd step of the instructions, I clicked on the ‘Export to Graph’ button, and I got this nice graph:

Changing the query a little bit (from m.DepthOfIsUsing to m.DepthOfIsUsedBy )

Gives us a recursive mapping of all methods called by the original method, ie the call-flow FROM the current method (the first graph gave us the call-flow INTO the current method):

And I got this script right (see below), this is how we get both graphs together:

.... which will create this graph:

Now think of a similar view the attack surface at the top and the vulnerable APIs (like SQL execute) at the bottom :)

And although this would just be a call-flow analysis (vs taint analysis) my experience in doing similar analysis with the O2 Platform has shown that we can find A LOT of vulnerabilities this way (i.e. without needing the full taint analysis engine).

Customizing my first NDepend CQL rule (Potentially dead Methods)

noreply@blogger.com (Dinis Cruz) — Sun, 16 Jun 2013 11:58:00 +0000

After Installing NDepend, I was looking at the rules execution result of TeamMentor/Master and saw that there were a result of 21 Potential dead methods:

... which when clicked opened up the rule source code and the 21 matched methods:

Double clicking on one of the methods, will open the selected method in Visual Studio (it would be nice it opened inside this UI), which in this case looked like this:

It looks like we have 21 'potentially dead' matches, because the script is not picking up the fact that this is a Unit Test (although it is weird why the other NUnit test also don't show up as 'potential dead methods').

So I read the C# CQL rule that opened up above the results:

...and decided to try to see how hard it would be to customize it.

The compilation and execution is quite fast, with errors showing below

So, I duplicated the … .HasAttribute("System.Runtime.Serialization.OnDeserializedAttribute". … line

… changed it to NUnit.Framework.TestAttribute

… and the results where shown almost immediately (note how there are only 8 methods matched now)

I have to say that this was a really nice experience and I’m looking forward to taking these CQL rules for a bigger spin.

I wonder if they could be used to create SAST rules, namely rules to find SQL Injection or XSS :)

Installing NDepend

noreply@blogger.com (Dinis Cruz) — Sun, 16 Jun 2013 11:51:00 +0000

After a nice correspondence with NDepend’s Patrick Smacchia who offered me a license of in exchange for some blog posts on how I used it, here is my first one covering the installation and first run

If don't know about NDepend, here are some references :

on NDepend Website:

NDepend on Wikipedia (with more references links)
Pattrick's blog
Other blog posts and articles:

To start my NDepend test, I went to http://www.ndepend.com/NDependDownload.aspx and using the License key Patrick sent me, I choose the Professional Edition:

...that triggered the download of a zip with these files:

...which I unziped to a local folder and added the NDependProLicense.xml file (I also received from Patrick)

Here is the default UI of the stand-alone VisualNDepend.exe application:

Clicking on the link next to the red arrow, gets me a list of the latest VS solutions that I have opened:

Clicking ok will show a screen with the list the assemblies to analyse (with the option to remove or add more):

Once the analysis finishes (after less then 1 minute), this dialog pops up

I clicked on the first button (Interactive UI Graph) and got this:

The Dependency Graph can be popped-out and viewed independently:

... with lots of interresting analysis options in this UI:

Back in the main UI, here are the metrics view:

... the project properties:

... the rules execution result

... with these being the rules that are triggering errors (in red)

Note: the memory used also seems to be decent:

Installing VisualStudio add-in

Back in the unzip dir, I clicked on the NDepend.Install.VisualStudioAddin.exe file

... which opened up this UI:

... and this after clicking Install:

Next time VisualStudio opens up, we have a new menu:

I opened up the TeamMentor project and chose the NDepend menu option to Attach a new NDepend Project to VS Solution

... and now the NDepend windows show up inside a VisualStudio panel window:

...which can be placed anywhere inside the VisualStudio UI

Note that afte the project is assigned, the NDepend menu has different entries:

Opening up the Queries and Rules Edit menu option, opens up this REPL CQL rules editor

where we can write a LINQ query (with Code Complete support)

So for example, here is a query that lists all methods in the analysed assemblies:

... with lots of interesting pre-massaged data analysis:

... and really powerful results

I really like this query environment. It is fast, powerful and easy to understand

And it will be even better once I can access this data from the O2’s C# REPL that is also running as a VisualStudio extension :)

See next posts for my first experiments at writing CQL queries

Trying DevExpress (install and uninstall)

noreply@blogger.com (Dinis Cruz) — Sun, 16 Jun 2013 11:17:00 +0000

Since I'm still not 100% happy with Resharper performance and system Impact, I just tried CodeRush from DevExpress

The rest of this post shows how I installed, used it and uninstalled CodeRush

I went to CodeRush main page:

... downloaded the installer

This screen is weird since what I want is CodeRush, which seems to be the only one not selected

... so lets try like this:

... clicked on “…Can I own your computer please?…” and “…do you accept all the terms we wrote without reading them”

... the 14Mb download started

... the install hanged here for a little bit

... After loading up visual studio, there is a new Menu Bar menu

Humm, memory consumption is not looking very good:

... the unit test runner doesn’t work without config (on the same project that Resharper runs ok):

... the GUI goes unresponsive and the memory consumption is very high:

... and

The decompiler window looks good, but unfortunately after waiting around 2 minutes for VS to become responsive again, I’m going to uninstall it:

bye bye

... maybe next time, when they move all activity to outside the VisualStudio process

AngularJS code editor using UI-Bootstrap and CodeMirror (done without using jQuery)

noreply@blogger.com (Dinis Cruz) — Fri, 14 Jun 2013 13:27:00 +0000

I’m adding a number of AngularJS views to TeamMentor, and here is a simple HTML based source code editor inspired on the How to Integrate Codemirror With Angular UI post and ui-codemirror repository.

In the end, these are the APIs I used:

http://angularjs.org/
http://angular-ui.github.io/bootstrap/
http://twitter.github.io/bootstrap
http://codemirror.net/ (just the core bit)

And this is what it looks like:

The source code editor is showing the contents of the current page (dynamically fetched using Angular $http.get) and the bottom yellow div is showing (in real-time) the contents of the source code editor:

What is nice about this example is that I didn’t use jQuery at all!

The great posts http://stackoverflow.com/a/15012542 and AngularJS for jQuery Developers explain why learning to code in Angular without JQuery is so important.

Basically, it's better not have jQuery available, since them, the only way to solve a problem, is the ‘AngularJS way’ :)

How it works:

Here is a brief explanation of the code behind this PoC (included in full at the end of this page):

First we load the Javascript and CSS:

... them set up AngularJS module and codeMirror value

... use a controller to get the code to show (using $http.get) and assign it to the the $scope.code variable

... configure angularJS in the HTML by setting the textarea element to be a codemirror (linked to the $scope.code model)

... finally show the current value of $scope.code in side an bootstrap alert element

Complete Source code:

<!DOCTYPE html>

<html>
    <head>
        <title>CodeMirror with AngularJS</title>
        <link  href="/Content/bootstrap.min.css"                    rel="stylesheet">
        <script src="/Scripts/angular.min.js"                      type="text/javascript"></script>
        <script src="/Scripts/angular-ui.js"                       type="text/javascript"></script>
        <script src="/Scripts/ui-bootstrap-tpls-0.3.0.min.js"      type="text/javascript"></script>

        <link  href="/Content/codemirror-3.01/codemirror.css"       rel="stylesheet"/>
        <link  href="/Content/codemirror-3.01/theme/rubyblue.css"   rel="stylesheet"/>
        <script src="/Scripts/codemirror-3.01/codemirror.js"       type="text/javascript"></script>
        <script src="/Scripts/codemirror-3.01/mode/javascript.js"  type="text/javascript"></script>


        <script type="text/javascript">
            var myApp = angular.module('myApp', ['ui', 'ui.bootstrap']);

            myApp.value('ui.config',
                {
                    codemirror:
                    {
                        mode: 'javascript',
                        lineNumbers: true,
                        matchBrackets: true,
                        theme: 'rubyblue'
                    }
                });

            function codeCtrl($scope,$http)
            {
                $scope.docLocation = document.location.href;
                $http.get($scope.docLocation)
                        .success(function (data)
                            {
                                $scope.code = data;
                            });
                //$scope.code = "var a = 'somecode'; \n//which also shows above</h1>";
            }
        </script>
    </head>
    <body ng-app="myApp">
        <div class="well well-large">
            <div class="container">
                <h2>CodeMirror working with AngularJS and Bootstrap</h2></div>
            </div>
        <div ng-controller="codeCtrl">
            <div class="container">

                <h4>Code Editor:</h4>
                <p>With the the contents of this page (i.e.: {{docLocation}} )</p>

                <textarea ui-codemirror ng-model="code"></textarea>

                <br/><hr/><br/>

                <h4>Bootstrap alert style</h4>
                <p>
                    Showing in real time the contents of the code shown above (make a change to try it)
                </p>
                <alert type="success">{{code}}</alert>
            </div>
        </div>
    </body>
</html>

Gource Visualisation of "TeamMentor Git Development - 18 Months in 180 Seconds"

noreply@blogger.com (Dinis Cruz) — Fri, 14 Jun 2013 00:49:00 +0000

Here is a pretty cool video of 18 months of Git commits using the Gource tool which is a software version control visualization tool.

Try to see it in full screen and at 1024p HD quality:

Here are the Gource settings used to create this video:

gource.exe -s 1 --file-idle-time 0 --key --title "TeamMentor" --font-size 30 -- hide dirnames --date-format "%d/%b/%y" --bloom-multiplier 0.5 --bloom-intensity 0.5 --f

Since the original video was 10 minutes, I used Camtasia Clip Speed feature to compress it to about 3 minutes (~180 sec)

More TeamMentor UI Javascript trace and debug views

noreply@blogger.com (Dinis Cruz) — Wed, 12 Jun 2013 18:26:00 +0000

On the topic of TeamMentor UI debug helpers (see Opening up TeamMentor’s Javascript Trace Viewer which hooks TM method calls) here are a couple other useful options:

With window.TM.Debug.callTrace_LoadEnvironment set to true:

1) Enabling window.TM.Debug.callTrace_LogToConsole

.... will also write the 'function call info' into the console (like Chrome developer tools of FireBug):

Tip: if you don’t want to see the Trace Output window, click on the top-right-red X

and it will be minimized into the bottom right corner (where you can click on it to reopen):

2) Enabling window.TM.Debug.callTrace_ShowParamsInConsoleLog

will add the call parameters to the console log:

Another example showing the string values of the add_Filter call

3) enabling callTrace_ShowExecutionTime

will add a took ##ms message after each function returns (again very useful for debugging timing and performance issues)

With window.TM.Debug.callTrace_LoadEnvironment set to false

The call trace is very good and powerful, but it does have a performance hit, and can generate too much data, so another useful debug tool is if we disable all callTrace_* settings

and:

1) enable logEventsRaised

... will make TM write an entry to the console of all events raised:

2) enable logEventsRaise_CallTrace

...will add the Call Stack/Trace to each event call (great to see who triggered that event)

... with the added bonus that we can click on the function location and see its source code:

...you can even take a look at the TM’s Event-Driven-Architecture Solution code (based on jQuery events):

3) enabled logLoadedPages

... will show a real-time list of all html pages loaded (think of this as views):

Other debug options

There are a couple other smallish debug capabilities that can be configured by:

1) disabling LoadLibraryData

... which will load up TM without any libraries (useful when just debugging/testing the pure UI).

note how in the image above, the default TM UI has 46kb and loaded up in 698ms (which even for localhost access is quite nice and fast)

If we disable the addTimeStampToLoadedPages (to allow caching of the view html pages (instead of adding a random ?time=#### value to them)

and load the site from IIS

we get a main gui that has 4.4Kb of size and loads in 618ms

There is still some optimization room here since a lot of the 26 requests are for images which could be all served in one request:

Opening up TeamMentor’s Javascript Trace Viewer which hooks TM method calls

noreply@blogger.com (Dinis Cruz) — Wed, 12 Jun 2013 18:22:00 +0000

If you are trying to debug (or understand) the TeamMentor’s Javascript layer, there are a number of debugging tools and options (in the /Javascript/TM/Settings.js file) that might help you:

In this post I’m going to mailing cover the TraceView which is a pretty powerful way to view the UI events and methods executed (during normal UI interaction).

The solution (skipped with TeamMentor) is based on the http://interlogy.com/~cigdem/trace/:

... and on the http://blog.johnmckerrell.com/javascript-call-tracer/

To access it in TeamMentor, the config settings to change are the window.TM.Debug.show_DebugDiv which is usually set to false:

To kickstart things, we are going to change the show_DebugDiv value to true

… and rebuild the application (or restart the server), so that the cache mappings are cleared

Next time TeamMentor opens up, you should see a little Table at the top:

… which can be moved around:

… and gives you three links:

Open Trace View
Open Trace View (and hooks)
Setup Trace Hooks

Let’s look at the first one, and see what happens when the Open Trace View link is clicked

... a larger version of the TraceViewer appears :)

There are a number of ways to interact with this Trace Viewer:

1) Syntax: trace(‘…message….’)

2) Syntax: traceErr(“…message…”)

3) Syntax: traceArr([ .. javascript array.. ] );

4) Syntax: traceAssoc(… javascript object …)

5) Syntax: tracerInfo()

6) You can also access all these objects (without code complete) on the Run JS tab

...by typing the javascript to invoke on the TextArea and clicking on Apply

7) Another powerful feature is the 'Watch’ which will monitor the value contents of a particular HTML Element.

For example this is how we can monitor the Search TextBox (note Watching label in red)

...and now every time we enter a new value on the textbox we will get an trace message:

Note if you want just the trace viewer to open automatically everytime TeamMentor’s main UI loads up, you can set the window.TM.Debug.show_TraceView value to true:

Tracing events execution

Ok, so now that we have this trace window open up, what can we do with it?

As mentioned above, the jscalltracer.js is also part of TeamMentor, and after a couple
customizations, it is set-up to add hooks on the main TM Methods invocations (including TM Events)

To see this in action , in the ‘debug div’ click on the Setup Trace Hooks link

...after about 20sec (depending on your box)

... you should see a number of ‘hooking ...' messages in the Trace Output:

If you now do any UI action (like for example clicking on a View), you will see an number of ‘event’ messages show up (note how they are shown in a Tree-like-format, which represent the call depth)

More examples of call traces:

1) events that fire when I clicked on the ‘remove filter’ button

2) event that fire when I clicked on an Article in the main Table:

3) events that fire when I clicked on one of the metadata filters (in this case the Apache technology):

Finally, if you are debugging something that happens when TeamMentor loads up for the first time, you want to change the callTrace_LoadEnvironment and callTrace_LoadEnvironment_Before_Gui values

...to true

... so that you get all events

...including the first main javascript call that triggers the rebuild of the entire GUI (if you set callTrace_LoadEnvironment_Before_Gui to false, the first call captured occurs after the main GUI is loaded)

Trying out NCrunch

noreply@blogger.com (Dinis Cruz) — Tue, 11 Jun 2013 17:53:00 +0000

Intrigued by Kofi’s NCrunch and TeamMentor post, and since today I had to write a number of Unit Tests, I decided to give NCrunch a test drive.

I downloaded the MSI, the install was smooth and next time I opened up VisualStudio there was a new NCrunch menu available:

So (with TeamMentor solution opened), I clicked on Enable NCrunch, and the Configuration Wizard appeared:

In the Max Processing Threads, I set the value to 10 (default was 1)

UPDATE: I ended up adding another 3 processor to this VM and making this value 2

In Engine Optimisation I chose the option to ‘Optimize for fastest test execution’ (default was the other one)

Clicked next on this one:

… in Parallel Test Execution, I chose to execute all tests in Parallel (default was No)

UPDATE: I ended up changing this value back to 'NO'

In Engine Execution Mode I chose the ‘Run my tests automatically when changes are detected’

On Ignored tests, I chose the 2nd option to Let my tests run (default was the first)

After the final Next, this small NCrunch GUI showed up

(ignoring the CPU Warning, which is actually something I need to on this VM), at the moment there is a build failure:

Which if we look at Kofi’s NCrunch and TeamMentor post, the solution is to go to the Configuration option:

And add these additional files:

UPDATE: I ended up just adding the PostSharp dir (in my efforts to improve the performance of NCrunch)

After that change the NCrunch window changed the status of the TeamMentor.CoreLib project:

After about 1 minute, we now have a similar error on the TeamMentor.UnitTests project

Which was resolved the same way (adding the extra NuGet packages folder)

UPDATE: I had to also add the TM_Website folder (as in Kofi's example)

Now the Tests are being executed, and after a bit I got 16 tests that failed:

With a pretty cool mapping of the tests/lines that passed and failed:

Even better is the fact that the actual code (not the unit tests) also show the line coverage!

This is awesome!

What a great way to see what is currently being covered by tests and what is failing :)

I really like this….

Let’s see if it holds real development work :)

First I’m going to shutdown ReSharper, which made my VisualStudio instance to go from 505Mbs of memory

to 270Mb

HUMM....... problems....

Warning: I started using NCrunch with the set-up of only having one core in the VM , and it was just about UNUSABLE :(

The GUI was hanging all the time, and I couldn’t even code a couple lines without being interrupted.

After shutting down the VM and giving it a couple processors, it looks much better.

Let’s see how it holds ...

UPDATE: As you can see by the examples in the Changing the way User Sessions are handled by TeamMentor (will be 3.3 Release HotFix 3) post, I was able to successfully use NCrunch to create a number of UnitTests

Changing the way User Sessions are handled by TeamMentor (will be 3.3 Release HotFix 3)

noreply@blogger.com (Dinis Cruz) — Tue, 11 Jun 2013 17:47:00 +0000

One feature we introduced in TeamMentor 3.3 was the limitation of only allowing one user session to be active at any given time.

This had the nice side effect of 'preventing user account reuse'.

In practice, this meant that TM users had to stop using shared accounts (like the admin account), which was a good thing.

But, it created nasty side effects where the user can only be logged in once across all its devices. And an even worse side-effect happened when we implemented a SSO solution for a client, and we realized that for the cases where there was one SSO token shared across multiple users, we would have to create an TM account per user session!

So we went back to the Concurrent Logins Have Broken issue, reopened it and changed it priority to P0 (which means that this will be another 3.3 HotFix)

The rest of this post shows the workflow that I took when making the code 3.3 HotFix #3 changes, testing them and pushing the new version to GitHub.

Going from one active session to multiple active sessions

This is quite a significant change to TeamMentor, and one that will really push the UnitTests usage to its limits.

Since there were a number of code changes that needed to be made (which would affect both TM user session behavior and the methods available), my first step was to actually make the changes to the backend TeamMentor.CoreLib.dll:

New UserSession class:

New Sessions object in the main TMUser class:

An extension method to add a new session to a user object:

And an extension method to remove a session from a user object

Once I had these code changes and the entire solution was compiling (with some minor changes to existing UnitTests), I committed them using:

Next I executed the existing UnitTest (note that I will still add a number of tests focused on the expected new multiple SessionId behaviour)

The good news is that there are only a couple broken tests:

With the errors that matter being the ones in the Test_Users_Sessions class

The changes were quite minor, and after a bit I had all tests running again:

Now it was time to add Tests to check for the new UserSession class and the ability to have multiple sessions happening at the same time

At this stage I’ve installed NCrunch (see Trying out NCrunch) and I’m going to try to use it to create these tests.

I started with this one:

And ended up with a nice number of tests that covered a wide range of scenarios, while fixing a couple bugs with the original implementation of the new session code (see if you can stop them):

UnitTest: UserSession_Object

UnitTest: ResetSessions

UnitTest: MultipleLoginSessions_Two_Users:

UnitTest: MultipleLoginSessions_One_User:

Now that it all looks good, I’m going to (for the first time) fire up a browser, and try it out:

And it works :)

The image above shows two chrome sessions (one normal and one in incognito mode), both logged in as the user admin (before this would had logged out the first browser session (since there could only be one valid user session)).

A quick look at the admin user’s xml also confirms that there are two sessions in there:

And if we logout from one of the browser sessions:

… the User’s xml file will now only contain one Session item (and note the extra User Activity line with an User Logout entry)

... which is the exact behavior that we want :)

So the final steps are to commit the changes:

... push the changes to the main TeamMentor/Master repository

... and ping the QA team to take a look at it

Fixing a couple bugs and pushing new TeamMentor 3.4 Dev Version (from 4 to 5)

noreply@blogger.com (Dinis Cruz) — Tue, 11 Jun 2013 00:26:00 +0000

This post shows one way to use GitHub to update the main development branch of TeamMentor.

At the moment TeamMentor/Dev repo is at version 3.3 – Dev 4

This version was pushed on Friday, and it introduced a nasty side effect on the wsdl generation (see issue 546) and a minor bug in the user edit (from the old control panel).

Both probs were picked up by Michael’s TM UI Unit Tests, which is another good example of the power of that type of UI/Browser integration tests.

So, I went into my local dev repo, made the code fixes, checked that they were working and executed all unit tests (to make sure we are still good)

Next I committed the changes locally:

And pushed the commit to the main Dev repo and my personal Dev repo (this is the same as doing a Pull Request and authorising it via the GUI):

Since TeamCity is configured to run on commit the master branch of TeamMentor/Dev a quick look at its web interface shows that the build started

... after 4m:13s the build was completed, with all unit tests are passed and

… and the Dev QA site pushed into Azure:

The day CodingLab.org was born

noreply@blogger.com (Dinis Cruz) — Tue, 11 Jun 2013 00:12:00 +0000

After brainstorming about the idea of 'Open Library' for my RaspberryPi, Arduino, BeagleBone, Pyhton, CodeClub books and materials on the Chiswick High Road with Sarah (my wife), she come up with the name of Coding Lab, as a better way to present the concept to local venues (with the added idea of doing regular/monthly lab sessions in there).

So I:

did a quick DNS search,
found that CodingLab.org was available,
registered it,
created a GitHub repository for it https://github.com/O2platform/CodingLab
added some GitHub Pages

and voila, here is the very first version of: http://CodingLab.org

Next step is to see if one of the local cafes/restaurants wants to be involved

Creating TeamMentor release 3.3.2 (3.2 version with HotFix 2)

noreply@blogger.com (Dinis Cruz) — Mon, 10 Jun 2013 23:52:00 +0000

Now that the two P0 issues are marked as fixed (after a round of QA):

It's time to publish the 3.3.2 TeamMentor release.

At the moment the code changes are in the 3_3_2_HotFix branch

Which contains the commits that made up the 3.3.2 – RC2 version (with the last commit being the 852d877290)

As set in our release process, to make this the official official version, I will remove the RC2 bit from the version number and make it the final commit for this release.

So I opened a Git Bash on a local copy of that repo TeamMentor/Master (same thing as doing a git clone and pull of the 3_3_2_HotFix branch)

A quick look using git log --decorate --graph --oneline --date-order shows that the latest commit is 852d877 (which matches the version at GitHub that was QAed and checked for this release)

My next steps was to change the version number,

... commit that small change:

... add the v3.3.2 tag (see Adding Tags to TeamMentor Master repository for more details on tagging)

... and pushed into TeamMentor/Master the commit and tag:

Just to confirm, let’s take a look at GitHub:

Main page shows the 3.3.2 commit

… so does the commit page:

… and the Tags view:

…and the Network graph:

The deployment of this version is now passed to the hands of the Infrastructure team, which will update all TM sites currently managed by SI.

On the development side, the last thing to do, is to add this version to the TeamMentor/Dev fork so that it is part of the next release

At the moment TeamMentor/Dev is on this commit

In a local copy of the this repo, I did a pull from TeamMentor/Master

... which failed (on master) because there has been updates done on this repo (since the last merge).

So I created a new branch called 3_3_2_merge

Forced pulled the 3.3.2 code into it (the code from TeamMentor/Master)

switch back into master branch and merged with 3_3_2_merge branch

…which had (as expected) a couple conflicts), with I’m going to resolve using

… which lists the conflicts

... and in this case was mainly the version number:

... easily fixed by making the local version the one to use:

... next I resolved the dlls by selecting one of them (doesn’t really mater since they will be recompiled soon)

... and commited the merge:

....which we can now see on Gitk:

The final step is to push these commits into TeamMentor/Dev

.... which can be seen on the following couple graphs:

The image above shows the TeamMentor/Dev commit done before the 3.3.2 merge, and below is the last commit made

It might be easier to read with out the labels (in blue is the TeamMentor/Dev code in black is the TeamMentor/Master code:

'Open Library' for my RaspberryPi, Arduino, BeagleBone, Pyhton, CodeClub books and materials on the Chiswick High Road

noreply@blogger.com (Dinis Cruz) — Mon, 10 Jun 2013 10:22:00 +0000

Yesterday I 'dropped' 10 Python books to a friend's kid house with a 'take a look at these books and pick one that make sense to you' workflow (they are trying to use a RaspeberryPI and learn how to code in Python)

Later that day one of the kids asked me '... can we keep two?..' , which is always a good sign :)

This got me thinking that that some of my books (I have lot of them) deserve to be shared with more kids :)

Maybe I could have them 'somewhere' on the local Chiswick High Road (West London) as a kind of 'Public Geek Library' for kids (and adults).

This could also be a great location to put information about CodeClub and examples of what I'm creating with the kids that I am teaching every Wednesday.

Some draft thoughts:

At first, it is probably better if the books stay in that location
This makes sense to be on a coffee shop, or a bookstore close-to/with a coffee shop
The logic would be that the kids would stop by (with their parents) and read the books for a while (to get some ideas)
Maybe if there is a photocopier around, the kids could take some copies home
Ideally the parents would buy the books that are popular with theirs kids
Maybe if there is a sponsor, we can just buy the books and let the kids take them home (with a note "please return it when you're done"
I wonder if we can put a little tracker in the books that would signal where the book's are (nice project to do with Arduino/Electronics :) )

I already have the books I need to kickstart this, so next I just need to find a location for them

Any ideas?

I also tagged this post with 'Code Cafe' since that is something that I would love to see on every city and community event. This is what I tweeted yesterday:

At chiswick's GreenDays and just had a nice 'Scatch conversation' about 'variables' with one of the kids I'm teaching @codeclub
— Dinis Cruz (@DinisCruz) June 8, 2013

On @codeclub @raspberry_pi topic, it's a shame that there is no stand here (Chiswick GreenDays) for kids to try some coding #MaybeNextYear
— Dinis Cruz (@DinisCruz) June 8, 2013

Installing Ignite’s OpenFire and Spark (IM server and client)

noreply@blogger.com (Dinis Cruz) — Sun, 09 Jun 2013 00:25:00 +0000

When testing HuBot, I needed an IM server and client

Since the HuBot install article that I was following recommended OpenFire and Spark, I decided to give it a test drive.

Here is how I installed and set it up on a local VM.

The first step was to get OpenFire from the Ignite's website:

which I did using this O2 Platform script:

... that when executed downloaded the zipfile, started the openfire.exe and opened the default browser at localhost:9090

I then configured OpenFire to use an Embedded Database

... to use the default profile settings:

... and to use this default admin account:

Which completed the setup:

... with no errors in the OpenFire popup process

Next I used to login page:

... which didn't accept the email as username (see above), so I had to use admin

... to login and access the admin interface:

As per the HuBot Install article, we should create a couple accounts and a room:

So, here is the developer account:

... here is the hubot user:

... and here is the hubot room:

With the OpenFire IM server up and running, the next step was to install the Spark IM client:

Which I did using this script:

... which downloaded the installer

... executed it

... and launched it

Using the developer account previously created, I was able to connect to the OpenFire server:

Here is the Spark post login UI:

Here is OpenFire's Client Sessions page (showing the logged in Spark user)

Finally, to access the HuBot room we previously created, I clicked on the Conferences tab

Then on the conference.{computerName} option:

... then on the HuBot option:

... and we can see that we have a fully operational client and server IM setup :)

A constant source of confusion: Simplicity

noreply@blogger.com (Dinis Cruz) — Sat, 08 Jun 2013 23:31:00 +0000

From this reddit I found the really interesting and thought provoking (long) post on A constant source of confusion: Simplicity

Simplicity is a topic that really matters to me, and is something that always try to do when writing code or creating APIs (like the ones in the O2 Platform, FluentSharp or TeamMentor).

That post has some great references, which are well worth a read:

Software engineering: An Idea Whose Time Has Come and Gone? - by the author of the Controlling Software Projects: Management, Measurement, and Estimation book and the one that said “You can’t control what you can’t measure.” (something the author now doesn't believe is correct)
Worse is better - ( Wikipedia quote)"Worse is better, also called the New Jersey style, was conceived by Richard P. Gabriel to describe the dynamics of software acceptance, but it has broader application. The idea is that quality does not necessarily increase with functionality. There is a point where less functionality ("worse") is a preferable option ("better") in terms of practicality and usability. Software that is limited, but simple to use, may be more appealing to the user and market than the reverse...." :
Dreaming in Code: Two Dozen Programmers, Three Years, 4,732 Bugs, and One Quest for Transcendent Software

What is Privacy all about? ... its about 'not being surprised'

noreply@blogger.com (Dinis Cruz) — Sat, 08 Jun 2013 17:16:00 +0000

Privacy is one of those subjective topics that is hard to talk about, because everybody seems to have a different definition of it (which depends on culture, personal experience, current/past jobs and state-of-mind.

Recently I found a Seth Godin post (while reading Whatcha Gonna Do with That Duck? in the toilet) which really provided a great explanation of privacy.

The post happens to also be online (People don't truly care about privacy) and here is the key part:

That is a great way to explain Privacy

... its all about being surprised!

I.e. it’s all about the individual understanding of what is happening with the personal data provided and who has access to it.

For example, when I’m writing this blog post or post something on the owasp wiki, I am aware that my words and ideas are public, so I’m not going to be surprised if anybody can uses it.

But if I send a private email to somebody (specially one staring with ‘…in confidence…’) then I will be surprised if others (from individuals, to companies, to governments) have access to it.

Here is what Wikipedia has to say on Privacy:

This is a much stronger definition of privacy and doesn’t take into account the shades-of-gray that the ‘being surprised’ definition has.

Here are Seth's posts on Privacy and being surprised:

Do you actually care about privacy?
The illusion of privacy (and what we actually care about)
People don't truly care about privacy (also linked from the top of this post)