blog

The power of mentoring

Intro

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 oxforddictionaries.com

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.

Conclusion

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.

Coding standards: Meaningful Names in Javascript

Intro

This post, is part of a series aimed at creating some basic coding standards for the javascript language.

Even if Javascript is well known for being “flexible”, giving the developers too much freedom when using it, it does not mean that there could not be a standard.

My personal speciality is Javascript, and like many developers, I started to use it adopting my code structure and implementation, depending to the project I was running, the pressure and sometime due to the weather ( I live in Wales, so the weather need to be mentioned!). But recently there have been two main event that have helped me to understand the importance of structure. Firstly  I have started to move toward a Full Stack position, starting to learn new languages and learning different techniques and then I was introduce to Clean Code: A Handbook of Agile Software Craftsmanship, one of the best book on the market for coding standards.

Even if I strongly suggest to read the book as it was very inspiring for me, I am still going to dedicate some of my blog post to analyse and migrate part of the book into the Javascript world, highlighting starting from the use of names.

Note: All the “Bad” examples below, comes from real life experience.

Summary from the book

I have extracted part of the book by quoting the most important sentence of the paragraph accompanied by a real life example. Some section have been omitted as not fully relevant with Javascript.

Use Intention revealing Names

The name of a variable, function, or class, should answer all the big questions. It should tell you WHY it exist, WHAT it does, and HOW it is used.Use Intention-Revealing Names

example 1
 
//Bad
var time;
var diff;
//Good
var todaysTimeInMilliseconds;
var ageDifferenceBetweenUsers;

Use pronounceable names

If you can’t pronounce it, you can’t discuss it without sounding like and idiot.Use pronounceable names

example 2
 
//Bad
var btn;
var usrAdd;
var psw;
//Good
var actionButton;
var userAddress;
var password;

Use searchable Names

If a variable or constant might be seen or used in multiple places in a body of code, it is imperative to give it a search-friendly name.Use searchable names

example 3
 
//Bad
var dd;
var max;
//Good
var directDebit;
var maxAjaxAttempt;

Avoid Mental Mapping

Readers shouldn’t have to mentally translate your names into other names they already know.Avoid Mental Mapping

example 4
 
//bad
var fn;
var ln;
//good
var firstName;
var lastName

Note: If a loop is bigger than 10 lines, this should have meaningful names too instead than a 1 letter variable.

Don’t be cute

Choose clarity over entertainment value.Don’t be cute

example 5
 
//Bad
var theOnlyButton;
var killSwitch;
//Good
var submitForm;
var closeWindow;

Pick one work per concept

Pick one word for one abstract concept and stick with it.Pick one word

example 6
 
//bad
var fetch;
var retrieve;
var get;
//Good
//use just one across all the project.

Use solution domain name

Remember that people who read your code will be programmers.Use solution domain name

 

example 7
 
//Use technical terms:
var queue
var absolute
var length

Do it for your future self

It is always easy to quote a great artist, or to create a couple of examples, but the hardest part is to actually merge this small little tips in your everyday life.

I have seen an amazing improvement in my code quality and sharability ( ability to share my code with other developers without the need to add comment or explanation). I wanted to start and write this post to make people realise the importance of this small little changes.

Sometime we think that by using a very short variable we have saved ourselves time, but it is completely the opposite. The code that we have just written now, will be read many times, not only by yourself while developing but also down the line when the next update will be required in the future ( prob still you in 6 month time) or by a developer that will have no business knowledge, and that extra second that you have saved in naming a variable with a short name will be lost over and over again overtime.

Spending some extra time on deciding the correct name for a variable is worth every penny, sometime the best thing when in doubt is to ask a colleague, there is no one, better that someone that doesn’t know anything to support you in this hard task.

From practice to real life

I have written the following code to show a real life example and show how a few little variables can really change the speed with which we can read and understand the code. This is not to say that the code is actually perfect, but it is surely an improvement.

The following 11 lines of code, have nothing wrong. It is a normal function with a couple of “For loop”.

Lets read it:

Real Example 1
 
var updateObj = function(obj){
    for(var i = 0; i <= obj.length; i++){
        var sum = 0;
        for(var a = 0; a <= obj[i].marks.length; a++){
            sum += obj[i].marks[a];
        }
        var avg = sum / obj[i].mark.length;
        obj[i].exc = (avg >= 70) ? 'Yes' : 'No';
    }
}

Was it easy to read, does it explain what it does since the start?

Well, this is what most people code will probably look like. I have probably created an extreme case, but many of the pattern in the above code can be found everywhere ( the user of updateObj as variable name, or name a variable sum because is s sum of number).

The same code, with a little clean up on around names will look something like:

real example 2
 
