Small Steps

I would like to be posting (at least) three times per week, and I’m trying to make that happen. Sometimes though, my life is just too chaotic. I don’t think I have talked about my personal life much, if at all. During the day, I am a mild-mannered stay-at-home dad of two beautiful but rambunctious children. Occasionally that day stretches into the evening. Parenting is a complex topic that I could go on and on about, but it’s, um… out of scope for this blog. The short version is, it is a wonderful experience that leaves me feeling scatterbrained and exhausted some days, and it’s part of the reason why I can’t always get a post up.

That said, I am still working and learning and doing programming-type things. Andrea’s post yesterday got me to check out even more online resources for the burgeoning developer. I jumped right into freeCodeCamp, and have completed a few of the challenges. I tend to need a lot of review of topics, and like Andrea, I find doing the same exercises over and over can be a little brain-numbing (and counter-productive).

When I finally got a relatively quiet block of time, I decided to work on my backgammon game a bit. I had identified a task that I thought I could get through quickly.  It picks up right where my last post left off, with my rollDice function. Last time, I managed to get the dice to change color properly, but the game wasn’t actually choosing a starting player, that was hard-coded to be the “black” player and the game just moved on from there. I figured it was time to change that!

Here is what it looked like when I started:

rollDice

Actually, there was an iteration before that. One that just rolled the dice and was missing the if (first) loop. Knowing how I ended up structuring the function, I can already see a problem with what I had above. Two (maybe more?) problems actually. It is already becoming a messy bit of code. I don’t have all the lingo and philosophy down, so I can’t say what exactly bothers me about functions getting larger and more packed. Maybe I want more “abstraction” or “encapsulation” or some other concept that hasn’t osmotically entered my lexicon. But, you’ll see, it gets messier and cleaner.

I knew I needed to compare the dice and select a winner. Sounds simple. I’ve got the dice, do a comparison, pick the winner, change the window dressing, done! interRollDice

This is the messier phase. Less readable. Crammed in a comparison. Remembered I needed to reject a roll of doubles. Tacked that on. You can tell I was running on pure horsepower by the “&&” in that if statement. I can’t even remember if this worked. I went through one version that did the comparison but through sloppy syntax, it just made every roll a “white” win. Sometimes I work way harder than I need to. After a few deep breaths and a snack, I saw a better way. Better, in this case, meaning more readable. It’s possible that what I did next was actually a step backward, but I’m knew enough not to know any better!

diceRollerSmarter

I realized that what I was trying to do still fit under the mantle of the “first roll” and so I nested it into the already existing if (first) loop. I then slammed the check for a double roll into the existing dice comparison loop. I keep reading about recursion and so I wanted to try that. (I hear it makes your code more impressive!). I changed the passed argument from “1” to “true” to make it more explicit. The best part, it works! I think. I really need to start using some type of testing so I can say, “no, really, it works!” but for now I have yet to run into doubles on a first roll, so it seems to be working.

I can’t actually say how long that all took me, I should start keeping track, that would be a useful statistic. It probably took me longer than it should have, but that’s okay. I’m one step closer to finished. I am hoping to wrap this up and submit it to the One Game A Month challenge. It’s almost playable at this point, I really just need to set up the bearing-off stage and figure out how to know when someone has won. I’d also like to clean up the presentation a little. “Just a few more hours” of coding, really!

Too Much Forest, Not Enough Trees

(I think I’m done messing with the title!)

My friend and mentor, Chris Gomez (check out his blog, he needs the motivation to keep posting too!) made an interesting comment to me the other day. He told me I should spend some time focusing more on the details of my program and less on the big picture. Andrea’s comment on yesterday’s post helped hammer home this profound lesson on why getting outside opinions is important. In a lot of ways, I thought I had been pretty detail oriented, but when I looked back at it, I could see I had been swept up in the idea of catching my blog up to the current state of my program.

With that in mind, I am going to start looking back through my code and trying to explain what drives the choices I make. I’ll start with something I just did tonight. In backgammon, the first time dice are rolled, each player rolls one die of his or her color. The high die wins and that player moves, using those two dice. Every turn after that, the player rolls both if his or her dice. So on the first roll, there are two colors of dice and on subsequent rolls, the dice are one color, the player’s color. I wanted to capture this functionality to help indicate which player was up.

