❓ Что делает
Метод
✅ Пример:
📌 При клике на кнопку сработает только
event.stopPropagation() в JavaScript и когда его использовать?Метод
event.stopPropagation() останавливает всплытие события вверх по дереву DOM. Это полезно, когда нужно предотвратить выполнение обработчиков на родительских элементах.✅ Пример:
<div onclick="alert('Div clicked!')">
<button onclick="event.stopPropagation(); alert('Button clicked!')">Click me</button>
</div>📌 При клике на кнопку сработает только
alert('Button clicked!'), но alert('Div clicked!') не появится, так как всплытие остановлено.stopPropagation() удобно использовать, если внутри родительского элемента есть вложенные кликабельные элементы, но их события не должны влиять на родителя.Для чего используется debounce в JavaScript?
Anonymous Quiz
21%
Для выполнения функции строго через определённый интервал
12%
Для автоматического удаления обработчиков событий
59%
Для предотвращения многократного вызова функции за короткий промежуток времени
8%
Для ускорения выполнения анимаций
This media is not supported in your browser
VIEW IN TELEGRAM
Gooey SVG Filter Button
Анимированная кнопка с эффектом при наведении
Анимированная кнопка с эффектом при наведении
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll-Driven Glow Cards
Светящиеся карточки, меняющие цвет при скролле
Светящиеся карточки, меняющие цвет при скролле
Каково изначальное значение CSS свойства background-origin?
Anonymous Quiz
20%
border-box
9%
padding-box
32%
inherit
24%
content-box
15%
unset
This media is not supported in your browser
VIEW IN TELEGRAM
🫠 Fluid Simulation
Сцена с интересной симуляцией жидкости с текстом.
Сцена с интересной симуляцией жидкости с текстом.
❓ Что делает
Метод
📌 При клике на ссылку переход не произойдет, так как действие браузера заблокировано.
event.preventDefault() в JavaScript и когда его использовать?Метод
event.preventDefault() отменяет стандартное поведение элемента, не прерывая обработку других событий. Это полезно для управления формами, ссылками и другими интерактивными элементами.📌 При клике на ссылку переход не произойдет, так как действие браузера заблокировано.
preventDefault() удобно использовать для валидации форм перед отправкой, отключения контекстного меню (contextmenu) и кастомного поведения кнопок и ссылок.This media is not supported in your browser
VIEW IN TELEGRAM
Idea Form
Анимированная форма для ввода с появлением при нажатии
Анимированная форма для ввода с появлением при нажатии
⚙️ Одна React-задача, демонстрирующая ключевые навыки на собеседовании
Разбираем небольшую, но показательную задачу: компонент, загружающий данные по username. Оцениваем работу с хуками, асинхронностью, ошибками и race conditions, выявляя глубину технического мышления.
#Полезное
Разбираем небольшую, но показательную задачу: компонент, загружающий данные по username. Оцениваем работу с хуками, асинхронностью, ошибками и race conditions, выявляя глубину технического мышления.
#Полезное
Какое значение justify-content расположит элементы равномерно с одинаковыми отступами между ними и от краёв контейнера?
Anonymous Quiz
35%
justify-content: space-around;
28%
justify-content: space-between;
34%
justify-content: space-evenly;
4%
justify-content: center;
🔥 Зачем нужен атрибут defer в теге
Атрибут
✅ Как это работает?
🔹 Скрипт загружается параллельно с HTML
🔹 Выполняется в порядке объявления
🔹 Не блокирует отрисовку страницы
⚠️ Если скрипт зависит от DOM, defer — лучший вариант, так как он гарантирует, что HTML уже загружен.
<script>?Атрибут
defer позволяет загружать скрипты в фоновом режиме, но выполнять их только после полной загрузки HTML. Это ускоряет рендеринг страницы и предотвращает блокировку контента.✅ Как это работает?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Defer Example</title>
<script src="script.js" defer></script> <!-- Скрипт выполнится после загрузки HTML -->
</head>
<body>
<h1>⚡️ Быстрая страница!</h1>
</body>
</html>
🔹 Скрипт загружается параллельно с HTML
🔹 Выполняется в порядке объявления
🔹 Не блокирует отрисовку страницы
⚠️ Если скрипт зависит от DOM, defer — лучший вариант, так как он гарантирует, что HTML уже загружен.
⚡2
Какое значение justify-content расположит элементы равномерно с одинаковыми отступами между ними и от краёв контейнера?
Anonymous Quiz
25%
justify-content: space-around;
24%
justify-content: space-between;
48%
justify-content: space-evenly;
3%
justify-content: center;