Analysis

High-level design or Detailed-level design.

Explains the architecture used to develop the software product, providing an overview of the entire system, identifying the main components that would be created for the product.

How to do it?

1. READ

2. ASK

3. WRITE

Your analysis will be ready when you start coding without getting up, asking or checking anything else.

If a bear eats you, your analysis works as clear code instructions for any developer.

Config

Editor

Helps developers maintain consistent coding styles between different editors.

# editorconfig.org
root = true

[*]
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
indent_style = space
indent_size = 2

.editorconfig

Editor

https://plugins.jetbrains.com/plugin/7294

https://github.com/sindresorhus/editorconfig-sublime

https://atom.io/packages/editorconfig

plugins

Styleguides

A style guide is a set of standards for the writing and design of documents.

airbnb JavaScript

https://github.com/airbnb/javascript

Use object destructuring for multiple return values, not array destructuring.

https://github.com/airbnb/javascript/blob/master/README.md#destructuring

Why? You can add new properties over time or change the order of things without breaking call sites.

JavaScript Styleguide

    // bad
    function processInput(input) {
      // then a miracle occurs
      return [left, right, top, bottom];
    }

    // the caller needs to think about the order of return data
    const [left, __, top] = processInput(input);

    // good
    function processInput(input) {
      // then a miracle occurs
      return { left, right, top, bottom };
    }

    // the caller selects only the data they need
    const { left, right } = processInput(input);

JavaScript Styleguide

Sass Guidelines

http://sass-guidelin.es/

Selector Nesting

Selector nesting offers a way for stylesheet authors to compute long selectors by nesting shorter selectors within each others.

http://sass-guidelin.es/#selector-nesting

Sass Styleguide

.foo {
  .bar {
    &:hover {
      color: red;
    }
  }
}

// will generate this CSS:

.foo .bar:hover {
  color: red;
}

Sass Styleguide

The problem with selector nesting is that it ultimately makes code more difficult to read.

Always avoid it.

Exceptions

.foo {
  color: red;

  &:hover {
    color: green;
  }

  &::before {
    content: 'pseudo-element';
  }
}

Sass Styleguide

Linters

Linter is any tool that flags suspicious usage in software written in any computer language.

ESLint

http://eslint.org/

Disallow Shadowing (no-shadow)

Shadowing is the process by which a local variable shares the same name as a variable in its containing scope.

http://eslint.org/docs/rules/no-shadow

ESLint Linter

/*eslint no-shadow: 2*/
/*eslint-env es6*/

var a = 3;
function b() {
    var a = 10;       
}

error a is already declared in the upper scope.

ESLint Linter

.eslintrc

{
  "extends": "airbnb"
}

https://github.com/airbnb/javascript/tree/master/linters

ESLint Linter

SCSS Lint

https://github.com/brigade/scss-lint

ImportantRule

https://github.com/brigade/scss-lint/blob/master/lib/scss_lint/linter/README.md#importantrule

Avoid using !important in properties. It is usually indicative of a misunderstanding of CSS specificity and can lead to brittle code.

Scss Linter

//Bad

p {
  color: #f00 !important;
}

//Good

p {
  color: #f00;
}

Scss Linter

http://sass-guidelin.es/#scss-lint

.scss-lint.yml

# For SCSS-Lint v0.32.0

