Фронтенд Гайд

Laravel 12. Что нового? Laravel 12 уже здесь! Основной акцент — плавное обновление без правок кода. Поддержка до 2027 года, два года обновлений и исправлений. Разбираем, что нового и насколько легко обновиться.

Gooey SVG Filter Button Анимированная кнопка с эффектом при наведении

❓ Что делает 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() удобно использовать, если внутри родительского элемента есть вложенные кликабельные элементы, но их события не должны влиять на родителя.

❓ Что делает 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() удобно использовать, если внутри родительского элемента есть вложенные кликабельные элементы, но их события не должны влиять на родителя.

light/dark mode Анимированное переключение светлой и темной темы

Универсальный подход к адаптивному веб-дизайну интерфейсов Stretch, Scale, Switch (SSS) Создание адаптивных версий интерфейса это боль многих дизайнеров и, как следствие, разработчиков. Разные экраны, хаос в макетах, непонимание между специалистами… Но есть способ сделать адаптацию проще, предсказуемее и удобнее для всех. В этой статье я предложу вам подход, который сократит количество макетов и сделает интерфейс аккуратным на любом устройстве. Готовы взглянуть на адаптацию под новым углом?

developer-roadmap Зашли в тупик или нуждаетесь в совете как начать? Или запутались между фреймворками и инструментами? Тогда этот репозиторий для вас. Владелец проделал отличную работу как для новичков, так и для экспертов. Вы получите общее представление о том, где находитесь и куда вам нужно двигаться. Цель этих дорожных карт — дать вам представление о перспективе и направить вас, в случае замешательства, куда двигаться дальше, а не призывать вас выбирать то, что модно. Вы должны понять, почему один инструмент лучше подходит для некоторых случаев, чем другой, и помнить, что модный и современный никогда не означает лучший для работы. #GitHub

Neuro Noise (GLSL Shader) Интерактивный фон с эффектом при перемещении курсора

Button with tooltip hover timing feedback Панель плеера с подсказками при наведении

Как работает dataset в JavaScript? Свойство dataset позволяет получать и изменять пользовательские атрибуты data-* в HTML-элементах. ✅ Пример:

<button id="btn" data-user-id="42">Click me</button>

<script>
  const btn = document.getElementById("btn");
  console.log(btn.dataset.userId); // "42"

  btn.dataset.userId = "99"; // Изменение значения
</script>

🔹 Зачем нужно? • Позволяет хранить данные прямо в HTML. • Удобно для передачи информации в JavaScript. • Избавляет от необходимости использовать скрытые инпуты или классы. ⚡️ dataset делает работу с динамическими данными в разметке проще и чище!

⚙️ JavaScript Set и Map: За пределами массивов и объектов Как эффективно обрабатывать уникальные значения и пары ключ-значение, избегая принудительного приведения типов и потери производительности? #Полезное

free-programming-books Один из самых популярных и рейтинговых репозиториев на Github, «бесплатные книги по программированию» содержит не только книги, как следует из названия, но и потрясающие бесплатные онлайн-курсы, подкасты/скринкасты. А также интерактивные ресурсы по программированию, наборы задач, соревновательное программирование и шпаргалки. И самое приятное — все это доступно на огромном количестве различных языков. #GitHub

Multiple Glow effects Button Анимированная кнопка с различными эффектами свечения