Mr Coles Peter Coles' Personal Blog

I have many little projects that start off as a single HTML, CSS, and JS file. I often want to use Less CSS and maybe I want to use Coffeescript. Ideally this could just work, without any client-side compilation too.

In the pursuit of this ideal, I decided to try out GruntJS, which calls itself “the JavaScript task runner.” After quite a bit of trial and error + googling around the web, I was able to setup a project that auto-compiles .less and .coffee files and builds a production version of the project that combines and minifies static assets.

You can fork the project on github, which is elegantly named static-less-coffeescript-grunt-project.

You can have it watch and compile the less and coffee files under the src directory by running grunt watch or just build everything into the dist directory by running grunt.

The main task that glues things together is grunt-usemin, which let’s you define groupings of CSS and JS files in your HTML, e.g.,

    <!-- build:css css/app.css -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <!-- endbuild -->

Despite the markup looking really nice and neat in HTML, it was a bit confusing to setup, but I ended up figuring out (I think) that it’s supposed to setup a pipeline between useminPrepare and usemin to do all of the concatting and minification work.

I’m sure there could be improvements to how I’ve set it up, but it has been working pretty well for me, and I used it to build the initial version of the Daisy Office Yoga website.

I love to play with audio and I love to build web applications. Also, my new year’s resolution for 2013 is to make everything that I build work in mobile. Unfortunately the HTML5 audio element and mobile web browsers are quite at odds with each other. The biggest problem is the inability to play audio without a user click event, and relatedly the inability to use the autoplay attribute, which happens on both iOS and Android.

Since the SoundCloud HTML5 Widget uses the same features it has the same problems, and only plays if you manually click the play button inside the widget.

After wrestling with this for a while, I finally accepted that I’d have to treat mobile differently, so the new problem was determining if a browser supports autoplay or not. My first approach was to look at navigator.userAgent and apply logic accordingly. However, I later came up with the following code snippet, which tries to immediately play a dataURI audio file, and if it succeeds, it sets the global variable AUTOPLAY to true.

It always feels great to delete code that employs useragent hacks. Here’s the code:

So far it’s working well, and I’m using it on a pet project of mine called PicDinner (on github) to manage whether I immediately play a song or show the user an interface to trigger the play action.