Every Nth Item in Handlebars

You’re all jazzed and using your favourite CSS grid but you’ve run into a wall in your Handlebars template. You’ve got a template that outputs a list of books. The problem is after every third book you need to start a new row. You’re stuck. Well… look no further I’ve got just the helper for you, grouped_each. It’s part helper, part convention. Stronger than mere mortal men.

Here’s how it works. It has two parameters. The first is the number items in each group and the second is an array of items. That’s the helper part. Now here’s the convention. Inside the grouped_each block you use the built-in each helper to iterate over this. For example look at the following Handlebars template.

And finally here’s the magic sauce that is the helper.

Integrate Handlebars with Marionette

If you need to use Handlebars with Marionette then today is your luck day! I’ve got just what your looking for. This first attempts to load pre-compiled templates, then by selector, and finally via XHR.

To customize the file extension and location of your templates when loading via XHR just override Marionette.Handlebars

Search using Geolocation data in MySQL

One of the many things brought to the forefront by HTML5 is Geolocation. It’s easy enough to get someones geolocation data using HTML5 but what do you do with it once you have it? Ideally you’d like to search through some sort of database be it store locations, real estate listings or what have your. This is where most people start to get tripped up.

There’s lots of different techniques for achieving this unfortunately they don’t seem to ever be explained very well as they relate to MySQL. Until now… dun dun dun dahhh.

The two most common technique are the Haversine formula and the Spherical Law of Cosines. The method I’ve chosen to use in my example is the Spherical Law of Cosines. The formula is a bit short and uses fewer mathematical functions.

The example is comprised of two parts. The first is the Spherical Law of Cosines. The second part is defining a search radius. Defining this search radius will significantly narrow the scope of our search. This is a good thing.

Alright enough chitchat. Here’s the sample MySQL query. It’s built in PHP below but can easily be converted to your language of preference.

Note: I’m Canadian so the example below is done using kilometers. If you want miles you’ll need to multiple $earths_radius and $surface_distance_coeffient by 0.6214 to convert them to miles.

If your interested in digging deeper into the theory and math behind the Spherical Law of Cosines or the Haversine formula checkout the Movable Type Scrips site they have tons of background information.

Passpack + Chrome = Frustration

Everyday I log into Passpack and leave it open all day. So here’s the problem after having Passpack open for a while I get the following message (it is extremely annoying as it interupts whatever else your up to on the net). This only happens for me in Chrome. It works like butter in Firefox and I can’t speak for IE.

Passpack History Problem

The initial trigger for the message seems to be random. But after it initial message is seems to come back around every 3 minutes. So I did some digging. After poking around in the source I discovered that they’re using an older version of Tako Sano’s jQuery history plugin.

So I added some code to the historyCallback do some logging so I could get a better feel for what was going on.

After letting this run for a while I started to see a pattern. Here’s an excerpt of the results.

  • hh: 8, m: 7, delta: 209901 (~3.4 minutes)
  • hh: 8, m: 7, delta: 200888 (~3.3 minutes)
  • hh: 8, m: 7, delta: 190944 (~3.2 minutes)
  • hh: 8, m: 7, delta: 183514 (~3.0 minutes)
  • hh: 8, m: 7, delta: 197517 (~3.3 minutes)

For webkit (Chrome/Safari) based browsers the jQuery history plugin manually creates a stack to keep track of the history. So this is where I believe we are encountering the problem. If you look at line 4426 you can see that we create a history with a stack length of 9.

But on line 4419 we are working with a stack with a length of 8.

var m = $.browser.netscape ? 2 : $.browser.msie ? 3 : 7;

Shouldn’t this read as follows?

var m = $.browser.netscape ? 2 : $.browser.msie ? 4 : 8;