Создаем UI-KIT с нуля на Storybook. Экспресс-гайд: от теории до публикации и использования

แชร์
ฝัง
  • เผยแพร่เมื่อ 27 ธ.ค. 2024

ความคิดเห็น • 35

  • @АлексейПоляков-у7з
    @АлексейПоляков-у7з วันที่ผ่านมา

    Очень качественно, коммент для поддержки

  • @Dmitrijserg
    @Dmitrijserg 2 หลายเดือนก่อน +2

    Редкий контент, спасибо.

  • @DtTarrY
    @DtTarrY 5 หลายเดือนก่อน +2

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

    • @alsigeev
      @alsigeev  5 หลายเดือนก่อน

      @@DtTarrY Всё лампово, по-простому) но кажется что подача очень быстрая

    • @slkzak
      @slkzak 4 หลายเดือนก่อน +2

      @@alsigeev Лично мне не нравится медленная подача и жевание мысли. У тебя все по существу и быстрая подача экономит время, когда хочешь в общих чертах ознакомиться. А когда переходишь к практике, там уже и постопать видео можно.

  • @sh0ny
    @sh0ny หลายเดือนก่อน

    Отличный видос! Однозначно лайк автору, жаль , что такой контент не так активно двигается, видно много стараний! Хотел спросить , у тебя подсказки на русском в терминале, как этого добиться?)

    • @alsigeev
      @alsigeev  หลายเดือนก่อน

      Спасибо за добрые слова! По поводу языка в термине: у меня os x и iterm2 в качестве терминала. Видимо он подтягивает язык системы по-умолчанию и ставит его. А вообще можно из корня своей системы открыть файл своей оболочки (это bash / zsh / sh), если система unix-подобная, и закинуть туда пару переменных типа: export LC_ALL=en_US.UTF-8
      export LC_CTYPE=en_US.UTF-8, указав нужный язык

  • @nazarchik1805
    @nazarchik1805 4 หลายเดือนก่อน

    Контент очень качественный!

  • @RubenKarapetyan-dz8cr
    @RubenKarapetyan-dz8cr 2 หลายเดือนก่อน

    Всё классно, но у меня css не грузит. В конце билда я получаю js файлы, ts файл и собственно style.css где есть все стили и классы как положено (я использую scss с модульями.). Но когда я скачиваю это в другой проект никакие стили не работают. Я попробовал импортировать тот css в файле App.tsx в новом проекте и все работает. Помогите исправить проблему пожалуйста.

    • @alsigeev
      @alsigeev  2 หลายเดือนก่อน

      Уточните, пожалуйста, что значит "скачиваю в другой проект". Устанавливаете свою версию ui-kit в качестве npm-зависимости?

    • @alsigeev
      @alsigeev  2 หลายเดือนก่อน

      @@RubenKarapetyan-dz8cr если вы говорите о том, что вам приходится дополнительно подключать стили из css файла, когда вы устанавливаете в проект свой ui-kit, то это нормальная история, потому что в случае scss они собираются отдельно, а в случае styled вшиваются в js. Поэтому да, нужно будет подключать, но все лишь один раз в корень проекта. Можно, конечно, билдить так, чтобы css в несколько файлов раскидывать и подключать точечно, но думаю что это избыточная история, только если очень ни хочется сэкономить на импорте лишних стилей

    • @RubenKarapetyan-dz8cr
      @RubenKarapetyan-dz8cr 2 หลายเดือนก่อน

      ​@@alsigeev Да речь идёт о тем, чтобы подключить мой кит как npm зависимость. Ну если это так и должно было работать то странно... ведь я же не подключаю css файлы с тот же mui или chakre ui. Спасибо за ответ!

    • @alsigeev
      @alsigeev  2 หลายเดือนก่อน

      Если установите mui и посмотрите на него в node modules, то не найдете там css файлов. Наверняка они используют фреймворки типа styled, или emotion, учитывая что при установке библиотеки также нужно устанавливать и emotion.
      Основная идея простая: мы не можем подключить css-файл в ванильный js, который получаем после билда.
      Помню даже что раньше библиотека antd тоже собиралась либо на less, либо на sass, поэтому приходилось файлы темы подключать отдельно.
      Так что да, при выборе такого инструмента как sass других вариантов нет. У ui-kit-а же нет выходного html-файла, в который можно засунуть стили, чтобы потом использовать, как в react-приложении.

    • @RubenKarapetyan-dz8cr
      @RubenKarapetyan-dz8cr 2 หลายเดือนก่อน

      ​@@alsigeevЯ понял вас на все 100%. Спасибо огромное за ответ!

  • @Dmitrijserg
    @Dmitrijserg 2 หลายเดือนก่อน

    Подскажи, в чём преимущество styled components? Мне кажется scss и tailwind проще и удобнее, нет?

    • @alsigeev
      @alsigeev  2 หลายเดือนก่อน

      Основное преимущество в том, что не нужно заморачиваться с неймингом классов. Также можно использовать пропсы компонента, чтобы делать вариативные стили. Например, можно задать разные цвета рамки в зависимости от значения пропса.
      Также неочевидным преимуществом является то, что styled часто используют многие команды в компаниях (по крайней мере пока). По возможности нужно работать на том, что использует комьюнити для согласованности технологического стека. Если вы работаете в компании и там любят другой стек, то есть смысл придерживаться его.

  • @alsigeev
    @alsigeev  5 หลายเดือนก่อน +1

    Друзья, дайте обратную связь по видео, пожалуйста. Что вам понравилось, или не понравилось?

    • @ИванКараков
      @ИванКараков หลายเดือนก่อน

      Все классно, спасибо за видео. осадочек оставляют моменты, когда вы "исправляете позже" пример 17:55. хотя тут понимаю что такого объема видео тяжело перезаписывать несколько раз после каждого такого упущения, но можно четко по сценарию идти, чтоб точно не упустить ИЛИ откатываться на момент, когда это исправление можно сразу сделать и перезаписывать с этого момента. Думаю так качество подачи сильно вырастет. Спасибо

    • @alsigeev
      @alsigeev  หลายเดือนก่อน +1

      @ спасибо! Наберусь опыта в монтаже и будет лучше

  • @MedvedevClo
    @MedvedevClo 2 หลายเดือนก่อน +3

    за материал спасибо, но честно - очень сумбурно. Работаю джуном, честно - некоторые моменты прям непонятными из-за спешки были

    • @alsigeev
      @alsigeev  2 หลายเดือนก่อน

      @@MedvedevClo спасибо за фидбек! А что конкретно было непонятно? Постараюсь сделать подачу лучше в следующих роликах.

    • @MedvedevClo
      @MedvedevClo 2 หลายเดือนก่อน

      @@alsigeev Просто больше внимания можно было уделить именно написанию кода, мейби про стайл компонент рассказать, а не просто код вставлять - тогда бы вообще цены не было. И в целом наверное делать написание кода не на 1.5 - 2х, чтобы было времени чуть больше обдумать

    • @alsigeev
      @alsigeev  2 หลายเดือนก่อน

      @@MedvedevClo Какой контент хочешь посмотреть?

    • @MedvedevClo
      @MedvedevClo 2 หลายเดือนก่อน +1

      Тут твой канал - твой выбор же) Но мне бы зашло полноценное написание какого - нибудь приложения на уровень джун - мидл (с тестами прям и прочим весь процесс показать без перемоток). Просто гайдов по всяким туду листам куча, а вот проектов на уровень джун+ условно уже не так много). Это 100% спрос имеет - канал archakov blog нечто подобное снимает, но совсем редко - но просмотры на таких видео реально большие

    • @alsigeev
      @alsigeev  2 หลายเดือนก่อน

      @@MedvedevClo Собираю обратную связь, чтобы лучше понимать какие ребята приходят смотреть контент: совсем начинающие, или уже джуны с работой, мидлы и т.д. Спасибо тебе! До проекта посложнее тоже доберемся.

  • @isaacjon
    @isaacjon 4 หลายเดือนก่อน +1

    Очень полезно. Немного быстро всё.
    Сергей ты сеньер разработчик?

    • @alsigeev
      @alsigeev  4 หลายเดือนก่อน

      Насчёт Сергея не знаю, но я - да)

  • @Anndersonn97
    @Anndersonn97 3 หลายเดือนก่อน

    Привет! Спасибо за видео! подскажи пожалуйста, ты експортировал как-то цвета из фигмы в код ?
    если да, то как? какой-то плагин?

    • @alsigeev
      @alsigeev  3 หลายเดือนก่อน

      Привет! Все переменные собирал руками. Не самое веселое занятие, конечно) Может стоит и плагин поискать, или написать)

  • @Dmitrijserg
    @Dmitrijserg 2 หลายเดือนก่อน

    Фигма по ссылке не открывается

    • @alsigeev
      @alsigeev  2 หลายเดือนก่อน

      По ссылке открывается профиль автора в figma community. Там есть кнопка open in figma. Если нажать, то у вас будет своя локальная копия дизайна

  • @unicoxr5tj417
    @unicoxr5tj417 4 หลายเดือนก่อน

    что-то на сеньорском?)

    • @alsigeev
      @alsigeev  4 หลายเดือนก่อน +1

      Да вообще нет) Тут нужны знания уверенного джуна: база по react и typescript, но не более. Очень полезная история, если идешь работать в большую компанию. Заодно можно научиться публиковать в npm)

    • @unicoxr5tj417
      @unicoxr5tj417 4 หลายเดือนก่อน +1

      @@alsigeev fake APi и json сервер ждем тогда от тебя. Глубоко, больно, все как мы любим, эту тему штурмануть. Года 3 назад популярно было. Сейчас от дел я уже отошел)

    • @puffinavtz3966
      @puffinavtz3966 4 หลายเดือนก่อน

      Отличное видео