In order to facilitate this operation, I added a parameter to my rollDirollDicece function called, simply enough, first. If rollDice is told that this is the first roll of the game, it will set the css class of each of the die elements to the appropriate colors. One black and one white. (I just realized that I am concatenating two strings that don’t need to be concatenated and could be just “die0” and “die1”. That is a relic of a previous attempt to set them in a cleaner manner. Whoops!) The rest of the function just sets each of the die values to a random number from 1 to 6 and then tells the view to update the page.

A short aside. I am trying, probably very poorly, to implement an MVC pattern. Hence the view, and obviously there is a model and a controller. I am not sure how successful I have been at this, but I am pretty sure trying can’t hurt!

The way my game starts is when the player (for now you can only play against yourself, hopefully that will change in the future) clicks a button labelled “Reset Board.” That fires my init function that, in part, looks like this: clipOfInitPretty simple. It just passes a 1 into the parameter “first” which makes the if statement evaluate to true and initializes the dice, as it were.

To make sureadvancePlayer that only happens on the first roll,is even simpler. I just don’t pass an argument to rollDice ever again. I am fairly certain this works, although I haven’t tested it. I am relying on my understanding of what JavaScript does when there are “missing” arguments. The values are passed as undefined. The if statement is false and everything just plays out as it otherwise would. The calls to rollDice come from a function named advancePlayer. It’s a little messy, but it works, so I keep it. The highlighted line is where I call rollDice with no argument, forcing the if to fail.

Further down in the mess is another important call related to the color of the dice, changeDiceColor. That does exactly what it sounds like it does, and along with the showDice, it is called whenever the player side changes and the dice are rolled. (You can see the call to showDice at the end of my rollDice function in the first image.) They are pretty straightforward functions reaching into the html to change a value in one case and a css class in the other.diceUpdaters

Usually, my goal is to make small, focused functions like showDice and changeDieColor. Sometimes I just keep cramming functionality in where I know it doesn’t belong just to get things working. I figure I can always come back and separate things out later. I haven’t done that yet, but I could… I promise! It can be hard to hold a lot of discrete parts in my head at the same time and so for the sake of moving forward I do things that I am sure are not best practice. As I get more comfortable with all of this, I hope to be able to make better first-pass decisions and rely less on the idea of fixing things in the future.

In case it wasn’t clear before, I am open to questions and comments and criticism and just about anything else you can think of, so please, feel free to ask or teach or just say hi. The interaction and community are a very powerful motivator for me. Thanks for reading!

So close…

I have made a lot of small steps in the last few days. My game board is mostly functional now. At some point yesterday, I realized that I needed a punch list to help me focus and so I sat down (ok, I was already sitting) and wrote one. It looked something like this:

  • dice roller
  • check for legal move
  • check for bearing off
  • check for game over
  • jail rules
  • correctly stack checkers
  • optional stuff
    • score
    • player login
    • starting variations
    • A.I.
    • Hints & Help

A sizable but manageable list. I found that it helped to have smaller tasks to do so I could stop thinking about the big picture. I could pick an item and work on it exclusively and not worry about how I am going to do, well, anything else. I also kind of gave up on keeping my code “clean” and just started writing. Rather than getting bogged down on two levels, figuring out how to make it work and how to keep it tidy, I could just make it work.  As a consequence, I am much further along that I was two days ago, and my pace has picked up considerably. My punch list now looks like this:

  • dice roller  (partially, need to cycle through dice and deal with doubles)
  • check for legal move
  • check for bearing off
  • check for game over
  • jail rules
  • correctly stack checkers (technically finished, but I now need to correctly unstack them!)
  • input options (mouse/touch)
  • optional stuff
    • score
    • player login
    • starting variations
    • A.I.
    • Hints & Help

Here’s an example of some jail rules:

jailExample2

White has captured a black piece here…

jailExample1

… and Black has deployed her jailed piece and captured a White piece.

Progress!

I haven’t been as active here as I want, but I am still moving forward. The holidays are a great excuse for not getting things done, right? I’ll be brief, because we all have New Year’s parties to attend, I’m sure!Progress1

I updated the look of the checkers a little, using nothing more than a border-radius in the css. I also implemented a way to stack the checkers, or rather, to indicate that they are stacked, again, in the css. For now a green ring around the checker means there are two stacked and a red ring means three are stacked. There are two green ringed tokens in the image to the right.

I changed the move count to two, allowing each side to move twice before the turn changes. In the future I will check for doubles and make that fprogress2our moves, as well as adding a way to end the turn if there are no more valid moves available. I’m still taking player input via the text box, but pretty soon I think I will get away from that in favor of mouse/touch interaction.

