2
September 18, 2013

Fun with Spotify Apps: Skip any song by Pitbull

no-barking

Introducing “No Barking!” my first Spotify App. Instead of having to press next whenever Mr. Worldwide comes on, the App just skips ahead to the next track. I’ll be submitting the application to the Spotify App Finder, but I have a feeling they won’t be as enthused about the whole “skip Pitbull” idea as I am. So, in the meantime, you can download the development bundle and load it on your own computer.

Download on GitHub

You’ll have to turn on “Developer Mode” for your account. Here are the quick directions for getting this app installed in Spotify:

  1. Sign up for a developer account on Spotify
  2. Open Terminal, mkdir ~/Spotify
  3. cd ~/Spotify
  4. git clone git://github.com/brianshaffer/skip-pitbull-on-spotify.git
  5. Download the latest version of Spotify
  6. Open Spotify and type “spotify:app:bad-dog” in the search bar (restart Spotify completely in case it doesn’t find the App at first)

BEWARE: If you get too close it’ll bark at you.

1
November 16, 2011

Load External Content in Tumblr Sidebar

I was creating a theme for a Tumblr blog and wanted to embed a list of upcoming events. The ideal solution would be a Google calendar, but the only way to do that was via an iFrame, which style-wise would just not do. The events needed to be editable by someone who has no HTML knowledge, and fit in as inline content. The creative workaround is to create a sub page in Tumblr, use the jQuery .load function, and specify the div you want to grab content from.

Here’s how you do it:
1. Embed jQuery in your blog

<script type="text/javascript" 
    src="http://www.google.com/jsapi"></script>

2. Set the id of the div that you want to load the external content into, the url of the page you’re grabbing content from, and the id of the div that the content lives in.

<script type="text/javascript">
  google.load("jquery", "1.3");
  google.setOnLoadCallback(function() {
    jQuery(function($) {
      $("#events").load("/events #eventsHere");
    });
  });
</script>

3. Create a new page in tumblr, and wrap the content in the div with the id you specified in line 5 from step two. For me, this is #eventsHere.

Voila! You’ve got your blog fetching the content from your other tumblr page, which can be edited with their friendly WYSWIG editor.

3
November 7, 2011

BigCommerce Customize Compare Products Page

We can’t tweak the snippet used to print out the info on the compare products page. My client wanted to get rid of the “Availability” and “Brand” rows on the compare page of his BigCommerce shop. Since BigComemrce doesn’t even give relevant IDs or class names to their elements, I wrote another snippet of javascript that searches the page for the rows, and hides them. This goes at the end of the HTMLHead panel.

To hide the Availability row:

<script type="text/javascript">
    $(document).ready(function() {
        $("td.CompareFieldName").each(function() {
            if( $(this).text() == 'Availability' ){
            $(this).parent().hide();
            }        
        });
    });
</script>

To remove the Brand row:

<script type="text/javascript">
    $(document).ready(function() {
        $("td.CompareFieldName a").each(function() {
            if( $(this).text() == 'Brand' ){
               $(this).parent().parent().hide();
            }        
        });
    });
</script>

If you need help with customizing any other part of BigCommerce, please reach out, I’m available for hire.

7
October 30, 2011

BigCommerce make “Add to Cart” & “Choose Options” text an image

BigCommerce doesn’t let us touch any of the PHP or HTML that spits out the Add to Cart or Choose Options links. In their support guide, they say to add a background image, but this still means that we need to keep the text, which often times just won’t do. I wrote a quick bit of javascript that goes and finds those Add to Cart and Choose Options instances, and replaces them with an actual image.

<script type="text/javascript">
    $(document).ready(function() {
    	$(".ProductActionAdd a").each(function() {
    		if( $(this).text() == 'Choose Options' ){
    			$(this).html('<img src="/templates/__custom/images/options.png" alt="Choose Options" />');
    		}
    		if( $(this).text() == 'Add To Cart' ){
    			$(this).html('<img src="/templates/_custom/images/add.png" alt="Add to Cart" />');
    		}
    	});
    });
</script>

Hope this helps! If you need further BigCommerce customization (especially with displaying categories the way you want) let me know.

3
January 17, 2011

Crack Masterlock Combinations

Master Lock

This past weekend I created a site that makes it easy to retrieve your forgotten Masterlock combination. If you were to manually attempt every combination, you would have to go through 64,000 combinations. This site uses a known masterlock algorithm to bring the possibilities down to just 80. Not bad?

Check it out:

FindCombination.com

So why did you REALLY do this Brian?

I wanted to learn jQuery. I’ve found that it’s easiest to learn something new when you have an end goal in mind. Your brain figures out how to fill in the cracks and actually apply the information you’re taking in. I highly suggest this method of learning. It’s worked well for me with PHP, MySQL, HTML & CSS, SEO, and Affiliate Marketing.