blog

why work from home, pros and cons

In the past decade work from home has increased steadily, becoming now one of the “must have” when seeking for a new job opportunity. This report from the Bureau of labor statistics, shows that in USA there was a 5% increase in people telecommuting from 2013 to 2015. Reaching a peak of 25% (Full report here)

This trend is powered by the fact that both the employer and the employee gain from the use of it.
Few years ago, it would have been very hard to convince your board members that working from home, would have increased productivity, because there was a layer of doubt across managers to accept that having an employee sit in his own home would have ever been beneficial for them.
But luckily, thanks to big companies such as google, amazon and Apple that have driven this trend, and tons of statistics and success stream produced by remote workers it is becoming steadily easier to convince your company to allow to work from home.

The good stuff

There are plenty of resources from around the internet to convince you or your employer to swift toward working from home.
For personal experience the main advantages for both employer and employees to offer work from home are:

Employer advantages

  • Save money on office spaces
  • Allow to employ people from all over the world
  • Increase people morale and productivity
  • It make the company more appealing to employee
  • Statistically proven that employee work longer and harder

Employee advantages

  • No need to commute
  • Save of travel expenses
  • More relaxed due to familiar environment
  • Allow to seek for job from all over the world

The bad stuff

Even if work from home is a fantastic trend, there are some part of it that can really affect you, either if you are the company owner of an employee.
I have personally experienced a small degree of work from home and I have noticed that not all grass is green.
work from home is very good on the tin, but it comes with its own disadvantages and these are:

Employer disadvantages

  • Extra set up/ software needed for work from home
  • Need good organisation with inventory, because scattered accross the globe
  • Employees could be on different timezone and this can affect the business
  • It is not easy to transition to remote working when you are using to deal face to face

Employee disadvantages

  • You may inadvertently work too much
  • Hard to switch off because work and life environment is the same
  • Different timezone may affect you (eg. company meeting)
  • Lack of socialisation
  • It is not easy to transition to remote working when you are using to deal face to face

Conclusion

I personally think that is not easy to transition to work remotely, and I also believe that is not something that may actually suit everyone’s needs. Telecommuting, surely has its own advantages and can be very useful in some circumstances (eg, for people working in very remote areas or very focused individuals), but I am very sceptical that working in your own house is actually going to be the norm across the industry.

A tangible example to show how difficult could actually be to adopt this trend, has recently been announced by IBM, that even if it was one of the early adopter to offer its employees the ability to work from home, has now started to move all its workforce back into offices, as shown by this report of the newsobserver. 

I had the ability to do remote working, but unfortunately, I really missed the face to face, the chat in the kitchen, hearing people conversation and start a office wide discussion.

Nowadays, software like Microsoft Teams and Slack are facilitating the transition offering great communication and visual features, but I personally think it is still not enough.

Which Javascript framework should I learn first

This is probably one of the first question that comes into every mind of new developers. The framework world is cluttered with hundreds of Framework, all promising to be the best, the fastest and the easier to use, but which one is the most suitable for new starters.

In this post I am going to share my opinion on where to a new Javascript developer should start and give a small review of the most used frameworks.

What is a Javascript Framework

A JavaScript framework is an application framework written in JavaScript. It differs from a JavaScript library in its control flow:[1] a library offers functions to be called by its parent code, whereas a framework defines the entire application design.[2] A developer does not call a framework; instead it is the framework that will call and use the code in some particular way. Some JavaScript frameworks follow the model–view–controller paradigm designed to segregate a web application into orthogonal units to improve code quality and maintainability. Examples: AngularJS, Ember.js.Wikipedia

In a nutshell, Javascript framework will provide you a complete structure to support your development by forcing specific patterns and guidelines. Even if different framework support you in achieving the same result, the implementation differ quite considerably, and knowledge can not be transferred between them.

What are the best Javascript Framework

This paragraph is going to cover the most used framework available on the market right now. The framework are shared in “No particular order”.

Angular 4

Angular was one of the first frameworks to be pushed to the public bug in 2009. Due to its maturity and the large community, AngularJs is usually the first choice around new developers.

Angular has recently received a complete upgrade. The new version, due to be a complete rewrite, is not compatible with the old one. This means that many of the example that can be found around the internet, may not work. This problem will fade overtime, but now, it can obscure proper result.

Pros

  • Mature with 8 years of experience
  • Two way data binding
  • Highly testable
  • MVVC architecture

Cons

  • Complete rewrite of version 2, so old example may not work
  • “Scope” in angular can be tricky to learn at first
  • MVC could be hard to learn if not familiar with it

 

 ReactJs

I will start this paragraph by specify that for many people reactJs is not accepted to be a framework, as it does not fulfil the definition above. React ( if used by itself), is just a view engine. Due to its popularity, and the amount of available plugins I have inserted it in this list.

React has been created by the creator of Facebook and instagram, and has been firstly been released in 2013.

Even if younger than angular 2. React is catching up quite quickly.

Pros

  • Very efficient
  • Good with SEO, because Server side render is possible
  • very active community

