How I use the web to keep organized

Springpad
This is my new favorite bookmarking and note taking tool.  I used to rely heavily on Evernote to keep notes and thoughts on various topics, as well as Google Docs for some other personal docs.  Springpad has a clever thumbnail layout, the ability to attach images and links to a single note, and a nice Chrome extension.

Minus
This site is pretty fantastic.  You can upload up to 5 GB worth of pictures.  I really like how they let you organize albums and slideshows.

Box
I haven't completely given up using Dropbox but Box.com is giving me a big case to do so.  The interface is very nice and the 5 GB limit by default is better than Dropbox's 2 GB.

BitBucket
Special thanks to Clark Sell for selling me on BitBucket (like what I did there?).  I had heard about BitBucket before but never realized they were giving away free unlimited private repositories.  At one point in time they only supported Mercurial but they now support Git as well.

AppHarbor
JC Grubbs told me about AppHarbor right before one of his talks on MongoDB.  A Heroku alternative for .Net developers, AppHarbor makes this an amazing time to be a developer if you want to vet out ideas for web apps.  Something I've been doing a lot of lately.

TeamBox
Free basic project management and task tracking.  I tried looking at Asana as well but the lack of time tracking was a deal breaker.

Blogger
Unless I've copied and pasted this post blindly, you're reading this post on Blogger.  I've played with Tumblr, Posterous, Weebly, LiveJournal, and Wordpress.  Blogger is what I've decided to settle with (for now) when it comes to technical blogging.

Posterous
For non-technical blogging I prefer Posterous.  They've done a lot of site upgrades recently and added some cool new features.  I especially like how their layouts look if you like your blogs to have a lot of pictures.  This made Posterous ideal for posts about my family.

ReapCast
There are a plethora of free blogs on the web that I'm interested in.  I wrote this site to be able to track the ones I want to listen to as well as have DVR functionality to manage that last listening point I was at for each one, 30 second skip, 7 second rewind, slider time shifting, and synchronizing with my iPhone (which has all the same controls).  Also included are bookmarks with note-taking.  Coming soon will be different playback speeds.

Developer tools

JsFiddle - Quick and dirty way to test out some CSS and/or javascript.
Cloud9IDE - Web-based editor for javascript and Nodejs.


Chrome extensions

WhatFont - Hover over text and see what font it is.
EyeDropper - Hover over colors on a page to see the hex and rgb coloring.
SmoothGestures - I use the Back button a lot.  With this I can hold the right mouse button and drag left to jump back in history.
Springpad Extension - Read my comments about Springpad above.
Web Developer - If you only install one extension, this should be the one.
Speed Dial 2 - Gives thumbnail previews of your favorites.  For $1.99 one time you can sync your bookmarks across all your instances of Chrome.

Deploying a Titanium app: Part 1

I'm going to make some assumptions here that 1) you already are a registered Apple developer, 2) you've registered your device on the developer portal, and 3) you have both Titanium and XCode properly setup.  Part 1 of this 2 part blog series will focus on what you'll need to do in the Developer Portal on Apple's website.

Login to iOS Dev Center at http://developer.apple.com/devcenter/ios/index.action.

Go to the iOS Provisioning Portal

Go to the App IDs subtab and click the New App ID button

Setup your app and make sure the package name exactly matches what you specified in Titanium

Go to the Provisioning Profile subtab and click the New Profile button

Check a Certificate, select the appropriate App ID, and click the devices that you are going to deploy to.

On the next screen you'll have to wait for the profile to become Active (should take less than 30 seconds).  Then click download to save the .mobileprovision file to your machine.

This is all you'll need to do on the iOS Dev Center.

The Mighty In'N'Out 5x5

During one of my many trips to Cali last year, I paid homage to In'N'Out burger to take down a 4x4 burger. First off, in case you're unaware, In'N'Out is practically a religion for many people on the west coast. You can start a holy war by stating In'N'Out burger is NOT the best burger you've had in the state. Their burgers actually are very tasty, but it's the extra stuff that you can add to it that makes it stand out.

