Фронтенд Гайд

👩‍💻 3D-лента изображений с фокусом при наведении! В этой фишке мы создаём 3D-ленту изображений с глубиной, перспективой и движением. Как работает: • используется единая адаптивная единица --index, которая масштабируется; • perspective задаёт глубину; • кастомный cubic-bezier формирует плавное движение без дёрганий; • вся интерактивность работает через transform и filter. Такой приём отлично подходит для галерей и портфолио, подборок контента, hero-блоков.

📂 Напоминалка для работы с JavaScript! Например, let и const используются для корректного объявления переменных, map и forEach — для обработки массивов, а includes и split помогают при работе со строками. На картинке — базовые конструкции языка и самые часто используемые методы, которые стоит держать под рукой. Сохрани, чтобы не забыть!

👩‍💻 Посимвольная загрузка с волновой анимацией! Интерактивность не всегда требует сложных компонентов. Иногда достаточно правильно прописать движение. Как работает: • каждый символ вынесен в отдельный <span>, что дает контроль над фазой анимации; • animation-delay через CSS-переменную создаёт ритм без дублирования ключевых кадров; • движение построено на transform, поэтому анимация не вызывает перекомпоновки; • изменение opacity визуального акцента активных цифр. Отлично подходит для обработки загрузки, ожидания и переходов, где важно удерживать внимание, не перегружая пользовательский интерфейс.

👩‍💻 Управляем резиновым ресайзом одной строкой! Пользователь может растянуть <textarea> как угодно, и это часто ломает layout, вылазит за контейнер, разваливает сетку, сдвигает кнопку отправки: textarea { resize: both; } Если ресайз в интерфейсе не предусмотрен, запретим его явно: textarea { resize: none; } Нужен только вертикальный ресайз (самый безопасный для формы)? Тогда так: textarea { resize: vertical; } 🔥 Такая мелкая деталь, позволяет сохранять целостность интерфейса.

Вертикальные вкладки доступны за флагом в Chrome 145 (текущая бета) 1. Перейдите на chrome://flags/#vertical-tabs 2. Включите флаг (установите Enabled) 3. Перезапустите Chrome 4. Кликните правой кнопкой по панели вкладок и выберите “Move Tabs To The Side” (переместить вкладки вбок)

🔎 Feature-based vs Layered архитектура: что выбрать для фронтенда? Когда вы начинаете проект, всё кажется довольно простым. Но потом начинаются проблемы. Архитектура фронтенда может быть выбрана так, что она сначала удобна, а потом превращается в настоящую головную боль. Сегодня давайте разберёмся, чем отличается feature-based подход от layered архитектуры и где каждый из них действительно работает. ➕ Layered архитектура Layered архитектура — это та самая классика, с которой все когда-то начинали. Всё в проекте делится на слои: компоненты, сервисы, store, api и утилиты. • Это удобно на старте, и легко понять новичкам, потому что структура очевидна и проста. Но когда проект начинает расти, появляется куча проблем. Например, если вам нужно внести изменения в бизнес-логику, то придётся таскаться по пяти разным папкам. Вроде бы просто, но на деле начинается путаница. • Пример, который я часто встречаю: добавление функционала «избранного». UI живёт в папке components, запросы — в api/favorites, а состояние в store. Функция вроде как есть, но она размазана по всему проекту, и найти все её части в одном месте просто невозможно. ➕ Feature-based архитектура В feature-based архитектуре всё куда проще: каждый функционал — в своей папке. Структура выглядит примерно так: /features /favorites ui/ api/ model/ lib/ • Здесь вся фича собрана в одном месте: UI, API и модель. Это даёт отличный контроль за кодом, упрощает рефакторинг и удаление функций, и делает работу с фичами понятной и изолированной. Всё, что связано с конкретной фичей, будет в её папке, и даже если вам нужно её удалить — вы просто стираете папку. Меньше глобального шума и больше порядка. • Однако, как и в любом подходе, тут тоже есть свои нюансы. Например, если фичи слишком маленькие, это может привести к дублированию логики. Плюс, нужно чётко следить за границами и договориться с командой, что стоит делать фичами, а что нет. ➕ Как это выглядит на практике? В больших проектах, как правило, не бывает чистых подходов. Очень часто используется гибрид: папки для инициализации, провайдеров, бизнес-сущностей и пользовательских сценариев. • Такой подход позволяет сбалансировать бизнес-логику и не превращать папку shared в помойку, сохраняя возможность масштабирования. • Когда стоит выбрать какой подход? Если проект маленький, срок жизни короткий и работает 1-2 человека, то layered будет вполне хорош. Но если продукт живёт долго, несколько команд работает над ним, а фичи часто меняются — feature-based будет предпочтительнее. 📌 Если вам нужно часто вносить изменения в одну фичу, и для этого нужно лезть во все уголки проекта, значит архитектура выбрана неправильно. Лучший признак правильного решения — это когда фичу легко найти, изменить и удалить, а дальше уже детали.

💼Можно ли управлять отображением цифр в тексте без подмены шрифта? Свойство font-variant-numeric позволяет управлять начертаниями цифр и связанных с ними символов. Принимает одно или несколько значений: • normal — отключает альтернативное начертание; • ordinal — добавляет дополнительные глифы для порядковых числительных; • slashed-zero — ноль будет с чертой внутри; • lining-nums — каждая цифра лежит на базовой линии текста; • oldstyle-nums — набор строчных цифр, в котором 3, 4, 7, 9 свешиваются с базовой линии; • proportional-nums — допустима разная ширина цифр; • tabular-nums — одинаковая ширина каждой цифры; • diagonal-fractions — числитель и знаменатель в дроби уменьшены и разделены косой чертой; • stacked-fractions — числитель и знаменатель в дроби уменьшены и разделены горизонтальной линией. Это свойство работает только со шрифтами, в которых заложены OpenType фичи.

