What is Version Control in simple terms

In the past few months, I have spent my free time trying to support new developers to find their first commercial experience.

Usually I find that most of these candidates are not far off from being technically ready, but what they really lack is knowledge of the “ecosystem” that experienced developers passively use without even considering it important.

Today I am going to focus on Version Control. This post is not going to explain you how to use the tool ( there are lots of fantastic videos and courses our there than can do that for you), but is going to focus in explaining individual technical terms that are sometimes hard to understand without the proper explanation or example.

What is Version Control

Formally started in the 70s under the name of Source Code Control System, is one of the most used tool across team of developers. The actual definition of Version Control is:

Version control systems are a category of software tools that help a software team manage changes to source code over time.*

The main task achieved by version control is to orchestrate changes of files within the project. In simple words Version control software allow multiple developers to work on the same project at the same time, all without problem or possibility of overriding everyone else work.

The main reason why this tool is not very common in new developers is probably because it does not seem useful for a single developer, and people underestimate its hidden powers.

Master, Origin and the simple commands

To explain it further we are going to use some real life example to explain some of the technical terms used by developer. The example we are going to use is the one of a cloud storage like Dropbox or Google drive. Many of us use them on  day to day bases, and comparing Version Control to it should help in understanding some of the technical aspects and words used.


When working on a Project, all developers will have a copy of the project locally on their drive, but ORIGIN is a shared copy that holds all the information and is the true copy of the project. If you take the example of google drive, this will be the folder stored in the cloud, that all users of that google drive account can access from their browsers.


This is one of the most simple command in Version Control. This will allow a developer to update all the History of the files. This command does not actually changes any file locally, it is just used to show a developer is something is changed in Origin and inform the developer if the version of the files he is working on are up to date or need to be updated.

Using again the example of Google Drive, this happen every time a computer is switched on when the computed Synchronise with the Cloud folder, to see if anyone has changed any file.


The fetch command is sometimes omitted by developer, that tent to Update the file locally directly using the “pull” command. Issuing a “pull” command will behind the scene “fetch” all the information from “origin” and then it will download all the required changes on the developer machine to make sure that the project files are up to date. A succesful “pull” will mean that your local project files are the same of ORIGIN

Bringing back our simple example above, the Synchronisation of file is usually followed by this file behind downloaded and updated locally and this is what a “pull” does.


This is the last of the simple and most used command. All the above commands are used to grab information from origin, but “push” is used to update ORIGIN with local changes that we have done to files within the project.

A successful push will mean that your copy of the project and Origin are the same. It is important to note, that after someone “push” the code to origin, all other developer need to “pull” to have an up to date version of the code.

Master, Branches, Merges and Merge Conflict

Now that we have covered the simple commands, it is time to start and move to something a bit more complicated. In this art of the article, we are going to build a car to support our thinking and hopefully help explain this hard commands.


In small small projects all developers will work on the default Branch called Master. This will be the “only” representation of the project. But it is very common for developers to use Multiple branches within the project. Branches are usually used to develop feature, updates that a developer does not want to be part of master.


Depending form the outcome of our Branch work, we may need to combine the new feature with the main work “master” or in another “branch”. To do so, we need to use a command called “merge”. We usually merge a branch “into” another. More details will be given below with our example.

Merge Conflict

Unfortunately, not always everything ends well. Sometimes when Merging branches we may end up in conflict. This conflict occur when more than one developer have worked on the same file ( more precisely the same line) and the Version Control Software does not know how to deal with the changes. This situation is quite tricky and we will try to cover it in more details with the example below.

The production Line example

We are the proud owners of a single car production line. This establishment is called “master” in which we build our first version of the car.

We are now going to Experiment on the car to create an update on our current model. We take the finished car (pull from master) and we create a specific “branch” in the factory to add a feature to the car, a dashcam. After this feature has been added in my branch, and the engineer are happy with the change we “merge” our work back in the main production line (master). After doing so, every car will now come with a dashcam.

