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

Предзагрузка ресурсов с помощью 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

Чего не хватает современному минимализму? 👍 – Душевных интро-роликов уровня Flash. ❤️ – Ничего, лишние эффекты только отвлекают. 👉 @sWebDev | #юмор

Работа с ChangeDetectorRef.detach() Для чего используется метод ChangeDetectorRef.detach()? Забыли? Вернитесь к посту от 19.05.2025. 👉 @sWebDev

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

Как бренд влияет на рост ИТ-компаний? Помогите нам найти ответ — участвуйте в исследовании от агентства маркетинга и PR AggreMarketing. Нам важно ваше мнение и практический опыт! Если вы работаете в ИТ и принимаете решения в области маркетинга или PR, приглашаем пройти опрос. Это займет не больше 10 минут. Участники получат приглашение на закрытую онлайн-встречу с результатами исследования и инсайтами рынками. Начать #реклама yandex.ru О рекламодателе

Astral temple, 3d tarot display Интерактивная анимация карт на Three.js. 👉 @sWebDev

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

CPChallenge: Food Drops Анимация падения объектов на Three.js. 👉 @sWebDev

Срочно требуются Веб-Дизайнеры в Figma. Обучим с нуля. Онлайн-программа с наставником и чатом. Осторожно! 80% практики. По результату обучения у вас будет портфолио из нескольких работ. Сертификат о прохождении курса. Возможность пройти полное обучение и получить гарантированное трудоустройство! Учитесь дизайну у профессионалов. Переходи по кнопки: "Узнать больше" и начинай свое обучение. Доступ 0 руб. Узнать больше #реклама 16+ yudaevschool24.online О рекламодателе

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

Современная магистратура от Центрального университета Хочешь развиваться в сфере ИТ и получить фундаментальные знания с практикой? Поступай в магистратуру Центрального университета! - 4 офлайн программы по востребованным направлениям ИТ - Онлайн-программа по машинному обучению - 300 мест с грантами до 1,2 млн руб. - Вечерние занятия и учеба по выходным — удобно совмещать с работой - Обучение по модели STEM-образования: на стыке науки, технологий и бизнеса - Возможность стажировок и трудоустройства в ведущих компаниях - Государственный диплом за 2 года Магистратура в Центральном университете — это современный подход к образованию, сильный преподавательский состав и актуальные кейсы от индустрии. Оставляй заявку на грант уже сейчас! Подать заявку #реклама 16+ apply.centraluniversity.ru О рекламодателе

МТС приглашает разработчиков на масштабную ИТ-конференцию True Tech Day 6 июня. Участие бесплатное. В программе — спикеры российского и международного ИИ-рынка, лидеры бигтехов и ученые. Тебя ждут 4 трека и 40+ докладов. Какие темы будем обсуждать: — GPT для роботов: как ИИ учится взаимодействовать с реальным миром. — Мультиагенты — главный AI-тренд 2025. Речь не просто о чат-ботах, а о системах, которые умеют спорить, сотрудничать и достигать целей. — Автоматизация архитектурных аудитов с помощью ИИ: создание архитектурного datalake для сбора данных из Git, Kubernetes, мониторинга и других источников. — Новая архитектура под AI: что приходит на смену микросервисам и как архитектор становится дизайнером когнитивного интерфейса. — Архитектура «as code»: как автоматизировать проверку актуальности схем и генерировать их из реальной инфраструктуры, чтобы разработка всегда соответствовала замыслу архитектора. — Разбор RAG: что это, зачем нужно, архитектурные подходы и их слабые места, как измерять качество и избегать ложных метрик. Среди спикеров: Иван Оселедец (AIRI), Пабло дель Веккио (NTT DATA), Кен Чжун Ли (Kyung Hee University), Алексей Друца (Яндекс), Александр Абрамов (Сбер), Павел Бабин (MWS GPT), Валентин Малых (MTS AI), Антон Скогорев (Т-Банк), Артем Якимчук (Сколтех) и другие эксперты. Тебе точно стоит быть, если ты: — разработчик, архитектор или технический руководитель; — хочешь понять, что реально работает, а что — хайп. Когда: 6 июня Где: Москва, МТС Live Холл и онлайн Регистрация по ссылке.