For the curious, here is my modified findLowest function. This is what allows the checkers to stack. I feel like it has gotten a little unwieldy, but for now I am weighting my desire to finish the game over my desire for clean code.

progress3

Happy New Year everyone!

Paralysis

Sometimes I look at my code and think about the tasks I have left to accomplish and I freeze up. They are too big, too new and complex to hold in my head all at once. Too intimidating. I can’t even imagine what it is like in real projects. Having to deal with code other people have written. Having to stay focused. It really reminds me that I am nowhere near as comfortable with the concepts as I want to be.

There have been plenty of times where I let that paralysis take over. I walk away from the computer or shut down the IDE and watch youtube videos or something. I am learning ways to cope with it though. The most effective has been to just tell myself I need to write a few lines of code. Something small. It doesn’t even have to do anything, yet. The other day that was flipping my findLowest function into a findHighest.

The findLowest function allows me to determine which cell to drop the checker into. The findHighest serves a twofold function. First, it searches the originating column and finds the topmost checker. What that allows me to do is dispense with a two part (column, row) input. Now all I need is the column. The game will do the rest. It feels simpler, and I like simple!

Another example was a tweak I made to findLowest. In an actual game of backgammon, one can have more than 5 checkers in a column. They just start stacking up on each other. I haven’t gotten that far yet, and if you tried to add a sixth checker, the function didn’t know what to do, there is no 6th cell! In order to get around that, for now, if the 5th cell is full, it just “eats” the checker. It’s a stopgap. I need to nest the findlowest in a way that it will start stacking checkers and it will check for stacked checkers first. One step at a time.

The important thing is to keep moving forward. To find a way to work through the overwhelming amount of learning I still have ahead of me.Breaking things down into discrete steps that I can wrap my head around keeps me from locking up as much. I also keep coming back to the idea of testing and TDD and I really need to stop talking about it and start doing it.

It’s the little things.

One of the things I had been hung up on was how to move the checker into the lowest available spot in a column. I’d taken a shot at writing a function to do it. I would pass it the column to search and then loop through the values, using getElementById to look for an empty cell. It didn’t work. I’m not sure why it didn’t work. I tweaked it and rewrote it and tweaked it some more. I could hardcode values in and it would do what I wanted it to. Great.

Eventually I enlisted the help of one of my mentors, Chris Gomez. We used Cloud9’s collaboration tools to dig around in my code and run little tests. Finally, I found myself in the in the dev console of firefox, setting breakpoints and watching expressions. Without those tools, I don’t know how much longer it would have taken for me to find the problem. I was doing too much work. I had one too many steps. Luckily I could see that one of the expressions was evaluating to ’empty’. That was exactly what I was looking for. I think took that expression and tried to do more work on it, which ended up giving me a null and killing the loop.

I had what I needed. I cleaned up the function. Manually tested it a half a dozen times, and gave a spirited “Hell yes!” to my empty room. Made my day.

findLowest

Finally, code samples!

I guess I have put it off long enough. At some point I knew I would have to show other pfilledBoardeople my code, as embarrassingly naive and novice as it is. So let’s get it out of the way in one fell swoop. Here is everything I have done. It is sloppy, messy, not well commented, hacked together and sometimes difficult for no reason. And I’m okay with that.

My earliest work is in the index.html and the top of the css file. It is basically me working through the battleship game in the Head First book, with some added flourishes. The meat of my own work is in the two backgammon files. That is where, so far, I have made my most creative mistakes.

Here is my board with some, uh…, test features turned on. The board itself is an image and the playing field is composed of several tables that I have aligned to the board. Then each celcellCSSl of the table has one of three css classes applied to it. .fillWhite uses an image, confusingly enough, an orange checker. .fillBlack, even more confusingly, makes the entire cell white (note to self, change that to a black fill… done). Finally there is .empty that, for testing purposes makes the cell grey.

movedBoard

After moving some of the checkers a few times.

Aside from setting up the board, the user can also move checkers using an input box. This is another stepping stone/test function while I work out the real input scheme. I just recently got the move function to turn the origin cell to empty instead of just “adding” a new checker to the board in the destination position. I also have the moves hardcoded to 2 spots and flipping between the players every move. It’s confusing, but it works for now.

There are a lot of things to talk about with even just this early stage and simplistic implementation. Design and decision choices. A couple questions I can answer easily together. Why am I using a table for the board? Why am I using an input box to move the checkers? Because I ripped those ideas right from the battleship game. I, essentially, don’t know of another way to do it. In fact, this is a good time to talk about my overarching design philosophy for this particular project. I aim to get it done and make it work however I can. I can always rewrite, but for now I just want to see this through.

