Frontender Libs - обзор библиотек JS / CSS

Событийная модель браузера

Почему в реализации хука для отслеживания внешних кликов предпочтительно использовать событие mousedown вместо click?

Забыли? Вернитесь к посту от 25.08.2025.

👉 @sWebDev

Color Thief

Библиотека Color Thief извлекает цветовую палитру из изображений. Она содержит методы для получения доминирующего цвета или набора репрезентативных оттенков. Инструмент также будет полезен для динамической стилизации интерфейса.

👉 @sWebDev

Decoder Text Animation

Анимация текста с эффектом декодера на GSAP.

👉 @sWebDev

Angular повзрослел — и лучшее ещё впереди

За Angular долгое время тянулся шлейф репутации сложного и многословного фреймворка. Статья рассказывает, как недавние нововведения, такие как standalone-компоненты, Signals и новый синтаксис для потоков управления, изменили эту ситуацию. Автор показывает, почему современный Angular стал значительно проще и дружелюбнее к разработчику.

👉 @sWebDev

Whimsical SVG hover animation

Анимация SVG-контура при наведении на GSAP.

👉 @sWebDev

Bliss

Библиотека содержит набор легковесных хелперов, делающих работу с DOM на чистом JavaScript более лаконичной. Она расширяет нативные элементы новыми методами для использования синтаксиса в стиле jQuery без дополнительных зависимостей и обёрток.

👉 @sWebDev

Кто вы в этой сцене?

👍 – Джун.

❤️ – Мидл.

🤔 – Сеньор.

👉 @sWebDev | #юмор

Heart Animation

Анимация частиц в форме сердца на Three.js и GSAP.

👉 @sWebDev

Адаптивный интерфейс

Хук useMediaQuery отслеживает media-запросы для адаптации интерфейса. Для корректной работы в SSR, где объект window недоступен и нельзя определить размер экрана, хук принимает начальное значение (defaultValue). Оно используется при рендеринге на сервере, а после гидратации на клиенте состояние обновляется до реального.

import { useState, useEffect } from 'react';

function useMediaQuery(query: string, defaultValue = false) {
  const [matches, setMatches] = useState(defaultValue);

  useEffect(() => {
    const mediaQueryList = window.matchMedia(query);
    
    const listener = (event: MediaQueryListEvent) => setMatches(event.matches);

    // Устанавливаем начальное значение после монтирования
    setMatches(mediaQueryList.matches);
    
    mediaQueryList.addEventListener('change', listener);
    return () => mediaQueryList.removeEventListener('change', listener);
  }, [query]);

  return matches;
}

👉 @sWebDev

Ваше первое резюме тоже выглядело беспомощно?

👍 – Очень.

❤️ – Оно до сих пор такое.

🤔 – Нет, сразу было норм.

👉 @sWebDev | #юмор

Поведение при отказе в доступе

Что отобразит прокси-компонент для контроля доступа, если у пользователя нет требуемой роли?

Забыли? Вернитесь к посту от 18.08.2025.

👉 @sWebDev

Chocolat

Chocolat — адаптивная лайтбокс-галерея для изображений. Она позволяет создавать всплывающие галереи с поддержкой навигации и полноэкранного режима.

👉 @sWebDev

Spooky Spectral Ghost

Интерактивная сцена с призраком и спектральными эффектами на Three.js.

👉 @sWebDev

Прощай, Zone.js: ускоряем Angular с помощью Signal API

Механизм Zone.js в Angular часто приводит к лишним проверкам и падению производительности из-за глобального отслеживания изменений. Статья разбирает, как новый Signal API и Zoneless-подход решают эту проблему. На примерах и замерах производительности показывается, как точечная реактивность сигналов устраняет избыточные перерисовки и ускоряет приложение.

👉 @sWebDev

ThreeJS Shadow

3D-сцена с интерактивными тенями от статуй Моаи на Three.js.

👉 @sWebDev

👩‍💻 Всем программистам посвящается!

Вот 17 авторских обучающих IT каналов по самым востребованным областям программирования:

Выбирай своё направление:

👩‍💻 Frontend — t.me/frontend_ready
📱 JavaScript — t.me/javascript_ready
👩‍💻 Backend — t.me/backend_ready
📱 GitHub & Git — t.me/github_ready
👩‍💻 Python — t.me/python_ready
🤔 InfoSec & Хакинг — t.me/hacking_ready
🖥 SQL & Базы Данных — t.me/sql_ready
🤖 Нейросети — t.me/neuro_ready
👩‍💻 C/C++ — https://t.me/cpp_ready
👩‍💻 C# & Unity — t.me/csharp_ready
👩‍💻 Java — t.me/java_ready
👩‍💻 Linux — t.me/linux_ready
🖼️ DevOps — t.me/devops_ready
📖 IT Книги — t.me/books_ready
👩‍💻 Весь IT — t.me/it_ready
👩‍💻 Bash & Shell — t.me/bash_ready
🖥 Design — t.me/design_ready

📌 Гайды, шпаргалки, задачи, ресурсы и фишки для каждого языка программирования!

MinDom

Библиотека MinDom предоставляет легковесный набор утилит для манипуляций с DOM и управления событиями. Она будет полезна в проектах, где требуется базовое взаимодействие с DOM без подключения тяжёлых фреймворков.

👉 @sWebDev

Похоже на ваш карьерный путь?

👍 – 100%.

❤️ – Мой был еще хуже.

🤔 – У меня еще не началась карьера.

👉 @sWebDev | #юмор