External Motivation

One of the upsides to using the GitHub Pages is that it provides an easy way to share my work as more than just lines of code. One needn’t guess at what my functions will do or copy the code somewhere else and run it. One can just go to the page and run it, probably exactly how I see it (unless you use an ancient browser and, why would anyone do that?). A side-effect of using GitHub Pages is that it makes it really easy to submit my work to the One Game A Month game jam/challenge/thingy.

My friend Chris turned me on to #1GAM some time in December and I figured I could use all the help I could get staying motivated. Having goals that are tracked (to some extent) externally helps me push through the hard days. The days where it is easier to make an excuse than look at my code.

At one point, I was pretty sure I was going to have a finished and polished version of the backgammon game to submit well before the end of January. Time did what time does and mid-January turned into “some time before the end of the month.” Once January turned into February, my motivation to fix the game evaporated. I was discouraged. I had missed my deadline, I couldn’t really see a quick way to fix the few glaring bugs and I still had no idea how I was going to painlessly host the game so that I could submit it. I was stuck in a negative reinforcement loop.

Voltaire’s lifted quote eventually got me out of my funk. “Perfect is the enemy of good.” I needed to embrace the fact that I am doing the best (or nearly) as I can and move forward. Setting my game up on GitHub Pages allowed me to get over that hump and be comfortable with the progress I have made so far. I will continue to tinker with backgammon, but I know I have to get another project going. Starting from scratch, again, will allow me to use the skills I have learned without being dragged down by the baggage of my (admittedly small) code base.

From Voltaire, we will go back in time a stretch to Shakespeare, to close with a little piece of Henry V, “Once more unto the breach, dear friends, once more…”


An Overdue Step

I have been aware of GitHub Pages for quite a while. Probably almost as long as I have been using GitHub. For whatever reason, it hadn’t really occurred to me to use it to show off my work. Maybe because I didn’t really consider it finished enough. Or because I wanted to strip out the extraneous code and who has time for that?! Well, I made the time. Now you can see my almost, somewhat mostly completed backgammon game, bugs, legacy green form (thanks Head First JavaScript!) and all. Just head over to mushiwulf.github.io and give it a whirl! You can look at the guts by digging around my GitHub page, or, if you’re as time starved as I am, this is the spot right here.

A brief explanation of the controls: Reset Board starts the game by setting up the checkers and rolling the initial dice (one dark, one light, high die goes first). To move a checker, click on either die and the checker you want to move, in any order. There are some rudimentary alerts set up if you click the wrong things. The counters in the middle are the “jail” cells. The counters on the right are the “endgame” counters. First to 15 wins. To play from jail, pick a die and then click on one of your own checkers (it’s not intuitive and I would like to change that eventually).

I’m probably missing some details, ask me anything! Tell me if you run into any bugs (I know of at least one already). Thanks for giving it a look!

Leaps and Bounds

As I progressed through Code School’s free lessons, I noticed my grasp of the concepts involved was becoming more and more second nature. I decided to sign up, and at the purchase screen I realized they were giving me a heavily discounted first month, bonus! This began a whirlwind week of learning, as I devoured courses on JavaScript, Git, and a plethora of front-end goodies. I’ve probably picked up more intermediate and advanced skills in that week than in all of my previous learning. Now when I read Eloquent JavaScript and other JS books, the concepts actually make sense. I can read the code snippets and understand what is going to happen. It’s a great feeling.

That isn’t to say that everything sticks. If I don’t reinforce the learning, either by practical use or by taking notes, it gets rusty quickly. Sadly, it’s a silent process. I don’t feel the knowledge dropping away in chunks. I just notice it when I type some Git command and get back an error of some type. After this happened a few times, I knew that just (somewhat) passively absorbing the lessons wasn’t going to cut it, so now I have notebooks covered in my barely legible scrawl. It’s helping quite a bit.

I feel like I haven’t written a lick of code in a while either. I know I’ve had both WebStorm and Visual studio open, with code loaded, several times in the last two weeks. However, I don’t think I’ve done more than look in that entire period. That needs to change. I want to get back to the backgammon game and close up the issues left that make it an incomplete game. I need to work on the couple other programming projects I have going on in the background. Hopefully I can use all of my fancy learning to help me write cleaner code, quicker.

