Frontend developer tools

Browser for development

• Google Chrome
• Chromium
• Mozilla Firefox

Build environments

Node.js

IDE

• WebStorm
• Brackets
• Atom
• Visual Studio Code
• Sublime Text

IDE Features

• Autocompletion
• Emmet
• Refactoring
• Multicursor
• Vim / Emacs

Code organization

• Noodles
• Modules

Package management

• Npm
• Bower

Node.js module

• Module code
• Package.json
  • Dependency list
  • Task list

Build systems

• Grunt
• Gulp
• WebPack

Programming languages

• EcmaScript-5
• CoffeeScript
• TypeScript
• Dart
• EcmaScript-2015
• EcmaScript-2016

All languages are compiled into EcmaScript-5

Application architecture

• MVC
• Flux

CSS methodologies

• OOCSS (Object Oriented CSS)
• ACSS (Atomic CSS)
• SMACSS (Scalable and Modular Architecture for CSS)
• BEM (Block, Element, Modifier)

CSS Pre-Processors

• LESS
• SASS
• Stylus
• css-modules

CSS Post-Processors

• CSSO
• Autoprefixer
• Postcss

HTML Pre-Processors

• HAML
• Slim
• Jade

Team work

• Git flow
• Code review
• Code linting
• Code style

Info

• Google https://www.google.com
• DevDocs http://devdocs.io
• Tutorial http://learn.javascript.ru