Credit: Hanna Yangilmau

Hey! I’m Chris

I’m a teacher, developer and actor working at Connections Education in Baltimore.

Before that, I taught programming at a school in Thailand, where I developed a lifelong passion for creating interactive tools to help students learn.

Scroll down to see some of the stuff I’ve been working on lately!

Voice Controlled Smart Mirror

July - August 2016

Voice Mirror with Weather readout

I built a voice controlled “smart mirror” using the Alexa Skills Kit, a Kindle Fire and a piece of two-way mirror plastic. It was a fun project! Check out my blog for more info!

Teaching JavaScript as a Foreign Language [Talk]

March 2016

Teaching JavaScript as a Foreign Language

This is a talk I’ve given at charmCityJS and the Loyola University ACM series. It’s about my experience teaching programming in Thailand, and some of the lessons I learned that helped me become a better teacher and communicator.

Lesson on Expansion

November 2015 - January 2016

Expansion Lesson

This is an animated, interactive lesson about the shape of the universe complete with synchronized audio narration. It’s built with Reveal.js, D3 and jQuery (which seriously pulled a ton of weight as an audio engine?!). This project involved a combination of project planning, writing, editing, recording, audio editing, performance testing, cartography and a whole lot of trigonometry. Of all the projects I’ve done, this is the one I’m most proud of.

Crocus

October 2015

Crocus

Crocus is Node.js based tool that visualizes how much space each part of your file tree takes up. Hover over an area of the graph to see a breadcrumb of its file path, along with how much space it is taking up. If something seems to be taking up a large amount of space, click on it to zoom in and get a more detailed look.

Aristotle’s Puzzle AI

September 2015

Aristotle's Puzzle AI

This is another AI experiment, this time using a game called Aristotle’s puzzle. The game is built using React, Redux and React Hot Loader. The AI uses a fairly brute-force approach, the challenge came in making the validation as predictive as possible in order to reduce the number of brute force tries the computer would attempt.

Quantum Blob

August 2015

Quantum Blob

After my visit to the LHC in August 2015, I was inspired to make this fairly rough sketch that I may use later in a lesson about Quantum Mechanics. The two colored blobs can be dragged together, causing them to combine into a single purple blob. However, the two blobs are discrete, and can be separated by multitouch gestures even though they seem homogenous when combined.

Vocal Tour

July 2015

This is another spin-off of Mike Bostock’s World Tour demo. I combined it with the Web Speech API wrapper Annyang so that users can control the globe by saying phrases like “Travel to Brazil”.

Touch Math

May 2015

Touch Math

This lesson prototype presents the student with a simple arithmetic problem. They can solve the problem by dragging one digit on top of another and performing operations on the “combined” digits. When they are done, a teacher can “play back” their work and see all the steps that were taken to get to the answer playing in realtime.

Reactions

May 2015

Reactions

This lesson prototype takes the abstract concept bonding energy and makes it into a more visceral phenomenon. Atoms and molecules can be manipulated with multitouch gestures, with bonds breaking if they are stretched too far. The amount of stretching required varies with the energy of the bond.

Monsoon Marketplace

April 2015

Monsoon Marketplace

Another next generation lesson prototype. This one is based on the awesome work by ThoughtCafe in the Crash Course World History lesson, the Monsoon Marketplace. Clicking or tapping on any of the cities will animate you into an article about the city and its role in the economic trade of the time (content from Wikipedia). Clicking the links to other cities will take you back to the map, where you’ll be “transported” to the article about that city.

BRICS

April 2015

BRICS Lesson

A prototype for a new kind of geography lesson using D3. As you scroll to each country’s section of the lesson, the globe swivels to show that country. This demo is built using content from the Wikipedia pages about the BRICS countries, Mike Bostock’s World Tour demo and a JQuery plugin called Waypoints.

λ Bubble Pop!

September 2014

Lambda Bubble Pop

This was a fork of λ Lessons, a project by Jan Paul Posma and Steve Krouse. I “redecorated” the function editor so that each function application was a bubble, which could be “popped” to reveal the result. This was a lot of fun to make, and managed to land on the front page of Hacker News as well as /r/haskell!

Traffic Jam Checker

July 2014

I built a small Heroku site that would show me graphs of my commute time and allowed me to see how much traffic I would face if I left at different times. The app was built using Node.js, Express, MongoDB and D3. Unfortunately, this site suddenly broke about 8 months later, and with Heroku’s new pricing policy it isn’t worth the money to maintain it.

2048 AI

May 2014

2048 AI

I forked Gabe Cirulli’s hit game 2048 to try to see if I could write an AI that would play the game. The resulting project taught me a lot about minimax algorithms and the limits of JavaScript performance (especially if you try to run the AI on mobile).

StateMonitor

April 2014

StateMonitor

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.

Wave Builder & Wave Crusher

March 2014

Wave Builder

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.

Choc.js at St. Gabriel’s

December 2013

Choc.js with Thai annotations

During my second semester teaching in Thailand, 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. I wrote about my experiences working with Choc.js on my blog

St. Gabriel’s C Study Guide

August 2013

St. Gabriel's C Study Guide

During my first semester teaching programming in Thailand, I built a study guide to help my students learn C. This was my first experience building a dynamic website, and included animated demonstrations of running code, as well as inline code editors where students could try out what they’d learned. I wrote about my experiences building this site on my blog

SafeSands

June 2012

SafeSands iOS App Screenshot

SafeSands is a Beach Weather app for iOS. I had to stop maintaining it once my teaching schedule picked up (around 09/2012).

MusicFormatter

April 2012

This 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.

PortalAsteroids

April 2011

PortalAsteroids Android App Screenshot

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!