Portfolio

If you want to see my official résumé, you can find it here. However, I feel like a curated sample of my recent work might be a bit more helpful.

If you want to skip the explanations, here’s a list of everything:

C Study Guide for St. Gabriel’s College in Bangkok

I’ve written a blog post on my time teaching programming in Thailand, some of this stuff is covered there too.

Halfway through the first semester, I realized that the students had no way to study for their midterm exams. Their book covered how to make flowcharts, but had no actual information on how to program in C.

Since there aren’t too many beginner C reference websites (that aren’t for C++) on the internet, and certainly none written for ESL students, I rolled my own reference website using my lesson plans as a a basis.

You can find the live site here and the code over on GitHub.

The site is written in Python for Google App Engine and uses the Google Datastore. The lessons are written in Markdown and Haml, styled with Sass and brought to life with CoffeeScript (I’m comfortable with the vanilla HTML/CSS/JS stack as well).

I used CoffeeScript to make animated demonstrations including:

A few of the lessons have live examples that can be compiled and run in the browser. For these examples I used CodeMirror as the editor and AJAX requests to send the code to the back end. The server sends the code off to IDEone for compilation and running, and then returns the result to the browser. In the event that IDEone fails to work, the Coliru online compiler is used as a backup.

Other work with learning environments

During the second semester, I used the JS framework Choc by fullstack.io to make a couple of lessons where students could see the results of their code live. I edited the annotations module to allow for Thai annotations, which many students said improved their understanding of how their programs worked.

Although I haven’t been a contributor on the Choc project, lately I’ve been using it to develop some rough prototypes of what I think a good learning environment would look like. Many of the ideas behind these environments come from an article by Bret Victor titled Learnable Programming which changed the way I think about teaching programming.

A month or so ago I saw a demo by Amjad Masad of an execution timeline he built with his DebugJS library. I was able to get DebugJS to work with Choc’s annotations, and posted my altered version of his timeline here.

Masad also has a stepwise JS debugger that he built using DebugJS. I’ve been working on extending his scope widget to provide a more graphical representation of the program’s state, with “diffs” caused by each state indicated. This is demo is still very rough, but you can see it over here. This is something I would love to see in more development environments.

Finally, I’ve been working on making dynamic visualizations lately. Here are two that I made using KhanAcademy’s programming environment. These two widgets are intended to show how waves can be combined or broken down. They also allow for direct manipulation (go ahead, grab and pull the things!)

Wave Builder

Made using: Khan Academy Computer Science.

Wave Crusher

Made using: Khan Academy Computer Science.

I’ve written a blog post about my experience designing these widgets here.

Other Miscellaneous Stuff

These are mostly projects I did while at Loyola University Maryland. They are no longer being maintained, but show a wide variety of skills, so I thought it good to include them.

SafeSands is a Beach Weather app for iOS. I had to stop maintaining it once my teaching schedule picked up (around 09/2012), but with summer coming soon, I might polish it up and put it back on the app store in the next couple months.

PortalAsteroids is an Asteroids clone for Android that uses motion controls. Players control the ship by tilting the screen in the direction they want to go, and tapping the screen to shoot. If you don’t have an Android device, there is also a vanilla Java version. Last I checked this one still works out of the box, give it a try!

MusicFormatter is what it says on the tin: a Java app for formatting sheet music. It uses the MusicXML schema for serialization and GuidoLib for rendering. Right now, I’m pretty sure you can open and save files, and change the direction of a note’s stem. There are some test files included if you want to test the rendering capabilities.