Let's Build Bridges!

Finally getting around to making note of this here: I finished another simple puzzle game a few weeks ago. It’s a hashi wo kakero implementation, called “Let’s Build Bridges.” Check it out on the Ganbaru Games site. It works great on mobile (Chrome/Safari) as well, so you can save it to your device’s homescreen for fast access. Alternately, I put an IAP-enabled version on iTunes, so plz give me pennies.

Also, since trashing the Ganbaru Games dev blog, I needed something to put there, so ended up making a faux smartphone-type interface. It’s a bit spartan now, but will be fleshed out a bit as I slowly convert some of my Javascript games over to using Arcadia.

Comments · Posted by Posted by Nathan at 22:08 · Tags javascript games development

Play Spelunky on OS X!

Spelunky is a great game. I remember playing the first freeware version, and sucking at it. I don’t think I ever got past the Mines. Never owned an Xbox 360, so I wasn’t able to play the HD remake when it was first released. I shed bitter tears about that. Imagine my joy when a port was released for PS3 (which I actually owned)! Imagine my anguish when my PS3 bit the dust, suffering from the dreaded “Yellow Light of Death!

While there is a PC version of the game, no OS X port has been released, and it’s looking rather unlikely at this point. Fortunately, it’s super easy to get the Windows version of the game running in Wine! Even better, there’s an application called Wineskin Winery, which will bundle the Windows .exe into its own self-contained Mac .app bundle! When you get the whole thing working, it’s totally seamless and amazing. While I found a few tutorials online to help walk through the process of getting Spelunky up and running, they were a bit sketchy, so I figured I’d recount the process here, complete with screenshots. Note that I’m running the GOG version.

  1. Download Wineskin Winery. When you start the app, you’ll see something like this
  2. Install an engine. I installed 1.7.29, but you can probably use anything newer.
  3. Click “Create New Blank Wrapper.” Give it an awesome name.
  4. The wrapper is done! Click the “view wrapper in Finder” button.
  5. Right-click the wrapper app and choose “Show package contents.”
  6. You’ll see an app called Wineskin.app. Open it, then choose “Install Software.”
  7. The installer will allow you to choose a setup executable. Click that then choose the Spelunky setup .exe.
  8. Install it!
  9. Click the “Advanced” options and choose “Tools” -> “Winetricks”.
  10. Install d3dx9 from the “dlls” section.
  11. Do a test run. Hopefully it should work!
  12. Use Controllers to map keyboard input to your Bluetooth game controller!

Now, enjoy some of that sweet, sweet Spelunky-ing.

Comments · Posted by Posted by Nathan at 20:06 · Tags spelunky wine gaming os x

Make an animated hamburger icon!

I’ve been using the Lollipop version of Gmail quite a bit recently. One neat little detail is that whenever you drill down into the individual email view, the “hamburger” button in the upper left smoothly animates into a “back” button. In fact, you’ve probably seen this effect quite a lot – a simple search for “animated hamburger icon” returns a boatload of results. Most of the techniques for doing this sort of effect on the web utilize some sort of CSS trickery: they’ll use psuedo- elements to create the hamburger, then animate it all with transforms.

What if you have to support older browsers in your site? I know it’s hard to resist the shiny new features in the most recent version of Chrome, but lots of folks still use (gasp!) IE8 (or older). In fact, one of the sites that I help administer has an even split of users between Chrome and IE8. For that reason, I was thinking about how I could implement a hamburger animation in a way that wouldn’t totally break for IE8 users.

animated hamburger icon

I ended up simply using two images, a “hamburger” and an arrow, then fading between them. On newer browsers that support transforms, the fade is obscured by a rotation animation. Sure, it’s hacky; the cooler versions of this effect will create the hamburger using DOM elements, then animate each one into position. But most end users won’t notice the difference. And using images will allow older browsers to get an approximation of the effect.

Check out a JSFiddle with the implementation details.

Comments · Posted by Posted by Nathan at 23:05 · Tags html css javascript

Roll back multiple migrations
with Capistrano

Have you ever used Capistrano to run Rails’ database migrations in your production environment? It’s pretty great, just cap deploy:migrations and you’re good to go. You’ve probably also had to use Capistrano to roll back a bad deploy, using cap deploy:rollback. But what if your most recent deployment had a migration that introduced a schema incompatible with your old code?

Well, if there was only one migration, you could roll it back by using rake db:rollback RAILS_ENV=production. However, the problem I found myself in a few months ago was that I had deployed a feature with multiple migrations. And, it was a long running branch, so the migration files weren’t the most recent ones run. rake db:rollback would have, in fact, reverted only a single (and wrong!) schema change.

The correct command to use in these cases is rake db:migrate:down RAILS_ENV=production VERSION=<UR TIMESTAMP HERE>. Let’s be honest, though. If you’re rolling back a schema change, you don’t want to mess around with running these tasks one at a time. In my situation, I had 10 (!) migrations that needed to be reverted. I ended up rolling them back on at a time, until one halfway through threw an error. I then realized that the only way out was through, and fixed the bug that caused the rollback attempt.

So! Resolving to never be in that situation again, I created a simple Capistrano (ver. 2) task to revert multiple migrations. And I always ensure that all migrations in any pull request I merge can be run both ways.

desc 'Migrate downwards; Usage: cap db:migrate:down VERSIONS=TIMESTAMP,[...],TIMESTAMP'
namespace :db do
  namespace :migrate do
    task :down, roles: :db do
      ENV['VERSIONS'].split(',').each do |version|
        run "cd #{current_path} && bundle exec rake db:migrate:down VERSION=#{version}"

Comments · Posted by Posted by Nathan at 16:04 · Tags ruby rails capistrano migrations

Migrating to a VPS

After having pretty stagnant websites costing me $10/month for years and years on shared hosting, I’m finally in the process of migrating to a VPS hosted by DigitalOcean. I was pushed over the edge by the fact that my shared host of 10+ years (Dreamhost) runs Ruby 1.8.7, and I had no way to upgrade. The prospect of administering my own web server is a bit daunting, but heck, I write websites for a living, I should be able to figure it out.

So how does one go about moving one’s digital life?

The one good thing about my shared hosting provider was that they were a “one stop shop.” I had my domain registration, email, web hosting, version control, everything in one place. Moving to a VPS means that all my services are all over the place. Such is life, I guess. Hopefully being able to run modern webapps for $5/month will make me feel better.

The first step for me was to migrate my old email into my Gmail account, which I’ve been using for about 10 years. Fortunately, email has an “Import from POP3” option right in Settings -> Accounts and Import. I grabbed all my old messages, labeled them, and called it a day.

Next was to move all my crummy, half-baked SVN repositories over to GitHub. Most of these are pretty worthless, but I’m a digital packrat (as well as physical), so I followed this tutorial from the Git Book. I’ll have to go back and delete most of them later, as they are of no use to anyone, least of all myself.

I moved my domain names over to Google Domains. Seems a bit sketchy since it’s in the perpetual “Google Beta,” but the offered email forwarding, and the last thing I want to do is deal with an email server to handle my legacy email address.

Lastly, I converted my Wordpress blog over to Jekyll, a static site generator. Conveniently enough, there’s a Wordpress importer which I used to grab my existing posts. After installing nginx and Ruby on my shiny new VPS, I created a Git post-receive hook to rebuild the site every time I push to the remote repo.

So far it’s been pretty fun to muck around with these things – I feel like I don’t know nearly enough about system administration, so hopefully I’ll pick up a few things.

Comments · Posted by Posted by Nathan at 00:04 · Tags internets