Простые решения для сложных задач с Intersection Observer API

No video

Простые решения для сложных задач с Intersection Observer API

Рет қаралды 30,515

Михаил Непомнящий

Күн бұрын

Пікірлер: 90

@eliaseugene1270 2 жыл бұрын

я в очередной раз удивляюсь, на сколько ваш контент актуален в моем рабочем проекте, спасибо за труды)))

@user-no2rk3rz4e Жыл бұрын

Лучшее объяснение Intersection Observer

@ShoTHIk 2 жыл бұрын

ЭТО!... ПРОСТО!... ОХ...очень полезный материал! Очень класно доносите информацию, Михаил! Контент максимально информативен - что по Реакту, что по JS в целом. Действительно, незаслужено малое количество подписчиков, ведь для вашей целевой вы отличный лектор, ментор, учитель или преподаватель. Но дорогу осилит идущий. С таким качественным контентом быстрый рост подписчиков гарантирован. Главное - регулярность и не останавливаться на достигнутом. Успехов Вам, Михаил! И побольше лайков под видео ;)

@Pavelius 3 ай бұрын

Спасибо за урок, достаточно понятно и с реальными примерами

@AlexGabber 2 жыл бұрын

Пару недель назад приходилось изучить observer api и внедрить в задачу) в принципе ничего сложного, но это видео очень полезное и я к нему буду возвращаться точно. Понимание расширилось и теперь хочется заняться практикой на всех своих проектах)) очень полезная штука. А автор как всегда лучший! Честно говоря среди огромного количества каналов, для меня этот один из лучших точно. Михаил) спасибо! Обязательно возьму ваши курсы на udemy

@amancalllednoise Жыл бұрын

Михаил, мое почтение. За одно видео ответил на уйму волнующих вопросов! Лучший !

@Maxim9575 2 жыл бұрын

Хорошо и понятно рассказываешь, редко такое видишь.

@nikolaysmolov8031 Жыл бұрын

Класс! Давно хотел разобраться, а тут Михаил такой урок сделал! Спасибо!

@alexeykuzniecov223 2 жыл бұрын

Один из лучших каналов, постепенно просматриваю все видео отсюда)

@shittywizzard5727 2 жыл бұрын

Очень нужная тема, спасибо!

@user-hw9cs6te5y 4 ай бұрын

Благодарю, урок отличный и познавательный, больше всего узнала именно из вашего видео.

@olegsh2888 2 жыл бұрын

Отличный видос, Михаил! Актуальные браузерные апишки - это годнота)

@mishanep 2 жыл бұрын

Сегодня видел прикольную штуку Intl.ListFormat для склеивания массива строк в строку.

@olegsh2888 2 жыл бұрын

@@mishanep тоже вчера видел) Было бы круто собрать видос по этому могучему объекту, там уже целый новый мир)

@motolife4900 2 жыл бұрын

отличный разбор

@beznamea9549 2 жыл бұрын

Какой же у вас годный контент! Спасибо!!!

@IvanZakharanka 2 жыл бұрын

Огромное спасибо! Через такие костыли делал подгруку, а оказывется есть такой прекрасный инструмент!

@user-ki6sz4nz3l 5 ай бұрын

Спасибо за урок

@over79751 8 ай бұрын

Спасибо огромное очень помог !

@user-fw9hc5lg9f Жыл бұрын

Круто объяснил!

@ivanfadeev5389 2 жыл бұрын

Спасибо за материал! Подача огонь 🔥

@unknown.6914 6 ай бұрын

Отличный урок , спасибо Михаил

@aceracer5556 2 жыл бұрын

Спасибо Михаил за подробный обзор!

@pvrybakin 2 жыл бұрын

Сегодня узнал о нем, а вчера Михаил выпустил видео о о нем) Спасибо за видео.

@vladislove1337 Жыл бұрын

Самое понятное видео на эту тему, спасибо!

@happy_cutman 2 жыл бұрын

Михаил, спасибо за труды!

@user-nd9ce7ul4e 7 ай бұрын

Спасибо за ваш труд! Очень полезная информация!

@katada 2 жыл бұрын

Продолжай в том же духе!)

@EugeneChe-81 2 жыл бұрын

С нетерпением буду ждать ещё подобного материала! Вы у меня в Топ-3 ютуба!!!

@0xSxVKaJnwQ Жыл бұрын

Спасибо!

@sergeylunyaka4315 2 жыл бұрын

да, действительно полезный материал и доступный

@alsua1297 Жыл бұрын

спасибо за видео👍

@Mr04unit Жыл бұрын

просто лучший.

@user-natal04ka Жыл бұрын

