Super Responsive Minesweeper

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.

Pinterest-Style Staggered Masonry List in Android

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.

Getting a Yeoman App Working on a New Machine after Cloning

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).

Markdown-HTML-Form: The Easiest Way to Write Online Content

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.

A Starting Point for Meteor and Backbone Apps

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.

A Few of my jQuery Plugins on jquery.com

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.

Getting yo to Do What yeoman Did

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.

Yeoman, Requirejs, jQuery Mobile, Backbone, and a Lot of Config Problems

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 in China and a Day in a Beijing Starbucks

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.

Introducing Multitasq

I’ve been working on this open source side project of mine for a bit, and I just submitted it to Mozilla Demo Studio, so I thought I’d make a quick post about it here. I wanted to take a tried and true design, the simple notebook-paper-stuck-on-your-fridge task list that you’ve probably seen other apps replicate, and completely reimagine it using the web and HTML5. The result still isn’t much more than a concept, but I think it’s a great example of something you can do with the web.