Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
Kanalga Telegram’da o‘tish
Все самое полезное для фронтенда в одном канале. Наши курсы: https://clc.to/WV2U4g По рекламе: @tproger_sales_bot Для обратной связи: @proglibrary_feeedback_bot РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Ko'proq ko'rsatish
Tarmoq:📈 Telegram kanali Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js analitikasi
Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js (@frontendproglib) Rus til segmentidagi kanali faol ishtirokchi. Hozirda hamjamiyat 20 696 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 6 393-o'rinni va Rossiya mintaqasida 31 814-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 20 696 obunachiga ega bo‘ldi.
26 Oktabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -191 ga, so‘nggi 24 soatda esa -16 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 7.11% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.11% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 471 marta ko‘riladi; birinchi sutkada odatda 850 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 3 ta reaksiya keladi.
- Tematik yo‘nalishlar: Kontent фронтендера, навигация, css, javascript, api kabi asosiy mavzularga jamlangan.
📝 Tavsif va kontent siyosati
Muallif resursni shaxsiy fikrni ifoda etish maydoni sifatida ta’riflaydi:
“Все самое полезное для фронтенда в одном канале.
Наши курсы: https://clc.to/WV2U4g
По рекламе: @tproger_sales_bot
Для обратной связи: @proglibrary_feeedback_bot
РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 27 Oktabr, 2026 da olingan) sababli kanal doimo dolzarb va katta qamrovli bo‘lib qoladi. Analitika auditoriya kontent bilan faol hamkorlik qilishini, uni Texnologiyalar & Aralashmalar toifasidagi muhim ta’sir nuqtasiga aylantirishini ko‘rsatadi.
20 696
Obunachilar
-1624 soatlar
-517 kun
-19130 kun
Postlar arxiv
💡 Ответ 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 октября включительно ⏳ ⏬ Собрать свой учебный билд
⚡ Vitest 5 позволяет посмотреть браузерный тест по шагам после падения
Тест нажал кнопку, интерфейс изменился, проверка упала. К моменту разбора страница уже находится в другом состоянии — и одного сообщения об ошибке мало.
Trace View в Vitest 5 сохраняет DOM-снимки действий и проверок. Можно выбрать шаг и увидеть, как выглядела страница в тот момент, с подсветкой нужного элемента.
Для настроенного Browser Mode включите:
export default defineConfig({
test: {
browser: {
traceView: true,
},
},
});💡 CSS-переменные позволяют менять иконки без правки HTML
У кнопки удаления должна быть одна иконка, при наведении — другая, а в тёмной теме — третий вариант. Леа Веру предлагает хранить иконки как токены дизайн-системы и выбирать их через CSS.
В её реализации компонент получает переменную:
button.delete {
--icon: var(--icon-trash);
}
button.delete:hover {
--icon: var(--icon-trash-filled);
}💡 Полоса прокрутки появилась — а макет не сдвинулся
Список стал длиннее, появился scrollbar, доступная ширина уменьшилась — и содержимое панели слегка прыгнуло.
scrollbar-gutter позволяет заранее оставить место под полосу.
.panel {
max-height: 24rem;
overflow: auto;
scrollbar-gutter: stable;
}stable both-edges.
⚠️ При overlay-scrollbars, которые рисуются поверх содержимого, gutter не создаётся. Поэтому эффект зависит от системного режима прокрутки; проверяйте и классические, и накладные полосы.
🔗 Источник
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme #css✨ Анимация может быть красивой — и лишней
Пользователь включил в системе уменьшение движения. Это хороший повод убрать выезжающие панели и параллакс, сохранив понятный переход между состояниями.
В Motion для React есть
useReducedMotion(). Хук читает системную настройку и реагирует на её изменения:
import { useReducedMotion } from "motion/react";
// Внутри компонента:
const reduce = useReducedMotion();
const closedX = reduce ? 0 : "-100%";closedX закрытой панели, а открытой — x: 0. При включённой настройке оставьте изменение opacity без движения по экрану.
💡 Этот хук сам не отключает всю анимацию: решение принимает компонент. Проверьте также autoplay фонового видео и параллакс — настройка важна не только для одного перехода.
🔗 Источник
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme #react💡 sort() меняет исходный массив. toSorted() — нет
Нужно отсортировать данные для интерфейса и сохранить исходный порядок?
toSorted() возвращает новый массив — в отличие от sort(), который меняет исходный.
const values = [3, 10, 2];
const sorted = values.toSorted((a, b) => a - b);
console.log(values); // [3, 10, 2]
console.log(sorted); // [2, 3, 10]values.toSorted() даст [10, 2, 3].
И ещё: новый массив не означает глубокую копию. Если элементы — объекты, ссылки на них останутся прежними. Для состояния React это полезное различие: сортировка списка и изменение самих объектов — разные операции.
🔗 Источник
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme #js⚡ Пусть CI замечает, когда бандл распух
Маленькая новая зависимость может заметно увеличить JavaScript, который получает пользователь. Size Limit позволяет задать бюджет и завершить проверку с ошибкой, если сборка его превысила.
Для уже собранного приложения можно начать с
size-limit и @size-limit/file. Пример секции в package.json:
"size-limit": [{
"path": "dist/app-*.js",
"limit": "150 kB"
}]npx size-limit после сборки. По умолчанию file-плагин измеряет размер с Brotli; 150 kB здесь — пример, а не универсальная норма.
💡 Сначала снимите текущий размер и выберите бюджет под проект. Для оценки времени загрузки и выполнения есть отдельные плагины — размер файла не рассказывает всё о стоимости JS.
🔗 Источник
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#stackRepost from Типичный программист
🧑💻 Какие навыки помогают вам в разработке в 2026 году?
Что вы чаще используете в работе? В каких задачах помогает ИИ, а где проще справиться самостоятельно?
Мы решили собрать портрет современного разработчика — и приглашаем вас поделиться своим опытом. Расскажите, какие навыки вам пригодились и как вы используете ИИ. Если обходите его стороной, нам тоже интересно узнать почему.
Опрос анонимный и займёт около 5 минут. Результаты опубликуем в общем большом исследовании.
👉 Пройти опрос
☔️ Планы на выходные снова испортила погода? У нас есть план получше.
Выходные — хороший повод заняться тем, на что вечно не хватает времени. Например, освоить новый навык или углубиться в знакомую тему.
📍 В Proglib Academy покупаешь один курс, а второй получаешь в подарок. Платишь только за один!
Вот несколько сочетаний:
💥 Разработка ИИ-агентов + Python
💥 Machine Learning + Математика для Data Science
Можно выбрать и другие курсы — под свои интересы и цели.
⏳ Акция действует до 18 октября.
➡️ Выбрать курсы и оставить заявку
🔍 YouTube на странице — без загрузки плеера заранее
Если на странице несколько роликов, полноценные YouTube-iframe могут загрузить лишний код ещё до того, как пользователь решит смотреть видео.
lite-youtube-embed заменяет раннюю загрузку плеера лёгкой обложкой с кнопкой. Полноценный iframe появляется при активации. Это custom element — его можно использовать без React или Vue.
<lite-youtube
videoid="goiWrNiaT0I"
playlabel="Посмотреть ролик">
</lite-youtube>Repost from Точка входа в программирование
Вебинар в прямом эфире уже идёт десять минут. Вы только открыли трансляцию. Что для вас важнее всего?
Repost from Типичный программист
Приходится ли вам копипастить данные и какие именно, когда переходите из одной нейросети в другую?
Repost from Типичный программист
Общая папка для работы Claude Code и Codex
Луи-Франсуа Бушар собрал заметки, инструкции-скиллы, скрипты и итоги встреч в Obsidian. Его связка устроена так:
Папка хранит исходные материалы и решения
↓
Индекс указывает, где искать данные для задачи
↓
Claude Code планирует работу
↓
Codex выполняет задачи по его вызову
В описании этого рабочего процесса Бушар объясняет, зачем даёт агенту сведения для конкретной задачи. Начать предлагает с общей папки, короткого индекса и одного повторно используемого скилла.
#ии #инструменты
🧠 Один fetch — две причины отмены
Запрос должен остановиться и по кнопке «Отмена», и по таймауту. Не нужно вручную перебрасывать события между контроллерами:
AbortSignal.any() объединяет сигналы.
const cancel = new AbortController();
const signal = AbortSignal.any([
cancel.signal,
AbortSignal.timeout(5000),
]);
const response = await fetch("/api/report", { signal });cancel.abort(). Сработает тот сигнал, который отменится первым; его причина станет причиной общего сигнала. Если один уже отменён, общий тоже сразу будет отменён.
💡 В рабочем коде обработайте отказ fetch: отмена пользователем и истёкший таймаут — разные сценарии для интерфейса.
🔗 Источник
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme #js