Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.2K subscribers
3.62K photos
326 videos
86 files
5.89K links
Все самое полезное для фронтенда в одном канале.

Наши курсы: https://clc.to/WV2U4g

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

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

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
🔗 Какие библиотеки выбирают React-разработчики в 2026

В гайде собрали актуальные библиотеки для разных задач:

— Vite, Next.js, TanStack Start
— Zustand и TanStack Query
— React Router и TanStack Router
— Tailwind CSS и shadcn/ui
— React Hook Form, Zod, Playwright
— Motion, Recharts, Tauri, Expo и другие


Полезно, если собираете новый проект или хотите сверить свой стек с тем, что сейчас используют в экосистеме 💡

🔗 Читать гайд

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

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

#read_watch
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍2🤩2🥰1
🌴 TanStack Table V9 выходит в Beta

После нескольких лет разработки команда TanStack представила TanStack Table V9 Beta.

Что изменилось:

🈂️ новый механизм управления состоянием на базе TanStack Store
🈂️ более точечные ререндеры через селекторы и подписки
🈂️ меньше потребление памяти в больших виртуализированных таблицах
🈂️ tree-shaking для фич — в бандл попадает только то, что реально используется
🈂️ возможность создавать собственные расширения таблицы через feature API
🈂️ новые DevTools для отладки состояния и данных
🈂️ улучшенная поддержка React Compiler и современных версий React


Если используете TanStack Table в крупных проектах, релиз точно стоит изучить.

🔗 Ссылка на блог

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

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

#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
7🥰3🔥2
👋 Ищем разработчиков, которые недавно проходили IT-курсы

Если за последние 2 месяца вы где-то покупали курс или проходили интенсив, хотим узнать о вашем опыте 🔥

После какого обучения вы почувствовали реальный прогресс? А после какого осталось ощущение, что потратили время или деньги зря?


❗️ Ваш опыт поможет нам создавать программы, которые действительно приносят пользу разработчикам.

👉 Напишите в бот, о каком курсе можете рассказать и мы пришлем небольшой опросник: @proglibrary_feedback_bot

Нам нужны 10-15 человек, готовых поделиться своим опытом.

🎁 В благодарность — подписка на Cursor, Claude или другой AI-инструмент до 3 000₽, либо денежное вознаграждение.
👍3😁2
🤖 Используешь AI для написания кода? В Яндексе покажут, как применять AI для реальных задач разработки.

23 июня в 19:00 совместно с Яндексом проведём открытый урок «AI-инструменты в разработке: как писать код быстрее с помощью ассистентов».

Спикер — Ольга Лукьянова, руководитель команды поиска и навигации по коду в SourceCraft. Более 18 лет развивала инструменты для разработчиков в JetBrains и руководила разработкой IDE в Huawei.

Что получишь на уроке:

— поймёшь, как использовать AI-ассистентов и облачных агентов в работе;
— научишься быстрее разбираться в новых проектах и кодовой базе;
— узнаешь, какие задачи стоит отдавать AI и как получать качественный результат;
— увидишь полный workflow работы с AI: от постановки задачи до код-ревью.

На уроке — живой разбор реального проекта с кодом. Ольга покажет промпты из рабочих сценариев и ответит на ваши вопросы в Q&A.

⚠️ Количество мест ограничено

🗓️ Когда: 23 июня, 19:00 (МСК)

👉 Занять место на открытом уроке
😁4👍2
🤖 Мы тут подготовили небольшую игру по ИИ-агентам

В ней нужно собрать AI-агента на LangGraph: выбрать узлы, пройти развилки и запустить собственный workflow.

Никакой теории — сразу практика. Можно наглядно увидеть, как работают агентные системы, проверьте свои знания или показать другим как это всё работает 🔥

🎁 За прохождение получите персональную скидку на курс. Чем больше баллов наберете — тем больше будет скидка.

Плюс сейчас действует предложение: покупаешь 1 курс, получаешь еще 2 любых в подарок. Для этого надо будет оставить заявку на сайте академии после прохождения игры.

🚀 Собрать своего AI-агента
4🥰2
react hooks cheat sheet.pdf
1.1 MB
🖥 Шпаргалка по React Hooks

Собрали небольшой файл по основным хукам React — с примерами и быстрыми пояснениями.

Внутри:

— useState и useReducer
— useEffect и useLayoutEffect
— useContext
— useMemo и useCallback
— useRef и useImperativeHandle
— Custom Hooks


Полезно для повторения, подготовки к собеседованию и ежедневной разработки на React


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

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

#артефакт #react
Please open Telegram to view this post
VIEW IN TELEGRAM
5🥰2
😳 Подсветить активную ссылку в Next.js кажется простой задачей

Пока не сталкиваешься с App Router.

Что выбрать: usePathname() или useSelectedLayoutSegments()? Как показать pending-состояние при переходе? Почему ссылка может мигнуть после загрузки страницы? И при чём тут cacheComponents и гидрация?


