Whimsical SVG hover animation

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

👉 @sWebDev

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

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

👉 @sWebDev

Decoder Text Animation

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

👉 @sWebDev

Color Thief

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

👉 @sWebDev

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

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

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

👉 @sWebDev

Хотели в детстве быть программистом?

👍 – Да, мечтал.

❤️ – Нет, жизнь сама заставила.

🤔 – Я до сих пор не понял, кем хотел стать.

👉 @sWebDev | #юмор

Декларативная условная стилизация

Для условного применения inline-стилей в React часто создают объект стилей с помощью if или тернарных операторов. Существует более лаконичный, декларативный подход с использованием spread-оператора (...) и логического оператора &&.

Механизм основан на том, что выражение условие && { стиль: 'значение' } вернет либо объект стилей, если условие истинно, либо false, если ложно. React при разворачивании (spread) falsy-значений (таких как false, null или undefined) внутри объекта просто игнорирует их, не добавляя никаких свойств.

import React from 'react';

function AlertMessage({ text, isActive, isUrgent }) {
  const baseStyles = {
    margin: '10px 0',
    padding: '15px',
    borderRadius: '4px',
    transition: 'all 0.2s ease-in-out',
  };

  const finalStyles = {
    ...baseStyles,
    ...(isActive && { background: '#f0f0f0' }),
    ...(isUrgent && { background: '#ffdddd', border: '1px solid red' }),
  };

  return <div style={finalStyles}>{text}</div>;
}

👉 @sWebDev

Infinite Canvas

Интерактивный бесконечный холст с drag-and-drop на Canvas API и JavaScript.

👉 @sWebDev

Делали так?

👍 – Пару раз прокатило.

❤️ – Я даже джуном прикинуться не могу.

👉 @sWebDev | #юмор

Curtains.js

Библиотека использует WebGL для превращения DOM-элементов, таких как изображения и видео, в интерактивные 3D-плоскости. Она значительно упрощает работу с шейдерами для добавления к обычным HTML-элементам сложных визуальных эффектов.

👉 @sWebDev

Light and shadow

3D-сцена с анимированной гирляндой и динамическими тенями на GSAP.

👉 @sWebDev

Создание сложных форм на Vue

Разметка для больших форм с десятками полей быстро становится громоздкой и трудной в поддержке. Статья показывает, как решить эту проблему в Vue с помощью компонентного подхода. Разбирается паттерн, где структура формы определяется в JSON, а поля генерируются динамически через v-for и переиспользуемый компонент ввода.

👉 @sWebDev

Draggable & Flip Sortable Grid

Сортируемая сетка с перетаскиванием элементов на GSAP.

👉 @sWebDev

LeaderLine

Библиотека предназначена для отрисовки SVG-линий между произвольными DOM-элементами. Инструмент автоматически рассчитывает путь и положение линии, обновляя их при прокрутке или изменении размеров страницы. Подойдет для создания визуальных связей, аннотаций или простых диаграмм в интерфейсе.

👉 @sWebDev

Жизненный цикл

В какой момент жизненного цикла компонента флаг в хуке useIsMounted устанавливается в значение false?

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

👉 @sWebDev