Максим

Тоже не поверил, что в FF могут быть проблемы с маской. Уже подумал, что вы баг в браузере нашли... Но все оказалось куда проще - в ответе на SO какая-то жесть творится с размерами, я ее немного поправил и все заработало:

<svg viewbox='0 0 100 100'>
    <defs>
        <mask id='mask'>
            <rect x='0' y='0' width='100' height='100' fill='rgba(255,255,255,0.5)' />
            <circle r='50' cx='50' cy='50' fill='#000' />
        </mask>
    </defs>
    <image xlink:href='....' x='0' y='0' width='100'height='100' />
    <rect x='0' y='0' width='100' height='100' fill='white' mask='url(#mask)' />
</svg>

С самой маской проблем нет.
CodePen

потому что в переменной у вас объект
допишите, что вы хотите занести в переменную, например

var topicuser = $(".asked__him").text();
var commentuser = $(".he__asked").text();

var topicuser = $(".asked__him")[0].innerHTML;
var commentuser = $(".he__asked")[0].innerHTML;

Свойство yearRange.

a.filter__menu-item:hover:after{
   ...
}

По-моему, понимание основ иерархии - намного важнее БЭМ

1. Такой костыльный вариант jsBin

2. Пример с svg

<svg xmlns="http://www.w3.org/2000/svg" viewPort="0 0 500 500" width="100%" height="100%">
    <defs>
      <filter id="f1" x="-50%" y="-50%" height="200%" width="200%">
        <feOffset result="offOut" in="SourceAlpha" dx="0" dy="0" />
        <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
        <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
      </filter>
    </defs>

    <g filter="url(#f1)">
      <rect width="200" height="200" x="50%" y="50%" fill="#eee" style="transform:translate(-50px, -50px);"/>
      <circle r="100" cx="50%" cy="50%" fill="#eee" style="transform:translate(-50px, -50px);"/>
    </g>
</svg>

Вот простой пример реализации : https://codepen.io/coderisimo/pen/RyXKRq

Из перечисленных (через запятую - перечисление, через точку - вещественные числа) выражений в круглых скобках возвращается последнее.
Отсюда и (1, 5-1) === 4

ну если брать именно по тексту то можно так

var texts = [];
    $('a').each(function() {
        if (texts.indexOf($(this).text()) == -1) {
             texts.push($(this).text())
        } else {
            $(this).remove();
        }
    })

Код не проверял но должно работать. Ну это только в том случае если текст в тегах идентичен.

1. Забейте на бутсрап, используйте flexbox-ы
2. Используйте swiper-slider - для слайдеров
3. Прочитайте про сборщики проектов и препроцессоры, типа gulp и scss Тык
4. Взяли слишком сложный сайт для начала я даже такой точь в точь не сверстаю, хотя опыта 3 года, лучше найти готовые psd макеты в инете и тупо их сделать и наполните обязательно контентом нестандартным(ибо шаблонные текста в портфолио отшиваются)
5. Не используйте иконочные шрифты, сейчас все используют svg спрайты, вот сервис если что для генерации: тык
6. Для хоста используйте beget - он бесплатный
7. Для любого наводимого элемента должно быть изменено состояние(у вас в футере пункты без ховера, то же самое с соц иконками, шапкой и логотипами)
8. Ну код у вас вполне чистый, не переживайте, бывает и хуже... часто хуже

$('.item img').each((i, el) => { 
  const $img = $(el)
  $img.parent().attr('data-caption', $img.attr('data-caption')) 
})

https://developer.mozilla.org/en-US/docs/Web/HTML/...

но лучше не маятся и сделать своими стилями

Любой элемент, у которого стоит padding или margin -left на нужное кол-во символов. Собственно у ul так и есть. И потом просто выстраиваете дерево

<div>
    <div>Ребенок
        <div>Ребенок ребенка</div>
    </div>
</div>