❓ Зачем используется метод find() в JavaScript и когда его применять?
Метод
✅ Пример:
📌 В этом примере
Метод
find()
возвращает первый элемент массива, который удовлетворяет заданному условию. Это удобно, когда нужно найти одно подходящее значение, а не все.✅ Пример:
const users = [
{ name: "Alice", isAdmin: false },
{ name: "Bob", isAdmin: true },
{ name: "Charlie", isAdmin: false }
];
const adminUser = users.find(user => user.isAdmin);
console.log(adminUser); // { name: "Bob", isAdmin: true }
📌 В этом примере
find()
вернёт объект пользователя Bob, так как он первый в массиве с isAdmin: true
.find() удобно использовать при поиске по коллекциям, например, чтобы получить конкретный объект по условию (email, ID, статус и т.д.). Это сокращает код и избавляет от ручного перебора, особенно при работе со сложными структурами.
❤5
Что называют "layout shift" (внезапный сдвиг макета) в контексте фронтенд-разработки?
Anonymous Quiz
24%
Смещение DOM-элементов, вызванное изменением маршрута
68%
Изменение позиции элементов на странице после загрузки, без взаимодействия пользователя
5%
Переход с одного CSS-фреймворка на другой
3%
Анимация при переключении состояния компонентов
This media is not supported in your browser
VIEW IN TELEGRAM
Sphere Packing
Интерактивная сцена с шарами
Интерактивная сцена с шарами
Что описывает понятие Critical Rendering Path в браузере?
Anonymous Quiz
20%
Путь загрузки и исполнения всех JavaScript-файлов
59%
Последовательность шагов от загрузки HTML до полной отрисовки страницы
12%
Алгоритм оптимизации маршрутов в одностраничных приложениях
9%
Специальный механизм lazy loading для изображений
This media is not supported in your browser
VIEW IN TELEGRAM
Cards with inverted border-radius
Карточки товаров с интересным решением для кнопки
Карточки товаров с интересным решением для кнопки
Что такое делегирование событий (event delegation) и зачем его используют?
Anonymous Quiz
24%
Передача события от родителя к потомкам для оптимизации
72%
Назначение одного обработчика на общий родительский элемент вместо множества на дочерние
2%
Автоматическая обработка событий через фреймворк
2%
Механизм распространения событий от сервера к клиенту
Для чего используется заголовок Content Security Policy (CSP) в веб-разработке?
Anonymous Quiz
6%
Для ускорения загрузки ресурсов через CDN
13%
Для запрета использования cookies в JavaScript
11%
Для управления доступом к API браузера
70%
Для ограничения источников, с которых можно загружать и выполнять ресурсы
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll Trigger Image Zoom
Страница с эффектом зума при скролле
Страница с эффектом зума при скролле
❤1⚡1
❓ Зачем используется метод filter() в JavaScript и когда его применять?
Метод
✅ Пример:
📌 В этом примере
Метод
filter()
создаёт новый массив, содержащий все элементы исходного массива, которые удовлетворяют заданному условию. Это удобно, когда нужно отфильтровать нужные данные без изменения оригинала.✅ Пример:
const users = [
{ name: "Alice", active: true },
{ name: "Bob", active: false },
{ name: "Charlie", active: true }
];
const activeUsers = users.filter(user => user.active);
console.log(activeUsers);
// ➜ [{ name: "Alice", active: true }, { name: "Charlie", active: true }]
📌 В этом примере
filter()
возвращает массив только активных пользователей.filter() удобно использовать при построении списков, работе с таблицами, селекторами, чекбоксами и валидацией — везде, где важна фильтрация по условиям. Код становится лаконичным, декларативным и легко читаемым.
В чём ключевое отличие между reflow и repaint при отрисовке страницы браузером?
Anonymous Quiz
14%
Reflow обновляет стиль, repaint — структуру DOM
72%
Reflow — это обновление размеров и положения элементов, repaint — только внешнего вида
8%
Repaint выполняется перед reflow
5%
Они работают только при использовании Canvas API
This media is not supported in your browser
VIEW IN TELEGRAM
Fancy wipe
Стильный текст с анимированным появлением
Стильный текст с анимированным появлением
Какой из вариантов наиболее точно отражает различия между localStorage, sessionStorage и cookies?
Anonymous Quiz
2%
Все три удаляются при закрытии вкладки
80%
Только cookies доступны на сервере, localStorage и sessionStorage — нет
9%
localStorage и sessionStorage передаются с каждым HTTP-запросом
10%
sessionStorage хранит данные дольше, чем localStorage
👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Firefly Button
Кнопка с анимированным эффектом при наведении
Кнопка с анимированным эффектом при наведении
Какую роль выполняет event loop в JavaScript
Anonymous Quiz
2%
Обрабатывает ошибки во время выполнения
19%
Выполняет асинхронные задачи параллельно
68%
Координирует выполнение кода, колбэков и событий, управляя очередью
11%
Запускает цикл отрисовки в DOM
⚡1