Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
Kanalga Telegram’da o‘tish
Все самое полезное для фронтенда в одном канале. Наши курсы: https://clc.to/WV2U4g По рекламе: @proglib_adv Для обратной связи: @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 21 142 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 6 249-o'rinni va Rossiya mintaqasida 31 496-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 21 142 obunachiga ega bo‘ldi.
27 Iyul, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -159 ga, so‘nggi 24 soatda esa 4 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 6.24% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.07% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 319 marta ko‘riladi; birinchi sutkada odatda 860 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 11 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
По рекламе: @proglib_adv
Для обратной связи: @proglibrary_feeedback_bot
РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4”
Yuqori yangilanish chastotasi (oxirgi ma’lumot 28 Iyul, 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.
21 142
Obunachilar
+424 soatlar
-377 kunlar
-15930 kunlar
Ma'lumot yuklanmoqda...
O'xshash kanallar
Taglar buluti
Kirish va chiqish esdaliklari
---
---
---
---
---
---
Obunachilarni jalb qilish
Iyul '26
Iyul '26
+74
1 kanalda
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 | |
| 28 Iyul | +2 | |||
| 27 Iyul | +7 | |||
| 26 Iyul | +4 | |||
| 25 Iyul | 0 | |||
| 24 Iyul | +4 | |||
| 23 Iyul | 0 | |||
| 22 Iyul | +1 | |||
| 21 Iyul | +1 | |||
| 20 Iyul | +1 | |||
| 19 Iyul | +1 | |||
| 18 Iyul | +6 | |||
| 17 Iyul | +3 | |||
| 16 Iyul | 0 | |||
| 15 Iyul | +4 | |||
| 14 Iyul | +13 | |||
| 13 Iyul | +2 | |||
| 12 Iyul | 0 | |||
| 11 Iyul | +1 | |||
| 10 Iyul | +3 | |||
| 09 Iyul | +5 | |||
| 08 Iyul | +4 | |||
| 07 Iyul | 0 | |||
| 06 Iyul | +1 | |||
| 05 Iyul | 0 | |||
| 04 Iyul | +3 | |||
| 03 Iyul | +4 | |||
| 02 Iyul | +2 | |||
| 01 Iyul | +2 |
Kanal postlari
😧 Как определить системную тему в JavaScript
prefers-color-scheme показывает, какую тему пользователь выбрал в системе: светлую или тёмную.
🔜 Через matchMedia() это можно проверить из JavaScript:
console.log(theme.matches ? 'dark' : 'light’);
theme.addEventListener('change', ({ matches }) => {
document.documentElement.dataset.theme =
matches ? 'dark' : 'light';
});| 2 |  😱 Знакомо? Лимит уже закончился, а задача всё ещё не готова. Часть токенов могла уйти на повторное чтение файлов, лишний контекст и неудачные попытки.
⚡️ Этому посвящён отдельный блок курса «ИИ для разработчиков». Вы разберёте расходы на собственных проектах, сравните подходы и найдёте места, где агент выполняет лишнюю работу.
В итоге станет понятнее, сколько ресурсов выделять на запуск, когда его останавливать и в какой момент лучше изменить подход 🔍
До 31 июля курс можно купить со скидкой, а все материалы останутся в бессрочном доступе.
🔗 Узнать подробности о курсе
🏃♀️ Proglib Academy | 326 |
| 3 | Куда на самом деле уходят токены во время агентного кодинга? 🔥 | 384 |
| 4 |  +4⭐️ Что стоит знать про WebGL
WebGL — это не только 3D в браузере, а доступ к возможностям GPU из JavaScript для игр, симуляций, карт и визуализаций.
Что разобрано в карточках:
➡️ Что такое WebGL и как он работает в браузере
➡️ Зачем он нужен и где применяется
➡️ Какие библиотеки упрощают работу с WebGL
➡️ Минимальный пример инициализации контекста
📌 Для профи рекомендуем книгу OpenGL ES 2.0 Programming Guide — это база, на которой построен WebGL, и лучший способ понять, как всё работает под капотом.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#career_merge | 909 |
| 5 |  🧩 UX Components — энциклопедия элементов интерфейса
Сервис помогает понять, какой UI-компонент выбрать и как его использовать.
Для аккордеонов, поиска, таблиц, чатов и других паттернов есть:
— сценарии использования и состояния;
— названия в разных дизайн-системах;
— иконки из 12 библиотек;
— рекомендации W3C ARIA;
— промпты для AI-инструментов.
Также можно изучить 210 дизайн-систем, сравнить компоненты и подключить базу через MCP.
🔗 Ссылка
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#stack | 1 079 |
| 6 | ![📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #pixel_pause](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDACgcHiMeGSgjISMtKygwPGRBPDc3PHtYXUlkkYCZlo+AjIqgtObDoKrarYqMyP/L2u71////m8H////6/+b9//j/2wBDASstLTw1PHZBQXb4pYyl+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj4+Pj/wAARCAAeACgDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwCkgJTJFIR8wqXHl25z1pTHF180demRQU9Ct60EN2Un6VZWGE9ZQB/vCnqsSA4lVmxwPU0CKXB4wd2elFI8rCViRhiTmigB8LliRninPH/d/KoIm2vV1JGC8EigCsFO7bg59KkB8pjvXDemKeSCwYltw6c9Kjl8tny5cse/FMZBJueZiFOSelFTyyrI5bZyR1z0ooEf/9k=){kind=small} 📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#pixel_pause | 1 102 |
| 7 |  😳 Documentation Driven Development звучит как ещё один модный термин. Пока не попробуешь объяснить свой проект AI.
Агент работает только с тем контекстом, который ему дали. Если документация неполная или устарела, он начинает додумывать — отсюда появляется неверный код.
🔘 На курсе «ИИ для разработчиков» эту тему разбирает Арсений Харланов. Он покажет, как подготовить документацию и контекст, чтобы агент понимал архитектуру проекта, ограничения и связи между компонентами.
Также разберём, как выбирать модель под задачу: Claude, DeepSeek, Qwen и другие ✏️
Впереди 7 недель работы со своим репозиторием. Вебинары проходят вживую и остаются в записи.
Стартуем 31 августа. До конца июля можно присоединиться по ранней цене, а доступ к материалам останется бессрочным 😀
🔗 Посмотреть, что будет на курсе
🏃♀️ Proglib Academy | 841 |
| 8 | 🤨 Хорошая документация сегодня экономит время не только коллегам, но и AI. Почему она стала важнее, чем кажется, — в посте ниже 👇 | 937 |
| 9 |  🦊 Firefox 153: что нового
Mozilla выпустила Firefox 153. Собрали изменения, которые действительно пригодятся в работе.
🅰️ Picture-in-Picture API теперь поддерживается на десктопе — сайты могут программно переключать видео в режим «картинка в картинке».
🅰️ HTML <select> стал гибче: браузер теперь корректно парсит вложенные элементы, что открывает путь к кастомизируемым селектам.
🅰️ Импорт текста как модуля — появилась поддержка import ... with { type: "text" }.
🅰️ Intl.Locale получил новые методы (getCalendars(), getTimeZones(), getWeekInfo() и другие) для работы с локалями.
🅰️ IndexedDB — поддержаны IDBObjectStore.getAllRecords() и IDBIndex.getAllRecords().
🅰️ WebAssembly JS Promise Integration — WASM теперь может напрямую взаимодействовать с асинхронными JavaScript API через Promise.
🅰️ DevTools — Accessibility Inspector теперь показывает уровень заголовков (h1–h6), а не только сам факт, что элемент является заголовком.
🅰️ CSS — @supports selector(::-webkit-scrollbar) теперь возвращает true для совместимости, хотя полноценной поддержки стилизации этих псевдоэлементов по-прежнему нет.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#release_notes #firefox | 1 048 |
| 10 |  +4⚽ Турнирная сетка FIFA выглядит сложно. Но проблема не в CSS, а в подходе к разметке.
На оригинальном сайте левая и правая части каждого этапа вынесены в отдельные элементы — HTML фактически повторяет расположение блоков на экране.
🔤 В карточках покажем более чистый вариант: как собрать такую же сетку через CSS Grid и Subgrid, сохранить логичную структуру DOM и адаптировать интерфейс без переписывания разметки.
🔗 Источник
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#ux_review | 1 267 |
| 11 | 📌 useCallback: мемоизация функций в React
useCallback(fn, deps) сохраняет одну и ту же ссылку на функцию между рендерами, пока не изменились зависимости.
Почему важно:
В React функции создаются заново при каждом рендере. Если их передавать в React.memo-компоненты или использовать в useEffect зависимостями — это вызовет лишние рендеры/эффекты.
const handleClick = useCallback(() => {
doSomething();
}, []);
💡 Антипример:
Без useCallback дочерний React.memo-компонент будет рендериться каждый раз, потому что функция — новый объект.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme | 1 323 |
| 12 |  🤢 Чем больше разработчиков в команде начинают пользоваться Claude Code, тем заметнее одна проблема: кодовая база перестаёт выглядеть как работа одной команды.
Где-то есть тесты, где-то их забыли. Где-то агент следует архитектуре проекта, где-то предлагает решение, которое с ней не сочетается.
⚠️ И это не проблема Claude Code. Он просто следует тому контексту, который получает от каждого разработчика.
Завтра покажем, как передать AI инженерный контекст команды и не превратить его внедрение в ещё один источник хаоса.
🗓 23 июля, 19:00 МСК
Бесплатно. 60 минут доклада + 30 минут вопросов.
🔗 Занять место на вебинаре и разобраться, почему так происходит
🏃♀️ Proglib Academy | 1 236 |
| 13 | 👀 Скорость разработки растёт, но вместе с ней появляется новая проблема — кодовая база быстро теряет единый стиль.
Ниже — бесплатный вебинар о том, как этого избежать 💡 | 1 292 |
| 14 |  🌈 Анимированные 3D-градиенты без Three.js
Neat — визуальный редактор для создания анимированных WebGL-градиентов. Выбираете цвета и эффекты, смотрите результат в реальном времени и переносите готовую конфигурацию в проект.
В новой версии движок переписали на чистый WebGL: размер сборки сократился примерно с 133 до 17 КБ gzip, а внешних зависимостей больше нет.
🔤 Есть готовые пресеты, React-пример, разные 3D-формы, зернистость, свечение и параллакс при скролле.
Использовать можно бесплатно, но для удаления водяного знака нужна лицензия за €12 на домен 📍
🔗 Попробовать редактор
🔗 GitHub
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#stack | 1 424 |
| 15 | 🤔 Что важнее для производительности длинного списка?
❤️ — обернуть каждый элемент в React.memo
🔥 — показывать только видимые элементы через виртуализацию
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#code_challenge | 1 306 |
| 16 | 🌗 Тёмная тема только через prefers-color-scheme — не лучший вариант
Системную тему стоит использовать как настройку по умолчанию, но пользователю полезно оставить выбор для конкретного сайта.
В <head> добавляем:
<meta name="color-scheme" content="light dark">
А переключатель меняет значение на:
meta.content = "light"; // светлая
meta.content = "dark"; // тёмная
meta.content = "light dark"; // как в системе
🔤 Выбор можно сохранить в localStorage.
color-scheme влияет не только на собственные стили, но и на системные цвета, скроллбары и стандартные элементы формы. При этом prefers-color-scheme по-прежнему отражает тему ОС, а не выбранную тему сайта — это важно учитывать.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme #css | 1 484 |
| 17 |  😸 Каждый разработчик подходит к задаче со своим опытом: помнит прошлые решения, знает ограничения проекта и понимает, какой код команда пропустит на ревью.
Для человека это естественная часть работы. У Claude Code этого контекста по умолчанию нет — только задача и инструкции, которые ему дали.
Поэтому в большой команде недостаточно просто выбрать хорошую модель.
❗️ Нужно ещё объяснить ей, как у вас устроена разработка: какие подходы приняты, что обязательно проверять и по каким правилам принимать решения.
🗓 23 июля в 19:00 МСК поговорим об этом на бесплатном вебинаре с Алексеем Жиряковым — он Executive Director в Сбере, руководит
GenAI Data Platform, и с этой проблемой сталкивался не раз 🔥
Покажет живое демо, разберём, как встроить AI в процесс разработки так, чтобы он реально помогал, а не добавлял ещё один повод для споров на ревью.
🔗 Занять место на вебинаре
🏃♀️ Proglib Academy | 1 084 |
| 18 | ✏️ Если вы уже работаете с Claude Code, Cursor или Copilot, этот вебинар будет особенно полезен.
Разберут, как превратить AI из инструмента для отдельных задач в часть инженерного процесса ⬇️ | 1 162 |
| 19 |  +4🏗 Разбираем Layout Shift
Когда страница загружается, а кнопки и текст смещаются — это не просто раздражает, а напрямую влияет на UX и рейтинг сайта.
В карточках:
— что такое CLS и как его измеряют,
— как находить источник смещения,
— и какие практики помогают сделать интерфейс статичным и предсказуемым.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#career_merge | 1 427 |
| 20 |  🧑💻 Учиться агентной разработке — у тех, кто уже внедряет её в бигтехе
Курс «ИИ для разработчиков» ведут практики из ведущих российских IT-компаний 🔥
🔵 Они прошли путь от первых экспериментов с AI до рабочих процессов, в которых агенты помогают команде писать код, готовить PR и быстрее доводить задачи до продакшена.
В ближайшее время познакомим вас с каждым преподавателем. Программа курса — по ссылке 🎹
🏃♀️ Proglib Academy | 866 |
