Александр

const form = document.querySelector('form');

for (const element of form.elements) {
	const wrapper = element.closest('.form_block');
	if (wrapper !== null) {
		element.addEventListener('blur', (event) => {
			if (!wrapper.contains(event.relatedTarget)) {
				wrapper.classList.add('dd');
			}
		});
	}
}

и tabindex="0" убрать можно.

Это делается в два слоя. На первом - картинка, название и вся сопутствующая информация. На втором - кнопки добавления в корзину, поделится и лайк. Второй слой изначально делаете скрытым, рисуете его поверх (position: absolute), скрываете (opacity: 0; visibility: hidden;). При (:focus, :focus-within и :hover) показываете (opacity: 1; visibility: visible;).
Возможно добавляете JS, чтобы узнать, был ли наведен курсор и после убран с карточки (именно в таком порядке), чтобы скрыть второй слой (сделать .blur, если пользователь сфокусирован).

Для каррирования необходима функция с фиксированным количеством аргументов.

Функцию, которая использует остаточные параметры, типа f(...args), так каррировать не получится.

Источник.

Вариант 1 - Полностью сделать объект неизменяемым.

const obj = Object.freeze({
  name: 'John',
  age: 31
});

obj.age = 32;
obj.email = 'john@example.com';

console.log(obj); // { name: 'John', age: 31 }

Вариант 2 - Добавлять новые поля при помощи Object.defineProperty.

const obj = {
  name: 'John',
  age: 31
};

Object.defineProperty(obj, 'other', {
  value: 'some data',
  writable: true,
  enumerable: true
});

Object.defineProperty(obj, 'email', {
  value: 'john@example.com',
  enumerable: true
});

Object.defineProperty(obj, 'secret', {
  value: 'Woop-woop'
});

console.log(obj);
/* {
  name: 'John',
  age: 31,
  other: 'some data',
  email: 'john@example.com'
} */
obj.other = 'another data';
console.log(obj);
/* {
  name: 'John',
  age: 31,
  other: 'another data',
  email: 'john@example.com'
} */
console.log(obj.secret); // 'Woop-woop'
obj.secret = 'Boop-boop';
console.log(obj.secret); // 'Woop-woop'

Также, все defineProperty можно объединить в один:

Object.defineProperties(obj, {
  other: {
    value: 'some data',
    writable: true,
    enumerable: true
  },
  email: {
    value: 'john@example.com',
    enumerable: true
  },
  secret: {
    value: 'Woop-woop'
  }
});

Потому что.

LocalStorage, Indexed DB

Судя по примеру:

const merge = (a, b) => {
  const combined = new Set([...Object.values(a), ...Object.values(b)]);
  
  return Object.fromEntries(
    [...combined.values()].map((value, index) => [index, value])
  );
};

merge(
  { "0": 1, "1": 2, "2": 3 },
  { "0": 4, "1": 5, "2": 1 }
);

Ух. Ну, используйте Formik в связке с Yup.

import React, { useCallback } from 'react';
import { Formik, Form, useField } from 'formik';
import * as yup from 'yup';

const initialValues = {
  firstName: '',
  lastName: '',
  nickName: '',
  email: '',
  password: '',
  confirmPassword: ''
};

const validationSchema = yup.object().shape({
  firstName: yup.string().required('Имя является обязательным'),
  lastName: yup.string().required('Фамилия является обязательной'),
  nickName: yup.string().required('Имя пользователя является обязательным'),
  email: yup
    .string()
    .email('Введенное значение не является почтой')
    .required('Почта является обязательной'),
  password: yup
    .string()
    .min(8, 'Минимальная длина пароля 8 символов')
    .required('Пароль является обязательным'),
  confirmPassword: yup
    .string()
    .oneOf([yup.ref('password'), null], 'Пароли не совпадают')
    .min(8, 'Минимальная длина пароля 8 символов')
    .required('Пароль является обязательным')
});

const ExampleField = ({ name, label, ...props }) => {
  const [field, meta, helpers] = useField(name);

  return (
    <label>
      {label}
      <input
        name={name}
        value={field.value}
        onChange={field.onChange}
        onBlur={field.onBlur}
        {...props}
      />
      {meta.error !== undefined && meta.touched && <div>{meta.error}</div>}
    </label>
  );
};

const ExampleForm = () => {
  const handleSubmit = useCallback((values, helpers) => {
    console.log(values);
    helpers.setSubmitting(false);
  }, []);

  return (
    <Formik
      initialValues={initialValues}
      validationSchema={validationSchema}
      validationOnBlur
      onSubmit={handleSubmit}
    >
      {({ values, errors, touched, isValid, isSubmitting }) => (
        <Form>
          <ExampleField label="Имя" name="firstName" />
          <ExampleField label="Фамилия" name="lastName" />
          <ExampleField label="Имя пользователя" name="nickName" />
          <ExampleField label="Почта" type="email" name="email" />
          <ExampleField label="Пароль" type="password" name="password" />
          <ExampleField label="Подтверждение пароля" type="password" name="confirmPassword" />
          <button type="submit" disabled={!isValid || isSubmitting}>
            Отправить
          </button>
          <pre>{JSON.stringify({ values, errors, touched }, null, 2)}</pre>
        </Form>
      )}
    </Formik>
  );
};

Пример.

clip-path

Какая версия Node.js? Метод flat появился с 11 версии.

const total = arr.reduce((acc, item) => acc + item.price, 0);

Proxy

const store = new Proxy({
  a: 50
}, {
  set(target, property, value, receiver) {
    console.log(`Поле <${property}> было обновлено. Новое значение:`, value);
    return Reflect.set(target, property, value, receiver);
  }
});

store.a = 10;
// Поле <a> было обновлено. Новое значение: 10

[...new Set(Object.keys(YOUR_OBJECT))];

Кнопка так сделана?
<button>...</button>