TutsPlus Codepen Challenge 3

While reading my RSS feeds, the latest TutsPlus Codepen challenge popped up and naturally I checked it out. I was busy during the previous two challenges, but I was looking for something to occupy me at the moment so this seemed fitting. A day later, I created what you see below. It's not much, but I like it. I learned a bit about using inline SVG in CSS as a background image, hacked some pseudo-elements, and rebuilt a simple datalist clearfix without using Google (mostly from memory though).

One of the bugs I ran into was that I originally wanted to use the Globe with meridians 🌐 Unicode character inside the the h1:before { content: ''; } however in the process of this I discovered that Codepen has a nasty bug where they only support a subset of Unicode due to their MySQL version not supporting above 3-point Unicode characters.

The other bug I ran into was using inline SVG inside of my LESS CSS. Apparently if you use CSS classes inside your SVG then try to stringify that SVG inline into a background-image: url(...) property, it will try to render the SVG in the DOM. I'm not sure if I'm the only one to run into this, but it tripped me up and forced me to base64 encode the SVG after I was done with it and then use that inline in the CSS.

The bottom line is, I turned this:

See the Pen Codepen Challenge #3 by Tuts+ (@tutsplus) on CodePen.

...into this, without modifying any HTML or using Javascript :)

See the Pen Codepen Challenge #3 by Brandon Brown (@brandonb927) on CodePen.

It was a really fun experience and I'm looking forward to joining in on the next Codepen challenge!

Sendwithus hosts Battlesnake 2015

In late February of this year, Sendwithus hosted out second annual AI hackathon competition sponsored by Heroku. I helped out with some of the registration and mentoring at this year's event held at the University of Victoria in the Engineering & Computer Science building. It was a tonne of fun and I had a blast helping students. During the actual development part of the competition, we had a few of the lecture halls on the first floor of the ECS building which proved handy for teams to break out and develop their snake AI.

Seeing so many people collaborating towards one goal was an experience for me that I won't soon forget. Being the first hackathon I've attended, it was interesting to see so many students come together in such an interactive environment to build a cool project. I was able to help some of the students get their development environments setup and running, as well as introduce some handy advice for making development easier for them by using ngrok and command line tools.

Around 96 students showed up to participate with some corporate teams participating as well involving various startups in the area. The main lecture hall was basically full when the final game was going on and some local press showed up to give us some TV time.

I snapped a few pictures here and there as well, along with some images taken by Dylan on our team.

Altogether the whole thing was a fantastic, exhausting, good time and I'd do it again in a heartbeat. Hopefully next year we can bring double the crowd and make an event you'd regret missing!

Setting up iojs, Coffeescript, and an Upstart script on Ubuntu AWS EC2

This is a basic setup on how to get an iojs (or nodejs) app running using Upstart on an Ubuntu AWS EC2 instance.

Note: Replace username in the config below with the username of your choice.

# app.conf

description "app"

start on filesystem or runlevel [2345] and started networking
stop on [!2345]


setuid ubuntu

env USER=ubuntu
env HOME=/home/ubuntu
env LOG_FILE=/tmp/app.log
env APP_DIR=/home/folder
env NODE_ENV=production

pre-start script
  VERSION=$(cat $APP_DIR/.nvmrc | sed -e 's/iojs-//g')
  cd $APP_DIR
  exec $HOME/.nvm/versions/io.js/$VERSION/bin/npm install --production
end script

  cd $APP_DIR
  exec $HOME/.node/bin/coffee $APP_DIR/server.coffee >> $LOG_FILE 2>&1
end script

The config above is almost exactly what I use to run this blog, of course with some minor tweaks and extra environment variables. I also use nvm to manage iojs/node versions.

I won't go into how to build an iojs/node app because coding that is up to you, and this script is a starting block to running your own app on Ubuntu.

How to stream torrents to your Apple TV with Beamer

Recently I wanted to watch an episode of Chopped Canada that had previously aired on the Food Network website, but I wanted to AirPlay it to my TV so I could watch it with others. If you've never watched a video from their website, the experience is shitty and the quality is terrible even on a small screen. This makes it almost embarrassingly impossible to play on a 42" TV. This caused me to resort to looking up a torrented version of the episode from my sources.

