Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.5K subscribers
3.04K photos
221 videos
51 files
5.3K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
🖍 Полезный JS one-liner: groupBy


const groupBy = (arr, key) =>
arr.reduce((acc, obj) => {
(acc[obj[key]] ??= []).push(obj);
return acc;
}, {});


Что здесь важно:

♍️ reduce — линейный проход по массиву
♍️ ??= — инициализация массива только если ключ ещё не существует
♍️ push — без лишних копирований и аллокаций

Почему это хороший вариант:

 • O(n) по времени
• Нет пересоздания объектов на каждой итерации
• Поведение прозрачное и предсказуемое


Когда использовать:

— Группировка данных из API
— Агрегация логов, событий, результатов тестов
— Любые кейсы, где важна читаемость и производительность

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

🐸 Библиотека фронтендера

#readme #js
Please open Telegram to view this post
VIEW IN TELEGRAM
5🔥2🥰2
💳 Топ-вакансий недели для фронтендеров

Middle+ / Senior FullStack Developer (1 500 —‍ 2 000 $, Hong-Kong)

Frontend-разработчик Vue (Москва)

Frontend разработчик (от 200 000 ₽)

➡️ Больше офферов в канале: @jsdevjob

🐸 Библиотека фронтендера
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰4
🖍 BFF: зачем это нужно знать фронтендеру

Чтобы не тащить архитектурные проблемы в UI.

Без понимания BFF приходится агрегировать данные на клиенте, усложнять состояние и чинить UX под универсальные API. BFF показывает, где должна заканчиваться ответственность UI и начинаться серверная адаптация под интерфейс.

ℹ️ Карточки выше — о том, как архитектура backend’а влияет на сложность интерфейса и качество UX.

🔗 Источник

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#blueprint
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👍5🥰4🥱21
🎅 Секретный Санта для айтишников от Proglib.academy

Весь этот год команда Академии запускала курсы для айтишников. А под Новый год мы запускаем новый курс по ИИ-агентам и ставим под ёлку самый свежий стек 2025 года и обучение проектированию автономных нейросетевых экосистем — от LLM и ReAct-циклов до мультиагентных систем, LangGraph, AutoGen и продакшн-практик.

🎁 Хотим дарить подарки и приглашаем вас поучаствовать в конкурсе:

1️⃣ Упомяните курс Академии у себя в блоге.
2️⃣ Пришлите скрин сюда.
3️⃣ Получите секретный промокод на 10 000 ₽ при оплате любого курса.

Подходит всё — соцсети, блоги, Telegram-каналы от 300 подписчиков и более.

🎄 Акция действует до Нового года.

Win-win, всё как мы любим!
🥰51
🤔 Как сделать страницу нормальной для печати

Если страницу могут распечатать — у неё должны быть print-стили. Иначе пользователь получит веб-макет вместо документа.


@media print {
body {
font-size: 12pt;
color: black;
background: none;
max-width: 210mm; /* формат A4 */
margin: auto;
}

nav, .sidebar, .ads, .button {
display: none;
}

a {
color: black;
text-decoration: underline;
}

a::after {
content: " (" attr(href) ")";
font-size: 10pt;
color: gray;
}

h1, h2, h3, p {
break-inside: avoid;
}
}


Результат:

— чистая ч/б печать
— только контент
— корректная ширина под A4
— читаемые ссылки
— без кривых разрывов страниц

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

🐸 Библиотека фронтендера

#hotix #css
Please open Telegram to view this post
VIEW IN TELEGRAM
6👍5
💳 Библиотека готовых UI-сниппетов и анимаций

90+ компонентов: текст, кнопки, секции и эффекты с аккуратным дизайном. Подключаются быстро, стили — CSS или Tailwind.

Подходит, когда нужен быстрый и визуально сильный UI без лишней возни.

📎 Ссылка на ReactBits

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#stack #react
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰41
WANTED: FRONTEND-ВЗЛОМЩИК РЕАЛЬНОСТИ

Разыскивается эксперт, чей код не «плывёт», а интерфейсы не тормозят. Мы знаем, что у тебя накоплен багаж знаний, который пора легализовать.

Приметы:

— в совершенстве знает современный JS-стек и понимает логику Python, Go или Java;
— умеет выстраивать архитектуру крупных SPA-приложений;
— готов делиться опытом с большой аудиторией фронтендеров;
— хочет монетизировать свои знания через образовательные форматы.
Условия:

— официальное сотрудничество с Proglib Academy;
— прокачка личного бренда в профессиональном сообществе;
— дополнительный доход без отрыва от основной работы.

Сдаться добровольно

P.S. Знаешь коллегу, который пишет код «как боженька»? Пора его сдать.
5🥰4
👻 Когда package.json выходит из-под контроля

Проблемы с зависимостями редко взрываются сразу. Они накапливаются: растёт вес, тормозит CI, обновления превращаются в боль.

🔤 В карточках разобрали: как трезво работать с зависимостями, видеть лишнее и держать package.json в состоянии, пригодном для развития проекта.

🔗 Источник

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

🐸 Библиотека фронтендера

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰5👍3🔥1
🔍 Git для фронта: 5 команд, которые реально спасают

1️⃣ git status

Контроль реальности. Перед билдом, перед коммитом, перед пушем.

2️⃣ git diff

Смотрите, что именно меняется в JSX/CSS. Ловит случайные правки, auto-format и мусор от IDE.

3️⃣ git add -p

Один компонент — один коммит. Ревьюеры скажут спасибо.

4️⃣ git commit --amend

Исправить сообщение или добавить забытый файл без нового коммита. Чистая история вместо «fix typo», «fix typo 2».

5️⃣ git stash push -m "wip"

Срочно переключиться на багфикс, не ломая рабочее состояние. Незаменимо при параллельных задачах.

📍 Навигация: [Вакансии]

🎁 Новогодняя акция: 3 курса по цене 1
🤝 Помощь с выбором курса

🐸 Библиотека фронтендера

#readme #git
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰5👍32
🔗 Вопрос с собеседования на Middle Frontend

Какие статические методы есть у Promise и чем они реально отличаются?

👇 Правильный ответ (нажми, чтобы прочитать):

Promise предоставляет несколько статических методов для управления асинхронными операциями:

• Promise.resolve() — создаёт уже выполненный промис (часто используется для нормализации значений).
• Promise.reject() — создаёт отклонённый промис.
• Promise.all() — ждёт все промисы, но падает при первой ошибке.
• Promise.race() — возвращает результат первого завершившегося промиса (успех или ошибка).
• Promise.allSettled() — ждёт все промисы и возвращает их статусы, ошибки не прерывают выполнение.
• Promise.any() — возвращает первый успешно завершившийся промис, ошибка — только если все отклонены.


💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут

🐸 Библиотека фронтендера

#career_merge #middle
Please open Telegram to view this post
VIEW IN TELEGRAM
5👍4🥰1