🥨 Попап вместо селекта: ✨новые HTML-элементы✨ наконец-то решат старую проблему

[@pepelsbey]

00:00 Интро 00:22 В чём проблема? 01:50 Описание задачи 02:34 Недостатки селекта 04:36 Что нам нужно 05:22 Open UI 07:20 Попап вместо селекта 09:46 Стилизация попапа 11:45 Доступность и фокус 13:52 Кроссбраузерность 15:41 Выводы 16:59 Аутро

[@ИловМакс]

Всего лишь 30 лет понадобилось для стилизации селекта) Правильно дорогой идем, товарищи

[@andreyzhukov2821]

После тридцати, жизнь только начинается)

[@returnobject]

просто 30 лет мы прокладывали эту дорогу!

[@alex-front-end]

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

[@Mr.Bellamy]

А ты оптимист, еще ничего не внедрено, еще год прошел...

[@heynicetomeetyou]

Эх так бы в школе учли. Классно начал с готового примера, описал проблемы, потом перешёл на новый вариант и рассказал про его особенности. На самом деле не маленький объем информации, а уложен всего в 15 минут.

[@ДмитрийМедыченко]

Прям так радостно стало)) А как глаз радуется) Скорее бы уже... Спасибо, Вадим🙏😁

[@Mitorun]

Музыка и вставки-перебивки кайфовые. Надеюсь будет время и желание почаще снимать такие интересные и полезные ролики.

[@Anodoree]

В разработке я не так давно, но уже много раз сильно грустил по кастомизации селекта... Сколько лет было всем фиолетово на эту базовую жуть с лохматых времён! Точнее на то, что это уже давно не вяжется с современными интерфейсами, и сколько "велосипедов" заново созданы и функционируют в сети. Наконец-то есть прекрасные движения в этом направлении! Ждём скорейшей реализации!)

[@Александртень-ф4т]

Я не так давно .... Сколько лет

[@oleg_andrianov]

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

[@pepelsbey]

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

[@levsonc]

Гриды по большей части упирались в IE. Сейчас, когда IE уже практически вышел из уравнения (

[@sergeyveselov9754]

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

[@amirfarkhadov5926]

Вадим, большое спасибо! Пожалуйста продолжай, очень ждем новое видео!

[@РоманМарухленко-л6ь]

Вадим вы так доступно по полочкам даёте информацию. Огромное вам спасибо. Очень нравится ваша подача. Буду ждать новых обучающих видео

[@helios161]

Фантастика, осталось пару лет подождать. А пока - ng-select :)

[@dimaburichin7726]

Вот действительно наконец за это взялись у самого куча велосипедов на тему селекта! Спасибо за видео!

[@Mitorun]

А что с локтем случилось? Авария на велосипеде или снова за доступность подрался?

[@proletarian]

Из-за кастомных чекбоксов наверное

[@pepelsbey]

Велосипедные дела

[@gian_tiaga]

Надеюсь мультиселект тоже подвезут. Так, кайф конечно.

[@ansaganie]

Вадим! поздравляю тебя с новым местом!!!!

[@АллаПанова-н3в]

О, это прекрасно! Да свершится чудо 🙌

[@MrQuicombo]

Когда это появится во всех браузерах - я напьюсь )) Спасибо за видео!

[@pavelarseyev452]

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

[@pepelsbey]

Полностью согласен, буду экспериментировать дальше. Это первая попытка на новом месте :)

[@Disorrder]

Круто! Спассибо, что рассказал. Неужели первые подвижки в этом направлении, давно пора. Чо я могу сказать, ребята "проанализировали" то, что и так уже было сделано везде одинаково, добавили слоты как во vue или react. Ничего инновационного, конечно, тут нет. Паттерны уже устоявшиеся и рабочие. Насчёт обратной совместимости, разве не для этого существует бесполезный доктайп? Если нужен старый селект, пишите старый доктайп. Если нужен новый, то новый. Зачем изобретать какие-то новые теги? Пока не понимаю, с какими трудностями столкнулись, мне кажется, достаточно было добавить слоты. А если бы старый селект ломался, то оставить старую реализацию только для старого доктайпа или ещё как-нибудь это дело версионировать.

[@pepelsbey]

Слоты во Vue появились по мотивам веб-компонентов и Shadow DOM, тоже части платформы. Так что да, ничего нового, но не во фреймворках это придумали.

[@pepelsbey]

