I wrote a web app for a silly card game that my friends & I play. Writing the Level Counter was a learning experience in a few things: writing an HTML5 app, managing multiple code bases for different platforms, & publishing the final results.
jQuery, Feature Bloat, & Angular
But I noticed a couple things: the vast majority of the features I added were used rarely or not at all, while the code was messy & complicated. I had heard about AngularJS & wanted to try it out, so I started a new branch that would port the application over to Angular instead of jQuery. Angular is so excellent at doing certain tasks, like two-way data-binding, that I was able to rewrite the fundament of the application in about fourteen lines of code, where my initial jQuery version used somewhere near a hundred lines to achieve the same functionality. After that I paused to realize that all of these extra features, like local storage & the combat dialog, weren’t adding much value but rather were simply me diverting myself so I could play around & take on new challenges. So I decided to stop short & leave only the most essential features in place.
The Level Counter project was one of the first projects where I began to develop some tools for my development workflow. One example is the pair of version number handling scripts. Since I found myself maintaining two main branches—one for a Chrome application & the other for a generic web app—well as a couple manifests with version numbers, it was a chore to ensure that version numbers were consistent throughout the code.
grunt build command. Grunt is also handy for running a livereload development server which refreshes every time I edit one of the app’s files.
Writing an application with multiple platform targets, some sophisticated functionality, & various development tools was a learning experience. I picked up a few tricks along the way, e.g. how to make Angular work inside a Chrome app & with the closure-compiler, which may come in useful as I continue to code. I also used a .gitattributes file to manage the divergent index.html files across the Chrome and web app branches, which circumvents manually dealing with merge conflicts every time I take changes from one branch into the other.
I’m not done yet, either; I have a few open bugs involving how the buttons render on mobile phones to deal with.