Trianglify
Trianglify — JavaScript-библиотека для генерации фоновых узоров из треугольников с помощью Delaunay-триангуляции. Поддерживает кастомизацию цветов, размеров и плотности. Подойдёт для генерации фоновых изображений, placeholder’ов и декоративных элементов.
👉 @sWebDev
Trianglify — JavaScript-библиотека для генерации фоновых узоров из треугольников с помощью Delaunay-триангуляции. Поддерживает кастомизацию цветов, размеров и плотности. Подойдёт для генерации фоновых изображений, placeholder’ов и декоративных элементов.
👉 @sWebDev
❤3
Media is too big
VIEW IN TELEGRAM
Align HTML Elements to 3D Globe
Интерактивная анимация глобуса с настройкой отображения названий на Three.js.
👉 @sWebDev
Интерактивная анимация глобуса с настройкой отображения названий на Three.js.
👉 @sWebDev
👍3
Контекст в React: различие между родительскими и владельцами компонентов
В React важно понимать разницу между родительскими и владельцами компонентов, особенно при работе с контекстом. Родитель — это компонент, в котором вложен другой, а владелец — тот, который его рендерит. Это различие влияет на обновления: при изменении состояния перерисовываются компоненты во владении, а не все вложенные. В статье показано, как вынести
👉 @sWebDev
В React важно понимать разницу между родительскими и владельцами компонентов, особенно при работе с контекстом. Родитель — это компонент, в котором вложен другой, а владелец — тот, который его рендерит. Это различие влияет на обновления: при изменении состояния перерисовываются компоненты во владении, а не все вложенные. В статье показано, как вынести
Context.Provider
и состояние в отдельный компонент, чтобы избежать лишних перерисовок и улучшить производительность. Подходит тем, кто хочет глубже разобраться в механизмах обновления и оптимизации React-приложений.👉 @sWebDev
❤2
Smartcrop.js
Smartcrop.js — библиотека для умного кадрирования изображений. Автоматически находит визуально важные области и обрезает изображение под заданный размер. Подойдёт для аватаров, превью и адаптивной медиавёрстки.
👉 @sWebDev
Smartcrop.js — библиотека для умного кадрирования изображений. Автоматически находит визуально важные области и обрезает изображение под заданный размер. Подойдёт для аватаров, превью и адаптивной медиавёрстки.
👉 @sWebDev
❤3🤔1
Назначение метода onDestroy()
Зачем используется метод
Забыли? Вернитесь к посту от26.05.2025 .
👉 @sWebDev
Зачем используется метод
onDestroy()
?Забыли? Вернитесь к посту от
👉 @sWebDev
❤2
Зачем используется метод onDestroy()?
Anonymous Quiz
7%
Для создания динамического компонента.
83%
Для регистрации функции, выполняемой при уничтожении экземпляра.
4%
Для внедрения зависимостей вручную.
6%
Для выполнения change detection.
❤3👍1
Получение зависимостей из активного маршрута
Свойство
Если
👉 @sWebDev
Свойство
injector
у RouterOutlet
позволяет напрямую получить зависимости, предоставленные активным маршрутом. Это полезно при работе с динамическими компонентами, вложенными маршрутами и Standalone-архитектурой, где требуется доступ к провайдерам из маршрута без дополнительных обёрток.import { Component, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MyService } from './my.service';
@Component({
selector: 'app-shell',
template: `<router-outlet #outlet="outlet"></router-outlet>`,
})
export class ShellComponent {
@ViewChild('outlet', { static: true }) outlet!: RouterOutlet;
ngAfterViewInit() {
const myService = this.outlet.injector.get(MyService);
myService.log();
}
}
Если
MyService
предоставлен только в маршруте, то доступ к нему возможен только через RouterOutlet.injector
. Это исключает необходимость передачи данных через @Input или общие сервисы.👉 @sWebDev
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
RoughViz.js
RoughViz.js — библиотека для визуализации данных в «рисованном» стиле, основанная на d3 и Rough.js. Поддерживает диаграммы, круговые графики и гистограммы. Подойдёт для инфографики, презентаций и нестандартных визуальных интерфейсов.
👉 @sWebDev
RoughViz.js — библиотека для визуализации данных в «рисованном» стиле, основанная на d3 и Rough.js. Поддерживает диаграммы, круговые графики и гистограммы. Подойдёт для инфографики, презентаций и нестандартных визуальных интерфейсов.
👉 @sWebDev
👍6🤔2
RxJS в Angular 16: актуальные практики работы с потоками
В Angular 16 появились Signals, но RxJS остаётся важной частью экосистемы. В статье разбираются подходы, которые помогают сочетать оба инструмента: когда использовать Observables, а когда Signals, как избегать дублирования логики и улучшать читаемость кода. Материал полезен тем, кто хочет привести работу с потоками к более понятной и устойчивой архитектуре.
👉 @sWebDev
В Angular 16 появились Signals, но RxJS остаётся важной частью экосистемы. В статье разбираются подходы, которые помогают сочетать оба инструмента: когда использовать Observables, а когда Signals, как избегать дублирования логики и улучшать читаемость кода. Материал полезен тем, кто хочет привести работу с потоками к более понятной и устойчивой архитектуре.
👉 @sWebDev
❤4
Glfx.js
Glfx.js — JavaScript-библиотека для применения визуальных эффектов к изображениям с использованием WebGL. Включает размытие, контраст, кривизну, пикселизацию и другие фильтры. Подойдёт для фоторедакторов, медиаплатформ и визуальных экспериментов.
👉 @sWebDev
Glfx.js — JavaScript-библиотека для применения визуальных эффектов к изображениям с использованием WebGL. Включает размытие, контраст, кривизну, пикселизацию и другие фильтры. Подойдёт для фоторедакторов, медиаплатформ и визуальных экспериментов.
👉 @sWebDev
❤3
Результат выборки
Что будет содержать
Забыли? Вернитесь к посту от02.06.2025 .
👉 @sWebDev
Что будет содержать
QueryList
, если использовать ContentChildren
с read: TemplateRef
?Забыли? Вернитесь к посту от
👉 @sWebDev
❤3
Что будет содержать QueryList, если использовать ContentChildren с read: TemplateRef?
Anonymous Quiz
21%
Ссылки на директивы.
24%
Экземпляры компонентов.
9%
Строковые значения.
45%
Объекты TemplateRef.
👍3❤1