Анализ работы серверных компонентов (RSCs) React

Статья предлагает глубокий анализ принципов работы серверных компонентов React, рассматривая процессы рендеринга, взаимодействие с клиентскими компонентами и влияние на производительность. Прочитав ее, вы получите полное представление об RSC и сможете лучше применять их для оптимизации ваших React-приложений.

👉 @sWebDev

Threejs Explorations

Настраиваемая анимация, сочетающая морфинг и триггер на прокрутку, реализована на базе Three.js для 3D-рендеринга и GSAP для покадровой анимации.

👉 @sWebDev

Alpaca Forms

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

👉 @sWebDev

Пакетное обновление и flushSync()

Как изменяется поведение пакетного обновления при использовании flushSync()?

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

👉 @sWebDev

Считаете ли вы эффективной такую систему оценки кандидатов?

👍 — Нет, она часто не отражает реальных способностей.

❤️ — В целом, да, позволяет отсеять неподходящих.

🤔 — Возможно, нужны какие-то дополнения.

👉 @sWebDev | #юмор

Прямой доступ к DOM-элементам

Метод findDOMNode() в React предоставляет прямой доступ к реальному DOM-узлу компонента. Обычно его применяют в старых компонентах или библиотеках, где нет возможности использовать рефы. Несмотря на удобство, findDOMNode() считается устаревшим из-за ограничений и потенциальных конфликтов с React Strict Mode. Этот метод нельзя использовать в функциональных компонентах и компонентах, созданных с помощью React.forwardRef(). Команда React рекомендует вместо него использовать React.createRef() или хук useRef(), так как они безопаснее и более совместимы с современным подходом React.

Пример:

import React from 'react';
import { findDOMNode } from 'react-dom';

class LegacyComponent extends React.Component {
  componentDidMount() {
    const node = findDOMNode(this);
    node.style.color = 'blue';
  }

  render() {
    return <div>Прямой доступ к DOM!</div>;
  }
}

👉 @sWebDev

Cosmic Journey

Настраиваемая анимация черной дыры на Three.js.

👉 @sWebDev

Когда джун слишком честный на презентации…

👍 – Лучше клиент узнает сразу!

❤️ – Джун больше не ходит на демо.

👉 @sWebDev | #юмор

Embla Carousel

Embla Carousel — JavaScript-библиотека для создания слайдеров и каруселей с минимальным размером и поддержкой сенсорных экранов. Не имеет зависимостей и настраивается через чистый JavaScript API.

👉 @sWebDev

Dynamic Circle Visualizer

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

👉 @sWebDev

Адаптивное видеостриминг с использованием Dash.js в React

Стандартный видеоплеер в браузере часто не справляется с разной скоростью интернета пользователей, вызывая паузы и зависания. Статья показывает, как решить эту проблему с помощью адаптивного битрейт-стриминга (ABR) на основе Dash.js. Автор объясняет, как настроить сегментирование видео, использовать FFmpeg и интегрировать Dash.js в React-приложение, чтобы обеспечить плавное воспроизведение при любом соединении.

👉 @sWebDev

Particle Flow

Пример скролл-анимации на GSAP и Three.js.

👉 @sWebDev

NProgress

NProgress — миниатюрная библиотека для добавления индикатора загрузки в верхней части веб-страницы. Позволяет визуально показать прогресс загрузки или выполнения задачи.

👉 @sWebDev

Как работает flushSync?

Что делает метод flushSync() в React?

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

👉 @sWebDev

А каким «файлообменником» пользуетесь вы?

👍 – GitHub или Гугл-диск.

❤️ – Фотографирую код и отправляю в мессенджеры.

👉 @sWebDev | #юмор

Ручной запуск обновления

Метод ɵmarkDirty() в Angular вручную помечает компонент как «грязный», инициируя обновление при следующем цикле детекции изменений. Это используется вне зоны Angular (например, в стороннем коде), и работает только с ChangeDetectionStrategy.OnPush.

import {
  Component,
  ChangeDetectionStrategy,
  ɵmarkDirty
} from '@angular/core';

declare const externalClick: (cb: () => void) => void;

@Component({
  selector: 'app-alert',
  template: `<p *ngIf="visible">Внешнее событие!</p>`,
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AlertComponent {
  visible = false;

  ngOnInit() {
    externalClick(() => {
      this.visible = true;
      ɵmarkDirty(this);
    });
  }
}

В этом примере внешний обработчик (externalClick) активирует компонент, не запуская Angular change detection. Мы вручную вызываем ɵmarkDirty(this), чтобы Angular отрендерил компонент на следующем проходе.

👉 @sWebDev

Shader & Light Experiments

Анимация освящения фона на Three.js.

👉 @sWebDev

Считаете ли вы формат "за час" хорошим стартом?

👍 - Да, идеально, чтобы попробовать и не испугаться.

❤️ - Нет, лучше сразу настроиться на серьезное обучение.

👉 @sWebDev | #юмор

Notie

Notie — это минималистичная библиотека для отображения уведомлений, подтверждений и запросов в браузере. Не требует зависимостей, легко настраивается и подходит для быстрого информирования пользователя без перегрузки интерфейса.

👉 @sWebDev