Есть варианты по улучшению? Пиши в комментариях! Переписать код можно с экрана, ну а для ленивых готовый результат урока ищи на патреоне по ссылке ниже 👇 🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle 🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle) 🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat) 🔴 Facebook: facebook.com/freelancerlifestyle 🔴 Instagram: instagram.com/freelancer.lifestyle
Для фиксированных элементов лучше использовать margin(в таком случае элемент будет виден весь, в случае с padding 17px элемента будут обрезаны) Timeout для закрытия окна лучше получить с помощью window.getComputedStyle(в этом случае его не нужно хардкодить каждый раз при смене длительности в стилях) или можно использовать transitionend ивент, чтобы быть в курсе, что анимация закончилась и можно что-то сделать Вообщем для улучшений большое поле деятельности. Очень хорошо, что обращайте внимание на такие мелочи как скачки контента, не многие на это обращают внимание, к сожалению.
Век живи век учись... Вроде я не первый год занимаюсь разработкой сайтов, но смотря твои уроки каждый раз нахожу для себя что-то новое. Довольно долго использовал Bootstrap, только лишь из-за его быстрых решений с теми же pop-up, готовой сеткой и прочими наработками и сквозь зубы мирился с кучей лишнего, что с ним подключалось. И только благодаря твоим понятным урокам и наработкам, я отказался от него и начал создавать свои заготовки. Спасибо за твой вклад!
Спасибо за видео, очень полезно! Сам как-то делал свою реализацию модальных окон. Хотел рассказать с какими проблемами я столкнулся (ведь нет предела совершенству :) 1. Нажмите курсором в окне и проведите не отпуская до фона окна и отпустите :). Окно закроется, так как для клика считается общий предок. Получается, например если в окне есть форма - выделяешь текст и случайно уходишь за пределы модалки - окно закрывается :) 2. Фокус не замыкается в окне. Если при открытой модалке нажимать Tab, то фокус будет переходить под неё, страница будет скролится. 3. В IE11 Нижний margin у модалки не работал, оно прилипало к низу. Но в принципе, пользователи IE это заслужили :) 4. Если body задать overflow:hidden, в сафари IOS 11, если в модалке есть инпут - будет баг, что курсор уедет с input'a, но в IOS 12 это уже починили, рекомендуют ставить для body тоже position:fixed, но тогда возникает проблема с сохранением прокрутки, думаю сейчас можно уже забить :) 5. Если окну не давать display:none, то если в модалке проигрывается видео - то оно не выключается при закрытии окна, нужен доп. js код. Вроде бы всё рассказал :), но в любом случае у вас отличное решение, особенно понравилось, что даётся сдвиг для всех fixed элементов, чтобы они не прыгали :)
@@FreelancerLifeStyle я могу дополнить идеи... 1. Что бы не было "мигания" затемнения при переключении МЕЖДУ окнами, можно затемняющий фон повесить на появляющийся body.lock::after , а для красоты можно еще добавить размытие для body.lock .wrapper 2. Пока основной баг - это body overflow:hidden - контент, естественно, скачет наверх. я решил переназначением $(window).scrollTop( lastTop ); , но тогда появляется проблема с фиксированных хедером, т.к. он лепится к верху body... не очень красиво. Тогда надо ещё и для хедера изменить позицию top, но это шаг в сторону гемороя, а не оптимизации... Пока решения не нашел. 3. Ещё я бы добавил всё таки какую то проверку, типа if(popupLink.tagName == 'BUTTON') и тогда брать не href а value, ведь часто попап вешают на button, а ссылка - это всё таки переход.
"1. Нажмите курсором в окне и проведите не отпуская до фона окна и отпустите" - лечится заменой 'click' на 'mousedown' , но я люблю делать нажатие на mouseup, так что клик в "молоко" делаю отдельно.
Как всегда, все чётко и красиво подано.. Я вообще чел ленивый на комменты, но после просмотра, не могу не отметиться. ПОПАПЫ, ВСЕМ ПОПАПАМ - ПОПАПЫ !!!
Отличные уроки! Сначала думал очередной треш обрывками, а тут детально с нуля, доступно и не нудно. Хочется смотреть и смотреть, а то в других видео засыпаю через 5 минут после монотонности. Подписался на канал. Очень рад! Спасибо!
Спасибо большое за простое и понятное видео! Целый день пыталась сделать модальное окно без JS, когда доделала - нашла этот материал. Оказывается можно было не мучиться!
Чтобы скрыть попап, не нужно дополнительно писать id=header для display-fixed элемента. Достаточно в ссылке написать href="##" этот якорь не приведёт к скроллу к началу страницы
Очень понятно и толково! Спасибо тебе за работу, продолжай в том же духе! Ещё меся назад казалось всё это страшным сном, а сейчас уже сам делаю лендинги и даже с попАпами)) Всё твоя заслуга, спасибо, бро!
vertical-align: top. Я счастлив, что ты появился в моей жизни )))))))))) Не знал как убрать эту белую полоску, даже воображения не хватало, как это гуглить )))
Сейчас прохожу платный курс по фронтенд-разработке. Был приятно удивлен, когда это видео порекомендовал один из наставников, и сказал что в свое время оно ему очень помогло. Жека, тебе огромная благодарность за твой труд, просто лучший!!! Как говорится тренер тренеров, the best of the best! 💪🔥
Жека , ты за мой лайк это сделал? Ахах я вчера только написал, больше JavaScript господа!Красава, я доволен ! Давай потихоньку теперь народ перетегивай с верстки на js, да и вообще начинай создавать уроки по програмированию, твоим доходчивым языком. На одной вёрстке далеко не уедешь. Я вот например месяца три назад всю голову сломал, как сделать фотогалерею в модальном окне , и внутри неё слайдер, на чистом js.😁😁💪Лайк ! Давай Жека тащи js, тащи фреймоврки с библиотеками vue ,react,angular, давай графику на js, давай крутую анимацию на js. Прямо чтоб дух захватывало при просмотре.
@@velessn дядь , ты хорошо прочитал, выше , что я написал? Я месяца 3 назад всю голову сломал, как это на нативе сделать, но сделал уже и без Жеки ) , я тебе другой варик предложу, который встречается частенько- тебя есть маленькое превью фото, ну типа портфолио с твоими работами.Ты-попробуй на js нативном в это превью засунуть одну из твоих работ,ну или какой нить скриншот для подобия с хрома (целой страницы), естественно с ховером( где тебе удобно, ),при ховер эффекте у тебя должно появиться описание к работе, и внутри этого попапа реализуй слайдер из работ),без слика, без овл-крусели.Прежде чем писать что-то, предлагаю- внимательно прочитать комментарий ) и да кстати- Я эту идею смог реализовать)заказчик упёрся ,как баран:"Хочу ,так и все!". Или в канвас частицы шестигранника попробуй на нативном js- нарисуй и засунь в него css туман, а с верху положи игровой интерфейс, например на вьюшке, с крутой анимацией). Но и собственно про комент,на нативе хардкорнее,интереснее,веселее и производительней.
Попапы это круто! Кстати, часто встречаются в макетах звёздные рейтинги, можно было бы о них видос запилить. Это так, если тебе понравится идея. Видос как всегда очень информативный и полезный!
Спасибо огромное, но чтобы на js работало, пришлось несколько раз с нуля попереписывать, побеситься что не работает, но в итоге всё работает и я так рад :)
Большое спасибо за видео, как всегда очень вовремя, как раз нужно для работы) Еще хотелось бы видео про структуру файлов для многостраничного сайта, хотя бы кратко. Знаю что уже не раз просили тебя о таком, попрошу и я еще раз))
Я ніколи не любив JS за незручний синтаксис та незрозумілу структуру, але ваше роз'яснення дало мені надію на те, щоб навчитись ним користуватись. Дякую за вашу діяльність!
Жека, как всегда реализация на высоте. Особо порадовала внимательность к мелочам и использование VanillaJS, но есть пару вопросов: 1. Почему при проходе по массиву используешь индексы? Есть же for .. of или forEach. С ними не нужно делать проверку на длину массива 2. Очень удивился использованию числового кода при прослушке события нажатия клавиши. Есть же более читабельный вариант event.code === 'Escape' И возможно баг небольшой в твоём коде. При вызове popupOpen ты каждый раз вешаешь новый обработчик на 'click', а эту функцию ты будет вызывать не один раз. В итоге после продолжительного времяпрепровождения на сайте будет висеть целая куча одинаковых обработчиков, которые будут жрать процессор и память. Возможно я ошибаюсь и в стандарте js как то предусмотрен этот момент. А так видос топ. Продолжай в том же духе. P.S. стало гораздо приятней смотреть на VS code вместо sublime
Действительно, при многократном открытии/закрытии попапа на нём будут накапливаться обработчики. Думаю, самый простой способ решить эту проблему - вынести добавление обработчика попапу из функции popupOpen. Логично добавлять его там же, где добавляется обработчик на ссылку, открывающую попап.
Когда то, в 2008 году, я ехал на поезде с будущей женой в венгерский Дебрецен, и наш состав менял колеса на европейскую колею ... это был ЧОП !!! а сейчас, в 2020 я смотрю лучший контент по верстке для вайтишников...)) Женя спасибо огромное за твои уроки!!
Спасибо! Смотрю твои уроки. Следующее большое дело буду оформлять в html. Ты делаешь крутую работу. Знай, что у тебя есть бесплатная юридическая консультация по любым вопросам.
Классно разобрано про полосу прокрутки. Может кому-то будет полезно: Быстрый и аккуратный крестик можно получить из символа +, повернув его на 45 градусов через транзишн ротэйт. Нод-лист удобнее перебирать циклом forEach, чем for. Не поленитесь разобраться с ним. Вместо прослушивателя событий на каждую ссылку лучше сделать один прослушиватель на секцию или даже документ, а внутри него делегировать условиями на что именно и как срабатывать. Что-то подобное как тут в функции закрытия модалки при клике мимо окна. Прямо в том же прослушивателе можно для всех остальных кликов на странице прописать остальные условия. Смотрите тему делегирование. Получить боди можно без квериселектора, просто document.body.
Есть варианты по улучшению? Пиши в комментариях!
Переписать код можно с экрана, ну а для ленивых готовый результат урока ищи на патреоне по ссылке ниже 👇
🔴 Получить доступ к плюшкам + поддержать канал: www.patreon.com/freelancerlifestyle
🔴 Telegram канал: t.me/freelancer_lifestyle (teleg.run/freelancer_lifestyle)
🔴 Telegram чат по верстке: t.me/flschat (teleg.run/flschat)
🔴 Facebook: facebook.com/freelancerlifestyle
🔴 Instagram: instagram.com/freelancer.lifestyle
Для фиксированных элементов лучше использовать margin(в таком случае элемент будет виден весь, в случае с padding 17px элемента будут обрезаны)
Timeout для закрытия окна лучше получить с помощью window.getComputedStyle(в этом случае его не нужно хардкодить каждый раз при смене длительности в стилях) или можно использовать transitionend ивент, чтобы быть в курсе, что анимация закончилась и можно что-то сделать
Вообщем для улучшений большое поле деятельности. Очень хорошо, что обращайте внимание на такие мелочи как скачки контента, не многие на это обращают внимание, к сожалению.
Евгений привет!, Круто как всегда! Сейчас прикину, как сделать ещё вариант, без js . Если не возражаешь, сюда скину!
Спасибо! Прогоню все на практике
Конечно, давай)
Есть один вариант.Продолжение курса фронтенд и видеоуроки по джаваскрипт
Это самый лучший канал про веб-фронтенд разработку где видео выходят регулярно, не скучные и отличного качества!!
Спасибо!
Единственный канал на котором ставлю лайк еще до просмотра, потому что уверен, что урок сделан на высшем уровне! Жека, так держать!
Спасибо!
да да. я тоже жадный на лайки. на его канал нужно добавить еще несколько таких кнопок.
Век живи век учись...
Вроде я не первый год занимаюсь разработкой сайтов, но смотря твои уроки каждый раз нахожу для себя что-то новое.
Довольно долго использовал Bootstrap, только лишь из-за его быстрых решений с теми же pop-up, готовой сеткой и прочими наработками и сквозь зубы мирился с кучей лишнего, что с ним подключалось.
И только благодаря твоим понятным урокам и наработкам, я отказался от него и начал создавать свои заготовки.
Спасибо за твой вклад!
Я очень рад!
Зачем подключать весь бутстрап? На странице кастоматизации выбираешь только сетку и её респонз и генеришь сборку только с этим.
Спасибо за видео, очень полезно! Сам как-то делал свою реализацию модальных окон. Хотел рассказать с какими проблемами я столкнулся (ведь нет предела совершенству :)
1. Нажмите курсором в окне и проведите не отпуская до фона окна и отпустите :). Окно закроется, так как для клика считается общий предок. Получается, например если в окне есть форма - выделяешь текст и случайно уходишь за пределы модалки - окно закрывается :)
2. Фокус не замыкается в окне. Если при открытой модалке нажимать Tab, то фокус будет переходить под неё, страница будет скролится.
3. В IE11 Нижний margin у модалки не работал, оно прилипало к низу. Но в принципе, пользователи IE это заслужили :)
4. Если body задать overflow:hidden, в сафари IOS 11, если в модалке есть инпут - будет баг, что курсор уедет с input'a, но в IOS 12 это уже починили, рекомендуют ставить для body тоже position:fixed, но тогда возникает проблема с сохранением прокрутки, думаю сейчас можно уже забить :)
5. Если окну не давать display:none, то если в модалке проигрывается видео - то оно не выключается при закрытии окна, нужен доп. js код.
Вроде бы всё рассказал :), но в любом случае у вас отличное решение, особенно понравилось, что даётся сдвиг для всех fixed элементов, чтобы они не прыгали :)
Конечно работы еще хватает, но начало положено, спасибо!
@@FreelancerLifeStyle я могу дополнить идеи...
1. Что бы не было "мигания" затемнения при переключении МЕЖДУ окнами, можно затемняющий фон повесить на появляющийся body.lock::after , а для красоты можно еще добавить размытие для body.lock .wrapper
2. Пока основной баг - это body overflow:hidden - контент, естественно, скачет наверх. я решил переназначением $(window).scrollTop( lastTop ); , но тогда появляется проблема с фиксированных хедером, т.к. он лепится к верху body... не очень красиво. Тогда надо ещё и для хедера изменить позицию top, но это шаг в сторону гемороя, а не оптимизации... Пока решения не нашел.
3. Ещё я бы добавил всё таки какую то проверку, типа if(popupLink.tagName == 'BUTTON') и тогда брать не href а value, ведь часто попап вешают на button, а ссылка - это всё таки переход.
"1. Нажмите курсором в окне и проведите не отпуская до фона окна и отпустите" - лечится заменой 'click' на 'mousedown' , но я люблю делать нажатие на mouseup, так что клик в "молоко" делаю отдельно.
Решил вторую проблему?)
@@ROVbeard а ты решил баг с табом?
Спасибо. Все очень четко и без воды. Да и приятно смотреть без хрюканей и чая с плюшками,и паузами на котов. Однозначно лайк.
Спасибо!
Це напевно не реально вивчити, але треба пробувати. Дякую за вашу роботу!
Я вас смотрел еще когда у меня не было работы, а теперь я работаю и применяю ваши знания на практике
Как всегда, все чётко и красиво подано.. Я вообще чел ленивый на комменты, но после просмотра, не могу не отметиться. ПОПАПЫ, ВСЕМ ПОПАПАМ - ПОПАПЫ !!!
Спасибо!
Лучший, Жека! Как раз во время урок! Начал верстать макеты с модалками и твое видео вышел!
Супер, я рад!
Як завжди ВОГОНЬ!!! З нетерпінням чекаю нове відео.
Дякую
Жека. Покажи як зробити слік слайдер в табах.
Господи, это лучший канал по верстке. Спасибо тебе огромное!!!
Пожалуйста!
Отличные уроки! Сначала думал очередной треш обрывками, а тут детально с нуля, доступно и не нудно. Хочется смотреть и смотреть, а то в других видео засыпаю через 5 минут после монотонности. Подписался на канал. Очень рад! Спасибо!
Мужик,ну ты как всегжп лучше всех! Спасибо за урок
Ничего себе как всё заморожено!!! Гениально. Спасибо за подробные объяснения!!! Всё круто!!!
Шикарно. Спасибо большое.
Очень уважаю тех, кто заморачивается на мелочах, которые для других не критичны.
Пожалуйста!
Спасибо большое за простое и понятное видео! Целый день пыталась сделать модальное окно без JS, когда доделала - нашла этот материал. Оказывается можно было не мучиться!
Круто, это лучший канал по вёрстке! Продолжай в том же духе!
Спасибо!
@@FreelancerLifeStyle как бы завистники не стали с вами бороться)
Согласен
@@dinir1000 Что? Зачем? 🤦
Смотрел много разных видео эти уроки одни из лучших просто и понятно и съемка хорошая так держать. Спасибо!
Это гениально!!! Попап без дж это круто))))
пожалуйста!
Парень, ну ты прям очень крутой. Спасибо тебе огромнейшее за то, что делишься своими знаниями!!!!!!!!!!!!!
Лучший!
Спасибо тебе за твою работу!!!
Пожалуйста!
Чтобы скрыть попап, не нужно дополнительно писать id=header для display-fixed элемента. Достаточно в ссылке написать href="##" этот якорь не приведёт к скроллу к началу страницы
Круть спасибо!
Да круть спасибо а просто задал левый класс. но этот способ быстрее.
Только валидатор будет в шоке)
Ребят! В топ его!
Огромное спасибо!
Огромное тебе спасибо друг за все что ты делал и делаешь для людей. Ты лучший!!!
Здорово! Комар носа не подточит! Очень подробно и аккуратно!
JS всегда можно улучшить, а так спасибо!
вот это проработка задачи. Век живи век учись :)
Спасибо!
Это настолько круто, что просто взрыв мозга!
∞ лайков в карму.
очень элегантное решение со скролом бади, очень внятное и понятное объяснение, спасибо!
ти просто красавчик ! тільки хотів гуглити як робити і тут твоє відео , супер
Я радий)
Спасибо за простые и доступные уроки. Ты настоящий герой!
Ты все делаешь креативно и профессионально. Ты крутой 👍 . Я все твои видео посмотрел.
Продолжай снимать пж
Спасибо!
@@FreelancerLifeStyle Рад что ответил. Ты мой самый лучший учитель.
Лайки
Супер 👍🏻 ось це-то подача інформації... Дякую
Спасибо большое! Крутяк, как обычно !!!
Пожалуйста!
просто лучший ! шикарный разбор конкретной задачи без лишней "воды"
Топ, как раз искал как сделать попап окна. И тут твое видео )
Я рад!
Словами не передать, как Вы помогли )
Как всегда на высоте! Спасибо большое!
Пожалуйста!
Очень вовремя, в принципе как всегда) Спасибо большое!
Пожалуйста!
Очень понятно и толково! Спасибо тебе за работу, продолжай в том же духе! Ещё меся назад казалось всё это страшным сном, а сейчас уже сам делаю лендинги и даже с попАпами)) Всё твоя заслуга, спасибо, бро!
Я рад!
Годнота подъехала! Палец вверх 👍
Спасибо!
vertical-align: top. Я счастлив, что ты появился в моей жизни )))))))))) Не знал как убрать эту белую полоску, даже воображения не хватало, как это гуглить )))
Я рад)
display:block для img тоже помогает
Николай Станкевич нет не помогает
Женя , спасибо за твою отзывчивость) . Мы просим , ты тут же выпускаешь нужный видосик. Самый-самый канал с обратной связью))
Пожалуйста!
Как всегда супер!
Спасибо!
Годно! Спасибо большое!
Пожалуйста!
В черговий раз виручило твоє відео коли зловив затик! Дякую!
A very detailed description of getting started with js
Женя, спасибо большое за видос!
Пожалуйста!
Легко и непринуждённо! Блестящий ролик!
Жека, у тебя самый лучший канал! Всё очень круто рассказываешь и показываешь, а главное - ты такой жизнерадостный и это вдохновляет! Спасибо!
Такой радостный, когда видишь готовый результат)
я подписуш тебе а ты мне пж
Женя, ты пушка гонка !!!
Круто показываешь, объясняешь.
Продолжай так-же 🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀🚀
Женя, спасибо!
Пожалуйста!
Женя, твой канал это кладезь знаний! спасибо)
Отличное видео, теперь я научился делать модальные окна, однозначно лайк!
Спасибо большой
Больше видео по нативным JS
Спасибо!
Невероятно крутые уроки! Спасибо!
Пожалуйста!
Сейчас прохожу платный курс по фронтенд-разработке. Был приятно удивлен, когда это видео порекомендовал один из наставников, и сказал что в свое время оно ему очень помогло.
Жека, тебе огромная благодарность за твой труд, просто лучший!!!
Как говорится тренер тренеров, the best of the best! 💪🔥
Женя, ты очень крутой! Спасибо тебе большое!!!
Топчик, спасибо)
Побольше JS для развития молодежи)))🤤
Будут уроки
Жека , ты за мой лайк это сделал? Ахах я вчера только написал, больше JavaScript господа!Красава, я доволен ! Давай потихоньку теперь народ перетегивай с верстки на js, да и вообще начинай создавать уроки по програмированию, твоим доходчивым языком. На одной вёрстке далеко не уедешь. Я вот например месяца три назад всю голову сломал, как сделать фотогалерею в модальном окне , и внутри неё слайдер, на чистом js.😁😁💪Лайк ! Давай Жека тащи js, тащи фреймоврки с библиотеками vue ,react,angular, давай графику на js, давай крутую анимацию на js. Прямо чтоб дух захватывало при просмотре.
Что-то придумаю))
А ты подписался на patreone чтобы тащилось легче? а то все и сразу и на халяву)
@@velessn дядь , ты хорошо прочитал, выше , что я написал? Я месяца 3 назад всю голову сломал, как это на нативе сделать, но сделал уже и без Жеки ) , я тебе другой варик предложу, который встречается частенько- тебя есть маленькое превью фото, ну типа портфолио с твоими работами.Ты-попробуй на js нативном в это превью засунуть одну из твоих работ,ну или какой нить скриншот для подобия с хрома (целой страницы), естественно с ховером( где тебе удобно, ),при ховер эффекте у тебя должно появиться описание к работе, и внутри этого попапа реализуй слайдер из работ),без слика, без овл-крусели.Прежде чем писать что-то, предлагаю- внимательно прочитать комментарий ) и да кстати- Я эту идею смог реализовать)заказчик упёрся ,как баран:"Хочу ,так и все!". Или в канвас частицы шестигранника попробуй на нативном js- нарисуй и засунь в него css туман, а с верху положи игровой интерфейс, например на вьюшке, с крутой анимацией).
Но и собственно про комент,на нативе хардкорнее,интереснее,веселее и производительней.
Как всегда топчик!) Сложно, но интересно)
Спасибо!
Музыка в начале просто бомба. Сразу лайк
Спасибо большое, ваш урок мне очень помог.
Я рад!
ОФИГЕННЫЙ урок Жека
Попапы это круто! Кстати, часто встречаются в макетах звёздные рейтинги, можно было бы о них видос запилить. Это так, если тебе понравится идея. Видос как всегда очень информативный и полезный!
Рейтинг обязательно будет!
Лайк, просил в комментах эту тему, Евгений, вот за это спасибо, респект)
Ну что ж погнали!!! Спасибо ЖЕКА ТЫ ЛУЧШИЙ :)!!!!
Отличное видео, спасибо за подробную инструкцию! :)
Пожалуйста!
Спасибо огромное, но чтобы на js работало, пришлось несколько раз с нуля попереписывать, побеситься что не работает, но в итоге всё работает и я так рад :)
Спасибо большое за вашу работу! Отличная подача материала!
Меня удивляет Ваше виртуозное владение CSS
Круто! Спасибо, очень интересно и познавательно
Я рад!
Дружище, просто лучший
Спасибо за это видео, мне в работе оно уже не однократно пригодилось
Отлично!
Шапочка всегда вместе с нами. - услышал я, поправляя на голове шапочку из фольги...
Большое спасибо за видео, как всегда очень вовремя, как раз нужно для работы) Еще хотелось бы видео про структуру файлов для многостраничного сайта, хотя бы кратко. Знаю что уже не раз просили тебя о таком, попрошу и я еще раз))
Что-то придумаю)
Очень круто доносишь информацию!
Спасибо!
Я ніколи не любив JS за незручний синтаксис та незрозумілу структуру, але ваше роз'яснення дало мені надію на те, щоб навчитись ним користуватись. Дякую за вашу діяльність!
чувак, ты гений!
Как всегда полезно и не скучно. Спасибо за труд!!
За одни только анимации в видосе лайк, какой кайф
Жека, как всегда реализация на высоте. Особо порадовала внимательность к мелочам и использование VanillaJS, но есть пару вопросов:
1. Почему при проходе по массиву используешь индексы? Есть же for .. of или forEach. С ними не нужно делать проверку на длину массива
2. Очень удивился использованию числового кода при прослушке события нажатия клавиши. Есть же более читабельный вариант event.code === 'Escape'
И возможно баг небольшой в твоём коде. При вызове popupOpen ты каждый раз вешаешь новый обработчик на 'click', а эту функцию ты будет вызывать не один раз. В итоге после продолжительного времяпрепровождения на сайте будет висеть целая куча одинаковых обработчиков, которые будут жрать процессор и память. Возможно я ошибаюсь и в стандарте js как то предусмотрен этот момент.
А так видос топ. Продолжай в том же духе.
P.S. стало гораздо приятней смотреть на VS code вместо sublime
Спасибо! Проверю на практике.
Это все работает в ie 11 ? Назначение события точно не верное, переделаю
@@FreelancerLifeStyle не задумался о его поддержке. Увы, но судя по caniuse нет
Ну вот... но код протестить нужно, спасибо за наводку!
Действительно, при многократном открытии/закрытии попапа на нём будут накапливаться обработчики. Думаю, самый простой способ решить эту проблему - вынести добавление обработчика попапу из функции popupOpen. Логично добавлять его там же, где добавляется обработчик на ссылку, открывающую попап.
Крутейший профессионал своего дела 👍
Спасибо за новый урок, как всегда круто, понятно и коротко 10 из 10))
Когда то, в 2008 году, я ехал на поезде с будущей женой в венгерский Дебрецен, и наш состав менял колеса на европейскую колею ... это был ЧОП !!! а сейчас, в 2020 я смотрю лучший контент по верстке для вайтишников...)) Женя спасибо огромное за твои уроки!!
Хех) Пожалуйста!
Спасибо! Смотрю твои уроки. Следующее большое дело буду оформлять в html. Ты делаешь крутую работу. Знай, что у тебя есть бесплатная юридическая консультация по любым вопросам.
Спасибо большое!
спасибо, очень кстати! 🤜🤛
Пожалуйста!
Я смотрел это видео в 2021 году. Очень круто!
Как всегда отлично! Спасибо, что на чистом JS
Зачетные видео!!!
Спасибо!
5:18 тут ещё могу посоветовать использовать спецсимвол ×. Сам недавно только узнал и вот решил поделиться знаниями))
Красава, четко все по полочкам разложил. Отличное видео !
Спасибо!
Классно разобрано про полосу прокрутки.
Может кому-то будет полезно:
Быстрый и аккуратный крестик можно получить из символа +, повернув его на 45 градусов через транзишн ротэйт.
Нод-лист удобнее перебирать циклом forEach, чем for. Не поленитесь разобраться с ним.
Вместо прослушивателя событий на каждую ссылку лучше сделать один прослушиватель на секцию или даже документ, а внутри него делегировать условиями на что именно и как срабатывать. Что-то подобное как тут в функции закрытия модалки при клике мимо окна. Прямо в том же прослушивателе можно для всех остальных кликов на странице прописать остальные условия. Смотрите тему делегирование.
Получить боди можно без квериселектора, просто document.body.
Ещё проще крестик сделать - это использовать спецсимвол. В after или before content : "\2716"
Дуже дякую!!! Дуже допомогли!
Огромнейший респект!
Вообще классное видео, даже скептически подойти, вы довольно быстрои лаконично все рассказали. Хотя живой код всегда лучше. :)
идеально!!!
Дякую)
Вот это Жека, ты заморочился!!!
Жекаа что же ты делаешь со мной)!! круто!
Ахах) Спасибо!
Класс
Спасибо!