Interactive Glass Lens Effect

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

👉 @sWebDev

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

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

👉 @sWebDev

Аnimated Music Player

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

👉 @sWebDev

Sal.js

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

👉 @sWebDev

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

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

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

👉 @sWebDev

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

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

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

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

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

Borger 3D

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

👉 @sWebDev

📢 VK Dev Grants: программа для разработчиков под VK Mini Apps.

Думаешь над своим пет-проектом, но не знаешь с чего начать? Грантовая программа от VK Mini Apps поможет с этим.

За три этапа вы проработаете концепт своего приложения, выведете его на многомиллионную аудиторию и можете получить средства на его продвижение.

Что предлагают:
— Финансирование до 1 млн ₽
— Поддержка, продвижение, консультации от команды VK
— Аудитория в 45 млн активных пользователей

Этапы:
1️⃣ Идея (прием заявок до 31.07) — 50 000
2️⃣ Релиз с монетизацией (до 5.10) — 150 000
3️⃣ Прокачка и рост (до 30.11) — до 800 000 + номинации

🛠 Направления: игровые сервисы, социальные сервисы и инструменты для авторов ВКонтакте.

Можно подаваться индивидуально или командой. Проекты должны быть новыми (зарегистрированы не ранее 2 июля 2025).

⏳ Подавай заявку до 31 июля.

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

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

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

👉 @sWebDev | #юмор

Two.js

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

👉 @sWebDev

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

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

👉 @sWebDev

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

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

👉 @sWebDev

Ripple effect

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

👉 @sWebDev

Lingui.js

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

👉 @sWebDev

Функция хука

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

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

👉 @sWebDev