Пару недель назад приходилось изучить observer api и внедрить в задачу) в принципе ничего сложного, но это видео очень полезное и я к нему буду возвращаться точно. Понимание расширилось и теперь хочется заняться практикой на всех своих проектах)) очень полезная штука. А автор как всегда лучший! Честно говоря среди огромного количества каналов, для меня этот один из лучших точно. Михаил) спасибо! Обязательно возьму ваши курсы на udemy
ЭТО!... ПРОСТО!... ОХ...очень полезный материал! Очень класно доносите информацию, Михаил! Контент максимально информативен - что по Реакту, что по JS в целом. Действительно, незаслужено малое количество подписчиков, ведь для вашей целевой вы отличный лектор, ментор, учитель или преподаватель. Но дорогу осилит идущий. С таким качественным контентом быстрый рост подписчиков гарантирован. Главное - регулярность и не останавливаться на достигнутом. Успехов Вам, Михаил! И побольше лайков под видео ;)
Очень полезно и информативно. Просмотров почему-то мало.👍 Но никак не пойму, что делает опция root на 0:50 и как его использовать ? Но уже загуглил и понял.)
Отлично! Наверное, то что искал. А как реализовать такой функционал у меню, чтобы оно автоматически прокручивалось к "активным" пунктам (которые не вмещаются на экране), при скроллинге страницы?
Спасибо за видео, Михаил! Не знаю почему, но у меня rootMargin срабатывает только если прописано одно значение, например, rootMargin: "50px". Если пишу, например, rootMargin: "50px 0px 0px 0px" rootMargin не работает 🙃 Поделитесь если кто-то столкнулся с подобным и нашел решение.
Большое спасибо за вашу работу. Хотел спросить что на сегодняшний день лучше учить JOI или YUP. и может снимите ролик на эту тему в нете я нашел только англоязычные ролики
А если у тебя элемент на первом экране, т.е. по умолчанию пересечён, будешь от обратного идти или по старинке отслеживать позицию скролла? Ну и хотелось бы увидеть пример с root не null
@@abdulvahhabakbarov7850 postman обычно используется бэкенд разработке для написание рест запросов. Redux toolkit это стейт менеджер точнее загатовка для редукса
Михаил, подскажите пожалуйста, как реализовать пример с якорным меню в React. Если я правильно понимаю, то там нужно использовать API react-intersection-observer. Вот с ленивой загрузкой изображений и запуск/остановка видео у меня получилось сделать, а вот с якорным меню некий ступор возник. Буду признателен, если покажете решение.
Здесь надо посидеть-подумать-погуглить. На первой напрашиваются два решения: либо хранить текущее положение в сторе и обновлять его через обзервер, либо использовать роутинг и через обзервер обновлять url по достижению якоря. Но вполне возможно есть более элегантное решение.
@@mishanep я пробовал через урл связать и обновлять якорь в урле, но фишка в том, что когда меняешь якорь в урле, то страница сразу сама начинает скроллится до установленного якоря (как будто сменился адрес (а он ведь и правда сменился, там теперь другой якорь) и он открывает новую страницу ). Т.е. доскроллил то границы секции с якорем, якорь в урле сменился и бац, браузер делает автоскролл на начало этой секции с якорем.
А как сделать так, чтобы при скролле наврех обзёрвер отарабатывал, когда элемент пересекает своей верхней частью верх экрана (и уходит дальше наверх за пределы экрана), а при скролле вниз, обзёрвер отрабатывает тогда, когда элемент наоборот только начинает появляться сверху (то есть пересекает своей нижней частью верхнюю чать экрана)? Как я понимаю, для этого в первом случае обзёрвер должен срабатывать при threshold: 1 (условно будем считать, что высота элемента примерно равна высоте viewport'a), а во втором случае при threshold: 0. И вот как это совместить? Я пока не смог придумать...
Вроде все логично и понятно, а потом оказывается, что intersectionRatio возвращает не процент, который занимает элемент относительно рута, а процент относительно самого элемента. То есть, если секция очень длинна, она может перекрыть почти весь вьюпорт, но intersectionRatio будет меньше 0.5 %)
Приветствую! Для Реакта есть удобная библиотека react-intersection-observer. Я думал было снять видео с ее использованием, но реализовал всё намного проще и по-другому =) Тут всегда стоит вопрос, что мы хотим сделать, и уже под него подбираем инструменты. th-cam.com/video/PGW36uIVggM/w-d-xo.html
@@mishanep Привет!!! Подскажите пожалуйста, какой командой стартануть проект? При старте npm start запускается, но пишет --- Note that the development build is not optimized. To create a production build, use yarn build.
@@КириллСмирнов-ь5ъ вы всё правильно делаете. Это не ошибка. Уведомление просто уведомляет, что в дев режиме файлы не оптимизированы. Это нормально, так оно быстрее собирается для изменений и отладки. После npm run build или yarn build собирается продакшн вариант приложения, он оптимизирован.
Это не всегда требуется. Сегодня множество сайтов с бесконечным скроллом и все картинки всё равно никогда не будут проиндексированы. Кроме того, есть разные подходы к ленивым картинкам, изначально картинка может быть отрисована в очень плохом качестве, и обновлена при подскролле к ней. У меня было видео об этом.
я в очередной раз удивляюсь, на сколько ваш контент актуален в моем рабочем проекте, спасибо за труды)))
Михаил, мое почтение. За одно видео ответил на уйму волнующих вопросов! Лучший !
Один из лучших каналов, постепенно просматриваю все видео отсюда)
Класс! Давно хотел разобраться, а тут Михаил такой урок сделал! Спасибо!
Пару недель назад приходилось изучить observer api и внедрить в задачу) в принципе ничего сложного, но это видео очень полезное и я к нему буду возвращаться точно. Понимание расширилось и теперь хочется заняться практикой на всех своих проектах)) очень полезная штука. А автор как всегда лучший! Честно говоря среди огромного количества каналов, для меня этот один из лучших точно. Михаил) спасибо! Обязательно возьму ваши курсы на udemy
Хорошо и понятно рассказываешь, редко такое видишь.
Лучшее объяснение Intersection Observer
ЭТО!... ПРОСТО!... ОХ...очень полезный материал! Очень класно доносите информацию, Михаил! Контент максимально информативен - что по Реакту, что по JS в целом.
Действительно, незаслужено малое количество подписчиков, ведь для вашей целевой вы отличный лектор, ментор, учитель или преподаватель. Но дорогу осилит идущий. С таким качественным контентом быстрый рост подписчиков гарантирован. Главное - регулярность и не останавливаться на достигнутом. Успехов Вам, Михаил! И побольше лайков под видео ;)
Отличный видос, Михаил! Актуальные браузерные апишки - это годнота)
Сегодня видел прикольную штуку Intl.ListFormat для склеивания массива строк в строку.
@@mishanep тоже вчера видел) Было бы круто собрать видос по этому могучему объекту, там уже целый новый мир)
Сегодня узнал о нем, а вчера Михаил выпустил видео о о нем) Спасибо за видео.
Спасибо за урок, достаточно понятно и с реальными примерами
Спасибо Михаил за подробный обзор!
Михаил, спасибо за труды!
Самое понятное видео на эту тему, спасибо!
Благодарю, урок отличный и познавательный, больше всего узнала именно из вашего видео.
Какой же у вас годный контент! Спасибо!!!
Спасибо за материал! Подача огонь 🔥
Спасибо!Как все легко, я пол ютуба перерыла, а решение здесь))
Отличный урок , спасибо Михаил
Очень нужная тема, спасибо!
С нетерпением буду ждать ещё подобного материала! Вы у меня в Топ-3 ютуба!!!
Объяснение супер!!!
Михаил, спасибо вам за подробное объяснение! Вы замечательный преподаватель! Желаю развития вашему каналу!
Михаил, спасибо огромное за Ваш труд! Очень полезное видео. Бегу пробовать эту апишку)
Отличный контент. Комментарий в поддержку канала
Очень интересное видео, оно сто процентов пригодится, спасибо вам за все Михаил
Великолепное объяснение. Спасибо за видео!
Очень крутой контент и подача, спасибо!
отличный разбор
Невероятно круто, большое спасибо за видео.
да, действительно полезный материал и доступный
Продолжай в том же духе!)
Спасибо! Полезный материал с хорошим пояснением.
Круто объяснил!
Огромное спасибо за контент! Как всегда очень полезно!
Супер. Огромное спасибо!
Молодец, большое спасибо), оч доступно
Спасибо огромное очень помог !
Спасибо за видео ЛАЙК и ждем новых видосов!!!
Спасибо Михаил!
Топчик!
спасибо за видео👍
Спасибо за урок
Очень крутое видео! Спасибо!!!! 😊
Очень полезно и информативно. Просмотров почему-то мало.👍
Но никак не пойму, что делает опция root на 0:50 и как его использовать ? Но уже загуглил и понял.)
Этот канал уже превращается в классику Фронтенд туториалов для нас смертных, ГОДНОТА !!! 2023 год
просто лучший.
Топ как всегда.
Полезно, спасибо!
как всегда супер. Зделай видео пo GraphGL + React пажалустаааааааа
И туда однажды доберемся)
Отлично! Наверное, то что искал.
А как реализовать такой функционал у меню, чтобы оно автоматически прокручивалось к "активным" пунктам (которые не вмещаются на экране), при скроллинге страницы?
очень полезная информация!
Круть, видел данную. апишку на инфинит скролле в реакте
Спасибо за видео, Михаил! Не знаю почему, но у меня rootMargin срабатывает только если прописано одно значение, например, rootMargin: "50px". Если пишу, например, rootMargin: "50px 0px 0px 0px" rootMargin не работает 🙃 Поделитесь если кто-то столкнулся с подобным и нашел решение.
Спасибо. Полезно
Очень нравиться твоя подача! Но это мне сломало мозги, пойду дальше учить html/css/js xD Когда нибудь это тоже пойму! Спасибо за хорошие уроки!
Супер)
Спасибо!
ооо, круто, спасибо
очень крутое видео
Большое спасибо за вашу работу.
Хотел спросить что на сегодняшний день лучше учить JOI или YUP.
и может снимите ролик на эту тему в нете я нашел только англоязычные ролики
thnx fr th vd, круто
А если у тебя элемент на первом экране, т.е. по умолчанию пересечён, будешь от обратного идти или по старинке отслеживать позицию скролла? Ну и хотелось бы увидеть пример с root не null
Привет из Узбекистана! пожалуйста, сделайте полное видео о наборе инструментов redux toolkit, об использовании его с почтальоном. Заранее спасибо !
С каким почтальоном? :)
@@mishanep Печкиным, полагаю:)))
ой Извините Я допустил ошибку ): с postman
@@abdulvahhabakbarov7850 postman обычно используется бэкенд разработке для написание рест запросов. Redux toolkit это стейт менеджер точнее загатовка для редукса
Internet Explorer хотя бы 11 поддерживал... а так да, круто и библиотеки не нужны, спасибо!
Сочувствую, если вам приходится поддерживать IE.
Михаил, подскажите пожалуйста, как реализовать пример с якорным меню в React. Если я правильно понимаю, то там нужно использовать API react-intersection-observer. Вот с ленивой загрузкой изображений и запуск/остановка видео у меня получилось сделать, а вот с якорным меню некий ступор возник. Буду признателен, если покажете решение.
Здесь надо посидеть-подумать-погуглить. На первой напрашиваются два решения: либо хранить текущее положение в сторе и обновлять его через обзервер, либо использовать роутинг и через обзервер обновлять url по достижению якоря. Но вполне возможно есть более элегантное решение.
@@mishanep я пробовал через урл связать и обновлять якорь в урле, но фишка в том, что когда меняешь якорь в урле, то страница сразу сама начинает скроллится до установленного якоря (как будто сменился адрес (а он ведь и правда сменился, там теперь другой якорь) и он открывает новую страницу ).
Т.е. доскроллил то границы секции с якорем, якорь в урле сменился и бац, браузер делает автоскролл на начало этой секции с якорем.
А как сделать так, чтобы при скролле наврех обзёрвер отарабатывал, когда элемент пересекает своей верхней частью верх экрана (и уходит дальше наверх за пределы экрана), а при скролле вниз, обзёрвер отрабатывает тогда, когда элемент наоборот только начинает появляться сверху (то есть пересекает своей нижней частью верхнюю чать экрана)?
Как я понимаю, для этого в первом случае обзёрвер должен срабатывать при threshold: 1 (условно будем считать, что высота элемента примерно равна высоте viewport'a), а во втором случае при threshold: 0. И вот как это совместить? Я пока не смог придумать...
Вроде все логично и понятно, а потом оказывается, что intersectionRatio возвращает не процент, который занимает элемент относительно рута, а процент относительно самого элемента. То есть, если секция очень длинна, она может перекрыть почти весь вьюпорт, но intersectionRatio будет меньше 0.5 %)
Привет!!! А можете сделать видео как в React такое использовать?
Приветствую!
Для Реакта есть удобная библиотека react-intersection-observer. Я думал было снять видео с ее использованием, но реализовал всё намного проще и по-другому =) Тут всегда стоит вопрос, что мы хотим сделать, и уже под него подбираем инструменты.
th-cam.com/video/PGW36uIVggM/w-d-xo.html
@@mishanep Привет!!! Подскажите пожалуйста, какой командой стартануть проект? При старте npm start запускается, но пишет --- Note that the development build is not optimized.
To create a production build, use yarn build.
@@КириллСмирнов-ь5ъ вы всё правильно делаете. Это не ошибка. Уведомление просто уведомляет, что в дев режиме файлы не оптимизированы. Это нормально, так оно быстрее собирается для изменений и отладки. После npm run build или yarn build собирается продакшн вариант приложения, он оптимизирован.
@@mishanep Спасибо за ваши видео!!!
а как же поисковые роботы? ведь не видя картинок он не сможет их проанализировать
Это не всегда требуется. Сегодня множество сайтов с бесконечным скроллом и все картинки всё равно никогда не будут проиндексированы. Кроме того, есть разные подходы к ленивым картинкам, изначально картинка может быть отрисована в очень плохом качестве, и обновлена при подскролле к ней. У меня было видео об этом.
Спасибо за ваш труд! Очень полезная информация!
Спасибо!