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

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

👉 @sWebDev

Astral temple, 3d tarot display

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

👉 @sWebDev

Jump.js

Jump.js — библиотека для плавной прокрутки к элементам на странице. Работает без зависимостей, поддерживает настройку отступов и колбэки. Подойдёт для лендингов, навигации по якорям и одностраничных интерфейсов.

👉 @sWebDev

Работа с ChangeDetectorRef.detach()

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

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

👉 @sWebDev

Чего не хватает современному минимализму?

👍 – Душевных интро-роликов уровня Flash.

❤️ – Ничего, лишние эффекты только отвлекают.

👉 @sWebDev | #юмор

Предзагрузка ресурсов с помощью ReactDOM.preinit()

Метод ReactDOM.preinit() регистрирует ресурс (например, скрипт или стили), который React должен начать загружать до начала рендеринга. Такой подход ускоряет время отображения контента за счёт раннего запроса критических файлов. Метод не выполняет загрузку — он сообщает React, что ресурс уже начал загружаться или должен быть загружен, и исключает дублирование при отрисовке.

import ReactDOM from 'react-dom';

ReactDOM.preinit('https://example.com/script.js', { as: 'script' });
ReactDOM.preinit('/style.css', { as: 'style', precedence: 'high' });

Сценарий: если известно, что модуль или стиль понадобится в первом кадре (например, в suspense-компоненте или при серверной вставке), вызов preinit() до рендера уменьшает задержку между HTML и визуальным отображением. Поддерживаются типы 'script', 'style', 'font', 'image', 'fetch', 'worker'.

👉 @sWebDev

Snake Game

Игра "Змейка" на GSAP.

👉 @sWebDev

Главное правило вайб-кодера?

👍 – Не спрашивать, как это работает.

❤️ – Если работает – не трогать.

🤔 – Не говорить о вайб-кодинге на ревью.

👉 @sWebDev | #юмор

Trianglify

Trianglify — JavaScript-библиотека для генерации фоновых узоров из треугольников с помощью Delaunay-триангуляции. Поддерживает кастомизацию цветов, размеров и плотности. Подойдёт для генерации фоновых изображений, placeholder’ов и декоративных элементов.

👉 @sWebDev

Align HTML Elements to 3D Globe

Интерактивная анимация глобуса с настройкой отображения названий на Three.js.

👉 @sWebDev

Контекст в React: различие между родительскими и владельцами компонентов

В React важно понимать разницу между родительскими и владельцами компонентов, особенно при работе с контекстом. Родитель — это компонент, в котором вложен другой, а владелец — тот, который его рендерит. Это различие влияет на обновления: при изменении состояния перерисовываются компоненты во владении, а не все вложенные. В статье показано, как вынести Context.Provider и состояние в отдельный компонент, чтобы избежать лишних перерисовок и улучшить производительность. Подходит тем, кто хочет глубже разобраться в механизмах обновления и оптимизации React-приложений.

👉 @sWebDev

Ammo.js demo

Интерактивная анимация вращающегося куба с предметами на Ammo.js.

👉 @sWebDev

Smartcrop.js

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

👉 @sWebDev

Назначение метода onDestroy()

Зачем используется метод onDestroy()?

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

👉 @sWebDev

Как изменились ваши ожидания от IT-карьеры?

👍 – Реальность оказалась совсем другой, заставив стать более прагматичным(ой).

❤️ – Мои ожидания полностью соответствуют действительности.

🤔 – Я еще не понял(а).

👉 @sWebDev | #юмор

Получение зависимостей из активного маршрута

Свойство injector у RouterOutlet позволяет напрямую получить зависимости, предоставленные активным маршрутом. Это полезно при работе с динамическими компонентами, вложенными маршрутами и Standalone-архитектурой, где требуется доступ к провайдерам из маршрута без дополнительных обёрток.

import { Component, ViewChild } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { MyService } from './my.service';

@Component({
  selector: 'app-shell',
  template: `<router-outlet #outlet="outlet"></router-outlet>`,
})
export class ShellComponent {
  @ViewChild('outlet', { static: true }) outlet!: RouterOutlet;

  ngAfterViewInit() {
    const myService = this.outlet.injector.get(MyService);
    myService.log();
  }
}

Если MyService предоставлен только в маршруте, то доступ к нему возможен только через RouterOutlet.injector. Это исключает необходимость передачи данных через @Input или общие сервисы.

👉 @sWebDev

Producer-Consumer Pattern

Интерактивная анимация потоковой очереди на GSAP.

👉 @sWebDev

Сколько экранов вам нужно?

👍 — Два или три норм.

❤️ — Одиного хватает.

🤔 — Экраны? Есть же AR/VR очки.

👉 @sWebDev | #юмор