Модальное окно (popup) на React с Headless UI

Поделиться
HTML-код
  • Опубликовано: 27 ноя 2024

Комментарии • 66

  • @PurpleSchool
    @PurpleSchool  Год назад

    🔗 Курс по доступности, Framer Motion, Next и React: purpleschool.ru/course/nextjs

  • @Max.Kozlov
    @Max.Kozlov Год назад +3

    Снова бесподобное видео!

  • @uzver3787
    @uzver3787 6 месяцев назад

    Круто) Пару вещей затянул себе, даже не задумывался о них.

  • @andrewsam224
    @andrewsam224 Год назад +2

    Спасибо, очень помогло. Побольше подробностей, мне как джуну зашло

  • @KirillKolchanov
    @KirillKolchanov Год назад +6

    О класс, не знал про хедлес. Нраица)

  • @code-xt
    @code-xt Год назад +1

    Спаасибо, очень доступно и понятно

  • @АлешаАлексей-г8ь
    @АлешаАлексей-г8ь Год назад +2

    Классно! Спасибо. Кст сть похожая история от mui - mui/base/ModalUnstyled. Из коробки есть все те же плюшки с доступностью и не только)

    • @PurpleSchool
      @PurpleSchool  Год назад

      Супер, спасибо за дополнение

  • @webstroymaster
    @webstroymaster Год назад

    Спасибо! Все как всегда интересно и информативно

  • @lionstar3189
    @lionstar3189 Год назад

    спасибо, посмотрел что делает сам Headless UI для доступности. Взял его для основы. Сами компоненты от Headless UI юзать не буду. Не люблю засорять проект.

  • @just__did__it
    @just__did__it Год назад +1

    Яндекс: вкладывает миллиарды долларов в доступность.
    Человек без мышки, который хочет купить мышку на Яндекс Маркете: 🗿

  • @dlazder3937
    @dlazder3937 10 месяцев назад

    Очень круто, но что то не работает с компонентом Transition. Я бы хотел добавить минимальную анимацию. А то ролик на 20 минут, из него написание кода это минут 10, и даже простейшей анимации нету. Надо было это осветить.

  • @pink-doublethink
    @pink-doublethink Год назад

    *Спасибо, что знакомишь ютуб с проблемой доступности.* Об Headless UI слышал, но все откладывал знакомство по миллиону причин. Сейчас как раз новый пет проектик начинаю, там и попробую.

    • @PurpleSchool
      @PurpleSchool  Год назад

      Пожалуйста! Попробуй, я сейчас его использую почти везде

  • @KuruApni
    @KuruApni Год назад

    >Мы нажмем Esc и окно закроется.
    Ох, как же много сейчас анатилитков\юзабилистов\дизайнеров с моих предыдущих проектов (b2b СНГ) с тобой сейчас не согласится.
    Антон, нет ли желания осветить тему взаимодействие условных разработчиков с условными смежными отделами? Ведь программирование сейчас - уже не столько про программирование, сколько про софт скилы, тайм менеджмент и вот это вот всё. А то у многих начинающих коллег, кто только вкатывается в профессию попросту ломается мир от увиденного.

    • @PurpleSchool
      @PurpleSchool  Год назад +1

      Да, уже думал сделать такой выпуск с гостем

  • @ДенисКуликов-м3о

    Вутренний код на побитовых операторах и прочем. Хотел что-то оттуда стащить на скорую руку во vue. Передумал

  • @mars_family
    @mars_family Год назад

    А если юсстейт хранится в компоненте на уровень выше, управление им просто спускать через пропсы?

    • @PurpleSchool
      @PurpleSchool  Год назад

      Да, верно. Или через глобальный state manager

  • @romanmed9035
    @romanmed9035 Год назад

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

    • @PurpleSchool
      @PurpleSchool  Год назад

      Тут проблема, что придется очень сильно заморочиться даже с простыми компонентами, чтобы сделать хорошо и доступно

    • @romanmed9035
      @romanmed9035 Год назад

      @@PurpleSchool а когда в сторонней библиотеке работает не так или ее надо обновить это придется сделать еще больше. уже сталкивался с кривостью того же антд. за неделю так и не убедил исправить, хотя и нашел причину. за следующие 2 дня сделал то что меня устраивало даже больше. итого- неделя потрачена зря. хотя не зря. зато наука не использовать монстров. а обновление с 1 на 2ю или на 3ю версию муи чего стоит. как специально издеваются.

  • @DreamingDolphing
    @DreamingDolphing Год назад

    У Яндекса своя же библиотека UI, очень сложная, как они говорили. Они её в открытый доступ выложили, но с тех пор год не обновляли.

    • @PurpleSchool
      @PurpleSchool  Год назад

      У них причём часть попапов бывает нормальные, а часть нет.

  • @victormog
    @victormog Год назад +1

    Ну, почему такой акцент на Tab понятно - это последствия использования Vim
    😉

  • @darthl1ne
    @darthl1ne Год назад +1

    Добрый день. Спасибо за прекрасный контент. Есть немного глупый вопрос. Для новичка во фронте порекомендовали бы React или Vue ? С JS все ок, есть опыт С#, поэтому с TypeScript тоже проблем не вижу. Перехожу на фронт с Unity

    • @PurpleSchool
      @PurpleSchool  Год назад

      Я бы рекомендовал React, вакансий больше. Вот мой курс: purpleschool.ru/course/nextjs

    • @victormog
      @victormog Год назад +2

      Если "с JS все ok", то без разницы, какой фреймворк...

    • @yankov2206
      @yankov2206 Год назад

      @@PurpleSchool вот ты доколебался до навигации. У кого такие требования к разработке? Я конечно даже на работу еще не устроился, но как по мне с навигацией перебор.. А как насчет ручной реализации попапов без чужих либок?

    • @victormog
      @victormog Год назад +1

      @@yankov2206 Слабый пример. Как на счет без webpack'а...

    • @PurpleSchool
      @PurpleSchool  Год назад +1

      @@yankov2206, это стандартные требования к нормальному доступному Popup окну. Новичок может отцентровать div, положить поверх контента и сказать что попап готов. Именно это отличает качественную разработку от слабой.

  • @nikch2004
    @nikch2004 Год назад

    А что используете для такого быстрого создания проекта?Там где выбирали фреймворк и язык

    • @PurpleSchool
      @PurpleSchool  Год назад

      Это Vite: vitejs.dev

    • @nikch2004
      @nikch2004 Год назад

      @@PurpleSchool Спасибо.Это что-то на подобие create -react-app, если я правильно понял ?

    • @Evgeny..
      @Evgeny.. Год назад

      @@nikch2004 это аналог webpack

  • @AleksandrMaltsev-jm8ph
    @AleksandrMaltsev-jm8ph Год назад

    Недавно React выкатил обновление. И теперь на основном сайте написанно что CRA это плохо. Подскажите как теперь "хорошо" использовать реакт с не js бэкендами?

    • @PurpleSchool
      @PurpleSchool  Год назад

      Я сейчас на всех проектах использую Next где нужен SSR, а где не нужно: Vite

    • @AleksandrMaltsev-jm8ph
      @AleksandrMaltsev-jm8ph Год назад

      @@PurpleSchool Тоесть , если я использую React вместе Python, то нужно использвоать Vite ?

  • @now12392
    @now12392 Год назад

    Будет ли курс по vue?

    • @PurpleSchool
      @PurpleSchool  Год назад

      В дальнейшем возможно

  • @AndreiTolstoi
    @AndreiTolstoi Год назад

    Headless UI работает ли с styled components?

    • @PurpleSchool
      @PurpleSchool  Год назад +1

      Конечно, стили можно использовать любые.

  • @РежиссёрВова
    @РежиссёрВова Год назад

    Антон, спасибо! Вопрос. Если перестал использовать библиотеку, например antd которую ты упомянул, то для того чтобы её удалить из проекта, достаточно удалить упоминание о ней в package.json ? Или что ещё нужно сделать чтобы она не была больше в проекте?

    • @helios8567
      @helios8567 Год назад

      npm uninstall

    • @PurpleSchool
      @PurpleSchool  Год назад

      Если в коде она не используется, то да, удалить через npm uni

    • @РежиссёрВова
      @РежиссёрВова Год назад

      ​@@PurpleSchool ​ @Helios Спасибо добрые программисты! От души!!!

  • @gigakvachakhia4777
    @gigakvachakhia4777 Год назад

    please make some advanced nodejs content if you can.

    • @PurpleSchool
      @PurpleSchool  Год назад +1

      Sure) Also you can view my node.js course for advance info: purpleschool.ru/course/nodejs

  • @СамирАбасов
    @СамирАбасов Год назад +2

    Спасибо за видео. Мне кажется при использовании Headless ui возникнет проблема недостаточности компонентов в библиотеке. Из-за этого придётся подключать mui или ant. А изучать механику библиотек достаточно трудоёмкий процесс. Ну и также mui и ant в своих последних версиях пошли по пути максимально свободной стилизации компонентов, т.е. практически всё можно подстраивать под себя.

    • @PurpleSchool
      @PurpleSchool  Год назад

      Остальные компоненты достаточно простые, типа input, которые можно просто самим реализовать. antd крутые, но библиотека иногда overhead

    • @Evgeny..
      @Evgeny.. Год назад

      Mui и ant в 10 раз больше весят чем headless

  • @Владимир-д9и7о
    @Владимир-д9и7о Год назад

    Говно случится, когда модал в модале начнется

    • @PurpleSchool
      @PurpleSchool  Год назад

      Нет, данное поведение обработано в HeadlessUI

  • @Son0fBeelzebub
    @Son0fBeelzebub Год назад

    Хочу просто подсказать, возможно, даже для новичков это будет завораживающе в рамках вима и редакторов:
    9:00 - для того, чтобы очистить целый тег и все вложенность, не обязательно заходить в вижуал-лайн и выделять линии, достаточно просто на родителе нажать dit для внутреннего опустошения и dat, для удаления вместе с родителем.
    3 клика и профит. Ну и, пример хороший, хотя, я, конечно, останусь на чакре/тейлвинд.
    Ну и сокращать top,left,right,bottom можно инлайном inset

    • @mars_family
      @mars_family Год назад

      Ты хотел для новичков, но в итоге я мало что понял из того что бы написал)))

    • @Son0fBeelzebub
      @Son0fBeelzebub Год назад

      @@mars_family если навестись курсором на тег с вложенностями и нажать dit - delete inner tag, то удалятся абсолютно все внутренности. dat удалит вместе с тегом. а inset - инлайновое сокращение top/left/right/bottom :)