Front End by Sigma

Introduction

It is usually a daunting task to know what to learn next, especially if you are beginning your journey. This guide aims to help you find relevant competence areas to focus on and suggest what to prioritize first to speed up the learning process.

Contribute

If you have any opinions or suggestions then feel free to create an issue and make sure to tag it with improvement for any new suggestions or invalid if any existing information is incorrect.

Levels

Feel free to learn whatever you want regardless of level. However be aware that a higher level suggests that you will have a harder time if you lack fundamental knowledge.

Lv.0 You might be familiar with some concepts but lack professional experience.
Lv.1 You should comprehend the basics of HTML, CSS and JavaScript. You should also be aware of the essential tools and platforms and be able to use them assuming they are setup and configured beforehand.
Lv.2 You should know most features of HTML, CSS, JavaScript and be accustomed to commonly used libraries and frameworks. You are aware of multiple programming paradigms and know basic functional programming. You should also be better versed with different tools and able to setup and configure some from scratch.
Lv.3 You should be proficient with advanced concepts and be able to combine the right technologies and tools from an architectural perspective.
Lv.4 You are a master in one or more areas and an active contributor to standards and the open source community.

Remarks

cold Is becoming obsolete, but is still commonly used. Should be avoided for new projects.
hot Is either very new with great potential or widely adopted with an active community.
recommended Is very usefull in most situations.
required Necessary for any successful development project.

Markup

Styling - General

Styling - Frameworks/Libs

Styling - Architecture

Styling - Preprocessors

CSS preprocessors has long been the solution to creating DRY CSS, handle browser prefixing and more. Among the alternatives Sass has been the most popular and community supported. However with recent developments of CSS a lot of the features that made preprocessors useful are now landing natively in CSS. Wheter you are working on an existing project or starting a new one you should instead focus on CSS postprocessors. Using PostCSS together with plugins such as cssnext and cssnano you will be able to write future proof CSS with automatic browser fallbacks and optimizations.

  • Less

    Lv. 2
    cold

    Read more: Less

  • Sass

    Lv. 2
    cold

    Read more: Sass

  • Stylus

    Lv. 2
    cold

    Read more: Stylus

Styling - Postprocessors

CSS postprocessors is the current way forward. Using PostCSS together with plugins such as cssnext and cssnano you will be able to write future proof CSS with automatic browser fallbacks and optimizations.

  • cssnano

    Lv. 2
    required

    Read more: cssnano

  • cssnext

    Lv. 2
    cold

    Enables you to use the latest CSS features and automatically transpile for backwards compatibility. Now replaced by postcss-preset-env.

    Read more: cssnext

    Related subjects:

  • PostCSS

    Lv. 2
    hot required

    Read more: PostCSS

Programming - General

Programming - Frameworks/Libs

JavaScript is widely know for having a pletora frameworks and libraries. The platform is rapidly evolving and the open source ecosystem is boiling with innovative solutions that will hopefully make it into the standard.

  • Ampersand

    Lv. 3

    Read more: Ampersand

  • AngularJS

    Lv. 3
    cold

    Read more: AngularJS

    Related subjects:

  • Angular

    Lv. 3
    hot

    Read more: Angular

    Related subjects:

    • Awesome Angular Awesome list of Angular 2 and Angular 4 seed repos, starters, boilerplates, examples, tutorials, components, modules, videos, and anything else in the Angular ecosystem. Level 1

  • Aurelia

    Lv. 3
    hot

    Read more: Aurelia

    Related subjects:

    • Awesome Aurelia A curated list of amazingly awesome Aurelia libraries. Level 1

  • Backbone

    Lv. 3
    cold

    Read more: Backbone

  • Cycle

    Lv. 2
    hot

    Read more: Cycle

    Related subjects:

  • Ember

    Lv. 3

    Read more: Ember

  • Inferno

    Lv. 2

    Read more: Inferno

  • jQuery

    Lv. 1
    cold

    Read more: jQuery

  • Lodash

    Lv. 2
    recommended

    Read more: Lodash

  • mobX

    Lv. 2

    Read more: mobX

  • normalizr

    Lv. 2

    Normalizes nested JSON according to a schema.

    Read more: normalizr

  • Preact

    Lv. 2

    Read more: Preact

  • React

    Lv. 2
    hot recommended

    Read more: React

    Related subjects:

  • ReactiveX

    Lv. 3
    hot recommended

    Read more: ReactiveX

    Related subjects:

    • Awesome RxJS A collection of awesome RxJS resources. Level 1

  • Redux

    Lv. 2
    hot recommended

    Read more: Redux

    Related subjects:

    • Awesome Redux Catalog of Redux Libraries & Learning Material. Level 1

  • Redux Saga

    Lv. 2
    hot recommended

    redux-saga is a library that aims to make side effects (i.e. asynchronous things like data fetching and impure things like accessing the browser cache) in React/Redux applications easier and better.

    Read more: Redux Saga

  • Redux Observable

    Lv. 2
    hot recommended

    Read more: Redux Observable

  • Reselect

    Lv. 2
    recommended

    Simple “selector” library for Redux inspired by getters in NuclearJS, subscriptions in re-frame and this proposal from speedskater.

    Read more: Reselect

  • Riot

    Lv. 2

    Read more: Riot

  • snabbdom

    Lv. 2

    Read more: snabbdom

  • Vue

    Lv. 2
    hot

    Read more: Vue

    Related subjects:

    • Awesome Vue A curated list of awesome things related to Vue.js. Level 1

  • xstream

    Lv. 3

    Read more: xstream

