Posted 01.03.2013

Setting Up a Site with SSH

Recently, I was trying to set up a project for a client using SpringLoops. I had worked with git before through gitHub, but never SpringLoops and never with SSH.

Several hours later, I got everything up and running. So, in an effort to save you from the same heartache, I’d thought I’d share.

Login to your SpringLoops account.

Spring Loops Account Page
Click on your project folder

Spring Loops - Source and Deploy Tab
Click on the Source and Deploy tab

Spring Loops - My Repository Access
Click on the My Repository Access Details button

If a repository has already been set up for a particular project, you can click on the Source and Deploy tab and look for the green Access Details button
Spring Loops - Repository Access
A modal window will appear displaying your repository access details. Click on the Manage link under SSH keys.

Add an SSH Key
Then, click on the Add a new SSH key tab.

Now, switch over to the Terminal.

First, you’ll need to check for existing SSH keys.

In Terminal run:

cd ~/.ssh

This checks to see if there is an existing directory named .ssh in your user directory.

If there is, you’ll want to backup your existing keys.


This lists all the subdirectories in the current directory. You should see something similar to the following:

config id_rsa known_hosts

Let’s create a folder to hold our backups

mkdir key_backup

Then, we want to copy all our existing keys into this folder

cp id_rsa* key_backup

Then, get rid of the duplicate files.

rm id_rsa*

Now, we need to generate a new SSH key. If you’re on a Mac, this is already built in (I think). At least, I didn’t have to do anything special.

ssh-keygen -t rsa -C “

This generates a new SSH key using the email address you provide.

The prompt should then say something like:

Enter file in which to save the key (/Users/you/.ssh/id_rsa):

Simply, press enter.

Now, you’ll want to enter a passphrase. On Mac OSX Leopard and later, there’s an ssh-agent built in so your keys can be saved in the system’s keychain to make life (a little) easier.

Enter passphrase (empty for no passphrase): [Type a passphrase]
# Enter same passphrase again: [Type passphrase again]

Then, you should see something similar to the following:

Your identification has been saved in /Users/you/.ssh/id_rsa.
# Your public key has been saved in /Users/you/.ssh/
# The key fingerprint is:
# 01:0f:f4:3b:ca:85:d6:17:a1:7d:f0:68:9d:f0:a2:db

Excellent! Now, you just need to add the key to SpringLoops. Unfortunately, it isn’t as easy as copy and paste…well, kind of. You have to make sure you copy the code exactly. No extra whitespace.

In terminal, type

pbcopy < ~/.ssh/

This copies everything you need to your clipboard. Now, go back to your SpringLoops window. You should still have the Add a new SSH key window open.
Add an SSH Key
Paste your key into the textarea. Then, click on the blue button, Create this New Key. You’ll now see your key listed under the Manage your SSH keys tab.

Whew. We’re almost done.

I know just enough about git to be dangerous. Half the time I use the Terminal, the other half of the time, I use a GUI. I’m always afraid I’ll be one character off and do something permanently damaging in the Terminal. Besides, as a designer, a user interface is always better (well, as long as it’s well designed). In this particular instance, I’ll be using Tower.

I came across Tower, because it was Chris Coyier’s weapon of choice in his Getting off FTP and onto Git Deployment with Beanstalk screencast. He also has another screencast, Let’s Suck at GitHub Together that’s on my list of things to watch.

Tower - Repositories
Click on the Repositories button in the top left.

Tower - Manage Repositories

Click on the Manage Repositories button.
Tower - Clone Remote Repositories
Click on the Clone Remote Repository button.
SpringLoops - Repository Access Details
Now, go back to SpringLoops and get your SSH address.

Tower - Clone Remote Details
Paste it in the Repository URL in Tower.

Tower - Clone Remote Details
Change Authentication to Private Key.

Under Key Password enter your passphrase that you used when creating your SSH Key.

Under, Clone To: find the directory you want to save your repository in.

Click on the Clone button.


See?! That wasn’t that hard…if you know what you’re doing. gitHub has some excellent resources and documentation on their site. — and if you’re using gitHub instead of SpringLoops, the steps are pretty similar. Feel free to check out gitHub’s SSH guide.

Posted 10.30.2012

I Decided to Look at Ruby on Rails

I’m a PHP girl. I’ve been writing PHP for the past 7 years. I’ve heard so much about Ruby lately that it’s hard not to wonder, “Is it really all it’s hyped up to be?” I’ve been reading plenty of blog posts (here and here) trying to decide if it’s worth investing the time to learn (yet) another programming language. Part of me is eager is to learn something new and is up for a new challenge. I like to think, the more tools I have in my toolbox, the better suited I’ll be for various projects. … So, this is my journey to learning to looking at Ruby and Ruby on Rails. Join me, if you want, we can struggle together.

…yes, the two (Ruby and Ruby on Rails) are different. Ruby is the programming language. Ruby on Rails is the framework that sits on top of Ruby. If I can put it in PHP terms, PHP is the language, CodeIgniter is the framework. Great, so, what’s a framework?

Well, for almost every project, there certain things you always have to do. Websites, for example, I (almost) always have to connect to the database. I could write that code every time, or I could use a framework that has built in functions that do the work for me. A framework gives me structure and a starting place.

While I’m eager to get my hands dirty and jump in with Ruby on Rails, I know I first need to learn Ruby before jumping in the deep end. Rails will make a whole lot more sense and I’ll be able to go a whole lot further in the long run, if I have a foundation first.

I’ve seen The Well Grounded Rubyist mentioned several times on various sites, so I decided to buy the book and start reading. Call me old school, but I prefer books over videos. I like being able to set my own pace, actually see the words, highlight and take notes. I’ve also looked at Code School, but for where I’m at right now, I feel like it moves a little fast and I’m having trouble connecting all the pieces together. I might find it more helpful, though, after I have a few chapters with this book under my belt.

