Managing Docker images and containers

In addition to managing Docker resources (including containers, images, hosts) through the official CLI, there is plenty of solutions available in the community to manage Docker resources in a comprehensive way from a single web-based interface.

DockerUI

Once our containers are running, DockerUI can be use to manage the overall system. It's a simple web app with basic features for:
 - Check the states of the images (running, stopped)
 - Remove images
 - Start, Stop, Kill and Remove containers

DockerUI can be used with the following commands

1. Building the web app from the github repository and tag the build image
$docker build -t crosbymichael/dockerui github.com/crosbymichael/dockerui

2. Launch the built container, make the web app available on the 9000 port and connect to the docker uinx socket to remotely control docker
$docker run -p 9000:9000 -v /var/run/docker.sock:/docker.sock crosbymichael/dockerui -e /docker.sock

Then on the browser, visit localhot:9000 to get something like:

Shipyard

Shipyard is a more advanced Docker management solution based on a client-server architecture where the agents (i.e. clients) collect information on Docker resources and report them to the Shipyard server. It providers in addition to the features available in DockerUI:
 - Authentication
 - Building new images by uploading local Dockerfile or providing URLs to a remote location
 - In the browser terminal emulation for attaching containers
 - Visualizing CPU and memory utilization of the running images
 - ...

1. To use Shipyard, issue to pull the image from the Docker public index:
$docker run -i -t -v /var/run/docker.sock:/docker.sock shipyard/deploy setup

Now, we can register as admin to Shipyard on http://localhost:8000/

2. Install the latest release (e.g. v0.2.5) of Shipyard agent on every hosts to collect the information on Docker resources:
$curl https://github.com/shipyard/shipyard-agent/releases/download/v0.2.5/shipyard-agent -L -o /usr/local/bin/shipyard-agent
$chmod +x /usr/local/bin/shipyard-agent

3. Run the agent and register to the main host where Shipyard is running
$/usr/local/bin/shipyard-agent -url http://localhost:8000 -register

4. On the Shipyard interface, authorize the agents already deployed to enable them.
5. Run the agent with the given key at registration:
$/usr/local/bin/shipyard-agent -url http://localhost:8000 -key agent_key

Troubleshooting, in case you get this message:
Error requesting images from Docker: Get http://127.0.0.1:4243/images/json?all=0
Then stop the Docker service and re-start it while enabling Remote API access for any IP address:
$sudo service docker stop
$docker -H tcp://0.0.0.0:4243 -H unix:///var/run/docker.sock -d &

happy dockering

J2EE Solution Logs

Changing the context root of a dynamic web app URL (StackOverflow)

1. Right click on the project in the project explorer tab, the choose properties.
2. Set the new context root in the Web Project Settings.

Exception when launching jetty (StackOverflow)
java.lang.NoClassDefFoundError: org/objectweb/asm/ClassVisitor
It seems that jetty cannot find the asm.jar file in its classpath, check this as follow:

1. On eclipse, go to the Servers view (or open it via window -> view -> Servers)
2. Right click on jetty, then choose Open or just type F3
3. On the Overview tab, click on Open Lauchn Configuration
4. Go to Classpath tab and check for asm.jar

If you cannot find it, then you should manually download it from the project website.

