Практика JavaScript. Создаем плагин Select с нуля
Рет қаралды 87,052
3 жыл бұрынПолучить профессию Frontend разработчика -
bit.ly/3Ad6OTU
Подробнее узнать об обучении в Result School -
bit.ly/3yv0G8g
Бесплатный курс HTML & CSS - bit.ly/3yv5Gtv
Сделать 5 проектов на JavaScript - bit.ly/3yv5ESp
Я в соц сетях:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Мои паблики по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.scho. .
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
Создаем на JavaScript свой плагин Select
Про новый синтаксис:
• Что нового в JavaScrip...
Ссылка с исходниками на GitHub тут:
t.me/js_by_vladilen/212
#js #javascript
@IGBasov 3 жыл бұрын
Отличный формат, бро! Продолжай! В качестве развития темы можно в данный плагин добавить функционал поиска.
@nazarshvets7501 3 жыл бұрын
Воу , это очень круто . Такие ролики убивают мою прокрастинацию , и мотивируют изучать js . Спасибо , очень полезный контент
@user-qj4is9up4v 3 жыл бұрын
Отличный контент, отличный формат. Было бы интересно увидеть поиск с автозаполнением..
@andrewkhar4615 3 жыл бұрын
Спасибо. Формат - просто огонь! Жду ещё подобных видео! Лайк однозначно!
@Peter-vz4tb 3 жыл бұрын
О! Практика, я такое люблю. Отдельно спасибо за parceljs
@gatrianL 3 жыл бұрын
побольше бы разработку таких компонентов
@rush0kum 3 жыл бұрын
Так вам отличный пример дали, дерзайте )
@frixaco 3 жыл бұрын
Как отличный контент и великолепная подача материала! Огромное спасибо!! Буквально вчера смотрел библиотеки для dropdowna, потом сразу вспомнил про это видео. Настрою под себя и буду использовать)
@mishagarkach 3 жыл бұрын
Классное видео, все понравилось. За час столько моментов охвачено, даже scss! Спасибо.
@KlausVonStauffenberg1 3 жыл бұрын
Владилен, хочется выразить тебе огромную благодарность за твои уроки, благодаря им я нашёл свою первую работу и начал получать первые деньги. Спасибо тебе.
@VladilenMinin 3 жыл бұрын
Если не сложно напиши мне в личку отзыв)
@temeralin.t 3 жыл бұрын
новое видео каждую неделю, Владилен лучший!
@user-jx8dh2de3e 3 жыл бұрын
Ооо, в очередной раз, Владилен, спасибо за топ контент;)
@leo_hlush 3 жыл бұрын
Давно хотел написать свой селект на чистом JS) Владилен, спасибо за видео-урок!
@diyaudioby4836 3 жыл бұрын
Сегодня искал материал на эту тему )) Спасибо )
@user-eo3pv8tq8e 3 жыл бұрын
Спасибо за видео, как всегда очень интересно смотреть!) Из того что интересно посмотреть в будущем -- слайдер с круговым просмотром
@oleksandrchervonnyi6347 3 жыл бұрын
Владилен, спасибо вам большое за урок - очень полезно!
@MrSlavjon 3 жыл бұрын
Приятно смотреть. Случайно наткнулся на видео. Автору лайк)
@user-bm5ge3mr9u Жыл бұрын
Все круто! Видео огонь! Владлен СПАСИБО!!! Вот только больше бы таких видео, зря забросил этот плейлист(((
@danilastupak7593 3 жыл бұрын
Было бы круто реализовать какой-то виджет связанный с датой и временем. Например запись на приём в какой нибудь клинике
@Sergei546 3 жыл бұрын
спасибо! таких видео побольше бы, очень круто!
@user-en4cc9jg5c Жыл бұрын
Это обалденно!))))) А отвечая на вопрос из видео, хотелось бы посмотреть на реализацию функции "Загрузить еще" - подгрузку контента, например статей или карточек с товаром
@VladilenMinin 3 жыл бұрын
Больше продвинутой практики вы можете найти в моем курсе по продвинутому JavaScript: clc.to/senior
@mukhammadmaksudkhodzhaev3754 3 жыл бұрын
Благодарю за урок!
@maksimilliani7762 3 жыл бұрын
Выглядит занимательно, подскажи какие у тебя были реальные задачи, что были реализованы таким образом(в виде плагина) ?
@user-zk4wz7io6j 3 жыл бұрын
спасибо за исходник, но недоработка: Select текст и стрелочка не отрабатывают при клике, Все что в span - не нажимается...
@Den4eg37 3 жыл бұрын
@@user-zk4wz7io6j добавь дата-тайп в спан ))))
@user-zk4wz7io6j 3 жыл бұрын
@@Den4eg37 уже дали ответ: в стилях pointer-events: none; для текста и стрелки
@darkins7042 3 жыл бұрын
Вижу видос от Владилена ставлю лайк, а потом смотрю
@user-bw5dv6ir2x 3 жыл бұрын
Супер! На счет способа закрыть дропдаун кликнув не по области дропдауна использовав стили ШИКАРНО придумал! В бутстрапе даже не догадались об этом))
@MILAYA_02 3 жыл бұрын
Крутой урок, спасибо Владилен))
@anazkomult 3 жыл бұрын
Отличный урок, как всегда. Спасибо!
@maximshevchenko6202 3 жыл бұрын
Пропустил этот урок, но твой бонус на курсе напомнил, спасибо.
@sampeckjowerfell2515 3 жыл бұрын
Владилен, сделай пожалуйста видео по архитектуре проекта. Наткнулся на гите на такую штуку как nodebestpractices, там рассказывается про компонентный подход. Хотелось бы увидеть разбор подобных практик для ноды. Спасибо заранее за любой фидбек, ты очень крутой парень.
@Wynell 3 жыл бұрын
Плюсую!
@Peter-vz4tb 3 жыл бұрын
Курс купи
@sampeckjowerfell2515 3 жыл бұрын
@@Peter-vz4tb какой курс?
@pilyugin 3 жыл бұрын
Ну как минимум один компонент уже есть из этого видео))
@VladilenMinin 3 жыл бұрын
@@sampeckjowerfell2515 В описании к ролику
@nikto5878 3 жыл бұрын
Большое спасибо, как всегда на высоте!
@sergiyrudenko905 3 жыл бұрын
Ті единствений человек, чьи видео смотрю не на английском язике. Спасибо Владилен, очень интересно смотреть, каждий раз чтото новое можно узнать в твоих видео. У меня есть просьба-пожелание) Записивай видео в 4к плиз, на большом мониторе в fullHd не очень смотрится( Переходи на VScode, он очень крут, я раньше использовал такойже редактор, как и ті.
@user-xf7hj7ll6r 3 жыл бұрын
Хотелось бы так же послушать про вёрстку, ведь так понятно объяснять, как вы, нужно уметь!)
@enslit 3 жыл бұрын
Отлично. Интересно было больше именно в плане архитектуры. Понятное дело, плагин небольшой и это один файл.. но все же, мне так проще учится декомпозировать логику, как использовать современный подход. Спасибо тебе за творчество! Топ контент по JavaScript
@VladilenMinin 3 жыл бұрын
Курс по этой теме в описании к видео)
@kofanyehor 3 жыл бұрын
Делал такой же плагин на jQuery, только список тянул из тега select скрывал его и рисовал свой. Ну и возможность выбора нескольких элементов. При этом он работал с отправкой формы. Теперь тоже хочу на чистом js) Контент супер!!)
@slapiinf518 3 жыл бұрын
Крутое видео, хотелось бы продолжение данной рубрики.
@user-rv2yz8ox4d 3 жыл бұрын
Да ) Подобный формат очень понравился.
@user-pm1im5cc3b 3 жыл бұрын
Крута! Спасибо! Как обычно все по полочкам )
@user-lg4md8wm8y 3 жыл бұрын
Как всегда очень полезный контент!!!!
@Den4eg37 3 жыл бұрын
Классный видос,я бы ещё глянул в классе реализацию зависимости от другого селекта,а видео как всегда супер,сборщик прикольный
@olacrips644 3 жыл бұрын
Очень полезная вещь, долго искал и вот наконец-о нашёл =)))
@olehy5000 3 жыл бұрын
Спасибо! Как всегда годнота!
@snd5543 3 жыл бұрын
очень круто, особенно с кликом вне элемента прикольная идея)
@pilyugin 3 жыл бұрын
И наверно самый простой) Помниться чтобы добиться подобного эфекта - я делал костыль на css элемент который дропал меню был кнопкой, и дропменю было видно при фокусе + ховер на самом меню)))
@g_a_m_b_e_t_t_o_r8920 3 жыл бұрын
Все понятно , очень понравилось ! Хотелось бы увидеть плагин как элементы добавляются в корзину, и разными изменениями там удалить товар добавить товар но с условием localstorage !
@aleksandrgradov7859 3 жыл бұрын
Спасибо огромное! Как всегда супер!
@rush0kum 3 жыл бұрын
Как же все легко оказывается ) Спасибо!
@zemazem 3 жыл бұрын
это было очень полезно, спасибо. лайк
@justppdiprotsiuk-pritsdmyt3183 2 жыл бұрын
Просто Vladilen = Machinaaa!!! Спасибо за хорошый материал. Интересно было б посмотреть на полностю робочий сайт с 0 до фул готового варианта. Канешно с минимальной начинкой (просто включая back и как правильно хостить и делать домен ). Так что-бы не соберать бусинки с нескольких видео, а что-бы все в одном))) БОЛЬШОЕ Спасибо!!!
@braind_bible4845 3 жыл бұрын
Классное видео, спасибо за селект у меня в работе похожие но намного проще) Отдельное спасибо за Parcel. Хотелось бы увидеть Datepicker 🙂
@aleksej485 3 жыл бұрын
Владилен, спасибо за полезный контент! Как пожелание - запиши, пожалуйста, как реализовать date picker, многоуровневый дропдаун или tooltip
@swartex92 3 жыл бұрын
блин вот это по настоящему доходчиво)))
@7241984ify 3 жыл бұрын
отличный формат! интересует пример со взаимодействием с сервером (и желательно с какими-то нюансами, с которыми сталкиваешься на практике, но которые в классических примерах не рассматриваются или умалчиваются)
@ded_zamay 3 жыл бұрын
Очень круто... Лайкос 100% заслуживает этот видосик. А какие плагины ? хм... Временя ( сколько сталось до или просто время показывают ), выпадающие менюшки или любые другие, но в таком же формате. ОЧень круто )
@dan28012000 3 жыл бұрын
Отличное видео, интересно было бы увидеть плагин drag and drop для картинок или файлов =)
@_oxios_ 3 жыл бұрын
Спасибо за урок, оказалось полезно! Хочу предложить сделать такой dropdown - при выборе 1 опшена покажется один dropdown , при выборе опшена 2 покажется другой dropdown - типо связанные дропдауны с опшеном.
@developer433 3 жыл бұрын
Отличное видео! Спасибо!
@MrLutor 3 жыл бұрын
Формат что надо! Из плагинов подобных, можно range реализовать, одинарный и двойной
@rustamtishkov2479 3 жыл бұрын
Ваши видео как бальзам на душу
@pozytron-code 3 жыл бұрын
Вижу лайк - ставлю Владлена ))
@alekseifedorov9822 3 жыл бұрын
Отличное видео! Можно еще добавить поиск в этот дропдаун, как дополнительная практика ;)
@ilyaponomarev9279 3 жыл бұрын
Спасибо, очень полезно!
@maksimmaliauka3026 3 жыл бұрын
Владилен, спасибо за контент- это круто. Видел у тебя на канале видео с созданием графиков. Подскажи, может есть в планах развить это видео?? Спасибо.
@dob1wan174 3 жыл бұрын
Чистый JS 👍👍👍 спасибо
@rockyou7715 3 жыл бұрын
Познавательно, спасибо :)
@vladimirlevin6799 3 жыл бұрын
Владилен, ты крутой! СПС!
@izograph 3 жыл бұрын
Очень хороший урок! Мне очень нравится чистый JS, жаль, что на нем сейчас мало кто кодит, все используют библиотеки и фреймворки. Спасибо, Владилен, за такой качественный контент на канале!
@VladilenMinin 3 жыл бұрын
Ещё больше нативки я положил в курс в описании:)
@izograph 3 жыл бұрын
@@VladilenMinin я знаю, но пока не могу купить этот курс. При первой же возможности пройду его
@berdnikvladislav2652 3 жыл бұрын
Банально, и смотреть очень приятно. Что-то в этом есть особо ламповое. Лайк. Последую за Вячеслав Крайний: Только проект Select2 застрял в jQuery. А иногда так нужна XHR(AJAX) загрузка по фильтру options, множественный выбор (мультиселект) с интерактивным добавлением нового тега. Как-то аналоги в Angular, Vue (смотри проект "Select2 на vue") не имеют необходимых features. Я чего-то не знаю?
@mr_jedi 3 жыл бұрын
На высоте, спасибо
@user-tt4mg2jq2b 3 жыл бұрын
Сделай такой-же, только с инпутом в дропдауне, потому что если элементов много, то их тяжело искать, а если будет поиск, то человек наберёт 2-3 символа и у него уже будет нужный вариант. И спасибо за видос!)
@Infinity-zf8ms 2 жыл бұрын
Спасибо за видео 👍
@SeverHolod 3 жыл бұрын
Очень хочется увидеть реализацию слайдера со стрелками, точками и свайпом в вашем исполнении, маэстро
@sevenpages7068 3 жыл бұрын
Владилен, запиши пожалуйста урок по созданию дерева, с сохранением состояния (когда уничтажается компонент, мы на него возращаемся, состояние сохранилось). А так же добавление элементов дерева без перерисовки всего дерева.
@zerocool14pvo 3 жыл бұрын
Очень интересно как ты реализовал этот плагин, посмотрю. Спасибо за видео
@user-cl6sx6jf2c 3 жыл бұрын
Отличное видео. Теперь понятно как сделать либу с кастомными компонентами. Думаю заняться этим. Кстати, некоторые компоненты могут пересекаться, например, dropdown в меню и dropdown в селекте. Думаю написать отдельный компонент dropdown и переиспользовать его в этих двух компонентах. Это нормальная практика? И, кстати, может лучше в селекте использовать элемент input type=text, чтобы в формах отправлялось значение на сервер?
@user-mu7yi5ii6n 3 жыл бұрын
Нужно вторую часть по плагину. Мультиселект с чебоксами еще надо.как в бутстрапе (и это дело как опцию в текущий и чтоб по принципам SOLID это было прикручено) и само собой поиск. ( Очень часто например список стран. Или видов документов или услуг нужно из json запихивать в селект и чтоб был поиск по ключу или значению или и тому и тому соответственно)
@arturzhitkovich5629 3 жыл бұрын
Видишь. Сам себе дз придумал))
@user-mu7yi5ii6n 3 жыл бұрын
@@arturzhitkovich5629 к сожалению я ленивый прикрутил select2 заполнение из rest full и в продакшн. Работодателю неинтересно чтоб долго кто то учился им нужен результат сразу а лучше вчера
@user-yq5md8ej7l 3 жыл бұрын
Спасибо за видео! Было бы интересно увидеть реализацию инпута без использования нативных слушателей событий(клик и т.д.)
@Den4eg37 3 жыл бұрын
Это как?нативный change отслеживать и забирать selected?так меньше контроля из js будет
@user-zb9qy9yc4b 3 жыл бұрын
Сделай плиз что-нибудь по сортировке или фильтрации. Например живой поиск. Или фильтр товаров как в интернет-магазинах. Спасибо за видео!
@griimxd7375 3 жыл бұрын
BEM, SCSS, Parcel... и это только первые 10 минут. ВАУ!!!
@user-rv4kz3yw5t 3 жыл бұрын
Спасибо за видео! Только есть одно но. Подобный код нельзя использовать в продакшн - к сожалению, не учтена доступность управления данным плагином для людей с ограниченными возможностями. Было бы здорово учесть это во второй серии.
@14brotherful 3 жыл бұрын
Владилен, скажите пожалуйста, насколько данный подход написания плагина соответствует SOLID? (Если о solid'e при конструировании маленьких плагинов речи не идет, то можете ли вы выпустить второе видео, в дополнении к первому уже применяя принципы SOLID). Со всем уважением :). Видео отменное. Получил удовольствие от БЭМ и некоторых фишек CSS.
@ekaterinagalkina7303 3 жыл бұрын
Для выбора начального элемента можно после this.#setup() вызвать this.select(options.selectedId) и не париться с изменением шаблона
@2shikari2 2 жыл бұрын
точнее if (options.selectedId) {this.select(options.selectedId)}
@odindvatrichetyre8291 3 жыл бұрын
Отменный контент, благодарю! Хотелось бы поинтересоваться будут ли какие то материалы связанные с простенькой админ панелью для сайта или вроде того? Спасибо за учебные материалы!
@VladilenMinin 3 жыл бұрын
Хороший контент в курсе с практикой) Админка есть на реакт в мерн
@blog_mukhammada 3 жыл бұрын
Спасибо большое!
@Vlad-em1bx 3 жыл бұрын
Видео просто супер. Такого больше на youtybe никто не делает. А на счет плагинов, есть просьба. Могли бы Вы снять видео где хотя бы в базовом виде реализовали slider flickity на vue. Я нашел примерно похожую реализацию в интернете. Но суть в том что хочется посмотреть как это должно работать по уму. Заранее Вам благодарен.
@rinatkhusainov5894 3 жыл бұрын
Отлично 👍
@vadimalekseev3621 3 жыл бұрын
Владилен, в современных реалиях писать штуки типа селекта лучше как ты показал на видео или с помощью веб-компонентов?
@acevodo 3 жыл бұрын
Формат супер! Урок супер! Спасибо:) не хватает перемещения по списку клавишами вверх/вниз на клавиатуре и при создании нескольких селектов на одной странице, данный способ закрытия, я так понимаю, будет работать неправильно. И как заменить стандартный селект своим? Ещё раз спасибо за классный материал!
@toperarley7777 3 жыл бұрын
Владилен, спасибо большое за твою работу. Будет ли видео от тебя про гитхаб?
@VladilenMinin 3 жыл бұрын
Не планирую пока
@alex_ua_usa 3 жыл бұрын
Владилен, а мы можем вместо отдельной функции toggle() , 35:37 использовать сразу $el.classList.toggle('open') в 43 строке? 41:32 мы же сразу можем определить значение по умолчанию в скобках const getTemplate = ( placeholder = 'текст по умолчанию' ) => .... контент шикарный! так держать :)
@user-gp8ok4yz6p 3 жыл бұрын
Мне кажется переворачивалку стрелочки можно было на css проще сделать ) (~39 минута)
@zakyzak 3 жыл бұрын
угу, одним css-правилом делается + анимацию тоже легко добавить
@adminskiy 3 жыл бұрын
молодeц Parcel))
@user-qu9yl6bv6m 3 жыл бұрын
О Господи!! Я очень-очень сильно согрешил! Я смотрел видео и не заметил что не поставил лайк!! Но обещаю Господи! Я исправлюсь! Лайк!!!
@YouMeNow88 3 жыл бұрын
Класс,хочу научиться
@stanislavradchenko2468 3 жыл бұрын
супер спасибо большое
@motofedorr 3 жыл бұрын
Placeholder по умолчанию проще проставлять при декомпозиции {placeholder = "значение по умолчанию"}
@galandec2000 3 жыл бұрын
огромное спасибо! больше бы таих видосов.) я то не знаю, по ООП есть у тебя или нет, чет не нашел, видно плохо искал.
@VladilenMinin 3 жыл бұрын
Курс в описании очень подробно разбирает ооп
@magomeda.4576 3 жыл бұрын
Привет, хотел бы узнать твоё мнение о такой неоднозначной теме как nocode-разработка. Как считаешь, тот же bubble, webflow сейчас лучше осваивать для фриланса, чем стандартную html-вёрстку?
@LesoRubych 3 жыл бұрын
Владилен, хотелось бы услышать ваше мнение по поводу фреймворков PHP (Ларавел, Фалькон), они умерли?
@user-gr6dw9jd1c 3 жыл бұрын
Владилен, спс
@tomozi1 3 жыл бұрын
Спасибо. Класс! Планируете уроки по созданию библиотеки плагинов для angular?
@VladilenMinin 3 жыл бұрын
Нет, но на канале есть практика по ангуляру
@Ivan_Yakovlev1995 3 жыл бұрын
А как же выбор с помощью стрелочек клавиатуры ?
@user-xt2pj7rb9e 3 жыл бұрын
Владлен, расскажи про потоки в ноде
@DimitarRad 3 жыл бұрын
Спасибо за знания. Я всего пару месяцев изучаю джес и для меня это уровень-космос. Может задаю глупый вопрос, но как себя будет вести данный селект в форме? Вить это див и спан, а не элементы формы.
Василий Муравьев
Рет қаралды 160 М.
BrainsCloud
Рет қаралды 392 М.