ReactJS *

Открываешь иконочный React-компонент — и видишь стену <path> с координатами и viewBox-арифметикой. Что там нарисовано — непонятно, пока не скопируешь разметку в отдельный .svg, браузерные DevTools или Figma. Каждый такой маневр выбивает из потока.

Всем привет, меня зовут Сергей Сибара, я фронтенд-разработчик в ИТ-холдинге Т1. Эта статья — продолжение предыдущей: Мой справочник по Feature-Sliced Design. На этот раз я рассмотрю, как по моему субъективному мнению улучшить файловую структуру проекта, нарушая рекомендации FSD.

Краткий обзор и представление фреймворка Shine для разработки десктоп приложений используя C++ и React.

В предыдущей статье был рассмотрен способ интеграции ИИ-ассистентов в процесс торговли на бирже. Чтобы углубиться в проектирование ИИ‑приложений, я решил доработать проект. В данной части опишу, как реализовал механизм GuardRails, а именно технику Human‑In‑The‑Loop.

Я делаю голосовой AI-репетитор английского. Продукт живёт в трёх местах:
веб-сайт speakwithai.pro, Telegram Mini App и Android-приложение в RuStore. У меня одна и та же база пользователей на NestJS + Postgres, и мне очень нужен ответ на вопрос: откуда вообще приходят люди?

Yandex.Metrika и Google Analytics показывают только сайт. Telegram Mini App для них — чёрный ящик. Android-приложение через WebView — тоже. Из 6000
просмотров статьи на Habr я не мог сказать, сколько оттуда пришло в продукт, и через какой канал (TG, веб, app).

Я не хотел тащить большую CDP вроде Mixpanel или Amplitude — для
соло-разработчика это overkill. Вечером сел и сделал simplest-thing-that-could-possibly-work: одна колонка в БД, парсится при первом визите, читается на регистрации. 100 строк кода. Делюсь.

Если интересно посмотреть на сам продукт — он живёт здесь:
🤖 Telegram-бот
🌐 Веб-версия
📱 Android в RuStore

Студенты попросили нормальный онлайн-доступ к оценкам и расписанию. В колледже уже была 1С:Колледж ПРОФ, но без удобного веб-интерфейса для студентов. Я сделал личный кабинет на Next.js, где браузер работает с моим сервером, а сервер — с 1С через HTTP-сервисы. Рассказываю, как устроил авторизацию, журнал, расписание, заказ справок и что оказалось самым сложным на стыке 1С и JSON.

За 25 дней нам удалось добиться довольно больших изменений в нашем проекте.

Мы провели:

Рефакторинг back-end сервисов

Убрали часть легаси кода на фронте

Переработали некоторый UI элементы и добавили плавности

Добавили новый функционал

С кэшированием в Next.js обычно случается одна и та же история. API уже отдаёт новые данные, страница открывается заново, а на экране всё ещё старая версия. После этого в код быстро добавляют cache: "no-store", данные начинают запрашиваться на каждый заход, и через пару минут появляется уже другой вопрос - зачем тогда вообще нужен встроенный механизм кэширования.

Проблема в том, что кэширование обычно звучит как одно явление, а на практике в App Router похожие ощущения могут давать разные уровни поведения. Навигация назад и вперёд может переиспользовать клиентский кэш маршрута, сам маршрут может рендериться по-разному, а серверный fetch в Next.js имеет собственные стратегии кэширования и перевалидации. В актуальной документации это уже разделено на новый режим с Cache Components и на прежнюю модель без них. В этой статье речь именно о привычной модели App Router без Cache Components, где поведение обычно задаётся через fetch, cache, next.revalidate и route segment config. (Next.js)

Полезнее всего разбирать такую тему не с теории, а с наблюдения. Не с вопроса как устроены все слои кэша в Next.js, а с вопроса почему на одном и том же маршруте иногда обновляется рендер страницы, а иногда обновляются данные, и это не всегда одно и то же.

Для примеров ниже используется проект Goods Finder и внешний API DummyJSON. Идея - сначала добавить на страницу штамп серверного рендера, потом отдельно показать момент получения данных, а уже после этого сравнить force-cache, no-store и revalidate.

Я часто замечаю, насколько некоторые разработчики халатно относятся к вопросам безопасности своих приложений. И начинают задумываться о методах защиты только тогда, когда уже приходится переписывать большую часть приложения. Сегодня мы пройдемся по классическим и не только методам атаки, посмотрим, где компилятор бессилен, и построим современную защиту, опираясь на лучшие практики и конкретные примеры кода.

Сегодня я хочу рассказать про то, как гетеросексуальный бэкендер (до этого момента коим я себя в той или иной степени считал) переживает болезненный опыт построения клиентской части платформы. Ради интереса недавно я посмотрел, сколько примерно строк на данный момент насчитывает репозиторий фронтенда Kroncl (название платформы), и приятно удивился числу 70.

Сделаю поправку на то, что очевидно: объём кода не свидетельствует о его чистоте и виртуозном ведении (опытные читатели скорее установят обратную зависимость).

В логистике всё редко выглядит как аккуратная CRM из презентации.

