One more robot learns to see

2015 was a pretty awesome year full of new experiences, growth and accomplishments. It marked my second year of working in software professionally and school seems like a faint memory at this point. Shopify, the company where I work, IPO’d this summer which was an exciting and [possibly] once in a lifetime experience. I think this kind of post is worth doing to reflect before simply setting our sights on the next goal. So here it is my year in review in bullet points:

Travel

• Barcelona for FullStack Fest
• Stockholm Sweden for Nordic.js
• Paris France (for just over 24 hours but we saw a lot!)
• Helsinki Finland for Junction 2015
• Costa Rica for vacation
• Peru for a vacation and to hike the Inca Trail!

Sports and Fitness

• new PR squating at 255 lbs for 1 (although now I’m injured as I write this and my squat is low :sadface:)
• ran 3k in 12:35 (mm::ss)
• made a lot of improvement in mobility (I can now touch my toes!)
• I discovered and became addicted to Yoga Tune Up which has really helped support my other fitness goals

Ultimate

• I played my first season of competitive Ultimate with Swift
• I attended 3 away tournaments with Swift in Toronto, New York and Barrie finishing our season at No Borders in Ottawa.
• We didn’t win a lot of games (we were essentially the C team) but we did beat Goose when it counted!
• I played in my first beach tournament ever!

Side Projects

• I wrote my first text editor extension RailsRunMigration
• I made a script to alert me when I spend too much time coding (the irony) coding_timer
• I created some cool infographics for the OCUA Parity League
• merch-my-tweet a bot who automatically creates products from your tweets
• I wrote a javascript library to add a CLI to my online banking
• I built my first docker image (trivial but felt cool)
• I also shipped improvements to shopify-sinatra-app and completely re-wrote shopify-app as a proper rails engine

New Tech

• React.js
• Rails engines
• npm / common js build tools
• javascript testing with jasmine
• capybara / browser testing
• middleman
• Chrome Extensions
• small task automation with AppScript

tl;dr I averaged every episode of That 70’s Show into a single video

A couple of weeks ago I was hanging out with my buddy and we were going to watch some TV. I was making a pitch for my new favorite show Rick & Morty which we couldn’t find using the PS3 internet browser. We did however find excellent video syncing Rick and Morty clips with Eminem’s Rap God.

One good YouTube find is never enough though so as soon as the video finished we eagerly checked the user’s other videos and thats when we stumbled upon this gem:

After watching a bit too much of ‘Every episode of Friends simultaneously’ I went looking for two things of which I found neither. Maybe I live in too much of a software bubble but I was genuinely surprised when I couldn’t find a link to the code used to make the video. I was equally surprised that this was the only video of its kind that I could find.

And thats how this project got started - I set out to create a script that would let me average all the episodes of any show into a new video. I wrote a script in python and opencv to do the work and then I picked That 70’s Show as my first test (I would have preferred Seinfeld but I don’t have it). That 70’s Show is a pretty good candidate - my main hypothesis was that shows that re-use the same locations frequently will be more interesting.

I am pretty pleased with the results! It’s pretty fun to watch and you can definitely pick out distinct patterns in how they frame shots and recognize scenes like the car from the opening credits (at ~2 minutes in). If I’d ever taken a course in film I’m sure I’d have some more intelligent things to say.

I also made this video where I ramp up to the average adding a new episode every 30 frames or around 1 second. So for the first second you’re only watching 1 episode then 2, 3 etc:

This is a post about developing my blog on my blog - take a second to appreciate how meta that is.

I recently transitioned my personal site from Wordpress to a static site on Github pages built using Middleman. Overall it was an awesome change and I feel much better having my personal site and assets etc in plain text and source control. The transition was pretty smooth however there were a few things that I had with Wordpress that took a bit of finesse to achieve with Middleman. Blog search was one of those things and I eventually came up with a pretty elegant solution that I would like to share.

The reason search is interesting is because Middleman generates static sites which means any search solution needs to be entirely client side. If you google for Middleman search you’ll find some other projects and gems but I think my solution is simpler.

I built my blog search using this nice little autocomplete library called Awesomplete. To start I added the following markup to the sidebar partial which is rendered on all the blog sections of my website:

<input id="search" class="form-control" list="articleList" placeholder="Search...">
<datalist id="articleList">
  <% blog.articles.each do |article| %>
    <option><%= article.title %></option>
  <% end %>
</datalist>

This creates the base list of all my blog articles. Now we need to bring it to life with Awesomplete:

  var input = $("#search")[0];
  var awesomplete = new Awesomplete(input, {
    minChars: 1,
    maxItems: 5,
    autoFirst: true
  });

  var searchIdx = {
    <% blog.articles.each do |article| %>
      <%= article.title.to_json %>: "<%= article.url %>",
    <% end %>
  }

  window.addEventListener("awesomplete-selectcomplete", function(e) {
    var articleTitle = $(e.target).val();
    var articleUrl = searchIdx[articleTitle];
    Turbolinks.visit(articleUrl);
  });

This code does a couple of things - first it initializes the Awesomplete widget. Next it defines a searchIdx variable which just maps article title to url and stores it in javascript land so we can access it later. The last bit of code listens to the awesomplete-selectcomplete event then looks up the url for the selected article and then loads the page with Turbolinks (if you’re not familiar this is just a slicker way of doing window.location = ).

I was really happy with how this turned out, super fast, simple and the code is nicely contained in my sidebar partial. Give it a try in the search box to the right!