Frontender Libs - обзор библиотек JS / CSS

Low Poly Experiment Анимация колбы с окрашивающимся реагентом на GSAP. 👉 @sWebDev

Внедрение зависимостей в динамические компоненты ViewContainerRef в Angular позволяет динамически создавать компоненты и внедрять в них зависимости. Сначала нужно получить доступ к ViewContainerRef через @ViewChild, затем использовать метод createComponent для создания экземпляра компонента. После создания можно передать данные через инстанс компонента. Пример:

@Component({
  selector: 'app-dynamic-host',
  template: `<ng-container #container></ng-container>`,
})
export class DynamicHostComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true })
  container!: ViewContainerRef;

  loadComponent() {
    const componentRef = this.container.createComponent(DynamicComponent);
    componentRef.instance.data = 'Переданные данные';
  }
}

@Component({
  selector: 'app-dynamic-component',
  template: `<p>{{ data }}</p>`,
})
export class DynamicComponent {
  data!: string;
}

👉 @sWebDev

Ситуация знакома? ❤️ - Нет. 👍 - Еще как. 👉 @sWebDev | #юмор

Отслеживания событий вне зоны видимости компонента Какой декоратор Angular позволяет компоненту реагировать на события, происходящие вне его области видимости? Если забыли, то вернитесь к посту от 05.08.2024. 👉 @sWebDev

Rete.js Rete.js - это фреймворк для создания визуальных редакторов схем (node-based editors). Он используется для построения приложений, где пользователи могут создавать и редактировать графические схемы с помощью узлов и соединений между ними. Такие редакторы часто используются в графических приложениях, редакторах шейдеров, системах визуального программирования и других областях. 👉 @sWebDev

Storm Стилизованный шторм на Anime.js. 👉 @sWebDev

Оптимизация Производительности Angular С Помощью Кэширования HttpInterceptor Статья описывает, как оптимизировать производительность Angular-приложений с помощью кеширования запросов через HttpInterceptor. В ней объясняется, что кеширование позволяет значительно сократить время загрузки данных, избегая повторных запросов к серверу. 👉 @sWebDev

Responsive Scroll-Driven Text Reveals Анимированный скролл с использованием GSAP. 👉 @sWebDev

Эффективнее, чем блогеры: кейс Flocktory и PREMIER Привлечение новых пользователей с помощью блогеров — популярный способ, но у него есть свои минусы. Коды, которые распространяют сетевые инфлюенсеры, как правило, не уникальны и активируются неограниченное количество раз — а значит прозрачную аналитику по ним собрать сложно. Кроме того, стоимость лида в таких кампаниях достаточно высока. Стриминговый сервис PREMIER попробовал альтернативный способ привлечь аудиторию — разместил свой оффер «45 дней бесплатного использования» на витрине подарков Exchange омниканальной платформы автоматизации и персонализации маркетинга Flocktory. Оказалось, что это работает эффективнее, чем блогеры — подробности рассказываем в статье. Узнать больше #реклама flocktory.com О рекламодателе

Macy.js Macy.js - это библиотека для создания сеток (grid layout) в веб-приложениях. Она предназначена для упрощения задачи создания адаптивных сеток, что особенно полезно для галерей изображений, портфолио и других контентных сайтов. 👉 @sWebDev

А кто? 👉 @sWebDev | #юмор

COLORON GAME Игра на реакцию реализованная с помощью GSAP, ES6 и Flexbox. 👉 @sWebDev

Динамические компоненты в Angular ComponentFactoryResolver в Angular позволяет создавать и управлять динамическими компонентами, которые создаются и уничтожаются в ходе работы приложения. Сначала создаем динамический компонент, а затем основной компонент с ComponentFactoryResolver:

import { Component, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core';
import { DynamicComponent } from './dynamic.component';

@Component({
  selector: 'app-root',
  template: `<div #container></div>
             <button (click)="loadComponent()">Load Component</button>`,
})
export class AppComponent {
  @ViewChild('container', { read: ViewContainerRef, static: true }) container: ViewContainerRef;

  constructor(private componentFactoryResolver: ComponentFactoryResolver) {}

  loadComponent() {
    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(DynamicComponent);
    this.container.clear();
    this.container.createComponent(componentFactory);
  }
}

👉 @sWebDev

Запустите рекламу в телеграм-каналах с Яндекс Директом Перфоманс-реклама теперь в телеграм-каналах ⚡ Яндекс Директ знает, как привлечь целевую аудиторию 💰👌 Попробовать #реклама yandex.ru О рекламодателе

Любите джунов? ❤️ - Да. 👍 - Нет. 🤔 - Я джун. 👉 @sWebDev | #юмор

Работа с useSetState в React Для чего используется хук useSetState в React? Если забыли, то вернитесь к посту от 29.07.2024. 👉 @sWebDev

Downshift Downshift - это библиотека для создания гибких и доступных дропдаунов (выпадающих списков) и автозаполнения. Она предоставляет низкоуровневый API, что позволяет контролировать внешний вид и поведение компонентов. 👉 @sWebDev

Smoke Particles Анимация дыма на Three.js. 👉 @sWebDev