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

Particle system

Анимированные частицы на Three.js.

👉 @sWebDev

Txiki.js

Txiki.js — это небольшой и минималистичный JavaScript-рантайм, созданный для выполнения современных стандартов ECMAScript. Основная цель проекта — предложить лёгкий и быстрый инструмент для запуска JavaScript-кода, без необходимости использования громоздких движков вроде Node.js.

👉 @sWebDev

Работа с методом Injector.create()

Какую задачу решает метод Injector.create() в Angular?

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

👉 @sWebDev

Вас когда-нибудь подводило автодополнение?

👍 - Нет, сразу замечаю.

❤️ - Мягко сказано.

👉 @sWebDev | #юмор

Ручное обновление дерева компонентов

В Angular метод ApplicationRef.tick() используется для запуска цикла обнаружения изменений вручную. Это полезно, когда изменения происходят вне зоны Angular, например, в callback-функциях или таймерах.

Пример:

typescript  
import { ApplicationRef, Component } from '@angular/core';  

@Component({  
  selector: 'app-manual-tick',  
  template: `<p>{{ message }}</p>`,  
})  
export class ManualTickComponent {  
  message = 'Ожидание...';  

  constructor(private appRef: ApplicationRef) {  
    setTimeout(() => {  
      this.message = 'Изменение произошло';  
      this.appRef.tick(); // Обновляем вручную  
    }, 3000);  
  }  
}  

Без вызова tick() изменения в message не были бы отражены в шаблоне, так как они происходят вне зоны Angular.

👉 @sWebDev

Valorant Character Select Animation

Анимация выбора персонажа на Anime.js

👉 @sWebDev