Esplin & Co.

The official Firebase docs are very well done:

https://www.firebase.com/docs/web/libraries/angular/api.html#angularfire-users-and-authentication-authwithoauthpopupprovider-options

The gist is that the new angularfire.js gives you three services to inject, $firebaseObject, $firebaseArray and $firebaseAuth.

Inject $firebaseAuth into your highest-level controller, or make a new controller to handle auth—that’s what I do—and create an authObject like so:

var ref = new Firebase("https://.firebaseio.com");   $scope.authObj = $firebaseAuth(ref);

... then call the authObejct’s $authWithOAuthToken method, passing in “facebook” as the first argument:

$scope.authObj.$authWithOAuthToken("facebook");

Next, listen to auth changes using $onAuth:

$scope.authObj.$onAuth(function(authData) {  if (authData) {    console.log("Logged in as:", authData.uid);  } else {    console.log("Logged out");  }});

There’s not much more to it than that. I mean, you do have to configure everything on your Firebase console, but the docs will talk you through that. 

Firebase is like a superpower for front-end developers, but like any superpower, it comes with certain limitations. For example, Firebase does not have any built in way to relate objects together. Firebase also does not have an easy way to retrieve shallow copies of your objects. These limitations may seem problematic at first, but that's only because your data structure needs a little refactoring.

Firebase Loves Shallow Data

Keep your Firebase data structures shallow to maintain performance. Here's a quick example of how not to structure your data.

Nested Data (often bad)

{ "users": { "123456789": { "username": "Chris", "thumbnail": "someBase64encodedthumbnail", "messagesSent": { "ABCDEFG": { "text": "Hey guys!" }, "HIJKLMNOP": { "text": "Second message!" } } } } }

Every time that you pull the "123456789" user object you will get that base64 encoded thumbnail image as well as all of the messagesSent objects... which could end up being a lot of messages.

Imagine a process where you have to loop through a few thousand users to pull their usernames. That means that you'll have to pull all of the thumbnails and all of the sent messages for thousands of users. It's a performance nightmare and will run up your Firebase usage stats unnecessarily. Do not do this.

Try fragmenting your data with shared keys instead.

Fragmented Data (usually good)

{ "users": { "123456789": { "username": "Chris" } }, "userObjects": { "thumbnails": { "123456789": "someBase64encodedthumbnail" }, "sentMessages": { "123456789": { "ABCDEFG": { "text": "Hey guys!" }, "HIJKLMNOP": { "text": "Second message!" } } } } }

Notice how the user key "123456789" is repeated at userObjects.thumbnails.123456789 and userObjects.sentMessages.123456789???

This data structure uses a single key to reference the user as well as any userObjects that may belong to that user. This is great for maintaining shallow data structures. You can now loop through users, thumbnails and sentMessages separately, pulling shallow copies of all three objects. Of course, you'll need to make three separate queries to pull together an entire user... but that's a cheap operation that you won't have to do all of the time. If you find yourself building out objects too often, consider duplicating data across objects or just nest a bit more.

This data structure also makes for simple security rules.

Wildcard Security Rules

{ "rules": { "$quiverCMS": { "users": { ".read": "data.parent().child('acl').child(auth.uid).child('isAdmin').val() == true", ".write": "data.parent().child('acl').child(auth.uid).child('isAdmin').val() == true" }, "userObjects": { "$objectName": { ".read": "root.child($quiverCMS).child('acl').child(auth.uid).child('isAdmin').val() == true", ".write": "root.child($quiverCMS).child('acl').child(auth.uid).child('isAdmin').val() == true", "$user": { ".read": "$user == root.child($quiverCMS).child('acl').child(auth.uid).child('userKey').val() || root.child($quiverCMS).child('acl').child(auth.uid).child('isAdmin').val() == true", ".write": "$user == root.child($quiverCMS).child('acl').child(auth.uid).child('userKey').val() || root.child($quiverCMS).child('acl').child(auth.uid).child('isAdmin').val() == true" } } } } } }

Don't get distracted by my super-long security rules... that's an artifact of how I like to use an ACL to handle multiple login methods. Pay attention to "$objectName" and "$user". Those two wildcard rules will cover any userObjects that I create. I don't need to maintain separate rules for userObjects.thumbnails or userObjects.sentMessages. They all get handled by "$objectName" and "$user".

Don't Fear Duplicate Data

This little referencing trick is great... until it's not. There comes a time in any project where composing objects becomes ridiculous and you start to wonder if you should duplicate your data. It's ok to duplicate. It's sometimes referred to as a data "fan out"or "fanning out your data"... and it's completely natural.

Consider the following example.

{ "users": { "123456789": { "username": "Chris" }, "987654321": { "username": "Frank" } }, "userObjects": { "thumbnails": { "123456789": "someBase64encodedthumbnail" }, "sentMessages": { "123456789": { "ABCDEFG": { "text": "Hi @puf!" }, "HIJKLMNOP": { "text": "Has your local Android received sufficient hugs?" } }, "987654321": { "QRSTUV": { "text": "Hey Chris!" }, "WXYZ": { "text": "You know that all Androids in the building get daily hugs." } }, }, "receivedMessages": { "123456789": { "QRSTUV": { "text": "Hey Chris!" }, "WXYZ": { "text": "You know that all Androids in the building get daily hugs." } }, "987654321": { "ABCDEFG": { "text": "Hi @puf!" }, "HIJKLMNOP": { "text": "Has your local Android received sufficient hugs?" } } } } }

You'll need a server process to do this, but it's not a big deal. Every time Chris sends a message to Frank, Chris's client will add the message to his outgoing queue at userObjects.sentMessages.123456789. Your server will listen for additions to this queue and duplicate the message under Frank's received messages queue at userObjects.receivedMessages.987654321.

This is simple for basic reads and writes. Editing or deleting is a bit trickier, but it's worth the extra processing. I promise.

The beauty of this system is that Chris can instantly retrieve his sent and received messages with zero joins. This data structure scales very well across reads and less well across writes... but how often do you write in a chat app?

If you find yourself with high write volume and lower reads, try running your fan out process on read only, or stick with joins using the shared key method I described above.

Questions?

Previous

Check out my Angular quick-start installation in the previous article in this series, Single-Page App Architecture: Angular Install

A Time to Deploy

I like to get my deploy process worked out early. It can get kinda hairy if you wait to the end to figure out how you're going to deploy your application. It's nice to be able to test your deploy process early and often, and you'll be incentivized to get the deploy as automated as possible.

Get an AWS Account

Go sign up for AWS, activate S3 on your account and get your access key Id and secret access key.

Now append the following to ~/.bash_profile.

export AWS_ACCESS_KEY_ID="MYACCESSKEYID" export AWS_SECRET_ACCESS_KEY="MYSECRETACCESSKEY"

Now type source ~/.bash_profile to reload your environment. If you want to make sure that you've got AWS_ACCESS_KEY_ID and AWS_SECRET_ACCESS_KEY as environment variables, try echo $AWS_ACCESS_KEY_ID $AWS_SECRET_ACCESS_KEY in your terminal. It should read out your ID and secret key.

Set up an S3 Bucket

Log into Amazon's AWS management console and create an S3 bucket. I named mine invoice.quiver.is. Edit the bucket's properties to enable static web hosting. Set the index document to index.html and the error document to 404.html. Notice the Endpoint link under the Static Web Hosting accordion. That's the address for your new bucket.

Optionally set up a CNAME record with your DNS provider to point to you bucket. My CNAME record redirects invoice.quiver.is to invoice.quiver.is.s3-website-us-east-1.amazonaws.com. From now on I'll refer to this bucket as invoice.quiver.is.

Configure Grunt-S3

We're going to install grunt-s3 from our quiver-invoice directory.

npm install --save grunt-s3

Piece of cake. Now let's add to our Gruntfile and deploy this sucker.

Add the following attribute to the end of the Grunt's initConfig object.

