tmUp

This is a multiplatform aplication to manage your sports team.

Front end best practices

HTML

Style

Style of HTML in SCSS stylsheet like this

div{
  padding: 0;
}

and NOT like this:

<div style="padding:0"></div>

Code organitzation

Tags should be close correctly like this:

<div></div>

And NOT like this:

<div/>

Any Tag inside another Tag will go in a new line with tabulation (line break + tabulation). Follow the TREE structure.

<div>
  <p>
    Texto del parrafo
  </p>
</div>

Comments

Comments should be writte in a single line if its possible. If comments are longs can be written in differents lines.

<!-- Linea del comentario corto -->

<!-- 
  Linea del comentario largo 1
  Linea del comentario largo 2
-->

Syntax

Name of tags and attribute in lower case

<div id="texto"></div>

NOT like this:

<Div ID="texto"></Div>

Signifiactive name of elements and name of type at the final of the name

<button name="registroButton">Registrarse</button>

ALWAYS use " to the values of the differents attributes instead of '

<button value="reset">Reset</button> 

NEVER use space between '=' and the value of the attributes

<p id="parrafoLargo">Parrafo largo que tiene mucho texto</p>

SCSS

Document Organization

Document should have the following structure:

• generic
• header
• main content
• footer

Each section should be started by a comment with 30 dashes on top and bottom of the centered section name:

/* ------------------------------
               HEADER 
   ------------------------------ */

Comments should be short and shouldn't be longer than a line

Element Style Definition

The opening bracket should be in the same line as the element:

h1 {

}

Properties of an element should be ordered alphabetically

The style of an element shouldn't have any blank lines

There should be a space between the property's double dots and the value:

  color: black;

not like this:

  color:black;
  color : black;

Use general properties to keep the code simple:

  margin: 20em 10em 5em 10em;

instead of specific ones:

  margin-top: 20em;
  margin-right: 10em;
  margin-bottom: 5em;
  margin-left: 10em;

ALWAYS define margin and padding (even if it's 0) to prevent difference between devices

Measure Units

• Use percentages (%) for containers
• Use em for letters and distances

Back end best practices

Variables

Variables have to be written in lowerCamelCase:

var thisIsAVariable = 4;

Not like this:

var ThisIsAVariable = 4;
var thisisavariable = 4;
var this_is_a_variable = 4;

Functions

Functions should be written in UpperCamelCase:

ThisIsAFunction() {
/* code */
}

Function parameters should start with i_ if they are input parameters, o_ if they are output parameters or io_ if they are both input and output parameters and the type has to ALWAYS be specified

ThisIsAFunction(i_input: String, o_output: String, io_inOut: String) {
/* code */
}

CRUDS

Each crud has to be in a separate file, referenced in index or other cruds

DB Fields

ALL fields must be written in lowerCamelCase like:

statistics {
  team{
    football{
      wonMatches : 0,
      lostMatches : 0
    }
  }
}

not in UpperCamelCase or snake_case like:

statistics {
  team{
    Football{
      won_matches : 0,
      LostMatches : 0
    }
  }
}