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

Почему компонентная композиция — это отличная идея

Статья рассматривает преимущества подхода компонентной композиции в разработке React-приложений. Автор объясняет, как использование композиции позволяет создавать гибкие и переиспользуемые компоненты, которые проще настраивать и комбинировать.

👉 @sWebDev

Cat vs ball of wool

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

👉 @sWebDev

Ztext.js

Ztext.js — лёгкая библиотека для добавления 3D-эффектов и анимаций к текстам на веб-страницах. Работает без WebGL и позволяет создавать глубину и ротацию текста. Подходит для выделения заголовков и декоративного текста.

👉 @sWebDev

Как думаете, баги на фронте легче исправлять?

👍 - Да, легче.

❤️ - Нет, не всегда, зависит от фронта.

👉 @sWebDev | #юмор

Tria

Абстрактная геометрическая анимация на Three.js.

👉 @sWebDev

Метод ngAfterContentInit для управления контентом, переданным через ng-content

В Angular метод ngAfterContentInit является жизненным циклом компонента, который вызывается после инициализации контента, переданного через ng-content. Это позволяет выполнять операции над переданными дочерними элементами после того, как они станут частью DOM компонента.

Пример:

import { Component, ContentChild, AfterContentInit } from '@angular/core';
import { ElementRef } from '@angular/core';

@Component({
  selector: 'app-card',
  template: `<div class="card"><ng-content></ng-content></div>`
})
export class CardComponent implements AfterContentInit {
  @ContentChild('header') header!: ElementRef;

  ngAfterContentInit() {
    if (!this.header) {
      console.warn('Контент заголовка не передан!');
    } else {
      console.log('Заголовок загружен:', this.header.nativeElement.textContent);
    }
  }
}

Здесь CardComponent проверяет наличие элемента header и логгирует его содержание при успешной инициализации.

👉 @sWebDev

Насколько часто чужой код вызывает у вас недоумение?

👍 — Редко, всё интуитивно.

🤔 — Иногда встречаю странные решения.

❤️ — Регулярно, порой это сюрреализм.

👉 @sWebDev | #юмор

Работа с декораторами HostListener

Для чего обычно используется декоратор @HostListener в Angular?

Если забыли, то вернитесь к посту от 04.11.2024.

👉 @sWebDev

SpriteJS

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

👉 @sWebDev

Cubes - three.js & anime.js

Анимация спирали на Anime.js и Three.js.

👉 @sWebDev

Через тернии к позиции Middle React разработчика

Статья которая поможет Junior-разработчикам перейти на уровень Middle. Узнайте, какие аспекты JavaScript и React важно освоить, почему стоит разобраться с Redux и Context API, и как тестирование и работа с Webpack и Docker повысят ваш профессионализм.

👉 @web_craft | #собес

Punk Poker: SVG

Пример анимации на GSAP.

👉 @sWebDev

Polly.js

Polly.js — библиотека JavaScript для записи и воспроизведения HTTP-запросов, созданная Netflix. Она позволяет тестировать приложение оффлайн, избегая избыточных запросов к серверу. Поддерживает популярные HTTP-библиотеки (Fetch, Axios, XHR) и гибкие настройки для управления запросами.

👉 @sWebDev

Ваши друзья тоже перестают понимать, когда вы объясняете что-то про код?

👍 — Нет, они в теме.

🤔 — Иногда теряются.

❤️ — Постоянно, даже не пытаются понять.

👉 @sWebDev | #юмор

SVG line drawing animation

Анимация линий на Anime.js.

👉 @sWebDev

ChangeDetectorRef для ручного контроля изменений в компонентах

ChangeDetectorRef — инструмент в Angular, позволяющий управлять обнаружением изменений в компонентах вручную. Это особенно полезно, когда автоматическое обнаружение изменений (change detection) не может уловить изменения состояния, например, при работе с асинхронными операциями или сторонними библиотеками, которые Angular не отслеживает по умолчанию.

Методы markForCheck() и detectChanges() позволяют более гибко управлять процессом обновления компонента. Например, если нужно обновить представление при изменении данных, полученных через сторонний API, можно вызвать detectChanges() после обновления данных:

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

@Component({
  selector: 'app-example',
  template: `<p>{{ data }}</p>`
})
export class ExampleComponent {
  data: string;

  constructor(private cdr: ChangeDetectorRef) {}

  updateData(newData: string) {
    this.data = newData;
    this.cdr.detectChanges();
  }
}

👉 @sWebDev

Считаете ли свой интерфейс интуитивно понятным?

👍 — Да, 100%.

❤️ — Нет, могло быть и лучше.

👉 @sWebDev | #юмор

Работа с декоратором Optional()

Что произойдет, если @Optional() зависимость не найдена?

Если забыли, то вернитесь к посту от 28.10.2024.

👉 @sWebDev