Сергей delphinpro

Это чё, в setInterval запихнули подключение обработчика keydown? Умно. Не нужен тут никакой setInterval.

Сам обработчик keydown слишком сложно выглядит - зачем в четырёх разных местах делать один и тот же вызов функции? Сначала меняете координаты, а в самом конце - дёргаете перерисовку.

Размер картинок - а если решите поменять? Или опечатаетесь где-нибудь? Сделайте константу.

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

Как это всё может выглядеть:

const canvas = document.querySelector('#canvas');
const ctx = canvas.getContext('2d');

const TILE_SIDE = 32;

let pickX = 0;
let pickY = 0;

const ground = new Image();
ground.src = 'Ground.png';
const pick = new Image();
pick.src = 'Pick.png';

document.addEventListener('keydown', function(e) {
  switch (e.keyCode) {
    case 87: pickY -= TILE_SIDE; break;
    case 65: pickX -= TILE_SIDE; break;
    case 83: pickY += TILE_SIDE; break;
    case 68: pickX += TILE_SIDE; break;

    default: return;
  }

  draw();
});

function draw() {
  for (let x = 0; x < canvas.width; x += TILE_SIDE) {
    for (let y = 0; y < canvas.height; y += TILE_SIDE) {
      ctx.drawImage(ground, x, y);
    }
  }

  ctx.drawImage(pick, pickX, pickY);
}

draw();

если все заказчики, в основном, просят натяжку на CMS, где нужно понимание php

False

на CMS, где нужно понимание php

False

на каком уровне нужно знать backend

на уровне - я знаю как решить данную проблему за Х часов, я ее уже решал минимум два раза

Похоже, что единственный работающий вариант реализовать такой градиент на CSS - это играться со свойством mix-blend-mode и делать фолбек для старых браузеров. Что-то вроде этого:

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

так же как и в 2018, 2017, 2016...

Найти покупателей на $1000. Фриланс это предпринимательская деятельность.

Вам правильно написали, что по-хорошему, с Композером надо работать на локальной машине.

Но, если будете гонять его на боевой машине, обязательно учтите, что Composer использует совершенно непотребное количество оперативной памяти (и автор отвечает на вопросы об этом, по сути, издёвками).
К примеру, для установки Drupal 8 или обновления одного установленного модуля вам едва-едва хватит гигабайта. Что-то более серьёзное может потребовать больше.

Так что я бы закладывал потребление RAM примерно 1-1.5 ГБ в моменты, когда Композер работает. Нагрузка на процессор тоже будет не нулевой, но она всё-таки много более сносная.

Разные классы не нужны, достаточно одного общего:

.ranging {
  display: none;
}

.ranging.opened {
  display: block;
}

При клике смотрим индекс нажатой кнопки, обходим элементы с контентом, выставляем класс в зависимости от равенства текущего индекса индексу кнопки:

const buttonSelector = '.selector';
const contentSelector = '.ranging';
const activeClass = 'opened';
const toggleContent = (contents, index) =>
  contents.forEach((n, i) => n.classList.toggle(activeClass, i === index));


// делегирование, назначаем обработчик клика один раз для всех кнопок
// наверное, у них есть какой-то общий предок, тогда вместо документа
// вешать обработчик следует на него:
// document.querySelector('селектор_контейнера_с_кнопками').addEventListener(...
document.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    const buttons = document.querySelectorAll(buttonSelector);
    const index = Array.prototype.indexOf.call(buttons, button);
    toggleContent(document.querySelectorAll(contentSelector), index);
  }
});

// или, назначаем обработчик клика индивидуально каждой кнопке
const onClick = function(e) {
  toggleContent(this, +e.currentTarget.dataset.index);
}.bind(document.querySelectorAll(contentSelector));

document.querySelectorAll(buttonSelector).forEach((n, i) => {
  n.dataset.index = i;
  n.addEventListener('click', onClick);
});

Сложно это всё. Четыре селекта - очень похожие, четыре вычисляемых свойства - очень похожие. Многовато копипасты. Надо упростить.

