☑️ 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оответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе.

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

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

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

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

☑️ НОВОЕ ВИДЕО НА КАНАЛЕ 🎬

Пишем веб-приложение на React/Mobx/Mobx-state-tree.
Гоу смотреть: https://youtu.be/o2PdTXCkoUo
Заранее спасибо всем, кто подпишется, поддержит лайком и комментарием!

🔥🔥🔥🔥🔥

☑️ document.designMode

Данное свойство устанавливает или возвращает, доступен ли документ для редактирования или нет.

Значение по умалчанию - “off”.
Чтобы включить режим редактирования нужно указать:

document.designMode = “on”

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

✔ тестирования разметки без изменения кода
✔ создания текстовых редакторов в браузере

☑️ TIPS AND TRICKS #16

Cериализуeм данные из формы в параметры запроса без сторонних библиотек одной строкой кода.

☑️ NUMBER IS INTEGER

В JavaScript и целые числа, и с плавающей запятой относятся к одному и тому же числовому типу - number.
Чтобы определить целое ли число можно использовать данный метод.

☑️ ИМИТИРУЕМ ПОЛЬЗОВАТЕЛЬСКИЕ СОБЫТИЯ В JavaScript

Реализация функции, которая запускает событие для элемента, при необходимости передавая пользовательские данные.

☑️ ЗАПОЛНИТЕЛЬ ДЛЯ ПУСТЫХ ЭЛЕМЕНТОВ

Простой способ добавить лоадер или текст, пока загружаются данные используя только лишь CSS.

P.S: Элемент считается пустым, если у него нет дочерних элементов (узлов) или текстового содержимого (даже пробелов).

☑️ TIPS AND TRICKS #17

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

☑️ CSS :is() SELECTOR

:is() это функция псевдо-класс CSS принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке.
Это полезно при переписи огромных селекторов в более компактную форму.

☑️ DOMParser

Предназначен для парсинга «сырой» строки HTML, XML, SVG в объект.
Всего форматов в которые мы можем преобразовать строку три:
text/html
application/xml
image/svg+xml

☑️ ОПРЕДЕЛЯЕМ ЧТО Caps Lock ВКЛЮЧЕН

Метод KeyboardEvent.getModifierState() возвращает текущее состояние указанной клавиши-модификатора: true, если модификатор активен. Список всех модификаторов доступен по ссылке.

☑️ ДОБАВЛЯЕМ ТАЙМАУТ К ПРОМИСУ

Иногда нам нужно установит таймаут на выполнение запроса или другого асинхронного действия.
Мы можем сделать это связкой Promise.race + setTimeout.

☑️ Broadcast Channel API

Между страницами где будет создан объект BroadcastChannel и указан точно такой же канал можно обмениваться сообщениями.
Cообщения можно передавать между вкладками, окнами браузера и фреймами.