Installing Ruby

I work off a MacBook Pro, running Snow Leopard (I know). It came with Ruby already installed, but it wasn’t the latest version.

I found an excellent blog post by David Benjamin explaining how to get everything up to speed.

I don’t want to be redundant, so I’ll let you click over (just this once) and read his post. –However, I will share a few of my hold ups:

I don’t have a lot of experience with the terminal.

I took a C++ class in college where we had to use the Terminal, so I at least have a basic understanding, but it’s been a while and really, the only commands I still remember are:

cd change directory
pwd display the current path
ln display the contents of the current directory

NetTuts has several posts that will help you get comfortable with the Terminal:

I use Sublime instead of TextMate.

So, instead of using the mate command (as listed in the instructions) to create a new file, I figured out how to call Sublime from the command line:

ln -s "/Applications/Sublime Text" ~/bin/subl

So instead of saying mate ~/.profile, I used subl ~/.profile

I had trouble finding the bin folder.

I finally found it. If you go to the root directory > usr directory, it’s there.

Terminal - Finding the bin Folder

With those things out of the way, I was able to easily follow Dan’s instructions.

Understanding the difference between Ruby and ruby

(Apparently) the difference between Ruby and ruby is more than just an upper and lowercase letter. Ruby is the actual language, while ruby is the interpreter.

So, you’ll write Ruby files (with the extension .rb). Then, when you get ready to run the file, you’ll use ruby in the command line to interpret the file for you.

Your first Ruby Program

Create a folder called Ruby for all our code. Mine’s sitting in my Documents folder. Don’t worry, I didn’t do anything fancy like use the Terminal. I simply created it in finder. I’ll keep all my Ruby code there (crazy, I know).

In Sublime, I’ll create a new file and save it to that folder. I’ll call it “first_program.rb”

…BUT… if you did want to be fancy and feel really smart, you could do all this from the Terminal:

Terminal - mkdir for first Ruby program

Inside the file, I’ll type:

puts "I'm writing Ruby"


Now, in the Terminal, I’ll navigate to that folder. I’ll run the interpreter:

Terminal - ruby first_program.rb


…If you don’t see this and got something like this, go back to your file in Sublime and make sure that you have code quotes " " and ' and not fancy ones.
Terminal - error when running ruby first_program.rb

OK, so what just happened in our code?! (It drives me crazy when authors say “Write this.” I write it and they say “Good job!” and I don’t even know what I wrote or what I did! For me, it’s just as much (if not more) about understanding the code, so I can use it in various circumstances in the future, as it is about completing the exercises.

In Ruby puts just means print. Send it to the screen. If you’re a PHP person (like I am), it’s just like echo. The only difference, is that puts adds a line break automatically to the end. So, none of this “\n” junk.

NOTE: Where did they get puts anyway? That doesn’t even sound like good English! Well, it’s an abbreviation for put string.

What if you want some of that “\n” that junk? Well, Ruby has another method you can use called print that doesn’t add “\n” to the end. I’ll show you what I mean. Open your first_program.rb back up. Update it to look like this:

puts "I’m writing Ruby"
print "This is my first program and "
print "it runs like a champ."

Save. Now, back in the Terminal, run your ruby first_program.rb command again.

NOTE: In the Terminal, you can hit the up arrow on your keyboard and it will automatically pull up the last command you entered. Keep hitting the up arrow and it will keep cycling back, showing the command before that. This makes it helpful, especially if you keep running the same commands over and over again.

See what I mean with the difference between puts and print?

Terminal - puts and print

OK, so, this might seem super simplistic, but the important part is we’ve started(!) and that’s something worth celebrating!

Below, I’ve listed a few tutorials that I’ve dabbled in, if you want to jump in a little deeper or move a little faster!


Posted 10.18.2012

Mobile Site Development: Debugging sites on my iPhone and iPad

As I’ve been gathering links for my 5 at 5 roundups, Adobe Edge Inspect kept resurfacing. I finally installed the app across all my devices Mac, (iPad, iPhone, and the extension for Chrome). Good gravy, this program is awesome!

What it does

  1. It will automatically send any page you load in Chrome to your iPhone or iPad
  2. It allows you to use your Chrome Web Developer tools with your iPhone or iPad

Getting it set up

  • Install the app on all your devices
  • Sync your devices. If you’re not paying for Creative Cloud, you can only have it running on one device at a time.
  • Click on the browser extension. Then, launch the app on your iPhone / iPad (your devices must be on the same wireless network). It will give you a passcode to enter.

  • Now, any page active in Chrome will automatically load on your device.

iPhone Adobe Edge loaded

  • If you click the < > it will pull of Chrome’s developer window.

  • Click on the device you’re using in the Web Developer panel

Chrome - Edge Inspector Web Developer Tools

  • It will load the Inspector panel. Any code you highlight will then be highlghted on your device. = SUPER COOL!
Edge Inspector in Chrome, Web Developer Tools
Using Adobe Edge Inspector on my iPhone

Couple this with LiveReload (Bonus)

I also found a program called LiveReload. In web development, there’s a lot of change the code, save, reload the browser. Make another adjustment, save, reload. Rinse and repeat. This program simplifies that process, so that when you save your file, the browser will automatically be refreshed.

A blog post on Adobe’s site had instructions for integrating this new workflow with LiveReload with Edge Inspect. (Before you get confused, Edge Inspect used to be called Shadow)

As I do more and more mobile web development, I know that these tools will prove invaluable. What are other tools you use when developing for your mobile devices?