var addExcellenceFieldToStudentsObj = function(obj){
    var students = obj;
    for(var i = 0; i <= students.length; i++){
        var student = students[i];
        var sumOfCurrentYearMarks = 0;
        var numberOfMarks = student.marks.length;
        for(var a = 0; a <= numberOfMarks; a++){
            var mark = student.marks[a];
            sumOfCurrentYearMarks += mark;
        }
        var finalMarkAverage = sumOfCurrentYearMarks / numberOfMarks;
        student.excellence = (avg >= 70) ? 'Yes' : 'No';
    }
}

The function main login is still the same, and the two For Loop are still there, but not there is a different flow when reading the code.

You don’t need to arrive at the end of the function to know that we are working on the studentObject ( the function name is now easily searchable), and you don’t need to reach the tenth line to understand that by sum we mean sum of mark.

Conclusion

This is just a small example of the power of naming. If used properly it can really change the way we develop and the way people see our code. It increase quality, readability and remove the need of comments (that are not needed if a code is well written).

I am astonished by the amount of time I have spent time reading a code over and over to understand what i really does before being able to change it, and even more surprised when that code was written by myself. I have since when making sure every file I create or update will have the same kind of “naming refactoring” showing above, as the effort is minimal ( it doesn’t change logic and if the test is covered by automatic test is quite a log risk change), but the improvement is enormous.

I hope you too share the same feeling and will help me create this standard across the industry to make Javascript a cleaner and more consistent language.

 

From Website to Mobile App

Progressive Web App

Progressive Web App is a collection of web technologies that is aimed at offering a fast, reliable and engaging  experience for application (progressive-web-app), even when the app is accessed offline.

This post is going to cover one of the technologies offered by the progressive app, the “Web App Manifest”.

The manifest is very powerful, because even if  simple to implement and deploy on your website, it will actually enhance the user experience, making your website look like a native application, by making it accessible straight from the home screen without the need to be downloaded from any AppStore.

Unfortunately as every new trend used accross the web, the support of this functionality is still quite low, but recent adoption of this in chrome and Firefox have made this feature worth learning (web-manifest-support).

The manifest file is accessible by anyone from the debugger tool offered by chrome within the Application tab. This tab is also used for other Progressive Web App feature like the service worked.

manifest from debugger
twitter manifest from chrome debugger

How to include a manifest

A manifest, as mentioned above, is just a simple json file that will include basic information about your app. The file can be added in your website like any other resource, by being referenced in the page header within a link tag.

link
 
<link rel="manifest" href="/web-manifest.json">

 

The manifest Details

The manifest does not require all fields to be filled in, in fact in this post, we are going to cover what we believe to be the most common arguments.

The minimum requirement of  a manifest file are name, description and a single icon.

Name and description

The first fields are off course the core of our app, and cannot be anything different that name and description. This give basic details about the app (description), and are used as label for the icon (name).

name
 
"name": "MyApp",
"short_name": "MyApp",
"description": "This is my app and is amazing!"

Icons

The icon section is probably one of the most important and required field for the manifest. It specify the location of all different icons, divided by size and density.

Currently there are 6 different icons sizes in the mobile world and they are 48px, 72px, 96px, 144px, 168px, 192px.

The example below will cover just one icon example, but for best result across devices all of the above should be covered.

icons
 
  "icons": [{
    "src": "images/touch/icon96.png",
    "sizes": "96x96",
    "type": "image/png",
    "density": 2.0
  }]

background_color

This is an interesting field, that when used, will give your app a nice touch.

The background color specified in this field will be applied to the app on click, before the stylesheet is loaded. If used correctly ( so for example if the colours are different from this field and the real background), it will notify when the app is loading.

The color can be specified directly with a supported color name (red) or the or by HEX color code (#333).

background_color
 
 "background_color": "#333"

display

This is the field of excellence, this setting will increase the user experience by giving you the ability to open the app fullscreen removing any browser interface.

The display field can accept four settings (fullscreen, standalone, minimal-ui, browser).

The fullscreen value is what provides the app the native look we have all been waiting for.

display
 
 "display": "standalone"

related_application

If you are reading this post, the filed below will most likely not fit your need. But it was too important to be left out.

The related_application array, will inform the mobile device, that there is a native application with a specific link to the AppStore.

related_applications
 
 "related_applications": [
  {
    "platform": "play",
    "url": "https://play.google.com/store/apps/details?id=com.example.myapp",
    "id": "com.example.myapp"
  }]

When the a related native app is available, and if the app provides additional feature from the Progressive Web app, then the user car be notified that the native app is preferred with the following field. This should be avoided if both the website and the app offer similar features.

prefer_related_applications
 
"prefer_related_applications": true

others

There are many other settings, such as orientation, start_url, service_worker, lang. But I wanted to focus on the most important points and leave you the possibility to go and investigate further what the manifest and the Progressive App technology has to offer.

The manifest is still in draft, but due to its progress in browser support and wide use across the internet, is surely going to make is way to the standards soon.

Reference

Main image from: http://marketingland.com/

W3C manifest proposal: https://w3c.github.io/manifest/

"