По картинкам не упомянули метод создания спрайтов, хотя это довольно редкий вариант. И банальное сжатие картинки. Ещё сюда можно косвенно отнести кеширование, хотя оно уже не к вёрстке относится.
Переход к webp-формату отчасти можно отнести к сжатию картинок. Иначе какой смысл использовать данный формат. Но если рассматривать чисто jpg/png, тогда да, сжатие тоже поможет.
По label, я бы всё-таки склонялся, что это несовершенство самого HTML5 вкупе с ленью верстальщиков. Видимо, предполагается, что лейбел нужен только для текстового описания поля, что, конечно, правильно, и очень удобно с точки зрения семантики. Но дефолтная возможность «перенаправления» клика с лейбла на инпут слишком уж подкупает. Не писать же ради этого каждый раз скрипт, когда зона клика является сложным задизайненым элементом.
Возможно в будущем мы увидим доработку label и в него можно будет вставлять блочные теги (как с тегом "а". Он же тоже инлайновый, но валидатор не ругается, если вставить в него блочные теги).
По поводу 5 вопроса: действительно, в спецификации какое-то время было указано, что можно использовать только h1 и в зависимости от секционных элементов будет построена иерархия. Однако этот алгоритм не реализовал ни один браузер, поисковые роботы по-прежнему ориентируются на уровни заголовков, а упоминания этой возможности уже удалили из спецификации. Таким образом всё ещё нужно использовать заголовки h1-h6 и соблюдать правильную иерархию. По 6 вопросу: хедеров и футеров может быть сколько угодно, но есть нюансы. Хотя валидатор и не ругается на приведённый пример, но с точки зрения доступности это не правильно. Если header/footer не являются дочерними для section, article, aside или nav, то они будут создавать ориентиры banner и complimentary. Элемент main не является секционным, поэтому в примере два header и два footer относятся к body. Если переместить их в article, то всё будет корректно. 14й вопрос: я бы добавил ещё 4й способ оптимизации - уменьшение веса стандартных форматов jpeg/png за счёт ресайза, компрессии, уменьшения палитры и тд.
Хорошие уроки у вас, где-то что вспоминаю, где-то что-то новое узнаю. Я уже верстаю давно, но до сих пор для меня новый формат загрузки иконок svg напрягает. Я думаю про svg можно даже одно полноценное видео записать. Так как есть куча способов их загружать и у каждого свои минусы есть. Так же в одном проекте через админку грузят заказчики svg при создании раздела нового например и он грузится через , но при такой загрузке нет возможности управлять цветом картинки и она ничем не отличается от png получается и приходится делать скрипт, который преобразует вывод в вывод . В общем много всякого связано с ними, что меня аж бесит). Ещё вариант icomoon например тоже вымогучий в том плане, что ты уже сдал проект, а тебе говорят вот тут ещё одна страничка, а на ней новые svg иконки и опять нужно генерировать icomoon либо подключать второй icomoon называя его icomoon2, что уже является неправильным. Может я ещё что-то не знаю про svg и вы смогли бы в этом видео открыть для меня идеальный способ загрузки svg иконок, которым можно было пользоваться и не заморачиваться).
Насчет проекта с админкой есть 1 предложение по решению вашей проблемы - использовать CSS-свойство "filter". Оно вам поможет если иконки действительно в итоге становятся png-форматом и не имеют фона. Знакомы с этим свойством?
@@Yuri_Simonov Знаком с filter, но что же у него может поменять цвет изображения? Я только использовал его, когда нужно было по наведению например сделать однотонным или затемнить, или наоборот осветлить, но именно поменять цвет через filter вроде нельзя.
@@Eugene-Lee33 Да, вы правы. Но можно изменить цветовой оттенок, с помощью "filter: hue-rotate();" Правда тут 2 сценария могут быть: 1) Если svg-иконка изначально черная/серая/белая, то ее надо покрасить в любой из цветов (green/red/blue/yellow), чтобы была возможность изменять цвет, т.к. свойство "filter" и с png-форматом работает (покрасить можно в том же фотошопе. Да, геморрой, но всё же). 2) Если иконка изначально цветная, а нужно ее сделать черной/серой/белой, то "filter" опять же это может сделать. Понимаете к чему я клоню?
@@Yuri_Simonov Действительно с цветными объектами можно работать при помощи hue-rotate, правда нужный цвет сложно поймать)). Надо будет попрактиковаться или поискать как с помощью hue-rotate поймать нужный цвет. А в чёрный или белый я уже делал при помощи brightness или grayscale.
![[UA] Eternal Fire проти NAVI | EPL Season 20 Malta](http://i.ytimg.com/vi/chvlsDygrZM/mqdefault.jpg)
Спасибо большое за такие видео. Очень помогают при подготовке к собеседованию. Узнаёшь свои слабые стороны.
Круто! Продолжайте пожалуйста.
Юрий, отличный контент, спасибо!
Вам спасибо за обратную связь! :)
Очень полезно! Спасибо!
хорошая подборочка, продолжай пилить в том же духе!!!!
Можно такую же серию видео но об JavaScript? Вас приятно слушать
Не ожидал такой похвалы)
Насчет серии по JS есть мысли сделать такого рода видео
Мне кажется много здесь тупо не понадобиться
❤❤❤❤❤
По картинкам не упомянули метод создания спрайтов, хотя это довольно редкий вариант. И банальное сжатие картинки.
Ещё сюда можно косвенно отнести кеширование, хотя оно уже не к вёрстке относится.
Переход к webp-формату отчасти можно отнести к сжатию картинок. Иначе какой смысл использовать данный формат.
Но если рассматривать чисто jpg/png, тогда да, сжатие тоже поможет.
По label, я бы всё-таки склонялся, что это несовершенство самого HTML5 вкупе с ленью верстальщиков. Видимо, предполагается, что лейбел нужен только для текстового описания поля, что, конечно, правильно, и очень удобно с точки зрения семантики. Но дефолтная возможность «перенаправления» клика с лейбла на инпут слишком уж подкупает. Не писать же ради этого каждый раз скрипт, когда зона клика является сложным задизайненым элементом.
Возможно в будущем мы увидим доработку label и в него можно будет вставлять блочные теги (как с тегом "а". Он же тоже инлайновый, но валидатор не ругается, если вставить в него блочные теги).
Вроде бы нельзя, чтобы h1 был несколько раз на одной странице
Можете сами проверить, если не верите)
Отличный формат!!Продолжайте выпускать подобные видео)) Жду видео по js!
По поводу 5 вопроса: действительно, в спецификации какое-то время было указано, что можно использовать только h1 и в зависимости от секционных элементов будет построена иерархия. Однако этот алгоритм не реализовал ни один браузер, поисковые роботы по-прежнему ориентируются на уровни заголовков, а упоминания этой возможности уже удалили из спецификации. Таким образом всё ещё нужно использовать заголовки h1-h6 и соблюдать правильную иерархию.
По 6 вопросу: хедеров и футеров может быть сколько угодно, но есть нюансы. Хотя валидатор и не ругается на приведённый пример, но с точки зрения доступности это не правильно. Если header/footer не являются дочерними для section, article, aside или nav, то они будут создавать ориентиры banner и complimentary. Элемент main не является секционным, поэтому в примере два header и два footer относятся к body. Если переместить их в article, то всё будет корректно.
14й вопрос: я бы добавил ещё 4й способ оптимизации - уменьшение веса стандартных форматов jpeg/png за счёт ресайза, компрессии, уменьшения палитры и тд.
Спасибо за такой развернутый ответ! Возможно так и есть
Хорошие уроки у вас, где-то что вспоминаю, где-то что-то новое узнаю.
Я уже верстаю давно, но до сих пор для меня новый формат загрузки иконок svg напрягает. Я думаю про svg можно даже одно полноценное видео записать. Так как есть куча способов их загружать и у каждого свои минусы есть. Так же в одном проекте через админку грузят заказчики svg при создании раздела нового например и он грузится через , но при такой загрузке нет возможности управлять цветом картинки и она ничем не отличается от png получается и приходится делать скрипт, который преобразует вывод в вывод . В общем много всякого связано с ними, что меня аж бесит). Ещё вариант icomoon например тоже вымогучий в том плане, что ты уже сдал проект, а тебе говорят вот тут ещё одна страничка, а на ней новые svg иконки и опять нужно генерировать icomoon либо подключать второй icomoon называя его icomoon2, что уже является неправильным.
Может я ещё что-то не знаю про svg и вы смогли бы в этом видео открыть для меня идеальный способ загрузки svg иконок, которым можно было пользоваться и не заморачиваться).
Насчет проекта с админкой есть 1 предложение по решению вашей проблемы - использовать CSS-свойство "filter".
Оно вам поможет если иконки действительно в итоге становятся png-форматом и не имеют фона. Знакомы с этим свойством?
@@Yuri_Simonov Знаком с filter, но что же у него может поменять цвет изображения? Я только использовал его, когда нужно было по наведению например сделать однотонным или затемнить, или наоборот осветлить, но именно поменять цвет через filter вроде нельзя.
@@Eugene-Lee33 Да, вы правы. Но можно изменить цветовой оттенок, с помощью "filter: hue-rotate();"
Правда тут 2 сценария могут быть:
1) Если svg-иконка изначально черная/серая/белая, то ее надо покрасить в любой из цветов (green/red/blue/yellow), чтобы была возможность изменять цвет, т.к. свойство "filter" и с png-форматом работает (покрасить можно в том же фотошопе. Да, геморрой, но всё же).
2) Если иконка изначально цветная, а нужно ее сделать черной/серой/белой, то "filter" опять же это может сделать.
Понимаете к чему я клоню?
@@Yuri_Simonov Действительно с цветными объектами можно работать при помощи hue-rotate, правда нужный цвет сложно поймать)). Надо будет попрактиковаться или поискать как с помощью hue-rotate поймать нужный цвет.
А в чёрный или белый я уже делал при помощи brightness или grayscale.