Очень хороший канал, то, что меня интересовало я нахожу у вас)) Не могли бы вы затронуть тему единиц измерения? Как лучше верстать, px или rem либо em ? очень интересна эта тема, хотелось бы разобраться как лучше, спасибо за ваш труд!
В этой статье Алена Батицкая хорошо показывает работу с единицами измерения medium.com/@ABatickaya/%D0%BC%D0%B0%D1%81%D1%82%D0%B5%D1%80-%D0%BA%D0%BB%D0%B0%D1%81%D1%81-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%B5%D0%BC-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9-%D0%B1%D0%B0%D0%BD%D0%BD%D0%B5%D1%80-3eea3a642934
На интенсиве HTML и CSS, уровень 2 в материалах была ссылка на статью: medium.com/devschacht/david-gilbertson-rems-and-ems-and-why-you-probably-dont-need-them-3b2b1e785787 Да и Першин говорил, что rem и em неудобны.
Это прекрасно, Вадим. Я недавно устроился на новую работу, и одновременно со мной туда устроился другой человек. Мы сегодня с ним шутили про то, что каждому фронтендеру нужно на стол вашу фотографию поставить, чтобы стыдно было плохо верстать :)
Отличная реализация, нужно будет запомнить:) Я как-то мучился с закрашиванием звездочек, пришлось с помощью row-reverse переворачивать рейтинг и закрашивать впереди стоящие звездочки, ну а визуально все было в норме:) А тут все гениально и просто!:)
Вот за такие моменты я обожаю css. Вадим, спасибо за урок, очень информативно, доступно и по крайней мере меня, воодушевляет на то чтобы и самому что нибудь такое накодить.
Все супер, спасибо. Хочется увидеть в примеров небольшие анимации с transition, box-shadow и т.д. А вообще хочу предложить, как сделать правильно слайдер / карусель, со свапойм (swape)
Подсматриваю у Вас периодически верстку, очень интересно и местами открываю для себя что то новое. Спасибо за труды! Знаю, что Вы фанат *хоткеев* в VS Code есть очень удобная команда когда нужно обернуть кусок верстки в контейнер, выделяем нужную часть верстки, идём CMD+Shift+P и начинаем писать "Wrap with abbreviation". Можно ввести любую валидную для Еммета команду и он обернёт вашу верстку, так же есть такая же комманда только она обернёт каждую строку отдельно, очень удобно как раз для случая с инпутами, когда каждый инпут нужно обернуть в лейбл с классом, просто выбрали всё, ввели команду и всё готово, любуемся результатом.
Спасибо, Вадим! Благодаря твоим роликам получилось не облажаться на работе )) Очень доходчиво. Хотя задача не эта, а больше про прошлое видео с чекбоксами, но тем не менее! Грац!
Вадим, большое спасибо Вам! Не помню говорилось ли в видео, но для Safari на iOS 14 в современном методе нужно у чекбоксов убрать border, background-color и border-radius.
Ух, а я то думаю, откуда у юзеров iOS появились эти круги и овалы. Спасибо Вам за то, что упомянули! Первым делом полез в видео, откуда заимствовал способ и в комментарии :)
Вадим, большое спасибо! Вы очень доходчиво и обосновано подаете материал. А еще, прошу вас сделать видео о том как правильно подгружать на страницу внешнее шрифты. Все копья обломал об эту задачу. Вроде бы полный интернет статей, как правильно делать, а все равно много неоднозначностей.
Хотелось написать какой-то глупый комментарий по поводу канвасов на всю страницу, поразмышлять на эту тему или про 25-й кадр мигающий в видео, но что-то не задалось. Мне нравятся твои ролики и я постоянный зритель и тут и на конференциях, но никогда ничего не писал, вот думаю исправить это ) Конечно же лайк, видос классный
Это Ютуб дурит и мелькает обложкой, в самом видео всё в порядке. Попробуйте перезагрузить страницу или выбрать другое качество. И держите себя в руках, не пишите про Canvas ;)
@@pepelsbey кстати Павел Дуров вчера запустил конкурс на создание графиков и ясное дело, что чтобы сделать в точности по заданию нужно делать их на канвасе, но интересно было бы посмотреть что можешь показать на эту тему хотя бы через html+svg+css. Я вчера попробовал в первую очередь так сделать, но вышло как-то довольно статично и скучно. В частности есть проблемы с выделением конкретного столбца при наведении
Спасибо за отличное руководство по созданию рейтинга! Все отлично, но возник один вопрос - как проверить заполненность рейтинга через jquery? if($('input[name="star"]').prop('checked', false)) {} не видит checked...
@@pepelsbey Интересует все - и пользовательские и технические возможности). Сравнение движков, поддержка стандартов, безопасность, быстродействие, потребление памяти, инструменты разработчика, интерфейс, возможности кастомизации и все прочее, что считаете важным в браузере. В общем ваш взгляд Firefox или Chrome)
Все понравилось, Вадим, супер, немного нового почерпнул для себя, Отлично объясняете. Единственное, не понравилось использование nth:type с .классом. Спецификация предполагает использование этого пвседо-селектора для тегов, она то работает но несколько не так как ожидается и задумывалось
@@pepelsbey псевдо класс nth-of-type хоть и работает с классами, все же задумывался для работы с тегами, например на страницах спецификаций w3c вы не найдете в примерах его использование с классами. Когда пишете .класс:нф-оф-тайп css будет взаимодействовать с тегом с классом .класс, на самом деле. А отсюда можно попасть в самые разные неожиданные ситуации, поэтому правильно использовать этот псевдо класс надо с тегами
Я не вижу ничего криминального в том, чтобы использовать удобный селектор в демке. У меня были причины на это (лейблы в одном из примеров) и было желание использовать БЭМ, без тегов в селекторе. Учитывая, что .rating__star в этом компоненте это всегда , то я не вижу проблемы. Да, это может вызвать у тех, кто не знает, что type про тег, а не класс - в этом я согласен. Но это не повод писать .rating__star.input:nth-of-type(n).
@@pepelsbey все так, не повод писать, но лично я наступил на эти грабли когда потратил время в поисках ответа почему не работают у меня селекторы классов с nth-of-type, на то время я не знал как с ними правильно работать. И очень не хотелось бы чтобы и другие разработчики повторяли мои ошибки, а сразу знали верный путь
Огромное спасибо за Ваш труд! Очень вдохновляет писать хороший код! А что по поводу aria-checked ? Ну то есть, если реализация с javascript, то полезно ли будет добавить такой атрибут?
Вадим, а как вы относитесь к медиа запросам для "вонючки ишачка 11", наподобие этого: _:-ms-fullscreen, :root .ie11up { property: value; } ? Мне кажется, что с помощью них можно было бы решить некоторые проблемы в данной ситуации. Или с ними есть какие-то подводные камни?
Прежде всего, я плохо отношусь к взгляду «вонючка-ишачок». Люди не видят других людей за кодом и браузерами. Проявите эмпатию, сделайте хороший кроссбраузерный интерфейс. От лишнего лейбла и понятного кода (в отличие от хаков) вы не переломитесь, а людям станет удобнее.
Вадим, было бы интересно послушать о правильной верстке повторяющихся блоков. Например когда на десктопе форма находится в модальном окне, а в мобильной версии нужно запихнуть её в блок внутри страницы
Добрый вечер! Подскажите, а есть у вас код html для того что бы на страницы сайта вести наименования, например города в столбик вел, человек заходит с какого города нажимает на него, и у меня идет подсчет, и я веду статискику
На чистом HTML так сделать не получится, вам нужно отправлять запрос на сервер и уже записывать там. Это может быть форма (нажатие на кнопку её отправляет) или JS-код, который отправляет запрос.
Видео - супер. Побольше бы таких. Вопрос только один, почему осталось без внимания мигание фокусной рамки при кликах? Причем иногда после клика рамка уже не появляется снова.
Вадим, в VS Code ты можешь вставить новую строчку снизу с помощью ⌘ + Enter, и ⌘ + ⇧ + Enter сверху соответвенно. Это гораздо быстрее, чем идти в конец строки и нажимать Enter :) И как обычно спасибо за видео 👍
Вадик как всегда крут! Нельзя веб-евангелистом называют) Несешь слово веб-божие в народ! ))) Я все своим ученикам тебя советую) Насчет скринридера было бы интересно посмотреть его в действии.
Вадим, все ваши видео просто супер, и с разборами, и вот с такими мини-гайдами по некоторым элементам, после которых отпадают все вопросы. Не могли бы вы сделать как-нибудь такой же ультимейт-гайд по созданию адаптивного выпадающего меню (то есть полный навбар на десктопе и выпадающее меню с бургер-иконкой на мобильных экранах)?
В целом, нормально - элемент подходящий для вывода. Главное, чтобы разработчики правильно поняли: для ввода и вывода рейтинга стоит использовать разные элементы. Возможно, это хороший повод для продолжения видео :)
@@pepelsbey В принципе, это может быть один компонент. Подложка meter и невидимые радио сверху. Но да, это не оптимально с точки зрения функционала и наполнения DOM. Лучше 2 разных, наверное.
Огромное спасибо за ваш труд! У меня вопрос. В связи с появлением ночной темы на последней макоси (да и не только в ней) намечается тенденция "перехода в ночную тему"). Ну т.е. некоторые сайты стали поддерживать данный режим и переходят в него автоматически, когда он включен на макоси. Как вам такая тенденция? Интересно ваше мнение.
Хорошая тенденция, но не очень однозначная - нужно уважать выбор пользователей, позволять включать и выключать. То есть нам ещё нужно проработать всю эту историю.
Здраствуйте, Вадим. Как правильно минимизировать контент? Какие подходы минификации для CSS и JS эффективнее использовать? Что такое GZip и как с ним работать? Как правильно составлять critical.css? Спасибо!
Здравствуйте, Вадим. Спасибо за ваш труд. В 163 выпуске веб-стандартов расказывали о кодировании видео. Посвятите этому выпуск у вас тут на канале. От и до на каком-то примере, как делаете это Вы. Спасибо ещё раз.
Решение с input хорошо тем, что если не поддерживается JavaScript, то можно просто отправлять форму на выделенный URL и там учитывать голос. При рабочем JS - event.preventDefault() при отправке формы.
Вадим, спасибо за видео. Вопрос. Как быть с "clip"? MDN не рекомендует его использовать. developer.mozilla.org/en-US/docs/Web/CSS/clip (возможно вопрос для следующего live)
Не рекомендуют, но он работает во всех браузерах и пока поддержка альтернативы clip-path: inset(100%) не будет достаточно хорошей, придётся использовать нерекомендованное, но работающее.
@@pepelsbey хотя я тут подумал, что clip будет поддерживаться всеми браузерами минимум до текущей версии. А для новых выручит appearance. Так что имеет смысл добавить его в visual hidden для чекбокса.
А теперь вопрос, что если нужно показать состояние с половинкой? 3.5 например) Без js уже никак? Спасибо огромное за урок! PS Приходилось как-то делать звездочки, сверстал в обратном порядке, в CSS поменял порядок на место и через селектор "+" менял цвет у начальных звездочек. Сейчас только понимаю что никакой речи об отзывчивости там не было)
Половинные рейтинги для ввода - это, прежде всего, плохой интерфейс. Так что я бы начал их вёрстку с того, что поспорил с дизайнером. Ещё важно не путать ввод с выводом - это принципиально разные интерфейсы. Но если это ввод полуторных значений, то вам просто нужно больше радиокнопок, а принцип такой же.
Да, хотел сделать, но были технические сложности - не мог заставить скринридер адекватно читать кириллицу. Решил отложить до следующего раза, ещё обязательно покажу.
Отличный рейтинг вышел, но думаю возможна проблема, когда часть заднего фона(серые звездочки) будет видна на границах переднего, из-за сглаживания. С точки зрения доступности, как всегда - на высоте
@@pepelsbey я вас не тороплю и уж тем более не настаиваю, было бы интересное видео я думаю, по теме рейтинга как на гугл плей, если вам не сложно, сделайте а?))) Пожалуйста.
![[LIVE] : ONE ลุมพินี 85 | คู่เอก "ยอดเหล็กเพชร vs ผึ้งหลวง"](http://i.ytimg.com/vi/Qq_19bnnxEo/mqdefault.jpg)
00:01:11 Простая разметка
00:06:17 Доступность контролов
00:08:04 Основные стили
00:12:30 Начало рейтинга
00:20:30 Первая интерактивность
00:24:38 Добавление фокуса
00:27:28 Фокус для Edge
00:30:06 Совместимая версия
00:37:19 Фикс фона для IE11
00:41:21 Выводы
thank you
У ВАС офигительно получается - на данный момент Вы - лучший преподаватель !
Класс. Редко так бывает, чтобы специалист так доступно делился знаниями, которые обычно накапливаются лишь с многолетним опытом. Спасибо Вам.
Очень хороший канал, то, что меня интересовало я нахожу у вас)) Не могли бы вы затронуть тему единиц измерения? Как лучше верстать, px или rem либо em ? очень интересна эта тема, хотелось бы разобраться как лучше, спасибо за ваш труд!
В этой статье Алена Батицкая хорошо показывает работу с единицами измерения medium.com/@ABatickaya/%D0%BC%D0%B0%D1%81%D1%82%D0%B5%D1%80-%D0%BA%D0%BB%D0%B0%D1%81%D1%81-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D0%B5%D0%BC-%D0%B8%D0%BD%D1%82%D0%B5%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9-%D0%B1%D0%B0%D0%BD%D0%BD%D0%B5%D1%80-3eea3a642934
Полностью поддерживаю данный комментариц, пожалуйста расскажите про единицы измерения!
На интенсиве HTML и CSS, уровень 2 в материалах была ссылка на статью:
medium.com/devschacht/david-gilbertson-rems-and-ems-and-why-you-probably-dont-need-them-3b2b1e785787
Да и Першин говорил, что rem и em неудобны.
@@semenovstyle *выраженная в текстовом формате благодарность*
- font-size = rem
- padding and margin = em
- width = em or %
- responsive images = max-width
Это прекрасно, Вадим. Я недавно устроился на новую работу, и одновременно со мной туда устроился другой человек. Мы сегодня с ним шутили про то, что каждому фронтендеру нужно на стол вашу фотографию поставить, чтобы стыдно было плохо верстать :)
все по полочкам разложил! такое внимание к деталям достойно уважения!
Лайк если орёшь над ID'шником видоса в адресной строке
Я спустя 2 года после выпуска ролика здесь. Мега полезно и разжёвано для совсем новичков. Благодарю! Лайк и подписка!
Очень круто, что ты занялся собственным каналом! А то вроде и опыт есть (у народа), но всегда интересно узнать как те же задачи делают коллеги.
Я удивлен что такой контент просматривает так мало людей. Спасибо, Вадим) Нужно репостить!
я нашел это видео только после того как сделал рейтинг... через поиск это видео не выходит.
Очень доходчиво - просто фантастика ...обалдеть, вот это настоящий ментор
Отличная реализация, нужно будет запомнить:)
Я как-то мучился с закрашиванием звездочек, пришлось с помощью row-reverse переворачивать рейтинг и закрашивать впереди стоящие звездочки, ну а визуально все было в норме:) А тут все гениально и просто!:)
Спасибо! Афигенный урок!
Спасибо огромное, Вадим!
Очень полезное и применимое видео. :)
очень интересно было бы взглянуть видео от вас о стилизации тега
Вот за такие моменты я обожаю css.
Вадим, спасибо за урок, очень информативно, доступно и по крайней мере меня, воодушевляет на то чтобы и самому что нибудь такое накодить.
Спасибо, что доступно рассказали про эти звёздочки и особенно за то, что затронули тему кроссбраузерности :)
43 минуты кайфа, спасибо Вадим!
Все супер, спасибо.
Хочется увидеть в примеров небольшие анимации с transition, box-shadow и т.д.
А вообще хочу предложить, как сделать правильно слайдер / карусель, со свапойм (swape)
Подсматриваю у Вас периодически верстку, очень интересно и местами открываю для себя что то новое. Спасибо за труды! Знаю, что Вы фанат *хоткеев* в VS Code есть очень удобная команда когда нужно обернуть кусок верстки в контейнер, выделяем нужную часть верстки, идём CMD+Shift+P и начинаем писать "Wrap with abbreviation". Можно ввести любую валидную для Еммета команду и он обернёт вашу верстку, так же есть такая же комманда только она обернёт каждую строку отдельно, очень удобно как раз для случая с инпутами, когда каждый инпут нужно обернуть в лейбл с классом, просто выбрали всё, ввели команду и всё готово, любуемся результатом.
Вадим, максимально годный контент. Огромное спасибище!
Понравилось. Столько магии не было в предыдущих сериях. :)
Полезно, круто и интересно!
Спасибо!
Огромное спасибо! Вадим продолжайте свои видеоуроки.
Спасибо, Вадим! Благодаря твоим роликам получилось не облажаться на работе )) Очень доходчиво. Хотя задача не эта, а больше про прошлое видео с чекбоксами, но тем не менее! Грац!
Фантастика! Отличный урок. Спасибо вам!
Вадим, вот от души, спасибо огромнейшее за то, что ты делаешь (емоджи сердечка три раза ))
Потрясающе!
Огромное терпение :) Что бы не удалить ie11. То чувство когда обязан победить🔥
Супер, много интересных нюансов. А я писал компонент с кучей условий на js, хотя можно было без него обойтись, спасибо!
Хм. одна маленькая задачка -> подумать куда ноги растут -> и буквально пара строк кода для решения =). Вадим, ты очень здраво мыслишь!
Очень годный контент, спасибо вам большое за ваш труд!
Вадим, спасибо!
Расскажи, когда использовать em, rem, а когда px.
Спасибо большое, недавно стояла аналогичная задача. Очень полезно!))))
Это был очень полезный урок, столько пишу на js...но эти рейтинги вечно доставили, приходилось юзать реактовские либы. А так то, красота теперь))
Как всегда просто бомба! Спасибо большое, Вадим!
37:20 - господи, это сделало мой день :D
IE, конечно, жесток и беспощаден)))) Даже не знаю, что круче - новогодняя гирлянда или комментарии Вадима))))
Как же я проорал с "Ой йо йо ой"
Вадим, большое спасибо Вам!
Не помню говорилось ли в видео, но для Safari на iOS 14 в современном методе нужно у чекбоксов убрать border, background-color и border-radius.
Да, решения иногда стареют и безусловно нужно всё тестировать. Может появится повод его обновить :)
Ух, а я то думаю, откуда у юзеров iOS появились эти круги и овалы. Спасибо Вам за то, что упомянули! Первым делом полез в видео, откуда заимствовал способ и в комментарии :)
Круто у автора талант доносить инфу так чтобы ты не замечал время)
Как всегда, безумно интересно!
Ставлю ⭐️⭐️⭐️⭐️⭐️ за видео. Спасибо!
Вадим, большое спасибо! Вы очень доходчиво и обосновано подаете материал. А еще, прошу вас сделать видео о том как правильно подгружать на страницу внешнее шрифты. Все копья обломал об эту задачу. Вроде бы полный интернет статей, как правильно делать, а все равно много неоднозначностей.
Да, хорошая идея. Надо будет рассказать :)
Хотелось написать какой-то глупый комментарий по поводу канвасов на всю страницу, поразмышлять на эту тему или про 25-й кадр мигающий в видео, но что-то не задалось.
Мне нравятся твои ролики и я постоянный зритель и тут и на конференциях, но никогда ничего не писал, вот думаю исправить это ) Конечно же лайк, видос классный
Это Ютуб дурит и мелькает обложкой, в самом видео всё в порядке. Попробуйте перезагрузить страницу или выбрать другое качество. И держите себя в руках, не пишите про Canvas ;)
@@pepelsbey кстати Павел Дуров вчера запустил конкурс на создание графиков и ясное дело, что чтобы сделать в точности по заданию нужно делать их на канвасе, но интересно было бы посмотреть что можешь показать на эту тему хотя бы через html+svg+css. Я вчера попробовал в первую очередь так сделать, но вышло как-то довольно статично и скучно. В частности есть проблемы с выделением конкретного столбца при наведении
Вот вам на тему от Леони Уотсон: tink.uk/accessible-svg-line-graphs/
Спасибо, как всегда очень практические вещи, хотелось бы ещё подобных уроков на js (типа тоже из реальной жизни задачи)
Как всегда лайк!!Спасибо за урок а особенно за 49 строчку в коде =)Узнал что то очень крутое))
Спасибо большое за видео, Вадим, очень полезное!
Спасибо большое, все как всегда на высоте!
Опа, интересная тема подъехала) Спасибо)
Как всегда на высоте.
просто супер, спасибо)
Вадим, большое спасибо за ваш труд! Подскажите, пожалуйста, focus в этой демке в последнем safari у Вас работает?
Посмотрите недавнее видео про фокус, там объясняю как работает фокус в Safari th-cam.com/video/EHg7DeciuW8/w-d-xo.html
@@pepelsbey спасибо, обязательно посмотрю!
Отлично, спасибо! Вы иногда 25-м кадром проскакиваете))
Это Ютуб глючит и кажется показывает обложку - в самом видеофайле ничего такого нет. Попробуйте перезагрузить или качество поменять.
Дякую за чудове відео і матеріал!
Вот спасибо! Классно получилось!
думаю вы гений
Спасибо, Вадим!
Спасибо огромное, выручил)
Ого, Мориарти учит вёрстке)
Отличное видео! У меня вопрос , почему в качестве значений (width, height, margin) Вы используете 'em' ?
А вы откройте демку и поменяйте font-size для корневого компонента .rating - сразу поймёте :)
Спасибо за отличное руководство по созданию рейтинга! Все отлично, но возник один вопрос - как проверить заполненность рейтинга через jquery?
if($('input[name="star"]').prop('checked', false)) {} не видит checked...
Вам jQuery собирает коллекцию из name=star, это ведь радиокнопки, их несколько с таким именем. Уточните, какую проверяете - и получите значение.
Хорошо объясняешь!
Хороший канал. Вадим, хотелось бы увидеть от вас обзор, сравнение браузеров
Браузеры - это слишком большая тема. Вряд ли вас интересуют их пользовательские возможности. Что именно в техническом плане было бы интересно?
@@pepelsbey Интересует все - и пользовательские и технические возможности). Сравнение движков, поддержка стандартов, безопасность, быстродействие, потребление памяти, инструменты разработчика, интерфейс, возможности кастомизации и все прочее, что считаете важным в браузере. В общем ваш взгляд Firefox или Chrome)
Вот вроде такая нудятина, но то как вы это преподносите заслуживает уважения. Преподователь экстра класса.
спасибо Вадим за видео оч круто!
"Я здесь дизайнер, да?" - сделало мой день! :D
... сказал верстальщик и наверстал угловатую рамку. =))
Все понравилось, Вадим, супер, немного нового почерпнул для себя, Отлично объясняете. Единственное, не понравилось использование nth:type с .классом. Спецификация предполагает использование этого пвседо-селектора для тегов, она то работает но несколько не так как ожидается и задумывалось
А что не так с nth-of-type для тегов? Уточните, пожалуйста.
@@pepelsbey псевдо класс nth-of-type хоть и работает с классами, все же задумывался для работы с тегами, например на страницах спецификаций w3c вы не найдете в примерах его использование с классами. Когда пишете .класс:нф-оф-тайп css будет взаимодействовать с тегом с классом .класс, на самом деле. А отсюда можно попасть в самые разные неожиданные ситуации, поэтому правильно использовать этот псевдо класс надо с тегами
Я не вижу ничего криминального в том, чтобы использовать удобный селектор в демке. У меня были причины на это (лейблы в одном из примеров) и было желание использовать БЭМ, без тегов в селекторе. Учитывая, что .rating__star в этом компоненте это всегда , то я не вижу проблемы. Да, это может вызвать у тех, кто не знает, что type про тег, а не класс - в этом я согласен. Но это не повод писать .rating__star.input:nth-of-type(n).
@@pepelsbey все так, не повод писать, но лично я наступил на эти грабли когда потратил время в поисках ответа почему не работают у меня селекторы классов с nth-of-type, на то время я не знал как с ними правильно работать. И очень не хотелось бы чтобы и другие разработчики повторяли мои ошибки, а сразу знали верный путь
Огромное спасибо за Ваш труд! Очень вдохновляет писать хороший код! А что по поводу aria-checked ? Ну то есть, если реализация с javascript, то полезно ли будет добавить такой атрибут?
Если вы имитируете чекбоксы дивами или чем ещё, то да, повторить метафору с помощью aria-атрибутов было бы полезно. Но зачем на дивах?
@@pepelsbey спасибо, я почему-то думал, что ридеры не замечают дефолтный checked без aria-checked. Попробовал с ChromeVox всё ок. Вопрос снимается))
Вадим, а как вы относитесь к медиа запросам для "вонючки ишачка 11", наподобие этого: _:-ms-fullscreen, :root .ie11up { property: value; } ? Мне кажется, что с помощью них можно было бы решить некоторые проблемы в данной ситуации. Или с ними есть какие-то подводные камни?
Прежде всего, я плохо отношусь к взгляду «вонючка-ишачок». Люди не видят других людей за кодом и браузерами. Проявите эмпатию, сделайте хороший кроссбраузерный интерфейс. От лишнего лейбла и понятного кода (в отличие от хаков) вы не переломитесь, а людям станет удобнее.
Вадим, спасибо!
Вадим, было бы интересно послушать о правильной верстке повторяющихся блоков. Например когда на десктопе форма находится в модальном окне, а в мобильной версии нужно запихнуть её в блок внутри страницы
Спасибо, пригодилось!
Добрый вечер! Подскажите, а есть у вас код html для того что бы на страницы сайта вести наименования, например города в столбик вел, человек заходит с какого города нажимает на него, и у меня идет подсчет, и я веду статискику
На чистом HTML так сделать не получится, вам нужно отправлять запрос на сервер и уже записывать там. Это может быть форма (нажатие на кнопку её отправляет) или JS-код, который отправляет запрос.
Видео - супер. Побольше бы таких. Вопрос только один, почему осталось без внимания мигание фокусной рамки при кликах? Причем иногда после клика рамка уже не появляется снова.
Я не очень понял, что вы имеете в виду. Сформулируйте, что не так и что, по вашему мнению, должно происходить.
drive.google.com/open?id=1ZN8pEkTb_6cQcn0n9zdvZiYud5csfu6a
Спасибо за видео, попробую разобраться.
Вадим, в VS Code ты можешь вставить новую строчку снизу с помощью ⌘ + Enter, и ⌘ + ⇧ + Enter сверху соответвенно. Это гораздо быстрее, чем идти в конец строки и нажимать Enter :)
И как обычно спасибо за видео 👍
Я ещё новичок в VS Code, так что воюю с ним немного, думаю это видно :) Спасибо за совет!
Вадик как всегда крут! Нельзя веб-евангелистом называют) Несешь слово веб-божие в народ! ))) Я все своим ученикам тебя советую) Насчет скринридера было бы интересно посмотреть его в действии.
Вадим, все ваши видео просто супер, и с разборами, и вот с такими мини-гайдами по некоторым элементам, после которых отпадают все вопросы. Не могли бы вы сделать как-нибудь такой же ультимейт-гайд по созданию адаптивного выпадающего меню (то есть полный навбар на десктопе и выпадающее меню с бургер-иконкой на мобильных экранах)?
Да, есть такой план.
@@pepelsbey Прекрасные новости! Спасибо вам за ваш труд!)
Насколько же изощрен этот извращенец! Браво. Но я лучше на js сделаю)
Что ты думаешь об использовании для отображения состояния элемента meter?
В целом, нормально - элемент подходящий для вывода. Главное, чтобы разработчики правильно поняли: для ввода и вывода рейтинга стоит использовать разные элементы. Возможно, это хороший повод для продолжения видео :)
@@pepelsbey В принципе, это может быть один компонент. Подложка meter и невидимые радио сверху. Но да, это не оптимально с точки зрения функционала и наполнения DOM. Лучше 2 разных, наверное.
Спасибо! Все по делу, ничего лишнего)
Вадим, для тестов на IE и Edge используете виртуальную машину? (смутил адрес в браузерной строке на 00:28:05)
Да, это Parallels Desktop, где я открываю ссылку от сервера Browser Sync, который запущен локально на macOS.
Спасибо!
Огромное спасибо за ваш труд! У меня вопрос. В связи с появлением ночной темы на последней макоси (да и не только в ней) намечается тенденция "перехода в ночную тему"). Ну т.е. некоторые сайты стали поддерживать данный режим и переходят в него автоматически, когда он включен на макоси. Как вам такая тенденция? Интересно ваше мнение.
Хорошая тенденция, но не очень однозначная - нужно уважать выбор пользователей, позволять включать и выключать. То есть нам ещё нужно проработать всю эту историю.
Здраствуйте, Вадим.
Как правильно минимизировать контент?
Какие подходы минификации для CSS и JS эффективнее использовать?
Что такое GZip и как с ним работать?
Как правильно составлять critical.css?
Спасибо!
Здравствуйте, Вадим. Спасибо за ваш труд. В 163 выпуске веб-стандартов расказывали о кодировании видео. Посвятите этому выпуск у вас тут на канале. От и до на каком-то примере, как делаете это Вы. Спасибо ещё раз.
2:51 ......ARY !
Legendary !!!
1:00 здравый подход. Жду пока ты научишься перфоманс сравнивать и потребление памяти в хроме (для частых элементов нужно).
Огонь!
я пишу на джаве 7й год и благодаря таким урокам все больше думаю свалить на фронтенд, спасибо)
Элита верстки!
спасибо
Молодцы ли!
хорошее видео, спасибо
Следующим уроком заверни это всё в веб компонент :D
Решение с input хорошо тем, что если не поддерживается JavaScript, то можно просто отправлять форму на выделенный URL и там учитывать голос. При рабочем JS - event.preventDefault() при отправке формы.
Совершенно верно :) Есть хорошая статья об этом medium.com/p/7b2ad80f0340
Вадим, спасибо за видео.
Вопрос. Как быть с "clip"? MDN не рекомендует его использовать. developer.mozilla.org/en-US/docs/Web/CSS/clip (возможно вопрос для следующего live)
Не рекомендуют, но он работает во всех браузерах и пока поддержка альтернативы clip-path: inset(100%) не будет достаточно хорошей, придётся использовать нерекомендованное, но работающее.
@@pepelsbey хотя я тут подумал, что clip будет поддерживаться всеми браузерами минимум до текущей версии. А для новых выручит appearance. Так что имеет смысл добавить его в visual hidden для чекбокса.
Думаю clip: rect будет поддерживаться браузерами всегда, слишком уж много кода с ним было написано.
Однозначно лукас)))
А что это за версия Эджа, кстати?
Какой-то актуальный на весну 2019 года Edge, ещё на EdgeHTML, а не на Chromium
Пасиба)!
1. Поздоровалась с Вадимом...вслух)
2. Проверила, есть ли в описании ссылка на футболку
3. Лайкнула видео
4. Начала смотреть само видео
Здравствуйте, очень приятно.
А теперь вопрос, что если нужно показать состояние с половинкой? 3.5 например) Без js уже никак? Спасибо огромное за урок!
PS Приходилось как-то делать звездочки, сверстал в обратном порядке, в CSS поменял порядок на место и через селектор "+" менял цвет у начальных звездочек. Сейчас только понимаю что никакой речи об отзывчивости там не было)
Половинные рейтинги для ввода - это, прежде всего, плохой интерфейс. Так что я бы начал их вёрстку с того, что поспорил с дизайнером. Ещё важно не путать ввод с выводом - это принципиально разные интерфейсы. Но если это ввод полуторных значений, то вам просто нужно больше радиокнопок, а принцип такой же.
На будущее, наверное было бы еще лучше понятно про скринридеры если бы в видео присутствовала запись того, как голос читает эти элементы :)
Да, хотел сделать, но были технические сложности - не мог заставить скринридер адекватно читать кириллицу. Решил отложить до следующего раза, ещё обязательно покажу.
Отличный рейтинг вышел, но думаю возможна проблема, когда часть заднего фона(серые звездочки) будет видна на границах переднего, из-за сглаживания.
С точки зрения доступности, как всегда - на высоте
Да, есть такая проблема. Её можно решить чуть большими активными звёздами, но я решил не усложнять и без того длинное видео.
Здравствуйте, можете сделать рейтинг как на гугл плей, что бы сбоку общий рейтинг был в процентах?
Взять и сделать :) Это в двух словах в комментарии не объяснишь. И тут, скорее всего, понадобится JS.
@@pepelsbey я вас не тороплю и уж тем более не настаиваю, было бы интересное видео я думаю, по теме рейтинга как на гугл плей, если вам не сложно, сделайте а?))) Пожалуйста.