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

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

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

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

👉 @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

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

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

👉 @sWebDev

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

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

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

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

👉 @sWebDev | #юмор

Cuttr.js

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

👉 @sWebDev

CPChallenge: Food Drops

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

👉 @sWebDev

Современное 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