Сергей delphinpro

В data храните номер активного таба, а в эвентах используйте его:

Эвент:
@mouseleave="expand(1)"

В табах:
:class="{ active: active == 1 }"

data:

data() {
    return {
      acitve: 1,
    };
 },

а в методах:

methods: {
    expand(number) {
      Vue.set(this, 'active', number); //this.active = number
    },
  },

По умолчанию используйте openserver.
Если вам понадобится что-то больше (сфинкс, эластик, рэббитMQ), то берите вагрант

Давайте попробую по пунктам:

Почему (Mobile First) или (Desktop First) лучше ;
Почему (Mobile First) или (Desktop First) хуже ;

что-то из серии "Что лучше, ложка или вилка?" Ну Вы поняли... Это вопрос исключительно удобства и он напрямую зависит от того, какой у Вас исходный шаблон, и в какую сторону его проще будет адаптировать. Но даже и в этом случае, слово "лучше" тут мало уместно, скорее это вопрос удобства. Мы (в общей сложности человек 50+, от студентов до матёрых разработчиков) взяв за основу ряд параметров с отметкой "нужно делать вот так" от Google PageSpeed провели массу тестов и дискуссий... В результате которых, едино правильного подхода найдено не было. Самый удобный с точки зрения здравого смысла, был такой вариант:
1. Сначала пишем все общие стили, описывающие цвета, шрифты и всю такую ерунду
2. Для каждого диапазона разрешений создаём свой стиль-корректор, который описывает (корректирует) позиционирование элементов, их размеры, размер шрифта и т.д.

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

Производительность (Mobile First) или (Desktop First) ;

На производительность это в общей сложности не влияет никак, т.к. Вы банально даже JS'ы можете подгружать нужные на нужное разрешение, по этому вопрос производительности тут вообще сложно обозначить. Хотя, конечно можно опираться на такое условие как "мобильные всегда медленнее чем стационарные устройства", и из этих соображений, если такое условие "сильно вывернуть" и возвести в ранг абсолюта - тоже будет логичнее сначала делать "Mobile first".

Где и каким сайтам подходит (Mobile First) или (Desktop First) ;

MobileFirst по определению идеально подходит тем сайтам, которые изначально (в первую очередь) рассчитаны именно на мобильные устройства, например какой-нибудь "музыкальный сервис онлайн, с возможностью прослушивать MP3'шки в качестве 32-64Кбит, специально для тех у кого кончился трафик и интернет работает с ограничениями скорости". Остальное я описал выше :)

https://jsfiddle.net/L30qqawj/ либо трансформациями
www.cssportal.com/style-input-range
А это для коллекции ionden.com/a/plugins/ion.rangeSlider/demo_advanced.html

Сработало вот так:

&::before {
  content: "● ";
  font-family: monospace; // одинаковая ширина символов
  margin-left: -2ch; // влево на два символа
}

Спасибо Сергею.

Что-то вроде пройди тетрис, сокобан, арканоид или марио и получи шанс запостить коммент?!) Или проще нужно?)

Говоря проще: PHP в браузере не запускается и круто выглядеть не может)
Круто - может выглядеть только визуальная часть, а она - не на PHP, а на HTML5/CSS3/JS

Что требуется-то?)

mobelems[i].addEventListener("click", mob_click_func);
Без скобок, иначе это сразу вызов

Вместо time(), который с точностью до целых секунд, используйте microtime(true), который вернёт с точностью до тысячных долей секунды.

Скорее всего, ваш скрипт выполняется меньше секунды, и из-за округления до целых возвращается 0.

Можно вообще убрать этот лишний поиск в DOM

$(document).ready(function () {
    $('#email').on('input', function () {
        emailValidation(this.value);
    });

 function emailValidation(email) {
        // your regexp stuff here
        ...
}