Cons

  • It is only a view layer
  • It needs other components to fully work
  • Learning curve quite steep, due to its different approach in creating components.

MeteorJs

Meteor has been initially created in 2011, and like the other framework has a large active community. This framework offer full stack capacity covering all aspect required for a successful Web/Mobile App.

Pros

  • Easy to scale

Cons

  • It is designed to work with Mongo DB
  • Need good understanding of NodeJs

 

VueJs

Vue has been created in 2014 uses the MVVM design paradigm and offers two data binding. Vue is one of the youngest framework around, but it is gaining speed and growing it community.

Pros

  • Easy to understand
  • Good Documentation
  • Small in size

Cons

  • Offer too much flexibility
  • Most of the community is NON english speaker

My preferred framework

Now that we have defined the framework above, it is time to share, what are my personal opinion on this matter. I had the change to try a couple of the framework above. Both cases the learning curve has been quite steep to start, and it made me realise that most of my energy where used in learning the Framework requirement without using lots of Javascript.

In my case, this was not a problem as I have a strong JS knowledge, and therefore could focus on the framework requirement. But I personally think that all new developers should not really use any framework until they have fully embraced the basic javascript knowledge.

As I mentioned above, all the javascript framework available, uses slightly different structure and implementation, reducing your employability to a specific market share.

This may not seem a problem at the start when everyone is looking for the greatest and coolest, but things ca go wrong, and in a very short amount of time, and in that case having experience on a framework that is not in use anymore could be a problem.

Conclusion

It is essential to be comfortable with plain javascript first, before moving along and learn different framework.

Having the basic knowledge will be a great advantage when learning a new framework.

All framework have a specific segment of the market, and as such, deep research should be done before adopting one as the decision should be made by a project by project bases.

We are going to be part of History. The end of Petrol/Diesel Cars and the raise of electric ones

Today, in case you have not noticed, we have been invited to be part of History. It may seems confusing, but I am meaning it. The UK government has today announced that sale of Petrol/Diesel cars will be stopped by 2040.

I know it may seem a long time form now, but if you think ever meet a car with a registration number starting with R, well, that was build in 1997, that is 20 years ago, and ruffly close to the deadline announced by the government.

If you are reading this post, you are more than luckily going to be part of this “transition”. Fuel engine have been part of our lives since the early 20th century, and for many years, people have been calling for a change in the use of this engine, to be swapped with something greener.

What does it means for us

The example that I posted above (about the car build in 1997), highlights that many cars that are going to our of factory today, may still be in circulation when the deadline occur. In the next years, many motoring will “automatically” transition to electric cars, because by a new car that runs on fuel would be economically incorrect, as they will loose value quickly as the deadline approaches.

The latest release of the Tesla Model 3 has probably played an important role in this government decisions. Tesla has managed to start “mass production” of this new car model, and this has helped to start and push the prices down, and started a economic war between all big car manufactures.

Tesla model is around £ 24.000 that is around the same price of a medium range car. This will not allow buyers to be able to make their choices depending on model preferences and not just price (until now all electric cars have always been considerably more expensive).

What does it mean for the government

Even if the news have sparked excitement around the country, there is still lots that need to be done for this to actually happen.

Electric cars are not only cleaner than cars fitted with fuel engine, but their are also considerably cheaper to run. On average an electric car will use around 3-4KWh for every 10 miles. That translate to around 48p (applying a general cost of 12p for KWh).

The government has two main duties to facilitate this transition. First they will have to provide enough electricity ( more details below) and create enough charging station around the country (maybe give incentive to people that may supply this service). Next, they need to continue to push incentive, by providing scrapper scheme and grants to buy new electric cars. Having too many Fuel car still around by 2040, could create market instability due to the quick market value volatility of fuel cars.

How much electricity is required when all cars turn electric

Unfortunately this has its side effect. In fact the Guardian wrote that there are around 90k electric cars in UK right now, and if we change all cars to be electric, this number will peak to around 9M. This could add an extreme demand on our national grid, requiring up to 30% extra energy. (Very simplistic calculation found on the quora website).

This figure is huge (Thousands of TWh), there would be need over many nuclear plants and hundreds of wind farm, all would need to be build in a short amount of time (build a power plant take a long time).

Conclusion

It is amazing, that we will be all part of something so amazing. Our generation, will be remembered for this amazing change ( and hopefully also for landing on mars :).

The french government early this month gave an even bigger statement. In fact, France has announced that they will “ban all petrol and diesel car by 2040). Now this news are going to be followed by car manufacturers like VOLVO that has recently announced that “all new models will have electric motors by 2019”.

What we have to do now is wait, wait for history to be written in front of our eyes, and also for the “price war” to began, hoping that electric car will get great models and low prices.

During my childhood I would have never believed to be able to live this moment, and hopefully in 23 year form now, I will be here again to share the moment with you.

 

 

 

Javascript String: ECMAScript standards

This is the second article highlighting some of the latest improvement issued in the most recent released of the ECMAscript for javascript string.

