47 | The following pages are exercises in minimalist programming. They are all written using
48 | only HTML, JavaScript and CSS, and are completely contained within a single HTML file
49 | (i.e. no JavaScript frameworks or external images). The goal of the exercises is to examine
50 | the feasibility of developing small GUI applications to solve day-to-day problems entirely in
51 | the browser. I was also hoping to familiarize myself with some new HTML 5 technologies
52 | like the canvas tag. They were all written for fun, so no effort was spent on browser
53 | compatibility (they all run in Safari 4+ and all but "surround" run on Firefox 3 on OS X).
54 |
55 |
Snowballs is a video game that was mostly designed by my 7 year old daughter, Ada.
60 | She started with a drawing that contained a maze filled with dots, a player and some
61 | monsters, and she told me you throw snowballs at the monsters and build walls to block them.
62 | I convinced her we could get roughly the same effect as walls if you could freeze the
63 | monsters and then began developing. We started iterating and she continued to contribute
64 | ideas which, somewhat surprisingly, always made the game more fun. The arrow keys move
65 | the player and the spacebar launches a snowball. It's implemented as
66 | a single canvas tag using a JavaScript interval as a run loop. The maze, players, monsters
67 | and snowballs are all drawn with JS functions using the Canvas drawing API. Since this
68 | application uses the Canvas tag, it won't run in Internet Explorer or older versions of
69 | other browsers.
70 |
I wrote flashcards one evening when Ada's teacher suggested using flash cards to
76 | help her memorize the words she shouldn't need to sound out. The idea is that the
77 | parent clicks the spacebar when the child reads the word and they work together to
78 | reduce the time needed to read all the words. The application doesn't need any graphics
79 | (other than some external images at the end), so it doesn't use any HTML 5 features.
80 |
86 | Like Flashcards, Timetest came about to help Ada with her schoolwork. In this case, she
87 | was getting frustrated with a lesson on analog clocks, so I wrote this application to
88 | make it a game. The goal is to answer as many questions as possible in the given
89 | time. The test turned out to be more difficult than it really needed to be, so
90 | I created an easy version (accessed by adding '#easy' to the url) that constrains times
91 | to 5 minute intervals and labels the minutes. Since this
92 | application uses the Canvas tag, it won't run in Internet Explorer or older versions of
93 | other browsers.
94 |
100 | Arithmetic is another educational application designed to drill addition with carrying.
101 | It provides spaces at the top which you can click to mark a carry from the previous column.
102 | It doesn't have any fancy HTML 5 features but it does have a lot of stats.
103 |
109 | My wife and I had designed a fireplace surround and mantel for our remodeled living room,
110 | but, when it came time to actually buy the materials and build the thing, we realized
111 | we didn't know exactly how to scale it. Since the design was entirely composed of
112 | rectangles, I realized it would be possible to build a simple one-off CAD program
113 | to help us agree on some dimensions. The application makes use of the canvas tag and
114 | the new HTML 5 slider inputs (which are currently only supported in Safari and Chrome
115 | that I know of). It translates between pixels and feet/inches constrained to an 8th of
116 | an inch to make the measurements more useful in the shop.
117 |
When testing, the problem will appear here and the answer will appear to the right. The answer you type will be
762 | accepted as soon as it is correct. The grid in the bottom center contains a dot for each problem, which will illuminate
763 | as the problem is mastered. The percentage on the bottom right is the total mastery, and the graph on the bottom left
764 | shows mastery over time.
765 |
Press down for more help.
766 |
767 |
768 |
If you leave this page, your stats will be saved. They will only be available to this browser on this computer,
769 | however. You may save stats for multiple people by adding a hash tag to the URL above. For example, .../table.html#ada will
770 | store stats for Ada. You may then change it to .../table.html#alex to switch to a different student. Typing #ada again
771 | will return to Ada's stats.
772 |
Press down to return.
773 |
774 |
775 |
776 |
777 |
778 |
779 |
780 |
781 |
782 |
783 |
784 |
785 |
786 |
787 |
788 |
789 |
790 |
791 |
792 |
793 |
794 |
795 |
796 |
797 |
798 |
This window is not selected. Click here to enable keyboard.
When testing, the problem will appear here and the answer will appear to the right. The answer you type will be
765 | accepted as soon as it is correct. The grid in the bottom center contains a dot for each problem, which will illuminate
766 | as the problem is mastered. The percentage on the bottom right is the total mastery, and the graph on the bottom left
767 | shows mastery over time.
768 |
Press down for more help.
769 |
770 |
771 |
If you leave this page, your stats will be saved. They will only be available to this browser on this computer,
772 | however. You may save stats for multiple people by adding a hash tag to the URL above. For example, .../table.html#ada will
773 | store stats for Ada. You may then change it to .../table.html#alex to switch to a different student. Typing #ada again
774 | will return to Ada's stats.
775 |
Press down to return.
776 |
777 |
778 |
779 |
780 |
781 |
782 |
783 |
784 |
785 |
786 |
787 |
788 |
789 |
790 |
791 |
792 |
793 |
794 |
795 |
796 |
797 |
798 |
799 |
800 |
801 |
This window is not selected. Click here to enable keyboard.
58 | 
74 | 
84 | 
98 | 
107 |