Сергей delphinpro

"Поднятие"

т.е. Ваш код компилятор исполняет так:

(function f(){
  function f() {return 1;}
  function f() {return 2;}
  return f();
})();

Далее. Javascript синтаксически допускает определение двух функций с одинаковым именем. В этом случае он использует последнее определение.

Собственно поэтому и получается двойка.

Функция для русского языка:

function pluralizeRus(n, forms) {
  return n % 10 == 1 && n % 100 != 11
        ? forms[0]
        : (n % 10 >= 2 && n % 10 <= 4
        && (n % 100 < 10
            || n % 100 >= 20) ? forms[1] : forms[2]);
}

alert('6 Скриншот' + pluralizeRus(6, ['', 'а', 'ов']));

Для других языков существуют готовые таблицы множественности, по ним также просто написать необходимую функцию.

1. Добавим брикпойнт и контейнер

$screen-xs-min: 520px;
$container-xs: 480px;

2. дополним класс .container

.container {
  @include container-fixed;

  @media (min-width: $screen-xs-min) {
    width: $container-xs;
  }
  // … Дальше оставляем как было
}

3. поправим миксин

@mixin make-grid-columns($i: 1, $list: ".col-xxs-#{$i}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
  @for $i from (1 + 1) through $grid-columns {
    $list: "#{$list}, .col-xxs-#{$i} .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
  }
…

4. Вызовем его
@include make-grid-columns();

5. Заменим строчку
@include make-grid(xs);
на
@include make-grid(xxs);

6. Добавим

@media (min-width: $screen-xs-min) {
  @include make-grid(xs);
}

И всё!!

Теперь в промежутке от 0 до 480 можем использовать колонки xxs
480 — 768 колонки xs
а далее стандартно.

[sarkazm on]
Ничего сложного, да ведь? =)))
[sarkazm off]

Поэтому я обычно выкидываю сетку версии 3 и использую гибрид — сетка как в третьей версии, на флоатах и т.д., но используя миксины (тоже немного доработанные) от четвёртой версии.
Там добавление брикпойнта сводится к простому добавлению значений в пару массивов (мапов) настроек.

В частности я не могу определиться:
1. Делать проект на "чистом" LAMP + JS
2. Или же брать Angular (который именно под SPA и заточен)

Тут и думать нечего — нужно брать фреймворк (п.2).
Я бы взял Vue, он попроще в понимании.

Что происходит с жестким диском?

$('.submenu ul li').each(function(){
  var $li = $(this);
  if ( $li.hasClass('active') ) {
    $li.closest('.submenu').addClass('vision');
    // or all levels
    // $li.parents('.submenu').addClass('vision');
  }
});

class Settings {
  private $settings;
  private static $instance;
  public static getInstance() {
    if (!self::$instance) self::$instance = new self();
    return self::$instance;
  }
  public function getSettings() {
    return $this->settings;
  }
  private function __construct() {
    $this->settings = ...
  }
}

class Kernel {
  protected $settings;
  public function __construct() {
    $this->settings = Settings::getInstance()->gteSettings();
  }
}

Делаете таблицу в параметрами, при запросе делаете выборку по параметрам из этой таблицы.
Возвращать удобнее голые данные в json (заодно и общее количество присылать) и рендерить на клиенте.
Урл меняется методами History API

С точки зрения фронта всё довольно просто — послали запрос, получили данные, перерисовали страницу.
На бэке приняли запрос, сходили в БД, составили json-ответ, отдали клиенту.

Верно ли, что просто поменяв значения в массиве настроек UTOPREFIXER_BROWSERS мы задаем поддержку

Неверно. Потому что поддержка браузеров — это не только вендорные префиксы.
Но в целом, да. Автопрефиксер расставит вам все необходимые -webkit- и т.п. свойства. Более того, он добавит некоторые другие свойства, например для поддержки старой спеки флексов, и удалит более неактуальные префиксы, если вы их написали вручную.

Верно ли, что подобные плагины только лишь подставляют в нужных местах префиксы, и ничего более не делают?

Вот это верно.
Если вам нужны не только префиксы, но и полифилы, их нужно подключать самостоятельно. Однако, если вы используете webpack, то у него в комплекте уже есть куча полифилов. Например, поддержка for..of или spred-операторов. Они тоже по дефолту не подключаются, но можно подключить и использовать.

как быть в случае html и тегов вроде header, да и прочих более менее новых html-вещей, поддержка которых браузерами вводилась не сразу?

Полифил. Ищем нужный полифил и подключаем.

Например, так https://jsfiddle.net/wecrs39n/5/

В современной верстке должен по максимуму использоваться вектор. Это снимает кучу проблем.
Разумеется, не все картинки можно/нужно перегонять в вектор. При использовании растра, в общем случае, достаточно две картинки — x1 и x2. X1 — это тот размер, в каком картинка отображается на сайте, x2, соответственно, удвоенный. Например картинка 100х100, к ней делаем ретина-вариант 200х200.
Всё остальное зависит от бюджета проекта.
Есть время/деньги — заморачиваемся. Пилим третий вариант x3, подключаем полифилы для srcset, делаем дополнительные наборы для брикпойнтов в медиазапросах.
Нет времени/денег — тупо грузим везде удвоенные размеры, и указываем реальные в css.

Шрифтовые иконки.
Используемые наборы легко гуглятся
ionicons.com
https://icomoon.io/

https://jsfiddle.net/Lqdov9nk/