Фронтенд Гайд
7.26K subscribers
614 photos
307 videos
283 links
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов!

Все представлено в виде готового кода, бери и юзай в своем проекте.

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
light/dark mode

Анимированное переключение светлой и темной темы
🔥4😁3
Что делает 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() удобно использовать, если внутри родительского элемента есть вложенные кликабельные элементы, но их события не должны влиять на родителя.
This media is not supported in your browser
VIEW IN TELEGRAM
Gooey SVG Filter Button

Анимированная кнопка с эффектом при наведении
Laravel 12. Что нового?

Laravel 12 уже здесь! Основной акцент — плавное обновление без правок кода. Поддержка до 2027 года, два года обновлений и исправлений. Разбираем, что нового и насколько легко обновиться.
This media is not supported in your browser
VIEW IN TELEGRAM
Scroll-Driven Glow Cards

Светящиеся карточки, меняющие цвет при скролле
Выучить Frontend бесплатно и быстро вообще реально?

Ещё как ДА! Нашли для вас канал, в котором каждый день публикуют полезные статьи, разборы интервью, готовые приложения и код.

С полного нуля дойти до оффера Джуна можно всего за месяц, а за полгода до Мидла.

Сэкономь время и деньги: Frontend
1👍1😁1
React и графики: 8 библиотек для визуализации данных

Какая библиотека лучше для графиков в React? Разбираем Recharts, Visx, Nivo, ECharts и другие: их возможности, плюсы и минусы. Поможем выбрать оптимальный инструмент для ваших задач.
Каково изначальное значение 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, выявляя глубину технического мышления.

#Полезное
Какое значение justify-content расположит элементы равномерно с одинаковыми отступами между ними и от краёв контейнера?
Anonymous Quiz
35%
justify-content: space-around;
28%
justify-content: space-between;
34%
justify-content: space-evenly;
4%
justify-content: center;