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

SoundJS

Crazy Minion

Click on the minion to hear a sound bite and watch an animation. 

SoundJS

In building this page I used both KineticJS, which I discussed in my last post, and SoundJS, a Javascript library that makes working with audio "a breeze", by the authors' account at least. I followed SoundJS's online tutorial closely to learn the basics of preloading, playing and pausing audio. Everything easily integrated with KineticJS.

KineticJS

Working with Kinetic Images wasn't as simple as with shapes. It was necessary to load the images before making them kinetic or adding event listeners.

Lessons Learned:
1. Basic loading and playing of MP3's through SoundJS
2. Using Kinetic Images
3. The difference between URI's and URL's


Resources:
Basic and Best Practices Tutorial
SoundJS Documentation

Kinetic JS

Math Bubbles

A simple game for kids to practice basic addition, subtraction, and multiplication.

Left click on the bubbles with a correct answer:

Right click on the bubbles with an incorrect answer:

Kinetic JS

I was fiddling around with Canvas, attempting to rotate an image via animation (which turned out to be far more complicated than I'd hoped), and I stumbled upon an awesome Canvas framework. Kinetic JS "enables high performance animations" (source) - it automates so many of the tedious functions necessary for every Canvas project. It turned the whole rotating animation into something as simple as drawing a single rectangle with plain Canvas.

Javascript

I ran into a few confusing bugs with my dreadful enemy, Javascript variable scope. I think that this time I really understood the scope and how to avoid running into problems with it in the future, so hopefully this'll be the last of that.

Aside from learning to use Kinetic JS, this was a very education project for me because I pushed myself to use classes instead of isolated functions whenever possible. The first two languages I learned, Scheme and C, don't use classes, so it was hard for me to get into the habit.

Lessons Learned:
1. Basic animation with Kinetic JS
2. Javascript variable scope understanding 
3. Improved Javascript class understanding

Link to Math Bubbles github folder HERE 
(Just a note that the Javascript and HTML are in the same file because I was just playing around and then it sort of turned into an actual project, so I didn't bother separating them.)
Link to Math Bubbles HERE

Movie Log

Visit my Movie Log!

Below is a summary of what I learned in the making of this app, as well as a snapshot of its functionality. I'd suggest looking through the app before reading.

Nokogiri

To acquire a list of most popular movies in the last 30 years I used Nokogiri to parse movie titles from http://www.boxofficemojo.com/yearly/chart/?page=1&view=releasedate&view2=domestic&yr=2014&p=.htm (with page and year parameters changing). The resulting text file was used for the autocomplete function below.

Lessons Learned:
1. How to use Unix > operator to output results into a text file
2. Using querySelectorAll to find a CSS selector for Nokogiri's css method
3. Using HTTParty to make HTTP requests


Autocomplete

When a user begins typing out a movie's title into the input field (shown above), jQuery makes a request to my application's API endpoint, which returns the top five titles that most closely match the input value, determined via a regular expression. jQuery's autocomplete widget dropdown menu appears with the results.

The submitted value is then sent to Rotten Tomatoes' APIs to retrieve movie attributes.

The dropdown is needed to A) improve user experience and B) send more expressive values to Rotten Tomatoes' API ("Harry Potter and the Sorcerer's Stone" VS. "Harry Potter").


Lessons learned:
1. How to make a relative path in Ruby on Rails
2. The value of responding with a JSON object
3. Don't use the passive voice or else you'll sound politician-y


Knockout

Once the information from Rotten Tomatoes is received, it is parsed and automatically assigned to the movie's proper attributes.

The user can then fill in the empty fields as well as change those that have been filled automatically. To achieve this I used Knockout, a javascript library that allowed any changes made to the values to be automatically detected and saved.

Lessons Learned:
1. How to use Knockout bindings
2. How to use Knockout computed values to send jQuery POST requests


Lightbox

I made a post earlier about a lightbox that I had made in preparation for this project. I wish I had known about Knockout back then, because it would have saved me making "visible" and "invisible" classes to hide and show the lightbox. The Knockout library has an "if" binding that would make displaying/hiding the lightbox a simpler process.

Lessons Learned:
1. Knockout "Foreach"
2. Improved understanding of Javascript classes and methods
3. Overflow: scroll;


















Visit the movie log HERE
Visit my github HERE

Simple Lightbox

A simple lightbox made from HTML, CSS, and Javascript. No jQuery or plugins.
Video below demonstrates functionality.

1. Click an image to open its lightbox
2. Click left and right arrows to traverse images, X to escape
3. Press left and right arrow keys to traverse images, ESC to escape
4. While scrolling through page, lightbox stays fixed to centre

Visit Simple Lightbox here.
Visit Github Directory to see code.

Nokogiri

This past week I learned how to use nokogiri, a Ruby gem that allows for “the ability to search documents via CSS3 selectors” (RubyGems). Crazy useful!

                                

I needed a list of the most popular movies from 1980 – 2014 but I couldn’t find a text file online that wasn’t too exclusive or too extensive. Finally, I found this website: LINK, which had the right idea – but since they had no API for me to use I was forced to extract data on my own, yay!

See my work here. (coming soon) 

Resources:

http://www.nokogiri.org/tutorials/

https://rubygems.org/gems/nokogiri

Getting Acquainted With Classes

I spent the last couple of hours writing a Book class with methods that assign a title, find the most common words, break up pages, replace all instances of a word with another, etc. Ran into some issues with runtime since the input (a whole book) was rather large. Eventually improved runtime from n^2 to nlog(n), which made a big difference.

I’m really starting to see the value that classes bring. I’d never used them with C or Scheme, and only a very limited amount with Javascript - so maybe now I can start to reap their benefits.

Lessons Learned:

1. Uses for class variables
2. The basics of Regular Expressions
3. Using Procs to avoid recalculations

See link to github file here.

Blobs and Buttons

Blobs

This Ruby on Rails app uses canvas (HTML5, Javascript) to draw the "blobs". I haven't learned too much about asynchronous programming in Javascript so some of the organization is kind of wild. I hope to cover that with my next project.

Back to the blobs: Go and make your own! Remember to feed and pet your blob often, or else s/he'll get sad. Just click the strawberry once to pick it up, then click it once more over the blob to feed your special friend. Same goes for petting.

Lessons Learned:

1. PUT requests in Rails 
2. Rails environments (development, production, etc.)
3. Using getters to set model attributes

Useless Buttons

With this project I was mostly trying to get accustomed to using HAML (haml.info), a markup language to replace ERB.

Lessons Learned:

1. Basic HAML
2. Basic SASS
3. Uploading  a database to Heroku
4. Benefits of Relative vs. Absolute positioning

Try and get a new high score for one or more of the buttons! :)
Or do what Shea did (cheater) and send your own PUT request to the necessary URL. >:(

Sweep

Rules for Sweep:

1. Get the green circles to the green side, red circles to the red side, etc. 

2. Match bombs (black circles) with the colour of their outlines.
3. (Level 2 only) One point per second will be deducted until the white bomb is caught.

The current odds of getting a black bomb are 1 per 13 circles on level 1, and 1 per 5 circles on level 2.

On a side note, both Chase the Circle and Circle Drawing have been updated.
Circle Drawing now has a button that allows users to save their pictures, and Chase the Circle alerts users when their circle is out of bounds.

Happy Rosh Ha Shana! (Jewish New Year)

Fun With Canvas

I've been learning to use Canvas these past couple of days. It's a tool that "allows for dynamic, scriptable rendering of 2D shapes and bitmap images" according to Wikipedia. At the bottom of this post are some good resources for anyone who is interested.

It's amazing how the most difficult things to program often look very simple.

First: Chase the Circle
This looks much simpler than it is. In order to get a natural movement from the circle I had to subtract the coordinates of the mouse from the coordinates of the circle's centre. AKA: Vectors! (Thanks Mrs. Hill!) Then I had to normalize the vector and add the normalized result to the original coordinates of the centre. Craaayzaay.

If you'd like to know how to catch the circle (by cheating), you can highlighting the next line. There are a few ways to do it.
Right click, then move your mouse to the circle.



This one is my favourite of the three: Circle Drawing
It started off with a funny glitch while trying to make "Chase the Circle", but I liked it and decided to make it its own project. Shea mentioned that it looks like Windows when stuck. I wasted a lot of time playing around with it. Refresh the page if you want to start over.












Last one: Sweep
I intend to turn this one into an actual game. I was thinking the objective would be getting the circles into their proper "goal posts" by colour. I welcome suggestions/ideas!
The challenging aspect with this project was applying the functions previously used on one circle to an array. Working on this one made me feel much more comfortable with Javascript EventListeners, functions, naming conventions, and the organization of code.

Oh what fun :)


Resources:
http://www.w3schools.com/html/html5_canvas.asp
http://www.html5canvastutorials.com/tutorials/html5-canvas-element/