Очень интересно было делать такой проект. Спасибо за комментарии которые даешь дополнительно, объясняя как работает TS и в принципе логику происходящего, а то мне как новичку пока сложно за всем уследить кто за что отвечает. Очень приятно что не остановился на готовом работающем коде, а показал как можно рефакторить его - это оооочень ценно! То что, как ты сказал "тупил" - в этом есть особая прелесть - показываешь что ты это делаешь в режиме реального времени и ты реальный человек который рассуждает. Павел - ты супер! 🔥
Очень крутой контент, подписался. Смог сделать тестовое на vue, хотя не разу его в глаза не видел, но работал на реакте и ангуляре. Не бросай делать ролики, очень хорошо объясняешь. Ps немного напрягает мультяшный голос но со временем привык)
Топовый курс, продолжай в том же духе, курсы такого уровня на vue еще не встречал, буду следить за новыми видосами, хотелось бы побольше про vue + composition API + Ts, было бы прикольно посмотреть какой нибудь проект в лайв режиме
Очень классное видео! С комментариями и отличные темы поднимаются. Так же, считаю, что оно для тех, кто знает JS и уже разбирал основы VUE и TS. С нуля будет сложно понять о чем речь (сугубо мое мнение) . Спасибо 👍
Шикарная практика! Прошёл на одном дыхании! Не заметил, как время пролетело. В одном видео база, которые многие умудряются растягивать на 20 часов. Топ!
Спасибо большое за практику. Очень помогла 🔥🔥🔥 У кого в конце видео появилась проблема с повторяющимися буквами в ошибках, добавьте return после showNotification(): window.addEventListener('keydown', ({ key }) => { if( isWin.value || isLose.value ) { return } if(letters.value.includes(key)){ showNotification() return }
Пара замечаний по ролику 1. ключ для элементов списка не надо использовать индекс, это прокатывает но это порочная практика для крупных списков или компонентов где несколько динамических списков. Приемлемым тут было формировать ключ по комбинации символ + индекс 2. проверку символа к регулярке надо выносить в отдельную функцию и вызывать внутри проверки условия if, иначе для каждого раза проверки она пересоздается и сборщик мусора вынужден убивать созданную для прошлой проверки функцию. После рефакторинга применил более удачное решение. 3. вычисления внутри шаблона делать не желательно, применять тернарники в том числе, если шаблон будет перерисовываться по любым основаниям все эти вычисления будут пересчитаны, это не производительно, поэтому всем им место в компьюетед свойствах 4. при импортах компонентов лучше использовать абсолютные пути, начинающиеся с @ 5. Выносить функционал как показал автор надо только в 2 случаях, если он используется в разных местах приложения, или размер компонента перевалил за золотой стандарт 300 строк, выносить абы выносить не надо. Достаточно сгрупировать по принципу выполняемой функциональности. Иначе снижается читаемость, приходится проваливаться в use импорты чтобы понять что они делают и соответственно что делает компонент с их участием. За применение тайпскрипта автору респект
А могли бы дать ссылку на гит или любой другой источник(куда бы Вы могли залить), отрефакториного кода? Если Вас не затруднит, я просто учусь и для меня такие вещи: как делать правильно и лучше и вот все такое - прям очень важно и интересно, очень бы помогли ).
форточку открой. автор показал возможную реализацию на свой взгляд, а как правильно неправильно, решать не тебе, в комментариях, а команде, с которой работаешь
Сначала несколько напрягал измененный голос - ну не серьезно как-то! :) Но содержимое все перевешивает! Я прям крайне удивлен. Наконец кто-то смог вырваться из проклятья TODO-листа и сделать что-то нормальное, и креативное! Ну сложность порадовала - не совсем для детского сада. В дальнейшем хотелось бы увидеть постепенное возрастание сложности примеров, пусть это и будет растягиваться на несколько таких видео. А то в русскоязычном сегменте на composition прям совсем голяк.
В самом конце видео после рефакторинга уведомления о повторном символе, в App.vue, после showNotification() нужен return. А то без этого повторные символы всё равно можно будет вводить
Крутой контент спасибо! Изменение голоса правда все портит но всеж.. ) А еще вопрос такой: зачем в ref брать переменную обычную? ту же "василий", почему просто нельзя её задать без реф? и вот такие моменты.. Мне казалось рефы только для ДОМ элементов...
Давайте похоливарим. А насколько это правильно управлять методами дочернего компонента извне? Я, конечно, тоже так делал пару раз, но мне лично кажется, что этого стоит избегать при возможности. Что думаете?
жаль что при таком голосе на полуторной скорости не посмотреть. и вопрос к автору. а вот подобное но не с vue файлами, а если js и в них старым способом писать активную часть а шаблон в html файлах в теге скрипт?
Мультиязычность i18n, мультиселекты не понятный вопрос, мультиформы на вью делаются изи, несколько компонентов внутри формы показываем каждый из них в зависимости от текущего шага, сама форма помнит все состояние. Авторизация , при загрузке приложения проверил если пользователь не авторизован перенаправил на логин, авторизация стандратно запросами на сервер и получением токена. Роли делаются на вью гвардах, самый популярный beforeEach перед переходом на страницу чекает допуски пользователя и мета инфу роута куда собрались ломится если совпадают пропускает переход если не редирект.
делаю с вами, но везде краснота. подчеркивает даже import {ref} from 'vue' (Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option)
Интересно было бы узнать, почему Vue так и не одолел React по популярности. Помню одно время ему пророчили первое место во фронте. Даже говорили, что с выходом 3й версии он порвет React. Но воз и ныне там. Даже относительно новые библиотеки, типа Svelte, отвоевывают свою долю. А Vue, такое впечатление, только сдает позиции. В чем проблема?
Было бы круто увиделть материал по вебсокетам на накст 3 с обьяснениями На русскоязычном пространстве ютуба днём с огнём не сыщешь такого материала Заранее спасибо!
Импортировать defineProps не обязательно, ровно как и defineEmits. Vue делает это сам под капотом. Чтобы не было ошибки надо ввести комментариий выше вызова, который отключает это предупреждение. Уже не помню точно, но Webstorm например автоматом вставляет.
@@Ctrl_C.Ctrl_V а в этом же нет смысла. Массив все равно передается по ссылке. А вот лишняя переменная, ещё и вычисляемая, в данном случае избыточна :)
Тащить ради 1 урла целую библиотеку не стило, Fetch API более чем достаточного для этого. Win и Lose не стоило тащить в хук, это отдельная часть логики, которая просто использует экспортируемые переменные из хука.
А у меня опять какое-то проклятье началось: сразу после выноса GameHeader в отдельный компонент в VSCode ошибка висит: Не удалось найти файл объявления модуля "./components/GameHeader.vue". "d:/dev/viselnik/src/components/GameHeader.vue" имеет неявный тип "any".ts(7016) У всех все так легко и просто на видео получается, а в жизни сидишь до 3 часов ночи и не понимаешь, что делать надо, и ни гугл, ни чатЖПТ не помогают😄 как исправить-то?
Круто, спасибо! Жду еще проектов Vue 3 (Composition API) и TypeScript :D
Очень интересно было делать такой проект. Спасибо за комментарии которые даешь дополнительно, объясняя как работает TS и в принципе логику происходящего, а то мне как новичку пока сложно за всем уследить кто за что отвечает. Очень приятно что не остановился на готовом работающем коде, а показал как можно рефакторить его - это оооочень ценно! То что, как ты сказал "тупил" - в этом есть особая прелесть - показываешь что ты это делаешь в режиме реального времени и ты реальный человек который рассуждает. Павел - ты супер! 🔥
Большое спасибо, очень приятно!
new
@@mgfck new
Это просто вау. Спасибо огромное. Буду ждать других видео.
Отличный ролик и пример для объяснения. За час базу подтянул, спасибо!
Очень крутой канал, огромное вам спасибо) Желаю удачи с развитием канала!!!
Очень крутой контент, подписался. Смог сделать тестовое на vue, хотя не разу его в глаза не видел, но работал на реакте и ангуляре. Не бросай делать ролики, очень хорошо объясняешь.
Ps немного напрягает мультяшный голос но со временем привык)
Вот это интересно! Благодарочка, лайк и подписка!
Ждем больше контента composition api+ts
Спасибо, очень информативное видео! Не останавливайся, у тебя круто получается !)
Топовый курс, продолжай в том же духе, курсы такого уровня на vue еще не встречал, буду следить за новыми видосами, хотелось бы побольше про vue + composition API + Ts, было бы прикольно посмотреть какой нибудь проект в лайв режиме
Или вообще про архитектуру приложений на Vue
Было бы также интересно посмотреть урок про VueX + TypeScript
@@mysoul1632 new
Очень классное видео! С комментариями и отличные темы поднимаются.
Так же, считаю, что оно для тех, кто знает JS и уже разбирал основы VUE и TS. С нуля будет сложно понять о чем речь (сугубо мое мнение) .
Спасибо 👍
Спасибо большое за такой контент (vue+ts). Очень не хватает видео на данную связку. Жду новых видео!
Шикарная практика! Прошёл на одном дыхании! Не заметил, как время пролетело. В одном видео база, которые многие умудряются растягивать на 20 часов. Топ!
Спасибо большое за практику. Очень помогла 🔥🔥🔥
У кого в конце видео появилась проблема с повторяющимися буквами в ошибках, добавьте return после showNotification():
window.addEventListener('keydown', ({ key }) => {
if( isWin.value || isLose.value ) {
return
}
if(letters.value.includes(key)){
showNotification()
return
}
Ждем видео со скрипт setup и подробное объяснение всех действий) И вместо маковых данных предлагаю создать фейковую БД, либо взять какую нибудь апишку
Пара замечаний по ролику
1. ключ для элементов списка не надо использовать индекс, это прокатывает но это порочная практика для крупных списков или компонентов где несколько динамических списков. Приемлемым тут было формировать ключ по комбинации символ + индекс
2. проверку символа к регулярке надо выносить в отдельную функцию и вызывать внутри проверки условия if, иначе для каждого раза проверки она пересоздается и сборщик мусора вынужден убивать созданную для прошлой проверки функцию. После рефакторинга применил более удачное решение.
3. вычисления внутри шаблона делать не желательно, применять тернарники в том числе, если шаблон будет перерисовываться по любым основаниям все эти вычисления будут пересчитаны, это не производительно, поэтому всем им место в компьюетед свойствах
4. при импортах компонентов лучше использовать абсолютные пути, начинающиеся с @
5. Выносить функционал как показал автор надо только в 2 случаях, если он используется в разных местах приложения, или размер компонента перевалил за золотой стандарт 300 строк, выносить абы выносить не надо. Достаточно сгрупировать по принципу выполняемой функциональности. Иначе снижается читаемость, приходится проваливаться в use импорты чтобы понять что они делают и соответственно что делает компонент с их участием.
За применение тайпскрипта автору респект
А могли бы дать ссылку на гит или любой другой источник(куда бы Вы могли залить), отрефакториного кода? Если Вас не затруднит, я просто учусь и для меня такие вещи: как делать правильно и лучше и вот все такое - прям очень важно и интересно, очень бы помогли ).
форточку открой. автор показал возможную реализацию на свой взгляд, а как правильно неправильно, решать не тебе, в комментариях, а команде, с которой работаешь
@@tatianovnafrutti8982 привет, напиши электронную почту свою или телегу
Сначала несколько напрягал измененный голос - ну не серьезно как-то! :) Но содержимое все перевешивает! Я прям крайне удивлен. Наконец кто-то смог вырваться из проклятья TODO-листа и сделать что-то нормальное, и креативное! Ну сложность порадовала - не совсем для детского сада. В дальнейшем хотелось бы увидеть постепенное возрастание сложности примеров, пусть это и будет растягиваться на несколько таких видео. А то в русскоязычном сегменте на composition прям совсем голяк.
Супер! Спасибо за интересный контент)
В самом конце видео после рефакторинга уведомления о повторном символе, в App.vue, после showNotification() нужен return. А то без этого повторные символы всё равно можно будет вводить
Спасибо! Очень полезное видео!
Крутой контент спасибо! Изменение голоса правда все портит но всеж.. ) А еще вопрос такой: зачем в ref брать переменную обычную? ту же "василий", почему просто нельзя её задать без реф? и вот такие моменты.. Мне казалось рефы только для ДОМ элементов...
Круто! Спасибо
Классно, а чем модулировали голос? :) "Введу букву АШ (ш)" - это круто
Thank you very much!
Урок бомбический, покройте это код тестами или может есть уже уроки про тесты?
Давайте похоливарим. А насколько это правильно управлять методами дочернего компонента извне? Я, конечно, тоже так делал пару раз, но мне лично кажется, что этого стоит избегать при возможности. Что думаете?
спасибо бро круто)
Верстка лежит здесь (папка layout)
github.com/pavellbor/hangman-vue-ts
жаль что при таком голосе на полуторной скорости не посмотреть. и вопрос к автору. а вот подобное но не с vue файлами, а если js и в них старым способом писать активную часть а шаблон в html файлах в теге скрипт?
спасибо за видео
жду еще крутых работ давно небыло
подскажи если возможно как ты задеплоил на версел? у меня закрашилось при деплое (((
Еще бы голос не коверкался - вообще хорошо бы было :) А так супер! продолжай!
Спасибо за ролик! Будут ли ещё новые видео?
@@parmetra да, совсем скоро вернусь
@@mgfck ура-а! Спасибо! У вас отличный контент по Vue.
покажешь как архитектуру больших приложений делать мультиязычность мульти селекты и мульти формы а также авторизация и роли пермишены?
Мультиязычность i18n, мультиселекты не понятный вопрос, мультиформы на вью делаются изи, несколько компонентов внутри формы показываем каждый из них в зависимости от текущего шага, сама форма помнит все состояние. Авторизация , при загрузке приложения проверил если пользователь не авторизован перенаправил на логин, авторизация стандратно запросами на сервер и получением токена. Роли делаются на вью гвардах, самый популярный beforeEach перед переходом на страницу чекает допуски пользователя и мета инфу роута куда собрались ломится если совпадают пропускает переход если не редирект.
@@ValiantsinYushkevich Спасибо! Круто
Я не специалист, но разве не через emits прокидывать надо? Разве родитель должен иметь доступ к дочерним элементам?
Спасибо за видео, все круто и понятно. А какой шрифт вы используете в редакторе кода ?
Привет! Тема встроенная: Dark Modern. Шрифт по умолчанию.
делаю с вами, но везде краснота. подчеркивает даже import {ref} from 'vue' (Cannot find module 'vue'. Did you mean to set the 'moduleResolution' option to 'node', or to add aliases to the 'paths' option)
Прикольный проект, спасибо, подскажите сколько вы занимаетесь разработкой уже? Довольно быстро задачи решаете.
3 года (1 год на Vue)
@@mgfck вы молодец) код хорош) (о себе 3 года на nuxt 2). На composition свои приложения пишу схожим образом
Интересно было бы узнать, почему Vue так и не одолел React по популярности. Помню одно время ему пророчили первое место во фронте. Даже говорили, что с выходом 3й версии он порвет React. Но воз и ныне там. Даже относительно новые библиотеки, типа Svelte, отвоевывают свою долю. А Vue, такое впечатление, только сдает позиции. В чем проблема?
давай ещё че нить. по Nuxt, к примеру
Вместо index === [...].length - 1, можно использовать index === [...].lastIndex
Было бы круто увиделть материал по вебсокетам на накст 3 с обьяснениями
На русскоязычном пространстве ютуба днём с огнём не сыщешь такого материала
Заранее спасибо!
Там особо нечего объяснять, создал экземпляр сокета по адресу, подписался на события, ловишь их и как то реагируешь на фронте
по какой - то причине не вводится 1 буква, интересно почему?
Вот такая ошибка
error 'defineProps' is not defined
Почему у вас без import {defineProps} from "vue"; всё работает?
Импортировать defineProps не обязательно, ровно как и defineEmits. Vue делает это сам под капотом. Чтобы не было ошибки надо ввести комментариий выше вызова, который отключает это предупреждение. Уже не помню точно, но Webstorm например автоматом вставляет.
@@ZaurmagRu Не понял какой комментарий? У меня не Webstorm ругается. А красный экран в браузере
@@KimarTV Странно, что в браузере ошибка. По идее не должно быть...
Классно все, понятно, но голос не очень, сбивает с толку немного
Как ты сделал такой голос?
а баг с тем, что ТС ругается, вернулся в конце видео) не вылечили)
Благодарю. Подписался.
Все супер! Но зачем голос искажать?
зачем нам correctLetters, если такую же проверку можно было сделать и просто с letters? Лишее computed свойство
Да, можно было. correctLetters используется просто для того чтобы не передавать весь массив, а передать уже отфильтрованный, не более
@@Ctrl_C.Ctrl_V а в этом же нет смысла. Массив все равно передается по ссылке. А вот лишняя переменная, ещё и вычисляемая, в данном случае избыточна :)
Да всё верно, я и не спорю) Ну мб автор увидит и ответит зачем так сделал))@@ВладимирНетот
А VueX будет ?
Тащить ради 1 урла целую библиотеку не стило, Fetch API более чем достаточного для этого. Win и Lose не стоило тащить в хук, это отдельная часть логики, которая просто использует экспортируемые переменные из хука.
А что с голосом???
Посадил
Ну какой вайт? вит - ну елки палки
буква "ш" это у нас вообще-то "ша", а не "аш" 🙃😉
Зря голос изменил, дизлайк , не возможно слушать ушами...
А у меня опять какое-то проклятье началось: сразу после выноса GameHeader в отдельный компонент в VSCode ошибка висит:
Не удалось найти файл объявления модуля "./components/GameHeader.vue". "d:/dev/viselnik/src/components/GameHeader.vue" имеет неявный тип "any".ts(7016)
У всех все так легко и просто на видео получается, а в жизни сидишь до 3 часов ночи и не понимаешь, что делать надо, и ни гугл, ни чатЖПТ не помогают😄 как исправить-то?