Biblioteca Frontend - JS React

💬 AI-чат для React за 3 строки кода ChatbotLite — open source-виджет, который позволяет быстро добавить AI-чат в React-приложение. Что умеет: — Работает с React, Next.js, Shopify и WordPress — Поддерживает 10+ LLM, включая OpenAI, Gemini, Groq, DeepSeek и Mistral — Автоматически переключается между моделями при ошибках — Использует ваши API-ключи (BYOK) — Весит менее 50 КБ (gzipped) ➡️ Подключение занимает буквально несколько строк: import { ChatWidget } from "chatbotlite/react"; Такой виджет подойдет для документации, внутренних инструментов, FAQ, поддержки пользователей и AI-функций в собственных продуктах. 🔗 Ссылка на GitHub 💡 Если хотите не просто встроить чат, а разобраться, как создавать полноценных ИИ-агентов с инструментами, памятью и RAG, обратите внимание на курс «Разработка ИИ-агентов», который стартует уже завтра 🔥 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack

❓ Почему tooltip больше не обязательно писать на JavaScript Еще недавно для tooltip, dropdown и popover почти всегда подключали Popper.js или похожие библиотеки. Теперь большую часть этой работы берет на себя браузер благодаря CSS Anchor Positioning. 🔗 В карточках разбираем, как это работает под капотом, что такое Anchor и Target, как браузер автоматически выбирает лучшую позицию для всплывающего элемента и почему эта технология может заменить целый класс JS-решений. 🔗 Ссылка на статью 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #under_hood #css

🚀 Уже завтра стартует новый поток курса «ИИ-агенты»! Мы собрали мощнейший состав преподавателей. Учить вас проектировать архитектуру и собирать продакшн-агентов будут инженеры и исследователи из топовых IT-компаний. Старт уже завтра! Сомневаетесь, подойдет ли вам программа и подача? Начните с бесплатного демо-урока! Всего за 2 часа вы заглянете под капот ИИ-агента, поймете, чем мышление модели отличается от ее ответа, и научите систему чинить собственный код. Это идеальный способ протестировать нашу платформу перед покупкой. 🔗 Пройти демо-урок и занять место на курсе

💡 6 принципов современного React Data Grid Хороший Data Grid помогает быстрее находить информацию, снижает количество ошибок и остается отзывчивым даже при работе с большими объемами данных. Вот что считается хорошей практикой: ✅ Условное форматирование вместо лишнего текста Цвета, бейджи и иконки позволяют мгновенно увидеть статус, предупреждение или критичное значение. ✅ Дизайн-токены вместо хардкода цветов Цвета, отступы и типографика должны наследоваться от общей дизайн-системы, а не быть разбросаны по CSS. ✅ Поддержка dark mode Таблица должна одинаково хорошо выглядеть в светлой и темной теме, сохраняя контраст и читаемость. ✅ Виртуализация + легкие CSS-классы Для больших наборов данных виртуализируйте строки и избегайте тяжелых инлайновых стилей и лишних перерисовок. ✅ Доступность по умолчанию Поддержка клавиатурной навигации, Screen Reader, фокус-состояний и достаточного контраста — уже базовое требование. ✅ Адаптивность На планшетах и небольших экранах таблица должна корректно менять ширину колонок, сохраняя удобство работы. 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #blueprint #react

🤔 Вопрос с собеседования Почему нельзя вызывать Hooks внутри if, for или switch? 👇 Правильный ответ (нажми, чтобы прочитать): React определяет каждый Hook по порядку его вызова, а не по имени. Если в одном рендере Hook вызвался, а в следующем — нет (например, из-за if), порядок нарушится. Тогда React начнет сопоставлять состояния и эффекты не тем Hook’ам, что приведет к ошибкам и непредсказуемому поведению. 💡 Запомните правило: Hooks всегда должны вызываться на верхнем уровне компонента или собственного Hook’а — без условий, циклов и switch. Если логика зависит от условия, проверку нужно делать внутри Hook’а. 👍 — знал/а 🔥 — стало понятнее 💼 Щелкаешь такие задачи как орешки? Найди проект с достойной зарплатой тут 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #career_merge

💡 Коллекция эффектных переключателей темы Нашли open-source подборку анимаций для переключения светлой и тёмной темы. 🔵 Внутри — разные переходы, которые можно изучить, адаптировать и использовать в своих интерфейсах. Хороший источник идей, если обычный toggle уже кажется слишком скучным. 🔗 Ссылка на GitHub 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #stack

🤑 Function Declaration vs Expression — в чём разница В JavaScript одну и ту же функцию можно объявить по-разному — и это влияет на поведение кода. В карточках разобрали: 😗 Чем отличается function declaration от function expression 😗 Почему одна работает до строки, а другая — падает с ошибкой 😗 Какой пример можно привести на собеседовании 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #read_watch

🤔 Что изменится после того, как пользователь введёт текст в ? ❤️ — атрибут value 🔥 — свойство value 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #code_challenge

🎮 Создание пользовательского хука useFormStatus Проблема: повторное использование логики состояния формы может привести к дублированию кода и усложнению поддержки. Решение: в книге «Learn React Hooks, 2nd Edition» автор предлагает создать пользовательский хук useFormStatus для инкапсуляции логики состояния формы, что позволяет повторно использовать её в разных компонентах. Пример кода: import { useState } from 'react'; function useFormStatus() { const [isSubmitting, setIsSubmitting] = useState(false); const [error, setError] = useState(null); const submit = async (action) => { setIsSubmitting(true); try { await action(); } catch (err) { setError(err); } finally { setIsSubmitting(false); } }; return { isSubmitting, error, submit }; } function LoginForm() { const { isSubmitting, error, submit } = useFormStatus(); const handleSubmit = () => { submit(async () => { // Асинхронная отправка данных }); }; return ( {isSubmitting ? 'Submitting...' : 'Submit'} {error && {error.message} } ); } Преимущества: — Инкапсуляция логики состояния формы. — Повторное использование кода. — Упрощение компонентов форм. 🔤 Еще больше полезных книг — в нашем канале @progbook 📍 Навигация: [Вакансии] 🐸 Библиотека фронтендера #readme