Tools
One of the challenges the club is faced with is learning software development in a school computer lab with no admin access. We won’t be installing any apps, and the suite of tools devs tend to use (Sublime Text, IntelliJ, git, Homebrew, etc.) will be unavailable, and the students won’t have accounts on collaboration services like Slack, Flowdock, or HipChat (and chat apps at school are just a bad idea), and the Mac screen sharing service is disabled on the lab computers.
On the plus side, the school’s normal curriculum uses Google Apps with Chrome, and the middle school students each have school Google accounts. So we have a number of obstacles to overcome, and the tools to solve them with are Chrome and gmail.
Obstacle 1: Screen sharing
Back in the stone age (2002) when I first began teaching technology classes to kids, I taught three PowerPoint/Excel classes a week to a few 5th grade classes, using Windows 98 machines. To demo the harder topics, I alternated between the Windows Remote Desktop client, and a projector I borrowed from work. The projector, even though it was loud, was a better option than low res, laggy screen sharing.
Back then, web browsers didn’t play video natively, requiring plugins like Real Player or Flash, and quality fullscreen streaming was still a pipe dream. In the last few years, browsers have really gotten their act together. We now have native video support, and the previously unthinkable peer to peer video stream sharing.
With a minor bit of effort, I was able to turn desktop sharing into a local video stream, and then serve a web page that the school computers can access with Chrome, and automatically receive my feed. Scout and I tested this in the lab, but here is a link to a quick demo of that, sharing a video feed with three other browsers on my machine:
Obstacle 2: Writing code
The lab computers come with text editors and a way to save files, which is enough to begin writing some code, but it’s not enough for our needs. We’ll all be collaborating on the same project, so we’ll need a way to share files and merge everyone’s changes together. Good code editors take some extra steps above normal document editing to help developers, like auto-indenting to help make code readable, matching braces and parentheses so you don’t need to count, and “syntax highlighting” - changing text color of code depending on what it represents.
All of these things combine to save you mental energy, letting you concentrate more on higher order things, and less on the “mud” of programming which is a big turnoff to new programmers (e.g., “I can’t run this, did I miss a semicolon somewhere?”).
I relatively recent invention that helps new developers is REPL sites, which stands for “Read, Eval, Print, Loop”. Essentially you go to a website, type some code, and preview the results, all online. Sites like Plunker, repl.it, and JSFiddle are popular sites that let you quickly test some ideas without needing to think about file management, or switching between editor and browser apps - again, a tool designed to help keep your brain in the game, and not wasting time on the boring mechanics of project management.
There are sites now that go beyond this, and provide complete project hosting, and a shell to let you run server commands. After testing a few, I found one a really liked: Codeanywhere. Anyone can, for free, use a very nice code editor, upload files from your local computer, access a virtual Linux server and install packages, sync code, etc. We won’t need anything this sophisticated for week 1, giving me time to pitch the idea of associating student email accounts with the service.
Below is a screenshot of me using the service. Here I have a trivial HTML5 page that scales up a small image. (The image is one I’m proud of that I made a couple years ago - an export of raw image data from a Pacman ROM.)
Other tools
To prevent the club members from needing to sign up additional accounts, I will use my personal Digital Ocean server as a go-between for getting the project from Codeanywhere up to this Github repository, so that parents and school staff can follow our progress.
Other than that, I will design and write any tools that we need for the project where a free version doesn’t already exist, or if we need a customization I can’t find. For instance, any time I pitch this project, I make a point to call out “rotoscoping”, where we can take live video, draw annotations on it, and use the annotations as a wireframe for game graphics, so that character motions look more realistic.
There happen to be no tools that do exactly that that aren’t expensive, or come with baggage we don’t need, and a hundred pounds of documentation I don’t want to sift through. So I’m starting to write one. Here is a video of a proof of concept of the tool we’ll use for that, an online video editor still in its early stages. The movie file I’m editing is a quick scene of me playing ping-pong at my previous job, and I’m just identifying where the joints of my arm are in a few frames. Later this will connect the dots into a wireframe, and let you export just that piece.
Writing tools like this (above me just being a masochist) illustrates exactly what I want the club to learn this year: Modern tools are amazing, free, and open, and you can write very useful things with only modest effort. And it’s a great time to be a coder.