linters:

  BangFormat:
    enabled: true
    space_before_bang: true
    space_after_bang: false

  BorderZero:
    enabled: true

  ColorKeyword:
    enabled: true

  Comment:
    enabled: false

  DebugStatement:
    enabled: true

  DeclarationOrder:
    enabled: true

  DuplicateProperty:
    enabled: false

  ElsePlacement:
    enabled: true
    style: same_line

  EmptyLineBetweenBlocks:
    enabled: true
    ignore_single_line_blocks: false

  EmptyRule:
    enabled: true

  FinalNewline:
    enabled: true
    present: true

  HexLength:
    enabled: true
    style: short

  HexNotation:
    enabled: true
    style: lowercase

  HexValidation:
    enabled: true

  IdSelector:
    enabled: true

  ImportPath:
    enabled: true
    leading_underscore: false
    filename_extension: false

  Indentation:
    enabled: true
    character: space
    width: 2

  LeadingZero:
    enabled: true
    style: include_zero

  MergeableSelector:
    enabled: false
    force_nesting: false

  NameFormat:
    enabled: true
    convention: hyphenated_lowercase
    allow_leading_underscore: true

  NestingDepth:
    enabled: true
    max_depth: 3

  PlaceholderInExtend:
    enabled: true

  PropertySortOrder:
    enabled: false
    ignore_unspecified: false

  PropertySpelling:
    enabled: true
    extra_properties: []

  QualifyingElement:
    enabled: true
    allow_element_with_attribute: false
    allow_element_with_class: false
    allow_element_with_id: false

  SelectorDepth:
    enabled: true
    max_depth: 3

  SelectorFormat:
    enabled: true
    convention: hyphenated_lowercase
    class_convention: '^(?:u|is|has)\-[a-z][a-zA-Z0-9]*$|^(?!u|is|has)[a-zA-Z][a-zA-Z0-9]*(?:\-[a-z][a-zA-Z0-9]*)?(?:\-\-[a-z][a-zA-Z0-9]*)?$'

  Shorthand:
    enabled: true

  SingleLinePerProperty:
    enabled: true
    allow_single_line_rule_sets: false

  SingleLinePerSelector:
    enabled: true

  SpaceAfterComma:
    enabled: true

  SpaceAfterPropertyColon:
    enabled: true
    style: one_space

  SpaceAfterPropertyName:
    enabled: true

  SpaceBeforeBrace:
    enabled: true
    style: space
    allow_single_line_padding: true

  SpaceBetweenParens:
    enabled: true
    spaces: 0

  StringQuotes:
    enabled: true
    style: single_quotes

  TrailingSemicolon:
    enabled: true

  TrailingZero:
    enabled: true

  UnnecessaryMantissa:
    enabled: true

  UnnecessaryParentReference:
    enabled: true

  UrlFormat:
    enabled: false

  UrlQuotes:
    enabled: true

  VendorPrefixes:
    enabled: true
    identifier_list: base
    include: []
    exclude: []

  ZeroUnit:
    enabled: true

Scss Linter

Editor

plugins

https://plugins.jetbrains.com/plugin/7494

https://github.com/roadhump/SublimeLinter-eslint

https://atom.io/packages/linter-eslint

https://github.com/attenzione/SublimeLinter-scss-lint

https://plugins.jetbrains.com/plugin/7530

https://atom.io/packages/linter-scss-lint

Automate

/* Documentation */

Just do it.

For everything.

Because the bears are real, and the programmers are yummy.

• Server Environments

• Business Rules

• Database/Files

• Troubleshooting

• Application Installation

• Code Deployment

http://www.seguetech.com/blog/2013/09/12/why-documentation-important-developers

Write docs at least for

And copy one of this:

http://usejsdoc.org/

JSDoc

/**
 * Represents a book.
 * @constructor
 * @param {string} title - The title of the book.
 * @param {string} author - The author of the book.
 */
function Book(title, author) {
  /* ... */
}

http://usejsdoc.org/about-getting-started.html

JSDoc

http://sassdoc.com/

SASSDOC

http://sassdoc.com/annotations/

SassDoc

Fully styled HTML document

SassDoc

JSDoc plugins

https://atom.io/packages/jsdoc

https://github.com/spadgos/sublime-jsdocs

https://www.jetbrains.com/webstorm/help/creating-jsdoc-comments.html

SASSDOC

# Install SassDoc globally
npm install sassdoc -g

# Run SassDoc on your project
sassdoc source/

Automate

Paradigms

In science and philosophy, a paradigm is a distinct set of concepts or thought patterns, including theories, research methods, postulates, and standards for what constitutes legitimate contributions to a field.

Paradigm /ˈpærədaɪm/ 

Principles, design patterns, architectures and good practices.

DRY

In software engineering, don’t repeat yourself (DRY) is a principle of software development, aimed at reducing repetition of information of all kinds, especially useful inmulti-tier architectures.

SOLID

http://stackoverflow.com/a/8537512/1360383

Single responsibility principle

a class should have only a single responsibility (i.e. only one potential change in the software's specification should be able to affect the specification of the class)

Open/closed principle

“software entities … should be open for extension, but closed for modification.”

KISS

"Keep it simple, stupid" design principle.

Design patterns

In software engineering, a design pattern is a general reusable solution to a commonly occurring problem within a given context in software design.

Architecture

Software architecture refers to the high-level structures of a software system. It involves a series of decisions based on a wide range of factors, and each of these decisions can have a considerable impact on the quality, performance, maintainability, and overall success of the application.

Good practices

Always asking/research about them, because they change quickly.