👩‍💻 Разработка UI Kit: создание компонента Button

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

1️⃣ Во-первых, UI Kit обеспечивает визуальную и функциональную согласованность интерфейса. Когда десятки или сотни экранов используют одни и те же компоненты
2️⃣ Во-вторых, разработка ускоряется в разы — вместо создания элементов с нуля, команда использует готовые решения.
3️⃣ В-третьих, значительно упрощается поддержка и масштабирование: изменения в дизайн-системе вносятся в одном месте, а применяются во всём проекте.

[Картинка 1: Пример Storybook]

UI Kit — это не просто коллекция кнопок и полей ввода. Это комплексная система, включающая:
- Базовые компоненты интерфейса (кнопки, формы, переключатели)
- Типографику и иерархию текста
- Цветовую палитру с семантическим значением цветов
- Систему отступов и размеров
- Состояния элементов (активное, неактивное, hover, focus)

[Картинка 2 и 3: Дизайн в Figma]

🛡 Основные принципы разработки компонентов UI Kit
При создании компонентов для UI Kit необходимо придерживаться нескольких фундаментальных принципов

1. Семантическая корректность
Каждый компонент должен максимально точно отражать свою суть на уровне HTML-разметки. Кнопка — это <button> или <input type="button">, ссылка — <a>, поле ввода — <input> или <textarea>. Это важно не только для доступности (accessibility), но и для правильной работы в различных контекстах (например, в формах или при навигации).

2. Полнота свойств
Компонент должен поддерживать все стандартные HTML-атрибуты соответствующего элемента. Для кнопки это включает type (button, submit, reset), disabled, autofocus и другие.

3. Управляемость извне
Компонент не должен содержать внутреннюю логику состояния (где это возможно). Все состояния (активное, неактивное, загружающееся) должны управляться через пропсы. Это делает компонент предсказуемым и легко интегрируемым в любую архитектуру.

4. Принцип открытости/закрытости
Компонент должен быть закрыт для модификаций (его базовое поведение нельзя изменить), но открыт для расширения. На практике это означает:
- Возможность добавления классов через className
- Возможность передачи произвольных атрибутов
- Гибкость в контенте через children

5. Единый источник правды
Изменение компонента в UI Kit должно автоматически отражаться во всех местах его использования. Это требует тщательного проектирования API компонента на этапе создания, чтобы избежать необходимости "ветвления" логики в будущем.

🔒 Архитектура UI Kit в проекте
Оптимальная структура для UI Kit в проекте выглядит следующим образом:

src/
  ui/
    Button/
      Button.tsx            # React-компонент
      Button.stories.tsx    # Документация в Storybook
      Button.test.tsx       # Тесты компонента
      Button.module.css     # Стили компонента
    Input/                 # Аналогичная структура для других компонентов
    ...
  styles/
    variables.css          # CSS-переменные (цвета, отступы, шрифты)
    typography.css         # Типографика
    animations.css         # Анимации
    global.css             # Глобальные стили

🖥 Реализация компонента Button для UI Kit
Перед разработкой тщательно изучаем макеты и выделяем все варианты кнопок: Варианты по стилю, Размеры, Состояния, Дополнительные требования (иконки, текст).

[Картинка 4: Компонент Button]

При стилизации используем CSS-переменные из дизайн-системы, Для каждого варианта прописываем цвета для всех состояний.

[Картинка 5: CSS-переменные]

Создаем подробные TypeScript-интерфейсы: Объединение с нативными атрибутами button и a, Поддержка всех стандартных HTML-атрибутов, Четкое разделение кастомных и стандартных пропсов

[Картинка 6: Типизация кнопки]

Далее создаем сторисы для всех вариантов: Основной вид, Все состояния, Примеры с иконками, Вариант как ссылки

#ui #storybook #button #react

[Версия 1.0.14] - Обновление платформы

🔥 Главное нововведение – публичные коллекции вопросов! Теперь вы можете свободно изучать подборки вопросов по разным компаниям и темам без регистрации. А чтобы начать тренировки, достаточно быстро зарегистрироваться. Готовьтесь к собеседованиям эффективнее!

Каждую неделю мы добавляем новые коллекции вопросов.

Исправлено:
- Мелкие баги

Добавлено:
- Публичные Коллекции вопросов. Это подборки вопросов по определенным темам, или компаниям. Теперь можно готовиться к собеседованиям в нужную вам компанию
- Новый лендинг – стал удобнее, информативнее и современнее

Спасибо, что остаетесь с нами — мы продолжаем прокачивать продукт 💪
Пробуйте, тестируйте, делитесь обратной связью!

👍 Обучайтесь, общайтесь, растите вместе с https://yeahub.ru

#release #news #update #yeahub

👷‍♂️ Мой путь в IT. От монтажника до Frontend Разработчика

Привет! Меня зовут Руслан. Я — фронтенд-разработчик, ментор и просто человек, который верит, что упорство меняет жизнь.

У меня есть любящая семья: жена и маленькая дочка, которой недавно исполнился годик. Мы живём в Краснодаре, но моя история началась далеко отсюда…

👶 Кем я был раньше

