Вот ты не первый чьи видео я смотрю, но узнаю что-то новое, ты очень грамматно обьясняешь, как правильно делать и чтобы не просто работало, а именно грамматно было. От души 😊
Всегда ленился дописывать атрибут alt, после вашего объяснения теперь буду дописывать также длину и ширину картинки) Очень хорошо объясняете, без лишней воды, без "эмм..", "ммм.." 👍👍👍
Все прекрасно объясняешь, но я не знаю почему все читают хэйт. Хэйт (hate) по-английски - это ненавидеть, а хайт (height) - высота) все-таки новички тоже запоминают, а это неправильно)
На практике какой путь предпочтителней (абсолютный, или относительный) с учётом хостинга, возможного привлечения коллег в проет и размещения проекта в докер и прочее? Спасбо.
Смотря для чего. Для статических ресурсов (изображений, видео, аудио) - абсолютный. Но на этапе верстки с этим можно не заморачиваться. Если это обычное приложение (не SPA), то бэкенд-разработчик сам поменяет пути в src до нужных, синхронизирует с CMS, скажем так. А если разрабатывается SPA, то в src нам также готовая строчка-путь придет с бэка.
Вопрос возник, а если мы используем например грид с 2 одинаковыми колонками, где в одной картинка, в другой текст, как задавать значения ширины и высоты картинке если на разных разрешениях эти величины будут разными? Как в таком случае бороться с cumulative layout shift? Заранее спасибо!
Привет! 1. В атрибутах width и height всегда указываем значения размеров изображения из десктопной версии макета. 2. В качестве нормализации стилей обязательно прописываем для всех img свойства display: block и max-width: 100%. 3. Если ширина изображения должна подстраиваться под колонку грид-сетки, то задаем изображению width: 100% и не забываем height: auto для сохранения пропорций. Никакого сдвига не будет, ни по горизонтали (т. к. грид-сетка задается обычно с фиксированными "долями"), ни по вертикали. Затестил с троттлингом сети, никаких CLS не увидел: codepen.io/aleksander-lamkov/pen/PoxXzLV Возмоооожно, если бы был мегабайтный файл стилей, то проблема была бы видна, из-за задержки их применения на странице, но, имхо, CLS - это последнее, о чем стоит думать в такой ситуации :)
А вот такой вопрос: а что если изображение находится в начале, но оно скрыто, например это popup или открывающееся меню и так далее? На мой взгляд это тоже должно быть изображение с lazy loading, но тут тогда другая проблема, а вдруг пользователь, который предположем, частый посетитель этого сайта, сразу захочет открыть этот popup или меню с изображением, то как правильно?
Ну а в чем проблема? Если на таком изображении будет loading lazy, картинка начнет грузится в момент попадания элемента в область видимости. То есть, когда пользователь откроет попап с таким изображением, картинка начнет загружаться. Да, не мгновенно, но это нормально. Лучше так, чем загружать картинки всегда и сразу.
можете подсказать, я пишу в vs code alt как я понимаю у вас при вводе alt вышел автоматический выбор, у меня он не вышел и когда я сама дописываю alt="текст" то у меня в браузере высвечивается текст который я написала что в таком случае делать? надеюсь на быстрый ответ
Это не зависит от IDE. Если в браузере вместо картинки виден только alt, то нужно перепроверить путь к файлу изображения в атрибуте src. Если не получится решить, напиши сюда, тебе помогут: t.me/friendlyFrontendChat
@@AleksanderLamkov Извини что надоедаю, проще было бы наверное загуглить😅, но мнение знающего человека было бы полезнее. Вот теги b и srong, по сути делают одно и тоже, но про их суть ты рассказал, и там явно видно различие. А вот есть два пути, которые делают абсолютно одно и тоже, как я понял, просто в одном варианте дорожка длиннее, в другом короче. И если по сути они ничем больше не отличаются, не проще тогда использовать только один, который меньше перегружает код?
Такие вещи не перегружают код. Лишний символ в коде - это замедление скорости его обработки на 0.00000000000001% или же вовсе никакой разницы не будет. Код надо писать так, чтобы его было прежде всего удобно читать. И относительный путь в частности я использую в 50% случаев, наравне с абсолютным. Когда доберешься до SPA приложений, например, до реакта, поймешь что оба варианта написаний пути будут тебе нужны.
Посмотри как говорят другие русскоговорящие блогеры в своих видео. Как минимум половина произносят «и эм джи». Я когда-то учился по таким же материалам и за годы нахождения в сфере разработки не представляю, как переучить себя на другое произношение таких моментов. Разумеется, если бы это было конкретное полное не сокращенное слово, то я бы прислушался к советам.
Лучший преподаватель по Web-разработке!
Александр Ламков - машина
Без воды, но при этом подробно и понятно. Нравятся ваши уроки. Спасибо!👍
Вот ты не первый чьи видео я смотрю, но узнаю что-то новое, ты очень грамматно обьясняешь, как правильно делать и чтобы не просто работало, а именно грамматно было. От души 😊
Всегда ленился дописывать атрибут alt, после вашего объяснения теперь буду дописывать также длину и ширину картинки) Очень хорошо объясняете, без лишней воды, без "эмм..", "ммм.." 👍👍👍
Огонь видос!!!
Спасибо за подробный разбор alt.
И за lazyloading, конечно!
Спасибо 👍
было интересно послушать про loading
Как все четко и понятно, спасибо за уроки! Пожалуйста не останавливайтесь 😁😎)))
Большое спасибо за видео! Очень информативно и полезно, продолжаю смотреть курс дальше.
Про пути не понятно до конца, но посмотрю ещё объяснения других, может дойдёт до меня:):)
Смотри пару видео по этому с разных каналов, записывай , и практикуйся
Бесценные уроки. Хоть и не новичок, но из каждого видео можно подчерпнуть что-то новое
Однозначной лучший
💪
спасибо
TOP!
Поучительно 🤝 👍
Привет, поздравляю с 4тыс. на канале
Атрибут loading можно задавать всем медиаконтентам или только img и ?
Привет! Спасибо :) Только img и .
смотрел до этого другие курсы думал что умный, начал смотреть твои курсы понял что я тупой
Спасибо за столь понятный обучающий материал. подскажите пжлст как добавить эту самую папку с изображениями в vsc?
Не совсем понял твой вопрос, но может просто перетащить ярлык папки с одного окна на окно VSCode?
Все прекрасно объясняешь, но я не знаю почему все читают хэйт. Хэйт (hate) по-английски - это ненавидеть, а хайт (height) - высота) все-таки новички тоже запоминают, а это неправильно)
Начиная с какого-то видео я целенаправленно заставлял себя говорить правильно это слово 😅
подскажите что бы установили чтбы папки стали разноцветные?
Привет! Плагин Atom Material Icons.
На практике какой путь предпочтителней (абсолютный, или относительный) с учётом хостинга, возможного привлечения коллег в проет и размещения проекта в докер и прочее? Спасбо.
Смотря для чего. Для статических ресурсов (изображений, видео, аудио) - абсолютный. Но на этапе верстки с этим можно не заморачиваться. Если это обычное приложение (не SPA), то бэкенд-разработчик сам поменяет пути в src до нужных, синхронизирует с CMS, скажем так. А если разрабатывается SPA, то в src нам также готовая строчка-путь придет с бэка.
@@AleksanderLamkovСпасибо.
Может быть lazy не нужно было применять для самоц первой картинки? Ведь она должна грузиться первой?
Согласен, можно было не добавлять.
Вопрос возник, а если мы используем например грид с 2 одинаковыми колонками, где в одной картинка, в другой текст, как задавать значения ширины и высоты картинке если на разных разрешениях эти величины будут разными? Как в таком случае бороться с cumulative layout shift? Заранее спасибо!
Привет!
1. В атрибутах width и height всегда указываем значения размеров изображения из десктопной версии макета.
2. В качестве нормализации стилей обязательно прописываем для всех img свойства display: block и max-width: 100%.
3. Если ширина изображения должна подстраиваться под колонку грид-сетки, то задаем изображению width: 100% и не забываем height: auto для сохранения пропорций.
Никакого сдвига не будет, ни по горизонтали (т. к. грид-сетка задается обычно с фиксированными "долями"), ни по вертикали.
Затестил с троттлингом сети, никаких CLS не увидел:
codepen.io/aleksander-lamkov/pen/PoxXzLV
Возмоооожно, если бы был мегабайтный файл стилей, то проблема была бы видна, из-за задержки их применения на странице, но, имхо, CLS - это последнее, о чем стоит думать в такой ситуации :)
@@AleksanderLamkov благодарю за ответ!
А вот такой вопрос: а что если изображение находится в начале, но оно скрыто, например это popup или открывающееся меню и так далее? На мой взгляд это тоже должно быть изображение с lazy loading, но тут тогда другая проблема, а вдруг пользователь, который предположем, частый посетитель этого сайта, сразу захочет открыть этот popup или меню с изображением, то как правильно?
Ну а в чем проблема? Если на таком изображении будет loading lazy, картинка начнет грузится в момент попадания элемента в область видимости. То есть, когда пользователь откроет попап с таким изображением, картинка начнет загружаться. Да, не мгновенно, но это нормально. Лучше так, чем загружать картинки всегда и сразу.
@@AleksanderLamkov понял, спасибо за ответ.
можете подсказать, я пишу в vs code alt как я понимаю у вас при вводе alt вышел автоматический выбор, у меня он не вышел и когда я сама дописываю alt="текст" то у меня в браузере высвечивается текст который я написала
что в таком случае делать? надеюсь на быстрый ответ
Это не зависит от IDE. Если в браузере вместо картинки виден только alt, то нужно перепроверить путь к файлу изображения в атрибуте src.
Если не получится решить, напиши сюда, тебе помогут:
t.me/friendlyFrontendChat
@@AleksanderLamkov у меня стоит картинка и при этом есть текст с alt и с размерами картинки
Тогда надо смотреть код. Напиши в чат.
Можно вместо virtual брать натурал блокнот и писать код там
Пиши код там, где тебе удобно.
А смысл тогда использовтаь относительный путь, если проще всегда писать абсолютный?
Частенько нужно обратиться к файлу, который лежит на текущем уровне или глубже, в таких случаях пишут относительный путь.
@@AleksanderLamkov а если путь абсолютный, то уже не получится?
Получится, просто строка с путём получится длиннее :)
@@AleksanderLamkov Извини что надоедаю, проще было бы наверное загуглить😅, но мнение знающего человека было бы полезнее. Вот теги b и srong, по сути делают одно и тоже, но про их суть ты рассказал, и там явно видно различие. А вот есть два пути, которые делают абсолютно одно и тоже, как я понял, просто в одном варианте дорожка длиннее, в другом короче. И если по сути они ничем больше не отличаются, не проще тогда использовать только один, который меньше перегружает код?
Такие вещи не перегружают код. Лишний символ в коде - это замедление скорости его обработки на 0.00000000000001% или же вовсе никакой разницы не будет. Код надо писать так, чтобы его было прежде всего удобно читать. И относительный путь в частности я использую в 50% случаев, наравне с абсолютным. Когда доберешься до SPA приложений, например, до реакта, поймешь что оба варианта написаний пути будут тебе нужны.
В начале не то видео вставил, форматирование текста это позапрошлый урок😅
Видео уже почти год лежит на канале, а ты первый, кто заметил :)
Спасибо за внимательность!
@@AleksanderLamkov 😄👍
Ай эм Джи , так вроде?
А какая разница? Это ведь не аббревиатура.
@@AleksanderLamkov тогда И Эм Г?
Посмотри как говорят другие русскоговорящие блогеры в своих видео.
Как минимум половина произносят «и эм джи».
Я когда-то учился по таким же материалам и за годы нахождения в сфере разработки не представляю, как переучить себя на другое произношение таких моментов.
Разумеется, если бы это было конкретное полное не сокращенное слово, то я бы прислушался к советам.
@@AleksanderLamkov не парься, видосы у тебя супер. Спасибо