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