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

Как React Fiber улучшает производительность рендеринга

Когда приложение React начинает «тормозить» при больших обновлениях, проблема часто кроется в блокировке основного потока. Статья подробно объясняет, как архитектура React Fiber решает данную проблему. Разбирается, как Fiber позволяет разбивать рендеринг на части и приостанавливать его, чтобы интерфейс оставался отзывчивым. Понимание этого механизма помогает писать более производительный код.

👉 @sWebDev

Landing page with GSAP & Tailwind CSS

Анимация элементов на странице на GSAP.

👉 @sWebDev

Moveable

Наделить DOM-элементы возможностью свободного перемещения и масштабирования вручную является непростой задачей. Библиотека Moveable инкапсулирует данную сложную логику и содержит готовые инструменты для манипуляции объектами в реальном времени. Этот инструмент отлично подходит для создания интерактивных редакторов, настраиваемых дашбордов или любых приложений с drag-and-drop интерфейсом.

👉 @sWebDev

Какой вывод делаем?

👍 — Что в реальном мире иногда приходится идти на компромиссы.

❤️ — Что самый быстрый способ починить код — это его удалить.

🤔 — Что тимлид — уставший человек, которому нужна помощь и, возможно, отпуск.

👉 @sWebDev | #юмор

Pixel notepad

Интерактивный пиксельный блокнот на Draggable.js.

👉 @sWebDev

Декларативное управление подписками

Стандартная отписка от Observable в ngOnDestroy громоздка и провоцирует утечки памяти.

Пакет @angular/core/rxjs-interop предлагает более чистое решение. Оператор takeUntilDestroyed декларативно связывает жизненный цикл подписки с жизненным циклом компонента. Подписка автоматически завершится при уничтожении компонента. Важным условием его работы является вызов в инъекционном контексте, например, в конструкторе компонента.

import { Component, inject } from '@angular/core';
import { interval } from 'rxjs';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';

@Component({
  selector: 'app-news-feed',
  template: '<p>Последнее обновление: {{ time }}</p>',
  standalone: true,
})
export class NewsFeedComponent {
  time = 0;

  constructor() {
    interval(1000)
      .pipe(takeUntilDestroyed())
      .subscribe(value => {
        this.time = value;
        console.log(`Новое событие: ${value}`);
      });
  }
}

👉 @sWebDev

Какой самый тупой стереотип об айтишниках вы слышали?

👍 — «Вы же программисты, почините мне принтер/телефон/микроволновку».

❤️ — Что мы можем взломать Пентагон за 5 минут с помощью блокнота.

🤔 — Что мы зарабатываем миллионы, просто нажимая на кнопки.

👉 @sWebDev | #юмор

Композиция хуков

Какие два стандартных хука объединяет в себе useQueryState?

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

👉 @sWebDev

Pressure.js

Взаимодействие с интерфейсом часто ограничено простыми кликами. Pressure.js расширяет эти возможности, добавляя поддержку силы нажатия через Force Touch, 3D Touch и Pointer Pressure.

👉 @sWebDev

Moon Lamps

Интерактивная сцена на Ammo.js.

👉 @sWebDev

Как избежать лишних ререндеров при работе с React Context

Стандартный хук useContext часто вызывает лишние ререндеры, даже если компоненту нужна лишь часть состояния. Статья показывает, как решить эту проблему, создав собственный легковесный Store и хук с селекторами, похожий на useSelector в Redux.

👉 @sWebDev

Пазл

Реализация интерактивного пазла на GSAP.

👉 @sWebDev

Shine.js

Стандартные тени для текста выглядят статично и не добавляют интерактивности. Библиотека Shine.js оживляет их, создавая динамические тени, которые реагируют на положение курсора или ориентацию устройства.

👉 @sWebDev

Как вы используете AI-ассистентов в работе?

👍 — Для генерации бойлерплейта и решения типовых задач, но всегда проверяю и рефакторю результат.

❤️ — Копирую промпт из таски в Jira, а потом копирую ответ из ChatGPT в IDE.

🤔 — Как собеседника. Пока формулирую для нейросети четкий вопрос, сам нахожу ответ.

👉 @sWebDev | #юмор

Pick a Card

Интерактивная сцена с колодой карт на GSAP и Draggable.js.

👉 @sWebDev

Отложенное выполнение эффектов

Для эффектов, срабатывающих с задержкой после изменений, создают хук useDebouncedEffect. Он инкапсулирует логику setTimeout внутри useEffect. При обновлении зависимостей хук отменяет предыдущий таймер и устанавливает новый, вызывая колбэк по истечении задержки. Важную роль играет функция очистки useEffect, отвечающая за сброс таймера.

import { useEffect, useState } from 'react';

const useDebouncedEffect = (effect, deps, delay) => {
  useEffect(() => {
    const handler = setTimeout(() => effect(), delay);
    return () => clearTimeout(handler);
  }, [...(deps || []), delay]);
};

function SearchComponent() {
  const [searchTerm, setSearchTerm] = useState('');

  useDebouncedEffect(() => {
    // Логика отправки запроса на сервер
    console.log(`Отправка запроса: ${searchTerm}`);
  }, [searchTerm], 500);

  return (
    <input
      type="text"
      value={searchTerm}
      onChange={(e) => setSearchTerm(e.target.value)}
      placeholder="Поиск..."
    />
  );
}

👉 @sWebDev

Что хуже?

👍 — Работать без четкого ТЗ.

🤔 — Работать по четкому ТЗ, которое меняется каждый день.

❤️ — Страшнее всего — работать над проектом, в успех которого не верит никто, включая тебя.

👉 @sWebDev | #юмор

Контроль навигации

Какова основная задача гарда CanDeactivateFn?

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

👉 @sWebDev