Releasing the Puzzle Gallery, NinjaJS, and Canvasflow

I'm a long time redditor and wanted to post my first game along with a couple of frameworks I've open sourced.

The game is called Puzzle Gallery and all of the art work and design was hand drawn by my sister-in-law Eve. For those that aren't interested in the programming/frameworks you can skip to trying out the game here:

The game has fairly large assets since they're all hand-drawn; so if you are on a slower connection it may take a while to load.

You can also download the iPad version here:
Puzzle Gallery in iTunes

NinjaJS - A multi-touch HTML5 canvas framework.

The game utilizes the HTML5 canvas and while writing it I tried a couple of different canvas frameworks, but didn't find one that handled multi-touch and resizing the way I needed it to. To fix this I ended up writing my own framework which handles it fairly well.

You can get it/read about it here:

Canvasflow - A Coverflow like library for the HTML5 canvas.

The second framework I built for the game is called Canvasflow. It is a Coverflow like plugin for the HTML5 Canvas. I tried a few of the other HTML5 Coverflow plugins that are out there, but none of them seemed to deal with touch events and didn't scroll as smoothly as I would like on mobile devices. I ended up writing my own and hopefully now everyone can benefit from it.

You can get it/read about it here:

If anyone has any suggestions/improvements they'd like to see made just let me know. I will also accept pull-requests ;)

Dynamically scaling the HTML5 canvas.

One of the problems I've run into while building an html5 canvas game is scaling the size of the game based upon the browser's viewport size. Luckily the canvas element is treated just like an image (img) element when it comes to resizing.

To start off we are going to draw a simple rectangle on the canvas.

    var container = document.getElementById('dynamic-canvas-size-container1');
    var canvas = document.createElement('canvas');
    canvas.width = 150;
    canvas.height = 150;

    var context = canvas.getContext('2d');

    context.fillStyle = 'blue';
    context.fillRect(0, 0, 150, 150);

    context.translate(canvas.width / 3, canvas.height / 3);
    context.fillStyle = 'red';
    context.fillRect(0, 0, 50, 50);

When scaling an image we would usually like to keep it's aspect ratio. If you don't you end up with warped images that don't look very good. For instance our width/height ratio of the canvas above is 1:1 so it makes a perfect square. To scale an image/canvas well we use the below methods:

    var getResizeRatio = function(startWidth, startHeight, maxWidth, maxHeight){
        var ratioX = maxWidth / startWidth;
        var ratioY = maxHeight / startHeight;

        return ratioX <= ratioY ? ratioX : ratioY;

    var getResizeDimensions = function(startWidth, startHeight, maxWidth, maxHeight){
        var ratio = getResizeRatio(startWidth, startHeight, maxWidth, maxHeight);

        return { width: Math.round(startWidth * ratio), height: Math.round(startHeight * ratio) };

Once we have the above methods we can easily resize our canvas while keeping it's aspect ratio. Just use the code like so:

    var dim = getResizeDimensions(canvas.width, canvas.height, 450, 1000); = dim.width + 'px'; = dim.height + 'px';

Notice that I attempted to make the height a lot bigger but the getResizeDimensions method kept the aspect ratio, so we just end up with a larger rectangle (as we should). When writing HTML5 canvas games you'll have a little bit of a problem dealing with user input and resizing. Luckily I've written a framework to handle all of those issues. I'll post about it in a bit.

Building a custom blog engine.

In my previous post (here) I talked about some of the requirements I had for a blogging engine. The general requirements boil down to just a couple of things. The blog must be easy to maintain and it shouldn't get in my way when trying to display complex examples.

What exists

Since I'm not really a huge fan of writing software that already exists I did some searching to see if anyone else had run into these issues. In my search I came across jeykll which is a blogging framework built on ruby. It fits my requirements almost perfectly, except for one major issue. I need a back end to build examples on. Often times my examples will have ajax based components, and I need a simple way to write code in a backend that can handle those requirements.

Full development stack

Towards that end I've decided to blog using Yesod. This is a full web stack for developing in the Haskell programming language and has some really nice features going for it. From a simple to use, basic ORM. To full on templating languages for html, javascript, coffeescript, and easier to use css. It really is the bees knees for haskell web development. Not only that, but it's ridiculously fast comapred to the alternatives.

Simplifying the process

To make it easier to publish blog posts I've blatantly ripped off some ideas from jeykll. Most notably the idea of YAML Front Matter. Each post is a single html file with a yaml header followed by normal html. For example the header of this posts HTML file looks like this:

        date: 04/08/2012
        url: blog-engine
        title: New Blog Engine
        tags: [blog]

Git to the rescue.

Now that I have my post file format I can move on to other issues. How do I backup and deploy at once? Luckily this is a solved problem; since we're using nothing but flat files we can use git for both source control management and publishing.

Free hosting on Heroku

Since I am already using git for source control and mostly serving flat files I can simply do a:

    git push heroku deploy:master

and we are live! Heroku gives out one free small instance per site so I don't even need to pay anything for hosting my blog; and if I need more resources, Heroku can automatically give me more with a few clicks of a button.

There is still a lot to do to make this really workable. I need to add paging, a commenting system (heard of DISQUS?), and an RSS feed. These are pretty minor to implement so they should be coming shortly. If you have any questions just reach out to me on my contact page and I'll get back to you.

Getting back into blogging with a new blog engine

This weekend I decided that I wanted to get back into blogging. The last time I tried blogging I used one of the pre-packaged blogging platforms and it didn't really sit well with me. I chose a theme, set up the prepackaged database, and seemingly, was up and running in no time. After that, I hit a bit of a road bump.

Workflow is important.

The problems I had with prepackaged blogging software were numerous.

  • Most blogging software depends upon a database.
    Databases require effort to manage properly and need to have a backup plan.
  • WYSIWYG widgets are great for the layman and terrible for the developer who knows what they're doing.
    They often times will break valid HTML and you'll waste time fiddling with them to get a result that should have been straight forward and simple.
  • Programming examples are difficult to integrate into non-custom blogging software.
    I write a lot of javascript these days and showing off examples of the frameworks I've built requires a high level of flexibility in the blogging software I use.
  • Previewing posts is often times insufficient and is no replacement for a staging environment.
    I often found myself scrambling to fix a mistake I had made because I couldn't see the full effect of a post on the front-page of my blog.
  • Since most blogging software depends upon a database they often don't perform very well. As a software developer I believe it reflects poorly on me if the tools I choose to use don't meet users expectations.
  • Once you've picked a blogging platform you will have limited choices on where to host it, as you must host both a database, and whatever web framework the blogging software was created with. This will typically double your overhead.

Lessons Learned

Having learned from my last attempt at blogging I've decided to roll my own blogging software. My new blogging software must:

  • Have no database and should be backed up automatically with each update.
  • It should have each post stored in a single plain text file for ease of maintenance and zero friction development.
  • It should be brain dead simple to upload programming examples.
    This often includes images, javascript files, and custom css.
  • The site should be easy to test locally and push remotely.
  • All content served should be static files. This greatly increases the performance of the site and allows caching servers around the world help save you money on bandwidth costs.
  • Be hostable on free or cheap hosting platforms.

Since this blog is up and running I've obviously already solved a number of these issues. In my next post I'll go into details on how I tackled these and tell you about a few frameworks that were helpful in getting me here.