Igor Teplostanski teplostanski

8 паттернов реактивности в современном JavaScript

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

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

Хотя реактивность часто ассоциируется с фреймворками, уверен, что многому можно научиться, реализуя ее в чистом JS. Поэтому мы сами напишем кодовые паттерны, а также изучим некоторые нативные браузерные API, основанные на реактивности.

Live Demo

<form>
  <div class="checkbox">
    <input class="checkbox__input" type="checkbox" id="checkbox2" checked>
    <label class="checkbox__label" for="checkbox2">
      Check
    </label>
  </div>

Создание сертификата Let’s Encrypt для домена и всех поддоменов

Домен, для которого создается сертификат (например, example.com).
Доступ к серверу с установленной ОС (например, через SSH).
Возможность настроить DNS или веб-сервер для подтверждения владения доменом.
Установленный certbot (или другой ACME-клиент).

Шаг 1: Установка Certbot

Если Certbot еще не установлен, установите его:

openpgp4fpr:5628A324816DF3C202799215ABE46FF36CB6A99B

Logical assignment (&&=, ||=, ??=) в JavaScript

Операторы логического присваивания. Сокращенная запись для комбинации логических операторов с присваиванием.

// До сокращения
x = x && y
x = x || y
x = x ?? y

Nullish coalescing (??) в JavaScript

Оператор ?? проверяет на null/undefined. Возвращает правый операнд если левый равен null/undefined, иначе левый.

null ?? 'default'      // 'default'
undefined ?? 'default' // 'default' 
0 ?? 'default'        // 0
'' ?? 'default'       // ''
false ?? 'default' // false

Основные типы коммитов:

feat (функциональность)
- Назначение: Добавление новой функциональности или нового компонента в кодовую базу.
- Пример: feat(auth): add login form
fix (исправление)
- Назначение: Исправление багов, ошибок или проблем в коде.
- Пример: fix(locale-switcher): resolve issue with empty value

Как получить открытый ключ GitHub для проверки коммитов

GitHub использует GPG-подписи для коммитов, созданных через веб-интерфейс (например, через кнопку "Commit changes"). Чтобы проверять эти подписи локально, вам нужно получить публичный ключ GitHub и добавить его в вашу локальную базу GPG-ключей.

Импортируйте публичный ключ GitHub:

Выполните следующую команду для получения и импорта ключа GitHub:

curl -L https://github.com/web-flow.gpg | gpg --import

Принудительное использование цветового профиля sRGB в Chrome

Нужно вставить в адресную строку chrome://flags/#force-color-profile и в поле Force color profile выбрать sRGB

Important

В Chrome 100 удален флаг #force-color-profile.

Ниже приведены два временных метода, которые можно использовать, пока они продолжают работать:

Запустите Chrome, добавив следующий переключатель в целевое поле: --force-color-profile=srgb

	const fs = require('fs');

	const args = process.argv.slice(2);
	if (args.length < 1) {
	console.error('Please provide a file path as an argument.');
	process.exit(1);
	}

	const specificFile = args[0];