Любите "наводить красоту" в своем коде?

👍 - Да.

❤️ - Нет, код — это про функциональность.

🤔 - Иногда, если есть время.

👉 @sWebDev | #юмор

Использование Injector.create() для динамического создания зависимостей

В Angular зависимости обычно предоставляются через инжекторы, зарегистрированные в дереве компонентов или на уровне приложения. Однако в некоторых случаях может потребоваться создать зависимость вне контекста стандартного механизма DI (Dependency Injection). Метод Injector.create() предоставляет возможность вручную создать инжектор и настроить его с необходимыми зависимостями.

Пример:

import { Injector } from '@angular/core';

class LoggerService {
  log(message: string) {
    console.log('Logger:', message);
  }
}

// Создаем локальный инжектор с конфигурацией
const injector = Injector.create({
  providers: [
    { provide: LoggerService, useClass: LoggerService }
  ]
});

// Получаем экземпляр LoggerService из инжектора
const logger = injector.get(LoggerService);
logger.log('Динамическое создание зависимости выполнено!');

В данном примере создается инжектор, регистрирующий LoggerService в локальном контексте.

👉 @sWebDev

Animation on scroll

Скролл-анимация пчелы на Three.js.

👉 @sWebDev

Как вы относитесь к новым фреймворкам?

👍 - Надо пробовать.

❤️ - Предпочитаю старые и проверенные.

🤔 - Пишу на чистом JS, мне хватает. (Что я делаю в этом канале?)

👉 @sWebDev | #юмор

Ogl

Ogl — легковесный WebGL-фреймворк для создания интерактивной 3D-графики. Поддерживает модели, текстуры и шейдеры.

👉 @sWebDev

Strange tubes

Интерактивная анимация цветных труб на Three.js.

👉 @sWebDev

Понимание шаблона ресурсов Angular 19: практическое руководство

Статья описывает ресурсный паттерн в Angular для управления состоянием запросов. Используя resource и rxResource, автор демонстрирует создание загрузчиков данных, работу с состояниями (загрузка, ошибка, успех) и обработку запросов с помощью Promise и Observable. Пример с CRUD-приложением для продуктов объясняет использование этих подходов в реальных проектах.

👉 @sWebDev

Twisting

Анимация спирали из прямоугольников наThree.js.

👉 @sWebDev

Sprite.js

Sprite.js — фреймворк для 2D-анимаций на Canvas и WebGL. Позволяет легко работать со спрайтами, фигурами и анимацией для веб-приложений.

👉 @sWebDev

Работа с NgZone

Для чего используется метод runOutsideAngular()?

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

👉 @sWebDev

Ваши действия?

👍 - Взять и сделать.

❤️ - Притвориться, что не слышишь.

👉 @sWebDev | #юмор

Декоратор ＠SkipSelf() для исключения текущего провайдера из цепочки инъекций

@SkipSelf() в Angular заставляет DI пропустить текущий провайдер и искать зависимость в родительском инжекторе. Это полезно, если нужно использовать родительский провайдер вместо локального.

Пример:

@Injectable({ providedIn: 'root' })
export class ConfigService {
  constructor(public config: string) {}
}

@Component({
  selector: 'app-parent',
  providers: [{ provide: ConfigService, useValue: new ConfigService('Parent Config') }],
  template: `<app-child></app-child>`,
})
export class ParentComponent {}

@Component({
  selector: 'app-child',
  providers: [{ provide: ConfigService, useValue: new ConfigService('Child Config') }],
  template: `{{ configService.config }}`,
})
export class ChildComponent {
  constructor(@SkipSelf() public configService: ConfigService) {}
}

@SkipSelf() исключает локальный ConfigService в ChildComponent, используя родительский провайдер.

👉 @sWebDev

Load .GLTF - Shadows

Анимация дорожного движения на Three.js.

👉 @sWebDev

Встречали таких фулстеков?

👍 - Нет.

❤️ - Знаете, я и сам своего рода фулстек.

👉 @sWebDev | #юмор

Zod

Zod — это библиотека для валидации данных, созданная для использования в JavaScript/TypeScript проектах. Она позволяет легко определять схемы данных и проверять их соответствие на сервере и клиенте.

👉 @sWebDev

Search Bubbles

Анимация кнопки поиска на Three.js.

👉 @sWebDev

Встроенные обработчики событий всё ещё срабатывают при передаче в React через dangerouslySetInnerHTML

В статье рассматривается, что, несмотря на то, что React не выполняет теги <script> при использовании dangerouslySetInnerHTML, встроенные обработчики событий, такие как onclick, всё же могут выполняться. Автор демонстрирует, как это может привести к потенциальным уязвимостям, и предлагает способы их предотвращения, включая использование функций для очистки HTML-кода от встроенных обработчиков событий перед его вставкой.

👉 @sWebDev

3D Shader Grid with Floating Cubes

Анимированная сцена с летающими кубами на Three.js.

👉 @sWebDev