Programming - Functional Programming

Mastering functional programming is a huge undertaking. However learning a few basic concepts will produce code with several qualities such as compact, simple, predictable, powerful, flexible and reuseable. Initially you should focus on learning about first class functions, higher order functions, currying, partial application, point free and composition. When you have a good understanding of these concepts proceed with exploring functors and monads. Primarily Identity, Maybe, Either, IO and Task. From here on you will have a solid foundation and be ready to go further down the rabbit hole.

  • elm

    Lv. 3
    hot

    A delightful language for reliable webapps. Generate JavaScript with great performance and no runtime exceptions.

    Read more: elm

    Related subjects:

    • Awesome Elm A community driven list of useful Elm tutorials, libraries and software. Level 1

  • Folktale

    Lv. 3

    Folktale is a suite of libraries for generic functional programming in JavaScript that allows you to write elegant modular applications with fewer bugs, and more reuse.

    Read more: Folktale

  • Immutable

    Lv. 2
    hot

    Immutable collections for JavaScript.

    Read more: Immutable

  • Ramda

    Lv. 2
    hot recommended

    A practical functional library for JavaScript programmers that is a great starting point for the novice functional programmer. With it's optimized currying it is easy to utilize in both an imperative an functional fashion.

    Read more: Ramda

  • PureScript

    Lv. 3
    hot

    PureScript is a small strongly typed programming language that compiles to JavaScript.

    Read more: PureScript

    Related subjects:

    • Awesome PureScript A curation of awesome PureScript libraries, resources and shiny things. Level 1

  • Sanctuary

    Lv. 2
    hot

    Sanctuary is a JavaScript functional programming library inspired by Haskell and PureScript. It's stricter than Ramda, and provides a similar suite of functions.

    Sanctuary promotes programs composed of simple, pure functions. Such programs are easier to comprehend, test, and maintain – they are also a pleasure to write.

    Sanctuary provides two data types, Maybe and Either, both of which are compatible with Fantasy Land. Thanks to these data types even Sanctuary functions which may fail, such as head, are composable.

    Sanctuary makes it possible to write safe code without null checks. In JavaScript it's trivial to introduce a possible run-time type error.

    Read more: Sanctuary

  • Ramtuary

    Lv. 2

    Ramda + Ramda Fantasy + Sanctuary REPL. A useful tool for getting comfortable with functional programming and some of the most popular libraries.

    Read more: Ramtuary

Programming - Polyfills

In front end you never know what browser your code will run in and sometimes you may be dependent on native features that may or may not be available for a specific version. This is where polyfills come in, polyfills are third party libraries that have the single purpose of emulating a native browser feature.

  • Polyfill Service

    Lv. 2

    Just the polyfills you need for your site, tailored to each browser. Polyfill.io reads the User-Agent header of each request and returns polyfills that are suitable for the requesting browser.

    Read more: Polyfill Service

Programming - Logging

  • StackTrace.JS

    Lv. 2

    Generate, parse, and enhance JavaScript stack traces in all web browsers.

    Read more: StackTrace.JS

Data Formats

When it comes to front end there are mainly three popular data formats JSON, YAML and XML. XML used to be the most widely used, but has succumbed in favor of the lighter and less verbose formats. You are likely to see these data formats being used in varying situations e.g. configuration, data transactions and persistance.

  • JSON

    Lv. 1
    required

    Read more: JSON

  • XML

    Lv. 1
    required

    Read more: XML

  • YAML

    Lv. 1
    required

    Read more: YAML