From my knowledge I knew that I could potentially use TorrenTV to stream a magnet link/torrent directly to my AppleTV but the past few times I used it, it didn't work well and sometimes couldn't see my AppleTV at all in the app. At this point I went in search of a different solution using PopcornTime which streams torrents directly from the app to your AppleTV. From my research however, the app doesn't support custom magnet link URIs that you could paste in somewhere :(

This lead me to further my search and I found out that PopcornTime uses an npm module called 'peerflix' to stream a torrent file/magnet link to a file in your filesystem. At this point I encountered a mental lightbulb and realized I could use an existing app I already use called Beamer to cast my streamed media file directly to my TV. Bingo!

So my workflow for this now looks like:

  • Get torrent file/magnet link from a source into clipboard buffer
  • Paste buffered link into commandline as peerflix [TORRENT FILE/MAGNET LINK] --remove
  • Open Finder and go to /tmp/torrent-stream/<path to file found in peerflix output>
  • Drag file into Beamer and go make some popcorn to watch your video with

This seems complicated at first (and it is for what it is) so I think I'll improve on this workflow in the future as there are probably other ways you can accomplish this in a simpler fashion. For now however, it works wonders for me and isn't too cumbersome because I'm always using a terminal.

Featured in an article on Hacker News

Browsing Hacker News the other morning, I noticed a very cool post from a company I'd never heard of covering OS X setup automation. This is interesting to me because I'm always looking for ways improve my osx-for-hackers.sh script. Well low and behold, after reading a few paragraphs into the article I saw my name referenced! "Cool, someone found my script and liked it" I thought. Little did I know, this post would have quite a few eyeballs on it soon.

Here's a rundown of some of the things that happened over the next 36 hours of being mentioned:

  • The article started low on HN but gained popularity as more people upvoted it
  • After an hour, the post was sitting at #1 on the HN front page and proceeded to dominate for the rest of the day
  • Around 5pm, it dropped slowly to #15 where it sat on the front page over-night (not 100% sure of..)
  • My small mention in the article received a tonne of feedback in the comments about the script I've cobbled together
  • Alot of the feedback I received was both positive and negative, having to be taken with a grain (or shaker) of salt
  • I'm now devoting more time to cleaning the script up and releasing a prompt-heavy version
  • At the time of this writing, the script has 760 stars on Github, an increase of 650+

All-in-all, it was an interesting experience! I saw a small spike in views of this site and it was my first exposure on Hacker News.

Blog updates

I made some updates to my site to improve the experience and I moved from Handlebars to Nunjucks for templating. I much prefer the Jinja syntax for looping, etc. and the fact that I can do proper if/else statements is invaluable.

Some updates in my life include (sadly) losing my position at Input Logic working on Postach.io and QuoteRobot.com, and turning around within a week to jump on board with the amazing team at SendWithUs near the end of August, 2014. I'm brought on to update and eventually overhaul many front-end user-facing features.

I'm super excited to see where this new chapter in life takes me.

Happy hacking!

Create a OS X 10.10 Yosemite Public Beta 1 USB installer

Want an easy, command line one-liner to install your handy-dandy new OS X Yosemite Public Beta that you just redeemed from the App Store?

sudo /Applications/Install\ OS\ X\ Yosemite\ Beta.app/Contents/Resources/createinstallmedia --volume /Volumes/Untitled --applicationpath /Applications/Install\ OS\ X\ Yosemite\ Beta.app --nointeraction

Replace Untitled with the name of your USB partition and all is well :)

Setting up my dev environment on OS X 10.10 Yosemite DP 1

I won't be the first to admit I'm an early adopter. I love the bleeding edge, but sometimes it makes you bleed. Alot.

I recently did a full re-install of OS X on my Mid-2012 MacBook Air and instead of 10.9, I decided It would be great to test out and install the recently announced (recent as in, like, a week ago) OS X 10.10 Yosemite. I set out on a mission to get the latest version of OS X and XCode from unnamed sources and succeeded, created a USB install drive with one of my many disposable USB flash drives, and nuked my current partition (backing everything up first, of course).

Once I was finished the install process, I was greeted with the glorious and beautiful new flat UI of OS X Yosemite which is very iOS7-inspired. Instantly I knew I wasn't going back to 10.9, but when I started to install my dev tools and everything I need to work, my enthusiasm for bleeding-edge became a dull ache in the back of my eyes.

Needless to say, here is a comprehensive list of issues I ran into, and how I fixed them:

