Библиотека фронтендера | 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 810 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 6 199-o'rinni va Rossiya mintaqasida 31 388-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 20 810 obunachiga ega bo‘ldi.
06 Oktabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -166 ga, so‘nggi 24 soatda esa -2 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 8.84% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.36% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 839 marta ko‘riladi; birinchi sutkada odatda 908 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 25 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 07 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 810
Obunachilar
-224 soatlar
-517 kun
-16630 kun
Postlar arxiv
+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