I usually order a double double, animal style, extra toast, with a whole grilled onion. Quite a tall order for a single sandwich (you can customize your fries as well if you know how). Sadly we'll probably never get to see one here in the midwest.

A 4x4 means that there are 4 meat patties and 4 slices of cheese.  During that time I happily scarfed it down and still had room to tuck away an order of fries.  This year I had to 1up myself by tackling a 5x5.

My quest started by pulling in behind a sea of cars in the drive-thru of the only In'N'Out in Salinas (and yes it's always this packed).  Once I get to the ordering guy and tell him I want a 5x5 he stops and tells me that they can't allow me to order it.  WTF????  "This sandwich is 80% of the reason I flew here from Chicago" I tell him.  Why can't I order one?  He tries to make some excuse about how some people are going nuts with it by ordering 20x20's.  And the problem with that is ????

I finally talk him into selling it to me, they rang it up as a 4x4 and put an extra patty on there that I actually had to put into the burger myself.

After a mixup of who I was meeting up and where we were eating, I finally got to sit inside with a bunch of my cousins and start eating the burger (almost 15 minutes after it was handed to me). After the first few bites I knew that I was biting off more than I could chew (womp womp womp womp). Some of the patties were undercooked and were pink, not a good sign for such thin patties.

Some of my cousins were taking pictures of the effort while others were explaining to other patrons that so happened to be watching what was going on, wondering what it was that I was holding in my hands.  One of the younger cousins was staring in disbelief with her mouth open.

The burger stopped tasting good a while ago.  The amount of cold, undercooked meat and somehow still sweaty cheese really started playing tricks on my mind. I literally started gagging as I was eating.  It became a pride thing at that point as I tried to man up mentally and power through it.  The last 5 bites made my legs go numb and I can truly say that now I know what despair tastes like.  Alas, I had let my ancestors down and was not able to slay the mighty beast, leaving off somewhere between 1/3 and 1/4 of the burger.

Was it a valiant effort?  Maybe, maybe not.  I do know that I will be just fine if I never have to eat In'N'Out burger again.... at least not until my next trip out west ;)

Getting started with Jasmine in Visual Studio

You've probably heard good things about the Javascript testing framework known as Jasmine. Hopefully you've given it a test run over at http://try-jasmine.heroku.com. It is a quick way to unit test a small class or set of functions and see the red-light/green-light statuses.

Start by downloading the standalone Jasmine at https://github.com/pivotal/jasmine/wiki. Copy the jasmine folder to your web project. As of version 1.1.0 the contents are jasmine.css, jasmine.js, and jasmine-html.js (and a .png icon). For some reason there was no specrunner.htm file as indicated by the instructions.

The next step is to create the specrunner.htm file mentioned above. This will be the single file used to run a suite of all tests for the project. I created a file named **specrunner.htm** at the root of the project.

In the HEAD section you'll want to link the main jasmine javascript and css files. After that you'll want to link your javascript code that will be tested. The third thing to link will be your javascript test files or spec files as jasmine refers to them as. The final step needed for you page is to put script tags in the BODY section to execute the test runner. Below is a sample completed html page with all needed elements that tests one javascript file and has one spec file.

<!DOCTYPE html>
<html>
<head>
    <title>Jasmine Tests</title>
    
    <!-- Files required for Jasmine -->
    <link href="Content/scripts/jasmine-1.1.0/jasmine.css" rel="stylesheet"/>
    <script type="text/javascript" src="Content/scripts/jasmine-1.1.0/jasmine.js"></script>
    <script type="text/javascript" src="Content/scripts/jasmine-1.1.0/jasmine-html.js"></script>
    
    <!-- Javascript files to be tested -->
    <script type="text/javascript" src="Content/scripts/numberConverter.js"></script>

    <!-- Spec files holding the tests -->
    <script type="text/javascript" src="Content/scripts/tests/numberConverterSpecs.js"></script>

