Missing API Driven Development (and a Gzip Bug)

‹prev | My Chain | next›

In 3D Game Programming for Kids, I have readers use the full-screen version of the ICE Code Editor located at http://gamingjs.com/ice. Between the very excellent ACE code editor for modifying the actual code and the visualization layer, it works quite well. But recently, I have begun to explore using the editor in demos embedded directly in web pages (educational material, promotional material, blog posts, etc). The old codebase is not conducive to this usage so I have spent a few days re-organizing the code.

I have reached the point where I need to teach the full-screen editor (the one used in the book) how to interact with the local data storage class. Today, this involves copying code from the old codebase into one of the new classes: either the ICE.Full UI class or the ICE.Store class. More specifically, this involves driving the ICE.Store class to support all of the necessary CRUD operations that the UI needs. Instead of directly manipulating localStorage, ICE.Full will need to work through the ICE.Store API.

So things like deleteProject() will need to be replaced:

  del.addEventListener( 'click', function ( event ) {
    var message = '...';

    if (confirm(message)) {
      deleteProject(doc.filename);
      openProjectsDialog();
    }
    event.stopPropagation();
    event.preventDefault();

  }, false );

Instead, I need to tell the store to remove the document with the selected filename and I need to tell the editor to load the new content and visualization layer:

del.addEventListener( 'click', function ( event ) {
    var message = '...';

    if (confirm(message)) {
      store.remove(doc.filename);
      editor.setContent(store.current.code);
      openProjectsDialog();
    }
    event.stopPropagation();
    event.preventDefault();

  }, false );

I make good progress with this. Until everything breaks. The editor goes blank, I get high CPU and no visualization. I try undoing the changes that I made in various places, but to no avail. If I revert everything back, then things seem to work. So somehow the changes that I made caused the problem, but removing large chunks of the changes has no effect.

Not knowing what else to try, I load the page up in an incognito window. This will ensure that there is no cache and that all resources are pristine. Doing this, I notice something interesting:



Nothing is being loaded after the ice-store.js script. So I really messed something up in there. But what?

The answer turns out to be in one of the diffs that I had been ignoring because it looked like whitespace. One of the gzip'd templates has changed:

-  code: decode( "jVRha9swEP28/ArRL1WHUdRCGMRpYfPSZWOF0RT2WbMusYYteSclTlr63yfZchYvGcwYx7577+np7pTZDyP3d7Nx+zOa2RxV7YjF/PaicK6ejsdrUSm9/rJkuanGTwUCsJ/2wlM67H+QsgJNBfdqB/Y89W5EyFYgyUUFKBJic9CQEAQtAQHTmF6Dl3G4T0glHKASpX8DW6QjD1BaOXoVoEKrkA8f/mu10blTRkcAefEx0q1AbomGhjwtHudztgyRyOmWE7aG3HlQo7Q0DVNaA35X0hVkPIgtQK0Ll7bEbgsD5W+ArZLaQtZm6btJEtUTcu1vzvnVMZ3Vxqpgmj17pQnn6ehN65gJKWmHiYT20RdmsOzn3FhRgESjP8U8veHcLxepfREHrAdfzw/CqvwhZmlXMG/NlAanhO94eyUkxhuFsELvaUocbuA0/lV5+VC2Kbnpkq99mUP3Tpanp32Ojv/UIBB7kX5MBkKZ0FthH2OKRoEeyiy4rASBWdjUAnaU71btdQa4VM9AT2YgOTMCvSNp8k0F2rFwqph1+xJYJXCttPfI039izBZwVZrGoy4LJSXoy3NgUdfeXlaoUtKDUWmqeQkB1G7hdTD7hyMRxx/h1wase9+GPeA+9IlG1HFzGBrXItjOm/ros0ybxuu8JZz5KZikZ6D7c9Drv7rFuhcaz/rRUL+ODn8QvwE=" )
+  code: decode( "jVRha9swEP28/ArRL1WHUdRCGMRpYfPSZWOF0RT2WbMusYYteSclTlr63yfZchYvGcwYx7577+np7pTZDyP3d7Nx+zOa2RxV7YjF/PaicK6ejsdrUSm9/rJkuanGTwUCsJ/2wlM67H+QsgJNBfdqB/Y89W5EyFYgyUUFKBJic9CQEAQtAQHTmF6Dl3G4T0glHKASpX8DW6QjD1BaOXoVoEKrkA8f/mu10blTRkcAefEx0q1AbomGhjwtHudztgyRyOmWE7aG3HlQo7Q0DVNaA35X0hVkPIgtQK0Ll7bEbgsD5W+ArZLaQtZm6btJEtUTcu1vzvnVMZ3Vxqpgmj17pQnn6ehN65gJKWmHiYT20RdmsOzn3FhRgESjP8U8veHcLxepfREHrAdfzw/CqvwhZmlXMG/NlAanhO94eyUkxhuFsELvaUocbuA0/lV5+VC2Kbnpkq99mUP3Tpanp32Ojv/UIBB7kX5MBkKZ0FthH2OKRoEeyiy4rASBWdjUAnaU71btdQa4VM9AT2YgOTMCvSNp8k0F2rFwqph1+xJYJXCttPfI039izBZwVZrGoy4LJSXoy3NgUdfeXlaoUtKDUWmqeQkB1G7hdTD7hyMRxx/h1wase9+GPeA+9IlG1HFozGBrXItjOm/ros0ybxuu8JZz5KZikZ6D7c9Drv7rFuhcaz/rRUL+ODn8QvwE=" )

(hint: I added a single, extra "o")

After I revert the accidental extra character, everything works. I was sure that it was a whitespace only change. That, I suppose, is what I get for included gzip'd content directly in my JavaScript.

That little adventure set me back a bit. I still hope to get the rest of the full-screen editor converted in the next day or two. I do need to be a little more stingy with the letter “o”.


Day #718