классное видео, спасибо! я заметил, что ты пишешь атрибут xlink:href является устаревшим со статусом deprecated, можно писать просто href="..." , еще одна фишка - если нет изменяемых картинок, в зависимости от разрешения экрана в (это когда в добавляют медиа запросы), а есть просто 1 картинка с разными расширениями, можно просто отдавать её через через php (laravel же на php работает), с проверкой браузерной поддержки форматов изображений, типа так - if ( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) { // webp is supported! } т.е. отдавать сразу картинку, сократив html код еще сильнее. есть поддержка avif? отдавать его, нет - webp, нет?... всплакнуть и отдать jpg з.ы. а можно добавить версионность к svg спрайту? типа
IE 11 страшный сон frontend-разработчика в 2022 году ) К сожалению, с ним еще иногда приходится сталкиваться при сопровождение некоторых корпоративных legacy-ресурсов. И порой не хватает информации о том, как адаптировать под него ту или иную современную фишку. Часто приходится изобретать велосипед )
@@lozunoff-developer были такие проекты, обязательно чтобы +-отображалось в ie11 в основном это госкомпании или полугосударственный, у них это фетиш)))
@@deniskadet про фетиш - в точку ) В этом году мелкомягкие обещали отказаться от поддержки IE в некоторых дистрибутивах, возможно лед тронется и подобные компании хотя бы на edge переедут.
У кого возникнут проблемы со сборкой, если вдруг будет выводится ошибка HookWebpackError: Plugin name should be specified то нужно немного изменить параметры в webpack.mix.js ===== ... svgo: { plugins : [ { 'name': 'removeStyleElement', // Удаляем из svg теги }, { 'name': 'removeAttrs', 'params': { attrs: ["fill", "stroke"] // Удаляем часть атрибутов для управления стилями из CSS } }, ] }, ... =========
Большое спасибо за интересный материал, а если многостраничное приложение, вручную все точки входа и выхода прописывать или есть какой то особый метод?
Программисты по своей натуре люди ленивые и не любят рутинных операций вроде ручного перечисления списка путей. Как правило в таких случаях вместо конкретных путей начинают использоваться какие-либо регулярные выражения/поиск по маске, чтобы меньшим количеством кода/настроек обхватить больше значений.
По настройке никаких преимуществ по сравнению с gulp я не увидел, может я не прав поправьте. Главная страница на php может в этом его отличие от gulp c html?
Спасибо большое разобрался, перешел с gulp. Cделал для своих проектов в October cms (Laravel), вот только одно смущает, тут же можно при npm run watch сделать так что бы он отслеживал, что изменено? а то он после сохранения того же scss компилирует заново всю папку dist включая изображения? А когда проект уже не маленький это время и не мало, пока он все это заново сохранит!
Вам нужно установить на свой компьютер Node.JS - nodejs.org/ru/ Вместе с "нодой" установится пакетный менеджер NPM и Вам станут доступны все его команды, в том числе "npm i".
Епать колотить мои глаза, ну что я такого плохого Вам сделал, за что? С планшета не реально выдержать эти муки, скоро буду плакать кровью. Просто PurgeCSS под продакшен с полифилом, остальное под стили шляпа. Картинки надо беком делать на Ларе, а не руками собирать разработчику.
Классный урок, очень полезный! Особенно понравилась часть про кроссбраузерность и svg спрайты. Буду смотреть остальные уроки.
классное видео, спасибо! я заметил, что ты пишешь атрибут xlink:href является устаревшим со статусом deprecated, можно писать просто href="..." , еще одна фишка - если нет изменяемых картинок, в зависимости от разрешения экрана в (это когда в добавляют медиа запросы), а есть просто 1 картинка с разными расширениями, можно просто отдавать её через через php (laravel же на php работает), с проверкой браузерной поддержки форматов изображений, типа так -
if ( strpos( $_SERVER['HTTP_ACCEPT'], 'image/webp' ) !== false ) {
// webp is supported!
}
т.е. отдавать сразу картинку, сократив html код еще сильнее. есть поддержка avif? отдавать его, нет - webp, нет?... всплакнуть и отдать jpg
з.ы. а можно добавить версионность к svg спрайту? типа
Почитайте что такое клоакинг и как он влияет на индексацию. Контент должен быть одинаковым на всех устройствах
@@ОлегОлдович устройство без экрана для чтения слепым и монитор для зрячих не равнозначны, прочитай что такое a11y
У тебя отличные уроки. Ждем продолжений
Спасибо! Вернулся к записи новых видео!
Спасибо за сборку и такое подробное объяснение
спасибо, хороший обзор. взял на вооружение некоторые фишки сборки
"Интернет Экспойлер" - сначала думал, что послышалось, но потом понял, что нет =)
спасибо за урок! все отлично
Спасибо, отличное видео!
Жили не тужили, а тут эксполер и брозеры. А так спасибо, все понятно.
IE 11 страшный сон frontend-разработчика в 2022 году ) К сожалению, с ним еще иногда приходится сталкиваться при сопровождение некоторых корпоративных legacy-ресурсов. И порой не хватает информации о том, как адаптировать под него ту или иную современную фишку. Часто приходится изобретать велосипед )
@@lozunoff-developer были такие проекты, обязательно чтобы +-отображалось в ie11 в основном это госкомпании или полугосударственный, у них это фетиш)))
@@deniskadet про фетиш - в точку ) В этом году мелкомягкие обещали отказаться от поддержки IE в некоторых дистрибутивах, возможно лед тронется и подобные компании хотя бы на edge переедут.
Большое спасибо! Очень полезно, но уж очень мелко, скачал 1080p 60fps, но все равно лайк
Уже работаю над этим нюансом. В новых видео шрифт будет побольше.
слушать супер, голос приятный, грамотная речь почти без эээ и слов-паразитов. А смотреть конечно тяжело))
Спасибо. Обещаю, что в новых видео смотреть будет легче!
👍
У кого возникнут проблемы со сборкой, если вдруг будет выводится ошибка
HookWebpackError: Plugin name should be specified
то нужно немного изменить параметры в webpack.mix.js
=====
...
svgo: {
plugins : [
{
'name': 'removeStyleElement', // Удаляем из svg теги
},
{
'name': 'removeAttrs',
'params': {
attrs: ["fill", "stroke"] // Удаляем часть атрибутов для управления стилями из CSS
}
},
]
},
...
=========
Благодарю за совет!
А по человечки можно подключить css, js? asset('css/style.css') не работает как и url(''). Мне бекенд нужен а не эти заморочки со сборкой стилей
Здравствуйте, подскажите пожалуйста у меня Laravel v9.24.0 (PHP v8.1.9) но файла webpack.mix.js там нет
Большое спасибо за интересный материал, а если многостраничное приложение, вручную все точки входа и выхода прописывать или есть какой то особый метод?
Программисты по своей натуре люди ленивые и не любят рутинных операций вроде ручного перечисления списка путей. Как правило в таких случаях вместо конкретных путей начинают использоваться какие-либо регулярные выражения/поиск по маске, чтобы меньшим количеством кода/настроек обхватить больше значений.
По настройке никаких преимуществ по сравнению с gulp я не увидел, может я не прав поправьте. Главная страница на php может в этом его отличие от gulp c html?
Спасибо большое разобрался, перешел с gulp. Cделал для своих проектов в October cms (Laravel), вот только одно смущает, тут же можно при npm run watch сделать так что бы он отслеживал, что изменено? а то он после сохранения того же scss компилирует заново всю папку dist включая изображения? А когда проект уже не маленький это время и не мало, пока он все это заново сохранит!
Присоединяюсь. Нашли решение вопроса?
@@ОлегОлдович самое простое решение за комментировать рендер изображений пока делаешь проект watch и раскомментировать когда уже сборка проекта
При вводе в консоль пишет что "laravel" не является командой. То есть мне нужно сперва установить сам Laravelна ПК?
Copy webpack plugin уже в коробке mix.copyDirectory('assets/img', 'public/img');
Прогресс не стоит на месте! Благодарю за информацию!
Что делать если imagemin-mozjpeg работает на es module?
14:40
Подскажите пожалуйста, у меня сразу не принимает команду "npm i". Что делать? У вас на видео эта команда работает. Нужно ещё что-то установить?
Вам нужно установить на свой компьютер Node.JS - nodejs.org/ru/ Вместе с "нодой" установится пакетный менеджер NPM и Вам станут доступны все его команды, в том числе "npm i".
@@lozunoff-developer спасибо
Епать колотить мои глаза, ну что я такого плохого Вам сделал, за что? С планшета не реально выдержать эти муки, скоро буду плакать кровью.
Просто PurgeCSS под продакшен с полифилом, остальное под стили шляпа. Картинки надо беком делать на Ларе, а не руками собирать разработчику.
Повесим, а не повешаем
Спасибо за минутку русского языка )
"Интернет эксполер"?
К сожалению, да. IE 11 еще иногда встречается в локальных корпоративных сетях и для него иногда приходится адаптировать какие-то внутренние порталы.
Подарите мне очки, пожалуйста
Лишними очками, к сожалению, не располагаю, но в новых видео обещаю поработать над масштабом )
круто, спасибо за урок
👍
👍
👍