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.
.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
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
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.
Introducing markdown.css, which makes regular HTML look like markdown. Since everyone is using markdown to create HTML, I thought it’d be fun to write some CSS that makes HTML look like markdown. read full post…
Some thoughts on the “One-line browser notepage” and an improved bookmark. read full post…
Settings to configure your copy of Photoshop for web development. read full post…