Confused Shopper Chrome Extension

Next Cyber Monday will be a blast.

Confused Shopper is a Chrome extension that changes all of the prices on your page to appear to be between $0.01 and $0.99. Secretly upload it to a friend's computer and enjoy their reaction when they discover the great new deals of the day.

Lessons Learned:

1. Calling the Javascript String replace() method with a function
2. Regular Expressions for a repeating patterns
3. Basic setup of a Chrome extension

Issues:

1. Something like '$5 billion' would turn into something like '$0.45 billion', which looks silly.
2. Since prices are randomly generated, if a page displays the price of a single item twice the two values may be different.

Fixes/additional features to add:

1. Include conditions for the words 'billion, million, hundred' etc. and change accordingly.
2. Keep equal prices equal (i.e. $10 and $10 will equal $0.22 and $0.22). 
3. Let users choose the range of prices they want to display.
4. Add functionality for turning the extension off
5. Including a safeguard to keep people from actually buying anything when they are under the assumption that it costs less.

Keeping Heroku Apps Awake

I host my rails apps on Heroku, which is an awesome service.
It was becoming a problem though, that after an hour of disuse the apps would go into idle mode. When an app is idling, the time to start it up again ranges from 8 - 15 seconds, at which point many users would just give up and click elsewhere.

I fixed this by installing a Heroku add-on called Scheduler. This add-on makes it possible to carry out tasks periodically. I then wrote a rake command that sent a GET request to all of my apps, keeping them from idling.

Lessons Learned:

1. Difference between web and worker dynos
2. Building custom rake tasks
3. Heroku add-ons

Code Academy: Make an Interactive Website

I had a feeling that I haven't been jQuery to its fullest potential!
This tutorial outlined some of the cool jQuery functions that can make interacting with Javascript so much easier.

Lessons Learned:
1. jQuery animate function
2. jQuery toggle function
3. jQuery event handlers

Jasmine Testing Framework

Vectors have proven to be useful wherever circles are involved, so I wrote myself a library to avoid rewriting code for every project. It includes functions for adding, subtracting, scaling and normalizing vectors. You can find the source code HERE.

I used Jasmine to test my functions. Click HERE to see my specs.
Click HERE to see the Jasmine Spec Runner in action. 

Got Jasmine set up thanks to THIS well-written tutorial.
Get the latest Jasmine version HERE.

Lessons Learned:
1. Basics of the Jasmine testing framework
2. Re-learned how to find the dot product of two vectors. Yaay!

Next Steps:
1. Use the Jasmine beforeEach, afterEach functions
2. Test asynchronous data 

Ring Game

Visit game HERE
See Github HERE

Lessons Learned:
1. Google analytics tracking
2. Custom shapes with KineticJS

Problems with program:
1.When the mouse is moved quickly past the rings, the program doesn't register that it had intersected with it. This makes cheating very easy.
2. Since each level is randomly generated, it is possible for a level to be impossible.
3. When the screen size is small enough, the Next Level button can be made to be right next to the star which, again, makes cheating possible.

Problem Fixes:
1. Register the mouse movement as a line instead of a point and check if the line intersects with the ring.
2. Set up safeguards regulating how close rings can be to one another.
3. Enable the size of the star, the player, and the radiuses of the rings to take into account the screen size.

Gallery

One Page Website

I made a website for a friend who wanted a place to display pictures of his welding projects, using Ruby on Rails and Knockout. This time I used Knockout to make a working lighbox instead of changing the lightbox's class from "visible" to "invisible". It was both more and less difficult.

More difficult because:
I accidentally included an outdated knockout gems which produced a few errors that I just couldn't figure out. I also didn't know about Knockout's $parent and $child bindings until after I had figured out a convoluted way of producing the same effect on my own.

Less difficult because:
Knockout's 'foreach' and 'click' bindings allowed me to easily move from image to image. I would say the overall time this took me, even with the difficulties, was less than the previous implementation of the same lightbox.


Lessons Learned:
1. How to use $parent and $child binding contexts in KnockoutJS
2. How to use anchors to jump to numerous points on a page
3. Improved understanding of HTML positioning and CSS features

Starry Night

Click To View

Before you click: Music plays on page load, so mind your speakers.

More KineticJS and SoundJS

The Canvas starts off empty, background colour set to black. On 'mousedown' a yellow circle starts to grow, on 'mouseup' a Kinetic Tween sets it on its course. Some circles fly off of the screen but some stick around to create the appearance of a "starry night". If want what looks like a full moon in your sky, wait a few seconds before lifting your mouse up.

Background Song: Once Upon a December


Box2D
I want to learn to use Box2D-Web, a Javascript version of the C++ library used by Angry Birds to create and manage all their physics. I've been slowly trying to build something using the tutorials linked below under "resources".

.........................................

Visit Github page HERE
Visit Starry Night HERE


Resources:

Box2D Tutorial
Box2D Tutorial 2