Назначение preinit()

Для чего используется метод ReactDOM.preinit()?

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

👉 @sWebDev

Зачем вы тащите старую библиотеку в новый проект?

👍 – Потому что она проверена временем.

❤️ – Потому что в старой хотя бы всё понятно.

🤔 – Потому что в новой нет нужной фичи.

👉 @sWebDev | #юмор

Защита от утечек данных в RSC

В React Server Components для предотвращения случайной утечки чувствительных данных на клиент существуют экспериментальные функции taintObjectReference и taintUniqueValue.

taintObjectReference помечает весь объект как небезопасный для клиента, а taintUniqueValue — только конкретное значение в нём. При попытке передать такие "помеченные" данные в пропсы клиентского компонента React выбросит ошибку, блокируя утечку.

// server-component.js
import { taintUniqueValue } from 'react';
import { ClientComponent } from './client-component';

async function getData() {
  const data = {
    publicInfo: 'Some data',
    apiKey: 'SECRET-KEY-123'
  };

  taintUniqueValue(
    'Ключ API не должен попасть на клиент.',
    data,
    data.apiKey
  );
  return data;
}

export default async function Page() {
  const pageData = await getData();
  
  // Эта передача вызовет ошибку
  return <ClientComponent data={pageData} />;
}

👉 @sWebDev

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

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

👉 @sWebDev

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

👍 – Эти люди я.

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

👉 @sWebDev | #юмор

Stretchy.js

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

👉 @sWebDev

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