Черту новый/старый доктайп уже провели однажды, лет 15 назад и больше этот способ не сработает. За чертой оставили старое, несовместимое поведение браузеров, а не какие-то другие теги. Если вы посмотрите на задачу шире, чем как на просто стилизацию селекта, то станет понятно зачем новые теги: это конструктор для любых элементов интерфейса, а не просто селект, который можно стилизовать. Я рассказал об этом мало просто потому, что об этом известно мало. Но уже видно направление и над ним несколько лет плотно работают самые умные люди в отрасли. Давайте им доверимся.

[@viT-1]

Зачем обёртка для button и где selected значение? Form submit без js сработает?

[@Alex911sc2]

Вау, это просто невероятно! Интересно, как это будет себя вести в мобильных браузерах, всё-таки нативные селекты довольно удобны на телефонах.

[@pepelsbey]

Помните, как попап выглядит без стилей? Думаю браузеры смогут приделать к этим примитивам и их сочетаниям новые стили, в зависимости от платформы. Вплоть до того, чтобы вообще их прятать и показывать системные контролы вместо клавиатуры, как сейчас происходит на iOS с селектами.

[@nBulankin]

Давайте мы все сегодня немного порадуемся - Рад за селект и за ваш переезд в Берлин!

[@СергейПластунов]

Я тут внизу оставляю очередной респект за новое, интересное и понятное :)

[@Ireile]

Выглядит многообещающе! Спасибо за контент! Как и всегда круто! 👍🏻

[@PostoiParovoz]

Когда начал говорить про UI сообщество. как они анализируют - сразу перед глазами всплыла картинка из Идиократии, где вставляли фигурки в отверстия.

[@andyvi3116]

блин, ну это супер. Ждем, ждем, ждем вот такого нативного компонента селекта + попапа. Вадим как всегда впереди планеты всей в обзоре будущих супер новинок веба, за что тебе огромное спасибо. И новое оформление вставочек в видео супер! )))

[@Chetanoo]

Мои поздравления с переездом.

[@rodemka]

30 лет уже тегу select. В прошлый раз datalist ввели. Теперь вот popup. Итог будет как всего: +1 тэг - рост энтропии. Вообще поведение form controls оно не совсем с легаси связано, изначально большую часть контроллов браузер пробрасывал в ОС, чтобы уже ОС решала что должно быть на месте button/input etc. И да изначально это было фичей - отсутствие влияния стилей на стандартные контролы системы дабы не сбивать пользователя с толку. Например в пресловутом IE select был всегда отдельным объектом Windows (который ОС, а не браузерный), и можно было получить его хэндл из внешней программы и посылать извне ему сообщения. Это если меня память не подводит.

[@pepelsbey]

Если немного разобраться, то это не просто один тег, а целая система примитивов, которые можно комбинировать и настраивать. Это новая эпоха контролов, причём не только для форм. Возможно, вы пока не почувствовали масштабов движения, но оно начинается.

[@QwDragon]

Не всегда, а только в совсем старых.

[@rodemka]

​@@pepelsbey Это мы будем посмотреть. В прошлый раз аналогично shadow dom делали, тот же контрол audio как раз через него устроен. Конечно всегда хочется революцию в форм элементах. До мейнстрима ещё минимум года два, имхо.

[@asgard1428]

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

[@profidev_js]

Спасибо мужик. Нужная тема, и хорошая подача

[@mouratibraguimov7964]

Через js пункты списка доступны? Например, я хочу выделить часть карты, которая будет выбрана в случае клика (но еще не выбрана), выделить ее пунктирным контуром, например. Или изменить selected option нажав на карту..

[@pepelsbey]

Конечно доступны, как и любой другой элемент в DOM

[@mrakcw]

Вадим красавчик) 👑 Первый выпуск в новом 2022 году просто топчик)📌👍 Подкаст Веб-стандартов не в счет))) ⚡ Что с правым локтем?

[@pepelsbey]

Завалился на велосипеде :)

[@romanstein13]

Вадим, огромное спасибо за материал! Как всегда одно удовольствие слушать 🙂

[@snap9501]

Поздравляю с переездом)

[@ilyachch]

Оч круто И, возможно, имеет смысл выделить все это в спецификацию HTML 6

[@sergei888kuz6]

У HTML уже давно нет версий

[@pepelsbey]

Спецификации HTML уже не имеют версий, это теперь HTML Living Standard, вечнозелёный html.spec.whatwg.org/multipage/

[@capstanfearless]

Вадим, привет! Подскажи, где почитать про rsync gulp? В конфигах по интернетам смотрел - ругается консоль при попытке залить файлы на сервер. Причем кракозябры какие-то, неочевидно очень.

[@pepelsbey]

«Ругаться» может по разным причинам, тут нужно разбираться с конкретным случаем. Для начала, я бы попытался подключиться к вашему серверу по ssh. Дальше можно попробовать что-то с помощью rsync. И если это сработало, значит уже разбираться с Gulp-плагином.

[@capstanfearless]

@@pepelsbey Вадим, тебе можно написать на почту по этому вопросу?

[@viT-1]

От элемента формы требуется выбранное значение, остальной интерактив переносят в логику WebComponent или компонент Vue/Angular/React со слотом в виде options, которые логикой парсятся.

[@Feesler]

Писал свой компонент для оборачивания select, с клавиатурой и фолбэком к нативной реализации на мобильных устройствах, так что очень близко и актуально! В Берлин тоже переехал бы или в Амстердам ))

[@olegscherbakov278]

Спасибо за видео, но не раскрыта тема вставки изображений в option ? он вообще возможен с новыми компонентами ?

[@pepelsbey]

Что угодно туда можно вставить, просто попробуйте :)

[@irinaiakovleva2250]

Сразу лайк за переезд в Берлин

[@CrazyCodingChannel]

Как всегда очень интересно, спасибо за видео)

[@AvocadoVHS]

Вчера пытался реализовать. Накостылял через list_menu > ul > li

[@betariel]

Вадим, подскажите пожалуйста, какая у вас тема vscode установлена?

[@pepelsbey]

GitHub Light marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme

[@ЯрославЗозуля-ю3щ]

Ухххх.... Агонь. Ещё лет 30 и остальные браузеры начнут поддерживать)))

[@TheFastmind]

Интересно, а можно ли данные из селекта вытащить, если закинуть в тег form? У меня когда-то был такой макет сайта, где список услуг выпадал селектом. И клиент выбирал селектами услуги и потом отправлял данные. Селект я стилизовал, через приложуху jquery, который прятал оригинальный селект, а новый который был сделан из div был виден пользователю. Вот только данные из такого селекта не отправлялись...)

[@pepelsbey]

Да, идея в том, чтобы новые теги сериализовали свои данные точно так же, как и другие поля форм. Без необходимости собирать их руками.

[@yuriilukianovych8660]

Интересно, спасибо за видео. Мне кажется, нужно ещё на эту кнопку добавить "svg стрелку вниз", чтобы пользователь понимал, что это выпадайка и можно выбрать другие опции. Но без неё красивее. Дилема...

[@yanshubin2424]

Ну свг уже можно самим вставлять

[@dennisdovziy2775]

А все так хорошо начиналось...)

[@avmru]

Как всегда - огонь! 👍

[@Lieveify]

Штука очень классная, жду. Но т.к. часто делаю для аудитории, которые ещё и IE пользуют (всякие организации с традициями), то ждать ещё норм так)

[@mikhailkhramtsov5147]

Вадим, добрый день, подскажите, пожалуйста, с помощью чего отрисовали такую карту? P.s. Berlin one love

[@pepelsbey]

Взял из Википедии, доработал в Фигме

[@vasyaklishch4184]

ну круто. правда было бы здорово чтобы это бы без вот этого дива со слотом, а так огонь !)

[@m_mariya_mari]

Лайк и подписка! ждем продолжения

[@TheProfessionalGambler]

Еще дейт пикеры гарячее место для стилизации :)

[@dr-urban]

А при расположении элемента в форме его значение будет автоматически передаваться на сервер подобно нативному селекту? И присутствуют ли возможности поиска в списке опций?

[@pepelsbey]

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

[@proletarian]

А бордер-радиус для аутлайна с каких пор начал применяться? Я что то упустил этот момент

[@pepelsbey]

Совсем недавно - сначала в Safari, потом остальные подтянулись

[@QwDragon]

@@pepelsbey я тоже перед новым годом внезапно обнаружил)))

[@levsonc]

@@pepelsbey Наоборот же. В Safari сейчас не применяется. Прикол с Outline в том, что он хоть и обводит элемент, но чисто по спецификации его форма не гарантирована. Так он может стать прямоугольным при изменении. Зато показывается поверх всех элементов и не обрезается как box-shadow.

[@art_code]

Имхо, можно сделать что-то на наподобие 'use strict', но для html. Так можно было бы оставить привычные всем теги и добавить стилизацию. Но конечно же ждем светлое будущее в котором все будет прекрасно

[@pepelsbey]

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

[@danielginzburg2924]

Привет из Берлина! 👋

[@maksikgregory4988]

Расскажите пожалуйста какой монитор у вас ? Пытаюсь что-то подобрать чтобы много читать или писать. Но от VA / 144 Hz глаза устают.

[@pepelsbey]

LG UltraFine 5K, мне 60 Гц хватает пока

[@ВладиславШаманов-и8о]

Да, пришлось сделать свой селект который не селект вовсе а в конечном счёте текстовый инпут. Если эта вещь появится в браузерах будет отлично! Ждём :-)

[@_Black_Mirror_]

хорошие новости) спасибо за новинку

[@progerlife6690]

Круто спасибо!Совершилось чудо!

[@maxdzyubak]

Вадим, благодарю за крутое видео!

[@DevilAlex03]

Хм, слоты в спецификации. Они там vue вдохновились или слоты были в веб-компонентах?

[@pepelsbey]

Предполагаю, что это как раз Vue взял слоты из веб-компонентов

[@DevilAlex03]

@@pepelsbey Спасибо, я этого не знал, будет повод окунуться в веб-компоненты поглубже! с:

[@eugeniola-manche1290]

Вадим, пожалуйста подскажи, какой у тебя шрифт в редакторе кода? Он очень красивый и удобный, хочу такой же попробовать!

[@pepelsbey]

JetBrains Mono www.jetbrains.com/lp/mono/

[@Kamila228]

Превасзодная подача)

[@bautrukevich]

Вадим, спасибо за обзор!

[@eugenenovikov671]

самая главная проблема с селектом на всех работах это был селект с чекбоксами. который приходилось либо писать самим, либо качать что-то типа ng-select с npm

[@yanshubin2424]

Вот тут по спорю, чекбоксы относительно не сложно написать и самому через лейбл, и не нужно думать о разных мелочах, как в выпадающих списках

[@АлександрПирожков-д1я]

It's revolution, Johnny!

[@eq656]

Очень крутые ролики, полезная информация, приятная подача, ты не зря стараешься) крутой чел

[@nicktravolta1457]

Спасибо большое за ваш труд!

[@АндрейГалушко-е9о]

Спасибо! полезно! что с локтём?

[@pepelsbey]

Примерно то же самое, что с коленом - завалился на велике, но уже всё норм )

[@skillbuks]

Возможно не стоит менять ракурс 0:22 ? и так интересно слушать

[@pepelsbey]

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

[@madhed85]

А что на счёт автоматического определения положения и выпадения вверх\вниз или за пределы браузера?

[@pepelsbey]

Есть такая фича у , браузеры смогут делать это за вас

[@jenyaspace]

Подскажите почему в скрипте написано [...mapAreas] а не просто mapAreas, ведь и так и так это просто массив нод

[@pepelsbey]

Результат querySelector - это не Array, а NodeList, не все методы массивов по нему могут итерировать developer.mozilla.org/en-US/docs/Web/API/NodeList

[@denysdzhelomanov2633]

Ну с селектом уже давно смирился, а вод "popup" очень жду)

[@azizoid]

добро пожаловать в Берлин )))

[@vissper1]

Вадим, лучше Трептов-Кёпеника района нет 🙂

[@b.g.5106]

наконец-то, пропажа нашлась) как добрался до Берлина ?)

[@ДенисМалышок]

Ахринеть ... переезжаю в Берлин 17-го. Неужели Accenture захантили вас?)

[@pepelsbey]

Не Accenture, а SinnerSchrader. И не захантили, а заинтересовали задачами.

[@ДенисМалышок]

@@pepelsbey Чтож, поздравляю с переездом! Буду рад придти на ваши мероприятия, если таковые будут, в Берлине)

[@CunyJIbK]

Не знаете что там с модалками? Помню была какая-то история с dialog, но не помню и давно не следил

[@pepelsbey]

Думаю, будут развивать элемент dialog

[@viT-1]

Пишется компонент select-menu на любимом фреймворке или веб-компонентах, api оставляем прежним от select, где надо реализуем слоты (optgroup и options), развешиваем директивы или тэг меняем. Настраиваем как нравится, можно инициализирующий скрипт по прежним select запустить. Так бы решал инженер, а не просто верстальщик.

[@pepelsbey]

Весь npm забит решениями от инженеров - одно хуже другого. Недоступные, неудобные, с кучей зависимостей, залоченные код конкретную библиотеку, не имеющие всех нужных возможностей. Может хватит уже велосипедов? Места на парковке уже нет )

