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