wakenby

работать с dom напрямую плохая практика

Не всегда. Зависит от задачи.

Пусть компонент табов принимает в качестве параметров массив значений, описывающих табы и значение, обозначающее активный таб:

props: [ 'items', 'value' ],

В данные компонента положим стили для элемента, изображающего подчёркивание активного таба:

data: () => ({
  sliderStyles: null,
}),

Создадим сами табы и элемент подчёркивания:

<ul class="tabs">
  <li
    v-for="n in items"
    :key="n.value"
    @click="$emit('input', n.value)"
    class="tabs-item"
  >{{ n.text }}</li>
</ul>
<div
  class="tabs-slider"
  :style="sliderStyles"
></div>

Элементу подчёркивания (.tabs-slider) зададим абсолютное позиционирование и transition.

Настроим слежение за текущим значением - узнаём его индекс среди доступных для выбора значений, записываем в стили элемента подчёркивания позицию и размер таба с соответствующим индексом:

mounted() {
  this.$watch(
    'value',
    value => {
      const index = this.items.findIndex(n => n.value === value);
      const el = this.$el.querySelectorAll('.tabs-item')[index];
      this.sliderStyles = el
        ? {
            left: `${el.offsetLeft}px`,
            width: `${el.offsetWidth}px`,
          }
        : null;
    },
    {
      immediate: true,
    }
  );
},

https://jsfiddle.net/vsr5tLue/

Висят на фл опубликованных под сотку и штук 30 необупликованных. Не публикую отзывы с большими бюджетами. Мне жалко!!!

Если у исполнителя все заказы выполнены за еду (а таких фрилансеров 90%), кто ему доверит серьезный проект? Сошлются на то, что типа: "у вас же лендинги за 10к (в отзывах такие ценники), почему вы нам цену накручиваете?"

Кстати есть успешные профи, которые выставляют ценник проекта в 500р, ибо за каждый отзыв на fl.ru нужно платить непосредственно самому фрилансеру, если он не по безопасной сделке работает. А чем выше ценник, тем больше фрилансер заплатит за отзыв. И так более 100 отзывов набирают, при том, что работают только с большими проектами.

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

str.replace(/-{2,}/, '-');

Как получить src:

const getSrc = img => img.getAttribute('src');
// или
const getSrc = img => img.attributes.src.value;

Чтобы дальше два раза одно и то же не писать, небольшой декоратор:

const relativeOnly = f => img => {
  const src = getSrc(img);
  if (!/^https?:\/\//.test(src)) {
    f(img, src);
  }
};

Можно перезаписывать разметку:

document.querySelectorAll('img').forEach(relativeOnly((img, src) =>
  img.outerHTML = `
    <picture>
      <source srcset="${src}" type="image/svg+xml">
      ${img.outerHTML}
    </picture>`
));

Или, создавать новые элементы напрямую:

const wrapImages = relativeOnly((img, src) => {
  const picture = document.createElement('picture');
  const source = document.createElement('source');
  source.srcset = src;
  source.type = 'image/svg+xml';
  img.replaceWith(picture);
  picture.append(source, img);
});

for (const n of document.getElementsByTagName('img')) {
  wrapImages(n);
}

// или

Array.prototype.forEach.call(document.images, wrapImages);

Это правило запрещает доступ к файлам с расширениями tpl, ini, log и txt кроме robots.txt

<FilesMatch "(?i)((\.tpl|\.ini|\.log|(?<!robots)\.txt))">

Тут похоже потерялся конец строки $
Нужно исправить

<FilesMatch "(?i)((\.tpl|\.ini|\.log|(?<!robots)\.txt))$">

Так шаблон не захватит *.init.js файлы.

Всё верно, однако если сделать так:

element.style.transition = tempTime + "ms all";
element.style.transform = 'translateX(' + getRandomInt(-animated.getBoundingClientRect().width / size, animated.getBoundingClientRect().width / size) + 'px) translateY(' + getRandomInt(-animated.getBoundingClientRect().height / size, animated.getBoundingClientRect().height / size) + 'px)';
setTimeout(() => { element.style.transition = tempTime / 2 + "ms all"; }, 0)

То трансформ успеет начать работать с первым значением транзишена.

В dependencies подключаете все, что будет использоваться в продакшне. Ваш конечный юзер у себя в браузере увидит работу reset-css — значит в dependencies.

В devDependencies все, что в продакшне напрямую не используется. Например, typescript или node-sass, которые нужены только на этапе сборки.