Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.5K subscribers
3.03K 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
🖍 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
🦉 CSS Owl Selector — аккуратные отступы без костылей

Простой CSS-приём для управления расстоянием между элементами без :first-child, reset’ов и лишней специфики.

В видео:

— как работает * + *
— когда он лучше альтернатив
— в чём его практическая польза
— когда всё-таки стоит выбрать gap

Минимум теории — максимум пользы для поддерживаемого CSS.

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

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

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

#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
3🥰3
🗂 Визуальное объяснение концепций React

Команда популярного курса по React выпустила наглядное руководство по ключевым возможностям React 19.

Разбирают:

🟡 actions — как обрабатываются действия
🟡 transitions — что происходит при переходах
🟡 Server Components — как работает серверная часть React

Если хочется увидеть, а не просто прочитать, как React устроен внутри — стоит посмотреть 🔗

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

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰4