В гайде собрали актуальные библиотеки для разных задач:
— 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 представила 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₽, либо денежное вознаграждение.
Если за последние 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 (МСК)
👉 Занять место на открытом уроке
23 июня в 19:00 совместно с Яндексом проведём открытый урок «AI-инструменты в разработке: как писать код быстрее с помощью ассистентов».
Спикер — Ольга Лукьянова, руководитель команды поиска и навигации по коду в SourceCraft. Более 18 лет развивала инструменты для разработчиков в JetBrains и руководила разработкой IDE в Huawei.
Что получишь на уроке:
— поймёшь, как использовать AI-ассистентов и облачных агентов в работе;
— научишься быстрее разбираться в новых проектах и кодовой базе;
— узнаешь, какие задачи стоит отдавать AI и как получать качественный результат;
— увидишь полный workflow работы с AI: от постановки задачи до код-ревью.
На уроке — живой разбор реального проекта с кодом. Ольга покажет промпты из рабочих сценариев и ответит на ваши вопросы в Q&A.
⚠️ Количество мест ограничено
🗓️ Когда: 23 июня, 19:00 (МСК)
👉 Занять место на открытом уроке
😁4👍2
Please open Telegram to view this post
VIEW IN TELEGRAM
💯8😁6
🤖 Мы тут подготовили небольшую игру по ИИ-агентам
В ней нужно собрать AI-агента на LangGraph: выбрать узлы, пройти развилки и запустить собственный workflow.
Никакой теории — сразу практика. Можно наглядно увидеть, как работают агентные системы, проверьте свои знания или показать другим как это всё работает 🔥
🎁 За прохождение получите персональную скидку на курс. Чем больше баллов наберете — тем больше будет скидка.
Плюс сейчас действует предложение: покупаешь 1 курс, получаешь еще 2 любых в подарок. Для этого надо будет оставить заявку на сайте академии после прохождения игры.
🚀 Собрать своего AI-агента
В ней нужно собрать AI-агента на LangGraph: выбрать узлы, пройти развилки и запустить собственный workflow.
Никакой теории — сразу практика. Можно наглядно увидеть, как работают агентные системы, проверьте свои знания или показать другим как это всё работает 🔥
🎁 За прохождение получите персональную скидку на курс. Чем больше баллов наберете — тем больше будет скидка.
Плюс сейчас действует предложение: покупаешь 1 курс, получаешь еще 2 любых в подарок. Для этого надо будет оставить заявку на сайте академии после прохождения игры.
🚀 Собрать своего AI-агента
❤4🥰2
react hooks cheat sheet.pdf
1.1 MB
Собрали небольшой файл по основным хукам 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
Пока не сталкиваешься с 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 💨
После этого на странице появится соответствующая анимация или персонаж.
#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.
Это удобно для быстрой проверки:
— как изменится вёрстка
— влияет ли родительский контейнер на элемент
— не ломаются ли стили после перестановки
— где именно находится проблема в разметке
#readme #devtools
Please open Telegram to view this post
VIEW IN TELEGRAM
😁4👍2🥰2
Обновили сайдбары, добавили встроенную тёмную тему, улучшили доступность, панорамирование, зум и отображение выбранных нод.
Из полезного:
🟢 можно разделять сайдбары и держать несколько панелей открытыми🟢 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
Please open Telegram to view this post
VIEW IN TELEGRAM
😁10
В 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
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰3
Please open Telegram to view this post
VIEW IN TELEGRAM
🥰4🥱2
Любой Pen из нового редактора можно превратить в отдельный сайт буквально одной кнопкой.
Что есть:
— случайный поддомен вида project.codepen.app
— собственный домен через DNS
— субдомены через CNAME
— apex-домены через A-записи
Полезно для:
⚡ пет-проектов
⚡ демо для заказчиков
⚡ лендингов
⚡ прототипов
⚡ тестовых заданий
#stack
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥6👍3🥰2
Раньше для разделителей между элементами 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