The first article covered classes and is named:  Javascript Class: ECMAScript standards.

Javascript String

String is one of the most primitive object and most used in any programming language. It the most recent ECMAscript releases (starting from the 2015), javascript string have received some updated and improvement that will support developers in their usage.

This article will cover changes like templates literals, replacements, concatenation and tagged templates literals by offering brief descriptions and code snippets where appropriate.

Template literals

Template literals also known as “template strings”, can be accessed by the use of the back-tick (`) characters, differently from the basic strings that are initialised with single or double quotes.

This are very powerful as they enable string manipulation without the overhead that that we have had to use until now. The first feature of template literals that we are going to cover is the ability to specify multi-line strings.

Multi-line String

Javascript multi-line string have until recent being defined by ending the string with “/n” and a “+” sign, Like the example below.

old multi-line
 
console.log('This is my first line 1\n' +
'and this is my second');

This code, even if probably quite easy to write, it is not easy to maintain and not nice to read (breaking one of the rule of clear code).

If declaring a string with template literals notation, you will actually be able to define multi line string without the need of any additional character. The example below will actually output the same as the one previously shown.

Template literals multi-string
 
  1. console.log(`This is my first line 1
  2. and this is my second`);

String replacement “embedding”

String embedding or replacement occurs when we try to dynamically create a string by adding an expression or a variable within it. This is personally one of the feature that I really hate in Javascript. Most of the common languages had string manipulations methods and finally, this feature are also available to the Javascript developers.

Prior to the template literals you may have use the following to create a dynamic javascript string.

expression interpolation
 
var a = "Fifteen";
var b = 5;
console.log(a + 'is ' + (b * 3) + ' and\nnot ' + (b * 2) + '.');
// "Fifteen is 15 and
// not 10."

The above is not only quite tricky to write as it require lots of parenthesis and quotes, but it is also very hard to read compared to the following, that as with all the other examples, will output perfectly the same.

template literals: expression interpolation
 
var a = 'Fifteen';
var b = 5;
console.log(`${a} is ${b *3} and
not ${b * 2}.`);
// "Fifteen is 15 and
// not 10."

 Tagged template literals

This is an advanced for of template literals. It will enable you to create a function that can be used to parse you template literals.

The return value of this function does not have to be a string, but in the following example we show the “basic” feature.

tagged template literals
 
function tagExample(strings, valueOne, valueTwo){
    //the strings is the array of strings, each item separated by one of the value
    let firstPart = strings[0];
    let secondPart = strings[1];
    let thirdPart = "";
    if(valueOne >= valueTwo){
        thirdPart = "therefore younger than me."
    }else{
        thirdPart = "therefore older than me."
    }
    return `${firstPart} ${valueOne}
    ${secondPart} ${valueTwo}
    ${thirdPart}`;
}
tagExample`I am ${myAge}while my brother is ${myBrotherAge}`
//OUTPUT
"I am  15
while my brother is  30
therefore older than me."

String prototype methods

The following paragraphs are going to cover useful methods that have been released since the ECMAscript 2015.

javascript string includes

This new method is surely going to put a smile on your face. As a developer, I have used the following OLD method many times, and every time I had to go through over at least twice to make sure that it was returning the correct behaviour.

The include method will allow you to search for a specific string and will return the position. This was previously done using the indexOf() method like the example below.

indexOf
 
var stringToSearch = "This is a very long string";
stringToSearch.indexOf("string") !== -1;
//true

We are now able to easily obtain the same result using the includes() method. This method also allows us to pass a second paramether that specifies where the string starts.

string.includes()
 
var stringToSearch = "This is a very long string";
stringToSearch.includes("string");
//true

javascript string repeat

The name of this method is self explanatory. It allows you to repeat a specific string for a X number of times

string.repeat
 
let var1 = "etc ";
var1.repeat(3);
//etc etc etc

javascript string startsWith and endsWith

This helpers return a Boolean value and also support a second parameter that is the position to where the string check starts.

string.startWith
 
var string1 = "Start with a simple word and finish with another.";
string1.startsWith("simple ", 13);
//true
string1.endsWith("Start");
//false

Browser support

At time of writing, the features covered in this article are largely supported in all the main used browsers ( includes mobiles browsers), with the only exception of IE11 and is still not supporting this features as showed by the graph below or as it can be found in by following this link to caniuse.com website.

teamplate literals
teamplate literals

Conclusion

Even if the above feature may not be the most exiting introduced by the ECMAscript standards, they are surely going to make your day to day life a lot easier. Productivity can surely increase and this small methods will not only make you develop faster, but will also make your code more readable that is what most of us hope to achieve.

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

Game

->Server.js

->Index.html

->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

NodeJs

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.

Express

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
 
<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8" />
    <title>My Game with PhaserJs</title>
</head>
<body>
    <h1>Welcome to my game</h1>
    <p>This is my game page.</p>
</body>
</html>

PhaserJs

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.

Conclusion

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.

 

"