Почему Product Director at Google пропагандирует скелетоны
HTML-код
- Опубликовано: 1 июл 2024
- Мы уже привыкли к скелетонам на таких популярных сайтах как RUclips или Google Drive. Сегодня мы капнем в историю, как так произошло, что эту идею взяли в production в такие мировые проекты. И конечно, набросаем свой вариант простого скелетона
Поддержать Айти Синяка можно здесь:
RUclips: / @it-sin9k
boosty: boosty.to/sin9k
Patreon: / itsin9k
Таймкоды:
00:00 Объявление темы
00:28 Почему скелетоны нравятся людям
02:46 Как должен выглядеть скелетон?
04:35 Создаем свой скелетон
07:42 Поддержи и Подпишись
Подписаться на канал: / @it-sin9k
Twitter: / it_sin9k
-------------------------
Данный канал создан для инициирования бесед на различные темы IT сферы (социальные / технические), а также для тех кому короткая видео выжимка статьи, выступления на конференции или же просто личных мыслей, являются более удобным форматом
лучше не анимируйте перемещение элемента через left/top/right/bottom, а анимируйте через transform. В данном примере это не так критично, но будь у тебя что-то посложнее, ты бы получил проблемы с перфом, ибо transform заставляет браузер выносить твой блок на отдельный слой (слой это текстура, картинка), и применяет на нее матрицу преобразования (это дешево), а с left/top/right/bottom и другими вещами что влияют на верстку - ты получишь перерасчет позиций всех дочерних элементов, а можешь еще и родительских, если width/height заюзаешь в анимации :)
Это ты где такое вычитал, в курсах по анимациям на htmlacademy? 🤣
@@dididie158 погугли, прежде чем пытаться подъебнуть человека, который специализируется на анимациях в UI :)
Cool and actual video as usual!!! Well done, man! Keep making such videos!
Очень интересная информация про исследования
Крутое видео! обычно пользуюсь скелетоном материал ЮИ, было интересно посмотреть пример на чистом css
Спасибо, теперь тоже буду внедрять это в свои проекты
Цель данного видео на этом считаю выполненной)
Блин. Такой годный контент, и так мало подписчиков. Аж мне больно, автору респект!
Спасибо!) Мы будем благодарные если вы поделитесь ссылкой на понравившиеся видео со своими коллегами или в linkedIn :)
Только вчера смотрел видос по скелетону у Кайла WDS
Годный контент)
Спасибо )
А вот с волной, почему нельзя использовать delay вместо setTimeout ?)
1 волна отыграла а 2 с delay )
а попробуй написать такой delay, у меня не получилось) если у тебя 2 блока анимация на левом блоке должна длится 0.5 секунды, а на правой должна длится 2 секунды) Сбрасывай ссылку, если получится)
Крутой контент, учитывая исследования в каждом видео, лайк подписка, отписка, снова подписка и еще два лайка🤫 давай больше видосов, нас, любителей вот такого, хоть и мало, зато наш лайк считается за 100 обычных))
спасибо за сотню лайков!)
Дякую)
Спасибо)
Было бы круто, если бы ты расширил эту тему. Рассказал бы где стоит применять скелетоны, где не стоит, нужно ли подставлять скелетон, если запрос за данными происходит очень быстро и скелетон моргнет на пол секунды, нужно ли, что бы скелетон повторял в точности верстку и т.д.
я такого рода исследований не нашел. А сам вероятно проводить не буду. Но сам придерживаюсь визуального восприятия. Если действительно очень быстро грузится, то можно и ничего не вставлять, а если мини пауза, то можно статический вставить, а если прям загрузка, например поиск онлайн делаешь по строке, то можно вставить и с анимацией. Все на восприятии личном держится у меня)
я в моей проекте использую скелетон из материала , и это очень удобно
Сори за офтоп, Синяк ты не мог бы как-то снять видео про пропсы и initialState, я знаю, что передавать пропсы в initialState это есть анти-паттерн, но не могу найти какой-то полезной инфы почему это лучше не делать и к чему это может привести и как лучше поступать в случае когда ну прям позарез нужно использовать просы как initialState, я иммею ввиду, что нужно учесть что бы избежать возможных багов/подводных камней, было бы интересно посмотреть и на вариант с классовым и с функциональным подходом
Хмм, честно говоря, у меня особо в голову не приходит примеров, когда нужно использовать props как initialState. А можешь привести примеры задач?
вместо шеф продукт проще сказать шеф повар, так лучше воспринимается
+
20 человек, это не выборка, а чих. Такие исследования - в урну!
Думаю, то что RUclips и Google Drive и linkedIn втащили себе такие же скелетоны, говорит о том, что они провели A / B тестирование на много миллионной аудитории. Надеюсь такой выборки будет достаточно :)
@@it-sin9k или, или им как IT гигантам конкретно положить на остальных, так как они тут рулят.
Вот чисто субъективно эти новомодние скелетоны только раздражают. Может потому что их стали пихать где нужно и ненужно? Отрываешь окно авторизации и три минуты ждешь загрузки формы из двух полей! Вот что там за такие тяжелые данные, что так долго подгружаются?! Аж бесит.
вот это крик души))
Говорите по-русски! random = случчайно
Ну да ну да. Вместо оптимизации загрузки давайте грузить другую херню.
а если нет возможности в данный момент оптимизировать загрузку? или это редкий экран, на который по статистике редко заходит пользователь и не хотят выделять ресурсы на ускорение получения данных или предварительную загрузку данных?
Да и еще есть куча сайтов, где не готовы платить за железо, и они лучше покажут лоадер. Например для сайтов продажи машин, где много информации в БД и это занимает время. И оптимизировать все это дело не выгодно по деньгам.