React JS

🌟 ReactBench: инструмент оценки агентов при работе с кодом на React Команда Million, известная инструментами React Doctor, React Scan и Million.js, представила тест для агентов, пишущих код на React. Актуальность ReactBench зеркальна реальному положению дел - около 70% сайтов на JavaScript используют React, а мелкие ошибки в сгенерированном коде тиражируются в огромных масштабах.

Например, сбой Cloudflare в сентябре 2025 года - панель управления и API компании легли из-за одной неверной зависимости в useEffect, которую не поймали ни ревью, ни тесты.

Философия проекта в том, что общие кодинг-бенчмарки проверяют лишь поведение по принципу "тесты прошли - задача засчитана". В ReactBench каждое решение должно ещё и пройти проверку React Doctor, анализатора с более чем 400 правилами, который ищет в коде лишние перерисовки, сломанные эффекты, проблемы с доступностью и сопровождаемостью. 🟡Набор состоит из задач двух типов Write React - реализовать настоящую функцию. Задания этого типа собраны из принятых PR в открытых репозиториях. Агент получает кодовую базу и описание задачи, а скрытые тесты и эталонное решение видит только проверяющая система. Fix React - найти и исправить все баги в существующем компоненте, обнаруженные React Doctor, не создавая при этом новых проблем. Причём агента еще и лишают доступа к линтерам. 🟡Результаты прогонов Само собой, созданием бенча не ограничились и запустили его на топовых моделях. Тут важен небольшой дисклеймер: Бенчмарк сравнивает не модели в чистом виде, а связки модель+агентская оболочка (Codex CLI, Claude Code и другие), и оболочка влияет на итог. По итогам лидируют с минимальным отрывом GPT-5.6 Sol (43,1%) и Fable 5 (41,2%), но важнее разница в цене - прогон Fable 5 обходится в среднем в 5,8 раза дороже, чем Sol. Оптимальным по соотношению стоимость-качество авторы называют GPT-5.6 Terra на средних настройках. Замыкают таблицу GLM 5.2, Sonnet 5, GPT-5.6 Luna и Kimi K2.7 Code. Набор полностью открыт на Github. @ai_machinelearning_big_data #AI #ML #Agents #Benchmark #ReactBench #Million

💡 Простой кейс создания закругленных углов в CSS

NAITION AI: Спрос на разработку с ИИ-агентами вырос в сотни раз за год. Свежий Stanford AI Index 2026 показал, что навык AI Agents стал №1 среди самых востребованных инженерных скиллов.

• Упоминания «Agentic systems» в вакансиях за год выросли на 10854% (!) — это не опечатка. • «AI agents» — +2113%. • Вывод простой: компаниям массово нужны не «написатели кода», а архитекторы мультиагентных систем.Главный скилл в 2026 году — строить долгоживущие автономные процессы, управлять контекстом и верифицировать работу десятков агентов.

Рынок можно догнать! Naition запускает новый, обновленный в июле поток буткемпа по AI-driven разработке уже 21 июля. Максимум пользы получат middle+ разработчики и команды, нацеленные на апгрейд производительности инженерного процесса. IT-специалисты других профессий тоже могут себя попробовать. За 12 недель вы встроите ИИ во все процессы:

• Соберёте своё ядро — MCP под задачи, RAG, мультиагентную систему с сабагентами и оркестрацией. • Внедрите агентов в кодовые базы на 100К+ строк — автоматизируете индексацию кода, рефакторинг и изменение архитектуры. • Научитесь масштабировать AI-практики на всю команду. Ведут практики с 15-20 годами опыта: ex-Yandex Cloud, staff-инженер Google, CEO Symbioway (центр по найму разработчиков) — люди из эпицентра трансформации рынка.

Формат: 17 уроков, 5 модулей, живые вечерние эфиры + практика между ними. Минимум теории, максимум разборов кейсов и групповой практики прямо на вебинаре. 👉 Забронировать место — naition.ai А по промокоду REACT для подписчиков — скидка 20% до 17 июля.

Что ещё стоит знать: • Приведёте друга или коллегу — вы вместе получите доп. скидку 10% сверху (в сумме 30%). • Можно оплатить частями, а начать даже с одного модуля. • Если вы бизнес, можно прокачать всю команду разом.

200 тысяч строк чужого кода — и ноль понимания, с чего начинать Вот это боль любого разработчика, который приходит в новую команду. Understand-Anything пытается решить её не ещё одним чатиком поверх репозитория, а интерактивным графом знаний. Он разбирает кодовую базу и показывает связи между файлами, функциями, классами и зависимостями. Можно искать нужные части, проваливаться по связям и задавать вопросы обычным языком. Главная ценность тут не в “ИИ прочитал код за вас”. А в том, что он даёт карту проекта. Когда перед тобой легаси, монорепа или просто большой продукт, контекст важнее автокомплита. Нужно быстро понять, где что лежит, какие модули завязаны друг на друга и куда лучше не лезть с топором. Работает с Claude Code, Codex, Cursor, Copilot, Gemini CLI и другими coding-инструментами. https://github.com/Egonex-AI/Understand-Anything

