Егор Живагин

В связи с этим вопрос – что ещё нужно знать?

Бэкенд вам в любом случае нужен.

Если я правильно понимаю, Angular, Vue и прочие фреймворки – это только фронтенд.

Все верно.

Куда не сунься, везде о веб-разработке говорится, как о разработке именно фронтенда, а также это непременно связано с Node.js (дабы что-то написать на ангуляре, без него никак). Каким боком связан фронтенд с Node.js - я не понимаю, т.к. Node.js - это, по сути, способ запустить JS вне браузера.

Скорее всего вы читаете статьи о фронтенде, потому в них о бэкенде ничего и нет. Как вы знаете фронтенд пишется на JS и многих подкупает то, что можно поднять NodeJS на бэкенде и используя один язык создавать сайты.

Если я хочу запустить приложение в браузере, то зачем мне node? Это всё меня вводит в ступор, я вижу лишь противоречия.

Вы не путайте. Есть технологии, которые используются в процессе работы приложения и есть технологии, которые используются в процессе разработки приложения. Все эти Gulp, Grunt, Babel, Webpack и прочие - это инструменты разработки. Они ускоряют, упрощают, повышают качество работы. В то время jQuery, Angular, React - это библиотеки и фреймворки, с помощью которых приложение будет работать.

Если раньше сайты создавали с использованием пары технологий, то современные приложения могут использовать десятки, а то и сотни последних. При чем это могут быть разные языки программирования, библиотеки, фреймворки, сервисы и т.д. Все это часто называют"зоопарком" технологий.

Здесь я лишь могу предположить, что сервер вместо html должен обмениваться данными с приложением посредством json или чего-то ещё.

Да, JSON, как самый распространенный. Вам нужен фреймворк для бэкенда, на котором можно развернуть REST API. Насколько мне известно большинство современных фреймворов современных языков программирования, которые используются для веб-разработки, это умеют. Я не могу утверждать точно, я работаю в рамках одного языка.

Всё-таки сервер - это основа любого сетевого приложения, и в первую очередь нужно разработать серверную часть.

Однозначно. Современные одностраничные приложения(SPA) состоят из двух раздельных частей - фронтенда и бекенда. Они могут создаваться полностью раздельно разными разработчиками, главное согласовать формат передачи данных и все нюансы.

Вся прелесть SPA в разделении этих частей. Любая из них может быть заменена на другую без особых последствий. Один бэкенд может обслуживать сайты, мобильные приложения, предоставлять доступ к данным для сторонних партнерских приложений, и все это через единый API.

Что ещё нужно изучить? Или перечисленных знаний достаточно?

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

Можно ли не использовать Node.js и, соответственно, npm, если JS (TS) требуется только в браузере? При этом тестирование тоже необходимо.

Да, вполне. На стороне клиента, к примеру, JS+Angular. А на стороне бэкенда, к примеру, PHP+Laravel. Сейчас очень много языков и еще больше фреймворков под них. Выбирайте то, что для вас проще.

Вы смотрите за изменениями в scss, а как же сам css который компилица после изменений в scss. Вот и выходит что дефакто ничего не поменялось и страницу перегружать не нужно. Добавляй слежение за итоговым скомпилированным css или папокй где он лежит, смотря что за проект будет.
UPD: выше пропустил, что у вас настроена инъекция.
мб взять из оригинала и под вас передалать:

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();
var sass        = require('gulp-sass');

// Static Server + watching scss/html files
gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/scss/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/scss/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("dist/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

Массивы создаются так:

var bodyParts = ['нос' , 'рука' , 'голова'];
var adjectives = ['вонючая' , 'неприятная' , 'унылая'];
var animals = ['Выдра' , 'обезьяна' , 'зебра'];

display: flex;
align-items: center;
justify-content: center;

$('.active').parent().css({"display":"block"});

Вы взяли старое, как ...но мамонта базовый образ. Вот Dockerfile:

FROM ubuntu:16.04
RUN apt update && apt install fortunes cowsay -y
CMD ["/usr/games/fortune", "-e"]

-e, потому как не знаю как пайп запихать в CMD.

UPDATE
Вот так:

CMD ["/bin/bash", "-c", "/usr/games/fortune -a | /usr/games/cowsay"]

Вместо

var $data;
    $data = $('#mlog').serialize();

можно же сразу
var $data = $('#mlog').serialize();
Более того, можно его перенести еще не несколько строк ниже, туда где data:

.removeClass("hidden_toast").addClass("visible_toast");

скорее всего это можно переписать так, чтобы добавлять/убирать один класс, но не трогать второй.
Из .toast_visible перенести всё в toast-container а .hidden убирать при необходимости.

Там, где два раза setTimeout можно воспользоваться .queue()

Получится примерно так:

$('#Login').click(function(e) {
    e.preventDefault();
    $.ajax({
      url: "/ajax/manager.php?p=1",
      type: 'post',
      data: $('#mlog').serialize(),
      success: function(result) {
        $('#hum').html(result);
        $("#toast-container")
            .removeClass("hidden")
            .delay(3000)
            .fadeOut(500, function(){ // on complete
                $("#hum").html('');
            });
        }
    });
})

Я идиот, есть же очевидное решение
https://jsfiddle.net/2c1gvk76/1/
Надо заканчивать на сегодня.

border-radius:50% + любой слайдер
Например slick с параметром centerMode: true

страницы никак не перелинкованы

это баг или фича?

Собственно родной index (directory listing) из apache или nginx умеет отдавать список сам по себе, без всякого php.
Выглядит примерно так:
nginx https://animorphsfanforum.com/fanart/2064/
apache apache.ip-connect.vn.ua//httpd/docs

Впрочем, если хочется именно на php, то довольно неплохо подходит glob()

foreach (glob("*.html") as $filename) {
    echo "<a href=\"$filename\">$filename</a><br>";
}

const a = [ 'a', 'b', 'c', 'd' ];
const b = [ 'a', 'b', 'x', 'y', 'z' ];

const c = a.filter(n => b.indexOf(n) === -1);
// или
const c = a.filter(n => !b.includes(n));

Или, можно решить задачу в более общем виде. Пусть в качестве источников данных выступают не только массивы, а любые массивоподобные объекты; их элементы не обязательно являются примитивными значениями; а под равенством может подразумеваться не непосредственное равенство, а равенство некоторых производных значений:

function diff(data1, data2, key = n => n) {
  const getKey = key instanceof Function ? key : n => n[key];
  const keys = new Set(Array.from(data2, getKey));
  return Array.prototype.filter.call(data1, n => !keys.has(getKey(n)));
}


diff([1, 2, 3], [2]) // [1, 3]
diff([{id: 1}, {id: 2}, {id: 3}], [{id: 1}, {id: 3}], 'id') // [{id: 2}]
diff('AbCdE', 'aBc', n => n.toLowerCase()) // ['d', 'E']

Нет, если редактировались разные файлы, то конфликтов не будет.

Когда вы работаете в ветке, обязательно поддерживайте ее в актуальном состоянии мастера. Т.е. в данном случае после пуша в master (167) переключайтесь на ветку staging (104) и делайте merge мастера в нее. Если даже будут конфликты - разруливаете их в этой отдельной ветке, не трогая master.