Rename CSS on Compile

I've always wondered if there was automated way to add the .min to production CSS files on compile when using Compass. It just so happens this tiny bit of ruby will do the trick for you.

require "fileutils"

on_stylesheet_saved do |file|
  if File.exists?(file)
    filename = File.basename(file, File.extname(file))
    File.rename(file, css_dir + "/" + filename + ".min" + File.extname(file))
  end
end

By hooking the on_stylesheet_saved compass callback we can gain access to the filename and then we can use that to do our work. For a list of other callbacks and options from compass see the configuration reference.

Multiple SSH keys a solution

Dealing with multiple SSH keys can be a nightmare especially across multiple machines. In my development I use 2 different GIT hosts, github.com, Bitbucket. Setting this up on my Mac was always a giant pain as there was always one key that would not get auto loaded by my .ssh/config file constantly requiring me to $ ssh-add the required key.

The issue was I had multiple keys in the root .ssh directory and it was only loading the root id_rsa key on boot. Which meant I had to manually add the other keys when I needed them.

The solution was much simpler than I thought and provides better management of my keys. The answer, folder per domain or key so now my ~/.ssh dir looks like this:

.ssh/
  bitbucket/
    id_rsa
    id_rsa.pub
  github/
    id_rsa
    id_rsa.pub

and my .ssh/config file looks like:

Host github.com
  User git
  Hostname github.com
  PreferredAuthentications publickey
  IdentityFile ~/.ssh/github/id_rsa
Host bitbucket.org
  User git
  Hostname bitbucket.org
  PreferredAuthentications publickey
  IdentityFile ~/.ssh/bitbucket/id_rsa

Now except for unlocking my ssh keys for use, you do have a password on your ssh keys right?, all my git ssh keys are loaded on boot and simple to use and manage. Adding a new key?

$ mkdir ~/.ssh/DOMAIN
$ ssh-keygen -t rsa -C "Your_Email@example.com"

You'll be greeted by this message

# Creates a new ssh key, using the provided email as a label
# Generating public/private rsa key pair.
# Enter file in which to save the key (/Users/you/.ssh/id_rsa): [Press enter] 

So to add it to our new folder enter (on a mac)

/user/you/.ssh/DOMAIN/id_rsa

It will then ask you for a password and repeat that password and your key is generated. Then just add your new key to the config file and you'll be all set.

Multi-field comparator for a collection

There are many times when being able to sort a collection against two or more distinct columns is needed. Unfortunately Backbone doesn't provide a default way to do that via the comparator function. However, making it happen inside our collection definition is quite straight forward.

For my example I'll be sorting a list of cities and states. The end result we want is to have a list of cities sorted by state.

With the default comparator we get one or the other sorted cities or states.

comparator: function(Model){
  return Model.get('city');
  // or
  // return Model.get('state');
}

To get at multiple we need to understand what the comparator function is actually doing. Backbone uses the sortBy() function to prepare the collection in a always ordered stack(it's not really a stack but go with me on it). Running a compare on a collection returns a -1, 0, or 1 based on where the model should be placed compared to the models it's compared to, thus keeping the collection in a ordered state by moving the order based on the result.

In order to sort on multiple columns we need to give backbone a result that can be sorted that utilizes both columns/fields values. The best way I've found is to use a normalized string. In our city and state example our data is all alphabetical so sorting against them will be easy. If your data set is numerical, however be careful that all your numerals are the same length, i.e. 002, 100, 045. other wise you will get mismatches in the compare.

Now our comparator looks like this:

comparator: function(Model){
  var location = Model.get('state') + '-' + Model.get('city');
  return location;
} 

Which will return strings like 'WI-Madison', 'WI-Milwaukee'. By putting the Model.get('state') first I'm able to sort on state before dealing with individual cities, thus getting me my end result.

Using the same approach you can now sort on as many columns or attributes as needed and get the results you want. The key is remembering how the comparator works by ensuring you return a string that can be uniquely sorted. With this rule in mind you can finally do some advanced sorting on your collections.

Of Jekyll and Hyde

For the last two years or so I've been using SquareSpace as my host and CMS. Hands down, they have the best customer support and SquareSpace 6 is an amazing platform for both easy site setup and their new developers stack is really well thought-out. My one issue is they choose LESS, and while a fine pre-processor, I've chosen SASS/Compass and don't plan on changing any time soon. So for my site redesign I've decided to move from Squarespace to GitHub Pages. I have to say it's really refreshing to completely build a site from scratch again, as opposed to working with a more structured CMS. For this design my toolkit is HTML5 Boilerplate, inuit.css library and I invited Compass to the party to provide some additional CSS3 mixins. I picked inuit.css because I've been an OOCSS proponent for quite a while and @csswizardry has built a great library that does it's best to not influence your design choices like other library/frameworks and IMO delivers on that promise. I picked HTML5 Boilerplate as my HTML starting point for many reasons, most of which I detail in this earlier post. In adding Compass to the stack I've modified a few of the inuit.css mixins to use the helpers and function builtin to Compass. The most interesting thing I'm attempting in this build is to use just <nav> and a elements for all navigation blocks. So my main nav looks like this:

<nav class="nav site-nav">
  <a class="site-nav__blog" href="/">blog</a>
  <a class="site-nav__about" href="/about/">about</a>
  <a class="site-nav__projects" href="/projects/">projects</a>
</nav>

To get this to work I've rewritten the nav and pagination classes of Inuit to require <nav> instead of the <ol> or <ul> elements. My next task is wire up a deeper navigation structure. Credit for this idea goes to @bphogan for his tweet, thinking out loud if it could reasonably be done.

My fork of inuit.css can be found here h3r2on/inuit.css.

Full SQL statements with Ti Alloy collections

Prior to version Alloy 0.3.5 the sql adapter only supported SELECT * FROM table_name which left much to be desired. However, which the release of 0.3.5 you can now query to your heart desire.

var Library = Alloy.createCollection('book');
library.fetch({
    query: 'SELECT * FROM table_1 INNER JOIN table_2 ON table_1.id=table_2.id'
});

The key here is a key change to the sql adapter. To get this functionality in your Collections you'll need to change your models' adpater type from 'sql' to 'sql_new'. This hits the new adapter and allows for the query option. Once Alloy 1.0 releases the adapter will return to just 'sql' but retain the new functionality.