ReactJS *

React — самый популярный фреймворк среди фронтенд‑разработчиков. Его подходы к разработке приложений часто воспринимаются как единственные правильные. Но что, если такие «стандарты» — это не необходимость, а вредная привычка, ломающая Developer Experience?

В статье разберем типичные проблемы Developer Experience в React: избыточный бойлерплейт, сложность управления состоянием и неочевидные оптимизации производительности. Покажем, как эти же задачи решаются в Svelte и обсудим, как смена фреймворка может упростить разработку.

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

Сегодня я рассмотрю несколько специализированных сервисов для хостинга фронта, среди которых не будет однотипных VPS. Только узкоспециализированные решения для хостинга сайтов.

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

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

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

Если заметите ошибки — пишите в комментариях!

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

В этом и есть суть современной разработки: бесконечный ремонт, замаскированный под «инновации».

Анимация пользовательского интерфейса прошла долгий путь за последнее десятилетие, они превратились в универсальный цифровой язык, который люди узнают и понимают. Эти микровзаимодействия позволяют дизайнерам общаться с пользователями посредством движения и анимации, предоставляя им рекомендации, контекст и создавая захватывающий пользовательский опыт.

В продакшене анимация всегда балансирует между выразительностью и производительностью. Чем сложнее сцена, тем выше нагрузка на процессор, особенно на мобильных устройствах. Поэтому важно оптимизировать: использовать GPU-дружественные свойства (transform, opacity), избегать тяжёлых reflow, а для сложных эффектов — применять библиотеку, которая работает с отложенным рендерингом, например Framer Motion или GSAP. Это не только повышает плавность, но и снижает энергопотребление, что прямо влияет на опыт пользователя.

Когда команда проектирует систему анимаций, важно фиксировать принципы в дизайн-системе. Это помогает избежать хаоса и гарантирует согласованность между продуктами. Хорошая практика — описывать длительность, кривые ускорения и паттерны движения как переменные, чтобы и дизайнеры, и разработчики говорили на одном языке. Например, motion-tokens, где заданы типовые параметры переходов: fast-out-slow-in, linear-out-slow-in и т.д.

На зрелом уровне анимация становится не надстройкой, а частью архитектуры интерфейса. Она помогает продукту чувствоваться цельным, обеспечивает предсказуемость и ритм, а главное — создаёт ощущение «живого» цифрового опыта. Привет, я Максим, frontend-разработчик в компании SimbirSoft, в этой статье расскажу, как сделать полезный для пользователя UI.

Привет, Хабр.

Меня зовут Роман, я основатель Somazone — платформы для сохранения голосовой памяти о близких людях. Пользователь загружает аудиозаписи, мы клонируем голос и создаём AI-агента, с которым можно общаться.

Звучит просто, да?

Два месяца без выходных. Рефакторинги в три часа ночи, когда глаза уже не фокусируются, но ты точно знаешь, что если не починишь сейчас — утром будет хуже. Прод падает в субботу вечером, когда ты наконец-то решил поужинать с семьёй. Баги, которые воспроизводятся только на проде и только у одного пользователя из Владивостока (почему Владивосток? мы так и не поняли). WebSocket-соединения, которые умирают по непонятным причинам. FFmpeg, который выжирает всю память на сервере и роняет всё вокруг.

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

Привет, Хабр! Меня зовут Карлен, я Lead Fullstack разработчик в ITFB Group. В этой статье хочу поделиться своим мнением о том, как выбрать библиотеку или фреймворк для вашего следующего проекта. 

Этот выбор напоминает мне подбор гардероба для важного мероприятия: ошибешься — и проект ждут дополнительные проблемы, угадаешь — и ты на вершине успеха! Чтобы не попасть в просак с выбором, давайте детально разберем ключевые различия между React и Vue и определим, на что стоит обратить внимание.

В этой статье я разберу, как создать интерфейс Liquid Glass компании с логотипом фрукта без использования различных npm-модулей или шейдеров, нагружающих видеопамять устройства.

Меня зовут Артём. Я — fullstack-разработчик уровня Middle, работаю с проектами на Python, JavaScript, Golang, Rust. В этой статье хочу рассказать о том, как я, подсмотрев западное приложение Kahoot, решил с нуля разработать собственную платформу для интерактивного обучения с огромным количеством ИИ-функций.

Снова на связи я –Дмитрий, React-разработчик, и в этот раз мы поговорим о создании фундамента для дальнейшей разработки.

Идея — сделать компонент в реакте, который сможет отобразить файл Excel в обычной HTML-таблице со всеми слияниями ячеек, форматированием, несколькими строками заголовка и полностью сохранённой структурой.

Казалось бы, задача простая: берёшь любую библиотеку, читаешь файл и показываешь. На практике всё оказалось гораздо интереснее.

Важное обновление безопасности для React-разработчиков 🛡️

Обнаружена RCE-уязвимость связанная с некорректным декодированием пейлоадов в Server Functions. Это позволяет неаутентифицированным пользователям выполнять код на сервере.

Что нужно сделать:

Проверьте, используете ли вы React Server Components.

Если да (например, в Next.js 15+), выполните обновление пакетов немедленно. Исправления доступны в версиях 19.0.1, 19.1.2 и 19.2.1.

По традиции статей Хабра начну с описания проблемы.

Я изучаю C#, .NET, ASP.NET и ищу работу Backend-разработчика. Сейчас дело дошло до собеседований и фундаментальных вещей (синтаксис, паттерны проектирования, принципы SOLID), я понял, что информации море и она вываливается из головы.

