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

Функция хука

Что делает useSyncExternalStoreWithSelector()?

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

👉 @sWebDev

Lingui.js

Lingui.js — библиотека для интернационализации (i18n) JavaScript-приложений. Использует стандарт ICU MessageFormat для работы со сложными правилами множественного числа и родов. Включает инструменты для извлечения сообщений из кода. Подойдёт для проектов, где требуется гибкая система локализации.

👉 @sWebDev

Ripple effect

Интерактивный эффект ряби на воде на Three.js.

👉 @sWebDev

Почему Error Boundaries в React — это не просто try...catch

Многие разработчики считают Error Boundaries аналогом try...catch, но это заблуждение приводит к ошибкам в обработке сбоев. В статье разбирается, почему эти механизмы принципиально разные и в каких случаях стандартный try...catch бессилен.

👉 @sWebDev

Шаровая молния

Настраиваемая интерактивная анимация шаровой молнии на Three.js.

👉 @sWebDev

Two.js

Two.js — JavaScript-библиотека для 2D-рисования, которая предоставляет единый API для рендеринга в SVG, Canvas и WebGL. Упрощает создание и управление векторными фигурами и сценами. Подойдёт для создания интерактивной инфографики, визуализаций данных и процедурной графики.

👉 @sWebDev

Как называется, когда ты следуешь инструкции, но совершенно не понимаешь ее смысла?

👍 — Это "главный признак джуна" — способность превратить решение на 5 минут в увлекательное трехдневное приключение.

❤️ — Называется «скопировал со Stack Overflow и надеюсь, что сработает».

👉 @sWebDev | #юмор

Borger 3D

Интерактивный конструктор бургера на Three.js.

👉 @sWebDev

Защита от потери данных при навигации

Функциональный гард CanDeactivateFn в Angular предотвращает уход с маршрута для защиты от потери несохраненных данных. Гард — это функция, которая получает экземпляр компонента для проверки его состояния и возвращает true или false, разрешая или блокируя навигацию.

import { CanDeactivateFn } from '@angular/router';

// Интерфейс, который должен реализовать компонент
export interface HasUnsavedChanges {
  hasUnsavedChanges(): boolean;
}

// Функциональный гард, который проверяет наличие
// несохраненных изменений в компоненте.
export const unsavedChangesGuard: CanDeactivateFn<HasUnsavedChanges> = (
  component
) => {
  // Если есть несохраненные изменения, запрашиваем подтверждение
  if (component.hasUnsavedChanges()) {
    return confirm(
      'У вас есть несохраненные изменения. Вы уверены, что хотите покинуть страницу?'
    );
  }
  // Если изменений нет, разрешаем навигацию
  return true;
};

👉 @sWebDev

Насколько сложным оказался для вас переход от HTML/CSS к JavaScript?

👍 – Настолько, что дальше я не продвинулся(ась).

❤️ – Было непросто, но справился(ась).

🤔 – JavaScript мне дался легко, не сложнее, чем HTML/CSS.

👉 @sWebDev | #юмор

Функция свойства injector

Зачем используется свойство injector у RouterOutlet?

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

👉 @sWebDev

Sal.js

Sal.js — легковесная библиотека для создания анимаций появления элементов при прокрутке. Использует Intersection Observer для высокой производительности и работает без зависимостей. Подойдёт для лендингов, портфолио и сайтов, где требуется анимированное появление контента.

👉 @sWebDev

Аnimated Music Player

Интерактивная анимация плеера с эффектом прокрутки на GSAP и Draggable.js.

👉 @sWebDev

Как управлять фокусом в React с помощью flushSync

Установить фокус на элемент, который появляется после смены состояния - частая проблема в React. Из-за пакетной обработки обновлений DOM не успевает измениться вовремя. В статье разбирается, как использовать flushSync для синхронного ререндера, который гарантирует наличие элемента в DOM. Подход позволяет надёжно управлять фокусом в модальных окнах и динамических формах без костылей вроде setTimeout.

👉 @sWebDev

Interactive Glass Lens Effect

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

👉 @sWebDev

Stretchy.js

Stretchy.js — JavaScript-библиотека для автоматического изменения размера полей ввода по мере набора текста. Позволяет создавать гибкие и адаптивные формы без жёстко заданных размеров. Подойдёт для полей с тегами, динамических анкет и интерфейсов с непредсказуемой длиной пользовательского ввода.

👉 @sWebDev

Люди, которые пользуются светлой темой:

👍 – Эти люди я.

❤️ – Отрабатывают карму за прошлые жизни.

👉 @sWebDev | #юмор

Заяц под дождем

Анимированная сцена с дождем на Three.js и Ammo.js.

👉 @sWebDev