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!

Advertisements

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.

Opening theory

Staring at that brand new, empty Cloud9 workspace the first time gave me a rush of feelings. Intimidation, a bit of brain freeze, but mostly it gave me a feeling of freedom. I could do whatever I wanted! I could tinker in small increments or giant steps. I could fail miserably and succeed occasionally.

cloud9start

But what would I fail and succeed at? Well, I mentioned that the Head First JavaScript book has projects, so that is where I started. I read the book, I did the lessons. I built the Battleship game and then the improved Battleship game. I anticipated some of the code they would show me and I tried my hand at writing it before I knew what I was doing. I mostly failed, but I learned at every step. And I’m still learning.

I knew I needed a project to keep me pushing at the edges of my knowledge. Something small but complicated enough to provide a challenge. I settled on backgammon and I started breaking it down into tasks. I am constantly improving my HTML and CSS and making even bigger strides with JavaScript. I already know I am going to want to tear this all down and start over, using what I’ve learned to make it better and cleaner and maybe even more functional. But first, I want to finish it, and so I keep plugging away. colud9filled

I am still a neophyte. There are still large gaps in my knowledge, in JavaScript and the tools I am using to learn it. Parts of the Cloud9 interface go absolutely unused by me. Git branching and merging and commits and pushes are still slightly esoteric. It’s also not always easy to find a chunk of time long enough to sit down and get something done. I am trying to make sure I code every day, but it doesn’t always work out. Even if I can’t code though, I spend parts of my day thinking about coding. Code I’ve written and want to improve. Code I want to write but don’t know yet. Philosophies about code; patterns and unit testing and libraries.

Mostly, I try not to get bogged down in self-recrimination or embarrassment over the quality of my code. if this were easy, they wouldn’t pay people to do it. All I hope for is to keep making steady progress, and I hope to be able to showcase that progress and shed some light on my process and the roadblocks and obstacles I have met and will certainly continue to meet.

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.

How did I get here?

Over the years, I have dabbled with coding. I have started and stopped learning C++, WPF, .net, even python. They were interesting and difficult and in a lot of ways fascinating, but I didn’t have the drive to push through, hunker down and learn them. Sure, I have plenty of excuses. I had a full-time job running my own electrical contracting business. Then my son was born and I became a stay-at-home parent, which, it turns out, is even more full-time than a full-time job. More recently, my daughter was born, and so my free-time has grown into an even more precious commodity.

So, why now? The brutal, up-front, honest answer is, I need marketable skills, because I need to work. For the last few months, I have been deciding what I want to do with my life and realizing the hole I have dug myself into by not finishing college and not seeking a career before now. I realized that I need a job that has some level of creativity and will keep me mentally stimulated. I’d also love to be able to help people. And then there is the variable I call “time to acquire.” How long will it take to go from zero to having a job in the field?

Most of the things that piqued my interest had long or uber-competitive processes. Firefighter/Paramedic, nursing, teaching, engineering. No matter how “good” I got at the skills required, I was going to need formal education. This led me to consider a new strategy. Get an intermediate job and pursue an education. This is still the most reasonable approach I can think of, but I had one more idea.

My brother and my best friend both work as professional software developers. They have both encouraged me, for years, to learn how to code. They have both been in positions to interview and hire developers. I wondered what they thought my chances would be? Could someone with no formal education in the field, but a command the material get a job as a developer? So I discussed it with them. “Yes, but,” was the answer they both gave, immediately. This was good, I could work with this. Over the course of the next few days, we talked about it more in-depth. Then we got to work on a plan, and it wasn’t at all what I expected.

Both of my new career counselors have spent a lot of time neck-deep in the Microsoft development world. Not exclusively, they are both knowledge seekers first and try to keep their toolboxes current. However, their years of experience gave me certain expectations about what advice they would give me. I was dead wrong. Both of them recommended that I give web and mobile development a shot.

“You mean, HTML and CSS?” I asked.

“Yes, and JavaScript. There will be more, but start there.”

Start there. So I did.

Next time, I’ll talk about how I narrowed down the confusing forest of choices and focused on some very select trees.