We are now going to carry two experiment at the same time. As previously done, we are going to get the current model form the production line and we are opening two new branches. Branch1 and Branch2.

In branch one we are going to add a new feature, Automatic mirror, in the other Branch, we are going to work on a separate feature called “dark mirror”.

After some time spent in Branch one, we have decided to merge the work back into the main product line. As with our previous example, there is no issue because no one has worked on any feature on this car that affected the mirror ( or at least not in master).

Development on the second branch has now completed and we want to merge the second branch in master. Unfortunately, when trying to merge this new feature in the main production line, we have a “merge conflict”. There are two parts on the same production line that try to change the mirror. One wants to add automatic mirrors and the other wants to make it black. To solve this issue the engineer need to manually decide which feature he wants to keep between the different branches. In our case the Engineer has decided to keep both and will solve the conflict by adding both feature in the main production line.



In the above article I have just touched slightly some of the most used commands and terms that are use when using a version control. Using a Version Control software is like driving a car, initially it seems impossible, and everything is extremely hard, but then it becomes muscle memory and it is straight forward.

Unfortunately for me, this is the case now, and it is extremely hard trying to put even simple task in words. I thought this article would be easy for me, but it turned out to be one of the hardest.

If any of you know how to explain this in better terms or has comment of question please do not hesitate to comment below and I will happily edit the article to make it better.


*  Version Control definition from website:






Write cleaner Javascript code with Eslint

Javascript has a bad reputation, and this is mainly due to the fact that it is too flexible to use. Many users would abuse this great feature of this language writing code that is very inconsistent and hard to follow. For example, simple inconsistency like single or double quote around strings, can make project seem quite unclear and messy.

In recent years, after I have been exposed to different languages that follow a more rigid approach to coding standards, I have started to focus to write cleaner Javascript, and I would like to share some of these experiences.

JavaScript, is especially prone to developer error due to its lack of a compilation process. Linting tools allow developers to discover problems with their JavaScript code without the need of executing it. In this article I will be going into details on how you can  use and configure a lint utility to support you.

What is Eslint

Eslint is a pluggable linting utility created by Nicholas Zokas in June 2013, that can be used to analyse our Javascript code to highlight errors on the fly, supporting a quick and clean development.

There are many linters around, but I am listing below some of the reasons that have supported my decision to choose Eslint:

  • It is open source.
  • Great documentation.
  • Huge number of configurations
  • Good examples
  • Works with all major IDE and Code editors.
  • Can be used from the Command Line
  • Works on Build Server

Getting started with Eslint

Eslint requires Node,js to be installed on your machine, so if you do not have it, please download the latest stable release from the main website.


After Node.js is up and running, we can move to the next step by opening a Command Prompt and installing the Eslint package from NPM (visit the NPM website for more information regarding its usage).

Install eslint package globally
  1. npm i -g eslint


Following the installation above, we now have to define a configuration file called .eslintrc.json. Eslint comes with an handy feature to support you in creating this file. To trigger it, access the root location of your site and type the following command

Create eslint config file
  1. eslint --init

This command will return three options:

  1. Ask a couple of questions to define the configuration required
  2. Use a popular styleguide ( this will require an existing NPM package)
  3. Inspect your Javascript Files (not suggested if your coding style is inconsistent)

The above will be displayed in the command prompt like shown by the image below:

eslint --init options

For the purpose of this blog post, I am going to provide my own configuration file that need to be extracted in the root of your site. The file can be downloaded by clicking the following link:

Eslint Configuration File

Run the linter

After successfully complete the above steps, you will now be able to use Eslint by using its extensive CLI (command line interface) commands or within most of the major IDE (mode details to follow). The most basic command would just include the file or path to test, for example the following two example will respectively test file.js and all files within the “site” folder

eslint run
  1. eslint "c:/site/file.js"
  2. eslint "c:/site"

