🎯 Feature-Sliced Design: организация кода по фичам

Feature-Sliced Design (FSD) — это методология для архитектуры фронтенд-приложений, ориентированная на упрощение понимания кода и его стабильность при постоянных изменениях бизнес-требований.

Структура из 7 слоёв:

1️⃣ app/ — инициализация приложения: роутинг, точки входа, глобальные стили, провайдеры

2️⃣ processes/ — устаревший слой, сейчас рекомендуется использовать features и app

3️⃣ pages/ — полные страницы приложения или крупные части страницы при вложенной маршрутизации

4️⃣ widgets/ — крупные самодостаточные блоки функциональности или UI, реализующие целый сценарий использования

5️⃣ features/ — продуктовые функции, которые приносят
бизнес-ценность пользователю

6️⃣ entities/ — бизнес-сущности, с которыми работает проект (например, user или product)

7️⃣ shared/ — переиспользуемая функциональность, не привязанная к специфике проекта или бизнеса

〰️ Модуль может импортировать другие слайсы только с нижележащих слоёв. Верхний слой не может использовать модули из других слоёв.

⚙️ FSD универсальна: её можно использовать в любых проектах с любым стеком, языком или фреймворком.

🔥 Еще больше полезного на курсе «Архитектуры и шаблоны проектирования» (−40%)

🐸 Библиотека фронтендера

#blueprint

🐸 Библиотека фронтендера

#pixel_pause

😱 Баг, который пропускают даже опытные разработчики

Казалось бы, простой условный рендеринг. Но вот вам сюрприз.

Когда items пустой массив, items.length равен 0. В JavaScript 0 — это falsy значение, поэтому выражение 0 && <ul> вернет 0.

React рендерит числа, поэтому на экране появится цифра 0!

✅ Правильный вариант:

function ProductList({ items }) {
  return (
    <div>
      <h2>Товары</h2>
      {items.length > 0 && <ul>
        {items.map(item => <li key={item.id}>{item.name}</li>)}
      </ul>}
    </div>
  );
}

Или еще лучше:

{!!items.length && <ul>...</ul>}

Или тернарный оператор:

{items.length ? <ul>...</ul> : null}


💡 Почему так происходит:

Оператор && возвращает первое falsy значение или последнее truthy:

0 && <Component /> → вернет 0 (React рендерит!)

false && <Component /> → вернет false (React не рендерит)

true && <Component /> → вернет <Component />

React не рендерит: false, null, undefined, true

React рендерит: числа (0, 1, -1), строки, компоненты

❗️ Оператор && используйте только с boolean значениями, а не с числами.

🐸 Библиотека фронтендера

#hotfix #react

📌 Git Blame с суперсилами

Обычный git blame показывает, кто последним менял строку. Но что если код был перемещён из другого файла или отформатирован? Есть команда, которая превращает Git в настоящего детектива.

git blame -w -C -C -C src/components/Button.jsx

ℹ️ Что делает каждый флаг:

-w — игнорирует пробелы и форматирование. Если кто-то запустил prettier на весь файл, Git «видит сквозь» это изменение и показывает реального автора логики.

-C — отслеживает копирование кода в пределах одного коммита. Вынесли функцию в отдельный файл? Git покажет оригинального автора.

-C -C — ищет копирование при создании нового файла. Идеально для рефакторинга, когда код переезжает в новые модули.

-C -C -C — ищет происхождение кода во всех коммитах. Покажет источник, даже если код путешествовал между файлами несколько раз.

🐸 Библиотека фронтендера

#readme #git

🍷 Апдейты недели

➡️ Next.js 16

Новый бандлер Turbopack в Next.js 16 ускоряет сборку в 2-5 раз! Теперь кэширование можно настроить через use cache, что делает разработку и деплой ещё быстрее.

➡️ TDDev

Представлен фреймворк TDDev, использующий TDD для автоматической генерации веб-приложений

🔥 Еще больше полезного на курсе «Архитектуры и шаблоны проектирования» (−40%)

🐸 Библиотека фронтендера

#release_digest

🛎 Жесткое собеседование на позицию с зарплатой 320К

В видео разбираются сложные вопросы и задачи собеседования: ООП, SOLID, алгоритмы, рефакторинг, Docker и Kubernetes.

ℹ️ Узнайте, какие знания и навыки требуются для успешного прохождения.

🐸 Библиотека фронтендера

#read_watch

🕹 npm install: хитрость фронтендера

Каждый сталкивался с дилеммой: проверять всё или просто вставить команду и надеяться, что заработает?

➕ Проверяем пакет перед установкой

➕ Копируем команду из StackOverflow и надеемся, что заработает

Голосуем реакциями:

👍 — Осторожность
❤️ — Копипаст

🐸 Библиотека фронтендера

#code_battle

🐸 Библиотека фронтендера

#pixel_pause

✨ Контейнерные запросы — адаптивность нового уровня

Обычно мы пишем:

@media (min-width: 600px) {
  .card { flex-direction: row; }
}

Но что, если карточка живёт в разных местах — и в сайдбаре, и в сетке?
Глобальный @media ломает вёрстку.

💡 Решение — @container

@container (min-width: 400px) {
  .card { flex-direction: row; }
}

Теперь адаптация зависит от ширины контейнера, а не всего экрана. Каждый блок подстраивается под своё окружение — без медиазапросного ада.

⚙️ Работает в Chrome 105+, Safari 16+, Firefox 109+

🐸 Библиотека фронтендера

#readme #css