Библиотека фронтендера | 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 937 obunachidan iborat bo'lib, Texnologiyalar & Aralashmalar toifasida 6 146-o'rinni va Rossiya mintaqasida 31 275-o'rinni egallagan.
📊 Auditoriya ko‘rsatkichlari va dinamika
невідомо sanasidan buyon loyiha tez o‘sib, 20 937 obunachiga ega bo‘ldi.
15 Sentabr, 2026 dagi oxirgi ma’lumotlarga ko‘ra kanal barqaror faollikka ega. Oxirgi 30 kunda obunachilar soni -135 ga, so‘nggi 24 soatda esa -1 ga o‘zgardi va umumiy qamrov yuqori darajada qolmoqda.
- Tasdiqlash holati: Tasdiqlanmagan
- Jalb etish (ER): Auditoriya o‘rtacha 9.09% darajada jalb etiladi. Nashrdan keyingi dastlabki 24 soatda kontent odatda umumiy obunachilar sonining 4.52% ini tashkil etuvchi reaksiyalarni to‘playdi.
- Post qamrovi: Har bir post o‘rtacha 1 903 marta ko‘riladi; birinchi sutkada odatda 947 ta ko‘rish yig‘iladi.
- Reaksiyalar va o‘zaro ta’sir: Auditoriya faol: har bir postga o‘rtacha 26 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 17 Sentabr, 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 938
Obunachilar
-124 soatlar
-347 kun
-13530 kun
Postlar arxiv
💛 Шрифт, который превращает текст в графики
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
🌸 Вселенная намекает: пора уже начать этот курс
С 14 сентября цены в Proglib Academy вырастут на 20% 👀
Так что если курс давно ждёт своего часа — лучше не откладывать ещё на месяц 😏
📍 Выбрать курс
🔥 Debounce на одной строке
Когда пользователь вводит текст в поиск или изменяет размер окна — запросы летят десятками. Debounce откладывает выполнение функции до тех пор, пока события не прекратятся.
const debounce = (fn, ms) => {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), ms);
};
};
// Использование
const handleSearch = debounce((value) => {
console.log('Поиск:', value);
}, 300);
// В React
<input onChange={(e) => handleSearch(e.target.value)} />🌞 Готовим вебинар про AI в разработке и хотим сделать его максимально полезным
Что реально хочется разобрать? Где чаще всего застреваете? Что пробовали, но так и не получилось нормально внедрить?🤩 Пишите вопросы в комментариях — самые залайканные разберём на вебинаре в первую очередь. Задавайте всё, что давно хотелось спросить 📍 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера
+2
👩💻 Вышел React 19.3 — и в нём сразу несколько интересных изменений:
🟡 <ViewTransition> теперь stable. React умеет анимировать появление, удаление, перемещение и изменение элементов через браузерный View Transition API.
<ViewTransition>
<Component />
</ViewTransition>
<Fragment ref={fragmentRef}>
<Heading />
<Heading />
</Fragment>🤩 Библиотеки, которые JavaScript уже умеет заменять
Некоторые привычные npm-пакеты сегодня можно не устанавливать — нужная функциональность уже есть в JS и Web API:
url-parse → new URL() left-pad → ''.padStart() lodash.last → arr.at(-1) uuid → crypto.randomUUID() deepclone → structuredClone() numeral → Intl.NumberFormat() moment → Intl.DateTimeFormat() lodash.get → obj?.prop?.subprop query-string → URLSearchParams()Перед тем как добавлять зависимость, стоит проверить: возможно, браузер уже умеет всё необходимое. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme
💡 Vue.js: не усложняйте v-bind
В Vue часто можно встретить такой код:
<UserCard :user="user" :config="config" /><UserCard v-bind:user="user" v-bind:config="config" />🔴 При этом Vue позволяет сократить запись ещё сильнее, если имя пропса совпадает с именем переменной:
<UserCard :user :config />То есть Vue сам понимает, что нужно передать значения переменных user и config в одноимённые props. Мелочь, но в компонентах с большим количеством props заметно чище. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #hotfix
🤔 Вопрос с собеседования
Что выведет этот код?
❤️ — 0 1 2
🔥 — 3 3 3
👍 — 0 0 0
👇 Правильный ответ (нажми, чтобы прочитать):
🔘 Будет:
3
3
3
var имеет function scope, поэтому все три callback замыкаются на одну и ту же переменную i. К моменту выполнения setTimeout цикл уже закончился, а i равен 3.
🔘 Если заменить var на let:
for (let i = 0; i < 3; i++) {
setTimeout(() => console.log(i), 0);
}
получим 0 1 2, потому что let создаёт отдельную binding-переменную для каждой итерации.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#career_merge
🤩 А что, если написать свой текстовый редактор?
«VS Code слишком тяжёлый. Сделаю свой редактор!»— примерно так начался эксперимент одного разработчика. 🔘 Первый вариант — всё рисовать через <canvas>. Курсор, текст, подсветка строки, ввод с клавиатуры — работает. Но почти всё приходится реализовывать самостоятельно:
canvas.addEventListener("pointerdown", positionCursor);
document.addEventListener("keydown", moveCursor);
<div
contenteditable="plaintext-only"
autocapitalize="off"
autocorrect="off"
spellcheck="false"
translate="no">
</div>
<textarea
autocapitalize="off"
autocorrect="off"
spellcheck="false">
</textarea>
"🍋🟩".length;
// 5
[..."🍋🟩"].length;
// 3
const segmenter = new Intl.Segmenter("en", {
granularity: "grapheme"
});
[...segmenter.segment("🍋🟩")].length;
// 1
🐱 SQL на котиках
JOIN — это способ соединить данные из разных таблиц по общему полю.
В видео разбирают:
— разницу между INNER и LEFT JOIN
— почему строки могут «пропадать»
— как формируется итоговый результат
Подойдёт новичкам, тем, кто путается в JOIN, и всем, кто хочет перестать писать запросы вслепую.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#read_watch #sql
🤩 Для поворота необязательно считать градусы. В CSS есть единица turn: 1 turn = полный оборот = 360°.
Например, 0.5turn — это 180°, а 2turn — два полных оборота.
Особенно удобно, когда значение превышает 360°.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#readme
💡 Container Queries в действии
Медиазапросы смотрят на размер viewport, а Container Queries — на размер самого контейнера.
📍 В примере кнопка меняет своё содержимое в зависимости от доступного пространства: если контейнер становится слишком узким, текст ADD TO CART скрывается, а иконка корзины остаётся.
@container (max-width: 200px) {
.button-text {
display: none;
}
}
✨ React Bits — 165+ готовых анимаций для React
Библиотека с копипаст-готовыми компонентами для тех случаев, когда хочется добавить интерфейсу немного магии, но писать анимацию с нуля лень:
→ текстовые анимации и эффекты → интерактивные UI-компоненты → анимированные фоны → эффекты для изображений и видео → версии для JS/TS и CSS/TailwindКомпоненты можно устанавливать через CLI или просто забрать исходный код и адаптировать под свой проект. Есть и дополнительные инструменты: Background Studio, Shape Magic и Texture Lab — для создания фонов, SVG и визуальных эффектов. 🔗 GitHub 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack
✅ Правильный ответ: ❤️ 1
Почему: все три вызова используют значение count из текущего рендера. При count = 0 каждый вызов фактически планирует обновление до 1.
Если заменить на:
setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);
тогда результатом будет 3.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#code_challenge
Правильный ответ: ❤️ 1
Почему: все три вызова используют значение count из текущего рендера. При count = 0 каждый вызов фактически планирует обновление до 1.
Если заменить на:
setCount(c => c + 1);
setCount(c => c + 1);
setCount(c => c + 1);
тогда результатом будет 3./
Это уже не просто вопрос «знаешь ли ты синтаксис React», а проверка понимания состояния и функциональных обновлений.
📍 Навигация: [Вакансии]
🐸 Библиотека фронтендера
#code_challenge