Configuration File explained

Now that we have Eslint fully configured, it is time to dive into the configuration file to see how a configuration file is structured, and what configurations are set in our setup. As mentioned above, there are hundreds of configurations, all well documented on the Eslint website.

Root & Environments

Section one
"root": true, //this will set this file and folder as the root directoty
    "env": {//load common environment/plugin configuration
        "browser": true,
        "commonjs": true,
        "es6": true,
        "node": true,
        "jquery": true

The first section of our configuration file includes the root setting. This is an optional setting that define the root of your project. Projects can have more than one Eslint configuration file, and when running it, it will search in the current folder and all its ancestors until it finds the root value.

The next setting used is the env (environment). Using this setting will load specific environment setting. For example in the case above we are allowing the use of ES6 notation, therefore we would not have any error triggered if using the arrow notation =>.


Globals eslint
"globals": {
        "exampleGlobalVariableName": true

The global configuration accept a object that will determine global variables that we can use within our JS files, without the need to be declared. Failing to do so, will trigger a no-undef error.

For example, when we added jQuery in the env setting above, has indirectly set a global for $ and jQuery variables. This setting is really useful to support the user to understand unexpected dependencies that you may have, that will result in hard unit testing.


Most of the configuration have three simple settings.

  • off – This configuration is self explanatory. It will switch the error off.
  • warn – This setting will trigger a Warning error. In many IDE warning are displayed with a Yellow underline.
  • error – This setting will return an error. A file could have some warning, but you should always aim for “error free” files.

Some specific rules have more arguments that can be used, but I will be wasting time trying to explain them, as the Eslint documentation is really complete.

Using Code Editors

Eslint CLI is fantastic, but I do not expect you to run it every single time you modify a file, and even if the linter gives you the line number for it, it would still be hard to use on a daily basis.

Luckily for us, Eslint is very easy to set up in most of the major code editors. In this section of the article, I am going to show how you install the linted on Visual Studio Code, that is my editor of choice.

Visual Studio Code

To use Eslint in the editor, we need to first install the official extension called ESlint. To access the extension page click the Extension button on the left menu or click Ctrl+ Shift + X (on windows).

After installing the above extension, you will be required to restart the editor for the effect to take place.

On restart, assuming your Eslint configuration file is in the correct folder, you will be able to immediately see errors highlighted in real time.

The screen shots below show some of the feature available when enabling the extension.



I have personally doubt the need for a tool like this, but now after using it, I cannot live without. The configuration that I have shared is a personal choice and I am more than happy for you to use it if you wish to, but at the same time, you should also dive into the available rules and see if there is anything that fit your guidelines.

Start to use a linter is just the first step to write cleaner code. No matter if you are a single developer or work in a big team. Introducing this tool will increase the quality and readability of your code. We have all been guilty of being sometimes lazy to keep our project consistent and lacking structure, but now the tools are available and we have no excuse but to start and write cleaner Javascript.


Phaser Game Part 1: Set up Node Js Server and PhaserJs

This post is part of a series of blog posts aimed to describe the step by step process of creating an browser game with PhaserJs using the latest ECMAscript standards.

This post in particular will set up the basic requirement for the game (server and file structure).

The Tech stack

For this game, I am going to use NodeJs and Express as our back-end server.  I usually use side project like this to gain experience on new territory, but this does not indicate that other servers may be less suitable.

Most of the game and all the game engine, are handled by the browser ( hence the name browser game) and therefore the Server does not play a key part and using nodeJs may actually be a good lightweight option.

The Javascript will be written using the latest ECMAscript 6 standards (please check current support from other blog post). This will enable us to investigate and lean the new standards, while developing the game. (Achieving two objects at once).

Set up the Work Station

Folder Structure




->Assets //This will include all the images and sprites

->Js //This will include all the js file required for our game

->External //This will include the phaser.js library


To install node js you need to download the latest stable version from the Node.js download page. The installation process is quite simple and quick.

After installing node, we will then be able to install all necessary packages by using the NPM software registry, directly from the command prompt.


The first requirement for our small server, will actually require us to install an NPM package called express. This package is one of the most comprehensive web application framework available for NodeJs. To install it you will need to enter the following in your command prompt window:

Install Express
cd c:/game/
npm install express

If you are not familiar with the command prompt, in the above snip of code we have firstly navigated to a specific folder, then run the “npm install” command specifiying the name of the package we wanted to install “express”.

This is all that is needed to install new packages using the NPM (Node Package Manager).

Code Editor

There is no requirement for  a code editor. PhaserJs can be ever be developer in a basic notepad.

For personal experience I would suggest one of the following:

  • Visual Studio Code
  • Atom
  • Sublime
  • Nodepad++

Basic Server

To create a web server using Node and Express we just need a couple of lines of code. More information can be found on the express website.

The following code need to be inserted in the file names Server.js.

Basic express server
//Example usage in the command prompt
//node Server.js
// Parameters
const port = 880; //Specify a port for our web server
const express = require('express'); //load express with the use of requireJs
var app = express(); //Create an instance of the express library
app.use(express.static(__dirname + '/'));//Serving static files
app.listen(port, function() { //Listener for specified port
    console.log("Server running at: http://localhost:" + port)

The code is heavily documented for illustration purpose. Please also note the use of the “const” type.

To run our server we just need to enter the following in our command prompt

run express server
node Server.js

Web page

Now that our server is now ready, it is time to create our first webpage.

To do so, just enter the following in the Index.html file:

Basic Index page
    <meta charset="utf-8" />
    <title>My Game with PhaserJs</title>
    <h1>Welcome to my game</h1>
    <p>This is my game page.</p>


It is time to add the PhaserJs library in our folders. To do so, visit the phaser JS website. There are many ways to download the library, either by npm command, or by cloning the repository from Git.

After downloading the library, please place the minified file “phaser.min.js” in the external folder to have it ready to be used in our next post.


Our server is now running (by using the command above) and we can access out newly created server by accessing “localhost:880” in our web browser.

This post was needed to set the scaffolding for out game.


Javascript Class: ECMAScript standards

 Javascript class

Using javascript class will really improve your code readability, structure and making it shareable with others. ( see my other post: Coding standards: Meaningful Names in Javascript).

For many back end developers, this post would have probably been written over 10 years ago, as classes have always been present in many programming language ( c++, c# and java, etc..). Classes in javascript on the other hand, have just recently been introduced in the ECMAScript 6 release of 2015 and have not yet hit developers keyboards.

This post is aimed aimed to give an introduction to classes and it does not go in many details.

ECMAScrips for Javascript and its advantages

JavaScript does not have the best reputation amongst coding languages, but finally after the long waited version of the ECMAScript standard and good browser support, there is some light at the end of the tunnel, and it is time to deep into the enormous amount of changes that made into the standards.

In recent years, JavaScript developers have been busy creating a multitude of “hacks” and libraries to help us fulfil lack of features that made it hard produce a clean and structured code.

In June 2015 the ECMAScript standards 6 have finally provided a multitude of improvement to one of the most used language in the world, followed by a much smaller release (ECMAScript 7 in June 2016).

ECMAScript 6, took over 4 years to reach our desks, but it didn’t fail to impress and with current browsers finally introducing support for most of the changes, developers are now ready to get their hands dirty and help to improve JavaScript reputation.

Browser Support

Browser support has recently made a fantastic improvement, giving us all a chance to start and implement the great majority of the ECMAScript standards, without worry.

At the time of this post being published (June/2107) the support on desktop is almost complete ( click for full support table):






As shown by the table above, the support on desktop browser is quite complete, except the odd IE11 with an unacceptable level of support below 15%.

For mobile the situation is quite similar:




Almost full support for the most common browser except on android where just a quarter of features are supported.

Classes Before ECMAScript 6

Even if Javascript class have not been precisely available, developers across the countries have implemented them by using functions, scope, prototype and many other method. This has lead to a multitude of different approaches being adopted by programmers, making the dream of having a possible “standards” a myth.

In this post we will start from an existing small “class” written before the ECMAScript 6, and then implement the newly introduced “classes features” to show the power and structure that they provide to your code.

The code below is an algebra helper for rectangles.

var rectangle = function(width, height){
    var self= {};
    self.width = width,
    self.height = height;
    var calculateArea = function(){
        var area = 0;
        area = (self.width * self.height);
        return area;
    var calculatePerimeter = function(){
        var perimeter = 0;
        perimeter = (self.width + self.height) * 2;
        return perimeter;
    var getHeight = function(){
        return self.height;
    var setHeight = function(height){
        self.width = height ;
  return {
    calculatePerimeter: calculatePerimeter,
    calculateArea: calculateArea,
    getHeight: getHeight,
    setHeight: setHeight

Classes in ECMAScript 6

In this section we are going to update the above code to use the javascript class feature.


The first thing that we will have to do is create a base class called rectangle.

base class
class rectangle{


Then we will create a constructor. In the previous version of Javscript to emulate the constructor we would have had to create an init function or a self calling function within the method. ( none of this example is shown above as this cover the basic to assign some values).

javascript constructor
  constructor(width, height){
 this._width = width;
 this._height = height;

Getter and Setter

Our class is starting to take share, we will now implement the GET and SET methods

Javascrtipt get methods
   get height(){
        return this._height;
    set height(height){
        this._height = height;

This methods have been introduced in the ECMAScript 2015. They are commonly used across different programming language and do not require a function call to be initialised. An example usage of the above would be:

get and set
var r = new rectangle(10, 5);
r.getHeight;// Output 5
r.setHeight = 10
r.getHeight;//Will output 10

Methods declaration

Class methods have not changed and the declaration is very similar to the one showed in the initial javascript example. The main difference to note is that every method declared within a function will actually be set to PUBLIC. There are rumours of the implementation of public variables and methods for the next ECMA release ( Javascript new private class field). There are currently 4 different “solution” to make standards private methods, and they are all out of the scope of this post.

Method declared within a class will not require the “function” word, and do not require to be returned or specifically made available as they will be available as part of the object immediately after initialisation. Our example will be:

class methods
        var area = 0;
        area = (this._width * this._height);
        return area;
        var perimeter = 0;
        perimeter = (this._width + this._height) * 2;
        return perimeter;


This post is aimed at sparkling some curiosity, and give just a small definition of javascript class. The final result is:

class rectangle{
    constructor(width, height){
        this._width = width;
        this._height = height;
    get getHeight(){
        return this._height;
    set setHeight(height){
        this._height = height;
        var area = 0;
        area = (this._width * this._height);
        return area;
        var perimeter = 0;
        perimeter = (this._width + this._height) * 2;
        return perimeter;
var r = new rectangle(10, 5);
r.getHeight;// Output 5
r.setHeight = 10
r.getHeight;//Will output 10

Classes are maybe still not fully ready for big production environment ( mainly because of the absence of a private field), but we should start to use them to get confident in using them when time comes. There are still some amazing features like inheritance ( that has not been covered in this post) that make class worth using.

I personally like the use of class because they force to structure the code differently. They put a big distinction between normal functions and big chunk of work and are perfect to get around Object orientated programming.

I will keep posting my finding on the ECMAscript 6 and future release as for my opinion this is the real future of javascript.

The power of mentoring


What a better way than start this post with this amazing quote from P. Collins. Teaching and mentoring is not sorely aimed at sharing your knowledge for others to learn, but it is the process in which you personally develop.

“In learning you will teach, and in teaching you will learn.” Phil Collins

It is well known that the IT industry is filled with many people suffering from “The imposter sindrome”, but in many instances these individuals are the best that the market is able to offer, and lean them toward a mentoring career, can be an eye opening experience.

What is mentoring

I have been looking for a nice definition for mentoring, and I finally found one that was short and concise on the

An experienced and trusted adviser.

I like this quote because it does not go in details, neither does it mention higher qualification or age or company position. It focuses on what really matter Experience and trust.

Experience and trust

Experience is of course a core required for mentorship, as a mentor is supposed to “guide” an individual toward an improvement of some sort. But this experience is not specific to one skill(more details below). During my last 4 years at Vizolution I have been able to be thought by some great mentors, each of which have inspired me in different ways, but what was really great was seeing employers coming in, learn, and share that knowledge with other people.

To mentor someone you need to have some skills to share. What this mean is that you could be very good in keeping notes, and therefore still be able to mentor and support a very disorganised Senior developer, or you could have adapted to scrum faster than your fellow colleagues and help them to get up to speed ( both true stories).

I really think that teaching and mentoring are completely two different way of sharing knowledge. When using the word mentoring, you are implying that you are taking “ownership” of an individual supporting him/her all the way, while teaching is just about knowledge transfer, and does not focus on how much the audience assimilate.

How to mentor

I personally love to mentor, but even more being mentored as I like to see how different people approach this subject and try to learn on the way.

To mentor people you do not need a bright star on your shirt, or a cool Job title on your name badge, what you really need is a state of mind, one that will put other people before any sort of priority, because as I said before you are taking ownership of someone skills and therefore have a duty to support them every step of the way.

I have always enjoyed teaching other people what I knew, but it has just been recently that I have been able to learn how to mentor people. I am currently supporting over 40 developers, and I try to build a specific road map for each of them to help them improve where they need it the most.

Lead the way

There are many different example that I could share, but the message is always the same, lead the way and make sure you are being followed (always make sure you are not talking by yourself, involve the person, test how much they are learning, let them take control).

If you are dealing with a junior developer, instead than just show the correct code to complete a task, you should first of all try to understand the thought that went behind his/her solution, and try to guide the programmer by showing  them the possible improvements and the different paths that could have been taken, so that the correct code becomes just a simple tool of a greater lesson.

Of course the mentoring tactic need to change depending from the individual. Some people want to be supported and helped and don’t really value themselves, but there could be other that are very confident and need a lighter support, they may not even know that you are mentoring them, but this is when mentoring really stands out.

Why do mentoring

It take time, energy, it is very difficult and sometime the person that you are mentoring may not even be aware of it, so why should you even bother.

Personally I think that a great mentor, is a great leader. Mentoring is the best way to learn your strength and your weakness. It help you with personal development and improves your existing skills.

I talked about “the imposter syndrome” above, because developers are well know for not being very social, and in many cases this is also accompanied by a sense of failure. Unfortunately, this developers, are usually the most skilled, but their knowledge is not shared. I have seen the great effect of mentoring on a specific individual, starting to share his personal skills made him realise how good it was, he improved his self esteem, and made him a key employed in the company. We usually focus too much on the core skills (in this case coding), and we forget that people may need help in different areas.

Who can mentor

It should be clear by now, that everyone should mentor. We may all do it differently, and some of us may not succeed at it at first time, but this does not mean that mentoring is not for you.

As mentioned above, I love to being mentored, I like to find the strength in people and let them teach me what their really know by sharing their love for something.  It is not important if they are junior, senior, or even if they do not work in my same sector, if someone has a specific skills that is worth sharing, it is important to accept your weakness and ask for support.


I am currently the technical lead, but this does not stop me going to admit that there are developers that are better than me in specific skills, and this is what mentoring did to me.

Mentoring and being mentored showed me my weakness, but it also showed that there is not harm in being open about them, because I also know to have many different strength. This state of mind is what helped me and there is no better or easier way to achieve it than by offering your help and open yourself to support others.