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

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


Box2D Tutorial
Box2D Tutorial 2



Crazy Minion

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


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.


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

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.


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.


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


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


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


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.



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) 


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


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. >:(


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 :)