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 Аутро
@ИловМакс2 жыл бұрын
Всего лишь 30 лет понадобилось для стилизации селекта) Правильно дорогой идем, товарищи
@andreyzhukov28212 жыл бұрын
После тридцати, жизнь только начинается)
@returnobject2 жыл бұрын
просто 30 лет мы прокладывали эту дорогу!
@alex-front-end2 жыл бұрын
Ой и не гри! так хочется порой об этом поворчать нам старикам))) но всё движется, эт приятно! Помнит можт кто как скруглённые уголки для всего мутили показывая углы круглой картинки с нужными фонами 🙂
@Mr.Bellamy Жыл бұрын
А ты оптимист, еще ничего не внедрено, еще год прошел...
@heynicetomeetyou2 жыл бұрын
Эх так бы в школе учли. Классно начал с готового примера, описал проблемы, потом перешёл на новый вариант и рассказал про его особенности. На самом деле не маленький объем информации, а уложен всего в 15 минут.
@ДмитрийМедыченко2 жыл бұрын
Прям так радостно стало)) А как глаз радуется) Скорее бы уже... Спасибо, Вадим🙏😁
@Anodoree2 жыл бұрын
В разработке я не так давно, но уже много раз сильно грустил по кастомизации селекта... Сколько лет было всем фиолетово на эту базовую жуть с лохматых времён! Точнее на то, что это уже давно не вяжется с современными интерфейсами, и сколько "велосипедов" заново созданы и функционируют в сети. Наконец-то есть прекрасные движения в этом направлении! Ждём скорейшей реализации!)
@Александртень-ф4т2 жыл бұрын
Я не так давно .... Сколько лет
@Mitorun2 жыл бұрын
Музыка и вставки-перебивки кайфовые. Надеюсь будет время и желание почаще снимать такие интересные и полезные ролики.
@amirfarkhadov59266 ай бұрын
Вадим, большое спасибо! Пожалуйста продолжай, очень ждем новое видео!
@helios1612 жыл бұрын
Фантастика, осталось пару лет подождать. А пока - ng-select :)
@oleg_andrianov2 жыл бұрын
Когда он появится, то это будет как с гридами: технология крутая, но пока дождешься солидной поддержки всеми браузерами и дождешься, когда же юзеры обновят свои древние браузеры до последней версии...скорее научишься ездить на велосипеде вниз головой.
@pepelsbey2 жыл бұрын
Можно и так смотреть на вещи, но я более оптимистично настроен и пользуюсь гридами с первых дней.
@levsonc2 жыл бұрын
Гриды по большей части упирались в IE. Сейчас, когда IE уже практически вышел из уравнения (
@sergeyveselov97542 жыл бұрын
Сначало получаешь удовольствие, как читабельно получилось вёрстку организовать, а потом разочарование от реальности разновидностей браузеров. И идёшь переписывать. И откладываются все новые фичи в ящик на лучшее времена...
@РоманМарухленко-л6ь2 жыл бұрын
Вадим вы так доступно по полочкам даёте информацию. Огромное вам спасибо. Очень нравится ваша подача. Буду ждать новых обучающих видео
@ansaganie2 жыл бұрын
Вадим! поздравляю тебя с новым местом!!!!
@dimaburichin77262 жыл бұрын
Вот действительно наконец за это взялись у самого куча велосипедов на тему селекта! Спасибо за видео!
@Chetanoo2 жыл бұрын
Мои поздравления с переездом.
@gian_tiaga2 жыл бұрын
Надеюсь мультиселект тоже подвезут. Так, кайф конечно.
@MrQuicombo2 жыл бұрын
Когда это появится во всех браузерах - я напьюсь )) Спасибо за видео!
@nBulankin2 жыл бұрын
Давайте мы все сегодня немного порадуемся - Рад за селект и за ваш переезд в Берлин!
@АллаПанова-н3в2 жыл бұрын
О, это прекрасно! Да свершится чудо 🙌
@snap95012 жыл бұрын
Поздравляю с переездом)
@AvocadoVHS7 ай бұрын
Вчера пытался реализовать. Накостылял через list_menu > ul > li
@pavelarseyev4522 жыл бұрын
Спасибо за видос. Супер-крутая штука. Ну и подача, само собой. Я тут видел некоторым не понравилась смена ракурса. Я предлагаю оставить смену ракурса, но при этом иногда смотреть в камеру. Причем, когда просто какая-то речь - можно снимать фронтально, а когда демонстрация кода - ракурс сбоку, а автор иногда смотрит в монитор, а иногда - в камеру. Типа мы рядом сидим и автор мне что-то показывает у себя на компе. Мне кажется это оживило бы обстановку. Но меня лично смена ракурса вообще никак не сбила с толку. Ну смена, и смена, чо бухтеть-то? ))
@pepelsbey2 жыл бұрын
Полностью согласен, буду экспериментировать дальше. Это первая попытка на новом месте :)
@Disorrder2 жыл бұрын
Круто! Спассибо, что рассказал. Неужели первые подвижки в этом направлении, давно пора. Чо я могу сказать, ребята "проанализировали" то, что и так уже было сделано везде одинаково, добавили слоты как во vue или react. Ничего инновационного, конечно, тут нет. Паттерны уже устоявшиеся и рабочие. Насчёт обратной совместимости, разве не для этого существует бесполезный доктайп? Если нужен старый селект, пишите старый доктайп. Если нужен новый, то новый. Зачем изобретать какие-то новые теги? Пока не понимаю, с какими трудностями столкнулись, мне кажется, достаточно было добавить слоты. А если бы старый селект ломался, то оставить старую реализацию только для старого доктайпа или ещё как-нибудь это дело версионировать.
@pepelsbey2 жыл бұрын
Слоты во Vue появились по мотивам веб-компонентов и Shadow DOM, тоже части платформы. Так что да, ничего нового, но не во фреймворках это придумали.
@pepelsbey2 жыл бұрын
Черту новый/старый доктайп уже провели однажды, лет 15 назад и больше этот способ не сработает. За чертой оставили старое, несовместимое поведение браузеров, а не какие-то другие теги. Если вы посмотрите на задачу шире, чем как на просто стилизацию селекта, то станет понятно зачем новые теги: это конструктор для любых элементов интерфейса, а не просто селект, который можно стилизовать. Я рассказал об этом мало просто потому, что об этом известно мало. Но уже видно направление и над ним несколько лет плотно работают самые умные люди в отрасли. Давайте им доверимся.
@viT-12 жыл бұрын
Зачем обёртка для button и где selected значение? Form submit без js сработает?
@СергейПластунов2 жыл бұрын
Я тут внизу оставляю очередной респект за новое, интересное и понятное :)
@Ireile2 жыл бұрын
Выглядит многообещающе! Спасибо за контент! Как и всегда круто! 👍🏻
@Mitorun2 жыл бұрын
А что с локтем случилось? Авария на велосипеде или снова за доступность подрался?
@proletarian2 жыл бұрын
Из-за кастомных чекбоксов наверное
@pepelsbey2 жыл бұрын
Велосипедные дела
@viT-12 жыл бұрын
От элемента формы требуется выбранное значение, остальной интерактив переносят в логику WebComponent или компонент Vue/Angular/React со слотом в виде options, которые логикой парсятся.
@profidev_js2 жыл бұрын
Спасибо мужик. Нужная тема, и хорошая подача
@irinaiakovleva22502 жыл бұрын
Сразу лайк за переезд в Берлин
@CrazyCodingChannel2 жыл бұрын
Как всегда очень интересно, спасибо за видео)
@Alex911sc22 жыл бұрын
Вау, это просто невероятно! Интересно, как это будет себя вести в мобильных браузерах, всё-таки нативные селекты довольно удобны на телефонах.
@pepelsbey2 жыл бұрын
Помните, как попап выглядит без стилей? Думаю браузеры смогут приделать к этим примитивам и их сочетаниям новые стили, в зависимости от платформы. Вплоть до того, чтобы вообще их прятать и показывать системные контролы вместо клавиатуры, как сейчас происходит на iOS с селектами.
@asgard1428 Жыл бұрын
Круто. А можно сделать свежий обзор, уже прошел год, может появилось что-то новое и что-то добавили к этой штуке.
@romanstein132 жыл бұрын
Вадим, огромное спасибо за материал! Как всегда одно удовольствие слушать 🙂
@rodemka2 жыл бұрын
30 лет уже тегу select. В прошлый раз datalist ввели. Теперь вот popup. Итог будет как всего: +1 тэг - рост энтропии. Вообще поведение form controls оно не совсем с легаси связано, изначально большую часть контроллов браузер пробрасывал в ОС, чтобы уже ОС решала что должно быть на месте button/input etc. И да изначально это было фичей - отсутствие влияния стилей на стандартные контролы системы дабы не сбивать пользователя с толку. Например в пресловутом IE select был всегда отдельным объектом Windows (который ОС, а не браузерный), и можно было получить его хэндл из внешней программы и посылать извне ему сообщения. Это если меня память не подводит.
@pepelsbey2 жыл бұрын
Если немного разобраться, то это не просто один тег, а целая система примитивов, которые можно комбинировать и настраивать. Это новая эпоха контролов, причём не только для форм. Возможно, вы пока не почувствовали масштабов движения, но оно начинается.
@QwDragon2 жыл бұрын
Не всегда, а только в совсем старых.
@rodemka2 жыл бұрын
@@pepelsbey Это мы будем посмотреть. В прошлый раз аналогично shadow dom делали, тот же контрол audio как раз через него устроен. Конечно всегда хочется революцию в форм элементах. До мейнстрима ещё минимум года два, имхо.
@Feesler2 жыл бұрын
Писал свой компонент для оборачивания select, с клавиатурой и фолбэком к нативной реализации на мобильных устройствах, так что очень близко и актуально! В Берлин тоже переехал бы или в Амстердам ))
@m_mariya_mari2 жыл бұрын
Лайк и подписка! ждем продолжения
@PostoiParovoz2 жыл бұрын
Когда начал говорить про UI сообщество. как они анализируют - сразу перед глазами всплыла картинка из Идиократии, где вставляли фигурки в отверстия.
@progerlife66902 жыл бұрын
Круто спасибо!Совершилось чудо!
@danielginzburg29242 жыл бұрын
Привет из Берлина! 👋
@ЯрославЗозуля-ю3щ2 жыл бұрын
Ухххх.... Агонь. Ещё лет 30 и остальные браузеры начнут поддерживать)))
@avmru2 жыл бұрын
Как всегда - огонь! 👍
@ilyachch2 жыл бұрын
Оч круто И, возможно, имеет смысл выделить все это в спецификацию HTML 6
@sergei888kuz62 жыл бұрын
У HTML уже давно нет версий
@pepelsbey2 жыл бұрын
Спецификации HTML уже не имеют версий, это теперь HTML Living Standard, вечнозелёный html.spec.whatwg.org/multipage/
@mrakcw2 жыл бұрын
Вадим красавчик) 👑 Первый выпуск в новом 2022 году просто топчик)📌👍 Подкаст Веб-стандартов не в счет))) ⚡ Что с правым локтем?
@pepelsbey2 жыл бұрын
Завалился на велосипеде :)
@dennisdovziy27752 жыл бұрын
А все так хорошо начиналось...)
@_Black_Mirror_2 жыл бұрын
хорошие новости) спасибо за новинку
@bautrukevich2 жыл бұрын
Вадим, спасибо за обзор!
@vasyaklishch41842 жыл бұрын
ну круто. правда было бы здорово чтобы это бы без вот этого дива со слотом, а так огонь !)
@maxdzyubak2 жыл бұрын
Вадим, благодарю за крутое видео!
@nicktravolta14572 жыл бұрын
Спасибо большое за ваш труд!
@yuriilukianovych86602 жыл бұрын
Интересно, спасибо за видео. Мне кажется, нужно ещё на эту кнопку добавить "svg стрелку вниз", чтобы пользователь понимал, что это выпадайка и можно выбрать другие опции. Но без неё красивее. Дилема...
@yanshubin24242 жыл бұрын
Ну свг уже можно самим вставлять
@andyvi31162 жыл бұрын
блин, ну это супер. Ждем, ждем, ждем вот такого нативного компонента селекта + попапа. Вадим как всегда впереди планеты всей в обзоре будущих супер новинок веба, за что тебе огромное спасибо. И новое оформление вставочек в видео супер! )))
@Kamila228 Жыл бұрын
Превасзодная подача)
@TheProfessionalGambler2 жыл бұрын
Еще дейт пикеры гарячее место для стилизации :)
@Денис-д1у2д2 жыл бұрын
Супер!
@art_code2 жыл бұрын
Имхо, можно сделать что-то на наподобие 'use strict', но для html. Так можно было бы оставить привычные всем теги и добавить стилизацию. Но конечно же ждем светлое будущее в котором все будет прекрасно
@pepelsbey2 жыл бұрын
Уже был доктайп как use strict, чтобы старое поведение браузеров переключить на новое. Не будет больше такого, я думаю.
@azizoid2 жыл бұрын
добро пожаловать в Берлин )))
@SashaKuzikov2 жыл бұрын
*Увлекательно!*
@ВладиславШаманов-и8о2 жыл бұрын
Да, пришлось сделать свой селект который не селект вовсе а в конечном счёте текстовый инпут. Если эта вещь появится в браузерах будет отлично! Ждём :-)
@iGotton2 жыл бұрын
Огонь!
@МаксимОгуров2 жыл бұрын
Лучший!)
@АлександрПирожков-д1я2 жыл бұрын
It's revolution, Johnny!
@vissper12 жыл бұрын
Вадим, лучше Трептов-Кёпеника района нет 🙂
@АндрейСива-т2у2 жыл бұрын
Годный контент
@Lieveify2 жыл бұрын
Штука очень классная, жду. Но т.к. часто делаю для аудитории, которые ещё и IE пользуют (всякие организации с традициями), то ждать ещё норм так)
@angrybeaver34252 жыл бұрын
Круто!
@yaroslavbox12492 жыл бұрын
👏 BRAVO !!!
@Александр-р7з9с2 жыл бұрын
Как я рад
@viT-12 жыл бұрын
Пишется компонент select-menu на любимом фреймворке или веб-компонентах, api оставляем прежним от select, где надо реализуем слоты (optgroup и options), развешиваем директивы или тэг меняем. Настраиваем как нравится, можно инициализирующий скрипт по прежним select запустить. Так бы решал инженер, а не просто верстальщик.
@pepelsbey2 жыл бұрын
Весь npm забит решениями от инженеров - одно хуже другого. Недоступные, неудобные, с кучей зависимостей, залоченные код конкретную библиотеку, не имеющие всех нужных возможностей. Может хватит уже велосипедов? Места на парковке уже нет )
@viT-12 жыл бұрын
@@pepelsbey Сомневаюсь, что новые реализации от Open UI полностью дадут прежний функционал
@viT-12 жыл бұрын
@@pepelsbey вопрос же не в руках горе-инженеров, а как принципиально должна решаться проблема поддержки от самих производителей браузеров. API сохраняют, добавив атрибут.
@denysdzhelomanov26332 жыл бұрын
Ну с селектом уже давно смирился, а вод "popup" очень жду)
@samkrekotyn Жыл бұрын
Спасибо
@ДмитрийКузнецов-ц7м2 жыл бұрын
Есть надежда забыть про плагины для селекта))Т. н. велосипеды всегда намного больше нравились, чем стилизация того же select2)
@alexnoodles82902 жыл бұрын
Наконец то Человечество создало инструмент кроссбраузерного селекта который можно стилизовать ,,, это Вам не на луну слетать
@state_of_games2 жыл бұрын
Пошел переписывать весь код :D
@pepelsbey2 жыл бұрын
Рано!
@eugenenovikov6712 жыл бұрын
самая главная проблема с селектом на всех работах это был селект с чекбоксами. который приходилось либо писать самим, либо качать что-то типа ng-select с npm
@yanshubin24242 жыл бұрын
Вот тут по спорю, чекбоксы относительно не сложно написать и самому через лейбл, и не нужно думать о разных мелочах, как в выпадающих списках
@quietlab.57272 жыл бұрын
elbow-color: red;
@pepelsbey2 жыл бұрын
Велотравма, заживает )
@quietlab.57272 жыл бұрын
@@pepelsbey скорейшего заживления ) спасибо за работу )
@redgreengrey2 жыл бұрын
как всегда очень интересно, спасибо
@KGMelis2 жыл бұрын
даа это оч. актуальная проблема
@skillbuks2 жыл бұрын
Возможно не стоит менять ракурс 0:22 ? и так интересно слушать
@pepelsbey2 жыл бұрын
Это нужно для монтажа, иначе придётся делать стрёмные джамп-каты. Но будет лучше, сетап пока новый.
@proletarian2 жыл бұрын
А бордер-радиус для аутлайна с каких пор начал применяться? Я что то упустил этот момент
@pepelsbey2 жыл бұрын
Совсем недавно - сначала в Safari, потом остальные подтянулись
@QwDragon2 жыл бұрын
@@pepelsbey я тоже перед новым годом внезапно обнаружил)))
@levsonc2 жыл бұрын
@@pepelsbey Наоборот же. В Safari сейчас не применяется. Прикол с Outline в том, что он хоть и обводит элемент, но чисто по спецификации его форма не гарантирована. Так он может стать прямоугольным при изменении. Зато показывается поверх всех элементов и не обрезается как box-shadow.
@veravlasova51422 жыл бұрын
👍👍👍
@nicktravolta14572 жыл бұрын
Даже не верится, что однажды мы перестанем изобретать велосипеды для таких компонентов)
@mouratibraguimov79642 жыл бұрын
Через js пункты списка доступны? Например, я хочу выделить часть карты, которая будет выбрана в случае клика (но еще не выбрана), выделить ее пунктирным контуром, например. Или изменить selected option нажав на карту..
@pepelsbey2 жыл бұрын
Конечно доступны, как и любой другой элемент в DOM
@andrewstarcev2 жыл бұрын
Воу круто)) А вот интересно как долго ждать когда такие элементы будут работать в других браузерах?
@pepelsbey2 жыл бұрын
Хороший вопрос! Надеюсь в какой-то момент появятся полифилы. Но кажется у них хорошие шансы стать кроссбраузерными.
@b.g.51062 жыл бұрын
наконец-то, пропажа нашлась) как добрался до Берлина ?)
@mikhailkhramtsov51472 жыл бұрын
Вадим, добрый день, подскажите, пожалуйста, с помощью чего отрисовали такую карту? P.s. Berlin one love
@pepelsbey2 жыл бұрын
Взял из Википедии, доработал в Фигме
@olegscherbakov2782 жыл бұрын
Спасибо за видео, но не раскрыта тема вставки изображений в option ? он вообще возможен с новыми компонентами ?
@pepelsbey2 жыл бұрын
Что угодно туда можно вставить, просто попробуйте :)
@ДенисМалышок2 жыл бұрын
Ахринеть ... переезжаю в Берлин 17-го. Неужели Accenture захантили вас?)
@pepelsbey2 жыл бұрын
Не Accenture, а SinnerSchrader. И не захантили, а заинтересовали задачами.
@ДенисМалышок2 жыл бұрын
@@pepelsbey Чтож, поздравляю с переездом! Буду рад придти на ваши мероприятия, если таковые будут, в Берлине)
@eq6562 жыл бұрын
Очень крутые ролики, полезная информация, приятная подача, ты не зря стараешься) крутой чел
@DevilAlex032 жыл бұрын
Хм, слоты в спецификации. Они там vue вдохновились или слоты были в веб-компонентах?
@pepelsbey2 жыл бұрын
Предполагаю, что это как раз Vue взял слоты из веб-компонентов
@DevilAlex032 жыл бұрын
@@pepelsbey Спасибо, я этого не знал, будет повод окунуться в веб-компоненты поглубже! с:
@bublic18852 жыл бұрын
Время открывать шампанское😄
@sashabeep2 жыл бұрын
Ждем к 2032 году :)
@capstanfearless2 жыл бұрын
Вадим, привет! Подскажи, где почитать про rsync gulp? В конфигах по интернетам смотрел - ругается консоль при попытке залить файлы на сервер. Причем кракозябры какие-то, неочевидно очень.
@pepelsbey2 жыл бұрын
«Ругаться» может по разным причинам, тут нужно разбираться с конкретным случаем. Для начала, я бы попытался подключиться к вашему серверу по ssh. Дальше можно попробовать что-то с помощью rsync. И если это сработало, значит уже разбираться с Gulp-плагином.
@capstanfearless2 жыл бұрын
@@pepelsbey Вадим, тебе можно написать на почту по этому вопросу?
@betariel2 жыл бұрын
Вадим, подскажите пожалуйста, какая у вас тема vscode установлена?
А при расположении элемента в форме его значение будет автоматически передаваться на сервер подобно нативному селекту? И присутствуют ли возможности поиска в списке опций?
@pepelsbey2 жыл бұрын
Пока в примитивах нет поиска, но вы легко можете его написать и добавить сами. Не уверен как сейчас, но в дальнейшем планируется сериализовать эти элементы точно так же, как старые контролы форм.
@maksikgregory49882 жыл бұрын
Расскажите пожалуйста какой монитор у вас ? Пытаюсь что-то подобрать чтобы много читать или писать. Но от VA / 144 Hz глаза устают.
@pepelsbey2 жыл бұрын
LG UltraFine 5K, мне 60 Гц хватает пока
@Vladyslav_Sliusar2 жыл бұрын
Когда камера снимает сбоку, ощущение будто собеседник от тебя отвернулся
@pepelsbey2 жыл бұрын
Будет лучше, экспериментирую с новым сетапом
@videomusic87242 жыл бұрын
Смена ракурса камеры, прикольно!!! Но когда ты не смотришь на камеру как то …. Может дело вкуса
@pepelsbey2 жыл бұрын
Будет лучше, пробую новый сетап
@eugeniola-manche12902 жыл бұрын
Вадим, пожалуйста подскажи, какой у тебя шрифт в редакторе кода? Он очень красивый и удобный, хочу такой же попробовать!
@pepelsbey2 жыл бұрын
JetBrains Mono www.jetbrains.com/lp/mono/
@megustabmwf2 жыл бұрын
их... может накидать на джейквери такой плагинчик, который бы стилизовал это таким же образом. Но идея с новым компонетом, с поддержкой клавиатуры - огонь. Одно огорчает (вспоминаю, как внедряли css3) - не сразу все будет... Пару лет еще мучаться. А потом еще саппортить олдовые проекты... (
@alexantrrr2 жыл бұрын
Шел 2022 год. К 30-м годам появится что-нибудь для поле выбора файлов
@pepelsbey2 жыл бұрын
Диалог выбора файлов уже в работе силами Open UI, всё будет
@kelenella_2 жыл бұрын
Спасибо за новости) интересно
@TheFastmind2 жыл бұрын
Интересно, а можно ли данные из селекта вытащить, если закинуть в тег form? У меня когда-то был такой макет сайта, где список услуг выпадал селектом. И клиент выбирал селектами услуги и потом отправлял данные. Селект я стилизовал, через приложуху jquery, который прятал оригинальный селект, а новый который был сделан из div был виден пользователю. Вот только данные из такого селекта не отправлялись...)
@pepelsbey2 жыл бұрын
Да, идея в том, чтобы новые теги сериализовали свои данные точно так же, как и другие поля форм. Без необходимости собирать их руками.