Работа с 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

Tabloid.js

Минималистичная библиотека для создания вкладок (tabs) в веб-приложениях. Не требует сложной настройки и предоставляет гибкие инструменты для управления интерфейсами с несколькими секциями.

👉 @sWebDev

Использование AbstractControl

Как можно использовать AbstractControl?

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

👉 @sWebDev

Как вам такая формализация?

❤️ - Зато всё строго по регламенту.

👍 - Без комментариев.

👉 @sWebDev | #юмор

AnimationTrigger для создания сложных анимаций

В Angular AnimationTrigger управляет анимациями компонентов, задавая состояния, их изменения и связывая анимации с событиями.

Пример:

import { Component } from '@angular/core';
import { trigger, state, style, transition, animate } from '@angular/animations';

@Component({
  selector: 'app-animated',
  template: `
    <div [@fadeInOut]="isVisible ? 'visible' : 'hidden'" class="box"></div>
    <button (click)="toggle()">Toggle</button>
  `,
  animations: [
    trigger('fadeInOut', [
      state('visible', style({ opacity: 1 })),
      state('hidden', style({ opacity: 0 })),
      transition('hidden => visible', [animate('500ms ease-in')]),
      transition('visible => hidden', [animate('300ms ease-out')]),
    ]),
  ],
  styles: [`.box { width: 100px; height: 100px; background: lightblue; margin: 10px; }`],
})
export class AnimatedComponent {
  isVisible = false;
  toggle() {
    this.isVisible = !this.isVisible;
  }
}

👉 @sWebDev

Abandoned Planet (Metaverse)

Интерактивная модель заброшенной планеты на Three.js.

👉 @sWebDev

Узнали своего тимлида?

❤️ - 100%

👍 - Это я.

👉 @sWebDev | #юмор

Currency.js

Currency.js — это библиотека для работы с денежными значениями. Она разработана для точных вычислений и форматирования валют, избегая проблем с округлением при работе с числами с плавающей точкой в JavaScript.

👉 @sWebDev

Interactive Threejs Geometry

Интерактивная абстрактная фигура на Three.js.

👉 @sWebDev

Почему не стоит использовать внешние отступы в компонентах

В статье рассматривается антипаттерн использования внешних отступов (margin) и внутренних отступов (padding) в компонентах пользовательского интерфейса. Автор утверждает, что добавление margin к внешнему элементу компонента нарушает инкапсуляцию и усложняет повторное использование компонентов. Вместо этого рекомендуется управлять внешними отступами на уровне родительских элементов или контейнеров, оставляя компонент ответственным только за внутренние отступы и оформление.

👉 @sWebDev