Обновить
38.15

ReactJS *

JavaScript-библиотека для создания интерфейсов

Сначала показывать
Порог рейтинга
Уровень сложности

Бесплатные и платные хостинги для сайтов на Next, React и JAMStack

Время на прочтение3 мин
Охват и читатели5.3K

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

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

Читать далее

Новости

Мой справочник по Feature-Sliced Design

Уровень сложностиСредний
Время на прочтение9 мин
Охват и читатели5.5K

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

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

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

Читать далее

Увольте своих программистов. Или спросите их…

Время на прочтение4 мин
Охват и читатели29K

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

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

Читать далее

Анимированный UI: как улучшить взаимодействие с пользователем

Уровень сложностиСредний
Время на прочтение12 мин
Охват и читатели4.9K

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

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

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

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

Читать далее

Как мы за два месяца построили платформу для клонирования голоса: 12 проблем, mass-рефакторинги в 3 ночи и mass-фейлы

Уровень сложностиСредний
Время на прочтение19 мин
Охват и читатели6.4K

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

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

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

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

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

Читать далее

React vs Vue: Что выбрать в 2026?

Уровень сложностиПростой
Время на прочтение4 мин
Охват и читатели15K

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

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

Читать далее

Как реализовать эффект, подобный Liquid Glass, при помощи CSS без JavaScript и шейдеров

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели18K

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

Читать далее

Как я создал аналог западной обучающей платформы — Quaize

Уровень сложностиПростой
Время на прочтение3 мин
Охват и читатели8.1K

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

Читать далее

Отображение Excel в React: экспериментальный прототип с merge и изначальной структурой

Уровень сложностиСредний
Время на прочтение14 мин
Охват и читатели7.5K

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

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

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

Читать далее

Критическая уязвимость безопасности в React Server Components

Время на прочтение4 мин
Охват и читатели13K

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

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

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

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

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

Читать далее

FlashcardsLoop — или как я делал свой Quizlet

Уровень сложностиПростой
Время на прочтение5 мин
Охват и читатели7.4K

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

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

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

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

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

Читать далее

Грани полиморфизма React: полиморфные декораторы

Время на прочтение6 мин
Охват и читатели6.6K

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

Интересно

Как Jotai хранит состояние в React?

Уровень сложностиСредний
Время на прочтение5 мин
Охват и читатели5.2K

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

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

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

Читать далее

Ближайшие события

Музыкальный блокнот. Приложение разбора игры на гитаре по видео (вайб кодинг 1 день)

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели7.6K

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

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

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

Читать далее

Как правильно обновлять зависимости в проекте

Уровень сложностиПростой
Время на прочтение2 мин
Охват и читатели5.2K

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

Читать далее

Я сделал сайт с Claude Code вместо админки — и это очень удобно

Уровень сложностиСредний
Время на прочтение7 мин
Охват и читатели35K

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

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

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

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

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

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

Читать далее

Фронтенд обгоняет бек или как мы написали 200_000 строк кода на моках

Время на прочтение14 мин
Охват и читатели9.6K

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

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

Читать далее

Как оптимизировать и поднять эффективность AI-Кодинга от 2 до 8 раз используя стек MCP серверов

Уровень сложностиСредний
Время на прочтение46 мин
Охват и читатели14K

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

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

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

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

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

Читать далее

Как выбраться из гравитации фреймворков

Уровень сложностиПростой
Время на прочтение9 мин
Охват и читатели7.4K

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

Читать далее

Грани полиморфизма React: паттерн FACC

Уровень сложностиПростой
Время на прочтение7 мин
Охват и читатели8.7K

Привет, с вами снова Костя из Cloud.ru. Мы поговорили про паттерн as для типа безопасного полиморфизма и asChild для чистой композиции. Но сегодня поговорим о подходе, который даёт такую гибкость в вариативном дизайне, что дизайнеры будут гордиться вами - FACC (Function as Child Component).

Читать статью
1
23 ...

Вклад авторов