Роман Дворянов

Для использования import вам нужен сборщик проекта c CommonJS модулями, можете почитать про то как собирать с gulp, webpack, parcel, rollup или еще какой.

Но, чтоб вам использовать lodash достаточно его подключить перед jquery в разметке

<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.19/lodash.min.js"></script>

после этого вы сможете использовать lodash в своем коде

Когда в массив попадает ссылка-якорь, у которой нет атрибута href, ваш код падает на этом месте
link.getAttribute('href').startsWith('http')
Потому что не может сделать метод startsWith у нуля, т.к. атрибут href у такой ссылку null.
Что бы избежать подобной ситуации проверяйте есть ли у ваших ссылок такой атрибут

так

const links = document.querySelectorAll('.link-add a[href]');
const url = 'http://test.ru/dwxl/?url='

Array.from(links)
    .filter(link => link.getAttribute('href').startsWith('http'))
    .forEach(link => link.href = url + link.href);

или так

const links = document.querySelectorAll('.link-add a');
const url = 'http://test.ru/dwxl/?url='

Array.from(links)
    .filter(link => link.getAttribute('href') && link.getAttribute('href').startsWith('http'))
    .forEach(link => link.href = url + link.href);

А по хорошему, как уже писали в комментариях - не используйте ссылки без атрибута href, но я так понимаю это специфика плагина

Это карусель Swiper, тут можно почитать как интегрировать к себе на сайт, тут какие у этого слайдера есть опции и настройки и посмотреть демки,

Накидал что-то на подобии того, что вы хотели

Что-то мне подсказывает, что так может сработать

type UsersValues = {
    [key: string]: string | number;
};

type UserType = {
  [key: string]: UsersValues | string;
};

Потому что в аргументы нужно совать что искать, а не в чем, во втором случае вы ищете 'sto re ' в строке 'sto '

Отвечаю на вопросы из комментариев:
Что такое флекс?
- Flexbox(display: flex) это такая технология в css, можно почитать как работает тут, в двух словах - с флексбокс проще компоновать блоки, чем по старинке через float: left, кстати его тоже уберите, флексбокс работает без него.

- Что было не так:
У вас инлайн элементы, которые при достижении края, опускаются ниже, если вы добавите в текущий код запрет на перенос строки, тоже будет работать, но флексбокс круче

Как исправить текущий код?

aside {
  white-space: nowrap;
}

Как переписать на флексах

aside {
  display: flex;
  width: 80%;
  height: 110px;
  margin: 10px 0px 30px 10%;
  border: 1px ridge Grey;
  border-radius: 15px;
  overflow-x: scroll;
}
aside img {
  height: 100px;
  margin-top: 5px;
  margin-left: 10px;
  border-radius: 10px;
  border: 1px solid DimGrey;
}

CSS тут не поможет, более того, это не баг, а фича. Это явно кто-то делал специально. Таких багов не бывает. Анимация реализованная на js.

Что сделать, чтоб этого не было -
Найти свои js файлы, прочитать их, найти, где реализуется прокрутка окна браузера, выпилить.

Ваш псевдоселектор направлен не на потомков класса, а к контейнеру с классами, вы пытаетесь взять последний элемент с классом .wrap_third_block а он у вас всего один и да, к нему добавляется margin-right: 0;

Если вы хотите взять последний элемент из трех, то

.bl:last-child {
  margin-right: 0;
}

Как-то так

source.filter(obj => !uniqIds[obj.id] && (uniqIds[obj.id] = true));
1. Метод фильтр берет каждый элемент (obj) и создает новый массив из элементов, которые подходят под условие
2. Условие !uniqIds[obj.id] означает, что если элемента массива с текущим элементом цикла нет в пустом массиве, то это пустому массиву с индексом этого элемента присваивается значение true
типа

obj => !uniqIds[obj.id] && (uniqIds[obj.id] = true)

в текущий итерационный момент выглядит так

source.filter((obj) => {
  console.log(obj.id);
  //=> 'a'

  // return !uniqIds[obj.id] && (uniqIds[obj.id] = true) - это тоже самое, что и 
  if (uniqIds[obj.id] !== 'undefined') { //   if (uniqIds['a'] !== 'undefined') {
    uniqIds[obj.id] = true;  // uniqIds['a'] = true; => [{a: true}]

    return true;
  }
}

В двух словах - не встретилось значение одного массива в ключе другого, значит подходит

Содержимое массива uniqIds:

uniqIds = [
  'a': true,
  'b': true,
  'c': true,
  'd': true,
]

Абсолютное позиционирование это чаще всего когда ты видишь элемент на сайте, который как бы висит в воздухе, наслаивается, как стрелочки в слайдере.
Например: Меню на этом сайте, когда находится в самом верху страницы, позиционировано абсолютно, при скролле позиционирование меняется на фиксированное и менюха фиксируется в окне.

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

position используется везде, и в адаптиве и ... кто в 2020-м не делает адаптив?

Разница с Flexbox - флексбокс это о другом, тут общее только в том, что с помощью и той и другой технологии можно решить эту узкопрофильную задачу, более того часто они используются совместно, например отрисовать список элементов в попапе, список элементов можно разместить при помощи флексбоксов, а сам попап позиционировать по центру страницы

Тут нужна практика, когда столкнешься с этим, начнешь думать как это сделать, все поймешь.

Три варианта на выбор

Раз

.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
}

@media (max-width: 600px) {
  .container {
      grid-template-columns: 1fr 1fr;
  }
}

Два

.container {
    display: flex;
    flex-wrap: wrap;
}

Три

.container::after {
  content: '';
  clear: both;
  display: table;
}

.container__item {
  ...
  float: left;
}