Подготовили 5 карточек, где разобрали основные подходы и подводные камни при создании собственного NavLink в Next.js.

Сохраняйте в закладки — пригодится каждому, кто работает с App Router 💡

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

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

#under_hood
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍3🥰2
This media is not supported in your browser
VIEW IN TELEGRAM
👍 Пасхалки для вашего пет-проекта

Нашли забавную JavaScript-библиотеку easter-egg-collection, которая добавляет на сайт десятки скрытых анимаций и эффектов.

Достаточно подключить библиотеку и ввести секретное слово вроде:


unicorn 🦄
mario 🎮
pikachu
nyancat 🌈
sonic 💨


После этого на странице появится соответствующая анимация или персонаж.

🔗 GitHub

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

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰4😁3
This media is not supported in your browser
VIEW IN TELEGRAM
💡 Совет для начинающих фронтендеров

Нужно проверить, как блок будет выглядеть в другом месте страницы? Не спешите открывать редактор и менять HTML.

🔤 В Chrome, Firefox, Edge и Safari можно просто перетащить элемент в дереве DOM прямо в DevTools.

Это удобно для быстрой проверки:

— как изменится вёрстка
— влияет ли родительский контейнер на элемент
— не ломаются ли стили после перестановки
— где именно находится проблема в разметке


❗️ Частая ошибка джунов — менять код, пересобирать проект и обновлять страницу ради каждого эксперимента. DevTools позволяют проверить идею за несколько секунд.

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

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

#readme #devtools
Please open Telegram to view this post
VIEW IN TELEGRAM
😁4👍2🥰2
🚀 Node-RED 5.0 вышел с большим обновлением редактора

Обновили сайдбары, добавили встроенную тёмную тему, улучшили доступность, панорамирование, зум и отображение выбранных нод.

Из полезного:

🟢 можно разделять сайдбары и держать несколько панелей открытыми
🟢 Debug-панель теперь можно ставить на паузу
🟢 Function node умеет вызывать Link nodes через node.linkcall()
🟢 появились GitHub-style alerts в Markdown
🟢 добавили больше TLS-настроек и усилили authentication
🟢 минимальная версия Node.js теперь 22.9.0, рекомендуется Node.js 24


📎 Ссылка на блог

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

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

#release_digest
Please open Telegram to view this post
VIEW IN TELEGRAM
3🥰2
🤯 А что если все заголовки внутри компонента будут h1

В Firefox Nightly появился экспериментальный атрибут headingoffset, который автоматически повышает уровень вложенных заголовков.

Пример:


<section headingoffset="1">
<h1>Новости</h1>
</section>


Для браузера такой заголовок станет h2. Если вложить ещё один контейнер с headingoffset="1", следующий h1 уже будет восприниматься как h3.

🔜 Зачем это нужно:

🟢 для переиспользуемых компонентов
🟢 для Web Components
🟢 для CMS, где редакторы не должны думать о структуре документа
🟢 для автоматического построения корректной иерархии заголовков


Сейчас функция доступна только в Firefox Nightly за флагом dom.headingoffset.enabled, но идея интересная: компонент сам остаётся независимым от контекста страницы, а уровень заголовка определяется местом использования.

🔗 Источник

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

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

#readme #html #a11y
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰3
💡 CodePen теперь может выступать полноценным хостингом для ваших проектов

Любой Pen из нового редактора можно превратить в отдельный сайт буквально одной кнопкой.

Что есть:

🟠 мгновенный деплой из CodePen
🟠 собственный домен или поддомен
🟠 SSL-сертификаты
🟠 CDN и кэширование
🟠 автоматический хостинг без настройки серверов

🔜 Поддерживаются:

— случайный поддомен вида project.codepen.app
— собственный домен через DNS
— субдомены через CNAME
— apex-домены через A-записи

Полезно для:

пет-проектов
демо для заказчиков
лендингов
прототипов
тестовых заданий


🔗 Ссылка на документацию

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

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

#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍3🥰2
💡 CSS научился стилизовать gap

Раньше для разделителей между элементами Grid и Flex приходилось использовать бордеры, псевдоэлементы, фоновые градиенты и другие обходные пути.

Теперь появляются row-rule и column-rule — свойства, которые позволяют рисовать линии прямо внутри gap.


.grid {
display: grid;
gap: 20px;

column-rule: 2px solid #ff4d4f;
row-rule: 2px solid #ff4d4f;
}


🟢 Что ещё умеет новая спецификация:

— разные стили для каждой линии через repeat()
— управление пересечениями через rule-break
— настройка отступов у линий через rule-inset
— анимации цвета, толщины и поведения разделителей
— работа как с Grid, так и с Flex


⚠️ Пока поддержка ограничена: Chromium и Safari Technology Preview.

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

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

#readme #css
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥4🥰3