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

Как НЕ надо делать модальные окна на примере Яндекс Маркета и как упростить задачу с помощью Headless UI.
Так же немного разберёмся с доступностью (accessibility) и voice over.
🔗 Курс по доступности, Framer Motion, Next и React: purpleschool.ru/course/nextjs
⚡ Мои курсы
Мой telegram канал: t.me/purple_code_channel
Все мои курсы: purpleschool.ru
Разделы видео:
0:00 - Введение
0:11 - О модальных окнах (popup)
0:40 - Пример окно Яндекс Маркета
3:36 - Работа Voiceover
6:02 - Headless ui и его компоненты (components)
7:58 - Делаем модальное окно
13:45 - Стилизация окна
17:24 - Правильная доступность сайта
18:47 - Итоги
19:12 - Заключение

[@PurpleSchool]

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

[@Max.Kozlov]

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

[@PurpleSchool]

Спасибо!)

[@KirillKolchanov]

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

[@PurpleSchool]

Супер 👍

[@andrewsam224]

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

[@PurpleSchool]

Спасибо)

[@webstroymaster]

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

[@PurpleSchool]

Пожалуйста)

[@uzver3787]

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

[@PurpleSchool]

👍

[@code-xt]

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

[@PurpleSchool]

Пожалуйста!

[@user-hd1kz1mr5q]

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

[@PurpleSchool]

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

[@pink-doublethink]

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

[@PurpleSchool]

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

[@dlazder3937]

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

[@just__did__it]

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

[@PurpleSchool]

😁😁😁

[@user-eq5rm5nh4h]

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

[@mars_family]

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

[@PurpleSchool]

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

[@victormog]

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

[@PurpleSchool]

😄

[@lionstar3189]

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

[@DreamingDolphing]

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

[@PurpleSchool]

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

[@user-kn7ky1ih2h]

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

[@PurpleSchool]

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

[@victormog]

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

[@yankov2206]

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

[@victormog]

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

[@PurpleSchool]

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

[@KuruApni]

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

[@PurpleSchool]

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

[@AleksandrMaltsev-jm8ph]

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

[@PurpleSchool]

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

[@AleksandrMaltsev-jm8ph]

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

[@nikch2004]

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

[@PurpleSchool]

Это Vite: vitejs.dev

[@nikch2004]

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

[@Evgeny..]

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

[@AndreiTolstoi]

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

[@PurpleSchool]

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

[@gigakvachakhia4777]

please make some advanced nodejs content if you can.

[@PurpleSchool]

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

[@romanmed9035]

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

[@PurpleSchool]

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

[@romanmed9035]

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

[@Son0fBeelzebub]

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

[@mars_family]

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

[@Son0fBeelzebub]

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

[@user-ds5qj6cy6h]

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

[@helios8567]

npm uninstall

[@PurpleSchool]

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

[@user-ds5qj6cy6h]

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

[@now12392]

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

[@PurpleSchool]

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

[@user-zi4gy8nk6d]

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

[@PurpleSchool]

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

[@Evgeny..]

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

[@user-rv4kz3yw5t]

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

[@PurpleSchool]

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