I do try to keep my functions small and simple whenever I have the brainpower to do so. One place that shows well is in the functions to fill and empty cells. I pass in the minimum amount of information the need and update the view. Here they are:

fillEmpty

That’s it. I have run into some issues. To clear the entire board with the emptyCell function, I need to feed it the id of every cell. That means either storing all of the cell values in an array or building a function to create those values and feed them to emptyCell. Also, who knows how many other creative solutions I haven’t thought of. What I have decided to do instead is utilize jQuery, with mixed success. I’ll figure it out. At least half of the “fun” of coding for me has been troubleshooting. I see a lot of troubleshooting in my future!

An introspective interlude

Getting a late start tonight. In the future I intend to utilize my downtime a little better and take advantage of the ability to load some articles up for publishing in the future! In a minute I will talk a little about the details of writing my backgammon game, but something happened to me today that made me take stock of some of my programming behaviors.

For a very brief time, and through no fault of their own, Cloud9’s workspaces were unavailable. It was somewhere around 30 minutes and I was hardly even inconvenienced. I was wondering why a certain piece of my code worked while another piece I was hoping to use as a more elegant solution to the same problem didn’t. Not pressing, but a bit of a shock.

“But you use source control, why not just pull down the code and look at it somewhere else?” an astute reader might ask. I do, and I could have… except I hadn’t pushed my code in a day or so. There are certainly a couple of lessons to be learned here, for me. In a wider sense, I need to have a backup plan. What that means specifically, is first, to keep my repository (more) up to date. With my code available, I would have been able to pop open another IDE and keep coding. To that end, I will be investigating the other cloud IDEs as backups. On the PC I will probably just rely on Visual Studio.

(I want to say, “lesson learned,” but at the time of this writing, I still haven’t pushed my changes up.)

On to code. A bit of (hopefully brief) background first. The exercises in the Head First JavaScript book have certain quirks for ease of publishing. They throw the JavaScript inside a script
wrapper in the HTML (and use inline CSS). I figured it wouldn’t be much more difficult to separate the css and JS into their own files and link them in the HTML. It generally wasn’t any more difficult. The other thing I wanted to do was set up a simple “webpage” that would hold the exercises and any of my projects. This actually did cause a little more cognitive overhead.

At first I was keeping it all on one page and all the JavaScript on one .js file. There came a point where I felt that was too cluttered and so I pulled my backgammon stuff onto its own page and the JavaScript into its own file. Not a completely clean break, all of my CSS is in one place. It works. That’s probably the best thing I can say about it at this point.

I am aware that most of what I am doing at these stages is “ugly” code. There are probably better, cleaner and more efficient ways to do nearly everything I am attempting to do. I don’t know those things yet, so I work with what I have. I am under no illusions that I am writing masterpiece software. I even had the idea that I would do this first with vanilla JavaScript and then dive into things like Bootstrap and jQuery for a total rewrite. I have already trashed that plan and started to incorporate jQuery. I am just not sure I see the value in making things harder for me than they need to be.

Next time, I’ll show you some of my code and talk about the reasons I made the decisions I made.

Staying on the branching path.

Looking through book after book after book, I had no idea how to evaluate their potential usefulness. I didn’t know what aspects were going to be important to me and what methods would work best for me. After I left the bookstore, I felt a little discouraged and overwhelmed. All the work I had done, all the progress I felt I had made, and I still felt like I was at square one. How could I keep moving forward? What was my next step?

I woke up feeling a lot more hopeful and decided to jump into some of the more “advanced” topics at Codecademy. The lessons didn’t always make sense, but I figured some of the knowledge would trickle in and, more importantly, I was just getting familiar with the entire process. Familiarity felt like an important goal. I thought back to my friend’s advice, “… start there.” I had started there, right? I mean, here I was, learning, but was that really starting?

Up to this point, I had done all my work inside the Codecademy lessons. It really is an incredible site, with a built in IDE and a test window. Maybe, however, it was time I started writing code in my own “space.” It was time to find an IDE that I could use, and wow are there a lot to choose from. Off the top of my head, there are: Visual Studio Community, JetBrain’s WebStorm, Sublime Text, and Eclipse, and that’s just the ones I knew about before I really started looking. I settled on none of these, but that was only because I had an additional requirement that I hadn’t given any though to until that moment.

