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

2 жыл бұрын

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

@returnobject

2 жыл бұрын

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

@alex-front-end

2 жыл бұрын

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

@Mr.Bellamy

Жыл бұрын

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

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

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

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

@pepelsbey

2 жыл бұрын

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

@user-zh5kg2op4h

2 жыл бұрын

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

@sergeyveselov9754

2 жыл бұрын

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

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

@user-bm4yf6td7d

2 жыл бұрын

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

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

@proletarian

2 жыл бұрын

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

@pepelsbey

2 жыл бұрын

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@pepelsbey

2 жыл бұрын

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Лучший!)

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

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

Супер!

It's revolution, Johnny!

Огонь!

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

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

@pepelsbey

2 жыл бұрын

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

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

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

@pepelsbey

2 жыл бұрын

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

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

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

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

Круто!

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

@pepelsbey

2 жыл бұрын

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

@pepelsbey

2 жыл бұрын

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

@viT-1

2 жыл бұрын

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

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

👏 BRAVO !!!

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

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

Как я рад

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

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

@pepelsbey

2 жыл бұрын

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

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

@sergei888kuz6

2 жыл бұрын

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

@pepelsbey

2 жыл бұрын

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

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

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

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

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

@pepelsbey

2 жыл бұрын

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

@QwDragon

2 жыл бұрын

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

@rodemka

2 жыл бұрын

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

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

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

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

Спасибо

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

@yanshubin2424

2 жыл бұрын

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

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

@pepelsbey

2 жыл бұрын

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

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

@pepelsbey

2 жыл бұрын

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

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

@pepelsbey

2 жыл бұрын

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

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

@pepelsbey

2 жыл бұрын

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

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

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

@pepelsbey

2 жыл бұрын

Рано!

👍👍👍

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

@pepelsbey

2 жыл бұрын

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

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

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

@pepelsbey

2 жыл бұрын

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

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

@pepelsbey

2 жыл бұрын

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

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

@pepelsbey

2 жыл бұрын

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

Спасибо за новости) интересно

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

@pepelsbey

2 жыл бұрын

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

elbow-color: red;

@pepelsbey

2 жыл бұрын

Велотравма, заживает )

@quietlab.5727

2 жыл бұрын

@@pepelsbey скорейшего заживления ) спасибо за работу )

Время открывать шампанское😄

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

@pepelsbey

2 жыл бұрын

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

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

@pepelsbey

2 жыл бұрын

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

@QwDragon

2 жыл бұрын

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

@user-zh5kg2op4h

2 жыл бұрын

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

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

@pepelsbey

2 жыл бұрын

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

@DevilAlex03

2 жыл бұрын

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

Круто, спасибо 👍🔥

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

@pepelsbey

2 жыл бұрын

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

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

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

@pepelsbey

2 жыл бұрын

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

@capstanfearless

2 жыл бұрын

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

Ждем к 2032 году :)

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

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

@pepelsbey

2 жыл бұрын

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

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

@pepelsbey

2 жыл бұрын

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

@user-ut4hj7kc1t

2 жыл бұрын

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

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

WoW

я немножко порадовалась ^_^ спасибо!

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

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