The JSourney: socket.io

Introduction

Ok, so don't get me wrong, I am not a good developer but let me tell you, the last 4 days has been one of the most interesting & fun 4 days I've had for quite a while. Let me go with a little backstory here. I decided to actually start learning JS instead of lying to myself that I know what's going on. I was living with a big Codepen, Stack Overflow, Google: How to ____ Javascript, lie. Shameful isn't it... Anyway, so I started looking here and there for JS tutorials but not a single one caught my attention. However, I remembered that there's this guy (some of you most probably already know him) that goes by ChrisOnCode. So this guy has a website - Scotch.io. And in this website, there's a 'Learn JavaScript from Scratch' button. The content? Boy, oh boy... was it top 🔥. It was straight to the point, clear, and with real-life examples on the record. It was just what I needed!

The JSourney

Well now, I am 1 hour in and everything seems pretty much fine. I demolished the 'let' keyword as well as the 'querySelector' method. I'm staying there daydreaming of how many awesome things I can create as soon as I learn more JS. I was always amazed by the superb(this for example) projects you can create if you are actually good with JS. And here comes the crucial moment that made me leave every project I am currently doing and sell my soul to the JS devil. I got to a lesson called "crazy buttons" where Chris creates a button which, when hovered, moves to a random location within the document. This was it. This is what I want - a button that moves when clicked. FOREVER... And up we go!

Singleplayer crazy button

I managed to get to the end of Chris's course and I was still feeling insecure about starting my own project but I didn't let that take control over me. I was going to create the crazy button game and upload it to my website! So I opened my 'crazy buttons' folder and gave the HTML a touch, added some styling to it, and puff - it looks cool! Then I started practicing my newly acquired JS skills by changing the style of elements, adding classes, and updating the score when the button gets clicked. A couple of hours in and I finished my little web game. I called it 'Aim Trainer'. You can give the singleplayer version of it a go on my website here.

"Wait, how are .io games made?"

And then a thought entered my mind. A simple thought I never seemed to google before. Okay, I had a single-player game I can play but how are .io games made? How are people seeing the same page and how does this page update realtime? Give me a moment, let me google that. Sockets... real-time... io... express... node... okay, I think I got it. Let's get to work. Google this, watch that... 3 days later puff - a multiplayer version of my game. And more importantly - more JS knowledge! I am not going to fall into details on how I gave my crazy button the ability to replicate itself on a number of screens. At least not in this post. You can read the full tutorial here. Oh, and for the record - I tried to build a multiplayer murder mystery game before creating the multiplayer version of the button one. Unfortunately, my skills are not good enough for a big project, and for the time being, I decided to stick with the small ones.

"I did it. Somehow, it worked!"

In a conclusion, I want to say that these 4 days have been a blast and I am looking forward to more of these. I learned a lot, I finally finished a course from beginning to the end, and most importantly - I applied the knowledge into my own project. A valuable lesson I could share with all of you is to go out there and start a project. Stop stressing about the skill level & knowledge gap. You will finish it, one way or another!

I am grateful to all the people who helped me, even indirectly through posts & comments on forums. As I already stated in one of my posts - if you are active in the tech communities, please continue, we appreciate it!