Спасибо!Как все легко, я пол ютуба перерыла, а решение здесь))

@vlasovdanildev 2 жыл бұрын

Очень интересное видео, оно сто процентов пригодится, спасибо вам за все Михаил

@gregoryzhel Жыл бұрын

Великолепное объяснение. Спасибо за видео!

@rzdegor1978 Жыл бұрын

Объяснение супер!!!

@alexmlnkv 2 жыл бұрын

Михаил, спасибо огромное за Ваш труд! Очень полезное видео. Бегу пробовать эту апишку)

@mikhail_one Жыл бұрын

Невероятно круто, большое спасибо за видео.

@user-rw3ry9bd6l 2 жыл бұрын

Отличный контент. Комментарий в поддержку канала

@RK-yk3hj 2 жыл бұрын

как всегда супер. Зделай видео пo GraphGL + React пажалустаааааааа

@mishanep 2 жыл бұрын

И туда однажды доберемся)

@user-artem-busyhin 2 жыл бұрын

Супер. Огромное спасибо!

@ihopeingod1 Жыл бұрын

Михаил, спасибо вам за подробное объяснение! Вы замечательный преподаватель! Желаю развития вашему каналу!

@artemzirka9675 2 жыл бұрын

Спасибо! Полезный материал с хорошим пояснением.

@ardanow1 2 жыл бұрын

Очень крутой контент и подача, спасибо!

@Nuts_Cracker 2 жыл бұрын

Огромное спасибо за контент! Как всегда очень полезно!

@serjdenisov2114 2 жыл бұрын

Спасибо Михаил!

@boycovclub 2 жыл бұрын

Уважуха)

@azizbekkomilov3589 2 жыл бұрын

Спасибо за видео ЛАЙК и ждем новых видосов!!!

@user-le3je2mu4n 11 ай бұрын

Молодец, большое спасибо), оч доступно

@from_brest2631 2 жыл бұрын

Круть, видел данную. апишку на инфинит скролле в реакте

@user-cr1pq1wz8v 2 жыл бұрын

Полезно, спасибо!

@vladimirmuratov2220 2 жыл бұрын

Очень крутое видео! Спасибо!!!! 😊

@curillaenator 2 жыл бұрын

очень полезная информация!

@user-pe4wq2dv7q 2 жыл бұрын

Спасибо. Полезно

@JUN-17 2 жыл бұрын

Очень полезно и информативно. Просмотров почему-то мало.👍 Но никак не пойму, что делает опция root на 0:50 и как его использовать ? Но уже загуглил и понял.)

@volod-one 2 жыл бұрын

Топчик!

@vvsl3882 2 жыл бұрын

Супер)

@dev-to-prod 2 жыл бұрын

Топ как всегда.

@iarmiksafaryan1200 4 ай бұрын

Отлично! Наверное, то что искал. А как реализовать такой функционал у меню, чтобы оно автоматически прокручивалось к "активным" пунктам (которые не вмещаются на экране), при скроллинге страницы?

@mercury_2379 2 жыл бұрын

ооо, круто, спасибо

@boycovclub 2 жыл бұрын

))) я тут курсы у вас на юдеми покупал, а вы ещё бесплатно курсы тут преподаете

@lessons3141 Жыл бұрын

очень крутое видео

@romanstoleru7936 2 жыл бұрын

Очень нравиться твоя подача! Но это мне сломало мозги, пойду дальше учить html/css/js xD Когда нибудь это тоже пойму! Спасибо за хорошие уроки!

@margino 11 ай бұрын

Спасибо за видео, Михаил! Не знаю почему, но у меня rootMargin срабатывает только если прописано одно значение, например, rootMargin: "50px". Если пишу, например, rootMargin: "50px 0px 0px 0px" rootMargin не работает 🙃 Поделитесь если кто-то столкнулся с подобным и нашел решение.

@0xSxVKaJnwQ 7 ай бұрын

Вроде все логично и понятно, а потом оказывается, что intersectionRatio возвращает не процент, который занимает элемент относительно рута, а процент относительно самого элемента. То есть, если секция очень длинна, она может перекрыть почти весь вьюпорт, но intersectionRatio будет меньше 0.5 %)

@user-ic4dk4sp3y 2 жыл бұрын

thnx fr th vd, круто

@abdulvahhabakbarov7850 2 жыл бұрын

Привет из Узбекистана! пожалуйста, сделайте полное видео о наборе инструментов redux toolkit, об использовании его с почтальоном. Заранее спасибо !

@mishanep 2 жыл бұрын

С каким почтальоном? :)

@danildemchenko6004 2 жыл бұрын