Я родился в Сибири, а в 16 лет переехал в Краснодар. Здесь я окончил школу и университет — по специальности агрономия и защита растений. Да, я не технарь по образованию, и моя дорога в IT была непростой.

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

Тогда моя жизнь была тяжёлой:
- Работа — физический труд, иногда по 12 часов.
- Быт — холодные общежития, еда на скорую руку.
- Ощущение — «Это не та жизнь, которую я хочу».

Пока мои друзья в Краснодаре ездили на море, путешествовали в горы, праздновали дни рождения, я работал. И именно тогда я понял: пора что-то менять.

🤬 Переломный момент

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

Тогда у меня была затяжная депрессия — около двух лет. Меня не устраивала моя жизнь, но я не знал, чем заняться. Передо мной было два варианта:
- Смириться, перестать мечтать о большем — и тогда неудовлетворённость жизнью пройдёт;
- Менять жизнь, делать что-то, чтобы улучшить своё положение.

Я выбрал второй вариант.

😎 Как я начал меняться

Первым делом я бросил курить и пить (тогда я пил почти каждый день, а без сигарет не представлял жизни — курил каждые 30 минут, вероятно, из-за депрессии);

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

Начал читать книги. Самые важные для меня:
- «Красная таблетка» Андрея Курпатова (кстати, она помогла мне и с JS — я внушал себе, что смогу его освоить, и в итоге так и произошло);
- «Квантовый воин» Джона Кехо — книга о психологии, самовнушении и вере в себя.

Я всегда хотел создавать что-то новое. IT привлекало возможностями. Когда я видел разработчиков с их макбуками и кофе, то понимал - хочу так же. А потом смотрел на свои рабочие руки в пыли и бетоне... Это мотивировало меня двигаться вперед.

Ну и, конечно же, я начал изучать программирование. Но об этом — в следующем посте.

📌 На картинках я на работе, устанавливаю балконные рамы. А также на подработке, загружаю арбузы в газели. Также фото с трамвая, я начал читать книгу "Квантовый воин".

💻 Как я изучал программирование

Мой путь в IT начался с Python. Я прошел бесплатный курс от Яндекс.Практикума, где в игровой форме изучал синтаксис: писал условия, циклы, функции, будто бы программируя голосового помощника. Но мне было непонятно, чем на самом деле занимаются разработчики. Неужели их работа сводится только к решению задач из учебников?

Я продолжал учиться: смотрел лекции Тимофея Хирьянова, конспектировал, но через три месяца осознал, что топчусь на месте. Не понимал, зачем мне эти знания и куда двигаться дальше. После небольшого перерыва я наткнулся на курс CS50 и впервые узнал о разделении на фронтенд и бэкенд. Это помогло мне определиться: я выбрал фронтенд.

👩‍💻 Фронтенд: первые шаги в верстке

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

Переломным моментом стала HTML Academy. Их тренажеры по верстке оказались идеальными для меня: я купил подписку и за три месяца глубоко изучил HTML и CSS. Однако я долго не решался перейти к реальным проектам — не мог себя заставить, было страшно.

Я поставил себе дедлайн: за неделю посмотреть четыре видео с версткой макетов, а затем начать самому. И я сделал это. Наконец-то сел верстать. Оказалось, все было намного проще, чем я думал. 100% нужно было сделать это раньше.

🖥 JavaScript: борьба и прорыв

С JavaScript было сложнее. Даже после курсов на Stepik, HTML Academy и чтения Learn JS я не понимал логику языка. Алгоритмы, DOM-взаимодействия, циклы — все давалось с трудом.

Особенно запомнился один вечер. Я снова пытался написать код для модального окна - всего 4 строчки, блин! Я же делал это уже раз пять по видео, но стоило попробовать самому - и ничего. Пустота.

Тогда я закрыл ноутбук и просто лег. В голове крутилось: "Ну как так? Я же уже столько времени потратил...". Вспомнил про "Красную таблетку", и подумал: "Ладно, я пока просто не дорос. Даю себе неделю. Я обязательно пойму это."

Это не враньё — ровно через неделю произошёл то, что я называю "щелчком". Вы бы только знали, что я чувствовал в тот момент! Это был настоящий дофаминовый взрыв — будто в голове включили свет.

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

Мои первые проекты (Делал сам):
Курс акций | Киноафиша | Погода | ToDo

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

👩‍💻 Освоение React

Изучение React далось мне легче, чем JavaScript. Я прошел полный курс "React-Самурай" от Димыча — все 100 уроков — и сразу после этого сделал свое первое приложение полностью самостоятельно: сам нашел API, выбрал макет, реализовал функционал без подсказок.

Дальше я углубился в изучение экосистемы: Redux, React Router и TypeScript. На это ушел еще 1 месяц.

Всего на изучение фронтенда я потратил 7–8 месяцев. Единственное, что я не изучил для работы - Git, это сыграло со мной злую шутку, но об этом в следующем посте. Советую всем сразу загружать проекты в GitHub, а не как я - только для портфолио после выхода на рынок.

📹 МОЕ ПЕРВОЕ ВИДЕО, В КОТОРОМ Я РАССКАЗЫВАЮ ПРО СВОЙ ПУТЬ

📌 На видео презентую другу свой сайт. А на скриншоте прошу друга-разраба провести код ревью