Custom Development

jQuery Diagonal Grid Fill Algorithm

This week, the team mulled over a compelling code challenge: “How do you fill a grid in diagonal columns starting at the top left corner?”

As a person who legitimately takes pleasure in solving trivial puzzles, I approached the problem head-on. And although easy to solve on paper, the evolution of a grid quickly became tricky to invent for web use. But alas, after a couple Redbulls I came to a solution.

Visualization of jQuery Fade and Fill Diagonal Algorithm

To achieve the diagonal grid fill algorithm, only the height and width of the grid are necessary. Each diagonal column must be filled from top to bottom, left to right. It’s achieved by a loop and decrements to the selected cell by (width-1) and (height-1). The loop continues until the selected cell no longer exists.

Below is a PHP representation of the algorithm.

	$grid = array(array());
	$h = 4;
	$w = 5;
	$count = 1;
	for ($i = 1; $i <= $w+$h; $i++) {
		$index = min($i,$w);
		$row = max(1,($i-($w+1)+2));
		while ($index != 0 && $row <= $h) {
			$grid[$row][$index] = $count;
			echo $row.','.$index.' = '.$count.'<br />';

From here, implementing the code into JavaScript was fairly easy. With only a few simple syntax changes and a new grid from divs, the desired product was created.

<script type="text/javascript">
	function vuurrPixel(arg) {
		var size = 40;
		var h = $('.screen').height() / size;
		var w = $('.screen').width()  / size;
		var count = 1;

		for(i = 1; i <= (w + h); i++) {
			var index = Math.min( i , w );
			var row = Math.max(1,(i - ( w + 1 ) + 2 ) );

			while (index != 0 && row <= h) {
				if (arg == 'show') {
					$('.screen').append('<div style="display: none;" id="block-'+index+'-'+row+'" class="pixel"></div>');
					$('#block-'+index+'-'+row).css('top', (row-1)*size).css('left', (index-1)*size).delay(i*(size*.75)).fadeIn();
					$('.block').animate({opacity:"show"}, 1500);
				}else if (arg == 'hide') {
					$('.block').animate({opacity:"hide"}, 1500);

My problem conquered, I see many uses for it in the future. The diagonal grid fill algorithm can be used in many applications (slides, menus, etc…). Personally, my next feat is to use HTML5 canvases to implement the same algorithm for mobile compatibility.

GitHub Gist

Twimlbin October Updates

After meeting with some good friends from the developer evangelist team at Twilio, we’ve added a couple additional features to Twimlbin at their request.

1. XML Output

The first of these new features will give users the ability to force Twimlbin to render the actual XML rather than the HTML interface when viewing in a browser by appending “/raw” to the end of any Twimlbin URL.

For example, if you visit, you will see the entire Twimlbin rendered as an HTML friendly view. But with the new feature, when you visit, you’ll see the raw XML rendered to your browser.

Here’s another hint: This will work with any interface that accepts XML.

2. UTF-8 Encoded Character Handling

Another of the newly added features gives users the ability to properly validate UTF-8 encoded characters. Previously, if you put special characters (like emoji) in a Twimlbin, it would return back an invalid Twiml. This has been fixed and updated.

Keep an eye open for additional new features coming soon. We’ll also be adding support for all of the new Twiml verbs so things like Queues will properly validate as well!

Why the RFP Process is Broken

Since the end of the KGB, few three letter combinations have evoked as many negative feelings as RFP. No agency I know enjoys going through an RFP process, and most customers dislike the outcome it produces. The process is broken and outdated for both parties. It needs to be replaced.

An RFP is ostensibly implemented in order to protect buyers who aren’t knowledgeable about which vendors are best suited to solve a specific need. Many times, they are required for government “fair bidding” requirements. The goal in these cases is to get an “apples to apples” comparison and remove biases from the procurer.

The reality, however, is a different story.

Here is where the RFP process fails for both parties:

Requesting Firm:

  • Has to predict needs for a project even if they’re not an expert in that field
  • Has to understand the responses to technical specifications and how the firm best fit their needs
  • Has to match up different response language to ensure comparing “apples to apples”
  • Has to go through a lengthy process designed to get a bid that is low priced as well as confident in the firm’s ability to perform up to specifications

Responding Firm:

  • Has to interpret a document of needs with minimal context – often without a chance to have a real conversation with the Requester – which may or may not actually outline the root problems to be solved
  • Has to provide a verbose response to prove their ability and reliability without actually building a working relationship
  • Has to bid low enough to be noticed and hope vendor can then manage the project to that budget or get change requests approved

Once all the above hoops are jumped through, there is still no guarantee of good work or good fit between the vendor and client – WHICH IS THE WHOLE FREAKIN’ POINT OF AN RFP!

So how do you find a trustworthy vendor for your next project? Ask around, make a few calls, and get a feel for who you trust and who you fit with. Ultimately, you have to hope it all works out in the end.

At Vuurr, we have found the only way to be successful in solving problems for a client is to
work from a place of mutual understanding, starting where the pain points are and using our expertise to find solutions. Without taking the time to properly diagnose our client’s needs, we may be wasting each other’s time, money and effort on superficial quick fixes.

So whatever your next project entails, make sure you’re using resources that actually help you. Friends don’t let friends use RFPs.

The API is Coming

If you’ve never heard of an Application Programming Interface, you’re missing out. It powers many of your favorite apps and services that you use every single day. From posting to Facebook, to calling customer service, to seeing who’s talking about what on Twitter, there’s an API for practically everything nowadays.

Put simply, an API is a way to interact with another product or service. Many people might equate it to knocking on your neighbor’s door to ask for information. Here’s what it might look like to ask your neighbor for a cup of sugar, if you were an API:

*Knock Knock*
“Hey! How much sugar do you have?”
“I have 2 cups of sugar.”
“Can I have 1 cup?”
“Sure, here it is.”

Now, imagine all the data you interact with on a daily basis and the number of ways to record and utilize those interactions. Here’s a couple ways you can do it:

  • Pull every Facebook post that involves your girlfriend, find all the pictures that you’re both tagged in, and put them in a slideshow to music; that’s one simple way to make use of an API.
  • Pull every library of congress article.
  • Vuurr recently combined APIs from various startups at Hollywood Hackday where we built TuneClash, the world’s music trivia game with integrated video chat.

That’s just a couple examples. The power of the API will really be unleashed as more and more data becomes available.

In 2012, Barack Obama announced that he’s signing an executive directive to ensure that every government agency has a public facing API, thus making the information available in an effort to increase transparency. The power of this information floating around is sure to change the way we look at government and information in the future.

Here’s a situation you might experience a couple of years from now:

You’re driving down the street and your phone gives directions to the car stereo via its API. While driving, your phone also talks to the “traffic lights’” API and calculates your car’s average speed and its distance to the next light. The API discovers you will reach a red light at the next intersection. So, in order to increase efficiency, the API tells you over the stereo, “You’ll be hitting a red light in 2.1 miles, if you slow down by 3 mph, you can time the next light to be green.”

The limits to what you can do for your business with APIs are only confined by what data is available and by your imagination. The programmers at Vuurr are API specialists and can help your company develop, document, and deploy your API.

Whether you’re turning traffic lights green, or just asking your neighbor how much sugar he has, we’ll help to make sure you’re passing the competition.

How To Create & Apply Retina Graphics To WordPress

Whether you’re a fan of it or not, Apple’s new retina devices have created a new set of opportunities for web-developers to make the internet an even more beautiful place. After spending a few months with an iPad with a retina display (3rd generation) and recently acquiring a MacBook Pro with a retina display, I decided to see how long it would take and how difficult it would be to prepare this site, built on WordPress, to display retina graphics. Turns out, it’s surprisingly easy.

Before diving in to actual tips, tricks, and code, it’s important to understand what the difference is between a standard display and a retina display.

Right now, I’m typing this on a MacBook Pro, 15″ retina display that is 2,880 pixels wide and 1,800 pixels tall, or a total of 5,184,000 pixels. Compare this to a standard 15″ MacBook Pro with 1,296,000 pixels, and you’ve got a retina display that has four pixels to every one single pixel on the standard display, providing the ability to display much crisper text, graphics, video, and animation. Because of this new ratio, we want all retina images on a web page to have four times the number of pixels as the standard image. Long story short, we’re going to take all images in our WordPress theme, posts, and pages, and make them twice as wide and twice as tall (or four times the original size).

To make life a little easier, I used a javascript library called retina.js, which you can find here. The library looks at all the images in their HTML format, generated by your WordPress, and tries to find the same image in the same location on your web server (or CDN, or whatever), but with the string “@2x” added just before the file extension.

For example, if your site’s logo was found at, the retina.js library would automatically try and find[email protected], replace the standard image with that one, and set the size to the pixel height and width of the original image. However, this is only part of the equation – you need to provide the retina.js library with images that are four times the size of the standard. To do this, all images on the site need to have these high resolution duplicates created.

Creating Double Resolution Images
If your site assets are available as vector files (Adobe Illustrator, EPS files, etc.) you can simply scale them to twice the height and width, and then re-save for the web. Bitmaps are trickier. If you have Photoshop files that aren’t smart objects, you’ll need to recreate them at double resolution or they’ll look pixelated. That said, if you have smart objects and lines/vectors in your Photoshop layout, you can go into your Image Size settings and set Pixel Dimensions: Width and Height to 200 percent. (Check out bjango’s excellent article if you’d like to read more about Photoshop workflows when designing for retina displays.)

Most WordPress themes have post and page images along with some background images defined in CSS. We’ll treat these as three separate areas to update our images for retina compatibility in WordPress.

Theme Images in HTML
After creating all of your assets at double resolution, simply upload them to your theme’s images folder. That’s it. Your markup should stay exactly the same, so you’ll still have tags like

<img src="" />

and the retina.js library will attempt to load images from your WordPress theme with the additional @2x string for retina displays.

Uploaded Images in Pages & Posts
Post and page images, whether inserted directly into the body or as a featured image, behave exactly the same way as theme images. The key difference is where you put them. Since post and page images are added to the wp-content/uploads/{year}/{month} folder pertaining to the date uploaded, you need to make sure that all retina images for WordPress posts and pages are put into the exact same folder as the original image otherwise the JavaScript library won’t find the image.

Theme Images in CSS
Properly loading retina images in WordPress via CSS is just slightly more complicated. For now, we’re essentially going to tell the CSS document to look for a cue that says “hey, I’m a retina display!”

Let’s just jump right into the code example – below you’ll find some of the CSS used for the logo on this site. The standard #logo rule simply outlines how to apply our background image. The media query below that translates to “If the pixel ratio is equal to or greater than 2, load this other background image instead, but display it in the same amount of relative pixels as the standard logo (thus providing the 4x retina quality).

#logo a {
	background: url(images/vuurr-logo.png) no-repeat center;
	width: 82px;
	height: 41px;

@media all and (-webkit-min-device-pixel-ratio: 2), all and (-moz-min-device-pixel-ratio: 1.5), all and (min-device-pixel-ratio: 2), all and (-o-min-device-pixel-ratio: 2/1) {
  #logo a {
    background-size: 82px 22px;
    background: url(images/[email protected]) no-repeat center;
    width: 82px;
    height: 41px;

The CSS above should take into account most modern browsers. However, since only Safari supports (and displays) the retina assets at the moment, we’re unable to verify 100% that the Mozilla, Opera, and standard extension will function properly, so your mileage may vary.

A note on the JavaScript
If you analyze the retina.js library, you’ll see that it’s relying on the window.devicePixelRatio JavaScript function. This is just fine, but unfortunately it seems that at the moment Firefox on the desktop fails to recognize it (though, interestingly, Firefox on Android seems to work just fine). The latest Chrome beta supports window.devicePixelRatio as well, but since at the moment the release versions of Chrome and Firefox do not support retina displays, we’re going to leave the retina.js library alone and wait for wider browser support of devicePixelRatio.

Wrapping it up
There isn’t a single formula that will always just work when prepping your WordPress site to support retina displays and images. Following some of the strategies in this guide should get you very close, though. When you have questions or are ready with comments and observations, please feel free to sound off our the comments section.

Introducing “Where I Rank” – Free Objective Rank Tracking

Without data, any online marketing effort is doomed to fail. As marketers, we don’t have the luxury of betting on feelings to perform for us, we need data. Now, you’ll be able to check your rankings objectively, in near real time. Introducing “Where I Rank”. (This software is now deprecated and no longer available. We leave this here for all the memories. Read to bottom of post for replacement).

Rank Tracking Tool

What is it?

Where I Rank is a simple web app that takes a keyword, your domain or internal page link, and then emails you minutes later with a simple ranking report telling you what position that keyword ranks in Google and Bing. There are many different ways you can use this:

  • Performance Bonuses – When you rank a clients site to a certain position, you get a bonus. However, you’ll need a trusted and objective third party like Where I Rank.
  • Personalized Results – Sometimes, it’s difficult for people to believe they actually rank in a certain spot when Google’s “Personalized Results” shows them on the first page and they actually rank page 5.
  • Verify your existing rank tracking system’s ranking results – is it accurate?

What Makes it Different from Others?

  • More Accurate Results – Because of our affiliation with industry leading partners Authority Labs we’re able to provide more accurate results by collecting the individual pages of search results in sets of 10 instead of one block of 100. This allows you to see more accurate rankings for your keywords.
  • Full URLs not just Domain – Most tools only allow you to check the domain itself and not subdomains or full links to a blog post or internal page. That’s useful to determine where individual pages and posts rank for your keywords.
  • Fast Results – Accuracy and speed is the name of the game. If a keyword you’re looking for isn’t immediately available, of which tens of thousands are, you can put in your email and get the result sent within a few minutes. You can also keep your browser window open and we’ll refresh the page when your results are ready!
  • Google AND Bing Results – We have the ability to give you the results for Google and Bing with the same speed and accuracy so why wouldn’t we?

WhereIrank has been phased out and is no longer available. For Keyword Rank Tracking look to AuthorityLabs (who provided whereirank data previously).

Learning HTML & CSS with Twitter’s Bootstrap CSS Framework

Twitter Bootstrap CSS Framework

We recently brought on a new employee who expressed interest in beginning front-end development, but only had minimal knowledge of HTML and CSS. They’d been frustrated with the standard tutorials that attempted to explain each single tag, and weren’t interested in continuing. On a whim (but apparently good guess) I suggested they continue working with HTML but immediately include Twitter’s Bootstrap CSS Framework while learning and developing.

The result was astounding. In three weeks we turned a college student into a junior front-end developer.

We found that by simply having something look nice and working from an incredible example page with great documentation, the learning process went much smoother, faster, and resulted in higher-quality work. Now after just three weeks we have a new junior front-end developer who now does all of our prototyping and initial front-end builds with the expected level of incredible Vuurr quality.

Where to Start Learning

To get started with Bootstrap, use their guide here:

Sitepoint has a pretty good walkthrough of Bootstrap 3 as well:

Call Tracking with Twilio & Google Analytics using Twimlbin

Nearly a year ago, I was working on a new feature for an app powered by Twilio when I realized that it would be significantly easier to get started with Twilio’s TwiML if hosting an XML file could be removed from the equation. Several weeks ago, Twimlbin was born. One of the features we needed to implement quickly was the ability to track calls both as a pageview and an event in Google Analytics. After building this feature, we found it more and more useful for many other call tracking instances. With this feature and the TwiML <Redirect> secondary verb, it’s possible to use Twimlbin as a basic analytics proxy – something we find incredibly useful.

How to setup Call Tracking

Simply create a new Twimlbin and set it to redirect to either a number directly or your script or you can clone one of the example bins we’ve provided.

For a Number: Clone this bin and replace the number with your own.


For a Script: Clone this bin and replace the URL with your app’s location.


Once you’ve setup the Twimlbin, simply put in your Google Analytics ID (near the bottom of the page) and you’re ready to go. You can even watch calls in real-time with the new Google Realtime Analytics feature.

twimlbin analytics calltracking

We hope you enjoy Twimlbin as much as we do. Tweet @TwimlBin if you have questions!