☑️ 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ообщения можно передавать между вкладками, окнами браузера и фреймами.

☑️ ПРЕОБРАЗОВАНИЕ ПСЕВДОМАССИВА В МАССИВ

Псевдомассив — это объект, который структурно похож на массив. То есть у него есть числовые свойства (индексы) и свойство length. Главным отличием является наследование псевдомассива (он не наследует Array). Разбираемся с вариантами конвертации.

☑️ ИЗМЕНЕНИЕ URL БЕЗ ПЕРЕЗАГРУЗКИ СТРАНИЦЫ

HTML5 API history дает нам больше контроля над историей браузера. У нас есть возможность добавить запись в историю, или изменить URL в адресной строке без перезагрузки страницы.
Это делает возможным разработку тяжелых, одностраничных приложений без использования hash-роутеров, также позволяет нам оптимизировать приложения для SEO.

☑️ Intl API | RelativeTimeFormat

Предоставляет возможность форматировать даты и отметки времени в удобночитаемый формат. Поддерживает множество языков. Вторым аргументом можно указать несколько значений: second, minute, hour, day, week, month, quarter, year.

☑️ СГЕНЕРИРОВАТЬ CПИСОК С ЧИСЛАМИ В JavaScript

Иногда, нам нужно сгенерировать много случайных данных.
Красивый способ сделать это в одну строку кода.

☑️ HTMLElement.dataset

Открывает возможности как для чтения, так и для изменения всех пользовательских дата-атрибутов.

При извлечении:

✔ удаляется префикс data- (вместе с дефисом);
✔ имя атрибута переводится в camelCase;

☑️ ИЗМЕНЕНИЕ ПОВЕДЕНИЯ ФОРМЫ АТРИБУТАМИ КНОПОК

Атрибуты formaction, formmethod, formnovalidate у button позволяют преопределить action method и validate у самой формы.
Таким образом можно определять различное поведение формы в зависимости от нажатой кнопки.

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

Смотреть по ссылке: https://www.youtube.com/watch?v=ma7rgLZDuZU&t=2s

Заранее спасибо всем, кто подпишется, поддержит лайком и комментарием!

☑️ TIPS AND TRICKS #18

Вы можете назвать группы захвата для регулярных выражений в JavaScript.
Определите именованный захват в угловых скобках <>, и они будут возвращены в .groups.

☑️ TIPS AND TRICKS #19

Декларативное извлечение ключей/значений из объекта с дальнейшим преобразованием.

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

Вы или ваши знакомые собираются пойти на курсы программирования?
✅ Покажите им это видео:

https://www.youtube.com/watch?v=fsi_q5CxqY0

Заранее спасибо всем, кто подпишется, поддержит лайком и комментарием!

☑️ TIPS AND TRICKS #20

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

☑️ Замыкания в JavaScript за 1 минуту

Самое простое объяснение + реальный пример использования.

Как вам такой формат постов?

☑️ ОПЕРАТОРЫ ЛОГИЧЕСКОГО ПРИСВАИВАНИЯ

В JavaScript теперь есть возможность комбинировать логические операции и операцию присваивания с помощью новых операторов:
&&=, ||= и ??=
Ранее составные операторы можно было использовать только с математическими и побитовыми операциями.

☑️ Разница между строгим и нестрогим сравнением в JavaScript за 1 минуту.

Помните, что разница возникает лишь при сравнении разных типов.
При сравнении одного типа операторы работают идентично.

А что вы используете == 🆚 === ?

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

Это довольно часто используемая операция, но у нас нет встроенного в язык функционала, который мог бы определить, есть ли в объекте какие-либо значения.
Пишем собственную реализацию в несколько строк.

☑️ ИМПОРТ JSON ФАЙЛА НАПРЯМУЮ ИЗ JavaScript в браузере

Множество веб приложений используют json файлы для получения конфигурации приложения, версионирования или других целей. Сегодня в Google Chrome последней версии была добавлена возможность импортировать .json файлы напрямую из .js модулей.

Когда разработчик хочет импортировать модуль JSON, он должен использовать утверждение импорта, assert: { type: 'json' } в асинхронном варианте или assert { type: 'json' } в обычном импорте, чтобы указать, что это должен быть JSON.
Импорт не удастся, если тип MIME, полученный из сети, не соответствует ожидаемому типу application/json.