s3: { options: { bucket: 'invoice.quiver.is', access: 'public-read', headers: { // Two Year cache policy (1000 * 60 * 60 * 24 * 730) "Cache-Control": "max-age=630720000, public", "Expires": new Date(Date.now() + 63072000000).toUTCString() } }, dev: { upload: [ { src: 'dist/*', dest: '/' }, { src: 'dist/scripts/*', dest: '/scripts/' }, { src: 'dist/styles/*', dest: '/styles/' }, { src: 'dist/views/*', dest: '/views/' } ] } }

Then register a new task under the existing tasks.

grunt.registerTask('deploy', [ 'build', 's3' ]);

Now hit the terminal again and call grunt deploy. It will fire off the new task that you just created and upload your stuff to S3. Check your S3 bucket to make sure that your deploy went as planned. You should get Angular's stock welcome screen.

Create an Express REST Server

We're going to use Firebase for our data storage, but Firebase is not an appropriate place to store environment variables and the secret keys that we'll need to complete Stripe transactions. We'll need a teensy weensy REST server for that purpose, and I like to write my teensy weensy REST servers in Express.

For simplicities sake, I'm going to write the Express server alongside my Angular application in a file that I will name, appropriately, invoice-server.js. This simplifies the Git situation and just makes life a bit easier.

Let's get to it.

Install Dependencies

npm install --save express newrelic

Write invoice-server.js

var express = require('express'), app = express(); app.get('*', function (req, res) { res.json({res: 'Hello World.'}); }); app.listen(9600);

Test it out by running node invoice-server.js and visiting localhost:9600.

Treat Yourself to a VPS

My favorite VPS provider is Digital Ocean, so I'm going to demonstrate the quick and easy process of deploying this script to a $5/month droplet.

Make sure that you've already set up SSH keys for your local machine and make sure that your public key—usually named id_rsa— is registered with Digital Ocean. If you've already registered your key, then you can add your key automatically on droplet creation.

We'll be administering the droplet via SSH, so this is not optional.

Once you've got your keys, create your droplet. I'm naming my droplet "quiver-invoice". Under "Select Image", click the Applications tab and select MEAN on Ubuntu 12.04.3. Installing Mongo and Node on Ubuntu is quite easy, but why do the extra work? Make sure to select your recently-added SSH key under "Add optional SSH keys". Now create your droplet!

Set up SSH

Now that you have your droplet, note the IP address at the top of the droplet page. You'll need to add this for your SSH config.

Configure your SSH config by creating a file at ~/.ssh/config. I use VIM for this kind of thing and just type vim ~/.ssh/config.

Add the following to your config... but make sure to substitute your IP for mine, and if you went a little nuts and changed the name of id_rsa... then update that too.

host invoice User root HostName 107.170.6.212 IdentityFile ~/.ssh/id_rsa Port 22

Save the file and type ssh invoice to gain shell access to your new droplet. You should see a new terminal command prompt. This command prompt is your droplet's terminal, and you're logged in as root, so beware! This would be a good time to create an unprivileged user and modify your ssh config for that new user, but these are exercises that I will leave to the reader. Let's charge ahead as root, because we need to run our node processes as root anyway.

Deploy your Express Server

Now would actually be a good time to commit the work that you've done, so open up a new terminal tab, make sure you're in your application's root folder, in my case that's quiver-invoice. Then commit your changes to git and push them up to your GitHub repo. Check out some git quickstart instructions if you need help with this.

Once you've pushed your changes, let's clone your repo to your new droplet. Switch back to your droplet SSH session or recreate it using ssh invoice. Type the following.

mkdir Development cd Development git config --global credential.helper "cache --timeout=604800" git clone https://github.com/deltaepsilon/quiver-invoice.git cd quiver-invoice npm install

I like to use GitHub's https repo on my droplets instead of the ssh version. It seems to avoid some connectivity issues. Notice how I increased my credential timeout using git config. That's super helpful when using GitHub's https repos. You get to avoid typing out your GitHub username and password every time you pull.

Use NGINX to Create a Reverse Proxy

The HTTP traffic that drives the web crosses over port 80. But each server has only one port 80. HTTPS traffic uses port 443. So that's one HTTP and one HTTPS port per server. Notice how express-server.js listens to port 9600? It's not listening to port 80 because I don't want it to hog port 80.

It's super convenient to run lots of micro services off of a single VPS instance, so we'll set up a reverse proxy using NGINX.

First, install nginx, then create a config file to handle port 80 traffic. Don't forget to use your own values instead of mine.

sudo apt-get install nginx vim /etc/nginx/conf.d/quiver.is.conf

quiver.is.conf

server { listen 80; server_name rest.quiver.is; location / { proxy_pass http://localhost:9600; proxy_http_version 1.1; proxy_set_header Upgrade $http_upgrade; proxy_set_header Connection 'upgrade'; proxy_set_header Host $host; proxy_cache_bypass $http_upgrade; } }

I added a CNAME that redirect rest.quiver.is to my droplet's IP address, so my server name is rest.quiver.is. You'll want to do the same if you intend to host multiple services on your droplet and use nginx to proxy those domains out to the appropriate ports.

Let's enable multiple domains for each node process. Edit /etc/nginx/nginx.conf and add the following to the HTTP section.

## # Custom Settings ## server_names_hash_bucket_size 64;

Now let's fire up nginx. See this handy nginx tutorial if you're having trouble.

sudo service nginx start

Daemonizing Node

There are a few ways to keep a Node process running. Forever is quite popular, but I'm interested in the bleeding edge, so I'm going to use PM2.

Let's install PM2 and start express-server.js. First, navigate to ~/Development/quiver-invoice.

npm install pm2@latest -g pm2 start invoice-server.js

Done. invoice-server.js has just been daemonized and will continue to run until you stop it using pm2 or reboot the server. Go ahead and play with some of pm2's commands. It's pretty slick.

Now you might be able to hit your new domain and get a response from invoice-server.js, but that's going to depend on the propagation of your new CNAME, and that can take a while. Eventually, you should be getting Hello World responses from your domain. We'll expand on invoice-server.js as needed to support our new app architecture.

Where do I begin. Quiver-Invoice has taken on a life of its own. It's fully operational and ready to invoice the entire star system.

Firebase with Angular-Fire

I've fallen in love with Firebase, but it's been a serious learning curve. If you're interested in how I used Angular-Fire to hook into Firebase's auth system, check out user-service.js.

This is a big code drop, but it's critical to explaining how this works.

First, you inject $firebase and $firebaseSimpleLogin into the service and create a new Firebase instance pointing to your unique Firebase url. Then you register that Firebase instance with $firebaseSimpleLogin. $firebaseSimpleLogin(firebase) returns a new firebaseSimpleLogin instance that you can use to create users, log users in and out, and reset their passwords. It's a powerful little tool that abstracts a lot of nasty Firebase calls that I'm happy to not worry about.

'use strict'; angular.module('quiverInvoiceApp') .service('userService', function userService($q, $firebase, $firebaseSimpleLogin, environmentService, Restangular) { var env = environmentService.get(), firebase = new Firebase(env.firebase), firebaseSimpleLogin = $firebaseSimpleLogin(firebase), usersRef = $firebase(new Firebase(env.firebase + '/users')), getCurrentUser = function () { var deferred = $q.defer(); firebaseSimpleLogin.$getCurrentUser().then(deferred.resolve, deferred.reject); deferred.promise.then(function (currentUser) { if (currentUser) { Restangular.setDefaultHeaders({"Authorization": currentUser.firebaseAuthToken}); } }); return deferred.promise; }; return { getCurrentUser: getCurrentUser, get: function () { var deferred = $q.defer(); getCurrentUser().then(function (currentUser) { deferred.resolve(currentUser ? $firebase(new Firebase(env.firebase + '/users/' + currentUser.id)) : null); }, deferred.reject); return deferred.promise; }, getRef: function () { var deferred = $q.defer(); getCurrentUser().then(function (user) { deferred.resolve(user ? usersRef.$child(user.id) : null); }, deferred.reject); return deferred.promise; }, create: function (user) { var deferred = $q.defer(); firebaseSimpleLogin.$createUser(user.email, user.password).then(function (user) { var userRef = $firebase(new Firebase(env.firebase + '/users/' + user.id)); userRef.email = user.email; userRef.$save().then(deferred.resolve, deferred.reject); }, deferred.reject); return deferred.promise; }, remove: function () { }, reset: function (email) { var deferred = $q.defer(); // firebaseSimpleLogin.$resetPassword has not yet been implemented in angularfire. We're going it alone. var auth = new FirebaseSimpleLogin(firebase, function (err, user) { console.log('err, user', err, user); }); auth.sendPasswordResetEmail(email, function (err, success) { if (err) { deferred.reject(err); } else { deferred.resolve(success); } }); return deferred.promise; }, logIn: function (user) { var deferred = $q.defer(); user.rememberMe = true; // Override default session length (browser session) to be 30 days. firebaseSimpleLogin.$login('password', user).then(deferred.resolve, deferred.reject); return deferred.promise; }, logOut: function () { var deferred = $q.defer(); deferred.resolve(firebaseSimpleLogin.$logout()); return deferred.promise; }, change: firebaseSimpleLogin.$changePassword } });

Firebase Security

Firebase's security rules took a while to figure out. The basic gist is that the rules cascade, but they stop as soon as access is granted. So once you've granted access to one branch of your data model, that user has access to all child attributes. You can't deny access farther down the tree.

So here are my rules.

{ "rules": { "users": { "$user": { ".read": "$user == auth.id", ".write": "$user == auth.id", "invoices": { "$invoices": { "sk": { ".read": false }, "details": { ".read": "auth.email == data.child('recipient').child('email').val()" }, "charge": { ".read": "auth.email == data.parent().child('details').child('recipient').child('email').val()" } } } } } } }

This set of rules grants read/write access to any user with an ID that matches the requestor's user ID. So that's exactly one user. This works because each new Firebase user gets an ID, and I store all of that user's data under their user ID. So the data model looks something like this.

{ users: { 1: {...}, 2: {...}, 3: {...},... } }

The first security rules grants access based on user ID, so each user has unrestricted access to all of his data.

There are two other rules that grant access to invoice recipients based on their email addresses. If I send an invoice to [email protected], then whichever user has laid claim to the [email protected] email address is the only user who can pay that invoice. When that user tries to pull up the invoice, she sees the invoice's details and charge attributes, but does not have access to the sk attribute.

Can't Give Up Express

Quiver-Invoice relies on server-side integrations for Firebase, Stripe and MailChimp's Mandrill service. I've been very satisfied with all three of these services, but I'm a little frustrated that Firebase's libraries all run off of callbacks instead of promises. It dirties up my code.

Promises are critical to keeping Express methods readable.

I've been using kriskowal's excellent Q library for Node. Here's an example of just how nasty my payment method is, even with Q's code cleanup. Notice that I've abstracted out some functions that I'm calling all over the app into some custom middleware in a file named quiver.js. The getUser, getInvoice and getErrorHandler functions are exports from my quiver.js middleware. getUser and getInvoice return promises, so I can use them to create a fancy promise chain.

app.post('/payer/:payerId/user/:userId/invoice/:invoiceId/pay', function (req, res) { var deferredStripe = Q.defer(), deferredTemplate = Q.defer(), deferredEmail = Q.defer(), payerToken = req.headers.authorization, payerId = req.params.payerId, userId = req.params.userId, invoiceId = req.params.invoiceId, payer, payerRef, user, userRef, invoice, invoiceRef, stripe, paymentsRef = new Firebase(env.firebase + '/users/' + payerId + '/payments'), errorHandler = getErrorHandler(res); getUser(payerId, payerToken).then(function (result) { payer = result.user; payerRef = result.payerRef; return getUser(userId, firebaseSecret); }, deferredStripe.reject).then(function (result) { user = result.user; userRef = result.userRef; return getInvoice(userId, invoiceId, firebaseSecret); }, deferredStripe.reject).then(function (result) { invoice = result.invoice; invoiceRef = result.invoiceRef; // Make sure that the recipient and the payer are one and the same. if (invoice.details.recipient.email === payer.email) { stripe = require('stripe')(invoice.sk); var payload = { amount: invoice.details.total * 100, currency: 'usd', card: invoice.details.token.id, description: 'Invoice #' + invoice.details.number + ', sent to ' + invoice.details.recipient.email }; return stripe.charges.create(payload); } else { deferredStripe.reject({"error": "Recipient and payer emails do not match."}); } }, deferredStripe.reject).then(function (charge) { invoiceRef.child('charge').set(charge, function (err) { if (err) { deferredStripe.reject(err); } else { invoiceRef.child('details').child('state').set('paid', function (err) { if (err) { deferredStripe.reject(err); } else { deferredStripe.resolve(charge); } }); } }); }, deferredStripe.reject); deferredStripe.promise.then(function (charge) { res.json(charge); }, errorHandler); // Add to paying user's payments array deferredStripe.promise.then(function (charge) { paymentsRef.auth(firebaseSecret, function (err, result) { // Add to user's payments invoice.charge = charge; paymentsRef.push(_.omit(invoice, ['sk'])); }); }); // Send an email out of band deferredStripe.promise.then(function (charge) { // Render the email var data = { root: env.app + '/#', user: user, invoice: invoice, params: req.params, total: charge.amount / 100 }, template = 'invoice-recipient-paid.txt'; res.render(template, data, function (err, html) { if (err) { deferredTemplate.reject(err); } else { deferredTemplate.resolve(html); } }); }); deferredTemplate.promise.then(function (template) { // Send the email var payload = { message: { text: template, subject: "You Have Paid a Quiver Invoice from " + invoice.details.sender.name, from_email: invoice.details.sender.email, from_name: invoice.details.sender.name, to: [ { email: invoice.details.recipient.email, name: invoice.details.recipient.name, type: 'to' } ], headers: { "Reply-To": invoice.details.sender.email }, bcc_address: user.email } }; mandrill.messages.send(payload, deferredEmail.resolve, deferredEmail.reject); }); });

I had to query two users via Firebase, create a Stripe transaction, save the Stripe transaction back to Firebase, update the paying user's Firebase data, render an email, send the email via Mandrill and finally respond to the request.

Each of these steps is asynchronous, but they all depend on each other's results, so they have to be run in very specific orders. Promises make the code much more elegant than the callback soup it would otherwise be. Promises even enable me to execute the email processes out of band with the rest of the operations, speeding up the response from the server.

A Quick Note on Synchronicity

Beginners in JS land don't usually get the difference between synchronous and asynchronous programming until they've been forced to figure it out on their own. I required a few months of intimate JS time before it clicked for me, and I'd like to speed that process up for anyone who's new to these concepts.

Most programming is synchronous. You call a method, and that method executes line by line until it returns its result. When you think of running a function and waiting for it's result, you're thinking synchronously.

Network calls are asynchronous. You make the call, but you don't know when or even if it will return. You may want to stop the execution of the application to wait for a network call to return, but you NEVER EVER EVER do this in node. Node is not like PHP or Python, where you can hold up the request until you're ready to respond, because the PHP or Python server can spin up new instances of your application to handle other incoming requests.

Node applications are single-threaded, meaning that you have a single system process that's handling all of your incoming requests. Node is only fast when you code EVERYTHING asynchronously. Node does not like anything processor intensive. It does not like to wait. When a Node request comes in, it gets routed and forgotten about, because Node can only budget a fraction of a millisecond for each request. The function that catches the request doesn't actually return anything, it does its business asynchronously and calls its response callback when it's done. This makes Node what is called a non-blocking system. Nothing should block. Ever. Node is a wicked-fast HTTP router that can handle only one, tiny action at a time.

Node requires asynchronous programming. And this makes it a perfect fit for many web applications, because web servers tend to do a lot of asynchronous network calls, like my earlier example where a single function makes multiple calls to Firebase, Stripe and Mandrill. Each of these calls is super fast to make, and the processing work gets done by Firebase, Stripe or Mandrill, so my Express application only has to make requests and handle responses... the perfect Node use case.

Never Use Node...

...for processor intensive tasks. If Node runs into a function that blocks, meaning a function that needs the server's processor to calculate something non-trivial, your entire Node thread will be blocked until the processor is done with the calculation. I once tried to use the bcrypt hashing algorithm on a Node server, and I couldn't figure out why the server wasn't responsive. It turned out that every time I hit the bcrypt method, my server would take 10 seconds to process the bcrypt hash, and it would become entirely unresponsive until those 10 seconds were up.

LAME!

If you need to process something, create a micro-service written in something besides Node, or try to leverage someone else's service to get the job done. You don't want to be processing images on Node's single thread. You've got one thread. Use it sparingly and keep it frosty.

Let's Get This Started

So Angular is the new hottness. Everyone wants to learn it and write incredible single-page applications (heretofore referred to as SPAs), but the documentation is crap and every dev I talk to seems to have wildly different ideas about how to structure an Angular application.

Getting started with Angular should not be this difficult. There should be a preferred way to start up with Angular. Experienced devs can do whatever the math they feel like, but beginners need some best practices drilled into their heads before they go hog-wild and start writing trashy Angular. Because it's easy to write trash Angular if you're overconfident in your own understanding of the framework.

For the purpose of these exercises, I'm going to assume that you're developing in OS X. Everything should work the same in Linux. Sorry Windows.

Yeoman, Grunt, and Bower

I know that experienced devs have all sorts of opinions on Bower vs. NPM/Browserify and Grunt vs something else and whether or not Yeoman makes any sense at all. I have had great success with the Yeoman/Grunt/Bower front-end stack. It works. The end.

Install your dependencies

Node - There are a bunch of way to install Node.js. I prefer to first install Homebrew and then install node by firing up my terminal and typing brew install node. Node.js now comes pre-packaged with the Node Package Manager (NPM). We'll be using NPM to install the rest of our dependencies.

Global NPM Installs - Some NPM packages need to be installed globally for use at the system level, while others get installed locally on a per-project basis.

Let's install our global dependencies

npm install -g yo grunt bower angular-generator

Create up a GitHub Repo

Almost everything that you do should be version controlled. It's free and easy, so just do it. GitHub is fantastic. [Sign up for a GitHub account] and create a repo. I'm going to name this repo quiver-invoice. Don't add a .gitignore quite yet, and pick whichever license type you like.

Now you'll need to clone your new repo to your local dev environment. I do all of my work inside of /Users/christopheresplin/Development, so I'll navigate to my Development folder and type git clone [email protected]:deltaepsilon/quiver-invoice.git. This creates a folder at /Users/christopheresplin/Development/quiver-invoice with the contents of my repo. CD into quiver-invoice cd quiver-invoice.

Type ls -al to list out the contents of quiver-invoice. Done.

System Configuration (Optional)

These configurations are optional, but they'll help your productivity in the long run, so just do them now.

Set your username and email

git config --global user.name "Joe Schmoe" git config --global user.email "[email protected]"

Prevent white space merge problems

git config --global apply.whitespace nowarn

If you are on Windows:

git config --global core.autocrlf true

If you are on Linux or Mac:

git config --global core.autocrlf input

Copy and paste for abbreviated commands on the command line.

git config --global alias.st status git config --global alias.ci commit git config --global alias.br branch git config --global alias.co checkout git config --global alias.df diff git config --global alias.lg "log --graph --pretty=format:'%Cred%h%Creset | %cn | -%C(yellow)%d%Creset %s %Cgreen(%cr)%Creset' --abbrev-commit --date=relative"

Colored diffs and others

git config --global color.diff auto git config --global color.status auto git config --global color.branch auto

Auto Complete branch data

Edit your .bashrc, .bash_profile or other source files and append:

source /usr/local/git/contrib/completion/git-completion.bash

Note: /usr/local/git is where git is installed. Look for the git-completion.bash file and append the above to the your file. If you're having trouble finding git, type which git. If you're still not finding it (probably because you used Homebrew) like me, copy/paste the guts of git-completion.bash into a scripts directory in your home directory. I, for example, have a copy of git-completion.bash at /Users/christopheresplin/.scripts/git-completion.bash.

Color Code your Terminal output

Edit your .bashrc or.bash_profile and PRE-pend the following:

source /usr/local/git/contrib/completion/git-completion.bash RED="\[\033[0;31m\]" YELLOW="\[\033[0;33m\]" GREEN="\[\033[0;32m\]" NO_COLOUR="\[\033[0m\]" PS1="$GREEN\u$NO_COLOUR:\w$YELLOW\$(__git_ps1)$NO_COLOUR\$ "

My own .bash_profile has the following lines

source /Users/christopheresplin/.scripts/git-completion.bash RED="\[\033[0;31m\]" YELLOW="\[\033[0;33m\]" GREEN="\[\033[0;32m\]" NO_COLOUR="\[\033[0m\]" PS1="$RED\u$NO_COLOUR:\W$YELLOW\$(__git_ps1)$NO_COLOUR ∑: "

Set up your OS X/Linux environment for maximum speed

I really like this tutorial about quickly navigating your filesystem from the command line. I have this jump/mark system installed on my local machine and on my Linux servers so that I don't have to type the full paths to most of my folders. I just mark them and jump to them.

You should also install some command line aliases for common tasks. For instance, I hate typing ls -al to list out a directory, so I have it aliased to ll instead. The quickest way to do this is to create a file named .bash_aliases and to edit your .bashrc to look for it. Here's what my .bashrc and .bash_alias files look like.

.bashrc

# /Users/christopheresplin/.bashrc if [ -f ~/.bash_aliases ]; then . ~/.bash_aliases fi if [ -f ~/.bash_marks ]; then . ~/.bash_marks fi

.bash_alias

# /Users/christopheresplin/.bash_aliases alias apache='sudo apachectl' alias ll='ls -al' alias gitclean='git ls-files --deleted | xargs git rm' alias reload='source ~/.bash_profile' alias redisdrop='redis-cli KEYS "*" | xargs redis-cli DEL' alias mongodrop='mongo quake --eval "db.dropDatabase()"' alias dropall='redisdrop mongodrop' alias fo='sudo -E forever' alias redisstart="sudo launchctl start io.redis.redis-server" alias redisstop="sudo launchctl stop io.redis.redis-server" alias show="defaults write com.apple.finder AppleShowAllFiles TRUE && killall Finder" alias hide="defaults write com.apple.finder AppleShowAllFiles FALSE && killall Finder"

Once you have this all figured out, you should be able to CD into quiver-invoice or whatever your project is called and type mark invoice. Then, from anywhere in your filesystem, you can always type jump invoice and return to the quiver-invoice folder. And once you're there, you'll see that your current git branch is displayed in your command line prompt.

christopheresplin:quiver-invoice (master) ∑:

You also have aliases for your git commands, so you can type git co instead of git checkout, git br intead of git branch, and git lg instead of git log. And your git log will be beautiful! Try logging your commit history to glory in it's excellence.

Scaffold out Angular

Now jump to quiver-invoice and scaffold out an Angular app using yo angular quiver-invoice. Don't include bootstrap, angular-resource or angular-cookies, but do include angular-sanitize. It's super useful. Enjoy the crazy terminal readout as Yeoman installs a ton of files into your directory.

I hate that Bower installs everything by default into app/bower_components, so I always create a file named .bowerrc and change the name to app/lib using vim .bowerrc. Then I rename app/bower_components to app/lib using mv app/bower_components app/lib. You'll need to do a find/replace inside app/index.html for all of the references to "bower_components" that should read "lib". We'll also need to update our .gitignore file to ignore /app/lib instead of /app/bower_components.

{ "directory": "app/lib" }

You may need a quick vim tutorial. Just learn the basics. You'll need to edit files via command line, especially when it's time to deploy your application to a Virtual Private Server (VPS).

Install Angular Modules

The Angular project has become more modular in recent releases, and some of the best Angular code is outside of the core project, so I prefer to start each project with a handful of the most useful modules. Install these via command line from the root directory of your app, in my case, I jump to quiver-invoice.

bower install --save angular-ui-router restangular angular-firebase momentjs angular-google-analytics angular-cache foundation foundation-icons foundation-icon-fonts

Bower will let you know if you need to resolve any angular dependencies. It doesn't usually matter how you resolve them... I just pick the most recent version of Angular.

The --save flag tells bower to save your installations in /bower.json, so that you can run commands like bower install and bower update to quickly install or update all of your dependencies. This is critical for working in teams. Use Sindre Sorhus's Bower Components application to search for additional Bower components that you can install with bower install --save.

Now make sure to add all of the JS modules as script tags in index.html

<!-- build:js scripts/modules.js --> <script src="lib/angular-sanitize/angular-sanitize.js"></script> <script src="lib/angular-cache/dist/angular-cache.js"></script> <script src="lib/angular-google-analytics/src/angular-google-analytics.js"></script> <script src="lib/angular-ui-router/release/angular-ui-router.js"></script> <script src="lib/jquery/jquery.js"></script> <script src="lib/lodash/dist/lodash.js"></script> <script src="lib/modernizr/modernizr.js"></script> <script src="lib/momentjs/moment.js"></script> <script src="lib/restangular/dist/restangular.js"></script> <script src="lib/firebase/firebase.js"></script> <script src="lib/angularfire/angularfire.js"></script> <!-- endbuild -->

Build Out Compass

Create a new file at /styles/screen.scss and populate it with a few preliminary imports.

// /styles/screen.scss // Make sure the charset is set appropriately @charset "UTF-8"; // Behold, here are all the Foundation components. @import "../lib/foundation/scss/foundation/components/accordion", "../lib/foundation/scss/foundation/components/alert-boxes", "../lib/foundation/scss/foundation/components/block-grid", "../lib/foundation/scss/foundation/components/breadcrumbs", "../lib/foundation/scss/foundation/components/button-groups", "../lib/foundation/scss/foundation/components/buttons", "../lib/foundation/scss/foundation/components/clearing", "../lib/foundation/scss/foundation/components/dropdown", "../lib/foundation/scss/foundation/components/dropdown-buttons", "../lib/foundation/scss/foundation/components/flex-video", "../lib/foundation/scss/foundation/components/forms", "../lib/foundation/scss/foundation/components/grid", "../lib/foundation/scss/foundation/components/inline-lists", "../lib/foundation/scss/foundation/components/joyride", "../lib/foundation/scss/foundation/components/keystrokes", "../lib/foundation/scss/foundation/components/labels", "../lib/foundation/scss/foundation/components/magellan", "../lib/foundation/scss/foundation/components/orbit", "../lib/foundation/scss/foundation/components/pagination", "../lib/foundation/scss/foundation/components/panels", "../lib/foundation/scss/foundation/components/pricing-tables", "../lib/foundation/scss/foundation/components/progress-bars", "../lib/foundation/scss/foundation/components/reveal", "../lib/foundation/scss/foundation/components/side-nav", "../lib/foundation/scss/foundation/components/split-buttons", "../lib/foundation/scss/foundation/components/sub-nav", "../lib/foundation/scss/foundation/components/switch", "../lib/foundation/scss/foundation/components/tables", "../lib/foundation/scss/foundation/components/tabs", "../lib/foundation/scss/foundation/components/thumbs", "../lib/foundation/scss/foundation/components/tooltips", "../lib/foundation/scss/foundation/components/top-bar", "../lib/foundation/scss/foundation/components/type", "../lib/foundation/scss/foundation/components/offcanvas", "../lib/foundation/scss/foundation/components/visibility"; // Behold... Foundation icon fonts!!! @import "../lib/foundation-icon-fonts/foundation-icons";

Set up Grunt for Compass Compilation

Add an appConfig attribute to Grunt's initConfig object. It'll look like this.

... grunt.initConfig({ appConfig: grunt.file.readJSON('./config/appConfig.json'), ...

Now make a file at /config/appConfig.json and fill it like so.

{ "app": { "ngModule" : "quiverInvoiceApp", "dist" : "dist", "src" : "app", "test" : "test", "assets": { "bower" : "lib", "fonts" : "fonts", "images" : "images", "partials" : "partials", "scripts" : "scripts", "styles" : "styles", "templates" : "views" }, "engines": { "compass" : true } } }

appConfig.json provides some handy configuration attributes that we can reference inside our Gruntfile. So let's open up Gruntfile.js and add another attribute to Grunt's initConfig object. I like to add things to the bottom of the config object like so...

grunt.initConfig({ // A whole bunch of configs... compass: { dev: { options: { cssDir : '<%= appConfig.app.src %>/<%= appConfig.app.assets.styles %>', fontsDir : '<%= appConfig.app.src %>/<%= appConfig.app.assets.fonts %>', httpFontsPath : '../<%= appConfig.app.assets.fonts %>', imagesDir : '<%= appConfig.app.src %>/<%= appConfig.app.assets.images %>', httpImagesPath : '../<%= appConfig.app.assets.images %>', importPath : '<%= appConfig.app.src %>/<%= appConfig.app.assets.lib %>', javascriptsDir : '<%= appConfig.app.dev %>/<%= appConfig.app.assets.scripts %>', sassDir : '<%= appConfig.app.src %>/<%= appConfig.app.assets.styles %>', httpGeneratedImagesPath : '../<%= appConfig.app.assets.images %>' } } } }

Now add your new compass job to the list of watches. You'll notice an attribute in Grunt's initConfig object named "watch". Add the compass job to the bottom like so...

grunt.initConfig({ watch: { coffee: { files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'], tasks: ['coffee:dist'] }, coffeeTest: { files: ['test/spec/{,*/}*.coffee'], tasks: ['coffee:test'] }, styles: { files: ['<%= yeoman.app %>/styles/{,*/}*.css'], tasks: ['copy:styles', 'autoprefixer'] }, livereload: { options: { livereload: '<%= connect.options.livereload %>' }, files: [ '<%= yeoman.app %>/{,*/}*.html', '.tmp/styles/{,*/}*.css', '{.tmp,<%= yeoman.app %>}/scripts/{,*/}*.js', '<%= yeoman.app %>/images/{,*/}*.{png,jpg,jpeg,gif,webp,svg}' ] }, compass: { files: [ '<%= appConfig.app.src %>/<%= appConfig.app.assets.styles %>/{,*/}*.scss' ], tasks: ['compass'] } }, // A whole bunch of configs }

Now add your compass task to the build job. Place it right at the top.

grunt.registerTask('build', [ 'compass', 'clean:dist', 'useminPrepare', 'concurrent:dist', 'autoprefixer', 'concat', 'copy:dist', 'cdnify', 'ngmin', 'cssmin', 'uglify', 'rev', 'usemin' ]);

Set Up App.js

We're just about ready to launch our fancy new Angular application, but first we need to make some adjustments to app.js and index.html.

// /app/scripts/app.js 'use strict'; angular.module('quiverInvoiceApp', [ 'ngSanitize', 'restangular', 'ui.router', 'angular-google-analytics', 'jmdobry.angular-cache', 'firebase' ]) .config(function ($stateProvider, $urlRouterProvider) { $urlRouterProvider.otherwise('/'); $stateProvider.state('root', { url: '/', views: { body: { templateUrl: 'views/main.html', controller: 'MainCtrl' } } }); });

We just replaced Angular's native $routeProvider with a $stateProvider from angular-ui-router. We also imported Restangular, angular-google-analytics, angular-cache and angular-firebase. These libraries will come in handy later, but let's have some fun.

Jump to your terminal, make sure you're in your root folder, in my case, quiver-invoice, and type grunt server. You may need to troubleshoot a bit, and Grunt is great about descriptive error messages. You'll know you've succeeded once your browser automatically popups open a new tab, navigates to http://127.0.0.1:9000/#/ and you see a friendly Angular welcome message!

Next Steps

It's about time to deploy your dummy application. Check out the next article in this series: Single Page App Architecture: Angular Deploy

I recently started an online coaching program through Fitocracy that's being run by John Romaniello.

It goes by the unfortunate name (or maybe it's just tongue and cheek and I'm easily embarrassed) of Sixteen Weeks to Sexiness. It's fitting that I chose a workout programs with a questionable name. The first program that I did back in 2009 is called Scrawny to Brawny, and it worked wonders. So my sample size of one indicates that a bad name does not make a bad program.

Moving on... I'm smack dab in the middle of John's target market for this program. I've been working out for years, but I've become a bit bored with it as of late and need a boost. Also, I had no idea how to get below ~12% body fat. I've been plagued by a little pudge around the middle since puberty took hold at age 13. Yuck.

So I paid John my monies, got the program via email and got access to his Google+ Community where about 70 of us are experiencing our sixteen weeks together.

My first impression is that the program is serious. John put together a program for me that will cut me down below 10% body fat if I can follow it. It involves macronutrient targets, a daily caloric deficit, intermittent fasting and a crazy sequence of workouts. He only sent out the programs for our first month, so I'll have to wait to see what he has in store for me in February.

Week 1

I dove right into the workout and diet on Monday. I started tracking all of my meals in detail using My Fitness Pal, which I cannot recommend enough. Meal tracking sucks any way that you slice it, but the MyFitnessPal app for iOS makes it much easier.

The first week of workouts were hard. I'm used to a leisurely powerlifting routine where I do a couple of 5x5's or pump out some 1RM lifts, fuss around with a few assistance exercises and call it a morning. John's fat loss workouts are all about intensity, and each one focuses on a different type of intensity.

Dynamic Training: 3 circuits of 3-4 exercises each performed with very little rest. Focus on moving quickly through the circuits and keeping the heart rate up.

Lactic Acid Training: 3 circuits of 2-3 exercises each performed with very little rest. Focus on slow lifts in quick succession... for a squat, drop quickly into squatting position and push out of the hole slowly... then drop quickly back down and repeat. Spend the maximum amount of time in the hardest part of each lift.

Density Training: 3 circuits of 3 exercises each performed with little rest. Perform each exercise intensely for a specified time period then repeat each circuit at a higher weight.

Strength Training: 2 circuits of 3 exercises each performed with moderate rest. Focus on lifting heavy and performing a certain number of reps across as many sets as you need to get it done. Increase the weight if you can perform too many reps in one set.

Over the course of 7 days I cut 3.2 pounds, lost 2cm on my gut and lost .5cm from my suprailiac skin fold. My abs are starting to peak out!

Week 2

The intermittent fasting is doing amazing things to my body. My appetite is way down, and I'm losing about a half pound per day. I wish I'd known about this before... it takes discipline, but the results are undeniable.

One half pound per day??? I don't know what to make of this. Was I really that fat to begin with that I could drop a half pound a day for two weeks? I suspect that these losses will continue for a bit longer and then gradually become more difficult. I'll need to get more focused on hitting my macro goals and lifting hard in order to push below 10% body fat.

Before

Greetings,

My name is Chris. I work at home at my computer, building an internet business with my wife that has been profitable from month 1. I started learning to code four years ago at the age of 27, and I'm still hoping to be a proficient programmer when I grow up.

In The Beginning

I grew up as a voracious reader. My parents were strict with the TV and movies (yeah... I was born in the early 80's, when that stuff still gave you cancer), so I was stuck with books and newspapers. I loved the Wall Street Journal. I loved everything it stood for: the Big City, sophistication, education, respect, money.

At university I double-majored in Economics and Finance. Of course. Those were the two topics that would lead me to the Big City, sophistication, more education, respect and money. I would work in consulting, get an MBA, and be rich and powerful forever and ever.

I followed through with the first part of that plan, starting a consulting job in Silicon Valley in the summer of 2007. It wasn't management consulting like I'd hoped. It was economic litigation consulting. And yes. It was as fascinating as it sounds.

The cracks started to show immediately. I couldn't do the hours. They only wanted 50 of them each week, but I was newly married, my wife would be pregnant before too long, and she needed me! And most of the work was far less interesting than what I'd studied in school. I half-assed a bunch of my assignments before figuring out what "we value detail orientation" meant. By the time I was fully detail-oriented, it was too late. Someone above me in the org chart had made up his mind. I was fired from my first real job within a year and nine months. It wasn't them. It was me. And the economy, which had our business in a rear naked choke after the financial crash. I wouldn't have kept me around either.

Learning to Code

I fled California for Utah, my adopted home state, and settled into a tiny one-bedroom house in downtown Salt Lake City with my wife and 2 year-old daughter. I could not find a job, but neither could anyone else in 2009. I was unemployed for nine months.

After nine months, I took the first job I was offered and spent the next year working as a financial analyst at the local children's hospital. The pay was half of what I had earned at my consulting gig and the work was far less analytical. But they used SQL to query their data. I was already an Excel master from those consulting charts, and I knew rudimentary Visual Basic, but SQL was a revelation. I realized that I could save myself hours of work with a single well-crafted query.

Financial analysis was boring. I needed more code. I got a new job doing SQL full time. It was glorious.

No job. Just a fanny pack, a pink shirt and a little cutie to care for

Getting Serious

I spent the next three years bouncing from job to job, getting deeper into the programming world. I learned PL/SQL, PHP, JavaScript, and enough Java to piss off my co-workers. I picked up some frameworks too: CakePHP, Symfony2, MooTools, Backbone, Express, Angular.

Then I quit. My wife and I had started IStillLoveCalligraphy.com in early 2012, and within a year we were earning enough that I could work on the business full time. I've been self-employed for six months now. We buy our own health and life insurance, we make our mortgage payments, and we live within our means.

Do you need to code, or do do you just want it?

Coding is not easy. Code Academy and Treehouse make it look, sound and feel easy. And the initial steps are easy. But making something that other people might want to use? Making something that is so amazing that people will send you money?

Code is the easy part.

Architecting your product so that hundreds of people can use it at the same time is tricky. The people who built healthcare.gov are a great example of experienced IT professionals getting it wrong.

Designing a product that people will want to use is effing brutal. There's a reason that user experience designers get paid real money for their time. Most of them are so-so. The good ones—the designers that you want working on your product—are too expensive for a small business to hire.

Have you marketed a product? Have you convinced a potential client that your product was worth far more than its price? Did you take his money? Don't even think about hiring someone for this job. Marketing must become one of your competencies. Read Seth Godin. Go to Copy Hackers and read everything twice. Do it yourself. If you can't be bothered to market your product, you shouldn't be in business.

You shouldn't learn to code

Other skill sets will get you into the tech world much faster than code. Learn product design and user experience. Learn graphic design. Learn video production. Learn marketing. Start a blog. Commit yourself completely to being the best, and you'll claw your way to whatever success you want.

Programmers who don't love their work tend to write mediocre code. Their souls don't ache for more code. They aren't obsessed with the latest languages and frameworks. If they could pay their bills by doing jumping jacks for ten minutes each morning, they'd do the jumping jacks (I would too) and never code again.

If you're serious, go ahead and take a JavaScript or Python class. Do some online tutorials. Pay attention to how you feel. Are you hungry for more? Do you get a little rush? Are you so focused that you lose track of time? When your code won't behave, does the frustration make you want to give up, or double down?

My first read of Stephen R. Covey's Seven Habits of Highly Effective People was a revelation. I read a bootleg copy of the book seven years ago, and it really did change my life for the better. I've reread it a few times since, usually when life has been extra confusing. It always helps me to see what I'm doing wrong.

Sharpen The Saw

Covey's 7th habit is Sharpen The Saw, which refers to implementing habits in your life to strengthen your body and mind on an ongoing basis so that you achieve an upward spiral of productivity and wellness. My preferred Sharpen The Saw method has always been exercise. I'm not one for meditation or a whole lot of long-form reading, so I exercise.

Cross Country

I started running in high school as a permanent member of the JV cross country team. One of my coaches told my mom that I shouldn't expect to do very well. I didn't have the right body for it. He was right. By my sophomore year I was 6'2" tall and 182 pounds. I wasn't full-blown skinny fat. I didn't have a sunken chest. I had a flat chest. And I didn't have flabby arms, just a flabby belly.

I've run off and on since high school. I'll take a few months off,then get back in shape and run like crazy for six months to a year before taking another break, usually because of an injury, tough times at work or moving to a new house.

After getting fired from my consulting job in Menlo Park, CA in early 2009, I retreated with my little family back to Salt Lake City, UT. My wife got a job right away, so I took our 2 year-old daughter on long walks around the city. We spent a lot of time at the library.

Scrawny To Brawny

During month five of my unemployment I saw a book on the shelf at the library that looked interesting. It was called Scrawny To Brawny. I'd never tried lifting weights before, but I skimmed the book quickly and it didn't promise any shortcuts, just a lot of work and a straightforward methodology. But how embarrassing is it to check out a book called Scrawny To Brawny at the library? I felt like a noob/poser/wannabe. I had to admit to myself and the world that I was scrawny and wanted to be brawny.

So I read the book. It made a ton of sense. I devised a workout strategy, got the cheapest gym pass I could find, and started hitting the weights three times a week. I looked and felt like a moron at the gym. If I'd had any pride left, I would have quit after the first workout. But there wasn't a lot left to humiliate. Looking back, it's clear that I had just bottomed out.

I was lifting weights correctly for the first time in my life. I learned proper bench press form. I learned to squat, deadlift, clean, press, and snatch. I took the book's advice and doubled my caloric intake from roughly 3,000 to 6,000 calories a day. I started to gain one to two pounds per week. Within three months I had put on 30 pounds. Within six months I was deadlifting 300 pounds and squatting over 200.

[Click for video]((https://vimeo.com/33953554)

Four Years Later

I'm still lifting three or four times a week. It keeps the saw sharp. I will never quit.

A lot of guys who make the transition from slouching desk jockeys to weight lifters go the CrossFit route. I've tried it, and I understand the appeal. The workouts are designed to be brutal. The gym throws you into an environment where all of the social pressure is to go harder and harder until you drop.

Others prefer bodybuilding workout with higher reps, lower weights, split routines and isolation lifts.

I'm more of a powerlifter myself. I have all of my own equipment in the basement so that I can lift while the kids are asleep.

I'd love to look like a bodybuilder, but I don't love bodybuilding. The workouts take too long and involve too many ridiculous exercises like concentration curls. And I don't want to be a meathead. I don't want to fake bake. I don't want to wear muscle t-shirts. I don't want to eat nothing but chicken and fish for weeks on end.

Powerlifting workouts are short. I keep my primary lifts to five or fewer reps in each set, often doing heavy singles as I try to hit a one rep max. I do one or two big lifts per workout, and I usually get them all done in 30 minutes. I'll take another 30 minutes to do assistance lifts. And then I'll do another half hour of trail running in the summer or rowing in the winter. So the core of the workout is 30 minutes, but I do up to 90 minutes when I have the time.

Muscle Basement

Diet Is Everything

Less experienced guys tend to focus on lifting strategies. But the highest-leverage activities for changing your body are all diet-related. If you want to get stronger or gain weight, you've got to be eating massive amounts of food. If you want to stay lean, that food has to be super low in carbohydrates. When it's time to cut, low carbohydrates and moderate caloric restriction works great.

Dieting is my least favorite part of the equation. If I hit a plateau in my strength or weight gains, the answer is always more food. I know that I can make huge, consistent gains on a 6,000 calorie diet. I can put on one to two pounds a week. Consistently. But for every pound of muscle, I put on a pound of fat.

I hate getting fat. I hate busting out of my jeans. When I'm most committed to making big gains, I'll eat like a starving dog until the day I develop a fat roll just under the side of my rib cage. I'll bend sideways for some reason and feel the roll pop. It's the worst feeling. I know that I'll be miserable until it's gone. I have no choice but to start cutting immediately.

I owe Year Of Moo and Steeve big time. Year Of Moo and Steeve, I would have been lost without you. Thank you.

A High-Risk Maneuver

How about some background!

My wife and I run I Still Love Calligraphy. I've been on the project full time since June 2013, but we've been growing the business since early 2012. I spent three months this year rewriting the front end of I Still Love Calligraphy from a PHP & Symfony2-based CRUD app to an AngularJS single-page application.

Since IStillLoveCalligraphy.com had already been selling for over 18 months when I started the rewrite, we had some business-critical traction on Google. If we lost Google ranking, our sales volume would have been cut in half.

When The Dust Had Settled...

Our SERP rankings improved a ton after the Angular rewrite due to extra attention to basic SEO principles. We're currently #1 for our two most-relevant search phrases, "calligraphy course" and "calligraphy class". We're also getting close to the front page for "calligraphy".

I don't believe that switching to an SPA improves anyone's SERP ranking, but I feel confident in proclaiming that the switch can be made without negative repercussions... it's just a tad complicated to get right.

Happy Twenty Fourteen Y'all

Step One: Hashbang URLs

If you want to get indexed, give up on your beautiful HTML5 URLs. Google and Bing prefer hashbangs (#!), so just get over it and stick the following snippet in your Angular module config.

.config(function ($locationProvider) { $locationProvider.hashPrefix('!'); //Lots more config and all of the state stuffs for the application... });

You want an explanation for the hashbang do you? Well here you go. Google requires hashbangs and there's nothing you can do about it. When Google or Bing encounters a hashbang link onsite or in your sitemap, they modify it like so...

Original URL:

http://istilllovecalligraphy.com/#!/products/

New Google/Bing URL:

http://istilllovecalligraphy.com/?_escaped_fragment_=/products/

Did you catch that? Google and Bing take everything after your hashbang and turn it into a query parameter.

Intercept Routes with _escaped_fragment_

All of these fancy _escaped_fragment_ queries will hit the root URL of your application, so you'll need to intercept them somehow and treat them like the JavaScript-ignoring web crawlers that they are. Here's a quick example in Symfony2.

public function indexAction(Request $request) { $fragment = $request->get('_escaped_fragment_'); if (isset($fragment)) { // Ah ha! It's a search engine! $redis = $this->getRedis(); $index = $redis->get($fragment); if (!isset($index)) { // Redis doesn't have it. Let's get the static page. $index = file_get_contents('http://127.0.0.1:8888/?phantomjs=true&_escaped_fragment_='.$fragment); $redis->set($fragment, $index); $redis->expire($fragment, 604800); // Set time-to-live } } else { // Not a search engine $index = file_get_contents(getenv('ISLC_ANGULAR_ROOT').'/index.html'); } // Symfony2 Response boilerplate. $response = new Response($index, 200, array( 'content-type' => 'text/html' )); $response->prepare($request); return $response; }

Angular-SEO and Express-based PhantomJS Page Render

Notice that little snipped that looked like this...

$index = file_get_contents('http://127.0.0.1:8888/?phantomjs=true&_escaped_fragment_='.$fragment);

The secret sauce here is that I have an Express server running on port 8888 that uses PhantomJS to hit my page, waits for it to render, and then returns the fully-rendered page as static HTML.

I'm using my own fork of Angular-SEO for this task. The original Angular-SEO was tough to run as a daemon on my server. I'm used to running Express servers and other Node applications using Forever as my daemon manager. PhantomJS is run by the phantom application, which uses Node... but it isn't really Node. So I had the pleasure of spending a few days puzzling out an Express solution.

Check out my repo or enjoy the following code dump.

//express-server.js require('newrelic'); var app = require('express')(), port = process.argv[2], prefix = process.argv[3], phantom = require('phantom'), noCache = '--disk-cache=no', noSSL = '--ignore-ssl-errors=true', noImages = '--load-images=false', allowRemote = '--local-to-remote-url-access=yes', REGEX = /_escaped_fragment_=([^&]+)/, portCounter = 12300; var parse_qs = function(s) { var fragment = s.match(REGEX); if (fragment.length > 1) { return fragment[1]; } }; var renderHtml = function(url, cb) { portCounter += 1; console.log('PhantomJS query: ' + url + ' using port ' + portCounter + '.'); phantom.create(noCache, noSSL, noImages, allowRemote, {port: portCounter}, function (ph) { ph.createPage(function (page) { page.set('onLoadFinished', function() { page.get('content', function (content) { cb(content); page.close(); if (portCounter > 13300) { portCounter = 12300; } }); }); // page.onConsoleMessage = function(msg, lineNum, sourceId) { // console.log('CONSOLE: ' + msg + ' (from line #' + lineNum + ' in "' + sourceId + '")'); // }; // page.onResourceReceived = function(response) { // console.log('Response (#' + response.id + ', stage "' + response.stage + '"): ' + JSON.stringify(response)); // }; page.set('onInitialized', function() { page.evaluate(function() { setTimeout(function() { window.callPhantom(); }, 10000); }); }); page.open(url); }) }); }; app.get('/', function (req, res) { var route = parse_qs(req.url), callback = function (html) { res.send(html); }, url = prefix + req.url.slice(1, req.url.indexOf('?')) + '?phantomjs=true' + '#!' + decodeURIComponent(route); renderHtml(url, callback); }); app.listen(port); console.log('Listening on ' + port + '...'); console.log('Press Ctrl+C to stop.');

I kick off this application like so:

sudo -E forever start express-server.js 8888 \ http://istilllovecalligraphy.com/

A Word of Warning: express-phantom.js relies on phantomjs-node, which has terrible memory leak as of December 2013. I'm hoping for a solution soon, but for now, I'm restarting my Node processes about once a week to clean up the leak. This is a lot to admit. Please be nice to me.

UPDATE: I have given up on tracking down PhantomJS memory leaks. The code appears to be riddled with them, so I am now simply killing the processes at the system level every five minutes. They're small processes, so it takes a whole lot of them to kill your system... however, your system will go down if you let it go unchecked for a few weeks. My solution? Go nuclear.

# Edit your root crontab using # sudo crontab -e # Add the following line to just murderlize all phantomjs processes every five minutes. */5 * * * * pkill -f phantomjs

Use

Tags Wisely

You want to be absolutely certain that your domain root renders something for Google. Google will probably not try to hit it with an _escaped_fragment_ parameter, so use <noscript> tags within your root HTML file in order to guarantee that Google sees something useful if it hits your root URL without rendering your JavaScript.

I, for example, copy and paste the rendered content from http://istilllovecalligraphy.com/#!/ into a <noscript> tag in my index.html file. I make sure to update the noscript every time I make a change to the root page. Thus it is impossible for Google to ever hit an empty page on my application. At the very least they'll get the contents of my <noscript>.

Setting up Angular for PhantomJS Rendering

You'll need to include angular-seo.js on the page. This is a tiny little file that signals to PhantomJS that your app is finished rendering the page. It tacks on window.callPhantom() as well as $rootScope.htmlReady(), which you call to signal out to Phantom.

Next, you'll need a controller that is present on every page of your application. Find a nice spot in this top-level controller to signal that the render is complete.

angular.module('islcAngularApp') .controller('MasterCtrl', function ($rootScope, $timeout) { if (typeof window.callPhantom === 'function') { $timeout($rootScope.htmlReady()); } // The rest of the controller });

Note: You may be able to call window.callPhantom from your module's run block, but I haven't tried it yet.

I ran into some tricky business where I needed to modify application logic whenever PhantomJS was asking for a page. You'll notice that the Express route in express-server.js that handles all incoming queries on port 8888 includes ?phantomjs=true in the url. I watch for this url parameter in my Angular application for proof that I'm handling a PhantomJS query.

app.get('/', function (req, res) { var route = parse_qs(req.url), callback = function (html) { res.send(html); }, url = prefix + req.url.slice(1, req.url.indexOf('?')) + '?phantomjs=true' + '#!' + decodeURIComponent(route); renderHtml(url, callback); });

Redis Page Cache

Fetching and rendering pages via PhantomJS is a slow process. You may have noticed earlier in my PHP controller code that I'm caching my PhantomJS results for a month.

// Redis doesn't have it. Let's get the static page. $index = file_get_contents('http://127.0.0.1:8888/?phantomjs=true&_escaped_fragment_='.$fragment); $redis->set($fragment, $index); $redis->expire($fragment, 604800); // Set time-to-live

The crawlable portions of my Angular app change very rarely, so I can get away with a 30-day cache. I do make sure to bust my Redis cache whenever I make code changes to the application, especially SEO optimizations.

Other Redis Caching

Once I got Redis running on my server, I figured I might as well cache some other slow, static server queries to speed things up even further. Server-side caching isn't ground breaking, and I don't care to explain it in detail... it's just low-hanging fruit that improves page speed and make the Goog happier.

Angular-Cache for Faster Page Loads

A certain Mr. Jason Dobry has created a fantastic Angular caching library called Angular-Cache.

I realized HUGE responsiveness gains with a naive implementation of Angular-Cache. I'm using Restangular, and I simply told Restangular to cache everything. Done.

The implementation took 30 minutes, but finding every single instance in which I needed to invalidate parts of my cache took about 3 days. Invalidating caches is one of only two difficult computer science problems, so it's always going to suck. But it's worth the effort if it speeds up your page and pleases our Search Engine Overlords.

Structured Data (a.k.a. Microdata (a.k.a. Rich Snippets))

Speaking of overlords, when I first saw reference to structured data on Google Webmaster Tools, I thought it would be a pain in the butt to implement and not super helpful.

It may not have been helpful, but the implementation was butt-pain-free. I got all of my pages marked up in about three hours.

Google Webmaster Tools has a structured data tutorial under Your Site > Search Appearance > Structured Data. Google must truly care about structured data if they take that much time to pitch it to us webmasters. More low-hanging fruit.

Dynamic Meta Tags

You need dynamic meta tags. I implemented dynamic meta tags using a master controller on my top-level <html> tag.

<html class="no-js" ng-app="islcAngularApp" ng-controller="MasterCtrl">

Then I made sure to include a dynamic title using ng-bind. Ng-bind is nice because it will overwrite the existing title if it gets the chance, but during a Google/Bing crawl with no JS on the page, I still get my default title.

<title ng-bind="title">I Still Love Calligraphy - Learn The Art of Calligraphy Online!</title>

Dynamic meta tags were a bit trickier. I need to maintain a default value for the content attribute, just in case Google or Bing crawls my root URL without JS, but whenever my JS does get run, I want to bind my content attribute to a scope variable.

<meta name="description" qv-content="description" content="I Still Love Calligraphy is an online calligraphy workshop created and taught by Melissa Esplin. I Still Love Calligraphy focuses on modern calligraphy through a series of online classes and additional downloadable content."/>

My solution was qvContent, a simple directive to bind a scope variable, in this case $scope.description to the content attribute.

'use strict'; angular.module('islcAngularApp') .directive('qvContent', function () { return { restrict: 'A', scope: { qvContent: '=' }, link: function postLink(scope, element, attrs) { scope.$watch('qvContent', function () { element.attr('content', scope.qvContent); }); } }; });

...which leads to a couple of awesome switch statements in MasterCtrl:

'use strict'; angular.module('islcAngularApp') .controller('MasterCtrl', function ($scope, $rootScope, $filter){ var SLASH_REGEX = /(^#!\/|\/$|\/:\w+|content\/|\?.+)/g, defaultTitle = 'I Still Love Calligraphy - Learn The Art of Modern Calligraphy Online!', defaultDescription = 'I Still Love Calligraphy is an online calligraphy workshop created and taught by Melissa Esplin. I Still Love Calligraphy focuses on modern calligraphy through a series of online classes and additional downloadable content.'; $scope.title = defaultTitle; $rootScope.description = defaultDescription; $rootScope.$on('$stateChangeSuccess', function() { var url = location.hash.replace(SLASH_REGEX, ''), parts = url.split('/'), first = parts[0], title; switch (first) { case '': $scope.title = defaultTitle; break; case 'faq': $scope.title = 'FAQ - I Still Love Calligraphy'; break; default: title = parts.join(' → '); $scope.title = $filter('deSlug')(title) + ' - I Still Love Calligraphy'; break; } //Manage Descriptions switch (first) { case 'products': $rootScope.description = 'Take our signature Online Calligraphy Course, gift the course to a loved one, or download one of our printables.'; break; case 'supplies': $rootScope.description = "These are the supplies that you'll need to start learning calligraphy. Buy from our preferred online store or source them locally. "; break; case 'faq': $rootScope.description = "Is the workshop for beginners? Yes! We specialize in beginner and intermediate calligraphy instruction."; break; case 'register': $rootScope.description = "Register for an account with I Still Love Calligraphy."; break; case 'login': $rootScope.description = "Log in to your account with I Still Love Calligraphy."; break; case 'reset': $rootScope.description = "Reset your account password for I Still Love Calligraphy."; break; default: $rootScope.description = defaultDescription; break; } }); });

More Low-Hanging Fruit

My working theory of SEO is that you simply have to do everything perfectly, no matter how small the optimization, and Google will shine its glorious light down upon you.

Here are some quick suggestions for easy stuff that may or may not help. - Submit a sitemap. - Use Google PageSpeed Tools and Yahoo YSlow and obey their every suggestion. - If you're changing site structure, make sure to get all of your redirects perfect. - Make sure you're using 301 redirects and not Apache's default 302. - Go through every page of Google Webmaster Tools to find anything that you can improve. Who cares if it seems small. It's probably worthwhile.

In Conclusion

SEO sucks.

It's a black box.

You ignore it at your own peril.

Half of the advice online is terrible.

SEO companies are mostly worthless if not fraudulent.

We all exist at the pleasure and whim of Google.

I just read a Coding Horror article on gender patterns in the workplace, and I'm having a strange reaction to it. I need to get my response down into words to make sense of what I'm feeling about the issue.

Should We Focus on Male/Female Ratios in the Workplace?

Jeff Atwood quotes an article by Sarah J. Chipps that attempts to explain why we need more women in technology. Sarah comes up with three reasons.

Diversity leads to better products and results

The Internet is the largest recording of human history ever built

Women in 10 years need to be able to provide for themselves, and their families

My gut reaction to this list is that these points apply generally to technology, but not specifically to programming as implied by Jeff's article. Here are my reasons.

Diversity leads to better products and results

Sarah refers to an anecdote about architecture:

"How can architecture be decidedly male? I like to refer to the anecdotal story of the Apple Store glass stairs. While visually appealing one unforeseen consequence to their design was the large groups of strange men that spend hours each day sitting under them looking up. As a women, the first time I saw them I thought “thank god I’m not wearing a skirt today.” Such considerations were not taken in designing these stairs, I think it’s probable, if not easily predictable, that in a few years we will see such holes in the design of the web."

This anecdote refers directly to the design aspects of the stairs, not to the implementation. The architect should have known better, but is it the construction workers' fault that they implemented a bad design? Nobody complains that there aren't enough women on the construction crew.

Programmers are—and this is a big generalization—implementers first and designers second. We tend to need great UX designers to give us the plans that we implement. I completely agree that we need to incentivize female UX designers, but I don't see how the need for a women's perspective applies to systems architecture and implementation. I don't think that women are necessarily any better or worse than men at this sort of implementation. We're all individual programmers with our own strengths and weaknesses.

I have a sister who works on oil rigs and is rising quickly through the ranks of her company because she is a fantastic engineer. She tells stories of how she earns the roughnecks' respect by being technically proficient and tough. There are very, very few women who do what she does, but nobody whines about it or sets up foundations to incentivize girls to get into oil rig engineering. And just in case anyone is wondering, oil rig engineers earn better money than software engineers. Much better.

The Internet is the largest recording of human history ever built

My wife has a huge social media following. Mine is insignificant. Frankly, programmers are good at their jobs because they like to code, not because they like to blog and record stuff for posterity. Our code will all get thrown away. Blogs get archived for the eternities.

Are software applications male focused? A lot of them are, but then there's Pinterest and Instagram and Facebook as well as a whole host of female-focused businesses that men like me can't even name.

My wife and I make our living off of I Still Love Calligraphy, where my wife teaches calligraphy online. The vast majority of her students are female for a whole host of reasons related to how we market —Melissa's social media presence—and the public's interest in paper arts. If you're a woman and you don't think your online needs are being met, please let me know so that I can build a business around that need. My wife will give me some female-focused UX designs and I'll build whatever she wants, and the rest is profit.

Women have massive disposable incomes. Businesses will pop up to give them what they want.

Women in 10 years need to be able to provide for themselves, and their families

Again, this is in line with Sarah's assertion that women need to be involved in technology, but it is much less applicable to programming.

Programmers earn well, but we are only one input into any successful tech business. Even if women's share of the programming job market doesn't grow, there are plenty of tech roles to fill, and there will be an even greater diversity of tech job as the years go by. A growing industry demands a greater diversity of inputs.

Why I Would Like To See More Female Programmers

As a male working in the programming industry, I've witnessed all sorts of male-generated douchery. The females that I have worked with tend to be more thoughtful, more humble and better collaborators. I'd like to see more female programmers for that single, selfish reason. If you can get enough women onto a team, the men might just behave themselves better. Who knows. It could work.

I think that programming is fun, so I'd like to expose my daughter to it. But I'm not going to try to bias her toward programming. If there are artificial barriers to entry into the job market for female programmers, then that is entirely unacceptable. I've never tried to break into programming as a female, and I haven't witnessed any of those barriers in my own limited experience, so I can't even address the issue

I take issue with the fetishism surrounding software development. The world thinks we're special. We think we're special. We think that we need programs to help more people be like us, because we are just that awesome.

False!

We are no better than the carpenter that made my parents' gorgeous bedroom shelving. We are no better than the mechanics who keep my bicycles, cars and snow blowers running. We are merely craftsmen in an ascendent industry, who happen to make more money than we're probably worth. It's a bubble and it will pop.

Respect, Not Special Treatment

I have no objection to Jeff Atwood's article. He's a smart guy. He makes great points. We'd do well to pay attention to him and follow his lead.

I do object to the notion—not necessarily advocated by Jeff or Sarah— that women need special treatment in the programming profession. We need to call out bad behavior when we see it and not permit it to ruin workplaces or learning spaces. There will always be jerks who talk down to others, but nobody respects them. If that sort of bad behavior is accepted, then there are bigger problems at hand.

There is zero excuse for working at a company led by jerks. Any manager who fails to show respect to his or her employees should not be tolerated. If you can't get the manager fired or moved out, then quit. Bad coworker behavior is a little more complicated, but a good manager should know how to handle it. Again, if your manager can't handle it, just quit. Life is too short to spend it working for people who don't respect you or your work.

A viable data structure

There are two rules to remember when sorting out your Firebase data structure.

Keep your data structures shallow.

Figure out your security rules early!

Keep your data shallow

Firebase has introduced some nice query functionality that can help you narrow down your queries to just the data points that you need... but you still have to pull all of the nested data. You can't query shallow copies of your data, so break it out early into shallow data structures. For instance, you may want to try something like this:

{ "users": [ "-JitsIxFfAjBjaTqs0-x": { "name": "Chris", "email": "[email protected]", "isAdmin": true, "isModerator": true } ], "transactions": [ "-JitsIxFfAjBjaTqs0-x": { "date": "2/15/2015", "price": 10, "quantity": 5, "productName": "Bass-o-Matic 3000" } ] }

Notice how the user objects and the transaction objects share the same key? That's right! You could have nested transactions under each user, but then you'd be stuck querying all of the user's transactions every time you wanted to pull down the user. Instead, try breaking the transactions out into a separate data structure that shares a key with the user object's key.

Security rules

Firebase's security DSL is powerful, but limited. Make sure to read the docs and get an idea of what's possible before working on your data structure. Here's a glimpse of some of my security rules.

{ "rules": { "$quiverCMS": { ".read": "auth.email == '[email protected]'", ".write": "auth.email == '[email protected]'", "settings": { ".read": true, ".write": "data.parent().child('acl').child(auth.uid).child('isAdmin').val() == true" }, "users": { ".read": "data.parent().child('acl').child(auth.uid).child('isAdmin').val() == true", ".write": "data.parent().child('acl').child(auth.uid).child('isAdmin').val() == true", ".indexOn": ["email", "google", "facebook", "simplelogin", "messageable"], "$user": { ".read": "auth.uid == data.child(auth.provider).val() || data.parent().parent().child('acl').child(auth.uid).child('isAdmin').val() == true", "lastLogin": { ".read": "auth.uid == data.parent().child(auth.provider).val() || data.parent().parent().child('acl').child(auth.uid).child('isAdmin').val() == true", ".write": "auth.uid == data.parent().child(auth.provider).val() || data.parent().parent().child('acl').child(auth.uid).child('isAdmin').val() == true", }, "messageable": { ".read": true, ".write": "data.parent().parent().child(auth.uid).child('private').child('isAdmin').val() == true" }, "public": { ".read": "auth.uid == data.parent().child(auth.provider).val() || data.parent().parent().child('acl').child(auth.uid).child('isAdmin').val() == true", ".write": "auth.uid == data.parent().child(auth.provider).val() || data.parent().parent().child('acl').child(auth.uid).child('isAdmin').val() == true", }, "private": { ".read": "auth.uid == data.parent().child(auth.provider).val() || data.parent().parent().child('acl').child(auth.uid).child('isAdmin').val() == true", ".write": "data.parent().parent().child('acl').child(auth.uid).child('isAdmin').val() == true" } } } } }

Notice that I'm always walking up to the acl (access control list) part of my data structure and checking "isAdmin" at that point? Here's as sample of that data structure:

{ "acl": { "facebook:10101859865097409" : { "isAdmin" : false, "isModerator" : true, "userKey" : "-JiTh5rYeQfdWIjfSb0W" }, "google:107273186587392813457" : { "isAdmin" : false, "isModerator" : true, "userKey" : "-JiTh5rYeQfdWIjfSb0W" }, "google:116279478330828791198" : { "isAdmin" : true, "isModerator" : true, "userKey" : "-JiThb5tMjxR60Ikd7OO" }, "simplelogin:1" : { "isAdmin" : true, "isModerator" : true, "userKey" : "-JiThb5tMjxR60Ikd7OO" }, "simplelogin:2" : { "isAdmin" : false, "isModerator" : true, "userKey" : "-JiTh5rYeQfdWIjfSb0W" }, "simplelogin:5" : { "isAdmin" : false, "isModerator" : false, "userKey" : "-Jidu-Vw3okEBIG31yxb" }, "simplelogin:6" : { "isAdmin" : false, "isModerator" : false, "userKey" : "-JiduXFR4ZVMqPRrubDV" } } }

I have a listener in my Angular Run function that's listening to changes in auth. Every time auth is given or taken away, it calls back to my server, which updates that ACL accordingly.

var endpoint = "https://something-or-other.firebaseio.com", ref = new Firebase(endpoint), auth = $firebaseAuth(ref); auth.$onAuth(function (authData) { if (authData && authData.uid) { // Make sure that the user has been created and redirect if needed AdminService.getApiUser(authData).then(function () { if (~AdminService.loggedOutStates.indexOf($state.toState.name)) { // Redirect away from the login page if necessary AdminService.redirect(); } }); } });

Multi-provider auth

The Firebase docs have an example of using the uid from the auth's JWT as each user's key. This model works great as long as you are using only one type of login, because the uid is not consistent across auth providers. For instance, your uid when using a username and password will look something like "simplelogin:1". You can use the same email to log in with Google OAuth, and your uid might be "google:116279478330828791198".

There is no simple, automated way to relate those two uids, so you'll need to do that manually on the server. I have a server process that scans all new logins to see if there's already a user with a matching email address, at which point I make a new entry in the ACL with the new uid. I can then reference any uid from my security rules via the ACL.

This is a work in progress