❌ Когда useMemo и useCallback делают только хуже Все любят useMemo и useCallback. А точнее, все любят думать, что они ускоряют приложение. Но проблема в том, что в реальных проектах они часто могут ухудшить производительность, а не улучшить. Давайте разберёмся, когда эти хуки на самом деле становятся более вредными, чем полезными. 🗳 Оптимизация, где её нет Начнём с того, что если компонент и так рендерится быстро, то использовать useMemo не имеет смысла. Эти хуки добавляют ненужную работу: React всё равно должен хранить зависимости, сравнивать их и поддерживать ссылки в памяти. А для чего? Чтобы оптимизировать то, что и так работает нормально? Это самый популярный антипаттерн, с которым сталкиваются почти все фронтендеры. ⬅️ «useCallback ради useCallback» Очень частая ситуация: оборачиваем колбэк в useCallback, думая, что это спасёт нас от лишних рендеров. Но на самом деле, если эта функция не передаётся в memo-компонент и не участвует в зависимостях эффектов, то useCallback просто создаёт лишний шум в коде, не давая ни улучшений в производительности, ни каких-то других плюсов. ❗️ Ломается читаемость Забудьте про чистоту кода. Когда вы обвешиваете всё хуками, как ёлку игрушками, код становится сложнее для восприятия и поддержки. Особенно это важно для новых людей в команде: приходится разбираться в логике, а зависимости в коде ломаются быстрее, чем вы успеваете заметить. 🔫 Иллюзия оптимизации Самая опасная ошибка — это когда вы начинаете думать, что «всё оптимизировано», потому что начали использовать useMemo и useCallback везде. Но настоящие проблемы обычно кроются в лишних рендерах из-за стейта, тяжёлых эффектах, layout thrashing и, конечно же, неправильной архитектуре компонентов. Эти проблемы не решаются хуками. 📌 Помните, что оптимизация не всегда требует использования дополнительных хуков. Прежде чем применять эти инструменты, важно понять, действительно ли это необходимо. Оптимизация должна быть направлена на уменьшение лишней работы, а не на усложнение кода.

👩‍💻 Настраиваем иерархию стилей в проекте! Когда проект растёт, стили начинают перебиваться и путаться. CSS дал решение - каскадные слои. Создайте слои с приоритетом: @layer reset, base, components, utilities; Теперь порядок каскада становится управляемым: слои идут строго в указанной последовательности, а внутри слоя продолжают работать обычные правила (специфичность и порядок объявления). Например, базовые стили: @layer base { button { font-size: 1rem; }} Компоненты идут выше по приоритету: @layer components { .btn-primary { font-size: 1.1rem; }} И утилиты завершают каскад: @layer utilities { .fs-lg { font-size: 1.25rem; }} 🔥 Так исчезают конфликты слоёв, приоритеты всегда предсказуемы, проще мигрировать и рефакторить большие проекты.

Обрати внимание, что в корректном примере чипы мгновенно перемещаются на новую позицию, когда один из чипов удаляется. Это происходит из-за режима popLayout в AnimatePresence из motion/react, который обеспечивает более плавную и быструю анимацию при удалении элемента

📂 Напоминалка для работы с React.js! Например, useState помогает хранить состояние компонента, а useEffect — работать с побочными эффектами и запросами к API. На картинке — основные темы и приёмы, которые чаще всего используются в React-разработке: хуки, рендеринг, формы, роутинг, стилизация и оптимизация. Сохрани, чтобы не забыть!

Держите полезную CLI-утилиту — npkill, предназначенную для удаления всех папок node_modules в проектах. Позволяет освободить значительное количество места на диске Запускаешь команду: npx npkill Дальше, просто нажимаешь [Пробел], чтобы удалить те папки, которые больше не используешь Удобно ещё и то, что она показывает, сколько дней назад была последняя модификация

🤓 Напоминалка для работы с Git. Например, git push отправляет твои изменения на сервер, а git checkout позволяет быстро переключаться между ветками. На картинке — 12 самых нужных команд, которые стоит держать под рукой. Сохрани, чтобы не забыть!

👩‍💻 Растягивай абсолютные элементы в одну строку — через inset! Многие задают абсолютным элементам растяжение вручную: .block::before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; content: ""; } Но то же самое можно записать короче — одной строкой: .block { position: relative; } .block::before { position: absolute; inset: 0; content: ""; } inset: 0 означает сразу: top: 0; right: 0; bottom: 0; left: 0; — элемент растянется по родителю. 🔥 Полезно для оверлеев, эффектов, декоративных слоёв и background-паттернов.

Возможно, вы не знали, что можно напрямую получить значение числового input-поля как число с помощью valueAsNumber. Ручное преобразование не требуется Свойство value у HTMLInputElement всегда возвращает строку. Поэтому для числовых полей нам приходится вручную преобразовывать значение в число с помощью parseInt(), parseFloat(), Number() или оператора +. Мы можем упростить это, используя valueAsNumber. Оно напрямую возвращает значение как число.