My cousin Jason is visiting with me for a few weeks, and one of the things we’re doing is working on some programming projects. We decided to start by digging a bit into basic HTML + Javascript.

Day 1

We started by going to Starbucks and listing a number of projects that we were interested in. Jason is a math teacher, so he has an interest in creating some automated tools to help teach. Since neither of us have ever written an HTML5 app, we figured a simple math quiz might be a good place to start. We’re both experienced in other programming environments, so the challenge is to just figure out how things are pieced together.

First, we figured out the bare minimum of what we needed:

• a source code repository to act as a centralized distribution place (we chose Bitbucket)
• a source control solution (we chose Mercurial)
• a server location to save our files (we have our own servers already)
• a simple directory structure for assets and javascript files
• jquery loaded from Google’s developer CDN
• an index.html file that loaded an init.js file
• a starting place for executing our javascript code
• a means of debugging in a common browser (we’re using Chrome)
• a means to start running our javascript once the page is loaded
• a means to edit and easily upload our changes to the server (Jason is using NotePad++ with an FTP plugin)

With this out of the way, we then talked out loud about what the minimum “quiz” that needed to happen. I had Jason write this out as a series of console.log() statements, then bundled them into named functions. This gave of the logical skeleton to allow us to experience the order of operations and overall strategy. Each piece is then replaced by actual working code. As Jason is also learning about object oriented programming in Javascript at the same time, starting with procedural approach would allow him to see the patterns behind his math quiz; we’ll be bundling and refactoring later.

Next Jason built the rudiments for display a single static question, and then extracting and examining the answer using hardcoded logic. This allowed us to just get familiar with jQuery basics within the context of our program.

After that, we managed to use Atlassian SourceTree to create a repo, clone it, and then add our working files. It was a bit confusing, and we blew away our original source on local disk (fortunately it was also on the server). But it works now.

That seemed like a good place to stop. Booyah! Read onward for Day 2-4!