This media is not supported in your browser
VIEW IN TELEGRAM
Text-Animation-test
Простая сцена с анимированным текстом
Простая сцена с анимированным текстом
❤1
Что происходит при использовании фазы перехвата (capturing) в обработке событий?
Anonymous Quiz
19%
Событие сначала обрабатывается на целевом элементе
23%
Событие обрабатывается от самого вложенного элемента к родителю
42%
Событие обрабатывается от родителя к целевому элементу до фазы всплытия
17%
Событие обрабатывается только один раз независимо от фазы
👍1
Что из перечисленного наиболее точно описывает reflow в контексте браузерного рендеринга?
Anonymous Quiz
19%
Пересчёт и повторный рендеринг только CSS-стилей
20%
Обновление DOM-элементов после сетевого запроса
48%
Пересчёт геометрии и позиций элементов в layout-дереве
13%
Изменение структуры DOM без визуального эффекта
This media is not supported in your browser
VIEW IN TELEGRAM
Single Keyframe Tricks
Большой набор анимированных кнопок
Большой набор анимированных кнопок
❓ Зачем используется метод
Метод
✅ Пример:
📌 В этом примере
includes()
в JavaScript и когда его применять?Метод
includes()
проверяет, содержит ли массив или строка заданное значение. Это простой способ определить наличие элемента без явного цикла или сложных проверок.✅ Пример:
const fruits = ["apple", "banana", "orange"];
const hasBanana = fruits.includes("banana");
console.log(hasBanana); // true
📌 В этом примере
includes()
возвращает true
, потому что значение "banana"
присутствует в массиве.includes() удобно использовать при валидации, фильтрации, поиске совпадений, а также при условной отрисовке в UI. Он делает код короче и читаемее по сравнению с indexOf и другими устаревшими подходами.
❤3
Что из перечисленного наиболее точно описывает микрозадачи в JavaScript?
Anonymous Quiz
19%
Это асинхронные задачи, выполняемые после всех событий
9%
Это задачи, выполняемые после каждой отрисовки кадра
71%
Это задачи, которые ставятся в очередь и выполняются сразу после текущего стека вызовов
2%
Это задачи, которые браузер исполняет только при простое
This media is not supported in your browser
VIEW IN TELEGRAM
Toggle Pill
Набор переключателей с разными стилями анимаций
Набор переключателей с разными стилями анимаций
Что из перечисленного наиболее точно описывает поведение requestAnimationFrame?
Anonymous Quiz
15%
Вызывает функцию каждые 16 мс независимо от загрузки страницы
56%
Гарантирует выполнение функции до следующего кадра браузера
18%
Работает только при наличии CSS-анимаций
10%
Блокирует основной поток до завершения рендеринга
This media is not supported in your browser
VIEW IN TELEGRAM
3D wave animation
Анимированная галерея с эффектом волны
Анимированная галерея с эффектом волны
Что из перечисленного наиболее точно описывает критический путь рендеринга (CRP) в браузере?
Anonymous Quiz
6%
Процесс сборки и упаковки JS-файлов для продакшена
57%
Последовательность шагов от загрузки HTML до отображения пикселя на экране
13%
Время между загрузкой JS и началом выполнения
24%
Обход всего DOM-дерева для инициализации всех событий
Какое из утверждений наиболее точно описывает проблему layout thrashing?
Anonymous Quiz
12%
Избыточное применение CSS-классов к элементам
12%
Повторный рендер компонента без изменения состояния
62%
Частые чередующиеся чтения и записи layout-свойств, вызывающие множественные reflow
14%
Утечка памяти при использовании большого количества DOM-элементов
This media is not supported in your browser
VIEW IN TELEGRAM
CSS-only Custom range slider
Интересный слайдер с динамичным отображением
Интересный слайдер с динамичным отображением
❓ Зачем используется метод
Метод
✅ Пример:
📌 В этом примере
some()
в JavaScript и когда его применять?Метод
some()
проверяет, удовлетворяет ли хотя бы один элемент массива заданному условию. Это удобно, когда нужно быстро узнать, есть ли подходящий элемент, не перебирая весь массив вручную.✅ Пример:
const users = [
{ name: "Alice", isAdmin: false },
{ name: "Bob", isAdmin: true },
{ name: "Charlie", isAdmin: false }
];
const hasAdmin = users.some(user => user.isAdmin);
console.log(hasAdmin); // true
📌 В этом примере
some()
вернёт true
, потому что в массиве есть хотя бы один пользователь с isAdmin: true
.some() удобно использовать для валидации, проверки доступа, поиска флагов или условий в списках. Это делает код чище, короче и более декларативным, особенно при работе с массивами объектов.
👍3
Что из перечисленного наиболее точно описывает событийную делегацию (event delegation) в JavaScript?
Anonymous Quiz
5%
Механизм, при котором обработчик событий создаётся с помощью setTimeout
74%
Приём, когда один обработчик используется на родителе для обработки событий от потомков
15%
Автоматическая передача события между двумя независимыми DOM-элементами
5%
Метод прямой подписки на события всех дочерних элементов вручную