Justin McCandless

I'm attempting to throw together a game for the 27th Ludum Dare game competition this weekend. I'll be posting updates over here if you want a closer look. The theme is "10 seconds", and I think I have a decent idea in my head, but I know I'm going to have to compromise to implement it. At the end of the competition I'm sure I'll have something to show though, and I've already learned plenty of lessons on how to do something like this in the last few hours of coding.

In my efforts to write more short demos, I set out to build a browser version Minesweeper that could scale to any size. I went with SVG for the main board, and a small bit of responsive HTML for the controls. The result should be a game of Minesweeper that looks nice and full resolution at any screen size. Check it out on Mozilla Demos and enoy: https://developer.mozilla.org/en-US/demos/detail/svg-minesweeper. Update 2013.09.14 I'm super proud to say that I've improved this app a bit and gotten it onto the Firefox Marketplace.

The more I work with native mobile code the more I miss HTML5. I was recently trying to implement one of those Pinterest-like offset grids in an Android app, and while a beautiful open source library called Masonry exists to do this for Javascript, in Android there isn't anything quite as well accepted. Rumor has it that Google was working on a native implementation of a staggered GridView, but it was dropped from the latest release of Android.

If you're working on a Yeoman app from a git repository, you won't be able to simply git clone and then start the Yeoman workflow. There's a small amount of setup to do, so I thought I'd write that out here in a simple list for anyone that also goes through the process. Scroll down to the bottom if you just want the commands! Starting out, let's say that you already have a Yeoman project created and in a git repository that you just cloned, and you already have Yeoman, Bower, and Grunt installed (if you're still setting up Yeoman, you can check out the official documentation).

I've always found myself bouncing back and forth with how I write articles for this blog. Whether I'm writing straight HTML, using a WYSIWYG editor, or compiling markdown, I'm never quite satisfied however I'm doing it. So I decided to hack together a solution combining the best of all of them. That resulted in the open source project Markdown-HTML-Form, which I'm happily using to type this right now. The idea was to use exising open source projects to create a markdown input that syncs with an editable WYSIWYG preview, and make it a snap to integrate into an HTML form on top of that.

Update: If you're not tied to Backbone, check out a new rewrite I did of this project with Iron Router, called Meteorplate. The documentation and the examples on meteor.com do a lot to show off the awesome things Meteor can do and get you started, but I found that I was spending a ton of time just getting my app bootstrapped when I was trying to build something more structured. After finally getting a Meteor app up and running with Backbone's pagination and view structure, I created a boilerplate project from it that should server as a great starting point for similar projects.

Two of my more complete jQuery plugins are now up on jQuery's plugin site. Check out jQuery Open Carousel and jQuery Fast Buttons over on the recently relaunched plugin site. They're also both on github as always. I've written a good amount about these projects on this blog before, but here is a basic overview of each. jQuery Open Carousel jQuery Open Carousel is an easy to use carousel that's lets you do a bunch of configuration and customization without touching the javascript.

Yeoman had some big changes with its 1.0 release, namely removing its abstraction of Grunt to let the user interact directly with Grunt's build process. This gives you a lot more freedom and access to Grunt's features, but it also works very differently from the original build process. Converting a pre-1.0 app to 1.0 is therefore a bit of a task, and Yeoman's migration page isn't too comprehensive. Here are a few tricks that I had to use to get my Yeoman app to work with 1.0.

The helpfulness of using several third party tools can have a price when you try to get them to all play nice together, as I learned when using the combination of Yeoman, Requirejs, jQuery Mobile, and Backbone. There is a lot of help out there though; the jQuery Mobile site itself has an example on using jQuery Mobile, Backbone, and Requirejs together, and on Stack Overflow there are plenty of helpful questions and answers on similar combinations.

Innovation seems to be a big buzzword around the topic of China lately, as foreign media report about the Chinese economy's rising need to be based on innovation with rising living standards and more pervasive development around the country. Internally the idea seems to be recognized as well, for example the Beijing government's advertising campaign seen around town that includes the word in its "Beijing Spirit": patriotism, innovation, inclusiveness, and virtue.