Timecode's with ❤ 07:25 Начало. 07:50 JPEG vs WEBP 15:20 Lottie анимации 19:20 О шрифтах (Variable fonts) 26:00 SVG Тоже картинки 29:00 Lazy Loading 33:00 Библиотека KNIP (chrome dev tools Coverage) 44:00 BOX SHADOW В тюрьму 47:50 Не пиши логику внутри sort 52:05 Один цикл выгодней 54:00 Цикл for in 54:54 Легковесные библиотеки 59:20 Remove Event Listener 1:02:30 Link Preload 1:05:14 Script ASYNC DEFER 1:10:00 Debounce Throttle 1:10:54 Виртуализация 1:12:05 Оптимизация сети 1:12:50 Message pack 1:13:10 Web workers 1:15:40 Optimistic updates 1:18:55 Lazy loading
Дякую за відео, знайшов корисні для себе моменти: 1. EventListener на body, 2. content-visibility та тіні, 3. Font Family: Noto; Також дякую за пояснення і суміжні теми, це допомагає краще зрозуміти, чому треба робити так чи інакше!
Курс по дев тулзам от маэстро! ПЛИЗ))) Интересны моменты по предопределению контента. (скопировать скрипт который рендерит ютуб видео себе на комп, найти там функцию которая рендерит ютуб видео и добавить в нее свой контент для каждого видео), а так же хедеров, снипеты и всяких интересных штучек с отрисовкой лейаута.
Добрый день, Мурыч! Проходил собеседование на Front-End разработчика и задали мне такой вопрос: Что будет быстрее, проходить по массиву используя for (let i = 0; i < arr.length; i++) или используя метод .forEach У себя в голове я представлял это так, что стандартный метод может быть оптимизован сильнее В ответ от ведущей я получил такой ответ: .forEach будет медленнее из-за того, что каждый раз создается callback Интересно услышать ваше мнение
1) Variable шрифты нужно использовать, если у вас действительно планируется к использованию их вариативность. Если у вас всего 2 веса - normal и bold и на этом все, то использование фиксированных шрифтов эффективнее объему передаваемых по сети данных. Ориентировочно вариативные шрифты выигрывают у статических при использовании от 4 "вариантов". 2) Тем, кто хочет получить серьезный выигрыш по объему шрифта я бы все же рискнул предложить поразбираться с матчастью и впоследствии для шрифтов, которые это позволяют по лицензии, поупражняться в subsetting-е. Есть неплохой шанс получить из 64кб шрифта 6кб без потерь для внешнего вида сайта. Это потребует ощутимых затрат времени, но они будут гораздо меньше необходимых, чтобы научиться профессионально создавать шрифты.
На лейзи вы зря злитесь в 2024 она работает очень неплохо.. Библиотеки там вообще не нужны. Сделать ленивую загрузку самому, можно за час работы написать функцию. Библотеки нужны для календарей, слайдеров и галерей. Т.е вообще библиотеки лучше не использовать т.к там идут классы в которые запихан слон для решения задач осла.
Конвертировал несколько фото из jpeg в webp и метаданные сохранились! а вот при конвертировании из jpeg в avif не смог найти прогу, где можно просмотреть метаданные.( Они точно сохраняются? или может прогу подскажите?
Зачем издеваться над пареньком? Вы что не видите, что у него куриная ножка на предплечье выбита + еще суповой набор какой-то =D Он всего лишь хочет быть еще одним тичером...
автор видео, очевидно только начал писать свой пет проект и сразу подумал, почему бы не поделиться своей высочайшей "экспертизой" с аудиторией, это же повышает чсв и возможно монетизирует автора, по мне очередной низкокачественный шарлатан, который, как правильно заметил комментатор, показывает как решить мнимые проблемы, не вникнув в их суть очень жаль, что в рунете пруд пруди такого контента
Ведущий очень много где токсичит без причины и отвечает на те вопросы и кейсы которые сам себе задал и придумал. Автор оригинального видео молодец, много что применимо для High Load проектов, но много что из этого излишне для обычного продакшена. Что где как использовать и детали этого использования остается уже на разработчике, видео хорошее для краткого справочника что глянуть по теме а не полная документация со всеми особенностями, тут как бы очевидно или нет
Я немного знаю ведущего. И должен отметить, что его уровень токсичности в этом видео, снижен минимум на порядок в сравнении с тем какой он обычно. Далее, ведущий несколько раз на протяжении видео заявил, что рекомендации в видео могут давать как положительный эффект так и отрицательный. Их нельзя применять бездумно - как набор бест практикс. Нужно понимать первопричину проблемы и дейтсвовать исходя из этого. Ведущий, оптимизировал на заказ больше 200 проектов. В том числе и онлайн демонстрируя процесс приведения проекта из состояния полного пепца в состоянии ракеты. Так что ведущий не теоретизирует, а на основании своего профессионального опыта комментирует рекомендации из оригинального видео. Поищите в ютубе, ник ведущего плюс оптимизация. Найдете с десяток видео на разных ресурсах где пошагово разбираются проблемы проекта и как их следует решать, в том числе с применением рекомендаций сразу же онлайн
@@demimurych1 действительно уровень токсичности ниже, чем когда ругался на спецификацию джаваскрипта(хотя стоит отметить какие те стримы были интересные и информативные!), но все таки когда ты ее проявляешь, не очень приятно слушать речь, как будто бы мы тут собрались не знания получать, а самоутверждаться за счет тех, у кого знаний нет :(
Svg инконки везде интерактивны Т.е картинками их ставить нельзя. Так же спрайтами их не поставить и нужно вручную лопатить. Самый лучший способ пихать их в код т.к в 40% случаев дизанер сделал вектор не на путях а на "строк" и там use все ломает. Так же иконачные шрифты бред, с 2020 это джиквери и мовитон.
Ну, у меня например это просто статические картинки, которые я сохранил как svg просто потому, что так они занимают в 10 раз меньше места, и еще и масштабируются без потерь при этом. Подключаются в css. Так что варианты использования могут быть разные.
Я как пользователь готов убить разработчиков, которые конвертируют PNG в webp, этот формат не перешлешь, он не у всех открывется, стандартными средствами просмотра тем более, ужас для пользователя.
Timecode's with ❤
07:25 Начало.
07:50 JPEG vs WEBP
15:20 Lottie анимации
19:20 О шрифтах (Variable fonts)
26:00 SVG Тоже картинки
29:00 Lazy Loading
33:00 Библиотека KNIP (chrome dev tools Coverage)
44:00 BOX SHADOW В тюрьму
47:50 Не пиши логику внутри sort
52:05 Один цикл выгодней
54:00 Цикл for in
54:54 Легковесные библиотеки
59:20 Remove Event Listener
1:02:30 Link Preload
1:05:14 Script ASYNC DEFER
1:10:00 Debounce Throttle
1:10:54 Виртуализация
1:12:05 Оптимизация сети
1:12:50 Message pack
1:13:10 Web workers
1:15:40 Optimistic updates
1:18:55 Lazy loading
Дякую за відео, знайшов корисні для себе моменти:
1. EventListener на body,
2. content-visibility та тіні,
3. Font Family: Noto;
Також дякую за пояснення і суміжні теми, це допомагає краще зрозуміти, чому треба робити так чи інакше!
Спасибо за variable fonts, не знал
coverage - супер. Спасибо.
Курс по дев тулзам от маэстро! ПЛИЗ)))
Интересны моменты по предопределению контента. (скопировать скрипт который рендерит ютуб видео себе на комп, найти там функцию которая рендерит ютуб видео и добавить в нее свой контент для каждого видео), а так же хедеров, снипеты и всяких интересных штучек с отрисовкой лейаута.
Лучший популяризатор грамотного программирования! Спасибо!
Требуется курс по дев тулзам от маэстро
Теперь я ваш фанат😊
Спасибо за видео, лайк поставил. Получилось действительно быстро и по делу
Добрый день, Мурыч!
Проходил собеседование на Front-End разработчика и задали мне такой вопрос:
Что будет быстрее, проходить по массиву используя for (let i = 0; i < arr.length; i++) или используя метод .forEach
У себя в голове я представлял это так, что стандартный метод может быть оптимизован сильнее
В ответ от ведущей я получил такой ответ:
.forEach будет медленнее из-за того, что каждый раз создается callback
Интересно услышать ваше мнение
Браво, маэстро!
Давайте Мурич, сделайте такой воле такой практически контент. Было полезно.
1) Variable шрифты нужно использовать, если у вас действительно планируется к использованию их вариативность. Если у вас всего 2 веса - normal и bold и на этом все, то использование фиксированных шрифтов эффективнее объему передаваемых по сети данных. Ориентировочно вариативные шрифты выигрывают у статических при использовании от 4 "вариантов".
2) Тем, кто хочет получить серьезный выигрыш по объему шрифта я бы все же рискнул предложить поразбираться с матчастью и впоследствии для шрифтов, которые это позволяют по лицензии, поупражняться в subsetting-е. Есть неплохой шанс получить из 64кб шрифта 6кб без потерь для внешнего вида сайта. Это потребует ощутимых затрат времени, но они будут гораздо меньше необходимых, чтобы научиться профессионально создавать шрифты.
На лейзи вы зря злитесь в 2024 она работает очень неплохо..
Библиотеки там вообще не нужны.
Сделать ленивую загрузку самому, можно за час работы написать функцию.
Библотеки нужны для календарей, слайдеров и галерей.
Т.е вообще библиотеки лучше не использовать т.к там идут классы в которые запихан слон для решения задач осла.
❤❤❤
Конвертировал несколько фото из jpeg в webp и метаданные сохранились! а вот при конвертировании из jpeg в avif не смог найти прогу, где можно просмотреть метаданные.( Они точно сохраняются? или может прогу подскажите?
great video
Зачем издеваться над пареньком? Вы что не видите, что у него куриная ножка на предплечье выбита + еще суповой набор какой-то =D
Он всего лишь хочет быть еще одним тичером...
аха ой не могу 😆
автор видео, очевидно только начал писать свой пет проект и сразу подумал, почему бы не поделиться своей высочайшей "экспертизой" с аудиторией, это же повышает чсв и возможно монетизирует автора, по мне очередной низкокачественный шарлатан, который, как правильно заметил комментатор, показывает как решить мнимые проблемы, не вникнув в их суть
очень жаль, что в рунете пруд пруди такого контента
Ведущий очень много где токсичит без причины и отвечает на те вопросы и кейсы которые сам себе задал и придумал. Автор оригинального видео молодец, много что применимо для High Load проектов, но много что из этого излишне для обычного продакшена. Что где как использовать и детали этого использования остается уже на разработчике, видео хорошее для краткого справочника что глянуть по теме а не полная документация со всеми особенностями, тут как бы очевидно или нет
Как по мне все по делу.
А то, что ты говоришь излишне. (потом вкладки по 1 gb в хроме жрут RAM) разрабы же сказали что это излишне...
Я немного знаю ведущего. И должен отметить, что его уровень токсичности в этом видео, снижен минимум на порядок в сравнении с тем какой он обычно.
Далее, ведущий несколько раз на протяжении видео заявил, что рекомендации в видео могут давать как положительный эффект так и отрицательный. Их нельзя применять бездумно - как набор бест практикс. Нужно понимать первопричину проблемы и дейтсвовать исходя из этого.
Ведущий, оптимизировал на заказ больше 200 проектов. В том числе и онлайн демонстрируя процесс приведения проекта из состояния полного пепца в состоянии ракеты. Так что ведущий не теоретизирует, а на основании своего профессионального опыта комментирует рекомендации из оригинального видео.
Поищите в ютубе, ник ведущего плюс оптимизация. Найдете с десяток видео на разных ресурсах где пошагово разбираются проблемы проекта и как их следует решать, в том числе с применением рекомендаций сразу же онлайн
@@demimurych1 действительно уровень токсичности ниже, чем когда ругался на спецификацию джаваскрипта(хотя стоит отметить какие те стримы были интересные и информативные!), но все таки когда ты ее проявляешь, не очень приятно слушать речь, как будто бы мы тут собрались не знания получать, а самоутверждаться за счет тех, у кого знаний нет :(
Murych boh
Согласен, я его уважаю, но он столько придирается к одной фигне, что аж целых 20 минут раскрывает один вопрос
Svg инконки везде интерактивны
Т.е картинками их ставить нельзя.
Так же спрайтами их не поставить и нужно вручную лопатить.
Самый лучший способ пихать их в код т.к в 40% случаев дизанер сделал вектор не на путях а на "строк" и там use все ломает.
Так же иконачные шрифты бред, с 2020 это джиквери и мовитон.
Ну, у меня например это просто статические картинки, которые я сохранил как svg просто потому, что так они занимают в 10 раз меньше места, и еще и масштабируются без потерь при этом. Подключаются в css.
Так что варианты использования могут быть разные.
@@alexperemey6046 это редкость
Я как пользователь готов убить разработчиков, которые конвертируют PNG в webp, этот формат не перешлешь, он не у всех открывется, стандартными средствами просмотра тем более, ужас для пользователя.