Rapid Web Development

Unit 5, Week 6
SSH, PagodaBox

Homework Review

SSH

No one ever taught me this and everywhere I've worked it was expected prerequisite knowledge. 

SSH stands for "secure shell". SSH basically allows you to "tunnel" to a remote computer and have command-line access.

I've made an account for us. Open a terminal:
ssh wdim351user@direct.illepic.com
Password available in class.

Windows users: Putty. 

SSH keys

SSH keys are files that sit on our local computers that uniquely identify us to remote computers. SSH keys allow us to connect without the use of passwords.

https://www.youtube.com/watch?v=Ex_ObHVftDg

Check if keys exist at ~/.ssh/
Should see id_rsa and id_rsa.pub files if keys exist.

https://help.github.com/articles/generating-ssh-keys

Let's post to G+ and reconnect without a password.

In-Class 5

Make a file on the shared class server named the following:
lastname_firstname.html

Put a little text in it, then verify that you can access it live via:

http://wdim.illepic.com/lastname_firstname.html

Setting up Pagodabox

Rapid deployment to the cloud using using four pieces of our tool chain:

  1. GitHub accounts
  2. SSH keys
  3. Git to pull/deploy
  4. Local virtualhosts for dev

Getting started with pagodabox

  1. Sign up for an account using GitHub authentication option
  2. Make a new app. Try the HTML5 boilerplate: https://pagodabox.com/cafe/noinput/html5-boilerplate
  3. Edit account: https://dashboard.pagodabox.com/account/edit, go to Add SSH key
  4. Go to app, "Show git clone url", clone to your XAMPP/MAMP htdocs directory

Make a local dev environment

  1. Entry in /etc/hosts: pagoda-app.local.dev
  2. Entry in vhosts: pagoda-app.local.dev -> htdocs/pagoda-app-folder-figure-this-out
  3. Restart XAMPP/MAMP

Now, edit your app. Hello world!

git push

Test it live.

Move your code around

  1. Make an empty public GitHub repo for this project. NO README. Then:

git remote add github git@github.com:yourname/repo.git
git push -u github master


Look at your magic GitHub repo full of awesome work!

The workflow

  • You can now edit and test locally by browsing to pagoda-app.local.dev
  • You can deploy to a live, worldwide URL by pushing to PagodaBox
  • You can collaborate and socially code by pushing to GitHub

Homework/Midterm 5a

Read George's replies. Each team will submit 500 words as a PagodaBox app with a plan based on George's responses. Discuss as a team. Include a revamp of ALL wireframes based on your plan. Indicate re-arranged content, navigation, calls to action, suggested technology changes. Add me (illepic) to that pagodabox project as a team member so that I have access.

Homework 5b

Read and digest: http://coding.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

Bonus round if you're still awake:
Read the first 10 chapters here: http://smacss.com/book/
Made with Slides.com