@@mishanep Печкиным, полагаю:)))

@abdulvahhabakbarov7850 2 жыл бұрын

ой Извините Я допустил ошибку ): с postman

@digitalturkistan1857 Жыл бұрын

@@abdulvahhabakbarov7850 postman обычно используется бэкенд разработке для написание рест запросов. Redux toolkit это стейт менеджер точнее загатовка для редукса

@user-di3xd7tq8g 2 жыл бұрын

Большое спасибо за вашу работу. Хотел спросить что на сегодняшний день лучше учить JOI или YUP. и может снимите ролик на эту тему в нете я нашел только англоязычные ролики

@sergey_zatsepin 2 жыл бұрын

А если у тебя элемент на первом экране, т.е. по умолчанию пересечён, будешь от обратного идти или по старинке отслеживать позицию скролла? Ну и хотелось бы увидеть пример с root не null

@govorov_top 2 жыл бұрын

Internet Explorer хотя бы 11 поддерживал... а так да, круто и библиотеки не нужны, спасибо!

@mishanep 2 жыл бұрын

Сочувствую, если вам приходится поддерживать IE.

@vovergg 2 жыл бұрын

А как сделать так, чтобы при скролле наврех обзёрвер отарабатывал, когда элемент пересекает своей верхней частью верх экрана (и уходит дальше наверх за пределы экрана), а при скролле вниз, обзёрвер отрабатывает тогда, когда элемент наоборот только начинает появляться сверху (то есть пересекает своей нижней частью верхнюю чать экрана)? Как я понимаю, для этого в первом случае обзёрвер должен срабатывать при threshold: 1 (условно будем считать, что высота элемента примерно равна высоте viewport'a), а во втором случае при threshold: 0. И вот как это совместить? Я пока не смог придумать...

@timchenkod88 Жыл бұрын

Михаил, подскажите пожалуйста, как реализовать пример с якорным меню в React. Если я правильно понимаю, то там нужно использовать API react-intersection-observer. Вот с ленивой загрузкой изображений и запуск/остановка видео у меня получилось сделать, а вот с якорным меню некий ступор возник. Буду признателен, если покажете решение.

@mishanep Жыл бұрын

Здесь надо посидеть-подумать-погуглить. На первой напрашиваются два решения: либо хранить текущее положение в сторе и обновлять его через обзервер, либо использовать роутинг и через обзервер обновлять url по достижению якоря. Но вполне возможно есть более элегантное решение.

@tontontonic 12 күн бұрын

@@mishanep я пробовал через урл связать и обновлять якорь в урле, но фишка в том, что когда меняешь якорь в урле, то страница сразу сама начинает скроллится до установленного якоря (как будто сменился адрес (а он ведь и правда сменился, там теперь другой якорь) и он открывает новую страницу ). Т.е. доскроллил то границы секции с якорем, якорь в урле сменился и бац, браузер делает автоскролл на начало этой секции с якорем.

@sartjhon3300 8 ай бұрын

а как же поисковые роботы? ведь не видя картинок он не сможет их проанализировать

@mishanep 8 ай бұрын

Это не всегда требуется. Сегодня множество сайтов с бесконечным скроллом и все картинки всё равно никогда не будут проиндексированы. Кроме того, есть разные подходы к ленивым картинкам, изначально картинка может быть отрисована в очень плохом качестве, и обновлена при подскролле к ней. У меня было видео об этом.

@user-np4vg9pc5o 2 жыл бұрын

Привет!!! А можете сделать видео как в React такое использовать?

@mishanep 2 жыл бұрын

Приветствую! Для Реакта есть удобная библиотека react-intersection-observer. Я думал было снять видео с ее использованием, но реализовал всё намного проще и по-другому =) Тут всегда стоит вопрос, что мы хотим сделать, и уже под него подбираем инструменты. kzfaq.info/get/bejne/hq2HZpmmrrzLl4E.html

@user-np4vg9pc5o 2 жыл бұрын

@@mishanep Привет!!! Подскажите пожалуйста, какой командой стартануть проект? При старте npm start запускается, но пишет --- Note that the development build is not optimized. To create a production build, use yarn build.

@mishanep 2 жыл бұрын

@@user-np4vg9pc5o вы всё правильно делаете. Это не ошибка. Уведомление просто уведомляет, что в дев режиме файлы не оптимизированы. Это нормально, так оно быстрее собирается для изменений и отладки. После npm run build или yarn build собирается продакшн вариант приложения, он оптимизирован.

@user-np4vg9pc5o 2 жыл бұрын

@@mishanep Спасибо за ваши видео!!!