Who doesn’t love to bike? I know I sure do, so recently I helped out some local Minneapolis folks to build the fourth rendition of 30daysofbiking.com, designed by @loganogden.

“30 Days of Biking, whose fourth year begins April 1, has one rule: Bike somewhere every day for 30 days—around the block, 20 miles to work, whatever suits you—then share your adventures online. We advocate daily bicycling because we believe it enriches lives and preserves the Earth.”

The site is running on a PHP framework call Laravel and based on the Skeleton boilerplate for rapid responsive design integration.

On the pledge page, we used Mapbox to plot all the registrants. To do this, we ask for people’s location on sign up, and using some HTML5 geoLocation (with a ZIP code based lookup fallback), we’re able to get the users latitude and longitude. In turn, the map reads from a JSON file and plots everyone!

So get out there and ride your your bike this April. Oh, and don’t forget to signup.

30daysofbiking.com/pledge

A few weeks back, I was working on small site for a client that involved taking screenshots of Vimeo and YouTube videos, cropping them in Photoshop, and finally uploading them to the site. And I though to myself, there’s got to be an easier way to get video thumbnails, particularly from YouTube and Vimeo. So I did a little research looking into their APIs and found that they both provide thumbnails in multiple sizes. Hence sparked the idea for ThumbsAhoy.

TL;DR Easily grab Vimeo and YouTube video thumbnails with a little tool called ThumbsAhoy.

Next part was to start sending API calls to Vimeo and YouTube and start getting some thumbnails back. I’m using Zepto.js in this case and they have a nice $.ajaxJSONP function for working with JSON. Here’s an example Vimeo call.

$.ajaxJSONP({
    url: 'http://vimeo.com/api/v2/video/50061391.json?callback=?',
    dataType: 'json',
    success: function(data) {
        console.log(data);
    }
});

Now, we’ll start by trying to grab the image source from the small thumbnail. In the JSON, that would be the following:

thumbnail_small: "http://b.vimeocdn.com/ts/345/054/345054894_100.jpg"

To see both Vimeo and YouTube responses visit this jsFiddle

From here, we can now start adding our data to the index.html page via Handlebars.js. For example, for the small Vimeo thumbnail, we want to use the thumbnail_small attribute:

<img class="thumb" src="{{thumbnail_small}}"/>

Once compiled through Handlebars, this will load the Vimeo image source into the index.html page placeholder IMG tag. Now, it’s just a matter of repeating the process for the rest of the thumbnails, along with any other information you want to pull from the API.

Another feature I added was a bookmarklet. Once added to your bookmarks bar, if you’re on a Vimeo or YouTube video page, simply click the ThumbsAhoy bookmarklet, and you’ll be redirected to a page with the three thumbnails provided by the respective API, pretty cool!

This is some of my latest work for Prairie vodka. We worked on a new site build from scratch, working off the lovely Skeleton framework. The website is fully responsive, and embraces many HTML5 and CSS3 features. See the whole case study here.

prairievodka.com

Welcome to the new site. Not sure what version this is, but let’s just call it version three. I’ve gone through many sites over the years, using any CMS I could find a use to try. I used to use Cargo Collective, which I liked, but I eventually grew sick of the limitations. I’ve tried Indexhibit, AnchorCMS, Code Igniter, and more, but finally decided to use WordPress since my primary goal is to start writing more frequent smaller sized posts.

I chose WordPress for a couple of reasons:
- It’s strength as a blogging platform
- Highly customizable
- There are a million themes
- Well maintained & documented

The theme I’m using is:

http://wp-svbtle.bootstrapthem.es/

The fonts are served up by Typekit

Quatro and Proxima Nova

One of my favorite things about this theme is that it uses a custom admin interface that’s powered by Markdown. Anyways, here’s the new site. More to come soon. Enjoy.