I also want to say thanks to the Code School teachers/professors, especially Gregg Pollack, Alyssa Nicoll and Jason Millhouse. They are quickly becoming the voices of JavaScript in my head.


(I’ve written and rewritten this opening paragraph half-a-dozen times now. I am having some trouble getting my thoughts down in a way that feels at all elegant. At this point, I would settle for coherent!)

I like learning languages. I am not very diligent about it, so my progress is unimpressive, but I keep plugging away. Computer languages have some fundamental differences from spoken languages, but they also share some key concepts. In some ways, the paradigm of learning the two types of language is reversed. In computer languages, I feel like I am learning from general to specific. From informal (psuedocode and big-picture concepts) to the formal (syntax and curly braces and proper everything everywhere). Spoken language learning has always felt like I learn the formal, classroom versions of the language and then in real life I have to sand down the corners and pay less attention to the rules.

Despite that, the methods of acquiring these languages is pretty similar. Practice until the concepts come naturally and then build on your foundations until you are conversant and then comfortable and then fluent. Most of the time I have spent learning JavaScript and its associated libraries and frameworks and complimentary markups and tools and stuff, I have felt just on the verge of overwhelmed. But not quite overwhelmed. I wonder if I should take a deep breath and get my head wet. I’ve looked at advanced code, in both JavaScript and languages I am unfamiliar with (like c#), but I haven’t really forced myself to try and survive in that environment. I have always been able to say, “nah, I don’t think I’m ready for this yet.” Perhaps I am doing myself a disservice.

To that end, I am going to start looking at more complex projects and really try and pick up on the concepts. I need to get out of my comfort zone, or I’ll never get any better. There is definitely a lot of stuff to learn in this field, as I am made painfully aware of every time I look at software job postings. I need to find the tools that should be on my belt and become well-versed with those tools. It can only get easier… right?

Projects, projects and more projects

I had decided to take my mostly finished project, the backgammon game, and use the One Game a Month challenge to keep me moving forward. Things haven’t exactly worked out that way. Time has been at a premium lately and, while the game is mostly finished, in a lot of ways it is holding me back. I have been spinning my wheels trying to accomplish the final tasks in the scraps of time I have had. Progress is slow and it is sapping my motivation.

While all of that has been going on, I have been given a few leads that could, in the long run, lead to actual, paying work. A friend of mine who works at a small start-up told me that he might be able to hire me in the future if I can get a handle on all the basics (HTML, CSS JavaScript) AND if I know Angular. To that end, I have started hitting the AngularJS tutorials and online class type stuff, mostly the great series at code school.

Seizing on that, my mentor has decided that we are going to work on a project together. He will handle the back end and give me an api, and I will do everything else (with guidance where needed). We started Sunday evening with a long discussion about the functionality he’s looking for. Yesterday I worked on getting some bare bones of HTML and CSS going, along with a little itsy bitsy piece of JS/jQuery that performs some useless DOM manipulation. This morning I plopped together the Angular, dummied up some data (in JSON format, of course) and got it to appear on the page via an expression. Yay!

Even though it is at the earliest of stages and none of the code I have written does anything useful at all, it feels good to be putting all this learning into practice. I am still slow and have to reference my notes and the tutorials and the docs and bug my friends for help, but I’m getting there. I am learning the tools (I have maybe temporarily switched to VS Community, don’t worry JetBrains, I’ll be back, I promise!)

Branching Out

A quick recap of my progress so far. I started my journey at Codecademy and then quickly supplemented that with the Head First JavaScript book and lessons. Pretty soon I was flying solo, working on my own project, a backgammon game. For a long time (a long, long time… like 6 weeks?) after that, I mostly just plodded forward, skimming through books and looking up pieces of code and documentation online. Brute force programming. Andrea introduced me to freeCodeCamp which introduced me to Dash, and through several avenues at once I was made aware of Code School. And that’s pretty much where I am now.

Getting back into some kind of formalized learning via freeCodeCamp (which is mostly a very well put together aggregator) and Code School has jumped my understanding forward in leaps and bounds. I think through just slogging it out, some of the concepts and ideas of JavaScript and programming in general were becoming more and more apparent and ingrained. When I do the lessons at Code School, I feel ready. I feel like it makes sense and the knowledge is sticking. My biggest gains have been in understanding jQuery and Angular.

For me, they both make interacting with the DOM way easier and visually cleaner than vanilla JavaScript. I haven’t gotten as far with Angular, but from what I understand, it attempts to enforce an MVC architecture. I know I am at the edge of my understanding, so I have a hard time explaining the hows and whys, but I am starting to understand the flow of each of those technologies.

I am starting to get more specific advice and challenges from my programmer friends, so I will be narrowing my focus to cover the areas they think are most important. My motivation levels are pretty high right now, and I hope I can keep moving forward.

Along with Andrea (Part Timer), reading the blogs of Rails MamaTeacher Learns to Code, Tales of a Technophile, and Valkyrea Learns to Code has been inspirational to me. Thank you ladies!


This should be a short update. A while back I talked about having a backup in case cloud9 was down or I couldn’t connect to the internet. Those two conditions actually have pretty big implications. If cloud9 is down and I can connect, I’d like to use another cloud or internet based ide so I can work on my chromebook. If I can’t get connected, I think my chromebook becomes an expensive (although not that expensive) paperweight. In that case, I can look at more traditional desktop IDEs.

There are a few big-name choices for working on JavaScript and other web focused programming. Visual Studio, WebStorm and Sublime are the ones that I have the most awareness of. NetBeans and Eclipse are in my peripheral vision and I am sure there is a slew of others. I have installed Visual Studio Community (I think that is how it is identified), but I haven’t done much more than open it yet. Upside, it’s free. Probably a good place to start investigating. However, I chose to take a run at JetBrains offering, WebStorm.

So far I like it. I may even love it, but I am still in the awkward learning-how-to-make-things-go phase. The hints and warnings are a lot more detailed and helpful (bordering on pushy). It plays nicely with GitHub, which isn’t a surprise but is still nice to confirm.  I knew I had some slightly sloppy code and sure enough,WebStorm pointed that out for me and offered to turn some of my lazier declarations into inline declarations. That’s an interesting feeling. I hope it makes me more aware instead of more blasé. I’ll go into more detail later, with before-and-after examples and other hints I have already picked up.

It’s a good product. I am using the 30-day free trial. I’m already tempted to just spend the $49, but I will restrain myself until the trial is up.  It is definitely worth a look.

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:


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!


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!

Staying Power

I feel like I haven’t posted in too long. I guess it has been nearly a week! The holiday break spoiled me. Getting back into the grind has taken a toll on both my free time and my motivation to sit down and write, both code and posts… I did make some good progress over the weekend, and I wanted to ride that wave into finishing my backgammon project, but I stalled out once I was in total control of my two kids all day!

Even though I don’t get to (sometimes don’t want to) sit in front of the keyboard as much, I am still working out the logistics of the final steps of my program. The biggest chunk is working on a way to check the board for all valid moves and allow the player to end their turn if there are none left. Backgammon has some interesting ideas about when you can pass your turn and when you can’t that make is less than perfectly straightforward. I think my plan is to break it down into two distinct units. One will do the checking and the other will hold the rules. That way I can incrementally build a smarter and smarter validator, instead of trying to do it all in one shot.

My punchlist is around here somewhere, I wanted to update my progress on that, but I think it might be under one of my programming books, which itself has become a resting place for a baby bottle and a mostly empty and totally cold cup of coffee. Briefly, I figured out why my event handlers weren’t working (developer error) and wrote a few to handle clicks. It’s no very easy to use the dice to move the checkers around, although I need some UI/UX tweaks to make it more obvious what is going on.

One thing that has been a big boost to my motivation is reading the blogs of several other people in similar situations. Seeing what they are doing with their knowledge is really pretty inspiring. Thank you!

If you’re not following these blogs, you should: