Musings of a Fondue

Tic Tac Toe

My brother asked me if I could make a tic tac toe game for the command line.

It wasn’t long before I got bored with the its limitations and moved on to the glorious world of sound, color, animation, and mouse/touch interaction that is HTML5!

And this,

_____ _____ _____ | | | | | X | | | |_____|_____|_____| | | | | | | O | | |_____|_____|_____| | | | | | | | X | |_____|_____|_____|

Became this,

Play the game here
Make sure your sound is on!

JResig Book - TIL

Today I learned that you can abstract away frequently used code.

While working through John Resig’s book Pro JavaScript Techniques, I noticed he uses simple helper functions to keep the code neat and non-repetitive.

A GUI for Youtube-dl

I came across Youtube-dl while looking for a safe way to download YouTube videos. Youtube-dl is a project on Github and the code is public, so I assumed it was safe.

The interface however is through the command line. This is kinda cool because you learn a bit about using the console. It also looks fancy/hacker-ish to someone walking by when it’s running even though all you’re doing is downloading some videos.

However, the command line use makes it something that I cannot give others to use. Also, having to remember the arguments to pass each time you want to use it is unideal.

I wanted to make a simple app that allows you to use Youtube-dl through a GUI (Graphical User Interface). I wasn’t sure how to do this, but I recalled reading a post by Avery Lee where he explained that C++ and Win32 was what he had used to make VirtualDub. So I googled that and came across several tutorial series on YouTube on making Windows GUI applications.

Mechanize X Investopedia

I wanted to get the trade history of a user (whom I suspected was a bot), but I didn’t want to copy and paste all those pages.

I had previously watched episode 191 of RailsCasts where Ryan Bates uses Mechanize to login to a site and scrape the desired data. The original instructions in the video were not 100% applicable, however the Mechanize documentation filled in the gaps.

I put a script together using the two sources, and… it worked!

Tetris Theme Song Using Processing

If you have Processing installed, I highly recommend going through the examples included. There’s a lot of interesting stuff hiding there.

If not, download it. I promise you won’t regret it!

This project was based on one of these examples* which plays the Happy Birthday song. I managed to tweak it to play the Tetris theme song. (And felt like a million bucks haha.)

Here it is live

Update

Unsigned Java applications no longer work on web browsers (at least not without much effort). So here's a recording of it I made using Audacity,

Web Scraping With Nokogiri

This is a small script I originally wrote on October-ish of 2013.

It’s based on this excellent 10 minute tutorial by Paul Bates (RailsCasts).

The script visits a website and returns (‘scrapes’) information without you having to manually open, search, copy, then paste the information you desire. This makes it invaluable for batch executions or tasks you want automated.

I recall being ecstatic at the time - or more accurately, my mind EXPLODING into several pieces!

Though I didn’t take any screenshots, here are some with the same script but run today (May 12, 2015),

First Android App

image

My first android app. Incredibly simple but I cannot wipe the grin off my face!

It’s based completely on this tutorial by Maro Klein.

He makes it incredibly easy to get started programming for Android. Check it out if you need that first icebreaker to get you going!

Learning Ruby on Rails

I finished Michael Hartl’s intro series to Ruby on Rails.

In the process, I learned a lot about the web in general and website design.

I also learned a lot (and I mean a lot) about patience! Turns out attempting to do a tutorial written in 2010 in 2013 is hard given the blinding rate at which Ruby and its gems are updated.

I also learned about command line use, Github, Heroku, Git, Ruby, and lots of other stuff. The series is quite comprehensive!

The end result is the following website:

Subtitles Using JavaScript - Part 3

Using Excel to convert subtitle files into arrays is too laborious to be practical.

I came across regex while working through Michael Hartl’s Ruby on Rails tutorial. He covers regex in Lesson 6 when talking about password validations.

With generous use of Stack Overflow and Rubular, I managed to put a ruby script together. It takes a subtitle file as an input, and returns a JavaScript array as an output.

Overall using the script requires much less effort than Excel. Only two manual steps of search and replace are needed to finish up the array.

Here it is in action,

Subtitles Using JavaScript - Part 2

Having succeeded with the <video> tag, I wanted to try implementing subtitles for flash videos - the format which most video content on the web is distributed in.

However I quickly learned that each flash player has its own unique way (via APIs) of getting information about a video’s current time. This meant that for now at least, my implementation would not be universal.

So, I tested the waters with YouTube’s JavaScript API.

I used this snippet by Rob W. as starter code for interaction with the API. And after a lot of reading, and trial and error I got this,

image

Subtitles Using JavaScript - Part 1

There was a movie I desperately wanted to watch but I couldn’t find a version with subtitles uploaded ANYWHERE online. (The movie was in a language I didn’t know).

This had been a recurring situation. The full movie is there in all its epicness, but no subs!! However, the subtitles were often easily findable via Google.

I tried watching the movie while reading the subtitles on another window…but no dice! I kept falling behind or ahead of the actual dialogue and juggling took away from the movie…

One day when browsing Flowplayer’s features (a popular video player for the web), I noticed the nature of the subtitle files they use, and decided to try and write some JavaScript code that could sync subtitles with a video.

HTML5 Game

I wanted to get better with JavaScript and Canvas so I did another game tutorial series.

This time, it was Gyrostorm’s YouTube series, ‘HTML5 Game Development Tutorial.

The series is quite good! Check it out if you’re starting out!

Here is my end result, sort-of. Press ‘B’ to fire, WASD or ULDR to move, and Spacebar for a special *cough something.

image

Augmented Reality

I came across James Alliban’s work on Augmented Reality,

Here’s his full article including the demo in the video. And while you are there, his projects are amazing!

After watching several of his videos I was inspired to try it out. I found these two awesome tutorials on getting started,

Canvas Cycle - Part 2

Drawing an image using pixel data

The more I looked at the color and pixel data in the image.php file, the more convinced I became that I could write something that could draw the image. The pixels array in the file was in a grid-like format exactly 640 elements across and 480 down (corresponding to the image dimensions of 640 x 480). I played around with canvas to see what I could do.

Canvas Cycle - Part 1

I came across this experiment by Joseph Huckaby,

It’s mesmerizing! So much so, that I wanted to save it. (So that I could keep it forever! *creepy voice*)

But when I did, I found that it wasn’t working,