I’m Still Here!

I don’t know where the last two weeks went… well actually, I do, it just doesn’t feel like it’s been that long. I guess when life gets really busy, it is easy to lose track of the time. I wish I could say I was busy with programming; learning it, using it, thinking about it, anything, but that’s not the case. I did run most of a marathon (I wasn’t prepared for the distance and the heat). I also moved. Oh, and I made one and a half games using Game Maker Studio.

Neither of the games are great. I’m not sure it’s even fair to call them good, but they did help me explore Game Maker. The first one I started is something like a twin stick shooter, in the style of SmashTV, except no shooting. It’s still very early and very rough, but I’d like to keep refining the concept, because I feel like I have a good idea buried in there. The other one I’m calling “Catch You Some” (read it in Scooter’s voice, from Borderlands). Blocks fall from the top of the screen and you move a basket back and forth to catch them and score points. If the blocks hit the bottom, they stop. If a block lands on a stopped block, the game is over. It has a splash screen (technically two splash screens because Game Maker loads one too), a start screen, the game and, finally, an end screen.

“Catch You Some” is almost finished, i need to work on the end screen and work out a couple of kinks, but what I like most about it is, I spent about thirty minutes creating it. There is something to be said about using tools that let you focus your productive time wisely. Once I fix the last couple of things and figure out the best way to package it, I’ll post a link to it and do some kind of post-mortem on it. Game Maker is a neat tool, and it’s free. I highly recommend it, even if all you want to use it for is fast prototyping.

I also have been really trying to start some AngularJS development. I get the ideas, conceptually, but putting them into practice is stumping me a little. It can be disheartening to spend all my time trying to think through it and getting nowhere. Then, the next time I have a chance to program, I am more likely to choose another task. It’s a stupid cycle that I need to break out of. I feel like I am close though, so maybe that breakthrough is just one or two more brainstorming sessions away. I’ll keep plugging away!

Not Programming

I am feeling pretty energized by Code Camp, and I have lots of new ideas bouncing off the inside of my skull, but for some reason, I’m having a hard time taking any action. I haven’t coded at all, but I have done a lot of staring at the splash screen for WebStorm. Also, staring at the covers of several programming books. Instead of reading any of them, I picked up Neuromancer for the nth time.

I am a pretty avid reader. I started reading at a young age and never stopped. It is very easy for me to get engrossed in the written word. Carried off to whatever land has been created. I’m not picky either. I can recognize good writing and bad writing and abysmal writing, but most of the time I don’t really care. I am quality tolerant. This holds for most things I consume: food, coffee, scotch (but not beer), music, movies and books. It’s a rare book or movie that I actually have to walk away from.

In any case, Neuromancer is good reading. Especially for being the progenitor of an entire genre of creative fiction. Gibson hit on a perfect blend of setting, plot and character development. The mood is fantastic. The pacing is just right. It feels technical without being clunky. Most importantly, it feels of its time and yet also timeless. Reading it now, it is easy to see the influence it has had. It is a lot like listening to a Beatles record and recognizing how much modern music lifts ideas almost directly from their songs.

It has made a good distraction. I at least feel like I’m doing something, and I think it is giving my brain room to stretch out and digest and hopefully retain and integrate some of the knowledge that was being liberally blasted around at Code Camp. It’s tough though, because my most productive days are Saturday through Monday and I didn’t write a single line of code in that whole period. Worse, it seems to be a developing pattern. I should probably start setting aside specific blocs of time for coding instead of just coding “when I feel like it.”

In the next few days, I want to “dust off” my Angular and really try and wrap my brain around the guts. Directives especially. By this time next week, I want to have written a healthy chunk of code that does something. I’d really like to start working with APIs. I keep putting it off, but I think it is time to dive in. So, wish me luck and keep coding (and learning and writing about all of it)!

TDD Nitty Gritty

Last week I had a very nice exchange with two other developers (Valkyrea and Mark, thanks for the discussion!) about learning to code. We talked about the paths we’re taking and the progress we’ve made. I am fascinated by the breadth of available knowledge in this field and the multitude of ways that knowledge can be acquired. I think it’s fair to say that the three of us in that conversation are at roughly the same depth, but we have chosen to focus on different aspects. Hopefully, we continue meeting and talking about those things. It is incredibly important to share and support each other, and I think we would derive huge benefits from those kind of discussions.

One of the topics that came up was Test-Driven Development; what it is and how to get started with it. I initially sat down to start from scratch and talk about TDD as a philosophy and how to get it set up. That made me a little nervous, mostly because I am still very much a beginner, just scratching the surface of TDD. I also realized that I had covered most of what I know about TDD in my first article on the topic. Rereading the article, I could have inserted more detail, but it is still a pretty simple process. So here is some of that detail that was missing.

(I am running a Windows 7 desktop, a Windows 8.1 laptop, and using JetBrains’ WebStorm IDE, some steps and details may vary depending on how closely your environment matches mine.) First step is downloading and installing nodeJS. Pick your poison, I used the windows 64bit installer. The installer claims it will set up your PATH, and on my desktop, that seemed to work, on the laptop, it did not. So the next step was to set up PATH for npm. I did that right inside Webstorm’s terminal, although you cna use whatever CLI you feel comfortable with. The command I used was:

 set PATH=%PATH%;C:\Program Files\nodejs

Again, use whatever address you need to make it work. Once node is installed and pathed and ready to go, you can use npm to install mocha. It is also dead simple:

npm install -g mocha

That’s a global install so you can use it in any project from there on. At that point it should (might?) work. It was long enough ago that I forget if I had to do the next steps on the desktop, however, I did have one more step for WebStorm on the laptop. I opened up the settings (ctrl-alt-s), navigated down into Languages & Frameworks -> Node.js and NPM and set the path to the node interpreter:

C:\Program Files\nodejs\node.exe

and then double-clicked the mocha package and selected install. I don’t know why that was necessary, it is possible I missed a command or step that would have done that automatically. I do know that once that step was complete, I could drop into the terminal and type “mocha” and it ran.

 0 passing (4ms)


I am still running without a test runner, and in a few other … lightweight ways, for lack of a better term. This isn’t really from any desire to keep it light or an informed decision or anything, I just haven’t spent the time figuring out how to get a runner working. I would like to, and I should get on that soon. I am hoping it integrates as well in WebStorm as I saw in Visual Studio. Grain of salt time, my friend Chris is using the Ultimate Version, and so it could be that some of the features I saw are high-level. Things like live-updating test status (which sits in the gutter) as he typed and running tests on save, etc. I won’t know until I get it running, but I will certainly share my findings when that happens!

I also got to spend a little time talking to my brother, a veteran programmer and informal TDD evangelist about my test writing and process and he gave me a lot of good advice to chew on. I will be rewriting the testing in my blackjack program to be more granular and more verbose. I have been trying to keep things “readable,” but I worry sometimes that I might be tempted to go overboard. It was nice to hear him tell me to make it even more readable.

Questions, comments, criticism and requests for clarification are always welcome. If I skipped over some vital steps or you followed everything and it still isn’t working, let me know. If you want more detail about some aspect of the process or insight into how my brain works, I’d be happy to oblige.

Keep coding, keep learning and keep writing about it! Sharing your stories helps all of us grow as programmers and as people!

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!

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!

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:

Merry Christmas!

The Holidays have been fairly busy, and so I don’t have a lot of progress to report. I cleaned up the presentation some. Made a few strides with the mechanics of moving checkers. I have a little to do list that includes things like validating the input and adding mouse event handlers. I have some larger goals like incorporating unit testing and overhauling the “website” wrapper for my projects. But mostly I wanted to show you this:


Merry Christmas everyone!

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.


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:


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!

Danger Zone

Idangerzonet’s been x days since I last wrote code. The easy lessons have been learned. The excitement is wearing off. Adding code sometimes has interesting results. Life is catching up to me.

Today may have been a wash, but I will get up tomorrow and do something. Maybe I’ll finally work on a dice roller. Or create some images for the checkers in my backgammon game. Or figure out why my clearBoard function is only mostly working. Hopefully I’ll do all that and more.

(I think it has actually been 3 days since I did more than add some comments to my code…)

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.