Hey everyone, thanks for watching! Note that this video is intentionally very fast paced. The goal here is not for you to spend hours typing every key that I type. I just don’t think that’s an effective way to learn, because then I end up doing all of the critical thinking for you. And if you’re anything like me, by the time you finish a super long video, you have no mental energy left to actually practice. Instead, if you want to follow along, then follow along with the overall thought process and actually challenge yourself to implement each portion of this application before watching exactly how I do it. Or alternatively, use this video as an explanation of the code and you can use that as starter code for your own larger project where you improve upon what I do in this video.
Here’s some ideas you could use to expand upon the project: - Finalize the page with styling - Improve the accessibility - Add music and sound effects - Make a more complicated scoring system with levels - Mouse controls - Create a leaderboard (locally or with a server)
Incredible video. This is such a good learning project for things I don’t normally use, such as a reducer for state, or really anything in TypeScript properly. I also like the way it’s left open-ended and not too opinionated, because I see a lot of Tetris clones and some have good features while others have unfavorable features, and lately, I’ve been wanting to make my own. I agree that most videos already online are around 2 hours, and it can be a little mentally exhausting to follow along and keep up with that, but with this, I can always just go back a few seconds.
5:45 There are some intricacies in the rotation operations. For instance, while S and Z pieces have four rotations, they always favor the bottom and right sides of their rotation space (hence the "right handed" aspect of this rotation system.)
It probably took ~3 hours to get it working... then I realized my code was kinda gross so I spent a couple hours rewriting it in a cleaner way (the original version had a bunch of redundant state instead of the reducer). I also used GPT to automate a few of the tedious steps like generating the SHAPES 2D arrays for each block type and the corresponding CSS colors. Editing the video took way longer than writing the code lol
@@ConnerArdman Hi Connor, please consider something similar but doing second video where you refactor the code. That is where the real value is for beginners. They can see that the first version of the software is kinda crappy but the key is that its working. The second version after refactor can be published and the third run is fixing minor bugs, make it it more efficient/nicer etc. I would actually enjoy seeing you writing the initial code and then the rewrite more. Also it would take you much less time to edit :) Amazing video anyway!
Hey Conner, great content man... more love to you. your CSS skills also on point. Could you please make a dedicated video on your CSS stuff or project using that? you got a sub..
Thanks, glad you enjoy it! I have a few CSS videos on my channel, although not in this exact style (they're all tips or challenges). I might make something like this with CSS soon though 👀
Thanks! As for mid-level, that doesn’t really have much to do with coding speed lol. That’s more about your ability to contribute to a larger software team beyond the scope of just assigned tasks/projects.
![Noob To Max With DRAGON REWORK In Blox Fruits [FULL MOVIE]](http://i.ytimg.com/vi/LnBMOinoOvA/mqdefault.jpg)
Hey everyone, thanks for watching! Note that this video is intentionally very fast paced. The goal here is not for you to spend hours typing every key that I type. I just don’t think that’s an effective way to learn, because then I end up doing all of the critical thinking for you. And if you’re anything like me, by the time you finish a super long video, you have no mental energy left to actually practice.
Instead, if you want to follow along, then follow along with the overall thought process and actually challenge yourself to implement each portion of this application before watching exactly how I do it. Or alternatively, use this video as an explanation of the code and you can use that as starter code for your own larger project where you improve upon what I do in this video.
Here’s some ideas you could use to expand upon the project:
- Finalize the page with styling
- Improve the accessibility
- Add music and sound effects
- Make a more complicated scoring system with levels
- Mouse controls
- Create a leaderboard (locally or with a server)
Incredible video. This is such a good learning project for things I don’t normally use, such as a reducer for state, or really anything in TypeScript properly. I also like the way it’s left open-ended and not too opinionated, because I see a lot of Tetris clones and some have good features while others have unfavorable features, and lately, I’ve been wanting to make my own. I agree that most videos already online are around 2 hours, and it can be a little mentally exhausting to follow along and keep up with that, but with this, I can always just go back a few seconds.
5:45 There are some intricacies in the rotation operations. For instance, while S and Z pieces have four rotations, they always favor the bottom and right sides of their rotation space (hence the "right handed" aspect of this rotation system.)
Conner, you made this look EASY! Great job man!
Great tutorial. You have my sub. What vscode theme do you use in this vid?
Navigating bw the files like this is awesome 👍
How long did it take you to create this app? It seems crazy.
It probably took ~3 hours to get it working... then I realized my code was kinda gross so I spent a couple hours rewriting it in a cleaner way (the original version had a bunch of redundant state instead of the reducer). I also used GPT to automate a few of the tedious steps like generating the SHAPES 2D arrays for each block type and the corresponding CSS colors. Editing the video took way longer than writing the code lol
@@ConnerArdman Hi Connor, please consider something similar but doing second video where you refactor the code. That is where the real value is for beginners. They can see that the first version of the software is kinda crappy but the key is that its working. The second version after refactor can be published and the third run is fixing minor bugs, make it it more efficient/nicer etc. I would actually enjoy seeing you writing the initial code and then the rewrite more. Also it would take you much less time to edit :) Amazing video anyway!
Wow, that's new style Conner !!! Loved it !
Glad you liked it! And yeah, I've been trying to experiment with some different styles to see what works best / try to make things a bit more unique.
Hey Conner, great content man... more love to you. your CSS skills also on point. Could you please make a dedicated video on your CSS stuff or project using that?
you got a sub..
ps: your previous videos also very much helpful..
Thanks, glad you enjoy it! I have a few CSS videos on my channel, although not in this exact style (they're all tips or challenges). I might make something like this with CSS soon though 👀
Dude this is dope
Nice. could you deploy it so we could try it out?
Sure, here it is: connerardman.github.io/tetris-react/
Such a great video 🎉 I finished the game in 2 days, working about 6 hours 😂, can I consider my self as mid-level dev?
Thanks! As for mid-level, that doesn’t really have much to do with coding speed lol. That’s more about your ability to contribute to a larger software team beyond the scope of just assigned tasks/projects.
waht a great video