First steps with Vagrant on Ubuntu with manually installed VirtualBox

Getting Vagrant – From Vagrant Site

If you are running an older version of Ubuntu, like I usually do (I run only LTS releases indeed) it’s probably better to download the latest Vagrant available on the Vagrant site.

$ cd /tmp
$ mkdir vagrant
$ cd vagrant
$ wget http://files.vagrantup.com/packages/a40522f5fabccb9ddabad03d836e120ff5d14093/vagrant_1.3.5_x86_64.deb
$ sudo dpkg --install vagrant_1.3.5_x86_64.deb

Install some machines

Vagrant is about building and running virtual machines described through a file, in order to let all developers to have the same machine. What vagrant really does is to keep locally a series of bare machines that will then be cloned to produce the environment you are describing. This means that before doing whatever in Vagrant, you should first of all populate this local repository with the bare machines you’d like to use.

On internet you can find some repositories of Vagrant boxes:
https://github.com/mitchellh/vagrant/wiki/Available-Vagrant-Boxes
http://www.vagrantbox.es/

So, let’s decide to test Vagrant with an ubuntu machine.

http://files.vagrantup.com/precise32.box

$ vagrant box add precise32 http://files.vagrantup.com/precise32.box
Downloading or copying the box...
Extracting box...te: 536k/s, Estimated time remaining: --:--:--)
Successfully added box 'precise32' with provider 'virtualbox'!

Let’s check whether the box has been successfully installed

$ vagrant box list
precise32 (virtualbox)

Setting up a Machine

Let’s try to set up a first experiment with Vagrant. More or less following what the official guides states. First of all let’s create a folder to host our experiment, and let’s move in it.

$ cd /tmp
$ mkdir vagrant-tutorial
$ cd vagrant-tutorial/

Time to initialize the Vagrant project. That is done with the “init” command. Just check what “init” does before issuing the command.

$ vagrant init -h

Then, let’s go with the initialisation.

$ vagrant init

A file called Vagrantfile appears after initialisation. Just give it a look. It’s full of commented options along with bried description, so, giving it a look can provide you with hints about what you can expect from Vagrant. The only not commented instruction is the one that tells Vagrant what machine we want to build on top of. It is currently the “base” box, that we are missing.

# Every Vagrant virtual environment requires a box to build off of.
config.vm.box = "base"

So, let’s change it to

# Every Vagrant virtual environment requires a box to build off of.
config.vm.box = "precise32"
and save the file.

Now, the magic all of you are waiting for

$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
[default] Importing base box 'precise32'...
[default] Matching MAC address for NAT networking...
[default] Setting the name of the VM...
[default] Clearing any previously set forwarded ports...
[default] Creating shared folders metadata...
[default] Clearing any previously set network interfaces...
[default] Preparing network interfaces based on configuration...
[default] Forwarding ports...
[default] -- 22 => 2222 (adapter 1)
[default] Booting VM...
[default] Waiting for machine to boot. This may take a few minutes...
[default] Machine booted and ready!
[default] Mounting shared folders...
[default] -- /vagrant

Wow… do we really have a running machine ? Yes. Just type…

$ vagrant ssh

And you are connected to the vagrant running machine in a SSH session.

Turn off the machine

Exit from the SSH session and type…

$ vagrant status

To have a list of currently running machines. Turn off the machine with following command.

vagrant halt default
[default] Attempting graceful shutdown of VM...

And again…

$ vagrant status
Current machine states:

default poweroff (virtualbox)

Remove the machine

When you are done, just issue a destroy command to completely remove any reference to your machine.

$ vagrant destroy
Are you sure you want to destroy the 'default' VM? [y/N] y
[default] Forcing shutdown of VM...
[default] Destroying VM and associated drives...

Corso TDD presso azienda IT

Da pochi giorni è terminato il corso su Test Driven Development che ho erogato presso un’importante azienda di sviluppo e gestione di sistemi software operante nel settore dei trasporti.

I corsisti sono stati esposti alle idee fondamentali di Test Driven Development.

  • Ciclo di sviluppo test / barra rossa / sviluppo / barra verde / refactoring.
  • Isolamento delle unità attraverso l’uso di mock

Sono stati presentati ai corsisti una serie di casi studio tratti dalla letteratura che mostrano come Test Driven Development abbia una positiva ricaduta sul livello di qualità del software prodotto.

Sono stati presentati anche gli impatti che si possono attendere dall’applicazione di Test Driven Development, sia a livello tecnologico che a livello aziendale.

