Дмитрий Беляев

Вместо img класс лучше переключать у article - максимально дальних не общих предков картинок. Если вдруг захотите при кликах на кнопки стилизовать ещё что-то помимо картинок, или измените взаимное расположение элементов, то не придётся переписывать js-код. Стили, конечно, придётся немного поправить, вместо .active будет .active img.

const container = document.querySelector('.container');
const itemSelector = 'article';
const buttonSelector = `${itemSelector} .btn`;
const activeClass = 'active';

Делегирование, назначаем обработчик один раз:

container.addEventListener('click', e => {
  const button = e.target.closest(buttonSelector);
  if (button) {
    button.closest(itemSelector).classList.toggle(activeClass);
  }
});

Или каждой кнопке индивидуально:

container.querySelectorAll(buttonSelector).forEach(function(n) {
  n.addEventListener('click', this);
}, e => e.currentTarget.closest(itemSelector).classList.toggle(activeClass));

Без разницы где вы храните данные и как вставляете - пока вы с сервера отдаёте полностью собранный html с поисковиками всё будет окей.

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  while (0 !== currentIndex) {

    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

https://stackoverflow.com/questions/2450954/how-to...

Развеять или подтвердить не сможет абсолютно никто кроме Вас самих. Нужно попробовать самому, причем попробовать попользоваться каждой из систем хотябы с месяц, после чего уже будет представление достоинств и недостатков каждой системы.

Сугубо на мой взгляд и опыт могу сказать что :
- самая простая хоть и считается убунта но это только потому что у нее самое большое число мануалов и обсуждений на форумах.
- opensuse намного, очень намного дружественнее убунты для пользователя т.к., для совсем новичка, в ней можно полностью игнорировать консоль с ручной правкой конфигов в отличии от той же убунты. Все чего так нехватает увидеть в gui настройках абсолютно любого другого диста тут есть. И опять же на мой взгляд для тех кто переходит с винды тут будет почти как дома. Надо в графике понастраивать фаирвол, пожалуйста, захотелось веб сервер поднять не вникая в конфиги, запросто, а может в домен завести, да пожалуйста всего пара кликов мышью.
- debian\fedora\centos как правило этакая золотая середина для большинства тех кто уже понимает устройство линукс систем как и недостатки других дистрибутивов
- bsd* системы хороши уже для тех кто имеет очень глубокое понимание всего происходящего и четко представляет конечную цель которую нужно реализовать. К примеру нужен шлюз на замену роутера в организации, позволить купить сервер нет возможности но есть вот такой скромный старичек свободный, значит накатываем на него бздю а в нее dhcp\dns сервер, единожды настраиваем и получаем стабильную работу нового шлюза который можно не трогать долгие годы и в котором нет абсолютно ничего лишнего и все ресурсы уходят именно на решение поставленной задачи а не левых чаще всего ненужных демонов без которых на обычном linux дистре врядли что то заработает.

Половина сервисов Яндекса работает на Ubuntu Server

Потому что их так позиционируют. Дистрибов много и надо хоть как-то выделяться, вот и начинается "очеловечивание" линуха, которое в итоге приводит к тому, что человек становится этаким "недо-линуксоидом", то есть человеком, который что-то способен сделать только через бубунтовский гуй, а когда он оказывается перед необходимостью работать с консолью, он чувствует себя ничуть не лучше, чем его собрат "недо-виндузятник", оказавшийся перед командной строкой.
На самом деле это все стереотипы. И бубунтой и минтом можно пользоваться ровно так, как хочется - если знаешь, что делать и как делать. И сервера на них держат и все такое. Это в конце концов тот же линух :)

О крутости шляпы.

Шляпа - корпоративный дистриб. И его основная цель - чтобы работало. И этой цели он достигает. CentOS, его коммунити-зеркало, взлетает быстро, работает хорошо, обновления на el6 до сих пор выпускаются, несмотря на ведро 2.6.32 :) Но - повторюсь - это корпоративный дистриб. То есть там нет новых программ. Там нет ничего про игры и мультимедию и вообще про развлечения ничего нет. Это суровый набор рабочих инструментов :) Для дома он не годится.

О "сверхкрутости" FreeBSD.

Как человек, проработавший на FreeBSD c 1997 по 2013 год - могу сказать совершенно точно - это все лажа. Да, FreeBSD - это совсем не линух. Да, там другое ведро, там другой сетевой стек, там другой файрволл, там другое все. Но "другое" не значит "лучшее". Потеря коммунити - это самая серьезная потеря, а коммунити FreeBSD если не сокращается, то по крайней мере не растет.

Почему?

Проблемы с железом, то есть с дровами
Проблемы с совместимостью, когда программы, работающие в линухе, скрипят и еле везут на FreeBSD
Проблемы с разработчиками - ведь код ведра, дрова, специфические вещи нужно же кому-то писать!
...
словом все то же самое, что убило когда-то одну из самых замечательных, красивых и весьма популярных ОС - OS/2...

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


Т.к. квадрат вы повернули, то грубо говоря, ширина = диагонали.

Смотрите, вот здесь я вижу, что эта библиотека возвращает объект типа ChildProcess.
А значит вы можете послать дочернему процессу сообщение и получить его.

Если же вам нужна более сложная логика, то можно использовать pipe-каналы или tcp-соединения. Или любой другой способ межпроцессорного взаимодействия (гуглить, nodejs IPC или nodejs inter-process communication).

const newArray = Object.keys(checkboxGroup) // Превращаем объект в массив ключей checkboxGroup
     .filter(name => checkboxGroup[name].checked === true) // Создаем новый массив из ключей, в котором будут только те, для которых у объекта - checked есть истина
     .map(name => checkboxGroup[name].value); // Создаем новый массив из свойств value

Как минимум, косяк в том, что корневой элемент должен быть один, а у вас их два. Это я про шаблон #analyzes-template - добавьте существующим элементам общий родительский:

<template id="analyzes-template">
  <div>
    <div v-show="active_analyzes_template">
        Анализы
    </div>
    <a class="btn btn-sm btn-outline-success" @click="openTemplate()">НАЗНАЧИТЬ АНАЛИЗЫ</a>
  </div>
</template>