Where's the Cheese?

A Chrome extension to track how far you move your mouse

About

One day, at a Hack Night, my friends and I were trying to figure out what to do. As a joke, one of them suggested we create a Chrome extension to track how far you move your mouse. While we initially thought it to be pointless, we realized that it actually could be pretty cool.

Libraries Used

We actually got the extension working within a matter of hours. Done with this silly little side project, we wanted to do more. Figuring we wanted to make it look nice, we decided to try out material design. Previously, I had been looking at cool developer tools, and found the Polymer Project from Google. We decided that this would be a great opportunity to play around with the library and integrate it into our extension.

Polymer is a library that allows you to create your own custom HTML elements, similar to directives in AngularJS. With Polymer, you’re not simply limited to the standard set of elements, such as p, form, etc. For instance, lets say that you wanted to create a card element. You can declare and define the attributes of a card. So if in creating a web app of a site similar to Yelp where each review is a card, you could define each card to have a profile image, a certain number of stars, and the review itself. If I wanted a way to order reviews, I could then take advantage of properties, where upon user authentication, another user would be able to upvote or downvote a review. Polymer has two-way data-binding which would allow you to define in the card something along the lines of {{upvotes}}, and then load upvotes from a backend, and user interaction will also communicate with a backend.

When HTML was first designed, no one could have dreamed how it would be behind some very intricate and complex web apps. Polymer allows developers to expand beyond the limited set of elements available in basic HTML and create your own unique elements. HTML was not inherently designed as a programming language, but technologies which build on top of HTML allow developers to use HTML and still take advantage of some of the basic advantages of object-oriented programming.

Demo

You can download the extension on the Chrome Web Store. To view the source code or fork the project, please visit the project on GitHub.

ScoreTrack

An AngularJS web app that takes advantage of AngularJS's two-way data binding to provide real-time score results

HackTX App

The Official HackTX App

Pirate Adventure

A tile-based adventure game utilizing arrays and objects leading to an eventual boss fight