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

NanoJS

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

👉 @sWebDev

Preloader and Layout Experiment

Анимация загрузки страницы на GSAP.

👉 @sWebDev

Аутентификация Firebase в Angular 19

В Angular 19 интеграция с Firebase позволяет реализовать аутентификацию с помощью email/пароля, социальных сетей и других методов. Статья показывает, как настроить Firebase в проекте, использовать AngularFire для подключения и создать сервис для управления сессиями и входом пользователей. Полезно для тех, кто хочет добавить надёжную аутентификацию без лишнего кода.

👉 @sWebDev

Carnival Spinner

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

👉 @sWebDev

Animatelo

Animatelo — JavaScript-версия анимаций из Animate.css, работающая без зависимостей. Поддерживает все основные эффекты (вход, выход, внимание и др.) и управляется через классы. Подойдёт для проектов, где нужны CSS-анимации без подключения сторонних стилей.

👉 @sWebDev

Сколько файлов нужно Angular для счастья?

👍 — Тысяч 50 минимум, иначе не солидно.

❤️ — Главное, чтобы проект запускался.

👉 @sWebDev | #юмор

Global Technology Index

Интерактивная анимация дешборда на Three.js.

👉 @sWebDev

Отключение шаблона от change detection через ViewRef.detach()

В Angular метод detach() у ViewRef позволяет временно исключить представление из механизма обнаружения изменений. Это значит, что Angular перестаёт отслеживать изменения данных внутри отключённого представления, что полезно при работе с тяжёлыми компонентами или при необходимости заморозить часть UI.

ViewRef можно получить, например, при создании представления через ViewContainerRef.createEmbeddedView() или createComponent(). После вызова detach() Angular перестаёт проверять это представление при каждом цикле изменений. Чтобы снова активировать его, вызывается viewRef.reattach().

const viewRef = viewContainer.createEmbeddedView(templateRef);
viewRef.detectChanges();
viewRef.detach();

// ...позже
viewRef.reattach();

Такой подход позволяет вручную управлять производительностью, особенно при наличии большого количества вложенных представлений, не требующих постоянного обновления.

👉 @sWebDev

Идеальная пара в любом проекте.

👍 – С ними не соскучишься.

❤️ – А можно взять только второго?

👉 @sWebDev | #юмор

Поиск зависимости при SkipSelf

Как работает флаг InjectFlags.SkipSelf при внедрении зависимости?

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

👉 @sWebDev

BaguetteBox.js

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

👉 @sWebDev

Newtons Cradle

Настраиваемый маятник Ньютона на Three.js.

👉 @sWebDev

Формошлёп — сотни хаков для фронтендеров в одном месте

Никакой скучной теории, воды и прочей шляпы, только практические примеры, которые работают.

👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.

Как использовать proxyConfig в Angular для локальной разработки

Работа с API на локальной разработке часто вызывает проблемы из-за CORS. В статье объясняется, как правильно настроить proxyConfig в Angular, чтобы отправлять запросы через прокси без изменения кода.

👉 @sWebDev

Morphing Superformula Explorer

Настраиваемая анимация фигур на Three.js.

👉 @sWebDev

Bouncer.js

Bouncer.js — легковесная библиотека для валидации форм на стороне клиента без зависимостей. Работает через нативные браузерные API и подходит для простых и адаптивных форм без необходимости подключения крупных фреймворков.

👉 @sWebDev

Когда сеньор аппрувнул твой мерж-реквест, ты...

👍 – Ждешь, когда он поймет свою ошибку.

❤️ – Пытаешься понять, не сарказм ли был в его аппруве.

👉 @sWebDev | #юмор

3D WebGL Background

Интерактивная анимация фона на Three.js и Vanta.js.

👉 @sWebDev

Принудительное обновление кэша

Unstable_useCacheRefresh() используется для ручного обновления данных, полученных через React Cache API. Этот хук позволяет инициировать повторное получение кэшированных ресурсов, например, после пользовательского действия. Хотя API нестабильный, он применим в React Server Components и продвинутых схемах работы с асинхронными данными.

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

'use client';
import { unstable_useCacheRefresh as useCacheRefresh } from 'react';

export default function RefreshButton() {
  const refresh = useCacheRefresh();

  return (
    <button onClick={() => refresh()}>
      Обновить кэш
    </button>
  );
}

В примере кэш обновляется при клике на кнопку, вызывая новые запросы к серверу через связанную инфраструктуру кэширования.

👉 @sWebDev