First, XCode needs to be installed

The version of XCode in the Appstore only works with OS X 10.9 or lower, so you have to get the XCode 6 Beta from the Apple Developer site. Again, I retrieved it from unnamed sources, but the endgame is exactly the same. For me in OS X 10.9, I only needed to install the XCode CLT, however this is not the case in OS X 10.10. Install XCode 6 Beta, then install the XCode 6 Command Line Tools otherwise you’ll run into issues installing Homebrew in the next step.

Installing Homebrew

Homebrew is amazing and I love it to death. It sure beats compiling all of my software from source. From my knowledge of installing Homebrew on everyother version of OS X I’ve used, I installed it via

ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
brew doctor
brew update

Initially I had not installed XCode.app, only the Command Line Tools, so when I tried to install anything else this is where I ran into issues and had to reinstall Homebrew.

rm -rf /usr/local/Cellar /usr/local/.git
brew cleanup
ruby -e "$(curl -fsSL https://raw.github.com/Homebrew/homebrew/go/install)"
brew doctor
brew prune
brew update

When I ran brew doctor, I had one less warning than the initial install which isn’t optimal but I needed to continue and solve the rest of the issues.

Now that I had reinstall Homebrew, it was complaining that it's bin and sbin folders were not accessible in the path and to ammend my path with /usr/local/bin and /usr/local/sbin. I modified the global /etc/paths file from




just like I would in Mavericks, but this did not work. After some Googling, I found a solution on Github. It seems the issue is with iTerm2, my terminal replacement of choice.

  1. Go to Profiles > Open Profiles...
  2. Select your profile, Default if you only have one, then click the Edit Profiles... button
  3. Change the Command radio button from Login shell to Command and paste in /bin/bash -c /bin/zsh.
    See screenshot: https://cloud.githubusercontent.com/assets/660139/3190490/3a52b170-eccf-11e3-8329-3ef6ec3f5f0f.png

Source: https://github.com/Homebrew/homebrew/issues/29843#issuecomment-45242894

Installing Node with Homebrew

I mentioned another issue above in the first section that if you install the CLT first before XCode.app, you’ll run into issues. The issue in question is that Homebrew cannot compile Node in the next step without setting the proper XCode.app path first otherwise it does not compile Node.


sudo xcode-select -switch /Applications/Xcode6-Beta.app

will solve this issue and allow you to continue.

Installing MongoDB with Homebrew

After the fiasco with installing Node, I was almost ready to just give up but I decided to stick with it and figure out how to solve my issues. The next step was to get MongoDB installed which I’ve never had issues with, until now. When MongoDB was downloaded and started installing, it looked like it might just work on the first try but then I got this weird error saying

SCons Error: option --osx-version-min: invalid choice: '10.10' (choose from '10.6', '10.7', '10.8', '10.9’)

This indicated to me that the version of MongoDB in the Homebrew list hadn’t been updated for 10.10 yet, but after some Googling I found this fix

It seems, the version of OS X is read from /System/Library/CoreServices/SystemVersion.plist, so if you sudo-edit the file and change:




And then do brew install mongo, it'll install.

REMEMBER to change back ProductVersion to 10.10 straight away, otherwise most of the Apple-provided apps will cease to function (Including Terminal.app).


Fix Google Chrome from crashing in OS X 10.10 Yosemite

Edit: This doesn't seem to be an issue anymore in the Public Beta. Let me know if you still have Chrome crashing all the time!

Google Chrome Canary is usually pretty good in any OS, almost good enough for a daily driver except for the odd crash now and then, but in OS X 10.10 it is not stable at all. Every second or even every tab I open crashes after a period of time, or just straight up will not load. I googled around and found that the solution is partially caused by having to show scrollbars on using the trackpad on MacBooks. You can fix this by running these two commands:

defaults write com.google.Chrome AppleShowScrollBars Always
defaults write com.google.Chrome.canary AppleShowScrollBars Always

How to get the latest tag on your Git branch

I frequently look at the latest tag when working on Postach.io in Git and because we have so many it takes me a few seconds to look through the list to find the latest one. This little snippet can do that for me in one command!

git describe --abbrev=0 --tags

An even better way to have this work is to add it to my aliases in terminal and call one command instead of remembering this chain of arguments:

alias glt="git describe --abbrev=0 --tags"

Now in your terminal you can call: