Broadcast Channel API
Broadcast Channel API позволяет контекстам браузера (browser contexts) обмениваться данными друг с другом. К браузерным контекстам относятся такие элементы, как окно, вкладка, iframe и т.д.
По причинам безопасности контексты, обменивающиеся данными, должны принадлежать одному источнику (same origin). Один источник означает один протокол, домен и порт.
const bc = new BroadcastChannel('my-channel');
bc.addEventListener('message', у => {
// recieved message from another tab
// use e.data
});
button.addEventListener('click', () => {
bc.postMessage(input.value);
})Lazy Load Autoplaying Video
Ленивая загрузка автоматически воспроизводимых видео, которые находятся ниже первого экрана Установите preload="none" и удалите атрибут autoplay у видео, чтобы оно не загружалось по умолчанию. Затем, используя API Intersection Observer, мы можем воспроизводить видео, когда оно становится видимым в области просмотра
Page Visibility API
Определяем, когда пользователь переключает вкладки браузера и меняем favicon
Page Visibility API – это API браузера, который проверяет видимость страницы. Он помогает определять, скрыта или свернута текущая страница, и тем самым позволяет контролировать ее поведение и использование ресурсов.
Spoiler.js
Эта JS-либа позволяет добавлять на сайт спойлер-эффекты, такие же, как в Telegram.
Она называется Spoiler.js, и это очень прикольный способ оживить твой сайт.
JustGage
Эта JS либа позволяет без усилий создавать анимированные gauge-индикаторы для дашбордов. Gauge (или спидометр) – это такие индикаторы в стиле спидометра, которые используют в дашбордах для отображения скорости, производительности или прогресса.
ValueAsNumber
Свойство value у HTMLInputElement всегда возвращает строку. Поэтому для числовых полей приходится вручную преобразовывать значение в число с помощью parseInt(), parseFloat(), Number() или оператора +. Мы можем упростить это, используя valueAsNumber. Оно напрямую возвращает значение как число.
Доступ к элементам с правого конца массива
Новый метод .at() для массивов. Он делает то же самое, что и нотация [x], но по-другому обрабатывает отрицательные значения. Отрицательные значения обозначают элементы с правого конца массива. -1 дает последний элемент, -2 – предпоследний, и так далее.
Пошаговая визуализация выполнения JS-кода
Пишешь код в редакторе, двигаешь слайдер и смотришь, как движок выполняет каждую инструкцию. Очень полезно, чтобы понять что происходит «под капотом». Пробуем здесь.
Визуализатор регулярных выражений для JavaScript
Инструмент позволяет наглядно посмотреть и понять сложные регулярные выражения, представляя их в удобочитаемом и графическом формате.
Прокачка алгоритмов JS
Сайт для прокачки алгоритмов – визуальный тренажёр с пошаговым выполнением кода. 70+ алгоритмов на JavaScript, Java и C++, всё интерактивно и с наглядной визуализацией.
Desktop JS
Deno, популярный JavaScript-рантайм, теперь позволяет превращать проекты на JavaScript и TypeScript в десктопные приложения для Windows, macOS и Linux.
Можно выбрать системный WebView или встроенный Chromium-бэкенд. Более того, из коробки поддерживаются фреймворки вроде Next.js и SvelteKit.
Тренажер алгоритмов
Сайт для прокачки алгоритмов – визуальный тренажёр с пошаговым выполнением кода. 70+ алгоритмов на JavaScript, всё интерактивно и с наглядной визуализацией.