Jessica Lord, open web developer—designer

Twenty Twelve

  • By Jessica Lord
  • 2012-12-31
  • general

map of year

Farewell, 2012! It’s been real. Went a lot of places during my Code for America fellowship this year, but not in middle America, which is just as well, I needed a place to drop a vertical calendar in this map.

Code for America was the best decision I’ve made and this has been the best year I’ve had. That’s it and that’s all. #woowoo

Happy New Year!

San Franniversary

  • By Jessica Lord
  • 2012-11-26
  • general

san franniversary

It’s my San Franniversary! A year ago today I flew to California for the first time to do this CfA thing. Of course, I now live in the warmer, flatter, node.js-ier and according to me, all around nicer Oakland, but that doesn’t play as nicely with ‘anniversary’. Also, what a year!

Multiple Heroku Accounts

  • By Jessica Lord
  • 2012-11-25
  • heroku, web dev

I finally actually sat down to tackle my multiple Heroku accounts problem. I started by following Chris's comment and using a plugin. Something went awry, probably my fault, but I eneded up uninstalling it (which turns out to be a pain) and figuring out how to do what it does manually.

Create new keys for accounts

First, create new keys for each of the accounts you’re setting up. For me that’s a work account and personal account.

ssh-keygen -t rsa -C "your@email.com"

When it asks what to name it, give it a name that's easy to recall, like identity.heroku.work.

Configure your system .ssh

Next, you have to edit your .ssh/config file and set up new hosts. If you use Textmate, you can type mate ~/.ssh/config in terminal. Add these lines, changing out the work/personal and IdentityFile to match your needs/keys.

Host heroku.work
 HostName heroku.com
 IdentityFile ~/.ssh/identity.heroku.work
 IdentitiesOnly yes
Host heroku.personal
 HostName heroku.com
 IdentityFile ~/.ssh/identity.heroku.personal
 IdentitiesOnly yes

Configure your git repo

