Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
Открыть в Telegram
Все самое полезное для фронтенда в одном канале. Наши курсы: https://clc.to/WV2U4g По рекламе: @tproger_sales_bot Для обратной связи: @proglibrary_feeedback_bot РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Больше
📈 Аналитический обзор Telegram-канала Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
Канал Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js (@frontendproglib) языкового сегмента Русский является активным участником. Сейчас сообщество объединяет 20 618 подписчиков, занимая 6 396 место в категории Технологии и приложения и 31 760 место в регионе Россия.
📊 Показатели аудитории и динамика
С момента создания невідомо проект демонстрирует стремительный рост, собрав аудиторию из 20 618 подписчиков.
Согласно последним данным от 07 ноября, 2026, канал показывает стабильную активность. За последние 30 дней изменение числа участников составило -180, а за последние 24 часа — -1, при этом общий охват остаётся высоким.
- Статус верификации: Не верифицирован
- Уровень вовлечённости (ER): Средний показатель вовлечённости аудитории составляет 8.28%. В первые 24 часа после публикации контент обычно набирает 4.05% реакций от общего числа подписчиков.
- Охват публикаций: В среднем каждый пост получает 1 708 просмотров. В течение первых суток публикация набирает 835 просмотров.
- Реакции и взаимодействия: Аудитория активно поддерживает контент: среднее количество реакций на один пост — 3.
- Тематические интересы: Контент сосредоточен на ключевых темах, таких как фронтендера, навигация, css, javascript, api.
📝 Описание и контентная политика
Автор описывает ресурс как площадку для выражения субъективного мнения:
“Все самое полезное для фронтенда в одном канале.
Наши курсы: https://clc.to/WV2U4g
По рекламе: @tproger_sales_bot
Для обратной связи: @proglibrary_feeedback_bot
РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4”
Благодаря высокой частоте обновлений (последние данные получены 08 ноября, 2026) канал поддерживает актуальность и высокий уровень охвата публикаций. Аналитика показывает, что аудитория активно взаимодействует с контентом, что делает его важной точкой влияния в категории Технологии и приложения.
20 618
Подписчики
-124 часа
-347 дней
-18030 дней
Архив постов
💡 Расширение DevTools показывает, когда должна запускаться анимация при прокрутке
Элемент уже появился на экране, а анимация ещё не началась. Чтобы разобраться с диапазонами запуска, можно открыть Scroll-Triggered Animations Debugger.
Расширение добавляет панель в DevTools с картой прокрутки, границами активации и индикатором состояния. Значения диапазонов можно менять прямо в панели и сразу проверять результат.
Инструмент поддерживает
scroll(), view() и элементы с position: sticky. Относительные единицы вроде vh панель показывает уже пересчитанными в пиксели.
Пригодится для отладки появления карточек, заголовков и других эффектов, привязанных к положению страницы. Для элементов внутри iframe у расширения пока есть ограничения.
➡️ Навигация: Вакансии • Избранные вакансии
🐸 Библиотека фронтендера💡 modern-web-types добавляет TypeScript-типы для новых браузерных API
Браузер уже поддерживает API, а TypeScript сообщает, что такого свойства нет. Стандартный набор DOM-типов может отставать: он ориентируется на возможности, доступные как минимум в двух движках.
Пакет modern-web-types использует порог в один движок и добавляет типы для более новых возможностей платформы.
Пригодится, если проект использует свежие браузерные API. После подключения типов сохраните проверку доступности функции во время выполнения: она определяет, какой код запустится у пользователя.
➡️ Навигация: Вакансии • Избранные IT-вакансии
🐸 Библиотека фронтендера
💡 iframe может менять высоту вслед за содержимым
Встроенная форма стала длиннее, а рамка осталась прежней — появилась лишняя прокрутка. Для такого сценария в Chromium есть механизм подстройки размера:
iframe {
frame-sizing: content-height;
}window.requestResize() после изменения содержимого.
Подойдёт для форм, виджетов и других встраиваемых страниц. Добавьте проверку через @supports и сохраните вариант с postMessage для браузеров без поддержки.
➡️ Навигация: Вакансии • Избранные IT-вакансии
🐸 Библиотека фронтендера💡 Base UI позволяет добавить поиск по пунктам меню
Для фильтрации меню используются
Menu.FilterProvider, поле Menu.Input и список Menu.List. Провайдер хранит поисковый запрос и связывает части компонента.
В документации с примерами разобраны фильтрация, управление состоянием и вложенные меню. Для каждого подменю с поиском нужен свой провайдер.
При внедрении пройдите весь сценарий с клавиатуры: открыть меню, набрать запрос, выбрать пункт и закрыть список. Проверьте также очистку запроса при повторном открытии.
➡️ Навигация: Вакансии • Избранные IT-вакансии
🐸 Библиотека фронтендера💡 Доступность компонента можно проверять по готовым сценариям
В библиотеке TetraLogical собраны восемь компонентов, включая аккордеон, диалог, вкладки и текстовое поле. У каждого есть код, документация и проверки, связанные с критериями WCAG 2.2.
В разборе библиотеки показано, как сценарии запускают в браузере через Cucumber и Playwright. Около 97% сценариев автоматизированы, остальные собраны в список ручных проверок.
Возьмите компонент из своего проекта и сравните поведение: клавиатуру, фокус, состояния и сообщения. Подходящие сценарии можно добавить в тесты дизайн-системы.
➡️ Навигация: Вакансии • Избранные IT-вакансии
🐸 Библиотека фронтендера
💡 Единица lh помогает выровнять иконку по первой строке текста
Иконка рядом с короткой подписью выглядит ровно. Подпись переносится на три строки — и при
align-items: center иконка оказывается посередине всего абзаца.
В разборе выравнивания иконок предлагается привязать смещение к высоте строки:
.item {
display: flex;
align-items: start;
gap: 0.5rem;
}
.icon {
--size: 20px;
width: var(--size);
height: var(--size);
flex-shrink: 0;
transform: translateY(calc((1lh - var(--size)) / 2));
}lh берёт значение line-height самого элемента. При одинаковой высоте строки у иконки и подписи формула центрирует иконку относительно первой строки текста. flex-shrink: 0 сохраняет её ширину в тесном контейнере.
Проверьте компонент с длинной подписью, увеличенным шрифтом и узкой шириной. В статье есть интерактивные примеры для SVG и иконок через псевдоэлемент.
📍 Навигация: База знаний • Вакансии
🐸 Библиотека программиста💡 calc-size() подгоняет высоту секции под целые плитки фона
У секции повторяющийся фоновый узор. Текст меняется, высота блока тоже, и нижний ряд рисунка обрезается посередине.
Связка calc-size() и round() позволяет округлить естественную высоту секции до размера целой плитки:
.section {
--tile-height: 44px;
height: calc-size(
auto,
round(up, size, var(--tile-height))
);
}size — высота, рассчитанная по содержимому. round(up, ...) увеличивает её до ближайшего значения, кратного 44 пикселям. Размер самого фонового рисунка сохраняется.
В статье есть примеры с разной длиной текста и вертикальными отступами. На момент публикации решение работает в Chrome. Подключайте его через @supports, сохраняя обычную автоматическую высоту для остальных браузеров.
📍 Навигация: База знаний • Вакансии
🐸 Библиотека программиста💡 Grid Lanes раскладывает карточки разной высоты средствами CSS
У карточек в галерее разная высота: где-то длиннее подпись, где-то крупнее изображение. Для плотной раскладки можно использовать masonry — размещать следующую карточку в подходящей колонке.
В разборе CSS Grid Lanes показан новый режим такой вёрстки:
.gallery {
display: grid-lanes;
grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
gap: 1rem;
}@supports (display: grid-lanes).
📍 Навигация: База знаний • Вакансии
🐸 Библиотека программиста🔍 DevTools позволяет выбрать положение всплывающего элемента на сетке
Подсказку или меню привязали к кнопке через CSS Anchor Positioning. Теперь нужно выбрать, с какой стороны от кнопки появится элемент и как он выровняется.
В Chrome DevTools появился визуальный редактор position-area. Он открывает сетку, на которой можно выбрать область относительно якоря. Значение CSS обновляется при выборе, поэтому результат сразу виден на странице.
Откройте Elements → Styles и нажмите значок рядом с объявлением position-area. Выберите область целиком или настройте оси по отдельности. Для подробной проверки доступна подсветка границ области позиционирования.
Инструмент пригодится при настройке подсказок, меню и других привязанных элементов. Подберите положение в DevTools, затем перенесите значение в стили компонента и проверьте его у краёв экрана.
📍 Навигация: Вакансии
🐸 Библиотека фронтендера
💡 touch-action убирает случайный зум при быстрых нажатиях на кнопку
Быстро нажимаете «плюс» в счётчике товара — браузер увеличивает страницу. На телефоне два последовательных нажатия могут распознаться как жест масштабирования.
Для таких кнопок есть короткое CSS-правило:
.quantity-button {
touch-action: manipulation;
}🔍 CrUX показывает метрики переходов между экранами SPA
Пользователь открыл приложение, перешёл в каталог, затем в карточку товара. Для оценки скорости каждого экрана важно учитывать переходы внутри приложения.
В CrUX появились экспериментальные версии LCP, INP и CLS с учётом soft navigation. Они учитывают переходы, при которых JavaScript меняет содержимое страницы и URL. INP и CLS разделяются по отдельным просмотрам, а данные в CrUX API можно получить для адреса, на который перешёл пользователь.
Это поможет найти медленные экраны в SPA и сравнить их с первой загрузкой. Новые показатели доступны в CrUX API, History API, BigQuery и CrUX Vis. Основные оценки Core Web Vitals и данные Search Console пока рассчитываются по прежним правилам.
Начните с CrUX Vis: откройте адрес своего приложения и сравните обычные показатели с экспериментальными. Выберите экран с проблемной метрикой и запишите переход на него в Performance.
📍 Навигация: Вакансии
🐸 Библиотека фронтендера
🔍 У Warp утекли логи ИИ-агентов и телеметрия
Атака на стороннего поставщика могла затронуть около 1% пользователей — это предварительная оценка главы Warp.
Используете Warp как терминал и ИИ-помощника для фронтенда? В статье объяснили, какие данные собирает приложение и как через Network Log посмотреть его сетевые запросы. Точный состав утечки пока не раскрыт.
Что известно об инциденте и какие настройки есть в Warp
#readme #инструменты
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
💡 Свой чекбокс можно оформить поверх нативного input
Чекбоксу нужны фирменная рамка и своя галочка. За выбор значения, фокус и работу с клавиатурой продолжает отвечать обычный input.
В разборе кастомного чекбокса показан такой подход: input помещают в label, рядом добавляют декоративный SVG. Стандартный внешний вид убирают через appearance: none, а галочку показывают по состоянию :checked. SVG скрывают от скринридера с помощью aria-hidden="true".
Часть CSS для переключения галочки:
.checkbox input:checked + svg {
display: block;
}💡 Ответ fetch можно читать порциями через for await...of
Чтобы обработать большой ответ, не обязательно сначала целиком превращать его в строку через response.text(). Тело ответа — ReadableStream, который можно читать по мере поступления данных.
Например, посчитать полученные байты:
const response = await fetch("/api/export");
if (!response.ok || !response.body) {
throw new Error("Не удалось получить данные");
}
let bytes = 0;
for await (const chunk of response.body) {
bytes += chunk.byteLength;
console.log(bytes);
}⚡ Долгую задачу в Web Worker можно измерить отдельно от основного потока
Основной поток свободен, INP выглядит хорошо, а поиск всё равно долго не показывает результат. Возможно, интерфейс ждёт вычисление в Worker.
Перенос работы в Worker защищает от блокировки отрисовки, но не делает само вычисление быстрым. Большой фильтр или обработка изображения могут надолго занять уже его цикл событий.
Chrome 153 расширил Long Animation Frames API на dedicated Workers. Проверять поддержку и создавать наблюдатель нужно внутри Worker:
if (PerformanceObserver.supportedEntryTypes
.includes("long-animation-frame")) {
new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(entry.duration);
}
}).observe({ type: "long-animation-frame" });
}
📌 Один курс — хорошее вложение в себя. Два по той же цене — ещё лучше.
В Proglib Academy действует акция: покупаешь один курс, а второй получаешь в подарок.
Например, можно совместить два направления по работе с ИИ:
💥 ИИ для разработчиков — применение нейросетей в повседневной разработке: работа с кодом, тестирование и ревью. 💥 Разработка ИИ-агентов — архитектура агентов и создание собственных AI-решений.📍 Разница в цене — почти 50 тысяч рублей. Можно освоить больше, не выходя за рамки запланированного бюджета. А если тебе интереснее Python, алгоритмы, backend или DevOps — выбирай другую пару курсов из каталога. Акция действует до 31 октября включительно ⏳ ⏮️ Пора прокачать свой стек
💡 W3C упростил дизайн-систему, убрав лишние обёртки и жёсткие правила отступов
Карточка хорошо выглядит в своём списке, но ломается внутри другой карточки. Тексту обязательно нужна специальная обёртка. Отступы завязаны на конкретного родителя.
С такими ограничениями столкнулись пользователи дизайн-системы W3C. В сентябрьском обновлении команда пересмотрела эти зависимости.
Что изменилось:
— карточки получили больше собственных стилей вместо зависимости от контейнера списка;
— ограничение длины строки перенесли с текстовой обёртки на сами элементы;
— убрали жёсткие правила вертикальных отступов, мешавшие использовать компоненты вне CMS;
— девять размеров текста оформили как CSS-переменные;
— где уместно, перешли на логические свойства для разных направлений письма.
Это полезный кейс для ревью своей библиотеки: можно ли вложить компонент в другое окружение без копирования контейнеров и дополнительных исключений?
Убирать все обёртки подряд не требуется. Здесь команда устраняла конкретные зависимости, которые мешали повторному использованию.
🔗 Что и почему изменили в W3C
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
💡 SvelteKit 3 можно обновить через CLI, но адаптеры стоит проверить вручную
Вместе со SvelteKit 3 вышел CLI sv 1.0. Для существующего приложения есть команда миграции:
npx sv migrate sveltekit-3npx sv add enhanced-img🔍 Chrome 155 поддерживает JPEG XL для фотографий и изображений без потерь
JPEG XL снова стоит включить в сравнение форматов изображений. Chrome 155 получил декодирование .jxl через реализацию jxl-rs на Rust.
Команда Chrome выделяет несколько сценариев: фотографии с высоким качеством, сжатие без потерь, HDR и постепенное появление изображения по мере загрузки.
Это не повод конвертировать весь сайт одним скриптом. Авторы рекомендуют пробовать и JPEG XL, и AVIF: результат зависит от картинки и нужного качества.
Для совместимости можно оставить запасной вариант:
<picture>
<source srcset="photo.jxl" type="image/jxl">
<img src="photo.jpg" alt="Горное озеро">
</picture>
😎 Выбираешь один курс, второй получаешь бесплатно. Баг? Нет, акция!
До 31 октября в Proglib Academy можно выбрать два курса и заплатить только за один.
Например, можно совместить:
💥 ИИ для разработчиков — применение нейросетей в повседневной разработке: работа с кодом, тестирование и ревью. 💥 Разработка ИИ-агентов — архитектура агентов и создание собственных AI-решений.Вместе курсы стоят 108 000 ₽, но по акции оба обойдутся в 59 000 ₽. Экономия — 49 000 ₽ 🔥 Интересуют Python и ИИ или алгоритмы и архитектура? Можно выбрать любые два курса из каталога. Акция действует до 31 октября включительно ⏳ ⏬ Собрать свой учебный билд