[@viT-1]

@@pepelsbey Сомневаюсь, что новые реализации от Open UI полностью дадут прежний функционал

[@viT-1]

@@pepelsbey вопрос же не в руках горе-инженеров, а как принципиально должна решаться проблема поддержки от самих производителей браузеров. API сохраняют, добавив атрибут.

[@ДмитрийКузнецов-ц7м]

Есть надежда забыть про плагины для селекта))Т. н. велосипеды всегда намного больше нравились, чем стилизация того же select2)

[@МаксимОгуров]

Лучший!)

[@АндрейСива-т2у]

Годный контент

[@hondovod250285]

привет! Недавно наткнулся на твой перевод статьи Филипа Уолтона - "Архитектура CSS". Так вот, статья 14 года и некоторые подходы немного изменились, но меня интересует тема шаблонных селекторов sass. В статье было упоминание про них, и вот такая рекомендация - "Не используйте миксины без аргументов, в этом случае заменяйте их на шаблоны". А вот что сейчас правильно делать? Это правило остается в силе? И ведь действительно после компиляции шаблонов в css меньше кода, там идет перечисление через запятую, то есть .class1, .class2, .class2 {display: flex;} . А в случае с миксинами без аргументов после компиляции будет вот такой код: .class1 {display: flex;} .class2 {display: flex;} .class3 {display: flex;}, то есть здесь повторяются стили, а в шаблонах они сразу пишутся для всех кто использует. Я думал что шаблоны повышают специфичность селекторов, но нет, на специфичность здесь вообще не влияет и можно переопределить в любой момент. Мне очень интересно что ты по этому поводу думаешь? Или может быть что в работе лучше применять на данный момент?

[@pepelsbey]

Главная ошибка, которую делают многие - это считать размер файлов до сжатия, которое всегда происходит при передаче по сети. Если взять ваши примеры и взвесить, то второй после сжатия только на 2 байта больше первого. Притом, что это не очень показательно - gzip и прочие начинают лучше работать на больших файлах. Пишите читайемый, удобный для поддержки код. Пусть оптимизацией займутся алгоритмы и инструменты.

[@hondovod250285]

@@pepelsbey , большое спасибо за уделенное время!

[@SashaKuzikov]

*Увлекательно!*

[@svetlanapokrovskaya7798]

Хорошая новость, эх, быстрее бы все это заработало. Два года как-то многовато... Поздравляю с переездом! Аккуратнее на велике)

[@iGotton]

Огонь!

[@Александр-р7з9с]

Как я рад

[@redgreengrey]

как всегда очень интересно, спасибо

[@megustabmwf]

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

[@alexnoodles8290]

Наконец то Человечество создало инструмент кроссбраузерного селекта который можно стилизовать ,,, это Вам не на луну слетать

[@dofesto]

Извините, что не по теме. А что за нога для микрофона?

[@pepelsbey]

Elgato Wave LP www.elgato.com/en/wave-mic-arm-lp

[@ukra777]

Здравствуйте. Хочу стать фронтендером. Что можете сказать про книгу "Изучаем HTML CSS" Эрика Фримена. Насколько она актуальна в 22 году?

[@pepelsbey]

Эта книга очень устарела, будьте осторожнее с ней. Шесть лет (или даже больше) это очень большой срок во фронтенде. Лучше брать книги изданные хотя бы год-два назад. Например debuggingcss.com/

[@ukra777]

@@pepelsbey спасибо.

[@nicktravolta1457]

Даже не верится, что однажды мы перестанем изобретать велосипеды для таких компонентов)

[@АлександрХрабров-ф7ь]

Я джвадцать лет этого ждал 🤯

[@Денис-д1у2д]

Супер!

[@KGMelis]

даа это оч. актуальная проблема

[@andrewstarcev]

Воу круто)) А вот интересно как долго ждать когда такие элементы будут работать в других браузерах?

[@pepelsbey]

Хороший вопрос! Надеюсь в какой-то момент появятся полифилы. Но кажется у них хорошие шансы стать кроссбраузерными.

[@videomusic8724]

Смена ракурса камеры, прикольно!!! Но когда ты не смотришь на камеру как то …. Может дело вкуса

[@pepelsbey]

Будет лучше, пробую новый сетап

[@state_of_games]

Пошел переписывать весь код :D

[@pepelsbey]

Рано!

[@angrybeaver3425]

Круто!