FormCatcher.js
formCatcher.js — легковесная библиотека для удобной валидации форм. Позволяет настроить правила проверки полей без сложного кода, предотвращая отправку некорректных данных. Отличное решение для лендингов и веб-приложений.
👉 @sWebDev
formCatcher.js — легковесная библиотека для удобной валидации форм. Позволяет настроить правила проверки полей без сложного кода, предотвращая отправку некорректных данных. Отличное решение для лендингов и веб-приложений.
👉 @sWebDev
👍3
Понимание внутренней работы Redux: как он устроен под капотом
Redux — библиотека для управления состоянием в экосистеме React, известная предсказуемыми обновлениями состояния и однонаправленным потоком данных. Статья углубляется во внутренние механизмы Redux, объясняя обработку действий, обновление состояния через редьюсеры и уведомление подписчиков. Понимание этих аспектов помогает эффективно отлаживать приложения и даже создавать собственные упрощённые версии Redux.
👉 @sWebDev
Redux — библиотека для управления состоянием в экосистеме React, известная предсказуемыми обновлениями состояния и однонаправленным потоком данных. Статья углубляется во внутренние механизмы Redux, объясняя обработку действий, обновление состояния через редьюсеры и уведомление подписчиков. Понимание этих аспектов помогает эффективно отлаживать приложения и даже создавать собственные упрощённые версии Redux.
👉 @sWebDev
👍2
Litegraph.js
Litegraph.js — это движок для создания визуального программирования прямо в браузере. Позволяет строить графовые структуры с узлами, соединять их и динамически изменять логику без единой строчки кода. Отлично подходит для AI, анимаций и интерактивных интерфейсов.
👉 @sWebDev
Litegraph.js — это движок для создания визуального программирования прямо в браузере. Позволяет строить графовые структуры с узлами, соединять их и динамически изменять логику без единой строчки кода. Отлично подходит для AI, анимаций и интерактивных интерфейсов.
👉 @sWebDev
👍4
Работа с preloadAllModules
Что делает
Забыли? Вернитесь к посту от17.03.2025 .
👉 @sWebDev
Что делает
preloadAllModules
в Angular?Забыли? Вернитесь к посту от
👉 @sWebDev
❤2
Что делает preloadAllModules в Angular?
Anonymous Quiz
40%
Загружает все модули сразу при старте приложения.
11%
Отключает ленивую загрузку.
4%
Удаляет неиспользуемые модули.
45%
Предзагружает ленивые модули в фоне после загрузки основного модуля.
👍4
Динамическое управление представлениями
Пример:
👉 @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
👍3
Iro.js
Iro.js - это JavaScript библиотека, предоставляющая виджеты для выбора цвета. Она предлагает настраиваемые интерфейсы для выбора цвета, которые легко интегрируются в веб-приложения.
👉 @sWebDev
Iro.js - это JavaScript библиотека, предоставляющая виджеты для выбора цвета. Она предлагает настраиваемые интерфейсы для выбора цвета, которые легко интегрируются в веб-приложения.
👉 @sWebDev
👍2
Анализ работы серверных компонентов (RSCs) React
Статья предлагает глубокий анализ принципов работы серверных компонентов React, рассматривая процессы рендеринга, взаимодействие с клиентскими компонентами и влияние на производительность. Прочитав ее, вы получите полное представление об RSC и сможете лучше применять их для оптимизации ваших React-приложений.
👉 @sWebDev
Статья предлагает глубокий анализ принципов работы серверных компонентов React, рассматривая процессы рендеринга, взаимодействие с клиентскими компонентами и влияние на производительность. Прочитав ее, вы получите полное представление об RSC и сможете лучше применять их для оптимизации ваших React-приложений.
👉 @sWebDev
🔥2
Media is too big
VIEW IN TELEGRAM
Threejs Explorations
Настраиваемая анимация, сочетающая морфинг и триггер на прокрутку, реализована на базе Three.js для 3D-рендеринга и GSAP для покадровой анимации.
👉 @sWebDev
Настраиваемая анимация, сочетающая морфинг и триггер на прокрутку, реализована на базе Three.js для 3D-рендеринга и GSAP для покадровой анимации.
👉 @sWebDev
❤1
Alpaca Forms
Alpaca Forms - это JavaScript библиотека для генерации веб-форм. Он позволяет создавать формы динамически, используя JSON-схемы. Поддерживает различные типы полей, правила валидации и темы оформления.
👉 @sWebDev
Alpaca Forms - это JavaScript библиотека для генерации веб-форм. Он позволяет создавать формы динамически, используя JSON-схемы. Поддерживает различные типы полей, правила валидации и темы оформления.
👉 @sWebDev
👍3
Пакетное обновление и flushSync()
Как изменяется поведение пакетного обновления при использовании
Забыли? Вернитесь к посту от24.03.2025 .
👉 @sWebDev
Как изменяется поведение пакетного обновления при использовании
flushSync()
?Забыли? Вернитесь к посту от
👉 @sWebDev
👍2
Как влияет flushSync() на стандартное пакетирование обновлений?
Anonymous Quiz
28%
Объединяет обновления в один пакет.
58%
Выполняет обновления синхронно, обходя пакетирование.
8%
Откладывает обновления до следующего цикла событий.
6%
Отменяет все обновления состояния.
👍4
Прямой доступ к DOM-элементам
Метод
Пример:
👉 @sWebDev
Метод
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
👍3