Dal lato pratico numerose sono state le esercitazioni che hanno portato i corsisti a comprendere le funzionalità di alcune librerie e strumenti standard utilizzati tipicamente nel  Test Driven Development applicato a progetti Java: JUnit, Mockito, Eclispe, ECLEmma.

Il questionario di valutazione ha permesso di dimostrare come il corso, con una miscela di elementi teorici, esercitazioni mirate, descrizioni del contesto e commenti su esperienze vissute sul campo, abbia riscosso il gradimento di tutto il gruppo di corsisti, composto da figure professionali che coprono tutto l’arco di competenze necessarie allo sviluppo della parte tecnica di un sistema software.

Corso TDD di luglio 2013

Edizione di luglio 2013 del corso Test Driven Development

Steps in CSS3

Jump immediately to the demo Demo.

It’s quite usual for a website providing some kind of workflow to sport a “steps bar” that gives the user a visual representation of what steps are still missing to complete the procedure.

Obviously you can do it using purely CSS3. Let’s see how.

Let’s start with a div in which we’ll put the steps inside.

<div class="steps_box"></div>

Inside it we add a new div element for each step we want to show. I used a total of three classes, “steps_step” that should be assigned to the div that contains all the steps, “index” for the span containing the step number (or whatever you want to use as a step identifier) and “content” for the text representing the description of the step.

<div class="steps_step ">
 <span class="index">1</span>
 <span class="content">Check Out</span>
</div>

Let’s complete the example. We still miss a class to set which is the currently active step. To do this let’s use another extra class “selected”. Finally we obtain something like that:

<div class="steps_box">
<div class="steps_step "><span class="index">1</span>
 <span class="content">Check Out</span></div>
<div class="steps_step selected"><span class="index">2</span>
 <span class="content">Payment</span></div>
<div class="steps_step "><span class="index">3</span>
 <span class="content">Confirmation</span></div>
</div>

Now let’s think about the CSS and let’s start styiling the “steps_box”. Nothing really exotic but the border radius parameters that will draw the box with rounded corners with different radius.

div.steps_step {
	position: relative;
	top: 10px;
	display: inline;
	margin-right: 10px;
	padding: 10px;
	color: white;
	background-color: #BBBBBB;
	border-top-left-radius: 20px;
	border-bottom-right-radius: 20px;
	border-bottom-left-radius: 10px;
	border-top-right-radius: 4px;
}

Let’s add some shadow to the text.

div.steps_step.selected {
	background-color: #8B4513;
	text-shadow: #363535 3px 3px 5px;
}

Let’s detach the index for its normal position and let’s inflate it to make it absolutely bigger.

div.steps_step.selected span.index {
    color: #FF7F24;
    position:relative;
    font-size: 340%;
    top: 25px;
}

Pure CSS3 Ribbon

Image

Have you ever wanted your site to sport a “ribbon” in the upper right corner ?

You can easily do it using CSS3. Start with a simple DIV element that will define the ribbon content.


<div>CSS3 Ribbon</div>

Then let’s start applying some styles through CSS. First of all, let’s detach the element from the document flow and let’s put it in the top right corner.

position:fixed;
right: 0px;
top: 0px;

Then we should rotate it by 45 degrees clockwise, as every banner actually is. Let’s use transform and transform-origin along with all the needed browser translations of this not yet unanimously supported attributes.

-moz-transform-origin: 50% 50%;
-moz-transform: translate(90px,30px) rotate(45deg);
-webkit-transform-origin: 50% 50%;
-webkit-transform: translate(90px,30px) rotate(45deg);
-o-transform-origin: 50% 50%;
-o-transform: translate(90px,30px) rotate(45deg);
transform-origin: 50% 50%;
transform: translate(90px,30px) rotate(45deg);

Then we add some style to the banner itself.

color: white;
background: #119911;
border: 10px white double;
padding: 10px;

This is the live demo.

Hope you enjoy it.

Performance Automated Test as Comparison Test

Lately I was thinking how to teach to use JUnit to execute some performance test. I gave a try to both p-unit and JPerf. Apart the fact they do not seem to be actively maintained any more, they suffered, in my point of view, from a dependency on the system clock. This sounded very strange to me, because measuring performances with the system clock gives results that are hardly generalized to other machines.

So, what could be a solution ? Just use two codes that perform the same task. One is the reference, while the other is the one performances are measured related to the reference.

If you’re interested I would point you to the very detailed Francesco’s post about the matter.