📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь: 💬 t.me/friendlyFrontendChat Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Большое тебе спасибо за твоё время и знания которыми ты делишься бесплатно. Я надеюсь тебе хватит рвения и время закончить данный курс полностью. Очень классная подача и простым языком, понимаешь всё с первого раза. Ещё раз спасибо тебе просто огромнейшее !!
Супер, просто пушка, еще и с полезным примером в конце, так еще и не просто функциями, а классом (в чем как раз из-за недостатка практики и есть пробелы😅), ЛАЙК!!!
Саша, есть ошибка (14:09). Если верить документации, свойство isPrimary «указывает, является ли указывающее устройство основным для данного типа» и не отражает очерёдность нажатий в мультитаче
Хм, спасибо за комментарий! Давай попробуем докопаться до истины. При составлении плана и материалов для этого урока, одним из источников был этот ресурс: learn.javascript.ru/pointer-events Там как раз есть такой момент: isPrimary - равно true для основного указателя (первый палец в мульти-тач). И чуть ниже идёт подробная информация про мульти-тач: Вот что происходит, когда пользователь касается сенсорного экрана в одном месте, а затем в другом: При касании первым пальцем: происходит событие pointerdown со свойством isPrimary=true и некоторым pointerId. При касании вторым и последующими пальцами (при остающемся первом): происходит событие pointerdown со свойством isPrimary=false и уникальным pointerId для каждого касания.
крутанский канал и очень полезные видео! было бы еще очень и очень круто какие-нибудь мастерклассы делать - по свг, например, верстке сложных компонентов или анимации на js
Про новые pointer-события первый раз услышал, круто, спасибо! И драг-н-дроп крутой, жаль, 90% кода списывал, т.к. только недавно познакомился с классами в целом. Вот, думаю, где практику с классами себе добыть? Буду смотреть дальше)
Отличная реализация, только подход с методами в addEventListener мне не нравится. Так ты никогда от них больше не отпишешься. Самый лучший способ в таких ситуациях - делать методы (обработчики событий) полями, в которых будет лежать стрелочная функция. Так и контекст останется на месте и ссылка не потеряется. А так круто, молодец)
Для использования в реальных проектах, нужно добавить защиту от алертов и иных смен фокуса окна браузера. Иначе, после отпускания указателя, когда вернемся в браузер, "еда" будет таскаться при отпущенном указателе. Этот баг даже в фигме до сих пор не исправлен😅
И еще, лучше ставить захват мыши, чтобы при перетаскивании, даже при выходе указателя за пределы документа, перемещение продолжалось (при этом, контролируя не выход границы объекта за пределы документа)
Да, хуже. Классы лучше структурируют код. Можешь про ООП почитать, будет больше понимания преимуществ классов над обычными функциями. Если кратко, то по одному шаблону можно реализовать логику любых UI-компонентов. На чисто функциях всегда будет каша в коде, даже если запихнуть функции в функции, а-ля initDnD.
Если будете повторять пример с DND, не забудьте добавить в стили: *_img { pointer-events: none; }_* . Иначе не будет работать, а в видео про это не сказано.
Да, про это сказать забыл, но в стилях в демке это свойство для изображений было указано. В описании к видео есть ссылка на репозиторий с кодом, вот конкретно тот самый файл стилей: github.com/aleksanderlamkov/js-course/blob/main/34.%20JavaScript%20%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F%20%D0%BC%D1%8B%D1%88%D0%B8%20%D0%B8%20%D1%83%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8F,%20Drag%20and%20Drop%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82/drag-and-drop/styles.css
Зачем многие просят React? Выучите сначала уверенно JS , TS, разберитесь с ООП, SOLID. Когда знаешь хорошо основы, то выучить библиотеку не так сложно. А то классы увидели, ой а что это? Ой, а обязательно так? Да обязательно! А можно реакт? можно! Но потом😅
Какой кошмар. Как ты выдержал 17 минут моей речи вообще? А если без шуток, я бы на твоем месте только нейтивов и слушал, раз с языком у тебя всё так хорошо. Контента же во много раз больше.
Не переживай, их тоже слушаю, типичная реакция, я неуч, исправляться не собираюсь, спАн, дрАг, "загребущая рука" вообще убило, как бы технология drag and drop о перетаскивании, мог бы сказать перетаскивающая, или хватающая. Короче, учись студент. А если не знаешь, не агрессируй. Принимай критику, исправляйся.
Да какая агрессия, что ты. Это от тебя скорее исходит. За критику, конечно, спасибо, но критиковать тоже ведь нужно правильно - ты это делать не умеешь, тебе тоже стоит этому поучиться.
@@locktar-o-dark5664 Фу, какой ты душный. Через экран аж плохо стало. Чтобы ты обосрался поносом - вот тебе мой топ: 1. composable - компосабле 2. href - хрю (не все поймут) 3. middleware - мидлеваре 4. node.js - ноде 5. Vite - витя 6. pinia - пенёк 7. - пиктуре
📌 Друзья, в телеграмме у нас есть отдельный чат, где вы можете задать вопрос по фронтенд-разработке и вам постараются помочь:
💬 t.me/friendlyFrontendChat
Если вам это интересно, присоединяйтесь, задавайте вопросы и помогайте другим 🙂
Большое тебе спасибо за твоё время и знания которыми ты делишься бесплатно. Я надеюсь тебе хватит рвения и время закончить данный курс полностью. Очень классная подача и простым языком, понимаешь всё с первого раза. Ещё раз спасибо тебе просто огромнейшее !!
Так и запишем "Загребущая рука" 😄 Спасибо за твои уроки и твой опыт, который ты передаёшь нам 🥰
Пример в конце невероятно крутой. Но печально осознавать, что сам на данном этапе до такого не додумался бы
Очень полезное видео. И пример не абстракция какая-то, а хороший пример, реальный, спасибо огромное
Супер, просто пушка, еще и с полезным примером в конце, так еще и не просто функциями, а классом (в чем как раз из-за недостатка практики и есть пробелы😅), ЛАЙК!!!
очень интресная и полезная информация
Спасибо! Классное видео!
Саша, есть ошибка (14:09). Если верить документации, свойство isPrimary «указывает, является ли указывающее устройство основным для данного типа» и не отражает очерёдность нажатий в мультитаче
Хм, спасибо за комментарий! Давай попробуем докопаться до истины.
При составлении плана и материалов для этого урока, одним из источников был этот ресурс:
learn.javascript.ru/pointer-events
Там как раз есть такой момент:
isPrimary - равно true для основного указателя (первый палец в мульти-тач).
И чуть ниже идёт подробная информация про мульти-тач:
Вот что происходит, когда пользователь касается сенсорного экрана в одном месте, а затем в другом:
При касании первым пальцем:
происходит событие pointerdown со свойством isPrimary=true и некоторым pointerId.
При касании вторым и последующими пальцами (при остающемся первом):
происходит событие pointerdown со свойством isPrimary=false и уникальным pointerId для каждого касания.
@@AleksanderLamkov Понял, значит я неверно истолковал описание. Спасибо, буду знать
крутанский канал и очень полезные видео!
было бы еще очень и очень круто какие-нибудь мастерклассы делать - по свг, например, верстке сложных компонентов или анимации на js
Про новые pointer-события первый раз услышал, круто, спасибо!
И драг-н-дроп крутой, жаль, 90% кода списывал, т.к. только недавно познакомился с классами в целом. Вот, думаю, где практику с классами себе добыть? Буду смотреть дальше)
На классах будем писать код в следующем мастер-классе, который выйдет в течение месяца.
Спасибо!
Отличная реализация, только подход с методами в addEventListener мне не нравится. Так ты никогда от них больше не отпишешься. Самый лучший способ в таких ситуациях - делать методы (обработчики событий) полями, в которых будет лежать стрелочная функция. Так и контекст останется на месте и ссылка не потеряется. А так круто, молодец)
Для использования в реальных проектах, нужно добавить защиту от алертов и иных смен фокуса окна браузера. Иначе, после отпускания указателя, когда вернемся в браузер, "еда" будет таскаться при отпущенном указателе. Этот баг даже в фигме до сих пор не исправлен😅
И еще, лучше ставить захват мыши, чтобы при перетаскивании, даже при выходе указателя за пределы документа, перемещение продолжалось (при этом, контролируя не выход границы объекта за пределы документа)
привет , после окончание курса сразу будет мастер класс ? В мастер классе будет вестка сайта с добавлением js или создание мини приложение
Привет! Не сразу, не успею подготовить материал. Будет через недели 2 после окончания курса. В этом МК будет верстка с большим количеством JS.
Спасибо за урок! ❤А сколько видео вы планируете включить в этот курс по js, тоесть сколько ещё тем вы планируете разобрать в рамках курса? :>💐
Ещё около 10 видео. На данный момент 43 урока в черновиках, возможно будет ещё 44-й.
@@AleksanderLamkov Спасибо за ваш труд! Любим вас❤🌹
@@AleksanderLamkov Следующий React ?))
Да, но не скоро. Ещё много другого контента будет.
если не классами, а функциями писать, будет хуже читаться код? или какой плюс в данном примере писать на классах?
Да, хуже. Классы лучше структурируют код. Можешь про ООП почитать, будет больше понимания преимуществ классов над обычными функциями.
Если кратко, то по одному шаблону можно реализовать логику любых UI-компонентов. На чисто функциях всегда будет каша в коде, даже если запихнуть функции в функции, а-ля initDnD.
Мурыча на тебя не хватает, жди, натравлю 😅
Если будете повторять пример с DND, не забудьте добавить в стили: *_img { pointer-events: none; }_* . Иначе не будет работать, а в видео про это не сказано.
Да, про это сказать забыл, но в стилях в демке это свойство для изображений было указано.
В описании к видео есть ссылка на репозиторий с кодом, вот конкретно тот самый файл стилей:
github.com/aleksanderlamkov/js-course/blob/main/34.%20JavaScript%20%D1%81%D0%BE%D0%B1%D1%8B%D1%82%D0%B8%D1%8F%20%D0%BC%D1%8B%D1%88%D0%B8%20%D0%B8%20%D1%83%D0%BA%D0%B0%D0%B7%D0%B0%D1%82%D0%B5%D0%BB%D1%8F,%20Drag%20and%20Drop%20%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%BD%D0%B5%D0%BD%D1%82/drag-and-drop/styles.css
grab - если сущ. то это Захват
Зачем многие просят React? Выучите сначала уверенно JS , TS, разберитесь с ООП, SOLID. Когда знаешь хорошо основы, то выучить библиотеку не так сложно. А то классы увидели, ой а что это? Ой, а обязательно так? Да обязательно! А можно реакт? можно! Но потом😅
Честно говоря, реально сложно. Когда только узнал что такое классы вообще и тут такого зверя собирают >_
17:13 иэмджи, ты серьёзно? То есть ты даже английский алфавит не смог выучить. Мдэ.
Какой кошмар. Как ты выдержал 17 минут моей речи вообще?
А если без шуток, я бы на твоем месте только нейтивов и слушал, раз с языком у тебя всё так хорошо. Контента же во много раз больше.
Не переживай, их тоже слушаю, типичная реакция, я неуч, исправляться не собираюсь, спАн, дрАг, "загребущая рука" вообще убило, как бы технология drag and drop о перетаскивании, мог бы сказать перетаскивающая, или хватающая. Короче, учись студент. А если не знаешь, не агрессируй. Принимай критику, исправляйся.
Да какая агрессия, что ты. Это от тебя скорее исходит. За критику, конечно, спасибо, но критиковать тоже ведь нужно правильно - ты это делать не умеешь, тебе тоже стоит этому поучиться.
@@AleksanderLamkov короче, начни с алфавита, а то не понятно, как ты такой серьёзный код пишешь, не зная его.
@@locktar-o-dark5664 Фу, какой ты душный. Через экран аж плохо стало.
Чтобы ты обосрался поносом - вот тебе мой топ:
1. composable - компосабле
2. href - хрю (не все поймут)
3. middleware - мидлеваре
4. node.js - ноде
5. Vite - витя
6. pinia - пенёк
7. - пиктуре
Спасибо за уроки! Какие у вас дальнейшие планы после курса по js и вёрстке сайта с помощью js?
Npm, Git, сборщик проектов Vite, МК по верстке с Vite, видео по новинкам CSS, UI компоненты на JS
@@AleksanderLamkov спасибо
Спасибо!