That "duh" moment you realize you're writing too many lines of code

This morning is day 5 of 21 rolling out of bed by 5 am. If you haven't been reading along, the idea came from a blog post I read a few weeks back, and looking at my schedule right now, it's the easiest time to guarantee time to study and work on my code.

It is interesting that it almost becomes easier to get out of bed everyday. Prior to deciding to try the 5 am challenge, I kept setting my alarm for 6 am and it became a morning routine to silence or hit the snooze and I'd tell myself "not today, you can go back to bed and I'll get up tomorrow" and I'd sleep until 7:30 or 8 in the morning and then get up and rush for work. Now it's becoming easier to pull myself out of bed promptly at 5 and then I grab a cup of coffee and sit down peacefully and distraction free to work.

This week I've been working on my game that I started way back in the summer which I kind of "forgot" about. It's gone through many iterations and started out as a simple JavaScript game that would run via a ton of window alerts. Then once I found out that wasn't a good idea, it started to evolve and it is now somewhat GUI based and includes HTML/CSS/JavaScript/jQuery. I think once I get a working version, my plan is to even transition the core JavaScript over to Ruby.

The challenge of being self-taught is that you don't always know when you might be doing things wrong. Your solution can work, but it doesn't always mean that the code is efficient or following best practices. It may work well for one user, but if you tried to scale it up to millions of users, things would start breaking or go incredibly slow. That's kind of where I feel like I'm at right now with some of the JavaScript/jQuery code. It seems to be working, but it's not as smooth as I'd like and I don't think it's very efficient yet either.

Even as I sit here typing, I just realized one major inefficiency and something I can do to improve my code! I was going to give a snapshot of part of the code as kind of a "before & after" look at how messy I feel the code is right now. Well there is a concept called DRY which stands for "Don't Repeat Yourself". That basically means if you have a chunk of code that you would have to type in multiple places, it's best to build one function or method that handles that code, and then call your function or method when you need it. The reason that is so effective is that if you later realize you need to add, modify, or delete some code, you can do it in one place rather than the 15 or 20  or 1000's of places you might use that code throughout your program:

In the highlighted text, you'll see two lines of code that I'm using a number of places in my code. As I went to take this screenshot, that "duh / ah hah" moment finally hit me.

Rather than writing each of these lines of code 5-7 places throughout my code base (basically once per each scenario or transition in my game), I'm going to create a Function to handle this for me.

New Function called "change_div" to reduce the amount of code re-use:

Now if I need to make a simple change or add a line, I can do it in this one spot.


Calling my new change_div function with the highlighted piece of code:

I nearly didn't write a blog post this morning because I wasn't exactly sure what to write about. However, I want to keep up with it and part of #my5amChallenge is to write about the things you learned or accomplished. Well I'm glad I sat down to write this blog as I just learned something very valuable about half way through!

That's kind of how it works with coding sometimes....you get stuck somewhere and try and try to figure something out, and then it all of a sudden comes to you at the most random moment. I wasn't really stuck there, but that change is much better for an "Object-oriented" programming style which is what I'm trying to learn.

Time to dive back in the code and work on building some more of the functionality out!

The "ABL's" of Programming

For anybody familiar with Sales, you've probably heard of the "ABC's" of selling which stands for "Always Be Closing". For people not familiar with sales, its basically the concept that if I were trying to sell you a tennis ball, and you objected and said you really don't like green tennis balls, I would ask you a clarifying question to understand what colors you might like, and then I go right back to the close with something like "so which would you prefer, a tennis ball of color 'x' or color 'y'?" Basically, as you uncover information about your prospect, you're still pushing for the close every step of the way.

As I was driving home yesterday and thinking about a good topic to write about, the ABC's kind of popped into my head and it made me think of a good acronym that applies to anybody that codes, "Always Be Learning" or as I titled it, the "ABL's" of Programming. I thought of this both because of some of my recent struggles, but it's also been a consistent theme on a Ruby Rogues podcast I've been listening to recently.

So how does it apply to me recently? A few weeks back, I had this idea to try and program a basic Text based adventure game in JavaScript that would present you with various scenarios and options, and based on your choices you'd progress through the game. I knew it would test my knowledge of several concepts like For Loops, While Loops, Iterations, etc. Well the first weekend I dove head first into the game and felt like I made a ton of traction. It almost seemed like a relatively easy concept that I would be able to finish and release within maybe a week's time frame. Well here I am about 3 weeks later, and still no working version of the game!

