Сниппеты: Фронтенд

JS-обёртка для reachGoal: проверка загрузки ym, защита от ошибок и блокировщиков, безопасные параметры и пример отслеживания кликов через data-атрибуты.

Как включить _ym_debug для Яндекс.Метрики, увидеть отправку целей и хитов в консоли или панели отладки, и быстро найти причину “цель не срабатывает”.

Краткий обзор ключевых изменений jQuery 4.0: поддержка браузеров, CSP/Trusted Types, изменения Ajax и событий, удалённые API и практичный чек-лист миграции.

Когда выполнять запросы параллельно, а когда последовательно. Примеры с Promise.all и зависимыми запросами.

Отмена зависших запросов через AbortController: таймауты, безопасная очистка, обработка AbortError. Готовая функция fetchWithTimeout.

Повторить запрос несколько раз с паузой, которая увеличивается после каждой неудачи

async/await — это удобный способ работать с промисами без леса .then()

async/await — это современный синтаксис для работы с асинхронным кодом на основе промисов

Иногда, чтобы предотвратить поломку функционала сайта, стоит добавить резервную (fallback) загрузку из внешнего источника

Способ проверить поддержку WebP с помощью JavaScript

Eruda – легковесная JavaScript-библиотека, которая добавляет на веб-страницу консоль для отладки

При нажатии на такую закладку браузер выполнит указанный код на текущей странице

Debounce-функция позволяет «сгладить» частые вызовы определённой функции, вызывая её лишь после того, как поток событий прекратится на заданный интервал времени

Это способ разделения кода на отдельные файлы, каждый из которых можно импортировать в другие модули или в основной файл приложения

Решение заключается в использовании CSS для масштабирования виджета

Предоставляет множество опций для создания слайдеров, каруселей, галерей и даже сложных интерактивных интерфейсов.

Разрешения экрана и приблизительный объём данных, используемых в минуту при просмотре видео в выбранном качестве

Эти уведомления могут быть показаны пользователю в любой момент, независимо от того, активно ли окно браузера, в котором открыто веб-приложение

Resize Observer API — это браузерный API, который позволяет вам отслеживать изменения размера элементов DOM

Web Worker — это веб-технология, которая позволяет запускать скрипты на фоне, независимо от основных скриптов веб-страницы

Это полезно, когда требуется выполнять определённые действия или изменять поведение страницы, основываясь на состоянии видимости

Geolocation API может быть использован для определения географического положения пользователя

Акселерометр — это датчик, который измеряет ускорение движения устройства в трёх осях: оси X, Y и Z

Некоторые Web API не могут быть использованы без взаимодействия пользователя со страницей

API позволяет распознавать человеческую речь и преобразовывать её в текст

API SpeechSynthesis позволяет синтезировать речь из текста

Eсли операция вызывает исключение QuotaExceededError, это означает, что размер хранилища был превышен

Проверка доступности хранилища, чтобы обработать ситуацию, когда эти функции отключены или недоступны

Это объект веб-хранилища, доступный в браузере, который позволяет хранить данные в рамках сессии

Это объект, встроенный в веб-браузеры, который позволяет веб-сайтам хранить информацию на компьютере пользователя