Заявки (аукционы/тендеры/грузы приходят из разных источников. Часть данных живёт в 1С/Битрикс/Excel/Амбарная книга, часть — в SQL, часть — в интерфейсах сайтов, часть — в голове менеджера. Перевозчики отвечают неравномерно, менеджеры работают через звонки и таблицы, а руководителю нужно быстро понимать: какие заявки есть сегодня, где рента, какие маршруты повторяются, кто из менеджеров проседает, где найти транспорт.

Я делаю внутреннюю систему автоматизации для логистической компании. Один из её модулей — веб‑панель поиска заявок. Сначала это была обычная таблица с фильтрами: маршрут, дата, тип кузова, источник, цена, рубли за километр.

Но довольно быстро стало понятно: сама таблица не закрывает главный сценарий.

Человеку всё равно нужно руками формулировать фильтр, помнить названия полей, переключаться между поиском, аналитикой и рекомендациями. Плюс в логистике своя внутренняя бизнес кухня, прибыль идет от типа ТС (реф/тент/изотерм/прочие) + сезонность, А если надо спросить что‑то вроде «какая ставка/руб‑км Краснодар — Москва тент?» или «сравни двух менеджеров за неделю», таблица превращается в набор ручных действий.

Так внутри поиск‑панели появился нейробот.

"Эта статья о том, как я n0x из просто болталки сделал агента который научился открывать браузер, делать скриншоты и выполнять команды

Вы когда-нибудь разговаривали с AI, и он в ответ на просьбу «открой Яндекс» писал вам: «Вот ссылка: https://yandex.ru»?

Я — да. И каждый раз мне хотелось сказать: «Спасибо, капитан Очевидность, я и сам это знаю».

Проблема в том, что большинство LLM-приложений — это просто болталки. Они генерируют текст, но не могут сделать что то полезное. А что, если бы AI мог управлять браузером? Открывать страницы, делать скриншоты, выполнять JavaScript?

В этой статье я расскажу, как добавил в проект n0x поддержку MCP (Model Context Protocol) — и научил AI-агента открывать сайты по команде «открой …».

Я фронтенд-разработчик, и в одном из своих пет-проектов на React-сервисе с цветовыми палитрами мне нужно было сделать функционал фильтров, токенов поиска и поиска по названию, где пользователь мог бы выбрать цвет, задать стиль палитры, отфильтровать по количеству цветов и вводить текстовый запрос.

Получилось создать удобный интерфейс, в котором всё меняется мгновенно и без перезагрузок, как и ожидается от современного приложения.

Меня зовут Арсений, мне 15 лет. У меня 99 пользователей, более 100 SQL‑миграций и приложение на Android и Windows. И, что не менее важно, — команда единомышленников и поддержка тех, кто верил в проект с самого начала.

Если вам интересно попробовать — заходите на агора.com.

Привет, коллеги! 

Сегодня мы копнем в самую суть инженерного подхода. На повестке дня - сравнение двух кардинально разных философий создания сложного UI-компонента. Это не просто рассказ о DatePicker, это анализ стратегического выбора, который каждая команда делает каждый день: скорость в ущерб предсказуемости или наоборот?

Исходный код доступен по ссылке: https://github.com/Codesrc-public-ru/ralf-datapicker

За основу мы возьмем два реальных кейса. Первый - «AI-драфтинг», отлично описанный нашей статье "Создаем WCAG-доступный DatePicker на React: как Claude пишет основу, а мы доводим до ума". Идея: получить 80% кода от нейросети, а остальное довести вручную. Это путь быстрых итераций и реактивного решения проблем.

Второй - «Системный инжиниринг», подход описан в этой документации к инструменту https://github.com/snarktank/ralph. Идея: сначала детальное проектирование, потом итеративная работа модели. Это путь проактивного управления сложностью.

Оба приводят к результату. Но какой ценой? И что скрывается под капотом каждого из них? Давайте разберем.

Однажды разработчики NEXT.JS решили сделать сервис для хостинга и получился Vercel. Они смогли предложить рынку облачную архитектуру, определяемую фреймворком, что дало великолепный пользовательский опыт.

Но в ряде случаев нужны аналоги Vercel. Особенно в России, где сайты на Vercel недоступны для многих пользователей с мобильного интернета из-за региональных ограничений. Да и не у всех есть возможность оплачивать платные тарифы долларовой картой.

Чтобы лучше представить альтернативы Vercel и их сильные и слабые стороны, я рассмотрю архитектуру самого сервиса и его конкурентов.

Привет всем.

Расскажу про свой личный опыт разработки через Qwen 3.6 Plus и Qwen ClI. И да, статья полностью написана человеком.

Это небольшой pet-проект, сделанный в момент, когда Qwen 3.6 Plus был бесплатным с лимитом в 1000 запросов в день. Проект представляет из себя фронтенд вымышленного интернет-магазина по продаже микрокомпьютеров.

Цель была протестировать возможности Qwen. На весь проект у меня ушло 4 дня по 2-3 часа.

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

Разработчики сталкиваются с выбором: использовать CSS Modules или CSS-in-JS решения. Эти подходы дают изоляцию стилей и интеграцию с компонентами, но различаются по реализации и ограничениям.

Выбор системы стилизации влияет на разработку и ключевые метрики: размер бандла, скорость первого рендера, поведение при SSR, удобство отладки и поддержку кода. Неподходящий подход может привести к увеличению объёма JavaScript, проблемам с SSR и усложнению масштабирования.

Данная статья не ставит цель назвать одного победителя. Вместо этого мы сравним основные подходы - CSS Modules и CSS-in-JS. 

Бывает, что фича готова и её пора передавать в тестирование, но при этом не покидает ощущение, что что-то не так. Однажды внутреннее чутьё меня не обмануло и привело в исходники React.

Меня зовут Денис Кондратьев — я фронтенд-разработчик в Точка Банк. В статье поговорим, как работает приоритетный рендеринг в React, что такое проблема разрыва и разберём реальный кейс на примере корпоративного мессенджера.

Всем привет! Меня зовут Евгений Оселедец, я ведущий разработчик в компании Axenix. В этой статье расскажу, как мы упаковали React и Java в единое автономное desktop-приложение с помощью Electron для Windows, Linux и macOS — без Docker, без предустановленной Java у пользователя и без необходимости интернет-соединения. Расскажу, с какими техническими вызовами мы столкнулись и какие решения сработали на практике.