Something I built is on the internets!

Something I built is live on the internets for all to see, OMG! It isn’t much, but dagnabit it’s true. What I am gleefully kermit flailing over is the website I built, awesomebandname.com. It is a simple site where you can click or tap on a button to be given a random selection from my personally curated list of awesome band names. For the longest time I would hear something and think how it would make a great band name. I started collecting these together into a comprehensive list of awesomeness. At one point I was posting them in a series on an old blog of mine. These posts were always the most enjoyed by my few readers. That blog is no longer with us, but I still kept up the list.

After coming to work at Smartsheet I started keeping them in a sheet as my repository of awesomeness. It is three columns for names, source, and notes. The source column is for if I heard it said by someone else and it wasn’t thought of by me directly. As of this writing there are 183 entries.

I have been teaching myself web development for a couple of years now and I am at that not a beginner, but not quite advanced point where the only advice anyone gives to continue learning is to “just build stuff.” So, this seemed like a great idea for a project. It is really just a simple website rather than a fully fledged app, but it does the thing I built it to do.

Everything is laid out on the page with Bootstrap. The well gets a randomly selected band name placed within it on page load and there is a simple JQuery click event on the button that empties the well, chooses another randomly selected band name, and places that within the well. The random selection is done via a random number selection function that I got from MDN.

The JQuery looks like this:

$(document).ready(function() {
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min)) + min;
}
$('.nameDisplay').append(bandNames[getRandomInt(0,bandNames.length)]);
$('.nameButton').click(function() {
$('.nameDisplay').empty().append(bandNames[getRandomInt(0,bandNames.length)]);
});
});

The entire thing is two documents, one HTML file and a JS file that is the collection of band names in an array called bandNames. Bootstrap and JQuery are brought in by CDNs. I thought about having all of the band names in the html file to make it all work in a single document, but that didn’t seem worth it and I figure it would only clutter things up. I added a tweet button to make sharing easier and a Google ad, just in case this gets tweeted by Wil Wheaton or some other viral internet craziness type event happens. I figure it couldn’t hurt to get a few ad impressions while I’m at it. I did try to install a Facebook share button as well, but that wouldn’t show up on the page. To be honest, I didn’t spend much time troubleshooting why. I will be leaving that for v2 of the project.

My favorite part of the project is how I create the JS file with the array of band names. In the interest of dogfooding I keep all of the band names in a sheet in my Smartsheet account. Originally I was going to copy and paste the names into a JS file and manually make the array, which would have worked, but would have been boring and tedious. Updating it later on would have bothersome too with the possibility that I could miss one or have double entries. To keep this from happening I employed the Smartsheet API. Recently, the Smartsheet API has been given a JavaScript SDK that is written in NodeJS which just so happens to be the thing I am teaching myself and prefer to work within.

I have already been working with the Smartsheet API for fun so that part was pretty straight forward. I ended up writing a script that pulls down the content of the sheet, stringifies all of the entries, and then concatenates all of that into a file called bandnames.js. I was especially happy when I thought of making it write out the “var bandnames = [“ at the front and ending the file with “];” to finish off the array. Now, when I update my sheet I can run this script and I get a new JS file to put up on my server for the website. No worrying about if I missed one or entered one more than once, just a nice brand new JS file.

I wouldn’t say this project is done yet, but I am proud to say it is a good v1. Next, I need to fix the Facebook share button problem and also figure out why my Google ad isn’t displaying on mobile devices. I may also play around with the layout and overall design. My original intent was to use a Bootstrap theme that makes sites look like they were built in Geocities, but I changed my mind. I may still go back to a sillier design approach to go with the humorous intent of the site.

If you feel like checking it out go to awesomebandname.com. Note, that some of the names may contain some adult language and may be a little NSFW. Enjoy!

UPDATED
This project has been moved to Github! The links in the post have been updated. If you want you can find the project here:
http://daveskull81.github.io/awesome-band-names/

Find out more about the move in the post here.

One thought on “Something I built is on the internets!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s