☑️ 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()Array.prototype.at()

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

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

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

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

☑️ ССЫЛКИ НА ПОЧТУ, SMS И НОМЕР ТЕЛЕФОНА

С веб-страницы, вы можете открыть приложение для отправки SMS/EMAIL(при этом контент можно предзаполнить) или позвонить при помощи uri-схем.

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

Указывает, можно ли пользователю изменять размеры блока.
Применяется с к любому элементу (не только к textarea), у которого свойство overflow отличается от visible.