Yall.js

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

👉 @sWebDev

Dot Controls

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

👉 @sWebDev

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

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

👉 @sWebDev

Interactive 3D Birthday Cake Celebration

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

👉 @sWebDev

AutoComplete.js

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

👉 @sWebDev

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

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

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

👉 @sWebDev

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

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

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

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

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