Portal to elriel

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

👉 @sWebDev

API captureOwnerStack

В React появился экспериментальный API captureOwnerStack, который помогает разрабатывать более удобные ошибки. Он позволяет получить стек владельцев (Owner Stack) — список компонентов, через которые передаётся проп. Это полезно, если нужно быстро понять, какой компонент несёт ответственность за данные в сложной структуре. Работает только в режиме разработки и может измениться в будущих версиях. Если ваш код ломается, а виновника не найти, этот API поможет разобраться.

👉 @sWebDev

CPChallenge: Bugs

Анимация бабочек на Three.js.

👉 @sWebDev

ScrollSpy.js

ScrollSpy.js — это легковесная библиотека для отслеживания появления элементов в области просмотра. Она позволяет удобно активировать анимации, загружать контент или изменять состояние элементов при прокрутке страницы.

👉 @sWebDev

Работа с resolveForwardRef()

Что делает resolveForwardRef() при передаче ему объекта?

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

👉 @sWebDev

Есть ли способ точнее объяснить, как работает HTML?

👍 – Это идеальная визуализация.

❤️ – Даже документация так чётко не объясняет.

🤔 – Добавьте ещё пару div-ов для надёжности.

👉 @sWebDev | #юмор

Принудительный ререндер в React

В React метод flushSync() немедленно обновляет состояние и ререндерит компонент, обходя пакетирование. Это полезно, когда нужно сразу отобразить изменения перед выполнением других операций, например, измерения размеров DOM-элемента.

Обычно React группирует обновления в батчи, но иногда требуется мгновенный ререндер.

import { useState, useRef } from "react";
import { flushSync } from "react-dom";

function Example() {
  const [text, setText] = useState("Исходное значение");
  const spanRef = useRef(null);

  function handleClick() {
    flushSync(() => {
      setText("Обновлённое значение");
    });
    console.log("Ширина:", spanRef.current.offsetWidth);
  }

  return (
    <div>
      <button onClick={handleClick}>Изменить</button>
      <span ref={spanRef}>{text}</span>
    </div>
  );
}


flushSync() гарантирует, что offsetWidth обновится сразу после изменения текста.

👉 @sWebDev

Metaballs

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

👉 @sWebDev

AI скоро сможет создавать сложные кодовые базы с нуля. Это повод волноваться?

👍 – Да, звучит серьезно!

❤️ – С нуля все могут, ты попробуй разобраться в том, что уже есть!

👉 @sWebDev | #юмор

FormCatcher.js

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

👉 @sWebDev

Another Metaballs

Анимация шаров на странице реализованная с Three.js и GSAP.

👉 @sWebDev

Понимание внутренней работы Redux: как он устроен под капотом

Redux — библиотека для управления состоянием в экосистеме React, известная предсказуемыми обновлениями состояния и однонаправленным потоком данных. Статья углубляется во внутренние механизмы Redux, объясняя обработку действий, обновление состояния через редьюсеры и уведомление подписчиков. Понимание этих аспектов помогает эффективно отлаживать приложения и даже создавать собственные упрощённые версии Redux.

👉 @sWebDev

Interactive 3D Web Hero Section

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

👉 @sWebDev

Litegraph.js

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

👉 @sWebDev

Работа с preloadAllModules

Что делает preloadAllModules в Angular?

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

👉 @sWebDev

Как вам такой замкнутый круг?

👍 – Нормально, а что тут такого?

❤️ – Отключаю AdBlock, если сайт мне реально полезен.

👉 @sWebDev | #юмор

Динамическое управление представлениями

EmbeddedViewRef - это ссылка на конкретный экземпляр представления, созданный из TemplateRef. В отличие от ComponentRef, он относится к шаблону (<ng-template>), что позволяет динамически отображать пользовательский интерфейс.

import { Component, ViewChild, ViewContainerRef, TemplateRef } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <ng-template #t><div>Шаблон</div></ng-template>
    <div #c></div>
    <button (click)="create()">Создать</button>
  `,
})
export class ExampleComponent {
  @ViewChild('t', { read: TemplateRef }) tRef!: TemplateRef<any>;
  @ViewChild('c', { read: ViewContainerRef }) cRef!: ViewContainerRef;

  create() {
    this.cRef.createEmbeddedView(this.tRef);
  }
}

Пример: @ViewChild получает TemplateRef (tRef) и ViewContainerRef (cRef). createEmbeddedView создает и вставляет шаблон.

👉 @sWebDev

Mouse Swirl Effect

Эффект анимации курсора мыши с использованием Three.js.

👉 @sWebDev