I wrote Flashcards one evening when Ada’s teacher suggested using flash cards to help her memorize the words she shouldn’t need to sound out. The idea is that the parent clicks the spacebar when the child reads the word and they work together to reduce the time needed to read all the words. The application doesn’t need any graphics (other than some external images at the end), so it doesn’t use any HTML 5 features (browser compatibility is unknown).
Like Flashcards, I wrote Timetest to help Ada with her schoolwork. In this case, she was getting frustrated with a lesson on analog clocks, so I wrote this application to make it more of a game. The goal is to answer as many questions as possible in the given time. The test turned out to be more difficult than it really needed to be, so I created an easier version (accessed by adding #easy to the URL). Since this application uses the Canvas tag, it won’t run in Internet Explorer or older versions of other browsers.
Arithmetic is another educational application designed to drill addition that uses carrying. It provides spaces at the top, which you can click to mark a carry from the previous column. It doesn’t have any fancy HTML 5 features, but it does have a lot of stats.
My wife and I had designed a fireplace surround and mantel for our living room, but when it came to actually buying the materials and building the thing, we realized we didn’t know exactly how to scale it. Since the design was entirely composed of rectangles, I realized it would be possible to build a simple one-off CAD program to help us agree on some dimensions. The application makes use of the Canvas tag and the new HTML 5 slider inputs (which aren’t currently supported in Firefox). It translates between pixels and feet/inches constrained to an 8th of an inch, in order to make the measurements easier to use in the shop.
The goal of these exercises was to produce something simple and quick, but not entirely without polish. All the applications except Snowballs took only an evening or two. Each application (also excluding Snowballs) ended up under 300 lines of HTML, CSS, and JS combined.
Advantages and disadvantages
They’re quick to start. Since it’s a single page, there’s no setup and no integration.
They’re easy to deploy. It’s only one relatively small file, so you can e-mail it to friends, and you can host it anywhere. If you want to spend a little time making it touch-screen compatible, you can get it on all the smarter smart phones without bothering with app stores. On the other hand, there is no way prevent people from stealing the application or the code if you were developing it commercially, since the source is always just a right-click away.
HTML+CSS is a powerful display framework. Although it lacks built-in support for some of the fancier UI widgets, there is no GUI framework that I’m aware of (and I’ve developed with quite a few) that provides the same level of design control with the same ease of development as these technologies. Of course, I’ve been swimming in HTML/CSS for years, so this opinion is a bit biased.
Canvas has a powerful vector graphics API. I had done a fair amount of Cocoa programming prior to these projects, so this didn’t come as a surprise. The real power of Canvas lies in its transformation functions. I’d like to find an application for some more advanced spline generation. The downside is that Canvas and HTML don’t really mix, so you can have great text layout in HTML and sophisticated text animations in Canvas, but not both at the same time.
Single-page applications are fun. These exercises have reminded me that, once the responsibilities of software engineering are stripped away, there is a joy to be found in coding for coding’s sake.
All of these applications are available on GitHub, but it’s probably easier to right-click on the page and choose view source. :)