dmitry-toster

Конечно! Будете говнокодером.

1) Имхо, вариант со списком не очень, так как это не группа однородных элементов, которые выполняют одну функцию. Вариант с параграфом отлично подходит, хотя и обычный div подойдет с правильным названием класса.
2) Разумных способов много, можно накидать псевдоэлементов и их анимировать (самый популярный), можно обертки, можно фон и так далее. Вот, например, мой элементарный вариант с анимацией, хотя тут и есть простой JS, но его можно убрать и изменять CSS переменную вручную)).

str.slice(0, 3) + '-'.repeat(Math.max(0, str.length - 3))

// или

str.replace(/(?<=.{3})./g, '-')

// или

Array.from(str, (n, i) => i < 3 ? n : '-').join('')

// или

str.replace(/./g, (m, i) => i < 3 ? m : '-')

// или

str.match(/.{0,3}/) + Array(Math.max(0, str.length - 2)).join`-`

// или

str.substring(0, 3).padEnd(str.length, '-')

function cloneWithReplace(
    // клонируемый объект
    obj,
    // объект с функциями вида value => newValue, в соответствующих ключах для замены
    // нужен не всегда, поэтому по умолчанию сделаем пустой объект
    replacers = {},
    // Map с значениями, которые уже склонировали, дабы не попасть в рекурсию
    // так как внешний код обычно его не будет передавать, зададим значение по умолчанию
    storeMap = new Map()
) {
    // для начала чекнем, что объект уже клонировали:
    if(storeMap.has(obj)) {
        return storeMap.get(obj);
    }

    // получим тип объекта, он нам пригодится пару раз, дабы отличать функции
    const type = typeof obj;

    // если obj примитив, то его можно просто вернуть
    if(obj === null || (type !== 'object' && type !== 'function')) {
        return obj;
    }

    // создадим переменную с результатом и инициируем ее в зависимости от типа оригинала
    let result;
    if(type === 'function') {
        // функцию можно "склонировать" лишь обернув
        result = function() {
            return obj.apply(this, arguments);
        };
        // неплохо бы, чтоб клон правильно сообщал имя функции и количество аргументов
        // но так как IE не ест такую магию, обернем в try-catch
        try {
            Object.defineProperties(result, {
                name: Object.getOwnPropertyDescriptor(obj, 'name'),
                length: Object.getOwnPropertyDescriptor(obj, 'length')
            });
        } catch {}
    } else if(Array.isArray(obj)) {
        // массивы клонируем рекурсивно, при помощи map
        result = obj.map(value => cloneWithReplace(value, replacers, storeMap));
        // так как нормальные массивы не содержат других полей, кроме числовых
        // можно сохранить клон в защиту от рекурсии и вернуть результат
        storeMap.set(obj, result);
        return result;
    } else {
        // для всех других объектов просто создадим новый объект и скопируем ему ссылку на прототип
        result = Object.setPrototypeOf({}, Object.getPrototypeOf(obj));
    }

    // сохраним клон в защиту от рекурсии
    storeMap.set(obj, result);

    // осталось склонировать поля с заменой тех случаев, где у нас есть replacer
    for(const key of Object.getOwnPropertyNames(obj).concat(Object.getOwnPropertySymbols(obj))) {
        if(typeof replacers[key] === 'function') {
            // если есть replacer используем его
            result[key] = replacers[key](obj[key]);
        } else {
            // иначе клонируем поле рекурсивно
            result[key] = cloneWithReplace(obj[key], replacers, storeMap);
        }
    }

    return result;
}

// используем так:
const newData = cloneWithReplace(data, {
    value: () => 'new value'
});

.block:not(.ignore) {
  color: red;
}
.block:not(.ignore) ~ .block{
  color: black;
}

template.replace(/\{(.+?)\}/g, (m, g1) => user[g1] ?? m)

Потому что кое-кто не в курсе, что бывает, когда выполняется установка значения необъявленной переменной.

Если переменной нет, она будет искаться во внешних областях видимости. И если ни в одной из внешних областей видимости переменной с таким именем нет, будет создана глобальная переменная. То есть, у вас при первом вызове popUp создаётся глобальная переменная elem_obj, а при последующих вызовах обновляется её значение.

Owl Carousel самый лучший на мой взгляд. Функции что вы описали там есть.
Отличная оптимизация кода
Хорошая поддержка браузеров (даже старых)
И как вишенка на торте, он поддерживает Touch (нажми и тащи).

Для этого существует множество способов
по простому, через спред оператор

const { ...rest } = this.state
<NewsComponent
  { ...rest }
/>

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

const { title, description = "" } = this.state
<NewsComponent
  title,
  description
/>

2й читается лучше на мой взгляд, а так разницы никакой.

Разница лишь в возможностях обоих подходов.

Во 2м можно написать некую свою логику до return и создать или заменить исходное значение свойства на новое.

Как пример:

const mapStateToProps = ({ user, data }) => {
  const myProp = localStorage.get('myProp');

  return {
    myProp,
    user,
    data
  }
};

Исходя из вашего 1го примера, его можно ещё короче записать.
const mapStateToProps = props => props;

Какой только смысл в этом!!! Так вообще не читается, что внутри props лежит, фиг его знает... Зато коротко и экономит несколько байт

Один поезд начинает движение влево, второй вправо, какой именно куда - неважно. Если не встретились, то через время t меняют направление движения. Потом через время 2t, 3t, 4t и т.д. Как вариант t, 2t, 4t, 8t.

Один пускай стоит, а второй туда-сюда с возрастающей амплитудой