Now edit the .git/config files. Inside of your root directory for the repo, type mate .git/config to open the file. It will look something like this, but under [remote "heroku"] you will change the url from heroku.com to heroku.work (or whatever you're calling your different accounts).

[core]
 repositoryformatversion = 0
 filemode = true
 bare = false
 logallrefupdates = true
 ignorecase = true
[branch "master"]
[remote "heroku"]
 url = git@heroku.work:splost.git
 fetch = +refs/heads/*:refs/remotes/heroku/*
[remote "origin"]
 url = git@github.com:jllord/splost-heroku.git
 fetch = +refs/heads/*:refs/remotes/origin/*

Tell Heroku which keys to use

In Terminal, navigate to the root directory for the repo and heroku login to the account associated with that repo. You'll need to tell heroku what key to use with that account.

heroku keys:add ~/.ssh/identity.heroku.work.pub

Repeat for other repos you have associated with that account. Then navigate to the root of a repo with a different account, make sure to now heroku login with your other account login information. Repeat the steps for adding the keys to this account (only add the other account, ie, identity.heroku.personal).

So many keys, so much fun. If you are like me and had made a hot mess of keys, it may be useful to list your keys (in heroku and on your computer), see what's going on and clean up. Now I have one key that github uses and two keys for my two Heroku accounts and things are running much more smoothly.

Sources

  1. Heroku Accounts plugin Github
  2. Multiple Heroku Accounts Stackoverflow Answer
  3. Keys in Heroku Dev

Your Own Instagram Feed

  • By Jessica Lord
  • 2012-11-13
  • web dev, spreadsheets, sheetsee, instagram

instagram ss

I know Instagram's just come out with web profiles, but they’re not on my page and they’re not in circles. So quick and dirty (it took longer to write this post, see note on code) I put up my photos, here, and in circles. Some weeks ago I started using an ifttt.com (which is so, so awesome) recipe that sends my Instagram photos (dates and captions as well) to a Google Spreadsheet. I’m all about Google Spreadsheets. The same spreadsheet powers the Instagram portion on my dashboard page.

The Parts

I use tabletop.js to get my spreadsheet data into usable json. Once I’ve got that data, I tell mustache.js to take it, format each piece (I’m using just the url for the Instagram photo) into a div and then place all of those divs into the holder waiting patiently for it in my html. I use CSS to format it into circles.

The Code

Don’t even get me started on trying to format code snippets in WordPress. Ugh. So, sorry there are no indents right now.

The HTML/CSS

<head>
  <!-- just showing the important parts, you'll obvs have a few more things on your page -->
  <!-- load in tabletop and mustache -->
  <script src="/wp-content/themes/Starkers/tabletop.js" type="text/javascript"></script>
  <script src="/wp-content/themes/Starkers/ICanHaz.js" type="text/javascript"></script>
</head>
<style>
  /* confine your image to a circle */
  .instaImgCirc img {border-radius: 1000px;}
</style>
<body>
  <!-- this dude waits patiently to be filled with stuff -->
  <div id="instagram"></div>
</body>

The JS

<script id="instagram" type="text/html">
  {{#rows}}
  <div class="instaImgCirc"><img src="{{instasource}}" width="100%"/></div>
  {{/rows}}
</script>
<script type="text/javascript">
  // Your spreadsheets URL
  var URL='https://docs.google.com/spreadsheet/pubkey=0Ao5u1U6KYND7dGRZbTUwd3JQZ1k3OE9KTVZqZUYwZHc&single=true&gid=0&output=html';
  //
  function loadSpreadsheet() {
    // let's get this party started
    Tabletop.init( { key: URL, callback: showData, simpleSheet: true } ) }
    //
    // use this if you want to use a specific number of your most recent Instagrams
    function getLast(array, howMany) {
      start = array.length cut = start - howMany
      if (start < 20) {
        return array
      } else {
        array = array.splice(cut) return array.reverse()
      }
    }

  document.addEventListener('DOMContentLoaded', function() {
    loadSpreadsheet() })

  showData = function(data) {
    var instagram = ich.instagram({
    "rows": getLast(data, 12)
    // use "rows": data.reverse() if you want to use all the Instagrams in your spreadsheet
  })
  document.getElementById('instagram').innerHTML = instagram;
  }
</script>

Later Ons

I’d like have my captions appear when hovering over the image and to cue up, say, just 20 photos at a time and have new photos automatically appear without refresh. Perhaps this will happen on the 12 hour plane ride I have tomorrow.

 

WordPress on Heroku and S3

  • By Jessica Lord
  • 2012-11-09
  • heroku, web dev, wordpress

The other week I moved two WordPress sites to Heroku and their media uploads to S3. How happy it’s made me!

For the first I used this tutorial, which sets up WordPress with Postgres using this Github repo - but then I moved the other site (this one!) with this tutorial and used the new-ish on Heroku ClearDB for mySQL. I used the tantan-s3 Wordpress plugin to connect to a bucket on my S3 account. And BAM.

A couple of notes:

  • If you’re using the second tutorial, on step 8, I changed the database creds in my wp-config.php file (not wp-admin.php).
  • Also, remember, you won’t be able to update WordPress or add themes or plugins when hosting on Heroku. But it’s not hard, you’ll just add the files/folders to your set of WordPress files and re-push them to Heroku.

Multiple SSH Keys

Unfortunately, it turned out to be a hot mess for me because the first site is a project for work, so it’s on an Heroku account with my work email, the second is this site, my site, so it’s on my personal Heroku account. Actively working on both and needing different SSH keys is a pain. If you run into this, here’s what I’m doing (suggestions welcome!). First, add a new key. Then, when you’re trying to push and it tells you:

!  Your key with fingerprint blahblahblah is not authorized to access blahblah

Remove that key and add the one your stored earlier.

ssh-add -d ssh-add ~/.ssh/heroku_rsa

Pointing your domain to the site is easy, too. Heroku has the steps here.

Sources

  1. WordPress on Heroku in 2mins video
  2. WordPress Heroku Github Repo by mhoofman
  3. Migrating WordPress Blog to Heroku by Pardner Wynn
  4. Custom Domains on Heroku