Our stack Frontend and design

Here's a list of technologies that we prefer to use based on this scale:

Experimental - We're still playing around with this, and we feel very optimistic about it. Try it out!
Recommended - We'd use this hotness on all projects if we can!
Good - It's still a good choice, but consider better solutions for newer projects.
Sunsetting - We maintain projects with these, but don't start new projects with this anymore.
Avoid - Our poor experience with this tell us to stay away unless absolutely necessary.

CSS conventions

RSCSS

A very sane solution to making sense of CSS for large-scale projects. RSCSS makes a lot of sense, and is being used in many of our projects.

BEM

BEM (Block-element-modifier) is quite popular, but is overly-verbose. Consider RSCSS instead, which is a lighter alternative to BEM with a cleaner syntax.

Frontend libraries

React

:heart_eyes: Yep.

jQuery

:x: Nope.

Elm

:boom: We're still playing around with this.

No frameworks

:heart_eyes: Vanilla ftw!

Bootstrap

:warning: Overly-reliant on jQuery, let's try to start avoiding this.

Design tools

Figma

:heart_eyes: Good cross-platform alternative to Sketch. Works in Mac, Windows and Linux. Comes with many collaboration features. Free!

Sketch

:star: Gold standard of design tools, but we prefer Figma for its collaboration features.

Photoshop

:warning: Good, but avoid it for UI work.

Frontend library registries

npm registry

:heart_eyes: Get your frontend JS/CSS packages via npm packages. Works with Webpack!

rails-assets.org

:x: Unreliable at times, and Bower is now deprecated. Use the npm registry instead.

/vendor/javascript

:x: Avoid putting external JS in the repos, use npm packages instead!