Aleksandr

var gulp = require('gulp');
var browserSync = require('browser-sync').create(); // в 10 раз лучше livereload
var stylus = require('gulp-stylus');
var typographic = require('typographic');
var nib = require('nib');
var jade = require('gulp-jade');
var imagemin = require('gulp-imagemin');
var uglify = require('gulp-uglify');
var notify = require("gulp-notify");
var plumber = require('gulp-plumber');

autoprefixer = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'), // от вас узнал о его существовании, спасибо
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'), // сорсмап для scss
gulpJade = require('gulp-jade'), // jade шаблонизатор
livereload = require('gulp-livereload'), // лень страницу перезагружать
uncss = require('gulp-uncss'), // удалить лишний css

Рекомендую ознакомится с TARS, есть все, что нужно)

Кусок моего галпфайла. Что-то снабдил комментами.

var connect      = require('browser-sync'); // livereload
var sass         = require('gulp-sass'); // Кому что, я использую SCSS
var csscomb      = require('gulp-csscomb'); // Обязательно!
var cssmin       = require('gulp-cssmin');
var imageop      = require('gulp-image-optimization'); // Лучшая альтернатива gulp-imagemin
var concat       = require('gulp-concat');
var uglify       = require('gulp-uglify');
var plumber      = require('gulp-plumber'); // Не позволяет плагину умереть молча
var autoprefixer = require('gulp-autoprefixer');
var ngrok        = require('ngrok'); // Пробрасываем локальному серверу путь наружу для для заказчика
var spritesmith  = require('gulp.spritesmith'); // Спрайты
var notify       = require('gulp-notify'); // Уведомления
var merge        = require('merge-stream'); // Деление таска на разные потоки

Конечно, есть много полезного и кроме этого. Но сам верстаю в WebStorm, в котором огромное количество плюшек реализованы куда удобней, чем в галп-плагинах.

Ну тут все просто, вы инициализируете плагин для элемента у которого стоит свойство display: none;. В связи с чем скрипт не может получить размеры блока. Для того чтобы jscrollpane заработал на таком элементе необходимо вызывать его с ключом autoReinitialise и поместите этот код в $(document).ready().
В итоге будет как-то так:

$(document).ready(function() {
    $('.scroll-pane').jScrollPane({
         autoReinitialise: true
    });
});

Что вы подразумеваете под размерами? Высоту или ширину или все вместе? Для ширины используйте

input {
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

Тогда у вас всегда будет растягиваться на всю ширину родительского блока.

codepen.io/anon/pen/zGMXBr?editors=110
не кроссбраузерно

Писать код очень лень, напишу примерно возможные варианты:
1) Использование css blend-modes. Но мне кажется что с неоднородной картинкой не прокатит такое.
2) Дублировать этот заголовок, поменять его цвет, поместить его внутрь скошенного контейнера, повернуть его в обратную сторону с помощью skew (вы ведь скошенный контейнер через skew будете делать) и с помощью translateY все это дело двигать (аля контейнер двигается вверх, а заголовок вниз). В виде описания возможно выглядит сложно, но как только вы накидаете какой-нибудь кривой пример, станет куда проще.
Вот например 2 демки с похожим эффектом маски (только без скошенных углов, но это по сути дела 1 свойство добавить):
codepen.io/suez/pen/XJGOyL - здесь текст в пунктах меню "перекрашивается" в белый, хотя на самом деле внутри перемещающегося блока просто расположен дубликат списка, который движется в обратную сторону, во время движения самого блока.
codepen.io/suez/pen/kqlIJ - моя самая первая демка на эту тему, код там скорее всего жутковатый, но зато можно легко понять как работает этот mask эффект через F12.

Примерно так: jsfiddle.net/IonDen/9Lwzq05m

.container {
    position: relative;
    width: 400px;
    height: 400px;
    overflow: hidden;
    border: 1px solid #000;
}
.scroll {
    position: relative;
    box-sizing: border-box;
    width: 420px;
    max-height: 400px;
    padding-right: 20px;
    overflow-y: scroll;
}

google: "angular form validation"

1) Счётчик или булев переключатель, по типу click -> flag = !flag, т.е. присваиваем противоположное значение.
2) jsfiddle.net/IonDen/Lj17g71m/2

Можно так.
el.innerHTML += '....';
но при этом будут пересозданы все имеющиеся элементы внутри el
лучше

function appendEl(parent, tag, html) {
  var el = document.createElement(tag);
  el.innerHTML = html;
  parent.appendChild(el);
}
appendEl(el, 'h4', inputTaskName.value);
appendEl(el, 'div', taskPerformer.value);

Вместо val text либо html. Val берет значение с input, советую почитать документацию.