Build Tools

Grunt

Gulp

compare Grunt with Gulp

vs.

Grunt

Gulp

compare Grunt with Gulp

vs.

Linter

JSHint - Example - also check out ESLINT

SCSS-Lint - Example - How To Start

JSCS

JavaScript Code Style Checker

Example

Testing

Unit-Testing

Regression Testing

Functional Tests

Unit-Testing

Karma

Karma is a framework agnostic test runner for different environments

Example

Regression Testing & Functional Testing

Casper JS *

Example

Want to know more?

Testing

Jasmine - Example

PhantomCSS - Example

Wraith - Example

Performance Tooling

WebPagetest

Phantomas - Example

Follow

@drublic

Post- und Preprocessors

LESS

Sass

PostCSS

Pleeease

All the annoying CSS stuff we don't want to do in one tool!

Example

Image Processing

jpegtran, optipng, SVGO

Packaging Tools

Git

Gitflow

Feature Branch Workflow

CI Tooling

Travis CI

Circle CI

Codeship

Frameworks *

Bootstrap

Foundation

MVC Frameworks

Backbone Boilerplate

ng-Boilerplate - ngbp

React Starter Kit

How Can I get this to work

with my CMS?

Separate Frontend from Backend

Useful Developer Tools

Ghostlab Generate an open IP of your local website in your Network and synchronize navigation and scrolling.

Localtunnel Generate an URL from your local website which you can access from everywhere.

ImageOptim (Lossless) optimize images (also check out Kraken.io).

Skitch Making notes on screenshots and designs.

Affinity Designer Alternative for Photoshop at round € 50.

ModernIE Download images of different IE versions and use them as Virtual Machine.

Static Site Generators

3RD PARTY SERVICES