Создай КРУТОЙ проект в портфолио на JavaScript
Vložit
- čas přidán 17. 10. 2022
- Присоединяйся к марафону: 5 проектов на JavaScript - bit.ly/3Tw3skW
Исходный код к уроку тут: t.me/js_by_vladilen/533
Подпишись на мои соц сети:
Telegram: t.me/js_by_vladilen
VK: vladilen.minin
Instagram: / vladilen.minin
Соц сети по JavaScript:
Telegram: t.me/result_school_it
VK: result.school
Instagram: / result.school.it
JavaScript cообщества:
Discord: / discord
Telegram: t.me/js_by_vladilen_chat
Roadmap по каналу:
vladilen.notion.site/Roadmap-...
![HTML5 [Информация] Страница HTML - Профиль и портфолио](/img/n.gif)
Присоединяйся к марафону: 5 проектов на JavaScript - bit.ly/3Tw3skW
Исходный код к уроку тут: t.me/js_by_vladilen/533
Посоветую тебе сделать что нибудь на AR.js и Three.js . Дополненная реальность в вэб мало в русском ютубе и многим будет полезно, а у тебя много просмотров.
Пожалуйста покажите как сделать конфигуратор пк. Типа todo но можно было добавлять ссылки цены названия и тд убирать ненужное и цена бы пересчитывалась
Что-то непонятное с политикой конфиденциальности творится на сайте с курсами. На каких-то курсах в формах регистрации нет ссылок на политику, на каких-то есть, но они не работают, а где-то работают. Понятно что эту юридическую хрень никто не читает, но всё же. А в личном кабинете жутко бесит дерганье страницы при каждой загрузке, когда сайдбар развернут.
А так любопытно, думаю пройти какой-нибудь.
Спасибо большое за твою работу!
Я перешёл в разработку 2 года назад, не мало твоих видео смотрел и даже сейчас интересно наблюдать))
Уже больше как хобби)
Удачи тебе 🙏🔥
Отличный урок, прошел марафон твой, по чаще бы таких уроков
Спасибо, без лишней воды и всё понятно 👍
Огромное спасибо за твой труд, Владилен! Миллион подписчиков тебе!
Спасибо большое за твои видео, очень интересно узнавать новые особенности JS и вообще как все это работает
Спасибо большое за проект, Владилен!
Спасибо за видео! Было бы прикольно еще посмотреть такие проекты как этот, и как те, что в марафоне!
Но выкладывать лучше исходный код, а не конечный ;)
Спасибо огромное! Всё понятно, классный формат, очень ценю ваши видео🥺
Спасибо , очень красиво .и поучительно👍
класс!
отличный проект и объясняете хорошо)
Давно работаю фронтенд разработчиком. В свободные минуты такие видео хорошо залетают. Не сложные, в то же время в обычное время, сделать такое не догадаешься.
Очень нравится хорошее и доступное объяснение что как и куда
Благодарю! Хороший минипроект!
Хотелось бы более интересных проектов, что то более весомое, более приближенное к реальным повседневным задачам на больших проектах.
Благодарю за интересный урок! Работать с цветом лучше с моделью с цветовым кругом.
Например из этой библиотеки chroma.hsl(330, 1, 0.6)
Таким образом можно легко использовать известные гармоничные сочетания по цветовому кругу (hue): а также градации по каналу lightness
Офигенное видео!!! Спасибо!
Для особо одаренных - с помощью "pointer-events: none;" можно скипнуть клик по иконке, и это проще, правильнее чем дублировать датасет и не нужен никакой js.
Ты горд тем, что это понял, и считаешь обратных - одареннымм?)
@@flavkaa2017 каким образом гордость причастна к правильному написанию кода? В видео тебе предлагают мини проект в портфолио, но за такой код не то что на работу не возьмут, за такой код увольнять надо. Если человек не знает банальных принципов проектирования кода и возможностей среды в которой разрабатывает, это никак не пойдет в плюс при найме на работу.
@@razor-4eg нет предела совершенству...
Сомневаюсь, что из-за незнания пары свойств не возьмут или уволят: чего-то не знать абсолютно нормально, тем более что подобный контент нацелен на начинающих специалистов, а не всезнающих гигачадов
А токсичность твою я совсем не понимаю... Даже если ты хочешь поправить кого-то, то обязательно грубить?
Вот как раз таких челов и увольняют за их коммуникационные способности и навыки общения...
P. S. много многоточий получилось)
@@josephchan2600 Как же модно сегодня стало всех подряд без разбора обвинять в токсичности. Насколько неспособно к восприятию критики стало общество. Ну а по незнанию «пары свойств» - здесь вопрос не в незнании пары свойств, а в мышлении. Есть проблема, которую можно решить очень просто и правильно, не знаешь как? 2 минуты гугления. Но вместо этого предлагается самое кривое решение, которое вообще ставит под сомнение адекватность человека написавшего код. А потом мы удивляемся качеству кода, написанным вот такими спецами. Тут вопрос не в том что ты знаешь или нет. Вопрос в том как ты мыслишь. И если ты мыслишь правильно и логически то такой бред ты никогда не напишешь.
@@razor-4eg на счёт свойств я согласен: хочешь сделать хорошо - сделай сам, погугли и узнай самое лучшее решение, но вот на счёт критики, думаю, ты подошёл слишком грубо, да, возможно ошибка серьёзная, но можно об этом вежливо написать и объяснить, ведь смысл критики не в унижении, а в донесении истины, наверное...
Приятно осознавать, что я уже вижу не набор - букв, команд, символов, а некую структуру, пусть пока мало понятного кода.
Это, точно)
Владилен, посоветуешь ли ты в качестве ноута для фронтенда - макбук эйр?
Интересно было спасибо. Кое что новое для себя узнал
Привет, Владилен. Подскажи где брать идеи для проектов? Желание программировать есть, а идей нет.
Тактический комментарий для продвижения. Классный урок особенно для таких новичков как я)
Владилен Минин. Спасибо вам большое! Благодаря вашим видеоурокам я устроился на работу, низкий вам поклон!)
Кем? Дворником?
Спасибо Владилен 🤝👍
Круто получилось, молодец!
стоит ли писать десктоп на js (electron) или лучше выбрать альтернативу (какую?)
Владилен спасибо за крутые видео 🥰🔥, сделай пожалуйста видео про микросервисы и как сделать админку и как всё это соединить
Очень круто узнал новое!!!!
Спасибо большое за видео побольше таких видео
Владилен, подскажи пожалуйста, может планируешь сделать SPA, вроде бы не было на твоем канале?
Спасибо за топовый контент)
Спасибо за очень интересный пример
отличное видео!
Момент с кликом по иконке, самый простой и чистый способ не добавлять data-type, а добавить pointer-events: none;
Спасибо большое!
Классный проект спасибо! ☺👍
Прикольно!
Было бы очень круто, увидеть проект с использованием сокетов. С твоим обьяснением.
Очень интересно было, огромное спасибо! Узнал некоторые полезные вещи) Единственное, на мой взгляд, да в рекомендациях так написано, что тернарный оператор хорош, если условие одно. У нас их было больше, поэтому лучше бы было реализовать через обычную запись, потому что сейчас читается тяжело
Очень молодец👍
Привет, подскажи название темы в vs code!
Спасибо 🙂
здравствуйте, подскажите пожалуйста, у меня при спаме по пробелу, вне зависимости от сгенерированого цвета, текст и иконка становятся черными , даже если lumination меньше 0.5, как это можно поправить или из-за чего оно может появляеться ?
Спасибо за видос! А как сделать чтобы в мобильной версии сайта по нажатию на монитор менялись цвета колонок?
Спасибо!
Можно было в css для .col button > * {pointer-events: none} вместо добавления атрибута для иконки, тк мне кажется проще
Спасибо ОГРОМНОЕ за уроки! Вы ВЕЛИКИЙ человек!
Спасибо за интересный и полезный урок!)
Не подскажите пожалуйста как называется расширение которое отмечает цветной полосой начало и конец блока кода?) пожалуйста
bracket-pair-colorizer
Круто Владилен! Сложновато для новичков
Владилен итересный указатель ввода, как сделал??
Почему для иконок используется тег "i"? он же для курсива используется и является сокращением от italic, а не icon
на 51:12 где идет проверка на isLocked и добавление элемента в массив colors по хорошему еще проверять что это инициализация, на случай если по умолчанию при инициализации замки будут заблокированы, так ведь? @Владилен?
Прикольно. Будут ли видео по Canvas?
Есть на канале
Привет! Рядом с иконкой замочка появляется □ при нажатии не по замку, а по его паддингу. Как это можно убрать?
спасибо)
А можно вопрос по видео?
Я игрался с переменными в дебаггере и заметил, что после присваивания переменной колор текстовому полю и стилю
text.textContent = color
col.style.background = color
эти переменные в консоли отображаются по разному, хотя получили один и тот же объект.
text.textContent: '#3b0406'
col.style.background: 'rgb(59, 4, 6)'
с чем это связано?
(можно кинуть в меня ссылкой на StackOverflow или что-то подобное, я не смог правильно сформулировать вопрос)
потому что строчку hex-цвета вида "#3b0406" нам возвращает функция, а когда строчка подставляется в свойство цвета элемента, то браузер переводит в rgb (255, 255, 255). По сути это просто разное представление цвета. #ffffff == rgb( 255, 255, 255). Надеюсь не оч криво объяснил
Владилен как задеплоить сой проект Node+Postgre+React на свой windows server и задать ему IP адрес
help ничего не понимаю как правильно настроить IIS и т д
сделай обзор на новую доку от реакта (там много крутых вещей для чистого кода) было бы интересно послушать твое видения их паттернов
Что делать, если точка вместо изображения иконки?
Просто лайк за футболку❤🤙
В самом начале просмотра))
Что за трек в конце?)
Наконец-то смогу выбирать свой любимый цвет
Пипетка в пэинте становится неактуальной
спс
почему-то не отображаются иконки с fontawesome
спасибо тебе !!!!!!!!!!!!
Вроде изучил все типы данных и DOM c событиями, и почти весь learnJS, но все равно как то сложновато. Много неизвестных методов и способов, многое осталось не понято, хотя думал что закончил с JS
заголовок скорее всего можно было сделать через blend mode в css без библиотек
Надо было метод luminance написать таки самим! А затем как альтернативу предложить chroma js
Жаль, не получится "послать другу дизайнеру" url c хешами, если мне сразу расклад цветов понравился. Это можно было бы сделать, если на расстановке цветов в случае isInitial проверять ещё, что хеш пуст.
Спасибо за видео!
Удивило создание пяти одинаковых элементов путем их копипаста и последующего их изменения... И еще некоторые костыльные подходы.
В обучающем видео, по моему скромному мнению, этого нужно избегать.
Спасибо за библиотеку работы с цветом.
PS. Проверить цвет на валидность тоже бы не мешало, так как адресная строка - это строка ввода и можно записать в неё что угодно.
Привет, три равно сплошными полосками и т.д. что за плагин,?
при регистрации всплывающее окно не работает на сайте.
Добрый, а так можно сделать? Добавить функцию для 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()
Плохо что вместе с event.preventDefault() выключаются ctrl + r и ctrl + l
На превью кажется Ван Гог
кто подскажет почему адресс в строке не меняеться на новый, а добавляеться к старому?
Vладилен, привет! Классное видео!
В следующем, пожалуйста, расскажи как из подручных средств сделать блиндажную свечу!
Вот я с базовыми знаниями JS смотрю на то, как Владилен знает любой метод на любую ситуацию и думаю, реально ли этому могут научить в курсе у Владилена? Есть кто с курса?
Используй метод replace, вместо всяких сабстрингов, заодно и регулярки подтянешь!
Вместо кучи сплитов двумя регулярками можно обойтись, а если постараться, то и одной. 😉
Ребят, подскажите пж! Вместо иконок точки отображаются. У меня у одного такое???
неплохой практикой для начинающих в React, будет задача переписать этот проект на React
Не вижу никаких проблем в этом)
как сделать такой курсор текстовый анимационный?
Вы нашли ответ на ваш ответ? Тоже хотел такой сделать, прикольный)
где то уже такое видел
владилен когда стоит начинать учить реакт
зачем тогда вообще нужна была кнопка, если data-type мы продублировали и клик можем ловить на иконке? Не понравился этот момент
то что ты в css прописываешь background: rbga(0, 0, 0, 0.1); - не работает
rgba
07:09 как сделать чтобы кнопка ка ком был
Всё круто, только не клиКбоард, а клиПбоард)
ЛАЙК ОТ СЕООНЛИ
Получение цвета в 1 строку:
"#" + Math.floor(Math.random() * 0xFFFFFF).toString(16)
Так понимаю, что данный проект ограничивается лишь фантазией. Получается можно и градиенты создать тоже и т.д. )
Именно так
@@olgakolesnichenko2463 я знаю про этот ресурс. Но куда приятнее когда у тебя есть свой такой же инструмент )
Владлен, у тебя самые непонятные уроки по js из всего что я видел, поздравляю!
Так он сам себе объясняет)) это вообще бред а не уроки.
@@Vladimir-1-1 согласен, пустая трата времени. Такое ощущение что у него фейковые восторженные комментарии
Владилен, Ты на Кипре что ли? ))
Нет, в Питере. С чего вопрос?)
регистрация не проходит!
Можно было написать вот так
document.addEventListener("click", event => {
const targetItem = event.target;
if (targetItem.closest("[data-type]")) {
console.log(targetItem.closest("[data-type]"))
}
})
а не давать кнопке и иконке data-type.
метод closest будет искать не только элемент который нажат но и родительские элементы!
А так ролик классный!
а еще лучше просто иконке в стилях добавить pointer-events: none
@@vladimira.815 Не проверял. Но выглядит как решение :)
Либо в css прописать pointer-events:none иконкам
@@vladimira.815 можете подсказать как будет выглядеть document.addEventListener("click", event => ..... после добавления pointer-events: none?
@@simonbryczkowski8675 Это шутка если да то смешно. А если серьёзно то pointer-events надо дать иконке.
У Вас проблема с регистрацией на сайте к марафону.
Если ты не из рф, то нужен vpn
Как стать такой же умной😭у меня ощущение, что за полгода я ничему не научилась
Часов по 6 , три сайта сделала, но на более серьёзный уровень не могу перейти, односложные сайты получаются
@@mariins267 вообще, равняться не нужно на кого-то в интернете. Ориентируйся лишь на актуальные требования работодателей
@@mariins267 хм, мой комментарий удалился почему-то. Продублирую: зайди на сайт по поиску работы, посмотри с десяток вакансий и выдели технологии, которые в основном требуют работодатели. За следующие полгода их выучишь и сможешь устроиться. Вполне реальный план.
@@alexander551 я видела его)
@@mariins267 мгм. Видимо, нельзя упоминать те сайты на этом канале.
В принципе, нужно действительно около года, чтобы стать frontend-разработчиком
Здравствуйте, хороший урок, но по моему слишком легко, я вроде и новичок, но тут все так размусоливается, это для людей которые начали тзучать js прям только что, а людям которые начали только что такие проекты в портфолио не нужна, да и проект слишком легкий
Боже мой, что тут делать столько времени, какие библиотеки...
Когда новое видео брат?
Какую тему хочешь увидеть?
@@VladilenMinin Не знаю, ничего в голову не приходит, любое видео сделай всё ровно у тебя получается и хорошо объясняешь. Думаю что то касательно новичков в программировании что то запиши.