Библиотека фронтендера | 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 752 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 6 333-o'rinni va Rossiya mintaqasida 31 666-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 20 752 obunachiga ega bo‘ldi.
17 Oktabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -177 ga, so‘nggi 24 soatda esa -3 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 10.04% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 3.98% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 2 084 marta ko‘riladi; birinchi sutkada odatda 826 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 18 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 18 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 752
Obunachilar
-324 soatlar
-447 kun
-17730 kun
Ma'lumotlar yuklanmoqda
O'xshash kanallar
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Oktabr '26Okt '26
Oktabr '26
+32
1 kanalda
Sentabr '26
+59
0 kanalda
Get PRO
Avgust '26
+63
1 kanalda
Get PRO
Iyul '26
+81
1 kanalda
Get PRO
Iyun '26
+212
3 kanalda
Get PRO
May '26
+202
4 kanalda
Get PRO
Aprel '26
+240
10 kanalda
Get PRO
Mart '26
+93
2 kanalda
Get PRO
Fevral '26
+208
4 kanalda
Get PRO
Yanvar '26
+229
2 kanalda
Get PRO
Dekabr '25
+210
5 kanalda
Get PRO
Noyabr '25
+116
3 kanalda
Get PRO
Oktabr '25
+118
1 kanalda
Get PRO
Sentabr '25
+97
1 kanalda
Get PRO
Avgust '25
+94
3 kanalda
Get PRO
Iyul '25
+116
3 kanalda
Get PRO
Iyun '25
+146
2 kanalda
Get PRO
May '25
+138
0 kanalda
Get PRO
Aprel '25
+197
7 kanalda
Get PRO
Mart '25
+317
52 kanalda
Get PRO
Fevral '25
+207
34 kanalda
Get PRO
Yanvar '25
+256
39 kanalda
Get PRO
Dekabr '24
+257
39 kanalda
Get PRO
Noyabr '24
+213
43 kanalda
Get PRO
Oktabr '24
+273
38 kanalda
Get PRO
Sentabr '24
+240
39 kanalda
Get PRO
Avgust '24
+363
37 kanalda
Get PRO
Iyul '24
+215
37 kanalda
Get PRO
Iyun '24
+244
31 kanalda
Get PRO
May '24
+366
35 kanalda
Get PRO
Aprel '24
+378
36 kanalda
Get PRO
Mart '24
+406
30 kanalda
Get PRO
Fevral '24
+402
31 kanalda
Get PRO
Yanvar '24
+509
24 kanalda
Get PRO
Dekabr '23
+493
24 kanalda
Get PRO
Noyabr '23
+401
8 kanalda
Get PRO
Oktabr '23
+553
23 kanalda
Get PRO
Sentabr '23
+801
0 kanalda
Get PRO
Avgust '23
+613
0 kanalda
Get PRO
Iyul '23
+462
0 kanalda
Get PRO
Iyun '23
+295
0 kanalda
Get PRO
May '23
+454
0 kanalda
Get PRO
Aprel '23
+230
0 kanalda
Get PRO
Mart '23
+771
0 kanalda
Get PRO
Fevral '23
+282
0 kanalda
Get PRO
Yanvar '23
+422
0 kanalda
Get PRO
Dekabr '22
+372
0 kanalda
Get PRO
Noyabr '22
+495
0 kanalda
Get PRO
Oktabr '22
+256
0 kanalda
Get PRO
Sentabr '22
+262
0 kanalda
Get PRO
Avgust '22
+383
0 kanalda
Get PRO
Iyul '22
+514
0 kanalda
Get PRO
Iyun '22
+545
0 kanalda
Get PRO
May '22
+232
0 kanalda
Get PRO
Aprel '22
+231
0 kanalda
Get PRO
Mart '22
+261
0 kanalda
Get PRO
Fevral '22
+170
0 kanalda
Get PRO
Yanvar '22
+226
0 kanalda
Get PRO
Dekabr '21
+217
0 kanalda
Get PRO
Noyabr '21
+222
0 kanalda
Get PRO
Oktabr '21
+348
0 kanalda
Get PRO
Sentabr '21
+337
0 kanalda
Get PRO
Avgust '21
+355
0 kanalda
Get PRO
Iyul '21
+304
0 kanalda
Get PRO
Iyun '21
+234
0 kanalda
Get PRO
May '21
+492
0 kanalda
Get PRO
Aprel '21
+404
0 kanalda
Get PRO
Mart '21
+509
0 kanalda
Get PRO
Fevral '21
+500
0 kanalda
Get PRO
Yanvar '21
+514
0 kanalda
Get PRO
Dekabr '20
+17 917
0 kanalda
| Sana | Obunachilarni jalb qilish | Esdaliklar | Kanallar | |
| 18 Oktabr | +6 | |||
| 17 Oktabr | +3 | |||
| 16 Oktabr | +1 | |||
| 15 Oktabr | 0 | |||
| 14 Oktabr | +1 | |||
| 13 Oktabr | 0 | |||
| 12 Oktabr | +7 | |||
| 11 Oktabr | +5 | |||
| 10 Oktabr | +1 | |||
| 09 Oktabr | +2 | |||
| 08 Oktabr | +1 | |||
| 07 Oktabr | 0 | |||
| 06 Oktabr | +2 | |||
| 05 Oktabr | +1 | |||
| 04 Oktabr | 0 | |||
| 03 Oktabr | +2 | |||
| 02 Oktabr | 0 | |||
| 01 Oktabr | 0 |
Kanal postlari
✨ Анимация может быть красивой — и лишней
Пользователь включил в системе уменьшение движения. Это хороший повод убрать выезжающие панели и параллакс, сохранив понятный переход между состояниями.
В Motion для React есть
useReducedMotion(). Хук читает системную настройку и реагирует на её изменения:
import { useReducedMotion } from "motion/react";
// Внутри компонента:
const reduce = useReducedMotion();
const closedX = reduce ? 0 : "-100%";closedX закрытой панели, а открытой — x: 0. При включённой настройке оставьте изменение opacity без движения по экрану.
💡 Этот хук сам не отключает всю анимацию: решение принимает компонент. Проверьте также autoplay фонового видео и параллакс — настройка важна не только для одного перехода.
🔗 Источник
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme #react| 2 | 💡 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 | 1 003 |
| 3 | ⚡ Пусть 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.
🔗 Источник
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#stack | 1 145 |
| 4 | 🧑💻 Какие навыки помогают вам в разработке в 2026 году?
Что вы чаще используете в работе? В каких задачах помогает ИИ, а где проще справиться самостоятельно?
Мы решили собрать портрет современного разработчика — и приглашаем вас поделиться своим опытом. Расскажите, какие навыки вам пригодились и как вы используете ИИ. Если обходите его стороной, нам тоже интересно узнать почему.
Опрос анонимный и займёт около 5 минут. Результаты опубликуем в общем большом исследовании.
👉 Пройти опрос | 793 |
| 5 | ☔️ Планы на выходные снова испортила погода? У нас есть план получше.
Выходные — хороший повод заняться тем, на что вечно не хватает времени. Например, освоить новый навык или углубиться в знакомую тему.
📍 В Proglib Academy покупаешь один курс, а второй получаешь в подарок. Платишь только за один!
Вот несколько сочетаний:
💥 Разработка ИИ-агентов + Python
💥 Machine Learning + Математика для Data Science
Можно выбрать и другие курсы — под свои интересы и цели.
⏳ Акция действует до 18 октября.
➡️ Выбрать курсы и оставить заявку | 1 196 |
| 6 | 🔍 YouTube на странице — без загрузки плеера заранее
Если на странице несколько роликов, полноценные YouTube-iframe могут загрузить лишний код ещё до того, как пользователь решит смотреть видео.
lite-youtube-embed заменяет раннюю загрузку плеера лёгкой обложкой с кнопкой. Полноценный iframe появляется при активации. Это custom element — его можно использовать без React или Vue.
<lite-youtube
videoid="goiWrNiaT0I"
playlabel="Посмотреть ролик">
</lite-youtube>
Для работы подключите CSS и JS пакета: одного тега недостаточно. В репозитории есть демо и вариант progressive enhancement со ссылкой на видео, если JavaScript ещё не загрузился.
Выигрыш измеряйте на своей странице, а не по рекламному множителю из README.
🔗 Источник
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#stack | 1 283 |
| 7 | Вебинар в прямом эфире уже идёт десять минут. Вы только открыли трансляцию. Что для вас важнее всего? | 931 |
| 8 | Приходится ли вам копипастить данные и какие именно, когда переходите из одной нейросети в другую? | 933 |
| 9 |  Общая папка для работы Claude Code и Codex
Луи-Франсуа Бушар собрал заметки, инструкции-скиллы, скрипты и итоги встреч в Obsidian. Его связка устроена так:
Папка хранит исходные материалы и решения
↓
Индекс указывает, где искать данные для задачи
↓
Claude Code планирует работу
↓
Codex выполняет задачи по его вызову
В описании этого рабочего процесса Бушар объясняет, зачем даёт агенту сведения для конкретной задачи. Начать предлагает с общей папки, короткого индекса и одного повторно используемого скилла.
#ии #инструменты | 867 |
| 10 | 🧠 Один 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 | 1 296 |
| 11 |  🏁Тестовый собес на Frontend с разработчиком из R-Vision, ex-Сбер
15 октября в 19:00 (МСК) приходи посмотреть открытое онлайн-собеседование на Frontend-разработчика!
Интервьюер: Даниил Дмитриев – Frontend-разработчик в R-Vision, ex-Сбер. Пишет на React и TypeScript, совмещает роль тимлида, менторит разработчиков и проводит код-ревью.
На эфире нет сценария ↓
Кандидат – случайный разработчик, который не знает вопросов заранее.
На обычном собесе ты не знаешь, что думает интервьюер, пока не придёт фидбек. На этом эфире Даниил проговорит всё вслух:
— какие вопросы и задачи даёт кандидатам на Frontend-собесах;
— что в каждом ответе засчитал бы, а что нет — и почему.
А в конце ответит на твои вопросы.
Эфир проходит в рамках менторской программы от ШОРТКАТ для разработчиков, которые хотят повысить грейд, ЗП и прокачать скиллы!
Участие бесплатное 🔥
Зарегаться на эфир можно в боте → @shortcut_front_bot
Реклама.
О рекламодателе. | 1 198 |
| 12 | 🧊 Стеклянный интерфейс, в котором кнопки остаются кнопками
OpenGlass UI — библиотека из 40 компонентов для React: кнопки, меню, диалоги, поля ввода и другие элементы со стеклянными поверхностями.
Интересен подход к рендерингу: режим auto использует CSS, а SVG-преломление и WebGL включаются отдельно. Текст остаётся в DOM, поэтому его можно выделять, а элементы — фокусировать.
🔘 Есть состояния для reduced motion, reduced transparency и системных контрастных цветов. Лицензия — MIT; React и React DOM подключаются как peer dependencies.
Красивое демо не заменяет проверку своего интерфейса: перед внедрением проверьте контраст на ваших фонах и управление с клавиатуры.
🔗 Источник
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#stack #react | 1 370 |
| 13 | 👀 Как вы смотрите видео?
Разбираете урок, слушаете интервью фоном или начинаете на телефоне, а продолжаете на большом экране?
Хотим узнать, что делает просмотр удобным для вас. Вспомните последнее видео — ролик, урок, фильм или серию сериала — и расскажите о своём опыте. Если детали не запомнились, можно так и ответить.
🕰️ Опрос займёт около 3 минут.
В результатах сможете сравнить свои привычки с ответами других участников. А разработчики и инженеры видеоплатформы расскажут, что происходит по ту сторону экрана, пока вы смотрите видео.
🔗 Поделиться опытом
🐸 Библиотека программиста | 1 033 |
| 14 | 💡 CSS замечает, когда декор наезжает на контент
Декоративная картинка выглядит хорошо на широком экране, а на узком перекрывает карточки. Обычный брейкпоинт приходится подбирать под конкретный макет.
Ахмад Шадид показывает другой подход: с помощью anchor positioning связывает вспомогательный элемент с краями картинки и секции. Его ширина равна зазору между ними.
Когда зазор становится меньше ширины вложенного псевдоэлемента, возникает overflow. Scroll-driven animation использует это состояние, чтобы скрыть декор.
⚠️ Это эксперимент с демо, а не универсальная замена медиазапросам: нужны обе возможности браузера — anchor positioning и scroll-driven animations. Для production оставьте запасной вариант.
🔗 Источник
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#under_hood #css | 1 551 |
| 15 | От чатбота к агентам: опыт Митчелла Хашимото
Для работы с кодом Хашимото перешёл от отдельного чата к агенту, который читает файлы проекта и запускает программы. После этого начал повторять собственную работу: сначала решал задачу сам, затем давал её агенту без готового решения.
Так он выяснял, какие задачи можно поручать ИИ. Дальше добавлял инструкции в AGENTS.md, файл с правилами проекта, и способы проверить изменения, включая запуск тестов.
В истории освоения ИИ в разработке Хашимото связывает выбор задач с настройкой рабочего окружения. Отдельные чаты при этом остались в его повседневной работе.
#ии #инструменты | 1 542 |
| 16 | Где вы чаще всего работаете с ИИ-инструментом? | 1 455 |
| 17 |  +4⭐️ Что стоит знать про работу с массивами и объектами
Работа с массивами и объектами — не только про хранение данных, но и про правильную трансформацию, фильтрацию и аккумулирование значений, соблюдая иммутабельность.
Что в карточках:
➡️ Что такое иммутабельность и зачем её соблюдать
➡️ Как работают методы массивов map, filter и reduce
➡️ Конкретный пример кода на reduce с объяснением аргументов и отличий от forEach
📌 Для практики: попробуйте фильтровать пользователей, создать массив имён и посчитать сумму через reduce — классические кейсы на собеседованиях.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme | 2 503 |
| 18 | 🔍 BaseWatch — следит за фичами вместо тебя
Сервис отслеживает, когда веб-технологии становятся достаточно поддерживаемыми, чтобы их можно было тянуть в прод.
🔜 Вы просто подписываетесь на нужные фичи
🔜 И получаете уведомление, когда они «дозрели»
Как это использовать:
— следишь за CSS Grid Lanes → получаешь сигнал, когда можно юзать
— ждёшь JPEG XL → не пропустишь момент
— не тратишь время на постоянные проверки
🔴 Почему это полезно:
— меньше ручной проверки поддержки
— быстрее принимаешь техрешения
— не тащишь сырые фичи в прод
— держишь руку на пульсе без перегруза
🔗 Ссылка на сайт
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#stack | 2 048 |
| 19 | 🤔 Вопрос с собеседования
Какое свойство чаще всего забывают при использовании ::before и ::after?
👇 Правильный ответ (нажми, чтобы прочитать):
Для псевдоэлементов ::before и ::after почти всегда нужно задавать content. Без него псевдоэлемент обычно не появится на странице.
🟢 Например:
.button::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: red;
}
Даже если внутри нет текста, пустая строка всё равно нужна:
content: "";
🔜 Идеальный короткий ответ:
::before и ::after создаются через свойство content. Если его не указать, псевдоэлемент обычно не будет отрисован, даже если задать ему размеры, цвет или позиционирование.
👍 — знал/а
🔥 — стало понятнее
🐸 Библиотека фронтендера
#career_merge | 1 947 |
| 20 |  😕 TypeScript невозможно нормально выучить только через туториалы
Пока не начинаешь писать сложные generic-типы, разбирать infer, conditional types и narrowing — кажется, что TS заканчивается на interface и type.
🔤 TypeHero — платформа для практики TS через реальные задачи. Можно решать готовые челленджи, прокачивать понимание type system и даже публиковать собственные задачи.
Особенно полезно тем, кто:
✅ готовится к frontend-собесам
✅ хочет лучше понимать TS inference
✅ постоянно натыкается на странные ошибки типов
✅ хочет выйти за пределы «базового TypeScript»
🔗 Ссылка
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#stack #typescript | 1 905 |
