Code Management with CI/CD Pipelines

I would like to start introducing you to a past experience that I had when I was at college, I was learning about basic HTML, CSS and Javascript, had recently learnt how to insert images, audio files into a web application, how to use CSS, learnt how to write functions, loops and if/else statements and similar other concepts, you can do quite a few things with these simple concepts when it comes to creating web pages, I was then planning to create a simple browser based game similar to the classic Duck Hunt which is basically an age old video game created by Nintendo in 1984 in which you shoot at images of ducks that pop up on your screen with your light gun (except in my case the gun was the computer mouse), so you can tell how basic my first videogame idea was!

I downloaded an image of a duck from the internet, used the random function javascript to make the image of the duck pop up on the screen with random coordinates after every 1 second and whenever the duck image pops up on the screen, the player had to click on the image to score a point before it disappeared, later on I added some sound effects in it e.g. the duck would cry when the player scores by shooting at it by clicking on it and did some other similar stupid, little, good things, I was pumped up with whatever I was able to achieve in this project and ofcourse I wanted to keep it safe so I created a repository on github(an online platform where you can store your code by uplodading on it) and pushed it there and after putting it on github, I deleted the project from my laptop and I didn't really think about this project for months!

One day, out of nowhere, I happened to have an idea to put some more features in the game, things like introducing difficulty levels in the game by putting multiple ducks on screen or making the ducks pop up on the screen every 0.5 seconds rather than 1 second and putting a background image to the whole game which would make it look like the hunt is going on in the forest somewhere etc. So I sat down, downloaded(cloned) the code of the project from github that I had uploaded there earlier(months ago) and started to look into it, for fist half an hour or so I stuggled too much in terms of knowing about the project structure, I could not belive it, I myself built the project, wrote all the code by myself but here I was after a couple of months trying to figure out how the heck did that thing work! It was a small project so it didn't take long to figure out but for whatever time it took, it was frustrating for sure! After as soon as I figured things out, I made notes of those in my daily diary and later it struck to me that I can type those notes in a text file and can keep the file in the project itself, what you would usually encounter as a ReadMe file in a lot of projects these days.

So I started making the changes to the project e.g. adding a background imgage, adding the difficluty levels to the game etc. I played the game for a couple of minutes, didn't really enjoyed it but had to see if everything is workign fine and then uploaded(pushed) the updated code back to github and deleted the project from my laptop. after a few days I told a friend about this project and he said he would like to see it, and at that moment I wished I had a link e.g. www.duck-hunt-by-neelesh.com so that I could share that link to him and he could play the game in the browser but I had not deployed the project on internet, github only kept my code as text files and it did not really run the project, so at that time, the only way to run the project was to download the code from github to a laptop/computer and then run it on that laptop/computer, so that is what I suggested my friend, he downloaded, quickly ran it as it was written in HTML, CSS and Javascript and could be easily run by any browser. My friend started playing the game and within first minute or so, he was able to find issues in the game, he made me aware of not one, not two, not three but 7 issues that my project had and one of the issue was that the score was not updating when a user switched back to the 'easy' difficulty level after having played the 'hard' level. I was surprised that I was not able to spot these issues when I tried it after making the changes and then I realised that I only played the 'easy' level and then switched to 'hard' level and played it but never really switched back to the 'easy' level, so I never encountered the issue.

This issue was not there before I made the recent new updates in the project, this issue was introduces when I added the difficulty levels in the game, the code changes that I made for addding the difficulty levels broke an existing functionality of the project i.e. the score updates that were working when no difficulty levels were introduced, now, that functionality of score updates was broken. Anyhow, we had a few laughs about the issues and though I never really went back to fix these things in the project as perhaps I simply didn't get time, I definelty took a couple of learnings from this interaction with my friend.
The lessons were:

• 1. Deployment for better accessibility

  
  It is not enough to run a project on your laptop, if you want to share it with the world, you can deploy it as a website and make it available to the world

• 2. Ensure all existing functionalities are working fine after the new changes

  
  The code changes you make can sometimes break the existing functionality of the code(e.g. in my case the adding of new difficulty levels introduces an issue where the score was not getting updated when switching back to the 'easy' level) and there must be a way to check for any borken functionality every single time you make a new change, we would soon talk about solutions to this problem

These two issues cn be fixed by doing some actions manually everytime we make changes to the project or we can automate the solutions for these issues i.e. automatic testing of the existing code and automatic deployments every single time we make any changes to the project and that is where CI/CD pipelines come into picture