TypeScript 7.0 переписали на Go Microsoft выкатила один из самых важных апдейтов TypeScript за всю историю проекта. Главное изменение - новый нативный компилятор и tooling на Go. Что это даёт: * full builds быстрее в 8–12 раз * меньше расход памяти * быстрее отклик IDE * параллельная обработка parsing, type-checking и emit * более комфортная работа с большими monorepo Пример из бенчмарков Microsoft: VS Code собирался 125,7 секунды на TypeScript 6.0 и 10,6 секунды на TypeScript 7.0. Это не релиз про новый синтаксис. Это релиз про скорость, масштабирование и нормальную работу TypeScript на больших кодовых базах. https://linuxiac.com/typescript-7-0-rewrites-the-compiler-in-go-for-up-to-12x-faster-builds/

Runtime Compatibility: Инструмент для проверки совместимости JavaScript-кода с окружением Это полезный инструмент, который позволяет проверить, какие JavaScript-фичи поддерживаются в разных средах выполнения (Node.js, браузеры и т. д.). Что он умеет? 🔹 Анализирует ваш код и определяет, какие функции и синтаксис могут быть несовместимы с заданным окружением. 🔹 Поддерживает Node.js, браузеры, Cloudflare Workers, Deno и другие рантаймы. 🔹 Может использоваться как CLI или в виде онлайн-инструмента. Кому это полезно? ✅ Разработчикам, которым нужно убедиться, что их код работает на разных платформах. ✅ Тем, кто использует ES модули, топ-уровневый await, новые API и хочет избежать проблем с несовместимостью. ✅ Разработчикам библиотек, чтобы проверять поддержку своих пакетов. Если пишете код, который должен работать в разных окружениях — попробуйте Runtime Compatibility! 🚀 https://runtime-compat.unjs.io/

16 июля встречаемся с JS‑сообществом SberProfi в Сбер.Среде. AI уже меняет JavaScript‑разработку. Вопрос не в том, заменит ли он инженеров, а в том, кто освоит его быстрее и качественнее. 🔥 Обсудим изменения на реальных кейсах от Сбера, Cloud․ru и Mish. Очные участники увидят спецформат от блогеров и пообщаются с экспертами GigaCode и GitVerse. ⏳ Начало в 17:00, встреча очных гостей - в 16:00. Количество очных мест ограничено – успейте зарегистрироваться!

✔️ curl - один из самых недооценённых проектов в истории софта. Первый релиз вышел 20 марта 1998 года. Его запустил один разработчик - Daniel Stenberg. Прошло больше 27 лет, а он всё ещё поддерживает проект. Сегодня curl работает на миллиардах устройств и поставляется почти везде: * macOS * основные Linux-дистрибутивы * Windows 10 и новее * серверы * контейнеры * embedded-системы * CI/CD пайплайны Ирония в том, что многие пользуются curl каждый день, даже не думая об этом. Одна маленькая CLI-утилита стала невидимой инфраструктурой интернета. Вот так выглядит настоящий open source: без хайпа, без миллиардных раундов, но с кодом, который держит половину мира.

Подборка для тех, кто устал от «зарегистрируйтесь, чтобы скачать файл» 😈 FckSignups здесь 170+ веб-инструментов, которые работают прямо в браузере: без установки, без аккаунта и без оплаты. Внутри конвертеры, PDF-редакторы, утилиты для изображений и видео, аналоги CapCut, инструменты для текста, файлов, разработки и даже панели для мониторинга мировых событий. Открыл, сделал задачу, закрыл. Без почты, паролей и вечного «начните бесплатный trial». https://github.com/BraveOPotato/FckSignups

5 недооцененных возможностей JavaScript 1. FlatMap FlatMap в JavaScript — это отличная техника, с которой можно познакомиться здесь. FlatMap объединяет в себе функции map и метода массивов filter. Рекомендую использовать flatMap() вместо комбинации filter() и map(). 2. Порядок использования методов массивов Методы массивов — одни из самых важных методов, помогающих взаимодействовать с массивами. В JavaScript существует множество методов массивов. 3. Метод reduce Я наблюдал эту проблему у многих фронтенд-разработчиков. Когда пакет типа react-charts запрашивает данные в объектоподобной структуре, а реализация react-charts запрашивает данные в формате, сгруппированном по ключу, большинство разработчиков применяют метод .forEach() или некорректно используют метод map(). 4. Генераторы Генераторы и итераторы, пожалуй, относятся к элементам кода, не используемым JavaScript-разработчиками, знания которых ограничиваются вопросами для собеседования по программированию. В сценариях извлечения данных можно столкнуться с огромным объемом данных в БД/API, которые придется передавать во фронтенд. В этом случае наиболее часто используемым решением в react является бесконечная загрузка. 5. Нативные классы JavaScript В комплект поставки JavaScript входят нативные классы, с помощью которых можно довольно легко создавать/инстанцировать такие элементы, как URL, заголовки и т. д.