Первым делом внимательно посмотрим на все эти похожие куски кода, найдём, где они отличаются, и на основе этих отличий сделаем описание фильтров:

filters: [
  { name: 'calculator.brand_filter', getter: obj => obj.brand.name, value: '' },
  { name: 'calculator.company_filter', getter: obj => obj.company.name, value: '' },
  { name: 'calculator.country_filter', getter: obj => obj.brand.country, value: '' },
  { name: 'calculator.side_filter', getter: obj => obj.sides, value: '' },
],

Затем сделаем собственно фильтрацию, пропустим данные через массив фильтров (если значение фильтра выставлено - производится фильтрация, нет - оставляем данные как есть):

computed: {
  filteredProfiles() {
    return this.filters.reduce((profiles, { value, getter }) => {
      return value
        ? profiles.filter(n => getter(n) === value)
        : profiles;
    }, this.profiles);
  },

Далее, надо дать пользователю возможность задавать значения фильтров. Сделаем компонент фильтра:

Vue.component('filter-select', {
  props: [ 'name', 'options', 'value' ],
  template: `
<div>
  <p>{{ name }}<p>
  <select :value="value" @change="$emit('input', $event.target.value)">
    <option value="">-</option>
    <option v-for="n in options">{{ n }}</option>
  </select>
</div>`
});

Подготовим опции для фильтров - массивы уникальных значений, по которым будет осуществляться фильтрация:

computed: {
  filterOptions() {
    return this.filters.map(n => [...new Set(this.profiles.map(n.getter))]);
  },

Наконец, создадим сами фильтры:

<filter-select
  v-for="(n, i) in filters"
  v-model="n.value"
  :options="filterOptions[i]"
  :name="trans(n.name)"
></filter-select>

Также не будем забывать про обнуление значений фильтров. Так что вот метод сброса фильтров и кнопка, по клику на которую он будет вызываться:

methods: {
  resetFilters() {
    this.filters.forEach(n => n.value = '');
  },

<button @click="resetFilters">{{ trans('calculator.reset_filter') }}</button>

Демо можно посмотреть здесь (да, тут меньше фильтров, чем у вас - ну так вы свои данные не показали, а у меня воображения на большее не хватило).

Во-первых id это уникальный идентификатор. Делать несколько элементов с одним id это в корне неправильно + через JQuery по id вы получите в ответ только один элемент. Используйте классы:

<div class="aboutfilm">
    .....
</div>

<script>
$('.aboutfilm').each(function() {
    $(this).on('click', () => {
        $(this).parent().find('.test').addClass('card-text-change');
        $(this).parent().find('.card-text').css('opacity', '1');
        $(this).css('display','none');
    });
});
</script>

CI/CD (Continuous Integration/Continuous Delivery) сервер ответ на ваши проблемы. Например, bitbucket pipelines, circle ci, gitlab pipelines, jenkins и т.д. Работает так:

• сервер отслеживает пуши в определенные ветки, например, в master.
  
• если в master пришли коммиты, то запускается определенный скрипт, который вызывает сборку (обычно еще перед этим запускаются тесты, если есть).
  
• если сборка прошла успешно, то результат этой сборки кладется в отдельную папку -- это называется build artifact
  
• этот build artifact тем или иным образом загружается на хостинг -- у всяких там AWS/Azure и т.п. облак обычно есть API для этого, можно передавать файлы через scp или sftp.
  

Если вся инфраструктура локальная, то и CI/CD сервер обычно ставят локально, например, Jenkins или TeamCity. Но без выделенного админа/девопса проще в облаках настроить, наверное.

P.S. это, конечно, годится не только для проектов на vue, а вообще для любого веба, включая бэкенд.

Проблема не в VS Code, а в среде выполнения, и в вашей переменной name. т.к. вы выполняете свой код в глобальном контексте (да-да, в цикле переменные определяются не в своей области видимости), то пытаетесь переопределить переменную window.name, которая является не переопределяемой, и равна строке, от чего у вас в коде получается бардак. Измените название переменной, или используйте let вместо var