Register a listener to do things before the VM exits (even if you "Ctrl-C" the running example before it's completed)

private void registerShutdownHook() {
   Runtime.getRuntime().addShutdownHook( new Thread() {
      @Override
      public void run() {
         // do some thing
      }
   });
}

Increase Maven memory, in mvn.bat add:
set MAVEN_OPTS=-Xmx2048m -XX:MaxPermSize=512m

To be continued

Test the Web Forward

During 2 days (26 and 27 of October, 2012), Test The Web Forward was held in Paris where people come from different countries mostlty France and US (San Fransisco) but even Australia to write test for the latest W3C specifications (HTML5, CSS3, Apache Cordova, etc.).

Vincent Hardy (Adobe) introduced the event and welcomed the attendee.
Then came Robin Berjon (W3C) to talk about how to read a spect in a way to write a test for it: read it forward and backward!
Spec have to deal with complex things (ex. the red button implementation may differs in details from one browser to another: form, shape)
In the spec look for the conformance requirement for details

• The "product" what it is applied to (ex. uers agrnt, the browser) -> what you want to test (product)
• Strinctness level (must, should: option, may)
• Prerequisites
• Behabiour of the product (e.g. ignore the element)
• Defined terms: tell you what is it mean (e.g. absent, empty string, ignore)

Finding definitins (repeated) are close to the begining

Then, Rebecca Hauck (Adobe) talked about reference tests (reftest) and how to write one.
Then, James Graham (Opera) talked about how to use testharness.js to writing javascript tests for W3C specifications. Here is some examples from the talk:

• Sync test: example with local storage getItem() that returns the value associated with a key, or null if none
• Async test: clear storage example when clearStorage() called from a window than an event is fired in an iframe contained in the same document

Finally, Elika J. Etemad also known with fantasai (Mozilla) How to file a good bug report in bugzilla or any other bug reporting system.

After this session, lightning talks started where experts presented some W3C specifications they would like people to join to write test for them. The goal is tests inheritance as they can be writting befroe code as test were writting for W3C spec.

Apache Cordova (Michael Brooks from Adobe)
Apache Cordova (also known as PhoneGap) implements W3C API to map javascript code to native methods. The task was to convert jasmine test it to testharness.js (they were around 200 tests).

IndexedDB (Odin Hørthe Omdal from Opera)
Under active development, Implemented in many browsers, needs tests (333 so far).

CSS3 backgrounds (Microsoft)

W3C HTML5 Testing Task Force
A groud writting tests for testing HMTL5 spec, has a CVS.
Why? used by user agent implementers (tv, stereo, , refrigirator).
Read wiki and presentation.

WebRTC aim is to be able to do video/audio communication on the web + P2P communication between two browser.

• GetUserMedia: allows a script to get access to microphone, first ask user consent.
• PeerConnection: helps you send video data over internet to : quality of video based on available for the browser.
• DataChannel: send banch of data between browsers.

More resources can be found here:

• How to Read a W3C Spec
• How to Write a W3C Reftest
• Testing with testharness.js
• How to File a Good Bug Report

HTML5 canvas

In thid post you can find some usefull code snipets on HTML5 Canvas.
You may need to include the following javascript files into your main HTML page:

• Modernizr.js which is a JavaScript library that detects HTML5 and CSS3 features in the user’s browser.
• jQuery.js which is Javascript library for rapid web development that simplifies many things like event handling, document traversing, etc.

First, check if the Canvas is supported in the browser:

if (!Modernizr.canvas) {
  return
} else {
  // do something
}

Declare the canvas in HTML

<canvas id="canvas" width="500" height="500">Your browser does not support HTML5</canvas>

Get the canvas element in Javascript

canvas = document.getElementById("canvas");

Get a drawing area for 2D arts

context = canvas.getContext("2d");

Draw a rectangle (only the border)

context.strokeStyle = "#000000";
context.strokeRect(0, 0, canvas.width, canvas.height);

Draw a circle filled in black

context.fillStyle = color;
context.arc(centerX,centerY,radius,0,2*Math.PI);
context.fill();

Type text on a given position x, y

context.fillStyle = color;
context.font = '30px_sans';
context.textBaseline = 'top';
context.fillText ("This is a text", x, y);

Draw a line from x1,y1 to x2,y2

context.beginPath();
context.moveTo(x1, y1);
context.lineTo(x2, y2);
context.stroke(); 

Listen for mouse events (down, move, up) on a Canvas element:

canvas.addEventListener('mousedown', mouseEventHandler, false);
canvas.addEventListener('mousemove', mouseEventHandler, false);
canvas.addEventListener('mouseup',   mouseEventHandler, false);

function mouseEventHandler(event) {
  if (event.type == "mousedown") {
     // Mouse Down
  } else if (event.type == "mousemove") {
     // Mouse Move
  } else if (event.type == "mouseup") {
     // Mouse Up
  }
}

Get the mouse coordinates x, y on the canvas.

// returns the coordinates (x, y) of a mouse after click event
function mouseCoordinates(event) {
  var x, y;
  // Get the mouse position relative to the canvas element
  if(event.layerX || event.layerX == 0) { //Firefox
    x = event.layerX;
    y = event.layerY;
  } else if (event.offsetX || event.offsetX == 0) { //Opera
    x = event.offsetX;
    y = event.offsetY;
  }
  return {x:x, y:y};
}

Here is sample project of HTML5-based paint that combine the different things exposed earlier: index.html, webpaint.js.

References

• Drawing different forms with HTML5 Canvas.
• HTML5 Canvas line color.
• Hot to draw with HTML5 Canva.
• Create HTML5 Canvas Javascript Drawing app.
• HTML5 Canvas painting.

Basic JavaScript - Web programming

This post corresponds to notes taken while reading Eloquent JavaScript.

The open method of the window object takes an URL argument that will open on a new window. An opened window can be closed with its close method. To escape unwanted characters in the URL (e.g. space), the encodeURIComponent method can be used. To remove them again use decodeURIComponent method.
Every window object has a document property that contains the document shown in that window. To force the browser to load another document, someone can set the document.location.href property.
Example:

var perry = window.open("http://www.pbfcomics.com");
// show some information about the URL of the document
console.log(document.location.href);
perry.close();
// encoding URL
var encoded = encodeURIComponent("aztec empire");
console.log(encoded);

The document object has a property named forms which contains links to all the forms in the document. Example, if a form has a property name="userinfo" then it can be accessed as a propery named userinfo.
The object for the form tag has a property elements that refers to an object containing the fields of the form by their name.
Example:

var userForm = document.forms.userinfo;
console.log(userForm.method);
console.log(userForm.action);
// set the content (via the value property) of a text input element called 'name'
var nameField = userForm.elements.name;
nameField.value = "Eugène";

WebRTC: an introduction

WebRTC brings webcam access, p2p, and rich audio/video communication capabilities to the browser. In this talk, we'll give an overview of the WebRTC technologies available today, show how to build WebRTC apps, and discuss the potential this technology adds to the Web Platform.
With more than 10 years experience in audio/video communication, Justin Uberti is a tech lead on Chrome WebRTC team, he was behind Google+ Hangouts, Google Video Chat, and Gmail Call Phone. During Google I/O 2012, Justin gave a great talk explaining the features of WebRTC.

Read more.

HTML5 versus Android

Native apps or mobile web? It's often a hard choice when deciding where to invest your mobile development resources. While the mobile web continues to grow, native apps and App Stores are incredibly popular. 
Reto Meier and Michael Mahemoff present at Google I/O 2011 both perspectives in an app development smackdown.

Read more.