I do most of my work from a desktop PC running some flavor of windows. I have no special preference for them, and would gladly try any of those IDEs from the list above. But occasionally, I am away from my desk, and that means I am working on a Chromebook. Once again with help from my friends, I discovered the world of cloud IDEs. It turns out there is actually a lot of choice here too. I quickly chose two tools in this category and haven’t spent much, if any, time examining the other options. The two I latched onto are Cloud9 and JSFiddle. I also jumped into one more piece of software, even though I didn’t then understand why I needed it, GitHub. There’s a lot to say about these tools, and some day I will. For now it’s enough to say they work very well.

I spent the next week or so reviewing my lessons and trying to apply them in new and creative ways. Patching code together helped me push against the constraints of my knowledge, and there were many times I was running a few steps ahead of reasonable. I made a lot of mistakes. Logical mistakes. Syntactical mistakes. Spelling mistakes. Creative mistakes. I wish I could say I learned from every mistake, but I did learn from enough of them. Most importantly, I started to understand what I needed. What would keep me motivated and progressing.

So, back to the bookstore I went, and this time I was confident enough to buy a couple of books to take home with me. “Head First JavaScript Programming” by Freeman & Robson, and “Sams Teach Yourself jQuery and JavaScript”. From skimming through the Head First book, I saw that it had some projects to build. That appealed to me, as well as the less formal writing style. Having now progressed through the book, I can say that it does a really good job of building concepts and reinforcing the knowledge at every step. Like the software tools above, there is a lot to say about both of these books, and I hope I will get a chance to review them in the future. This is also the first time I have even mentioned jQuery, so maybe it seems a bit strange to jump right into buying a book about it, but I knew it was time to explore the world of JavaScript libraries in general and jQuery specifically.

Next time, I’ll talk about putting all of this together and actually “getting started”!

Ready, set, go!

There are a lot of ways to learn to code. There are a lot of ways to actually write code. There are a lot of things to think about. It can be… it is overwhelming. “Start there,” was my mandate, and with that in mind, I decided I need to quickly find the lowest resistance approaches.

I knew immediately that books, as a first step, were not going to work. There are just too many, with varying levels of prior experience assumed and no quick and easy way to determine if they even offered what I would need. I would soon circle back to this avenue, but for now I knew it would only bog me down.

Formal education. I bring this up even though by this stage I had already discarded it as a method for me because I think that under other circumstances, this would have been more attractive. That is probably a topic for later discussion, but my timeline ruled this out too.

The most attractive path for me, then, was informal education. For this I turned to the internet. One website in particular came up repeatedly. Codecademy. It turns out, this is where I would start. I should give a special mention for another website that shares a lot of the same features of Codecademy, and that primed me to learn in this fashion. Anyone who has investigated interactive, gamified learning on the internet has surely run into Khan Academy.

A few years ago, a friend asked me to help her son with his math homework. I figured I could handle pre-algebra, even though it has been a long time since I cracked open a math textbook. But just in case, I started looking for online resources. If nothing else, I could crib the methods to help me teach the material. That led me to Khan Academy, and I raced through the material, eventually progressing further than I ever got at school. I never did finish the lessons in Linear Algebra (sorry Matt, I really wanted to be able to help!), but Khan Academy is still one of my most used bookmarks.

Codecademy follows a similar model. Focused lessons with a gradual progression, and rewarding badges and challenges. Compared to Khan Academy, Codecademy is almost Spartan, but that is actually one of its major plusses. There aren’t a lot of distractions or roadblocks or hurdles. Sign up and start learning. The front page emphasizes a somewhat holistic approach to learning, with the more general Web Developer lessons at the top and then language specific courses below.

For me, Codecademy was the perfect introduction to Web Development. Self-paced, with easy navigation and just enough positive reinforcement to keep me motivated without being patronizing or cloying. I spent around three weeks sprinting through lessons whenever I had the time. Pretty soon I was feeling comfortable with the three main “languages” in their core web dev section; HTML, CSS and JavaScript. Not an expert, by any means. In fact, probably just enough knowledge to be dangerous, but I knew that I still didn’t know enough to know what I didn’t know!

It was time for the next step, but once again, I wasn’t sure what that step should be. Books have been a big part of my life since early childhood. The feel of holding a book and flipping through the pages is a very relaxing and comforting act for me. I still didn’t know how to pick and choose, and I didn’t need a dozen books of varying usefulness sitting on my shelves. And that’s how I ended up in a bookstore, monopolizing the twelve feet or so of programming shelf space. Once again, however, I realized that I still didn’t know what to look for, but I at least felt like I was getting closer…

Next time, I’ll talk about finding the right tools and, big surprise, the right books.