Lots of thanks! A great course: so logical, complicated things are made very easy to understand, the projects are perfect to reinforce what is taught. Just a perfection in every detail!
@learnsimple45923 жыл бұрын
The first episode where you introduced the course after your long absence should have been called “The Net Ninja Episode VI The Return of The Ninja”, Shaun
@NetNinja3 жыл бұрын
lol, I like it.
@maankabe015 ай бұрын
the ninja real name for real ninja instructor , he explains like he is the creator , very confident , very smooth. the best vue course i would buy the full one . thanks shaun.
@matthiaskolley10483 жыл бұрын
I solved the reactionTime by using `startTime` and `endTime` and a computed `reactionTime`. This should have higher precision (not only in 10ms steps) if this is needed. Anyway: As always, very good explanations! Thank you.
@BIGScream922 жыл бұрын
I made the Reaction Timer before i watched how he made it. For me it was intuitive too, simply saving the startTime Date and compare it with the endTime Date, when user clicks. Should be a better performance too, because there is no Timer Running constantly
@russdear2 жыл бұрын
I did the same, using Date.now(), and felt good because I had thought something out for myself, which I'm sure is Shaun's aim anyway. Thank you Shaun for great videos, and superb training. Cheers Russ
@maxosall69723 жыл бұрын
One of the best vue courses, hopefully I won't need another
@xeon78793 жыл бұрын
Decided to buy the udemy course. Thanks for uploading it to youtube aswell so i could take a look first :)
@NetNinja3 жыл бұрын
Thank you, I hope you enjoy the full course :)
@spyxd52453 жыл бұрын
I recommend other people watching this use the date objects to calculate the reaction time. It is more precise than the 10 ms interval.
@Lovatic1boy3 жыл бұрын
This exercise is amazing cause u figured out a fun way to teach how to pass data from child to parent and to teach about lifecycle hooks at the same time. Thats pretty creative.
@paninii992 ай бұрын
I really like this course - for the timer, an extra exercise could be to prevent players from just spamclicking to get a good score.
@mo-cj1zp Жыл бұрын
لغتك الانجليزية سهلة وبطيئة يمكن فهمها بسهولة + شرحك بسيط وواضح + وجود نص انجليزى مكتوب = تحفة برمجية . شكرا
@alisidali5802 жыл бұрын
thank you sir for this explanations, and i want to talk about lifecycle hooks even though i'm bit late (after two years) 1. i want to mention about the delay property and props, i think we need to sent the delay value after click event not before, so we have to change the value before it get mounted, in order to do that we need isPlaying property. 2. what i want to say also is the hook methods is used when there is no events, in other words how to fire a functions without events, here the hooks get handy. thank you
@rilson083 жыл бұрын
Thank you, Shaun, for the great job, as usual. Greetings from Brazil !
@zainabziani11362 жыл бұрын
The best one who has ever explained hooks!
@StephenLoney Жыл бұрын
Watching this through a couple of times really helped with understanding key concepts. Appreciated!
@NetNinja Жыл бұрын
Awesome to hear that, thanks Stephen :)
@wolfOfBlackMountain7 ай бұрын
Such a great course so far. I am enjoying it greatly. You are an amazing teacher. You gave me the idea to build upon the game with different levels :)
@NetNinja7 ай бұрын
Awesome :) glad you're enjoying it, thanks for watching!
@julienj91632 жыл бұрын
Thanks so much for this course, it's so clear and easy to understand :)
@push2me936 Жыл бұрын
Thanks a lot Shaun! Let's give it a wow! This is teaching on Champions League level!
@PiyushSingh-mt2tb3 жыл бұрын
Alright then Gang! This is the best series on Vue 3!
@kefen_2 жыл бұрын
" I'm outputing a tank" LOL THAT KILLED ME 😂😂😂
@MetallicManowar3 жыл бұрын
Awesome series mate, Im new here and happy to see you have a lot of valuable content. Would love to see you building a Django Vue app and learn more about the different ways to integrate those two and the best practices! Happy holidays, all the best to you and your fam!! :)
@marsdwarf Жыл бұрын
Love the challenge part!
@nyzss3 жыл бұрын
I've been looking through the doc to learn about some stuff I didn't (I'm following the course and making a a basic project at the same time) and I think the best thing would be to first finish watching this course then start doing little projects because your explanations are really great, and I'm having a bit of a hard time with the docs lol (even though I'm sure it's just me being a beginner)
@samduss4193 Жыл бұрын
what I do is each explanation chapiter i go to the doc see what it looks like, then project or exercice i see him doing so u catch .. and next day u try to do it yourself ... it works for me
@GRANITE-EDUCATION2 жыл бұрын
I solved this using "Date.now()" at block render and again at user click event (on the block). I took the difference between the two and was able to get (what I think was) a very accurate result. Please let me know your thoughts on this solution! I've loved this series! :)
@runehansen31053 жыл бұрын
Ninja Fingers... I can't react that fast. I am impressed by The Net Ninja's course funnel. Very clever and effective indeed. Good course.
@Foused873 жыл бұрын
I wait for React tutorials like this!
@ridl273 жыл бұрын
you can also find great React playlists on this channel.
@fredpourlesintimes2 жыл бұрын
It's very interesting to make the difference between the mounted state of the componant and its displaying. It's really relevant; thanks :)
@lastrae8129 Жыл бұрын
For people following this tutorial now, I had probleme with the change() method, so I read the doc. It is now recommanded to use the watch() one instead.
@heysalah3 жыл бұрын
Hey ninja, thanks for the video. And if you are seeing this comment please consider doing Nginx playlist, it would be really helpful specially that lot of people uses it as frontend server. And thanks brother
@shawnbeans73892 жыл бұрын
xD 41:43 that was super impressive i cant beat it! my pb is only 280 ms
@sayemarg3 жыл бұрын
Your Learning Tutorial Is Very Good ❤ I Think In This Lesson Using Date Is Better Than setInterval For Reaction Time...
@IkraamDev3 жыл бұрын
Did you know You created Vue?
@chaitanyajharbadem-17403 жыл бұрын
Evan hue created vue
@spicemasterii67753 жыл бұрын
Yes. But did you know that even You can create Vue?
@MartinAlix Жыл бұрын
@@spicemasterii6775 🥁
@terandox99992 жыл бұрын
Best Vue Tutorial out there. My best score was 290ms :D
@samduss4193 Жыл бұрын
hahah the last moment u try to do ninja fingers... but your mouse went Crazy, careful not breaking your keyboard and screen to win this game lol... Thanks for the lesson :)
@MrSMGun3 жыл бұрын
is it better to have an interval for the timer or just store the start time and then subtract from the current time. using Date.now()
@eduardbi75683 жыл бұрын
Also wanted to mention it
@Wilhelm_LAS2 жыл бұрын
Man thats so genius
@JamesMorgan23 жыл бұрын
@40:07 You can spot an MMO gamer who typos rank and tank. Did exactly the same myself :D
@jacobedler6435 Жыл бұрын
Thanks for the very easy and good-flowing Tutorial! Really good understandable. One thing: for disableing the button i just worked with an v-if-Statement on the button-element like so: Is this possible too?
@irritator75823 жыл бұрын
Please make Nuxt.js tutorial or Go tutorial
@krishnapriyalekha40843 жыл бұрын
This exercise was fantastic ! I want to dynamically position the Clickme box in the page than in a set position. How can I achieve that ? Thanks
@k1i1d1u1s3 жыл бұрын
First of all go to Block.vue add :style="pose" in the block div tag then add "pose=null," in side the data returning function after that, inside the mounted function go to setTimeout and then add this below this.startTimer(): function range(start, end) { return[...Array(end + 1).keys()].filter(value => end >= value && start
@MartinMarchev3 жыл бұрын
Great tutorial! Just a question - when calculating the reaction time, why don't you just subtract start time from the end time? It's much simpler and would effectively give you the same result :-) Nevertheless, thanks for the great series!
@y_y61533 жыл бұрын
same question, any chance to get an answer?
@dergadget3 жыл бұрын
Well, for sure it is pretty sophisticated. But the deeper sense of it may be to demonstrate the concept of setTimeout(), setInterval() and clearInterval() just along the way, which both are way more useful than just a sole substraction.
@oussamachahidi92013 жыл бұрын
thank you so much this was very helpful !!!! God bless you
@shubhang28773 жыл бұрын
Thankyou Shaun
@nicolascendron2 жыл бұрын
Man you are aewsome!
@NetNinja2 жыл бұрын
Thanks for the support Nicolas :)
@user-tf8rc7wp9r7 ай бұрын
Are there any drawbacks if I used slots instead of props for above challenge. I am still able to achive the results
@igorr46823 жыл бұрын
U should show the component in random locations as well
@ir77553 жыл бұрын
i agreed, then we can make aim training game for fps games
@insightinternet10 ай бұрын
Hi was following along fine with this course until I hit the part where you use to display the Block component only when the isPlaying boolean is set to true by clicking the play button. This does not appear to work as clicking my play button does change the boolean to true but the component is not rendered. Is there a repo with a working solution for this so I can check what I am missing?
@deejayerick3 жыл бұрын
Thanks thanks Shaun!...
@ProviceUnity5 ай бұрын
28:00 Just for interest: i have other way to do these actions in my mind - on startTimer write down first timestamp then on stopTimer get another timestamp and calculate difference. Is this way wrong or could be used as good solution?
@kristoferkrus8 ай бұрын
Awesome tutorial, I really enjoy following it! I have a question, though: at 8:54, how you you get that pop-up menu? That's not something I get in VS Code. Does it require some specific extension?
@kristoferkrus8 ай бұрын
I found it: It requires the Vetur extension, which I guess I didn't install since I already had "Vue Language Features (Volar)," which I think I deemed did approximately the same thing (but apparently it doesn't). Uninstalling Vue Language Features and installing Vetur instead solved it.
@MartinAlix Жыл бұрын
You could clear the interval in unmounted
@azizrakhim56472 жыл бұрын
at 11:01 when I want to show Block component when isPlaying true using v-if it is not working. There is the warning in console: [Vue warn]: Property "isPlaying" was accessed during render but is not defined on instance. at
@reinoutko Жыл бұрын
I've been able to keep up with the tutorial quite good, but I got really confused when making the functions at 19:40
@lucianciubotaru39063 жыл бұрын
Thank you for this amazing tutorial! There is a question/issue from me regarding the part from 20:12 . My code is exactly as yours (triple checked), but instead of getting the green block after delay, I get a warning message saying: _____ Property "showBlock" was accessed during render but is not defined on instance. at at ______ I'm still getting the 'component mounted' log and the 'delay' number. Please help!
@johnhelmy49693 жыл бұрын
really you are a ninja
@00el043 жыл бұрын
Do you have any more Vue.js tutorials? :)
@Binuralka3 жыл бұрын
super cool teacher! :-)
@maskman48213 жыл бұрын
Chapter 5 ~ custom events with data if we want to send customed event from child component to parent component, we use this.$emit(event-name, data) within function or mounted hook. if parent component we receive this customed event using @event-name="function" to handle the received data. Chapter 6 ~ showing a result component we create a result component and pass props in parent component. In child component we receive props in props hook and use it in template to show the results.
@raz02293 жыл бұрын
40:00 Weird, I was getting this error: _Component template should contain exactly one root element_ until I nested in inside another div, but yours works fine without it
@samuelosei7293 жыл бұрын
Maybe you are using a different version of Vue, thus Vue 2.
@Wilhelm_LAS2 жыл бұрын
Just use v-if at app.vue in dude. if you use v-show it gives an error like that. Idk why tho
@raz02292 жыл бұрын
@@Wilhelm_LAS dam, from Vue 3 to SvelteKit within a year and love it so much that I lost my flow in Vue. Can't believe, time flies
@carlos95742 жыл бұрын
Good practice
@ralphmanosca90782 жыл бұрын
Hello just want to ask regarding the challenge, when I import the Results.vue component nothing functions and just loads an empty page PLEASE HELP THANKS!
@ivan337763 жыл бұрын
Hmmm, smth looks weird in IF statements, don't you think?) For example 200 ms will satisfy both 'ninja' and 'rapid' conditions and as a result you'll always see 'rapid'
@alexrinehart51883 жыл бұрын
Nah, there's an else if, guaranteeing that only one situation will be reached at a time. You can see this clearly at 40:23
@neaguflorin3492 Жыл бұрын
Hello, Can you tell me which theme are you using in this tutorial please:)
@nikolanajdov38412 жыл бұрын
Nice tutorial, thank you very much! I was just wondering, is there a better way to write the if/elseif statements? A cleaner way?
@JosePabloYuhigawa2 жыл бұрын
With SwitchCase statement probably.
@p-lelouch3 жыл бұрын
hi thank you for your lessons. please i would like to make a music download system with vuejs. can you do a tutorial on how to download in js please.
@Ezechielpitau2 жыл бұрын
You know what would be fantastic? A good Ionic + Vue tutorial seris. There's not really much out there...
@majdibrahem13992 жыл бұрын
thanks
@NetNinja2 жыл бұрын
You're welcome Majd :)
@girishparate64103 жыл бұрын
Your voice is very good
@matiascardone6353 жыл бұрын
Hi ! The git repo doesnt seem to be the right one as the files dont coincide with the lesson.... EDIT: Reaction Timer starts on lesson-30 on GIT .
@reydelocon6292 жыл бұрын
18:36 HAHAHAHHA can't stop laughing broo 😂
@squigglyspaghetti86902 жыл бұрын
For anyone wanting a specific example of using Date. mounted() { setTimeout(() => { this.showBlock = true this.startTimer() }, this.delay) }, methods: { startTimer() { this.totalTime = null this.startTime = Date.now() }, stopTimer() { if (this.totalTime === null) { this.totalTime = Date.now() - this.startTime console.log(this.totalTime) } } }
@Valkinsenn2 жыл бұрын
_Dude!_ Thank you! :D
@chiebidoluchinaemerem5860 Жыл бұрын
I would like to know the vs code extension for Vue that you use?
@danielwarzecha2007 Жыл бұрын
The old timey music makes the content less intimidating ty
08:57 what extension you are using for those snippets?
@MuhammadUsman-ix6jo3 жыл бұрын
Can you make same thing in react js
@ridl273 жыл бұрын
ty.
@pisanghangus22 жыл бұрын
nice
@gwnbw Жыл бұрын
should I memorize this
@asibe_cheta4 ай бұрын
Hahaha I got Ninja fingers 😇
@Viralplace Жыл бұрын
at 41:35 you broke the mouse to do a better time lol
@xxxxxx-pb3oj3 жыл бұрын
Do you use VUEX in your udemy course?
@NetNinja3 жыл бұрын
Not in the Udemy course, no, but I will be doing a free Vuex course on my channel soon.
@xxxxxx-pb3oj3 жыл бұрын
@@NetNinja heck yea! ❤
@betofc892 жыл бұрын
2:08 I don't need Spotify anymore.
@yesfishyy Жыл бұрын
gg
@junimeme56263 жыл бұрын
Never output a tank!
@sudhanwabokade12852 ай бұрын
12:50
@gokhanunal712 жыл бұрын
28:30
@TheLuksas3 жыл бұрын
Like for Ninja, but i'm giving up..
@NetNinja3 жыл бұрын
Don't give up :)
@univeth3 жыл бұрын
23:24
@ghostblackzero2 жыл бұрын
I can't beat 300ms
@deki90to3 жыл бұрын
Ohhh must say, one of the worst tutorials so far. Hope next will be better
@joellarsson93813 жыл бұрын
What a fantastic series. To begin with, thank you for that. I've had issues however with when I start the game, click the block, this appears as an error in the console instead of showing the results of the reaction speed and the rank of your speed. [Vue warn]: Unhandled error during execution of native event handler at at