Библиотека фронтендера | 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 807 名订阅者，在 技术与应用 类别中位列第 6 198，并在 俄罗斯 地区排名第 31 380 位。
📊 受众指标与增长动态
自 невідомо 创建以来，项目保持高速增长，吸引了 20 807 名订阅者。
根据 06 十月, 2026 的最新数据，频道保持稳定运转。过去 30 天订阅人数变化为 -166，过去 24 小时变化为 -2，整体触达仍然可观。
- 认证状态： 未认证
- 互动率 (ER)： 平均受众互动率为 8.84%。内容发布后 24 小时内通常能获得 4.36% 的反应，占订阅者总量。
- 帖子覆盖： 每篇帖子平均可获得 1 839 次浏览，首日通常累积 908 次浏览。
- 互动与反馈： 受众积极参与，单帖平均反应数为 25。
- 主题关注点： 内容集中在 фронтендера, навигация, css, javascript, api 等核心主题上。
📝 描述与内容策略
作者将该频道定位为表达主观观点的平台：
“Все самое полезное для фронтенда в одном канале.
Наши курсы: https://clc.to/WV2U4g
По рекламе: @tproger_sales_bot
Для обратной связи: @proglibrary_feeedback_bot
РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4”
凭借高频更新（最新数据采集于 07 十月, 2026），频道始终保持新鲜度与高覆盖。分析显示受众积极互动，使其成为 技术与应用 类别中的关键影响点。
20 807
订阅者
-224 小时
-517 天
-16630 天
帖子存档
+4
⭐️ Что стоит знать про работу с массивами и объектами
Работа с массивами и объектами — не только про хранение данных, но и про правильную трансформацию, фильтрацию и аккумулирование значений, соблюдая иммутабельность.
Что в карточках:
➡️ Что такое иммутабельность и зачем её соблюдать
➡️ Как работают методы массивов map, filter и reduce
➡️ Конкретный пример кода на reduce с объяснением аргументов и отличий от forEach
📌 Для практики: попробуйте фильтровать пользователей, создать массив имён и посчитать сумму через reduce — классические кейсы на собеседованиях.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme
🔍 BaseWatch — следит за фичами вместо тебя
Сервис отслеживает, когда веб-технологии становятся достаточно поддерживаемыми, чтобы их можно было тянуть в прод.
🔜 Вы просто подписываетесь на нужные фичи 🔜 И получаете уведомление, когда они «дозрели»Как это использовать:
— следишь за CSS Grid Lanes → получаешь сигнал, когда можно юзать — ждёшь JPEG XL → не пропустишь момент — не тратишь время на постоянные проверки🔴 Почему это полезно:
— меньше ручной проверки поддержки — быстрее принимаешь техрешения — не тащишь сырые фичи в прод — держишь руку на пульсе без перегруза🔗 Ссылка на сайт 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack
🤔 Вопрос с собеседования
Какое свойство чаще всего забывают при использовании ::before и ::after?
👇 Правильный ответ (нажми, чтобы прочитать):
Для псевдоэлементов ::before и ::after почти всегда нужно задавать content. Без него псевдоэлемент обычно не появится на странице.
🟢 Например:
.button::before {
content: "";
display: inline-block;
width: 8px;
height: 8px;
background: red;
}
Даже если внутри нет текста, пустая строка всё равно нужна:
content: "";
🔜 Идеальный короткий ответ:
::before и ::after создаются через свойство content. Если его не указать, псевдоэлемент обычно не будет отрисован, даже если задать ему размеры, цвет или позиционирование.
👍 — знал/а
🔥 — стало понятнее
🐸 Библиотека фронтендера
#career_merge
😕 TypeScript невозможно нормально выучить только через туториалы
Пока не начинаешь писать сложные generic-типы, разбирать infer, conditional types и narrowing — кажется, что TS заканчивается на interface и type.
🔤 TypeHero — платформа для практики TS через реальные задачи. Можно решать готовые челленджи, прокачивать понимание type system и даже публиковать собственные задачи.
Особенно полезно тем, кто:
✅ готовится к frontend-собесам
✅ хочет лучше понимать TS inference
✅ постоянно натыкается на странные ошибки типов
✅ хочет выйти за пределы «базового TypeScript»
🔗 Ссылка
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#stack #typescript
![📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #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/wAARCAAoAB0DASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDKCqcdKNi0zHt+lHFADyqDrj9ajPWlxnsfypMY60ATSNBhPLQ52/Nn1pm5P7o/X/GnGVmAGB8oxwKYWPcYoAQkego6ds0mc0UAPzGQPlIIHJz1o+T3oooAT5fQ/nSHH+TRRQB//9k=)
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#pixel_pause
🤩 HTML-тег, который умеет форматировать формулы
У <var> есть довольно узкая, но полезная задача: он обозначает переменную в математическом выражении или программном коде.
Например:
<p>
Формула Эйнштейна:
<var>E</var> = <var>m</var> × <var>c</var><sup>2</sup>
</p>
🧊 Иконки для тех, кому надоели обычные SVG
Isocons — библиотека изометрических иконок, где можно прямо перед экспортом настроить внешний вид:
🔘 ракурс 🔘 fill / line 🔘 sharp / rounded 🔘 толщину обводки 🔘 SVG или PNGМожно быстро собрать единый набор иконок под интерфейс, не рисуя всё вручную. 🔗 Ссылка 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack
👩💻 Что нового в Chrome 154
🔴 <iframe> теперь может подстраиваться под содержимое
Больше не обязательно вручную измерять высоту через postMessage() — появился frame-sizing: content-height.
🔴 text-decoration-inset
Позволяет управлять началом и концом underline, overline и line-through — вплоть до анимированных эффектов без дополнительных элементов и градиентов.
🔴 scroll-marker-group стал гибче
Появились режимы links и tabs, которые задают не только поведение маркеров, но и порядок фокуса и accessibility-семантику.
🔗 Ссылка на блог
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#release_digest
🔴 Нужно дать пользователю подсказки, но при этом оставить возможность ввести своё значение? Тут пригодится <datalist>.
Он связывается с <input> и показывает набор вариантов, которые можно выбрать или использовать как подсказки:
<label for="browser">Браузер:</label>
<input list="browsers" id="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
<option value="Edge">
</datalist>
🧠 React уже не приносит удовольствия?
В 2026 разработчики всерьёз начинают спрашивать:
а точно ли React/Next — лучший путь?❤️ — React всё ещё топ 🔥 — давно пора попробовать другое 👍 — главное не фреймворк, а руки 💬 А вы бы начали новый проект без React? 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #code_battle
🤔 Вопрос с собеседования
Что выведет этот код?
❤️ — undefined
🔥 — "Alex"
👍 — "Max"
🤔 — будет ошибка
👇 Правильный ответ (нажми, чтобы прочитать):
После delete admin.name собственного свойства name у admin больше нет. Но admin создан через Object.create(user), поэтому при обращении к admin.name JavaScript ищет свойство в прототипе и находит "Alex".
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#career_merge
![📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #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/wAARCAAoABwDASIAAhEBAxEB/8QAHwAAAQUBAQEBAQEAAAAAAAAAAAECAwQFBgcICQoL/8QAtRAAAgEDAwIEAwUFBAQAAAF9AQIDAAQRBRIhMUEGE1FhByJxFDKBkaEII0KxwRVS0fAkM2JyggkKFhcYGRolJicoKSo0NTY3ODk6Q0RFRkdISUpTVFVWV1hZWmNkZWZnaGlqc3R1dnd4eXqDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uHi4+Tl5ufo6erx8vP09fb3+Pn6/8QAHwEAAwEBAQEBAQEBAQAAAAAAAAECAwQFBgcICQoL/8QAtREAAgECBAQDBAcFBAQAAQJ3AAECAxEEBSExBhJBUQdhcRMiMoEIFEKRobHBCSMzUvAVYnLRChYkNOEl8RcYGRomJygpKjU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6goOEhYaHiImKkpOUlZaXmJmaoqOkpaanqKmqsrO0tba3uLm6wsPExcbHyMnK0tPU1dbX2Nna4uPk5ebn6Onq8vP09fb3+Pn6/9oADAMBAAIRAxEAPwDSJO489/X/AOvSDJ/i/U/41mSXMwupFDnAcgfnU7XLKinPWnbS4r62NBMZ++CfYmpKzVmfAOat2zloyWOTmny6C5jGlP8Apkw/6aH+dKRvJz/CMCmy/wDH5N/vt/OmkyK2QMq3am2luCTb0LKnCgCtCxOYT/vf4Vlw7ncqfl9PetWzjKxEE/xU3JOInFqRni2k+2SuY3xuYg4681IIGx/q2/I0UVk9WbRdkKIXBGI2/I1oQAiMZGD3oopBJn//2Q==)
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#pixel_pause
🤔 Вопрос с собеседования
Что выведет этот код?
❤️ — 42 и 42
🔥 — 42 и undefined
👍 — undefined и undefined
👇 Правильный ответ (нажми, чтобы прочитать):
42
undefined
Обычная функция получает this в зависимости от способа вызова:
obj.regular();
Здесь this указывает на obj, поэтому возвращается 42.
Стрелочная функция не имеет собственного this. Она берёт его из внешнего контекста, где объект создавался. Поэтому this.value не относится к obj и обычно даёт undefined.
🔘 Если нужна стрелочная функция с контекстом объекта, можно использовать обычную функцию или явно привязать this:
const obj = {
value: 42,
arrow: function () {
return this.value;
},
};
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#career_merge
📎 Шпаргалка по фронтенду
Этот документ объединяет ключевые темы, техники и механизмы, которые лежат в основе современной фронтенд-разработки.
➡️ В нём собраны объяснения, примеры и практические заметки, помогающие быстро освежить знания, разобраться в устройстве веб-технологий и подготовиться к выполнению задач или прохождению собеседований.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme
💛 Шрифт, который превращает текст в графики
Datatype — необычный шрифт из Google Fonts, который умеет отображать данные прямо в тексте.
🟡 Например:
{b:10,25,7,95}
🟡 превращается в мини-диаграмму, а такие конструкции позволяют создавать спарклайны, бары и прогресс-бары:
{l:33,46,13,13,89}
{p:70}
Никаких Canvas, SVG или chart-библиотек — достаточно подключить шрифт и использовать специальный синтаксис.
Подойдёт для небольших визуализаций в документах, презентациях, таблицах и интерфейсах.
🔗 Ссылка
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#read_watch⭐️ Шпаргалка по Grid alignment
Если вы хоть раз путались между justify-* и align-* — вы не один. Где ось, где контент, где items — в голове это часто смешивается, особенно в реальных макетах.
🔜 Что внутри:
— разница между justify-content и justify-items
— как работает align-content vs align-items
— все ключевые значения: start, end, center, stretch, space-*
— наглядно по осям
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme #css
😭 Как не потратить недельный лимит AI-кодинга за три дня?
Разберём на вебинаре, как тратить меньше на AI-агентов — без потери качества кода.
🔘 Поговорим о том:
— когда дорогая модель действительно нужна, а когда хватит дешёвой;
— сколько стоит один прогон и куда уходят токены;
— какие задачи можно отдавать субагентам;
— как настроить маршрутизацию моделей;
— что проверять в AI-коде перед merge.
✏️ Покажем всё на конкретных цифрах и вживую: сравним расходы до и после.
⬇️ 18 сентября, 19:00 МСК
⬇️ 1,5 часа · бесплатно
⬇️ Арсений Харланов и Олег Лайок
💬 Пишите в комментариях, где упираетесь в лимиты и на что уходят деньги. Самые залайканные вопросы разберём на вебинаре.
🔗 Зарегистрироваться на вебинар
+4
💡 Собеседования всё чаще затрагивают тему оформления истории коммитов
От того, как вы пишете сообщения в Git, зависит работа CI, ревью и прозрачность релизов.
➡️ В карточках короткий разбор семантических коммитов:
— зачем коммитам задают строгую структуру;
— какой формат используют современные команды;
— примеры, которые показывают уровень разработчика.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#career_merge #middle #senior
А вы уже забрали свой подарок ко Дню программиста?
Мы в Tproger вместе с нашими друзьями собрали целую коробку подарков к вашему профессиональному празднику. Переходите по ссылке, трясите коробку и забирайте свой презент: https://tprg.ru/El3M
кто… 👨🦳👨🦳
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#pixel_pause
