javascript-algorithms

Этот репозиторий содержит JavaScript-примеры многих популярных алгоритмов и структур данных.

#GitHub

⚙️ CSS в 2025: какие фишки теперь доступны?

Краткий обзор новых возможностей CSS, которые стали поддерживаться в современных браузерах в 2024 году. Без теории — только список фич, которые стоит изучить и применять уже сейчас.

#Полезное

Broken Glass Effect

Сцена с эффектом сломанного стекла в месте клика.

Как работает 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 делает работу с динамическими данными в разметке проще и чище!

Button with tooltip hover timing feedback

Панель плеера с подсказками при наведении

Neuro Noise (GLSL Shader)

Интерактивный фон с эффектом при перемещении курсора

developer-roadmap

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

Цель этих дорожных карт — дать вам представление о перспективе и направить вас, в случае замешательства, куда двигаться дальше, а не призывать вас выбирать то, что модно. Вы должны понять, почему один инструмент лучше подходит для некоторых случаев, чем другой, и помнить, что модный и современный никогда не означает лучший для работы.

#GitHub

Универсальный подход к адаптивному веб-дизайну интерфейсов Stretch, Scale, Switch (SSS)

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

light/dark mode

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

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

Gooey SVG Filter Button

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