🔍 Валидация форм без раздражения

Вместо :invalid, который срабатывает сразу, используйте :user-invalid.

Что это дает:

— Валидация срабатывает только после взаимодействия с полем

— Не показываем ошибки в пустой форме при загрузке

— Лучший UX без дополнительного JS

⚙️ Поддержка: Chrome 119+, Safari 16.5+, Firefox 88+

Сейчас на курсы Proglib действует −40%🥰

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

#readme #css

💻 На каком железе вы работаете

Интересно узнать реальную статистику — от бюджетников до топовых сборок.

🔤 Любое железо приветствуется — Air на 8 ГБ, Pro, ThinkPad, игровой ноут, Desktop.

✏️ Пишите в комментах:

— Модель, процессор, RAM, SSD, год.

— Всё работает или есть проблемы?

— Довольны или хотите апгрейд?

Соберём честную картину 📊💪

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

🎯 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