While I made a lot of progress that first weekend, my code gradually became more complex, and it started getting harder to keep things straight or decide how to pull the information I needed. After getting some advice from a developer that sits by me, and studying further into the CodeAcademy JavaScript tutorial, I then realized I could re-structure my game to follow a more traditional "Object-oriented" fashion and take advantage of JavaScript's Prototypal/inheritance nature. That led to a whole weekend of diving in, getting really confused, and then slowly figuring out how to once again structure my game and make it work. However, I learned a ton and my code was far better off because of it!

Well now I've run into another issue where one of my iterators keeps looping and is not escaping, so I worked briefly with another of our Software Engineers yesterday, and he mentioned that an "alert" method I'm using does not work well with browsers, and that I should strongly use jQuery for what I was trying to do. So now after about two weeks, I'm diving into a completely different area and once again deciding to re-structure my game to make it work better and become easier to work with moving forward.

I spent yesterday researching how to implement the jQuery library, which then also led me to pull in HTML/CSS and changing my game to a more graphical nature in the browser rather than being completely text based from JavaScript functions. While it's not absolutely necessary that I do this, I do envision where this is going to make certain aspects of my game a lot easier and a lot more efficient to code. I even learned how to make my page somewhat "responsive"! That basically means that if you were to start with a full screen, and start to shrink the screen, the elements will shrink along with it so that the page remains readable and functional. Especially since a web page can be accessed by so many devices including tablets, phones, laptops, etc. all of which have different size screens, implementing responsive design is an absolute must.

So basically what started as a simple JavaScript program with basic "for loops" & "iterators" has now evolved to be so much more. At least I've learned concepts and a little bit about other languages & libraries that I've been able to apply to my code. I've faced some type of challenge on an almost daily basis, but I've learned something new every step of the way and feel so much more confident today than I did a few weeks back when I started the game!

Software Engineering is definitely a field and skill set that requires you must "Always be learning!".

Lessons learned

I've recently been working through the CodeAcademy JavaScript tutorials, so I randomly decided on Friday I would try to build a text based RPG game using the stuff I've been learning. Mainly, I've been learning about functions, arrays, objects, for loops, while loops, etc. I figured what better way to see what I've actually absorbed than to push my skills to the max by building a simple game that leverages these concepts. (If you aren't familiar with an RPG game - it means Role Playing Game. Essentially, my program provides you with a Scenario and then gives you various options. Depending on what option you choose, your game can have different outcomes). 

Here are some things I've learned this weekend:

1. The internet is such a huge resource when you get stuck! I ran into an issue on Saturday that I worked and worked on, but could not figure out how to solve. I posted my question on Twitter and within 10 minutes had a conversation going with 4-5 other developers and I learned a few possible ways to solve it. The nice thing though, apparently my question wasn't a complete newbie question and actually posed some challenges to think about.
   
2. While programming, when working on logic and flow statements, it's IMPERATIVE that you read your code with an empty & fresh mindset with no preconceived notions. If you think you know what the outcome should be, it can make it very difficult to effectively follow along in your code and troubleshoot.
   
   I'll try to give an example in layman's terms, which is actually the problem mentioned above:
   
   A user is presented with options 1, 2, 3, and 4 and each option routes to a different scenario. I wanted to ensure they selected one of the four options and didn't try to select 5 for example. My logical flow was:
   
   if userOption is not equal to (1 OR 2 OR 3 OR 4) then that is a bad result
   
   I spent at least 30 minutes reviewing through this line of code and trying to figure out why it was not working. And then finally the light bulb went off! My program was checking to see if userOption was not equal to any of those options; so for example, if I selected 3 (which I wanted to give a good result), it still compared it to 1, saw it was not equal to, and returned a bad result.
   
   The correct logic is .... ("userOption is not equal to 1" AND "userOption is not equal to 2" AND "userOption is not equal to 3" AND "userOption is not equal to 4") then it returns a bad result.
   
   That may look confusing, but the first one returned a bad result if "ANY" of the four were true (i.e. 3 is not equal to 1 --> true) and the second returned a bad result only if "ALL" of the four were not true.
   
   
3.  I learned how to use the "Inspect Element" to see where I was having issues with my JavaScript. Ok so this wasn't something completely new to me. I had been told about this feature and have used it some to review my HTML. However, after struggling all weekend to figure out which part of my code I broke, it finally hit me Sunday morning to review the "Inspect Element logs" which tell me exactly which line my error was on. This would have saved me a considerable amount of time if I had used it all weekend. Live and learn right?

Well that's about it for this weekend. Stay tuned for my CodeNinja Adventure RPG game! I've finished a lot of the basic flow but still have a lot to build out. I'm hoping to wrap up the game within the next week or so and I'm going to try to embed the code within my blog so you could just click a link and launch the game. 

I definitely feel like my knowledge of JavaScript and troubleshooting errors has come A LONG way this weekend. Overall, I'd consider this weekend a success!!