</head>
<body>

    <!-- Code to run the tests and show results -->
    <script type="text/javascript">
        jasmine.getEnv().addReporter(new jasmine.TrivialReporter());
        jasmine.getEnv().execute();
    </script>

</body>
</html>

Hopefully you're using classes in your javascript, if not then WTF are you thinking? Here is a simple js class that we'll write tests against:

var hero = (function() {
  var shieldMaterial = 'iron';
  
  return {
    blockFlames: function() {
      if (shieldMaterial != 'iron')
        return 'dead';
      else
        return 'safe';
    },
    
    dropShield: function() {
      shieldMaterial = '';
    }
  };
}());

So what does code inside a spec file look like?

describe('hero',function(){
  beforeEach(function() {
    this.addMatchers({
      toBeSafe: function() {
        return this.actual === 'safe';
      },
      toBeDead: function() {
        return this.actual === 'dead';
      }
    });
  });
  it('can fight dragon',function(){
    expect(hero.blockFlames()).toBeSafe();
  });
  it('dies after dropping shield',function(){
    expect(hero.blockFlames()).toBeSafe();
    hero.dropShield();
    expect(hero.blockFlames()).toBeDead();
  });
});

Lines 2 - 10 of the spec files are used to define two new comparison functions: toBeSafe and toBeDead in relation to our hero. Defining those two methods at the beginning allows them to be used throughout the rest of the spec file and can make our tests have more meaning within the context of our domain.

If we launch our htm page in a browser we should see something like this:

If we change our hero's shield material to 'wood' in Line 2 and refresh the page, the results will turn into this:

This is a quick way to start using Jasmine in your projects. If you want to really integrate your javascript testing into Visual Studio such that you can view the results in a test runner window, take a look at JsTestDriver and the Jasmine adapter for it.

Copying MongoDB data from your machine to the cloud

For this example I’ll be using MongoHQ as the cloud host. I prefer MongoHQ over MongoLab because the web interface actually lets you edit and manage your data, which is great for making quick small tweaks.

Step 1 - Create a new database in MongoHQ
I start with a Free 16 MB collection. The next page you’re taken to shows you the address for the database and will look something like staff.mongohq.com:10023/DbName

Step 2 - Create a Database User
Click on the Database Users tab and add a user. Leave the Read Only boxed unchecked.

Step 3 - Prep your local data for transfer
On your machine open a command prompt and navigate to your Mongo bin directory or wherever the mongo.exe file is located.
Type mongodump -d DatabaseName where DatabaseName is the actual name of your database 
There will be a new folder in the directory named dump and in there another folder named after your database.

Step 4 - Transfer the data to the cloud
Type mongorestore -h staff.mongohq.com:10023 -d DatabaseName -u admin -p password C:\Mongo\dump\DatabaseName (Make sure to substitute the appropriate values).
Verify on MongoHQ’s collections tab that the data was transferred successfully.

Preparing for my first Lunch and Learn

This was an earlier post from September when I was still posting to Tumblr.

This Thursday I present my first lunch and learn at Geneca.  It's titled "Getting your web microservice onto the cloud."  I initially wanted to title it "Creating a web microservice for practically free" but the focus was intended to be more around the cloud aspect of it rather than the entrepreneurial side of it.  Nonetheless the spirit of the talk is very much so fitted towards the entrepreneur.

The first 5 minutes gives a quick look at what "cloud" computing means to me, what the 3 different setups are (IaaS, PaaS, and SaaS), and then a little bit about EC2 and Azure.  What I'm really trying to do in the part is give definition to some cloud terms and maybe talk a little about what EC2 and Azure look like physically.

