Тёмный

Создай КРУТОЙ проект в портфолио на JavaScript 

Владилен Минин
Подписаться 309 тыс.
Просмотров 91 тыс.
50% 1

Присоединяйся к марафону: 5 проектов на JavaScript - bit.ly/3Tw3skW
Исходный код к уроку тут: t.me/js_by_vla...
Подпишись на мои соц сети:
Telegram: t.me/js_by_vla...
VK: vladile...
Instagram: / vladilen.minin
Соц сети по JavaScript:
Telegram: t.me/result_sc...
VK: result....
Instagram: / result.school.it
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vla...
Roadmap по каналу:
vladilen.notio...

Опубликовано:

 

26 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 168   
@VladilenMinin
@VladilenMinin Год назад
Присоединяйся к марафону: 5 проектов на JavaScript - bit.ly/3Tw3skW Исходный код к уроку тут: t.me/js_by_vladilen/533
@Евгений-с3т5о
@Евгений-с3т5о Год назад
Посоветую тебе сделать что нибудь на AR.js и Three.js . Дополненная реальность в вэб мало в русском ютубе и многим будет полезно, а у тебя много просмотров.
@diatm1506
@diatm1506 Год назад
Пожалуйста покажите как сделать конфигуратор пк. Типа todo но можно было добавлять ссылки цены названия и тд убирать ненужное и цена бы пересчитывалась
@sia4281
@sia4281 Год назад
Что-то непонятное с политикой конфиденциальности творится на сайте с курсами. На каких-то курсах в формах регистрации нет ссылок на политику, на каких-то есть, но они не работают, а где-то работают. Понятно что эту юридическую хрень никто не читает, но всё же. А в личном кабинете жутко бесит дерганье страницы при каждой загрузке, когда сайдбар развернут. А так любопытно, думаю пройти какой-нибудь.
@ruslankh9004
@ruslankh9004 Год назад
Спасибо большое за твою работу! Я перешёл в разработку 2 года назад, не мало твоих видео смотрел и даже сейчас интересно наблюдать)) Уже больше как хобби) Удачи тебе 🙏🔥
@All_be_good
@All_be_good Год назад
Огромное спасибо за твой труд, Владилен! Миллион подписчиков тебе!
@Syberby
@Syberby Год назад
Давно работаю фронтенд разработчиком. В свободные минуты такие видео хорошо залетают. Не сложные, в то же время в обычное время, сделать такое не догадаешься.
@razor-4eg
@razor-4eg Год назад
Для особо одаренных - с помощью "pointer-events: none;" можно скипнуть клик по иконке, и это проще, правильнее чем дублировать датасет и не нужен никакой js.
@flavkaa2017
@flavkaa2017 Год назад
Ты горд тем, что это понял, и считаешь обратных - одареннымм?)
@razor-4eg
@razor-4eg Год назад
@@flavkaa2017 каким образом гордость причастна к правильному написанию кода? В видео тебе предлагают мини проект в портфолио, но за такой код не то что на работу не возьмут, за такой код увольнять надо. Если человек не знает банальных принципов проектирования кода и возможностей среды в которой разрабатывает, это никак не пойдет в плюс при найме на работу.
@josephchan2600
@josephchan2600 Год назад
@@razor-4eg нет предела совершенству... Сомневаюсь, что из-за незнания пары свойств не возьмут или уволят: чего-то не знать абсолютно нормально, тем более что подобный контент нацелен на начинающих специалистов, а не всезнающих гигачадов А токсичность твою я совсем не понимаю... Даже если ты хочешь поправить кого-то, то обязательно грубить? Вот как раз таких челов и увольняют за их коммуникационные способности и навыки общения... P. S. много многоточий получилось)
@razor-4eg
@razor-4eg Год назад
@@josephchan2600 Как же модно сегодня стало всех подряд без разбора обвинять в токсичности. Насколько неспособно к восприятию критики стало общество. Ну а по незнанию «пары свойств» - здесь вопрос не в незнании пары свойств, а в мышлении. Есть проблема, которую можно решить очень просто и правильно, не знаешь как? 2 минуты гугления. Но вместо этого предлагается самое кривое решение, которое вообще ставит под сомнение адекватность человека написавшего код. А потом мы удивляемся качеству кода, написанным вот такими спецами. Тут вопрос не в том что ты знаешь или нет. Вопрос в том как ты мыслишь. И если ты мыслишь правильно и логически то такой бред ты никогда не напишешь.
@josephchan2600
@josephchan2600 Год назад
@@razor-4eg на счёт свойств я согласен: хочешь сделать хорошо - сделай сам, погугли и узнай самое лучшее решение, но вот на счёт критики, думаю, ты подошёл слишком грубо, да, возможно ошибка серьёзная, но можно об этом вежливо написать и объяснить, ведь смысл критики не в унижении, а в донесении истины, наверное...
@lorgik7008
@lorgik7008 Год назад
Спасибо большое за твои видео, очень интересно узнавать новые особенности JS и вообще как все это работает
@alexanderorlov9684
@alexanderorlov9684 Год назад
Благодарю за интересный урок! Работать с цветом лучше с моделью с цветовым кругом. Например из этой библиотеки chroma.hsl(330, 1, 0.6) Таким образом можно легко использовать известные гармоничные сочетания по цветовому кругу (hue): а также градации по каналу lightness
@DerAleksey
@DerAleksey Год назад
Приятно осознавать, что я уже вижу не набор - букв, команд, символов, а некую структуру, пусть пока мало понятного кода.
@frankshepherd5953
@frankshepherd5953 Год назад
Это, точно)
@mihailsoosaar6213
@mihailsoosaar6213 Год назад
Хотелось бы более интересных проектов, что то более весомое, более приближенное к реальным повседневным задачам на больших проектах.
@maxtepl696
@maxtepl696 Год назад
Отличный урок, прошел марафон твой, по чаще бы таких уроков
@cs_yoh
@cs_yoh Год назад
отличное видео! Момент с кликом по иконке, самый простой и чистый способ не добавлять data-type, а добавить pointer-events: none;
@dmitryblinov6412
@dmitryblinov6412 Год назад
Можно было в css для .col button > * {pointer-events: none} вместо добавления атрибута для иконки, тк мне кажется проще
@VeterinarXP
@VeterinarXP Год назад
Спасибо, без лишней воды и всё понятно 👍
@valery9702
@valery9702 Год назад
Спасибо огромное! Всё понятно, классный формат, очень ценю ваши видео🥺
@НареСарксян-ш2и
Спасибо большое за проект, Владилен!
@morfius5635
@morfius5635 Год назад
Очень нравится хорошее и доступное объяснение что как и куда
@natalyoktar2
@natalyoktar2 Год назад
Спасибо , очень красиво .и поучительно👍
@madarasan0
@madarasan0 Год назад
Вроде изучил все типы данных и DOM c событиями, и почти весь learnJS, но все равно как то сложновато. Много неизвестных методов и способов, многое осталось не понято, хотя думал что закончил с JS
@simonbryczkowski8675
@simonbryczkowski8675 Год назад
Тактический комментарий для продвижения. Классный урок особенно для таких новичков как я)
@Jest_Zloi_Voli
@Jest_Zloi_Voli Год назад
Благодарю! Хороший минипроект!
@ЕвгенийЯкунин-ф2д
Удивило создание пяти одинаковых элементов путем их копипаста и последующего их изменения... И еще некоторые костыльные подходы. В обучающем видео, по моему скромному мнению, этого нужно избегать. Спасибо за библиотеку работы с цветом. PS. Проверить цвет на валидность тоже бы не мешало, так как адресная строка - это строка ввода и можно записать в неё что угодно.
@shanthakobyan3578
@shanthakobyan3578 Год назад
Владилен спасибо за крутые видео 🥰🔥, сделай пожалуйста видео про микросервисы и как сделать админку и как всё это соединить
@my-almagest
@my-almagest Год назад
Владилен, подскажи пожалуйста, может планируешь сделать SPA, вроде бы не было на твоем канале?
@sagdieff
@sagdieff Год назад
Владилен, посоветуешь ли ты в качестве ноута для фронтенда - макбук эйр?
@ancient_greek_from_greece
@ancient_greek_from_greece Год назад
Очень интересно было, огромное спасибо! Узнал некоторые полезные вещи) Единственное, на мой взгляд, да в рекомендациях так написано, что тернарный оператор хорош, если условие одно. У нас их было больше, поэтому лучше бы было реализовать через обычную запись, потому что сейчас читается тяжело
@aleksandercross5936
@aleksandercross5936 Год назад
Интересно было спасибо. Кое что новое для себя узнал
@MrZakexz
@MrZakexz Год назад
Получение цвета в 1 строку: "#" + Math.floor(Math.random() * 0xFFFFFF).toString(16)
@Grigoren_com
@Grigoren_com Год назад
класс! отличный проект и объясняете хорошо)
@asg5511
@asg5511 Год назад
Офигенное видео!!! Спасибо!
@max_mgtow
@max_mgtow Год назад
Спасибо Владилен 🤝👍
@v.demchenko
@v.demchenko Год назад
Было бы очень круто, увидеть проект с использованием сокетов. С твоим обьяснением.
@kiradina7754
@kiradina7754 Год назад
Спасибо за очень интересный пример
@ЭльвираАхметзянова-м7и
Классный проект спасибо! ☺👍
@Рельныйобзор
@Рельныйобзор Год назад
Спасибо большое за видео побольше таких видео
@ВячеславПолыгалов-р9э
Круто получилось, молодец!
@forellko8600
@forellko8600 Год назад
Спасибо за топовый контент)
@CyberAzazel
@CyberAzazel Год назад
Очень круто узнал новое!!!!
@elmirhuseynov5241
@elmirhuseynov5241 Год назад
Спасибо за интересный и полезный урок!) Не подскажите пожалуйста как называется расширение которое отмечает цветной полосой начало и конец блока кода?) пожалуйста
@VladilenMinin
@VladilenMinin Год назад
bracket-pair-colorizer
@niceman5890
@niceman5890 Год назад
Прикольно!
@webWithMe
@webWithMe Год назад
Очень молодец👍
@Ratibor_Gradov
@Ratibor_Gradov Год назад
Спасибо большое!
@timkatc5244
@timkatc5244 Год назад
Просто лайк за футболку❤🤙 В самом начале просмотра))
@svistunovav
@svistunovav Год назад
Привет, Владилен. Подскажи где брать идеи для проектов? Желание программировать есть, а идей нет.
@НикитаАбрамов-ю5б
Спасибо ОГРОМНОЕ за уроки! Вы ВЕЛИКИЙ человек!
@meskirian
@meskirian Год назад
Используй метод replace, вместо всяких сабстрингов, заодно и регулярки подтянешь! Вместо кучи сплитов двумя регулярками можно обойтись, а если постараться, то и одной. 😉
@alexander551
@alexander551 Год назад
Наконец-то смогу выбирать свой любимый цвет
@alexander551
@alexander551 Год назад
Пипетка в пэинте становится неактуальной
@ОлегД-э2ъ
@ОлегД-э2ъ Год назад
Добрый, а так можно сделать? Добавить функцию для button, а то не понимаю, откуда она взялась. function setRandomColors() { cols.forEach(function(col) { const text = col.querySelector('h2') const button = col.querySelector('button') const color = chroma.random() text.textContent = color col.style.background = color setTextColor (text,color) setTextColor (button,color) }) } function setTextColor (text,color){ const lum = chroma(color).luminance() text.style.color = lum > 0.3 ? 'black': 'white' } function setTextColor (button,color){ const lum = chroma(color).luminance() button.style.color = lum > 0.3 ? 'black': 'white' } setRandomColors()
@АлександрКоптев-у8э
Круто Владилен! Сложновато для новичков
@troits76
@troits76 Год назад
Жаль, не получится "послать другу дизайнеру" url c хешами, если мне сразу расклад цветов понравился. Это можно было бы сделать, если на расстановке цветов в случае isInitial проверять ещё, что хеш пуст. Спасибо за видео!
@ЯрославБойков-г4я
Вот я с базовыми знаниями JS смотрю на то, как Владилен знает любой метод на любую ситуацию и думаю, реально ли этому могут научить в курсе у Владилена? Есть кто с курса?
@kimanowka
@kimanowka Год назад
сделай обзор на новую доку от реакта (там много крутых вещей для чистого кода) было бы интересно послушать твое видения их паттернов
@MassEffecn
@MassEffecn Год назад
Почему для иконок используется тег "i"? он же для курсива используется и является сокращением от italic, а не icon
@Roc19961
@Roc19961 Год назад
На превью кажется Ван Гог
@МаксимМаксим-р2ф
Спасибо!
@zohanpohan6499
@zohanpohan6499 Год назад
стоит ли писать десктоп на js (electron) или лучше выбрать альтернативу (какую?)
@koralinrous6851
@koralinrous6851 Год назад
здравствуйте, подскажите пожалуйста, у меня при спаме по пробелу, вне зависимости от сгенерированого цвета, текст и иконка становятся черными , даже если lumination меньше 0.5, как это можно поправить или из-за чего оно может появляеться ?
@nargan1129
@nargan1129 Год назад
Плохо что вместе с event.preventDefault() выключаются ctrl + r и ctrl + l
@Хакохо
@Хакохо Год назад
Спасибо за видос! А как сделать чтобы в мобильной версии сайта по нажатию на монитор менялись цвета колонок?
@АйтегинОсмонов
спасибо)
@Husan203
@Husan203 Год назад
Можно было написать вот так document.addEventListener("click", event => { const targetItem = event.target; if (targetItem.closest("[data-type]")) { console.log(targetItem.closest("[data-type]")) } }) а не давать кнопке и иконке data-type. метод closest будет искать не только элемент который нажат но и родительские элементы! А так ролик классный!
@vladimira.815
@vladimira.815 Год назад
а еще лучше просто иконке в стилях добавить pointer-events: none
@Husan203
@Husan203 Год назад
​@@vladimira.815 Не проверял. Но выглядит как решение :)
@MrZakexz
@MrZakexz Год назад
Либо в css прописать pointer-events:none иконкам
@simonbryczkowski8675
@simonbryczkowski8675 Год назад
@@vladimira.815 можете подсказать как будет выглядеть document.addEventListener("click", event => ..... после добавления pointer-events: none?
@Husan203
@Husan203 Год назад
@@simonbryczkowski8675 Это шутка если да то смешно. А если серьёзно то pointer-events надо дать иконке.
@mismischchmischung
@mismischchmischung Год назад
Привет! Рядом с иконкой замочка появляется □ при нажатии не по замку, а по его паддингу. Как это можно убрать?
@karinapak2333
@karinapak2333 Год назад
Владилен как задеплоить сой проект Node+Postgre+React на свой windows server и задать ему IP адрес help ничего не понимаю как правильно настроить IIS и т д
@grolland-cr
@grolland-cr Год назад
Здравствуйте, хороший урок, но по моему слишком легко, я вроде и новичок, но тут все так размусоливается, это для людей которые начали тзучать js прям только что, а людям которые начали только что такие проекты в портфолио не нужна, да и проект слишком легкий
@tutnichegonet
@tutnichegonet Год назад
заголовок скорее всего можно было сделать через blend mode в css без библиотек
@AlexLooking
@AlexLooking Год назад
Привет, подскажи название темы в vs code!
@ГусяНоздреватая
неплохой практикой для начинающих в React, будет задача переписать этот проект на React
@mihailsoosaar6213
@mihailsoosaar6213 Год назад
Не вижу никаких проблем в этом)
@ЛеонидМосковский-ж9ъ
Что делать, если точка вместо изображения иконки?
@TheAbormot
@TheAbormot Год назад
А можно вопрос по видео? Я игрался с переменными в дебаггере и заметил, что после присваивания переменной колор текстовому полю и стилю text.textContent = color col.style.background = color эти переменные в консоли отображаются по разному, хотя получили один и тот же объект. text.textContent: '#3b0406' col.style.background: 'rgb(59, 4, 6)' с чем это связано? (можно кинуть в меня ссылкой на StackOverflow или что-то подобное, я не смог правильно сформулировать вопрос)
@tiestovadim95
@tiestovadim95 Год назад
потому что строчку hex-цвета вида "#3b0406" нам возвращает функция, а когда строчка подставляется в свойство цвета элемента, то браузер переводит в rgb (255, 255, 255). По сути это просто разное представление цвета. #ffffff == rgb( 255, 255, 255). Надеюсь не оч криво объяснил
@seoonlyRU
@seoonlyRU Год назад
ЛАЙК ОТ СЕООНЛИ
@Серёга-ю7н2б
@Серёга-ю7н2б Год назад
Владилен итересный указатель ввода, как сделал??
@clexrmxndbeats6495
@clexrmxndbeats6495 Год назад
почему-то не отображаются иконки с fontawesome
@Leshgans
@Leshgans Год назад
зачем тогда вообще нужна была кнопка, если data-type мы продублировали и клик можем ловить на иконке? Не понравился этот момент
@eugeneg3194
@eugeneg3194 Год назад
Vладилен, привет! Классное видео! В следующем, пожалуйста, расскажи как из подручных средств сделать блиндажную свечу!
@ЛеонидМосковский-ж9ъ
Ребят, подскажите пж! Вместо иконок точки отображаются. У меня у одного такое???
@ВоваШпилевой-в5ж
спасибо тебе !!!!!!!!!!!!
@dlazder3937
@dlazder3937 Год назад
Боже мой, что тут делать столько времени, какие библиотеки...
@Ivan_Subbotin
@Ivan_Subbotin Год назад
на 51:12 где идет проверка на isLocked и добавление элемента в массив colors по хорошему еще проверять что это инициализация, на случай если по умолчанию при инициализации замки будут заблокированы, так ведь? @Владилен?
@SuperKozzz
@SuperKozzz Год назад
Привет, три равно сплошными полосками и т.д. что за плагин,?
@valeriimykoliuk2019
@valeriimykoliuk2019 Год назад
кто подскажет почему адресс в строке не меняеться на новый, а добавляеться к старому?
@Bulat1
@Bulat1 Год назад
Так понимаю, что данный проект ограничивается лишь фантазией. Получается можно и градиенты создать тоже и т.д. )
@VladilenMinin
@VladilenMinin Год назад
Именно так
@Bulat1
@Bulat1 Год назад
@@olgakolesnichenko2463 я знаю про этот ресурс. Но куда приятнее когда у тебя есть свой такой же инструмент )
@romanbabyboy6690
@romanbabyboy6690 Год назад
Что за трек в конце?)
@bkvdev
@bkvdev Год назад
где то уже такое видел
@prodbyoper
@prodbyoper Год назад
владилен когда стоит начинать учить реакт
@MelkoR4111
@MelkoR4111 Год назад
то что ты в css прописываешь background: rbga(0, 0, 0, 0.1); - не работает
@valeriimykoliuk2019
@valeriimykoliuk2019 Год назад
rgba
@giganiga4904
@giganiga4904 Год назад
07:09 как сделать чтобы кнопка ка ком был
@Robi_Bobi
@Robi_Bobi Год назад
спс
@samael1864
@samael1864 Год назад
Владилен, Ты на Кипре что ли? ))
@VladilenMinin
@VladilenMinin Год назад
Нет, в Питере. С чего вопрос?)
@undochlorine
@undochlorine Год назад
как сделать такой курсор текстовый анимационный?
@at1set590
@at1set590 Год назад
Вы нашли ответ на ваш ответ? Тоже хотел такой сделать, прикольный)
@mariins267
@mariins267 Год назад
Как стать такой же умной😭у меня ощущение, что за полгода я ничему не научилась
@mariins267
@mariins267 Год назад
Часов по 6 , три сайта сделала, но на более серьёзный уровень не могу перейти, односложные сайты получаются
@alexander551
@alexander551 Год назад
@@mariins267 вообще, равняться не нужно на кого-то в интернете. Ориентируйся лишь на актуальные требования работодателей
@alexander551
@alexander551 Год назад
@@mariins267 хм, мой комментарий удалился почему-то. Продублирую: зайди на сайт по поиску работы, посмотри с десяток вакансий и выдели технологии, которые в основном требуют работодатели. За следующие полгода их выучишь и сможешь устроиться. Вполне реальный план.
@mariins267
@mariins267 Год назад
@@alexander551 я видела его)
@alexander551
@alexander551 Год назад
@@mariins267 мгм. Видимо, нельзя упоминать те сайты на этом канале. В принципе, нужно действительно около года, чтобы стать frontend-разработчиком
@diekunstUA
@diekunstUA Год назад
регистрация не проходит!
@lollypolli6857
@lollypolli6857 Год назад
Если бы я не знал языка, то ничего бы не понял
@fuhait
@fuhait Год назад
У Вас проблема с регистрацией на сайте к марафону.
@VladilenMinin
@VladilenMinin Год назад
Если ты не из рф, то нужен vpn
@vahe.hayrapetyan
@vahe.hayrapetyan Год назад
Когда новое видео брат?
@VladilenMinin
@VladilenMinin Год назад
Какую тему хочешь увидеть?
@vahe.hayrapetyan
@vahe.hayrapetyan Год назад
@@VladilenMinin Не знаю, ничего в голову не приходит, любое видео сделай всё ровно у тебя получается и хорошо объясняешь. Думаю что то касательно новичков в программировании что то запиши.
@nikipinki6554
@nikipinki6554 Год назад
нам просто рендомно показывает 5 цветов? а нафига? можно еще проект где нам будет рендомно показывать 5 чисел, а мы будем выбирать понравившееся
@Alexandr-G
@Alexandr-G Год назад
Что делает этот очень классный проект?
@toxichnychel5277
@toxichnychel5277 Год назад
у кого еще при копировании юрл цвета не копируются на новую вкладку?))
@Mikhail.tortik001
@Mikhail.tortik001 Год назад
Но это ведь совсем не сложный проект, он действительно будет смотреться релевантно в портфолио у условного трэйни/джуниора? Может это было круто года 2 назад?) На сколько я знаю, то такой проект никак не покажет скиллы человека, претендующего на позицию джуниор, могу ошибаться)
@poposha9388
@poposha9388 Год назад
Вы серьезно?! Если это так, то я даже не знаю куда я "пру"(
@Mikhail.tortik001
@Mikhail.tortik001 Год назад
@@poposha9388 Скажу так, сейчас крайне сложно попасть в фронтэнд новичку из-за войны. Но нужно стараться, учиться и всё будет))
@耳に胼胝ができる
@耳に胼胝ができる Год назад
@@poposha9388 Да, он серьезно и у меня возник такой же вопрос как и у него. На первом курсе вышки дают задачи посложнее. Да и в 2022 без использования какого-либо фреймворка претендовать на позицию даже не джуна, а стажера? Ну да, удачи... Ни в коем случае не стараюсь задеть автора ролика, его видео помогли разобрать с парой технологий, за что ему очень благодарен, просто из личного опыта могу сказать, что на портфолио мало кто смотрит, для этого есть типовые тестовые задачи. А они куда серьезнее чем этот проект и оцениваются по критериям компании, если им после тестового захочется посмотреть на ваши пет проекты, то даунгрейд - это не лучший вариант. Лучше сделать что-то свое, пусть и говнокодом, а не позориться с копипастой. Например, какой-то мини сервис, который помогает с учебой или выполняет рутинные задачи.
@extract2396
@extract2396 Год назад
@@poposha9388 это так) сейчас надо быть как мидл, чтобы хотя бы на Джуниора пойти. Скорее всего, если ты сам без видео не смог бы написать даже такой простенький сайт, то твой уровень даже на 30 % ещё не дорос до Джуниора .
@RafatAbbassov
@RafatAbbassov Год назад
У меня стек из typescript, react, redux, redux toolkit, mui, scss. Рекруты и hr смотрят что нет опыта работы и то что я в кз живу и даже в портфолио не заходят где я проект по курсу писал и свой личный делаю, так что я хз че на рынке труда творится, но я уверен что моих знаний хватает на джуна +, просто пока не везет. Так что сейчас вы не то что с фреймворком/библиотекой, вы даже со своими проектами на топовом стеке никому не нужны)
@ОлегД-э2ъ
@ОлегД-э2ъ Год назад
Автор, ты крут. Скажи, а с какой целью ты выкладываешь эти обучающие видосы? Как я понимаю, тут многие от 30 до 40 хотят стать программерами, но это же из области фантастики.
@redhook777
@redhook777 Год назад
Слабовато для портфолио. Тут меньше функционала, чем в Todo
@exactly4234
@exactly4234 9 месяцев назад
Засыпаю, скучно
Далее
TypeScript - Быстрый Курс за 70 минут
1:08:00
React и TypeScript - Быстрый Курс
1:40:52
Просмотров 351 тыс.
Git и GitHub Курс Для Новичков
49:35
Просмотров 1,1 млн