Drift

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

👉 @sWebDev

Interactive Three.js Particle Morph

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

👉 @sWebDev

Самый безопасный способ скрыть API-ключи в React

В React-приложениях API-ключи легко могут утечь, если оставить их на клиенте. В статье объясняется, почему нельзя полагаться на переменные окружения или обфускацию кода, и почему для защиты ключей нужно использовать серверную прослойку. Разбор показывает, как правильно выстраивать архитектуру запросов, чтобы ключи не попадали в браузер.

👉 @sWebDev

Infinite Tunnel

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

👉 @sWebDev

Toastify.js

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

👉 @sWebDev

Назначение метода

Что делает метод ɵmarkDirty() в компоненте?

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

👉 @sWebDev

Как у вас с оценкой времени на "маленькие" правки?

👍 — Ужасно.

❤️ — С опытом стало получаться точнее.

👉 @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

3D WebGL Background

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

👉 @sWebDev

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

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

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

👉 @sWebDev | #юмор

Bouncer.js

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

👉 @sWebDev

Morphing Superformula Explorer

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

👉 @sWebDev

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

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

👉 @sWebDev

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

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

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

Newtons Cradle

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

👉 @sWebDev

BaguetteBox.js

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

👉 @sWebDev

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

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

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

👉 @sWebDev

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

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

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

👉 @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