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 Аутро
Ой и не гри! так хочется порой об этом поворчать нам старикам))) но всё движется, эт приятно! Помнит можт кто как скруглённые уголки для всего мутили показывая углы круглой картинки с нужными фонами 🙂
Эх так бы в школе учли. Классно начал с готового примера, описал проблемы, потом перешёл на новый вариант и рассказал про его особенности. На самом деле не маленький объем информации, а уложен всего в 15 минут.
В разработке я не так давно, но уже много раз сильно грустил по кастомизации селекта... Сколько лет было всем фиолетово на эту базовую жуть с лохматых времён! Точнее на то, что это уже давно не вяжется с современными интерфейсами, и сколько "велосипедов" заново созданы и функционируют в сети. Наконец-то есть прекрасные движения в этом направлении! Ждём скорейшей реализации!)
Когда он появится, то это будет как с гридами: технология крутая, но пока дождешься солидной поддержки всеми браузерами и дождешься, когда же юзеры обновят свои древние браузеры до последней версии...скорее научишься ездить на велосипеде вниз головой.
Сначало получаешь удовольствие, как читабельно получилось вёрстку организовать, а потом разочарование от реальности разновидностей браузеров. И идёшь переписывать. И откладываются все новые фичи в ящик на лучшее времена...
Спасибо за видос. Супер-крутая штука. Ну и подача, само собой. Я тут видел некоторым не понравилась смена ракурса. Я предлагаю оставить смену ракурса, но при этом иногда смотреть в камеру. Причем, когда просто какая-то речь - можно снимать фронтально, а когда демонстрация кода - ракурс сбоку, а автор иногда смотрит в монитор, а иногда - в камеру. Типа мы рядом сидим и автор мне что-то показывает у себя на компе. Мне кажется это оживило бы обстановку. Но меня лично смена ракурса вообще никак не сбила с толку. Ну смена, и смена, чо бухтеть-то? ))
30 лет уже тегу select. В прошлый раз datalist ввели. Теперь вот popup. Итог будет как всего: +1 тэг - рост энтропии. Вообще поведение form controls оно не совсем с легаси связано, изначально большую часть контроллов браузер пробрасывал в ОС, чтобы уже ОС решала что должно быть на месте button/input etc. И да изначально это было фичей - отсутствие влияния стилей на стандартные контролы системы дабы не сбивать пользователя с толку. Например в пресловутом IE select был всегда отдельным объектом Windows (который ОС, а не браузерный), и можно было получить его хэндл из внешней программы и посылать извне ему сообщения. Это если меня память не подводит.
Если немного разобраться, то это не просто один тег, а целая система примитивов, которые можно комбинировать и настраивать. Это новая эпоха контролов, причём не только для форм. Возможно, вы пока не почувствовали масштабов движения, но оно начинается.
@@pepelsbey Это мы будем посмотреть. В прошлый раз аналогично shadow dom делали, тот же контрол audio как раз через него устроен. Конечно всегда хочется революцию в форм элементах. До мейнстрима ещё минимум года два, имхо.
Вадим, привет! Подскажи, где почитать про rsync gulp? В конфигах по интернетам смотрел - ругается консоль при попытке залить файлы на сервер. Причем кракозябры какие-то, неочевидно очень.
«Ругаться» может по разным причинам, тут нужно разбираться с конкретным случаем. Для начала, я бы попытался подключиться к вашему серверу по ssh. Дальше можно попробовать что-то с помощью rsync. И если это сработало, значит уже разбираться с Gulp-плагином.
Помните, как попап выглядит без стилей? Думаю браузеры смогут приделать к этим примитивам и их сочетаниям новые стили, в зависимости от платформы. Вплоть до того, чтобы вообще их прятать и показывать системные контролы вместо клавиатуры, как сейчас происходит на iOS с селектами.
Круто! Спассибо, что рассказал. Неужели первые подвижки в этом направлении, давно пора. Чо я могу сказать, ребята "проанализировали" то, что и так уже было сделано везде одинаково, добавили слоты как во vue или react. Ничего инновационного, конечно, тут нет. Паттерны уже устоявшиеся и рабочие. Насчёт обратной совместимости, разве не для этого существует бесполезный доктайп? Если нужен старый селект, пишите старый доктайп. Если нужен новый, то новый. Зачем изобретать какие-то новые теги? Пока не понимаю, с какими трудностями столкнулись, мне кажется, достаточно было добавить слоты. А если бы старый селект ломался, то оставить старую реализацию только для старого доктайпа или ещё как-нибудь это дело версионировать.
Черту новый/старый доктайп уже провели однажды, лет 15 назад и больше этот способ не сработает. За чертой оставили старое, несовместимое поведение браузеров, а не какие-то другие теги. Если вы посмотрите на задачу шире, чем как на просто стилизацию селекта, то станет понятно зачем новые теги: это конструктор для любых элементов интерфейса, а не просто селект, который можно стилизовать. Я рассказал об этом мало просто потому, что об этом известно мало. Но уже видно направление и над ним несколько лет плотно работают самые умные люди в отрасли. Давайте им доверимся.
@@pepelsbey Наоборот же. В Safari сейчас не применяется. Прикол с Outline в том, что он хоть и обводит элемент, но чисто по спецификации его форма не гарантирована. Так он может стать прямоугольным при изменении. Зато показывается поверх всех элементов и не обрезается как box-shadow.
Через js пункты списка доступны? Например, я хочу выделить часть карты, которая будет выбрана в случае клика (но еще не выбрана), выделить ее пунктирным контуром, например. Или изменить selected option нажав на карту..
От элемента формы требуется выбранное значение, остальной интерактив переносят в логику WebComponent или компонент Vue/Angular/React со слотом в виде options, которые логикой парсятся.
Писал свой компонент для оборачивания select, с клавиатурой и фолбэком к нативной реализации на мобильных устройствах, так что очень близко и актуально! В Берлин тоже переехал бы или в Амстердам ))
блин, ну это супер. Ждем, ждем, ждем вот такого нативного компонента селекта + попапа. Вадим как всегда впереди планеты всей в обзоре будущих супер новинок веба, за что тебе огромное спасибо. И новое оформление вставочек в видео супер! )))
А при расположении элемента в форме его значение будет автоматически передаваться на сервер подобно нативному селекту? И присутствуют ли возможности поиска в списке опций?
Пока в примитивах нет поиска, но вы легко можете его написать и добавить сами. Не уверен как сейчас, но в дальнейшем планируется сериализовать эти элементы точно так же, как старые контролы форм.
Интересно, спасибо за видео. Мне кажется, нужно ещё на эту кнопку добавить "svg стрелку вниз", чтобы пользователь понимал, что это выпадайка и можно выбрать другие опции. Но без неё красивее. Дилема...
Интересно, а можно ли данные из селекта вытащить, если закинуть в тег form? У меня когда-то был такой макет сайта, где список услуг выпадал селектом. И клиент выбирал селектами услуги и потом отправлял данные. Селект я стилизовал, через приложуху jquery, который прятал оригинальный селект, а новый который был сделан из div был виден пользователю. Вот только данные из такого селекта не отправлялись...)
Имхо, можно сделать что-то на наподобие 'use strict', но для html. Так можно было бы оставить привычные всем теги и добавить стилизацию. Но конечно же ждем светлое будущее в котором все будет прекрасно
Да, пришлось сделать свой селект который не селект вовсе а в конечном счёте текстовый инпут. Если эта вещь появится в браузерах будет отлично! Ждём :-)
самая главная проблема с селектом на всех работах это был селект с чекбоксами. который приходилось либо писать самим, либо качать что-то типа ng-select с npm
привет! Недавно наткнулся на твой перевод статьи Филипа Уолтона - "Архитектура CSS". Так вот, статья 14 года и некоторые подходы немного изменились, но меня интересует тема шаблонных селекторов sass. В статье было упоминание про них, и вот такая рекомендация - "Не используйте миксины без аргументов, в этом случае заменяйте их на шаблоны". А вот что сейчас правильно делать? Это правило остается в силе? И ведь действительно после компиляции шаблонов в css меньше кода, там идет перечисление через запятую, то есть .class1, .class2, .class2 {display: flex;} . А в случае с миксинами без аргументов после компиляции будет вот такой код: .class1 {display: flex;} .class2 {display: flex;} .class3 {display: flex;}, то есть здесь повторяются стили, а в шаблонах они сразу пишутся для всех кто использует. Я думал что шаблоны повышают специфичность селекторов, но нет, на специфичность здесь вообще не влияет и можно переопределить в любой момент. Мне очень интересно что ты по этому поводу думаешь? Или может быть что в работе лучше применять на данный момент?
Главная ошибка, которую делают многие - это считать размер файлов до сжатия, которое всегда происходит при передаче по сети. Если взять ваши примеры и взвесить, то второй после сжатия только на 2 байта больше первого. Притом, что это не очень показательно - gzip и прочие начинают лучше работать на больших файлах. Пишите читайемый, удобный для поддержки код. Пусть оптимизацией займутся алгоритмы и инструменты.
Пишется компонент select-menu на любимом фреймворке или веб-компонентах, api оставляем прежним от select, где надо реализуем слоты (optgroup и options), развешиваем директивы или тэг меняем. Настраиваем как нравится, можно инициализирующий скрипт по прежним select запустить. Так бы решал инженер, а не просто верстальщик.
Весь npm забит решениями от инженеров - одно хуже другого. Недоступные, неудобные, с кучей зависимостей, залоченные код конкретную библиотеку, не имеющие всех нужных возможностей. Может хватит уже велосипедов? Места на парковке уже нет )
@@pepelsbey вопрос же не в руках горе-инженеров, а как принципиально должна решаться проблема поддержки от самих производителей браузеров. API сохраняют, добавив атрибут.
Эта книга очень устарела, будьте осторожнее с ней. Шесть лет (или даже больше) это очень большой срок во фронтенде. Лучше брать книги изданные хотя бы год-два назад. Например debuggingcss.com/
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 лет понадобилось для стилизации селекта) Правильно дорогой идем, товарищи
После тридцати, жизнь только начинается)
просто 30 лет мы прокладывали эту дорогу!
Ой и не гри! так хочется порой об этом поворчать нам старикам))) но всё движется, эт приятно! Помнит можт кто как скруглённые уголки для всего мутили показывая углы круглой картинки с нужными фонами 🙂
А ты оптимист, еще ничего не внедрено, еще год прошел...
Эх так бы в школе учли. Классно начал с готового примера, описал проблемы, потом перешёл на новый вариант и рассказал про его особенности. На самом деле не маленький объем информации, а уложен всего в 15 минут.
А что с локтем случилось? Авария на велосипеде или снова за доступность подрался?
Из-за кастомных чекбоксов наверное
Велосипедные дела
В разработке я не так давно, но уже много раз сильно грустил по кастомизации селекта... Сколько лет было всем фиолетово на эту базовую жуть с лохматых времён! Точнее на то, что это уже давно не вяжется с современными интерфейсами, и сколько "велосипедов" заново созданы и функционируют в сети. Наконец-то есть прекрасные движения в этом направлении! Ждём скорейшей реализации!)
Я не так давно .... Сколько лет
Прям так радостно стало)) А как глаз радуется) Скорее бы уже... Спасибо, Вадим🙏😁
Когда он появится, то это будет как с гридами: технология крутая, но пока дождешься солидной поддержки всеми браузерами и дождешься, когда же юзеры обновят свои древние браузеры до последней версии...скорее научишься ездить на велосипеде вниз головой.
Можно и так смотреть на вещи, но я более оптимистично настроен и пользуюсь гридами с первых дней.
Гриды по большей части упирались в IE. Сейчас, когда IE уже практически вышел из уравнения (
Сначало получаешь удовольствие, как читабельно получилось вёрстку организовать, а потом разочарование от реальности разновидностей браузеров. И идёшь переписывать. И откладываются все новые фичи в ящик на лучшее времена...
Музыка и вставки-перебивки кайфовые. Надеюсь будет время и желание почаще снимать такие интересные и полезные ролики.
Вадим, большое спасибо! Пожалуйста продолжай, очень ждем новое видео!
Вадим! поздравляю тебя с новым местом!!!!
Фантастика, осталось пару лет подождать.
А пока - ng-select :)
Вадим вы так доступно по полочкам даёте информацию. Огромное вам спасибо. Очень нравится ваша подача. Буду ждать новых обучающих видео
Вот действительно наконец за это взялись у самого куча велосипедов на тему селекта! Спасибо за видео!
Мои поздравления с переездом.
Надеюсь мультиселект тоже подвезут. Так, кайф конечно.
Когда это появится во всех браузерах - я напьюсь )) Спасибо за видео!
Поздравляю с переездом)
О, это прекрасно! Да свершится чудо 🙌
Давайте мы все сегодня немного порадуемся - Рад за селект и за ваш переезд в Берлин!
Когда начал говорить про UI сообщество. как они анализируют - сразу перед глазами всплыла картинка из Идиократии, где вставляли фигурки в отверстия.
Круто. А можно сделать свежий обзор, уже прошел год, может появилось что-то новое и что-то добавили к этой штуке.
Выглядит многообещающе! Спасибо за контент! Как и всегда круто! 👍🏻
Спасибо за видос. Супер-крутая штука. Ну и подача, само собой. Я тут видел некоторым не понравилась смена ракурса. Я предлагаю оставить смену ракурса, но при этом иногда смотреть в камеру. Причем, когда просто какая-то речь - можно снимать фронтально, а когда демонстрация кода - ракурс сбоку, а автор иногда смотрит в монитор, а иногда - в камеру. Типа мы рядом сидим и автор мне что-то показывает у себя на компе. Мне кажется это оживило бы обстановку. Но меня лично смена ракурса вообще никак не сбила с толку. Ну смена, и смена, чо бухтеть-то? ))
Полностью согласен, буду экспериментировать дальше. Это первая попытка на новом месте :)
30 лет уже тегу select. В прошлый раз datalist ввели. Теперь вот popup. Итог будет как всего: +1 тэг - рост энтропии.
Вообще поведение form controls оно не совсем с легаси связано, изначально большую часть контроллов браузер пробрасывал в ОС, чтобы уже ОС решала что должно быть на месте button/input etc.
И да изначально это было фичей - отсутствие влияния стилей на стандартные контролы системы дабы не сбивать пользователя с толку.
Например в пресловутом IE select был всегда отдельным объектом Windows (который ОС, а не браузерный), и можно было получить его хэндл из внешней программы и посылать извне ему сообщения. Это если меня память не подводит.
Если немного разобраться, то это не просто один тег, а целая система примитивов, которые можно комбинировать и настраивать. Это новая эпоха контролов, причём не только для форм. Возможно, вы пока не почувствовали масштабов движения, но оно начинается.
Не всегда, а только в совсем старых.
@@pepelsbey Это мы будем посмотреть.
В прошлый раз аналогично shadow dom делали, тот же контрол audio как раз через него устроен.
Конечно всегда хочется революцию в форм элементах. До мейнстрима ещё минимум года два, имхо.
Вадим, подскажите пожалуйста, какая у вас тема vscode установлена?
GitHub Light marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
Я тут внизу оставляю очередной респект за новое, интересное и понятное :)
Вадим, привет! Подскажи, где почитать про rsync gulp? В конфигах по интернетам смотрел - ругается консоль при попытке залить файлы на сервер. Причем кракозябры какие-то, неочевидно очень.
«Ругаться» может по разным причинам, тут нужно разбираться с конкретным случаем. Для начала, я бы попытался подключиться к вашему серверу по ssh. Дальше можно попробовать что-то с помощью rsync. И если это сработало, значит уже разбираться с Gulp-плагином.
@@pepelsbey Вадим, тебе можно написать на почту по этому вопросу?
Вау, это просто невероятно! Интересно, как это будет себя вести в мобильных браузерах, всё-таки нативные селекты довольно удобны на телефонах.
Помните, как попап выглядит без стилей? Думаю браузеры смогут приделать к этим примитивам и их сочетаниям новые стили, в зависимости от платформы. Вплоть до того, чтобы вообще их прятать и показывать системные контролы вместо клавиатуры, как сейчас происходит на iOS с селектами.
Спасибо мужик. Нужная тема, и хорошая подача
Сразу лайк за переезд в Берлин
Еще дейт пикеры гарячее место для стилизации :)
Лайк и подписка! ждем продолжения
Спасибо за видео, но не раскрыта тема вставки изображений в option ? он вообще возможен с новыми компонентами ?
Что угодно туда можно вставить, просто попробуйте :)
Как всегда - огонь! 👍
Круто! Спассибо, что рассказал. Неужели первые подвижки в этом направлении, давно пора.
Чо я могу сказать, ребята "проанализировали" то, что и так уже было сделано везде одинаково, добавили слоты как во vue или react. Ничего инновационного, конечно, тут нет. Паттерны уже устоявшиеся и рабочие.
Насчёт обратной совместимости, разве не для этого существует бесполезный доктайп? Если нужен старый селект, пишите старый доктайп. Если нужен новый, то новый. Зачем изобретать какие-то новые теги? Пока не понимаю, с какими трудностями столкнулись, мне кажется, достаточно было добавить слоты. А если бы старый селект ломался, то оставить старую реализацию только для старого доктайпа или ещё как-нибудь это дело версионировать.
Слоты во Vue появились по мотивам веб-компонентов и Shadow DOM, тоже части платформы. Так что да, ничего нового, но не во фреймворках это придумали.
Черту новый/старый доктайп уже провели однажды, лет 15 назад и больше этот способ не сработает. За чертой оставили старое, несовместимое поведение браузеров, а не какие-то другие теги. Если вы посмотрите на задачу шире, чем как на просто стилизацию селекта, то станет понятно зачем новые теги: это конструктор для любых элементов интерфейса, а не просто селект, который можно стилизовать.
Я рассказал об этом мало просто потому, что об этом известно мало. Но уже видно направление и над ним несколько лет плотно работают самые умные люди в отрасли. Давайте им доверимся.
Зачем обёртка для button и где selected значение? Form submit без js сработает?
А бордер-радиус для аутлайна с каких пор начал применяться? Я что то упустил этот момент
Совсем недавно - сначала в Safari, потом остальные подтянулись
@@pepelsbey я тоже перед новым годом внезапно обнаружил)))
@@pepelsbey Наоборот же. В Safari сейчас не применяется. Прикол с Outline в том, что он хоть и обводит элемент, но чисто по спецификации его форма не гарантирована. Так он может стать прямоугольным при изменении. Зато показывается поверх всех элементов и не обрезается как box-shadow.
Как всегда очень интересно, спасибо за видео)
Вадим красавчик) 👑
Первый выпуск в новом 2022 году просто топчик)📌👍
Подкаст Веб-стандартов не в счет))) ⚡
Что с правым локтем?
Завалился на велосипеде :)
А все так хорошо начиналось...)
Вадим, огромное спасибо за материал! Как всегда одно удовольствие слушать 🙂
Возможно не стоит менять ракурс 0:22 ? и так интересно слушать
Это нужно для монтажа, иначе придётся делать стрёмные джамп-каты. Но будет лучше, сетап пока новый.
Через js пункты списка доступны? Например, я хочу выделить часть карты, которая будет выбрана в случае клика (но еще не выбрана), выделить ее пунктирным контуром, например. Или изменить selected option нажав на карту..
Конечно доступны, как и любой другой элемент в DOM
От элемента формы требуется выбранное значение, остальной интерактив переносят в логику WebComponent или компонент Vue/Angular/React со слотом в виде options, которые логикой парсятся.
Привет из Берлина! 👋
Писал свой компонент для оборачивания select, с клавиатурой и фолбэком к нативной реализации на мобильных устройствах, так что очень близко и актуально! В Берлин тоже переехал бы или в Амстердам ))
Круто спасибо!Совершилось чудо!
Расскажите пожалуйста какой монитор у вас ? Пытаюсь что-то подобрать чтобы много читать или писать. Но от VA / 144 Hz глаза устают.
LG UltraFine 5K, мне 60 Гц хватает пока
блин, ну это супер. Ждем, ждем, ждем вот такого нативного компонента селекта + попапа. Вадим как всегда впереди планеты всей в обзоре будущих супер новинок веба, за что тебе огромное спасибо. И новое оформление вставочек в видео супер! )))
Оч круто
И, возможно, имеет смысл выделить все это в спецификацию HTML 6
У HTML уже давно нет версий
Спецификации HTML уже не имеют версий, это теперь HTML Living Standard, вечнозелёный html.spec.whatwg.org/multipage/
Вадим, благодарю за крутое видео!
Вадим, добрый день, подскажите, пожалуйста, с помощью чего отрисовали такую карту?
P.s. Berlin one love
Взял из Википедии, доработал в Фигме
Вадим, спасибо за обзор!
хорошие новости) спасибо за новинку
Хм, слоты в спецификации. Они там vue вдохновились или слоты были в веб-компонентах?
Предполагаю, что это как раз Vue взял слоты из веб-компонентов
@@pepelsbey Спасибо, я этого не знал, будет повод окунуться в веб-компоненты поглубже! с:
добро пожаловать в Берлин )))
Ухххх.... Агонь.
Ещё лет 30 и остальные браузеры начнут поддерживать)))
А при расположении элемента в форме его значение будет автоматически передаваться на сервер подобно нативному селекту?
И присутствуют ли возможности поиска в списке опций?
Пока в примитивах нет поиска, но вы легко можете его написать и добавить сами. Не уверен как сейчас, но в дальнейшем планируется сериализовать эти элементы точно так же, как старые контролы форм.
Превасзодная подача)
Интересно, спасибо за видео.
Мне кажется, нужно ещё на эту кнопку добавить "svg стрелку вниз", чтобы пользователь понимал, что это выпадайка и можно выбрать другие опции. Но без неё красивее. Дилема...
Ну свг уже можно самим вставлять
ну круто. правда было бы здорово чтобы это бы без вот этого дива со слотом, а так огонь !)
Вчера пытался реализовать. Накостылял через list_menu > ul > li
Спасибо большое за ваш труд!
Лучший!)
Интересно, а можно ли данные из селекта вытащить, если закинуть в тег form? У меня когда-то был такой макет сайта, где список услуг выпадал селектом. И клиент выбирал селектами услуги и потом отправлял данные. Селект я стилизовал, через приложуху jquery, который прятал оригинальный селект, а новый который был сделан из div был виден пользователю. Вот только данные из такого селекта не отправлялись...)
Да, идея в том, чтобы новые теги сериализовали свои данные точно так же, как и другие поля форм. Без необходимости собирать их руками.
Огонь!
*Увлекательно!*
Имхо, можно сделать что-то на наподобие 'use strict', но для html. Так можно было бы оставить привычные всем теги и добавить стилизацию. Но конечно же ждем светлое будущее в котором все будет прекрасно
Уже был доктайп как use strict, чтобы старое поведение браузеров переключить на новое. Не будет больше такого, я думаю.
Годный контент
Спасибо! полезно! что с локтём?
Примерно то же самое, что с коленом - завалился на велике, но уже всё норм )
Вадим, пожалуйста подскажи, какой у тебя шрифт в редакторе кода? Он очень красивый и удобный, хочу такой же попробовать!
JetBrains Mono www.jetbrains.com/lp/mono/
Вадим, лучше Трептов-Кёпеника района нет 🙂
Пошел переписывать весь код :D
Рано!
Да, пришлось сделать свой селект который не селект вовсе а в конечном счёте текстовый инпут. Если эта вещь появится в браузерах будет отлично! Ждём :-)
Супер!
Как я рад
It's revolution, Johnny!
Наконец то Человечество создало инструмент кроссбраузерного селекта который можно стилизовать ,,, это Вам не на луну слетать
Круто!
самая главная проблема с селектом на всех работах это был селект с чекбоксами. который приходилось либо писать самим, либо качать что-то типа ng-select с npm
Вот тут по спорю, чекбоксы относительно не сложно написать и самому через лейбл, и не нужно думать о разных мелочах, как в выпадающих списках
Ну с селектом уже давно смирился, а вод "popup" очень жду)
Я джвадцать лет этого ждал 🤯
Ахринеть ... переезжаю в Берлин 17-го.
Неужели Accenture захантили вас?)
Не Accenture, а SinnerSchrader. И не захантили, а заинтересовали задачами.
@@pepelsbey Чтож, поздравляю с переездом! Буду рад придти на ваши мероприятия, если таковые будут, в Берлине)
привет! Недавно наткнулся на твой перевод статьи Филипа Уолтона - "Архитектура CSS". Так вот, статья 14 года и некоторые подходы немного изменились, но меня интересует тема шаблонных селекторов sass. В статье было упоминание про них, и вот такая рекомендация - "Не используйте миксины без аргументов, в этом случае заменяйте их на шаблоны". А вот что сейчас правильно делать? Это правило остается в силе? И ведь действительно после компиляции шаблонов в css меньше кода, там идет перечисление через запятую, то есть .class1, .class2, .class2 {display: flex;} . А в случае с миксинами без аргументов после компиляции будет вот такой код: .class1 {display: flex;} .class2 {display: flex;} .class3 {display: flex;}, то есть здесь повторяются стили, а в шаблонах они сразу пишутся для всех кто использует. Я думал что шаблоны повышают специфичность селекторов, но нет, на специфичность здесь вообще не влияет и можно переопределить в любой момент. Мне очень интересно что ты по этому поводу думаешь? Или может быть что в работе лучше применять на данный момент?
Главная ошибка, которую делают многие - это считать размер файлов до сжатия, которое всегда происходит при передаче по сети. Если взять ваши примеры и взвесить, то второй после сжатия только на 2 байта больше первого. Притом, что это не очень показательно - gzip и прочие начинают лучше работать на больших файлах.
Пишите читайемый, удобный для поддержки код. Пусть оптимизацией займутся алгоритмы и инструменты.
@@pepelsbey , большое спасибо за уделенное время!
Даже не верится, что однажды мы перестанем изобретать велосипеды для таких компонентов)
Не знаете что там с модалками? Помню была какая-то история с dialog, но не помню и давно не следил
Думаю, будут развивать элемент dialog
👏 BRAVO !!!
Когда камера снимает сбоку, ощущение будто собеседник от тебя отвернулся
Будет лучше, экспериментирую с новым сетапом
Пишется компонент select-menu на любимом фреймворке или веб-компонентах, api оставляем прежним от select, где надо реализуем слоты (optgroup и options), развешиваем директивы или тэг меняем. Настраиваем как нравится, можно инициализирующий скрипт по прежним select запустить. Так бы решал инженер, а не просто верстальщик.
Весь npm забит решениями от инженеров - одно хуже другого. Недоступные, неудобные, с кучей зависимостей, залоченные код конкретную библиотеку, не имеющие всех нужных возможностей. Может хватит уже велосипедов? Места на парковке уже нет )
@@pepelsbey Сомневаюсь, что новые реализации от Open UI полностью дадут прежний функционал
@@pepelsbey вопрос же не в руках горе-инженеров, а как принципиально должна решаться проблема поддержки от самих производителей браузеров. API сохраняют, добавив атрибут.
Штука очень классная, жду. Но т.к. часто делаю для аудитории, которые ещё и IE пользуют (всякие организации с традициями), то ждать ещё норм так)
как всегда очень интересно, спасибо
Время открывать шампанское😄
Очень крутые ролики, полезная информация, приятная подача, ты не зря стараешься) крутой чел
наконец-то, пропажа нашлась) как добрался до Берлина ?)
Хорошая новость, эх, быстрее бы все это заработало. Два года как-то многовато... Поздравляю с переездом! Аккуратнее на велике)
Есть надежда забыть про плагины для селекта))Т. н. велосипеды всегда намного больше нравились, чем стилизация того же select2)
Подскажите почему в скрипте написано [...mapAreas] а не просто mapAreas, ведь и так и так это просто массив нод
Результат querySelector - это не Array, а NodeList, не все методы массивов по нему могут итерировать developer.mozilla.org/en-US/docs/Web/API/NodeList
А что на счёт автоматического определения положения и выпадения вверх\вниз или за пределы браузера?
Есть такая фича у , браузеры смогут делать это за вас
2022 год, мы радуемся, что примерно в 2024 году появится нативная стилизация тега select )))
мои слёзы, моя печаль
Здравствуйте. Хочу стать фронтендером. Что можете сказать про книгу "Изучаем HTML CSS" Эрика Фримена. Насколько она актуальна в 22 году?
Эта книга очень устарела, будьте осторожнее с ней. Шесть лет (или даже больше) это очень большой срок во фронтенде. Лучше брать книги изданные хотя бы год-два назад. Например debuggingcss.com/
@@pepelsbey спасибо.
elbow-color: red;
Велотравма, заживает )
@@pepelsbey скорейшего заживления ) спасибо за работу )