☑️ КОРОТКО = ХОРОШО?

Можно сделать много вещей, не написав слишком много строк кода.
Однако, лучше писать код чистым и поддерживаемым.
Несколько практик, которые не стоит использовать в вашем коде.

☑️ TIPS AND TRICKS #11

Cвойство new.target позволяет определить, была ли вызвана функция или конструктор с помощью оператора new. В конструкторах и функциях, вызываемых с помощью оператора new, new.target вернет ссылку на конструктор или функцию. При обычных вызовах функций new.target – undefined.

☑️ ЛЕНИВЫЕ ФУНКЦИИ

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

☑️ TIPS AND TRICKS #12

Все способы заполнить массив последовательными числами.

☑️ TIPS AND TRICKS #13

Сниппет для определения предпочтительного языка пользователя в браузере.

☑️ CВОЙСТВО LENGTH ОБЪЕКТА FUNCTION

Cоответствует числу аргументов, ожидаемых функцией. Это значение не включает в себя rest параметры (...) и только включает параметры перед первым со значением по умолчанию. В отличие от этого свойства, свойство length объекта arguments, который является локальным для функции и предоставляет количество аргументов, реально переданных в функцию. Свойство Function.length доступно только для чтения.

☑️ cookieStore

Работа над cookie на чистом JavaScript ужасно неудобна, так, как document.cookie представляет собой не объект, а строку в специальном формате, для манипуляций с которой часто нужны дополнительные функции или библиотеки.
Но, с предложеним по внедрению API асинхронных файлов cookie в скрипты и ​​сервис-воркеры работа над cookie станет намного удобнее.
cookieStore уже работает в Chrome начиная с 87 версии!

☑️ TIPS AND TRICKS #14

Разбить строку несколькими разделителями одновременно можно используя регулярное выражение вместе с методом split().

☑️ 9 СПОСОБОВ ПРИМЕНЕНИЯ …SPREAD

Данные способы применения spread оператора могут помочь в решении множества проблем в JavaScript.

☑️ IF-ELSE | SWITCH-CASE | Object

Альтернативный способ организации длинных цепочек условных выражений. Особенно хорошо применимо в Redux приложениях.

☑️ “true” / “false” В ЛОГИЧЕСКОЕ ЗНАЧЕНИЕ

4 способа преобразовать строку в логическое значение.

☑️ ТРИ ВАРИАНТА ИСПОЛЬЗОВАНИЯ ОПЦИОНАЛЬНОЙ ЦЕПОЧКИ

Оператор ?. проверяет левую часть выражения на равенство null/undefined, и продолжает дальнейшее вычисление, только если это не так.

Можно использовать как:

obj?.prop
obj?.[prop]
obj.method?.()

☑️ ЗНАЧЕНИЯ URL ДЛЯ КУРСОРА CSS

Позволяет указывать произвольные изображения в качестве курсоров мыши. Ограничение размера курсора 128 × 128 пикселей. Однако, следует ограничиться размером 32 × 32 для максимальной совместимости.

☑️ СВОЙСТВО all В CSS

Универсальное свойство, которое сбрасывает все значения свойств в исходные или наследуемые.
Применимо, чтобы разрешить сброс стилей на уровне компонентов, так как иногда гораздо проще начать создание стиля с нуля, чем бороться со всем, что уже есть.

☑️ CSS СВОЙСТВО writing-mode

Устанавливает горизонтальное или вертикальное положение текста также как и направление блока.

Доступные значения:
writing-mode: horizontal-tb | horizontal-bt | vertical-rl | vertical-lr;

Код доступен по ссылке.

☑️ TIPS AND TRICKS #15

Используя spread оператор, можно опционально добавлять свойства к объекту.

☑️ position: fixed + transform

C position: fixed, элемент выбивается из обычного потока документа, и для него в макете страницы не создается пространство. Он позиционируется относительно viewport, и не меняет своего положения при прокрутке веб-страницы. Это позволяет размещать такие элементы, как всплывающие окна, рядом с компонентом, который его активирует.

Однако, есть особенность, которую нужно учитывать:

Если у элемента установлено одно из этих свойств: transform/perspective/filter дочерние элементы с position:fixed начинают отсчитывать свое расположение от него, а не от вьюпорта. Пример по ссылке.

☑️ РАЗНИЦА МЕЖДУ escape(), encodeURI(), encodeURIComponent()

Разбираемся какой способ использовать при кодировании строки запроса для отправки на веб-сервер.

☑️ INTERNATIONALIZATION & LOCALIZATION

Форматирование валюты с встроенным Intl API.

☑️ Array.prototype.at()

Метод принимает число и возвращает элемент по этому индексу с учетом положительных и отрицательных чисел. Отрицательные целые отсчитываются с конца массива.

⚠️ Experimental. Находится на стадии согласования.

☑️ CSS Псевдо-класс :focus-within

Cоответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе.