October – In Retrospect

After a very busy October, I return with armfuls of good news and a new resource for you, my dear reader. Back in August we finished our quiz (to which we give our thanks to Richard’s site – JS is Sexy) and hopefully, that gave you the confidence and appetite to approach new JavaScript projects. I did suggest continuing with Richard’s curriculum and taking a look at backbone and node. However, it occurs to me that perhaps that backbone.js is currently a jump too far, so at this juncture I’m suggesting we could do with a bit more practice in JS fundamentals.

The common and entirely forgivable situation you might now find yourself in is: Just what the hell do I do with these new found skills. Not feeling confident enough to find an open source project to contribute to (which can feel unnatural, like stumbling upon somebody else’s conversation) or start selling your services. Well in this scenario people also might say “make something you’re interested in” (not helpful), everything I’m interested in already has a free/famous/brilliant app for that and I’m not ready to takeover the world. Therefore you need some simple, tried and tested programs that beginners might attempt, which you’ll soon find feed in to each other (I’ll explain in a second).

First I highly recommend you visit The Odin Project, a fabulous curriculum, which if your starting out or still green (like you or I) is just the ticket. Essentially it’s a guide which links to a lot of third-party content (and that’s not always a bad thing) with mini-projects interspersed throughout. It’s strength is that it’s concise, and exhibits a great deal of good quality linked material – some of which we may have seen here – and doesn’t gloss over the tough stuff. Some sections appear to need some work (though it’s open source and being worked on) but I can’t really fault it.

Except! Booming drums. The Odin project leans quite heavily towards Ruby, which may or may not be to your taste. At this point I’m set on learning JavaScript, and going into Ruby may seem like another tangent we can’t afford, your time constraints may not be as forgiving as mine. Still, I think the material is presented very well and I managed to get Ruby all set up on windows using this guide. I would say if you feel you’ve got the time, start at the beginning of Web Dev 101. Now since you may already be moving onto an intermediate, you’d naturally want to skip some of the stuff that you may have already learnt. (Though there are a few useful resources to be unearthed, like Overapi’s cheat sheets)

You might do as I do, skipping over the wealth of material there is to read. I’ll read it later you say, well let’s not mislead ourselves, most often we don’t read it later. Why? Perhaps it doesn’t seem immediately relevant or of consequence. I feel the best antidote for this is to find a reason to need the material. The antidote is getting stuck into one of their projects, they’re the evidence that progress is being made, salient points understood. Besides they’re My favorite part, so maybe you’ll like them too. There are 4 JavaScript projects I’ve finished so far: an ‘Etch-a-Sketch’ app, a calculator, a 2d snake game and tic-tac-toe. Now admittedly I skipped some of the projects: cloning Google’s homepage visually – should be easy for us by now. Image slider? – Made one using Jeffery Way’s tutorial. If you feel you’ve nothing to learn from a project then exercise your own judgement. I got a lot out of doing the aforementioned projects though and I think you will too.

The ‘Etch-a-Sketch’ was a pretty smooth experience, and make sure to check out other user’s projects as they can demonstrate some added functionality you might want to dive into. The calculator is a bit tougher, but shouldn’t be too much of a struggle, again if you have any problems then let me know. The snake app was much more a hurdle for me, and I’ll admit I struggled with trying to figure out how to link the visual HTML5 canvas grid with the back-end array logic where the computations happen. Therefore I threw in my hat and worked through the guide here, I explored a few different guides but I found Andres’s the most concise. In this case, having light fingered someone else’s project, we should pay attention to understand it in complete detail. I worked carefully through and left comments through the code, which I recommend you do too – if you don’t wish to attempt the game from scratch. I then added a few lines to allow me to change the head, body and tail images for the ‘snake’. However I found using HTML5 canvas a little tricky when trying to upscale the quality of the images, alas, I’m yet to find a solution.

Finally the ‘Tic Tac Toe’ game which I was determined to build myself, using some of the theory from the snake game (creating a grid matrix) and avoiding the HTML canvas element, I was successful. The hardest part in my opinion is the conditional logic required for checking victory conditions. I even added some extra special styling (not a requirement, I just wanted to show-off). I’ll be working my way through the rest of the projects on this track, so if you’re calling that’s where I’ll be for the next few weeks.

Oh and you can find my projects in my GitHub portfolio.

[flagallery gid=all skin=minima_jn]


1. Visit the Odin Project and finish some of their JavaScript projects

Leave a Reply