Templating Engines

  • Freemarker

    Lv. 2

    Read more: Freemarker

  • Handlebars

    Lv. 2

    Read more: Handlebars

  • Liquid

    Lv. 2

    Read more: Liquid

  • Markdown

    Lv. 2
    required

    Read more: Markdown

    Related subjects:

    • Markdown Cheatsheet Examples of markdown syntax and what it renders. Level 2
    • Dillinger An online markdown editor with a side by side preview. Level 2

  • Mustache

    Lv. 2

    Read more: Mustache

  • Pug

    Lv. 2

    Read more: Pug

  • Razor

    Lv. 2

    Read more: Razor

Architecture

Quality & Test - Unit Testing

  • AVA

    Lv. 2

    Read more: AVA

  • Chai

    Lv. 2

    Read more: Chai

  • Jasmine

    Lv. 2
    required

    Read more: Jasmine

  • Jest

    Lv. 2
    hot

    Read more: Jest

  • JSDom

    Lv. 2
    recommended

    Read more: JSDom

  • Karma

    Lv. 2
    recommended

    Read more: Karma

  • Mocha

    Lv. 2

    Read more: Mocha

  • qUnit

    Lv. 2
    cold

    Read more: qUnit

  • Sinon

    Lv. 2
    recommended

    Read more: Sinon

  • Tape

    Lv. 2
    recommended

    Read more: Tape

  • Wallaby

    Lv. 2
    recommended

    Read more: Wallaby

Quality & Test - End-to-end

  • CasperJS

    Lv. 2

    Navigation scripting & testing for PhantomJS and SlimerJS.

    Read more: CasperJS

  • Browsersynk

    Lv. 2
    recommended

    Time-saving synchronised browser testing.

    Read more: Browsersynk

  • Nightmare

    Lv. 2

    A high-level browser automation library.

    Read more: Nightmare

  • PhantomJS

    Lv. 2

    PhantomJS is a headless WebKit scriptable with a JavaScript API. It has fast and native support for various web standards: DOM handling, CSS selector, JSON, Canvas, and SVG.

    Read more: PhantomJS

  • Protractor

    Lv. 2

    Protractor is an end-to-end test framework for Angular and AngularJS applications. Protractor runs tests against your application running in a real browser, interacting with it as a user would.

    Read more: Protractor

  • SlimerJS

    Lv. 2

    A scriptable browser for Web developers

    Read more: SlimerJS

  • WebdriverIO

    Lv. 2
    required

    WebDriver bindings for Node.js

    Read more: WebdriverIO

Quality & Test - Visual Regression Testing

  • Galen Framework

    Lv. 2

    Automated testing of look and feel for your responsive websites.

    Read more: Galen Framework

  • PhantomCSS

    Lv. 2

    Read more: PhantomCSS

  • Wraith

    Lv. 3

    Read more: Wraith

Quality & Test - Continuous Integration

Security

Methodology

Analytics

CMS

Cross Platform Applications

Tools - General

  • Node.js

    Lv. 1
    required

    Read more: Node.js

  • Docker

    Lv. 2
    recommended

    Read more: Docker

  • Vagrant

    Lv. 2
    cold

    Read more: Vagrant

  • Emmet

    Lv. 2
    recommended

    Read more: Emmet

  • Quokka

    Lv. 1
    recommended

    Quokka.js is a rapid prototyping playground for JavaScript and TypeScript. It runs your code immediately as you type and displays various execution results in your code editor.

    Read more: Quokka

  • npm Trends

    Lv. 1

    Compare package download counts over time

    Read more: npm Trends

Tools - Building

Tools - Documentation

  • ESDoc

    Lv. 2
    hot recommended

    Read more: ESDoc

  • JSDoc

    Lv. 2
    required

    Read more: JSDoc

  • Fractal

    Lv. 2

    Read more: Fractal

  • KSS (Knyle Style Sheets)

    Lv. 2

    Documentation for any flavor of CSS that you’ll love to write. Human readable, machine parsable, and easy to remember.

    Read more: KSS (Knyle Style Sheets)

  • Pattern lab

    Lv. 2

    Read more: Pattern lab

Tools - Editors/IDE

  • EditorConfig

    Lv. 1
    required

    EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles and a collection of text editor plugins that enable editors to read the file format and adhere to defined styles. EditorConfig files are easily readable and they work nicely with version control systems.

    Read more: EditorConfig

  • Atom

    Lv. 1
    recommended

    Read more: Atom

    Related subjects:

  • Codekit (OSX)

    Lv. 1

    Read more: Codekit (OSX)

  • Sublime Text

    Lv. 1

    Read more: Sublime Text

  • Textmate (OSX)

    Lv. 1

    Read more: Textmate (OSX)

  • Visual Studio

    Lv. 2

    Read more: Visual Studio

  • Visual Studio Code

    Lv. 2
    recommended

    Read more: Visual Studio Code

    Related subjects:

    • Awesome VSCode A curated list of delightful VS Code packages and resources. Level 1

  • WebStorm

    Lv. 2
    recommended

    Read more: WebStorm

Tools - Linting

Linting is a form of static code analysis that aims to find syntax errors and enfore best practices. It has been adopted in other languages such as Java and C# for quite some time, while front end has caught on in recent years. It started with JSLint which was very opinionated which led to the creation of JSHint which was more flexible. Since these tools focused on best practices there was also JSCS for checking code style and format. All of these tools have now been succeeded by ESLint which is a plugin based and extendable ruleset. For CSS (and preprocessor languages) we have the equivalent which is stylelint.

  • Standard JS

    Lv. 2
    hot recommended required

    JavaScript Standard Style, One JavaScript Style to Rule Them All

    Read more: Standard JS

  • ESLint

    Lv. 2
    required

    ESLint is by far the best linter for JavaScript, being plugin-based means that it can be extended to meet all future needs. There is already a good ecosystem of plugins that contain presets and best practises for specific frameworks (e.g. Angular and React). If you are working with bleeding edge EcmaScript features then there is a chance that ESLint might fail sometimes. Luckaly the tool is so flexibel so that you can even swap the parser with a different one (e.g. babel-eslint).

    Read more: ESLint

    Related subjects:

    • Awesome ESLint A currated list of ESLint configs, plugins, etc. Level 2

  • TSLint

    Lv. 2
    required

    An extensible linter for the TypeScript language.

    Read more: TSLint

  • stylelint

    Lv. 2
    required

    Historically when it comes to linting CSS there hasn't been many options, until recently that is. stylelint takes a lot of inspiration from the JavaScript linting tool ESLint, in that way that it allows for extensibility through plugins.

    Read more: stylelint

    Related subjects:

    • stylelint-scss If you are working with Sass, then this plugin is great for enforcing coding conventions and best practices that are specific to Sass. Level 2
    • stylelint-selector-bem-pattern If you have adopted BEM as your CSS architecture, then this plugin helps you ensure that selectors are written accoring to the BEM patterns. Level 2

Tools - Package Management

  • Bower

    Lv. 1
    cold

    Bower was created as the npm for the front end. However, since then a lot of front end packages have moved on to npm and those that are still Bower exclusive can be fetched using a git URL. It is recommended to avoid using Bower since it really just duplicates what npm already does.

    Read more: Bower

  • jspm

    Lv. 2

    Read more: jspm

  • npm

    Lv. 1
    required

    npm is the de facto package manager for JavaScript. Otherwise, yarn is a great alternative with better security features and faster installations. Although you might use yarn for package management it is still recommended to use npm's script feature to create and execute build commands.

    Read more: npm

    Related subjects:

  • yarn

    Lv. 1
    hot recommended

    yarn is an alternative package manager to npm. It promises added security and faster installation of dependencies. It works well in parallel to npm so there is no problem using both on a larger team.

    Read more: yarn

Tools - Performance

  • Calibre

    Lv. 2

    A fully-automated tool suite for auditing and improving performance, so you can deliver content to your customers faster.

    Read more: Calibre

  • Lighthouse

    Lv. 2

    Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, and more.

    Read more: Lighthouse

  • Yellow Lab Tools

    Lv. 2

    Online test to help speeding up heavy web pages.

    Read more: Yellow Lab Tools

  • Sitespeed.io

    Lv. 2

    Sitespeed.io is a set of Open Source tools that helps make your web pages faster.

    Read more: Sitespeed.io

  • Babel Minify

    Lv. 1

    An ES6+ aware minifier based on the Babel toolchain.

    Read more: Babel Minify

  • UglifyJS

    Lv. 1

    UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit.

    Read more: UglifyJS

Tools - Sandboxes

Tools - Scaffolding

  • Yeoman

    Lv. 2

    Yeoman helps you to kickstart new projects, prescribing best practices and tools to help you stay productive.

    Read more: Yeoman

Tools - Version Control

  • Bitbucket

    Lv. 1

    Read more: Bitbucket

  • Git

    Lv. 1

    Read more: Git

  • GitHub

    Lv. 1

    Read more: GitHub

  • GitHub Desktop

    Lv. 1

    Read more: GitHub Desktop

  • GitKraken

    Lv. 1
    recommended

    Read more: GitKraken

  • GitLab

    Lv. 1

    Read more: GitLab

  • Gogs

    Lv. 1

    Read more: Gogs

  • Rush

    Lv. 2

    Rush: a scalable monorepo manager for the web

    Read more: Rush

  • SourceTree

    Lv. 1

    Read more: SourceTree

Twitter

Blogs

Newsletters

Online Courses

Youtube

Contributors