From there the talk will shift into the tools I used to get a website up and running using all free tools starting with an IDE, a DVCS, a hosting account, and a db host.  I'll be highlighting the site wizard in WebMatrix for a basic shell site.  Then I'll save the code to BitBucket for source control using TortoiseHg in windows explorer and Mercurial (it helps having learned Git first to understand the process flow as they are practically identical).  Then I'll be pushing the site to AppHarbor and talk about continuous deployment.  I'm still thinking of an easy way to highlight linking MongoHQ but I'd have to switch to one of my existing web apps to show this in a meaningful capacity.

My second Titanium app: a movie soundboard app

My goal with this next app is to build something that I would actually use, a soundboard app with a few of my favorite movie quotes. I wanted to learn how to play media and also to start getting HTML 5 in the phone working as well so I used a tab grouping with two tabs.

Ti.UI.setBackgroundColor('#000');

// Windows
var win1 = Ti.UI.createWindow({ 
    title:'Anchorman',
    backgroundColor:'#fff',
    url: "/windows/anchorman.js"
});
var win2 = Ti.UI.createWindow({ 
    title:'Other',
    backgroundColor:'#fff'
});

var webview = Titanium.UI.createWebView({url:'/web/other.htm'});
win2.add(webview);

// Tabs
var tabAnchorman = Titanium.UI.createTab({
 id:'tabAnchorman',
 icon: 'KS_nav_ui.png',
 window:win1,
 title: 'Anchorman Quotes'
});
var tabOther = Titanium.UI.createTab({
 id:'tabOther',
 icon: 'KS_nav_views.png',
 window:win2,
 title: 'Other Quotes'
});
var tabGroup = Titanium.UI.createTabGroup({id:'tabGroup1'});
tabGroup.addTab(tabAnchorman);
tabGroup.addTab(tabOther);

tabGroup.open();

The first tab is a normal tableview with entries for Anchorman quotes.

Here is the anchorman list page:

var win = Ti.UI.currentWindow;

// Table view for showing the list of data
var tableview = Ti.UI.createTableView({ top: 0, backgroundColor: 'white' });
tableview.addEventListener('click', function(e)
{
    var sound = Ti.Media.createSound();
 sound.url = '../mp3/' + e.rowData.className + '.mp3';
 sound.play();
});

win.add(tableview);
refreshData();

function refreshData() {
 var data = [];
 data[data.length] = Ti.UI.createTableViewRow({title:'Cannonball',className:'a_cannonball'});
 data[data.length] = Ti.UI.createTableViewRow({title:'Having Fun',className:'a_havingfun'});
 data[data.length] = Ti.UI.createTableViewRow({title:'Real Panther',className:'a_realpanther'});
 data[data.length] = Ti.UI.createTableViewRow({title:'Stings Nostrils',className:'a_stingsnostrils'});
 data[data.length] = Ti.UI.createTableViewRow({title:'Very Important',className:'a_veryimportant'});
 data[data.length] = Ti.UI.createTableViewRow({title:'Every Time',className:'a_everytime'});
 data[data.length] = Ti.UI.createTableViewRow({title:'I Wanna Be On You',className:'a_iwannabeonyou'});
 data[data.length] = Ti.UI.createTableViewRow({title:'No Pants Dance',className:'a_nopantsdance'});
 data[data.length] = Ti.UI.createTableViewRow({title:'Pirate Hooker',className:'a_piratehooker'});
 data[data.length] = Ti.UI.createTableViewRow({title:'Storming Your Castle',className:'a_stormingyour'});
 data[data.length] = Ti.UI.createTableViewRow({title:'Whammy',className:'a_whammy'});
 data[data.length] = Ti.UI.createTableViewRow({title:'Yelling About',className:'a_yellingabout'});
 
 tableview.data = data;
}

Clicking an entry will create a sound object which takes a url and plays the sound.

Here is the html page for the second tab which has links for other movie quotes: I don't consider this app finished by any stretch but it addresses the two goals I had set out with playing media and incorporating an HTML 5 page in the app. And this app was completed in a half hour after work meetup.