Front-end at VI Company

All code in any code-base should look like a single person typed it, no matter how many people contributed.

General

• We highly regard Accessibility and Web Standards.
• We use Progressive Enhancement as much as possible.
• We actively support the latest Evergreen Browsers (but often our code works on older browsers, because of the previous points).

JavaScript (ES2015+)

• Codebase is modular JavaScript (ES2015+).
• Vanilla is preferred, but developers are free to choose a framework/library to their liking if it substantially improves product maintainability.
• Reusable components (NPM modules) are preferred over reinvention.
• Our ES2015+ codebase is transpiled and bundled using Rollup and Babel.
• To improve browser compatibility, use ponyfills or polyfills. The former is preferred.
• Code is linted using ESLint, following the rules defined in VI Company's config.

CSS (Sass)

• We write modular Sass using the SCSS syntax.
• We use BEM for class names.
• Combined with a sprinkle of SMACSS for states.
• And we follow the ITCSS approach for our project architecture.
• We use Stylelint and our own config to lint our Sass code.

Sass guidelines

• See our Sass guidelines.

Tooling

• We use npm scripts for compiling JS, CSS, optimization and other tasks.
• See our Front-end recipes.

Editor plugins

Whether you use Visual Studio Code, Sublime Text or any other editor. You should at least use the following plugins:

• EditorConfig
• ESLint
• Stylelint

Additional information

Evergreen Browsers

The term evergreen browser refers to a browser that gets updated automatically to future versions. Therefore browser versions become less of a focus and, more importantly, new web technology becomes available to users and us developers quicker.

• The Evergreen Web by Scott Hanselman
• Evergreen Browsers by Rob Eisenberg

Internet Explorer 11

We do not support Internet Explorer 11 anymore. This browser still gets updated, but its usage is too low to justify the extra effort that is needed to make modern code run on this browser:

• Development time increases (around 10% to 30%) which could be spent on new features or quality improvement.
• Performance decreases, because extra code needs to be added to make it even work.
• You create Technical debt by using hacks and workarounds which leads to less maintainable code.
• Security isn't on par with modern and regularly updated browsers.