✔️ DeepSeek OCR локально на RTX 3090 Проект даёт полноценный OCR и умную обработку документов прямо у себя на машине через DeepSeek-OCR. Что внутри: загрузка изображений и многостраничных PDF точное распознавание текста + структурирование экспорт в Markdown / HTML / DOCX / JSON извлечение изображений и сохранение формул удобный интерфейс (React) + API (FastAPI) готов к запуску в Docker Подходит, когда нужно превратить сканы в редактируемые и поисковые документы без облака. GitHub: http://github.com/rdumasia303/deepseek_ocr_app

Zustand - это небольшая и быстрая библиотека для управления состоянием в React, которая корректно обрабатывает zombie children, concurrent rendering и потерю контекста. • упрощённые принципы Flux с API на основе hooks • не нужны providers и лишний boilerplate • выборочно перерендеривает только при изменении состояния • корректно решает типичные проблемы React state https://github.com/pmndrs/zustand

Anthropic вместе с Frontend Masters выкатили бесплатный курс по Claude Code. И это не поверхностный обзор, а нормальный разбор инструмента для тех, кто хочет реально прокачать вайбкодинг и работу с AI-агентами. Курс ведёт Lydia Hallie из Anthropic. Внутри: • основы Claude Code • skills • hooks • sub-agents • MCP • плагины • Agent SDK • продвинутые сценарии работы Хороший вход для тех, кто хочет не просто “просить ИИ написать код”, а собирать нормальный рабочий процесс вокруг Claude Code. Ссылка: http://frontendmasters.com/courses/claude-code

Open-source мониторинг без SaaS-привязки CheckCle выглядит как интересная self-hosted альтернатива для мониторинга инфраструктуры, сервисов и приложений. Проект даёт uptime-мониторинг, проверки HTTP, DNS, Ping и TCP-сервисов, распределённые региональные проверки, историю инцидентов, SSL и domain monitoring, public status pages, отчёты и алерты в Telegram, Slack, Discord, Matrix и email. Главный плюс в том, что всё можно поднять у себя через Docker. Не нужен внешний SaaS, не нужно отдавать данные третьей стороне, не нужно платить за каждый монитор или сидеть в чужой панели. По стеку тоже интересно: основа на Go, фронт на TypeScript, лицензия MIT. На GitHub у проекта уже около 2.7k звёзд, так что это не просто заброшенная утилита на вечер. Подойдёт тем, кто хочет свой мини-UptimeRobot/Better Stack для VPS, pet-проектов, внутренних сервисов или небольшой команды. Репозиторий: https://github.com/operacle/checkcle

xyflow предоставляет библиотеки для создания интерфейсов на основе узлов для React и Svelte, которые готовы к использованию сразу из коробки и бесконечно настраиваемы. - Пакеты @xyflow/react и @xyflow/svelte для создания редакторов узлов - Включает встроенные компоненты MiniMap, Controls и Background - Лицензирован по MIT с опциями коммерческой поддержки через React Flow Pro или GitHub Sponsors - https://github.com/xyflow/xyflow

Slice vs. Splice в JavaScript

Credit Card Payment Form Форма оплаты кредитной картой. Реализована с помощью CSS и JavaScript. https://codepen.io/quinlo/pen/YONMEa

🔴 Эфир начнётся уже через 2 часа. Переходи в бот за ссылкой: @shortcut_front_bot

Совет по javascript 💡 Более короткий способ проверки нескольких условий OR в javascript 🤩

🔍Тестовое собеседование с руководителем Frontend-разработки в этот четверг 18 июня(в четверг!) в 19:00 по мск приходи онлайн на открытое собеседование, чтобы посмотреть на настоящее интервью на Middle Frontend-разработчика. Как это будет: 📂 Виталий Черков, руководитель группы Frontend разработки с опытом 8+ лет, будет задавать реальные вопросы и задачи разработчику-добровольцу 📂 Виталий будет комментировать каждый ответ респондента, чтобы дать понять, чего от вас ожидает собеседующий на интервью 📂 В конце можно будет задать любой вопрос Виталию Это бесплатно. Эфир проходит в рамках менторской программы от ШОРТКАТ для Frontend-разработчиков, которые хотят повысить свой грейд, ЗП и прокачать скиллы. Переходи в нашего бота, чтобы получить ссылку на эфир → @shortcut_front_bot Реклама. О рекламодателе.