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

Современное E2E-тестирование Angular-приложений с помощью Playwright

Unit-тесты проверяют логику, но не отражают, как работает всё приложение целиком. Когда проект растёт, а релизы выходят всё чаще, важно видеть поведение интерфейса глазами пользователя. В статье рассказывается, как использовать Playwright для написания сквозных тестов в Angular и почему этот инструмент помогает выпускать обновления быстрее и увереннее.

👉 @sWebDev

CPChallenge: Food Drops

Анимация падения объектов на Three.js.

👉 @sWebDev

Cuttr.js

Cuttr.js — JavaScript-библиотека для обрезки текста с добавлением многоточия. Позволяет ограничивать вывод по количеству строк или символов. Подойдёт для карточек, превью и адаптивных блоков с переменной длиной контента.

👉 @sWebDev

Чувствуете ли вы, что ваш реальный уровень веб-разработки полностью соответствует вашей текущей должности?

👍 – Да, мое внутреннее ощущение совпадает с должностью.

❤️ – Чувствую, что мой реальный уровень ниже, чем моя должность.

🤔 – Чувствую, что мой реальный уровень выше, чем моя должность.

👉 @sWebDev | #юмор

Интерактивная сетка

Интерактивная сетка из кругов на GSAP.

👉 @sWebDev

Получение шаблонов через ContentChildren и TemplateRef

Параметр read: TemplateRef в декораторе ContentChildren позволяет получить доступ именно к шаблонам, переданным в компонент через <ng-content>, что важно, когда требуется отрисовать вложенные ng-template вручную, а не просто вставить контент. Angular по умолчанию ищет компоненты, но при указании read можно получить доступ к объектам TemplateRef.

import { Component, ContentChildren, QueryList, TemplateRef, AfterContentInit } from '@angular/core';

@Component({
  selector: 'template-container',
  template: `<ng-container *ngTemplateOutlet="templates[0]"></ng-container>`,
})
export class TemplateContainerComponent implements AfterContentInit {
  @ContentChildren(TemplateRef, { read: TemplateRef }) templates!: QueryList<TemplateRef<any>>;

  ngAfterContentInit() {
    console.log('Шаблонов передано:', this.templates.length);
  }
}

В примере компонент получает все ng-template, переданные в него, и может использовать любой шаблон вручную.

👉 @sWebDev

Как вы реагируете на критику вашего кода?

👍 – Избегаю разговор.

❤️ – Принимаю к сведению.

🤔 – Готовлю аргументы для защиты.

👉 @sWebDev | #юмор

Работа с хуком unstable_useCacheRefresh

Что позволяет сделать хук unstable_useCacheRefresh()?

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

👉 @sWebDev

AutoComplete.js

AutoComplete.js — JavaScript-библиотека для создания быстрого и адаптивного автозаполнения. Поддерживает динамические и статические источники данных, кастомизацию шаблонов и событий. Подойдёт для форм, поисковых строк и интерфейсов с предсказанием ввода.

👉 @sWebDev

Interactive 3D Birthday Cake Celebration

Интерактивная анимация открытки с тортом на Three.js.

👉 @sWebDev

Гексагональная архитектура с NgRx Signal Store в Angular

Статья объясняет, как использовать гексагональную архитектуру при работе с NgRx Signal Store и Angular Signals. Данный подход позволяет изолировать бизнес-логику от инфраструктурных деталей, повысить модульность и упростить тестирование.

👉 @sWebDev

Dot Controls

Стилизованные интерактивные слайдеры на Draggable.js.

👉 @sWebDev

Yall.js

Yall.js — легковесная библиотека для ленивой загрузки изображений и видео с использованием Intersection Observer. Работает без зависимостей и подходит для оптимизации скорости загрузки страниц в проектах с большим количеством медиа.

👉 @sWebDev

Откуда реально пришли ваши ключевые знания по программированию?

👍 – Из курсов.

❤️ – Из бессонных ночей с гуглом и форумами.

🤔 – Разбор чужого кода и практика.

👉 @sWebDev | #юмор

Draggable SVG Logo

Логотип с эффектом перетаскивания на GSAP и Draggable.js.

👉 @sWebDev

Очистка ресурсов через DestroyRef.onDestroy()

DestroyRef предоставляет метод onDestroy(), с помощью которого можно зарегистрировать функцию, выполняемую при уничтожении экземпляра. Данный способ подходит для отписки от Observable, остановки таймера или удаления обработчика событий без реализации интерфейса OnDestroy.

import { Component, inject, DestroyRef } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({
  selector: 'demo-ticker',
  template: `<p>{{ tick }}</p>`,
})
export class TickerComponent {
  tick = 0;
  private sub: Subscription;

  constructor() {
    const destroyRef = inject(DestroyRef);

    this.sub = interval(1000).subscribe(v => (this.tick = v));

    destroyRef.onDestroy(() => {
      this.sub.unsubscribe();
      console.log('Подписка завершена');
    });
  }
}

Зарегистрированная функция выполняется при уничтожении компонента. Такой подход помогает избежать утечек памяти и использовать лаконичную форму очистки.

👉 @sWebDev

Сталкивались с такими крайностями в комментариях к патчам в реальной жизни?

👍 – Да, с минимализмом на больших патчах постоянно.

❤️ – С графоманией на маленьких — редко, но метко.

🤔 – Я сам иногда грешу то в одну, то в другую сторону.

👉 @sWebDev | #юмор

Структура аргументов useOptimistic()

Что принимает useOptimistic() в качестве начальных данных?

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

👉 @sWebDev