Вспомнил про метод карточек (Flashcards), который обычно используют для иностранных языков. Пошел на популярные ресурсы: Quizlet, RemNote и прочие. Зарегистрировался, начал создавать колоды, мне понравилось, вошел во вкус и каково было мое разочарование когда я везде натыкался на платные подписки. Где-то ограниченное количество карточек, где-то постоянная реклама, где-то очень замудренный интерфейс сделанный вообще не понятно для кого (привет Anki).
Хочешь больше функций? Плати. — Хочешь учить без рекламы? Плати. — Хочешь добавить картинку? Ну, ты понял...

Я смотрел на эти интерфейсы и во мне кипела злость: «Ну это же обычное CRUD-приложение! Две таблицы в базе, простейший API. Что тут сложного? Я сам могу такое сделать!»

Так родилась идея: написать свой сервис. Бесплатный. Без ограничений. Для себя. Это и проблема решится, и пет-проект для резюме будет.

Привет, снова Костя из Cloud.ru. Мы поговорили уже про as для типобезопасного полиморфизма, asChild для композиции и FACC для вариативного дизайна. Но что, если я скажу, что есть способ комбинировать логику ещё элегантнее и не смешивать ее с отрисовкой? Сегодня разбираем полиморфные декораторы - HOC'и на стероидах.

Устали использовать Redux / Zustand / Jotai как чёрный ящик? Хотите наконец понять, что за магия там под капотом?

Мне самому надоело вайбкодить синтаксис Redux-like библиотек. Пора уже понять чё за зверь такой – state manager. Это заняло у меня несколько месяцев, и сейчас пройдём этот путь вместе.

Буквально изобретём концепцию Jotai за семь дней.

Несколько раз в жизни мне случайно попадалась в руки гитара, и я начинал учить песни Стинга. Shape of my heart, Fragile — любимые с детства. Их я легко нашел на ютубе, подробные разборы, понятные для чайников — где какую страну зажимать и в каком порядке дергать.

А вот с Desert Rose возникли трудности — я не смог найти по ней внятный урок. Только примитивный набор аккордов типа Am, Dm, C. Но я нашел исполнение одной девушки, которое понравилось, и решил разобрать его. Сначала я просто смотрел на видео и повторял. Но дальше нескольких аккордов не получилось выучить — объем информации слишком большой. Я пытался в тетрадке делать записи, но тоже не осилил. Смотрел несколько приложений для составления табулатур и счел их крайне неудобными. Я пытался отказаться от записей и «вербализации», а двигаться на чувствах и интуиции — и тоже не смог

В итоге я сделал скриншоты всех перестановок руки (их получилось 75). И в редакторе изображений отметил перебор. Получилось такое:

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

Раньше у меня был сайт на Тильде. Стандартные шаблоны Тильды скучные, поэтому его делал дизайнер на zero-блоках. И каждый раз, когда надо было что-то на этом сайте добавить, приходилось дергать дизайнера в духе «Привет, добавь этот отзыв на сайт, пожалуйста».

Статьи добавлять поудобнее, но тоже не идеально. На том же Вордпрессе можно просто скопировать статью из гуглдока — и все, она вместе улетит вместе со всеми скриншотами. На Тильде надо тыкать каждую картинку руками, это бесит.

И вот я решил, что сайт устарел, его надо полностью переделать, а раз уж этим занимаюсь, можно и с Тильды заодно переехать. Например, на Вордпресс, к которому я как-то больше привык.

Стало интересно, а может ли Claude Code сделать сайт на Вордпрессе. С этим вопросом я к нему и пришел.

Claude сказал, что конечно может, но Вордпресс это скучно, и лучше делать сайт на Next.js + headless CMS. Я на тот момент даже не знал, что это такое. Ну так, слышал что на Next.js сайты делают — и все. Решил, что будет интересно разобраться и попробовать.

Спойлер — у нас (у меня и Claude Code) все получилось, сайт работает, мне нравится, даже трафик из SEO не просел.

Я работаю старшим фронтенд-разработчиком в it-отделе одного из крупнейших федеральных застройщиков. Специфика разработки в такой непрофильной компании — сроки спускаемые сверху и вообще не имеющие корреляции с реальными ресурсами и возможностями команды. Именно поэтому мы работаем очень быстро, постоянно пытаясь получить (максимум результата)*3 за (минимум времени)/4.

В этих условиях мы делали большие интеграции с headless CMS Directus и непосредственно с бекендом, используя моковые данные на фронте.
Интеграции были большие и быстрые — и вот тут-то и стало видно, что большинство фронтенд-разработчиков не очень понимают, как подготовить интеграцию, чтобы потом было быстро и не больно заменять моки на реальные ответы. В этой статье пойдет речь о таких подходах на фронтенде,

От красивых демок к законченным проектам: что я понял за полтора года работы с Claude Code

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

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

Проблема была не в промптах и не в архитектуре. Просто процесс разработки с ИИ постоянно буксовал: Claude выдавал код с API прошлого года, поиск нужной функции занимал по 15 минут, после третьего рефакторинга я терял нить и бросал проект, начинал терять что было сделано, сколько не суй ему to-do листы.

Потом я нашёл свой стек из MCP-серверов, которые действительно повысили эффективность в разных случаях от 2 до 8 раз, позволили экономить до 80% токенов, не терять контекст и совершать на 8 из 10 ошибок меньше.

Команда JavaScript for Devs подготовила перевод статьи о том, почему веб-команды застревают на орбите фреймворков и забывают о возможностях самой платформы. Автор убеждён: браузеры развиваются быстрее, чем экосистемы вокруг них, а зависимость от React и других инструментов тормозит инновации. Пора снова смотреть на веб как на платформу, а не как на “внутренность” фреймворка.