evernote

This tutorial is sponsored by the Save Joseph campaign. Only 6 more days to save one man from a roomful of teeth. http://savejoseph.org.

I've recently been using the Evernote module to blog, which has made my life surprisingly more rich. After building the module, I started using it right away and found it was the missing piece in creating a workflow that would encourage quality, rapid posting - something I've always wanted to be able to do. Now that its set up, I feel like I can write with virtually no overhead, and using images - kind of tricky when using webforms and wysiwyg - is about as easy as it can get. Even adding annotations is super simple with Skitch (writeup for a workflow with Skitch is imminent).

The ease with which I can create content made me wonder if maybe I could run an entire Drupal site's content off of Evernote. So I gave it a shot when setting up http://josephcowman.com, and it worked like a charm!

What I've done is set up four separate feeds in the Evernote module, three of which correspond to different content types, and a third which imports unpublished blog nodes with instructions for using and administering the site:

The Gallery feed expects notes with a single image. This image is added to an imagefield and is displayed in a gallery fashion on pages like http://josephcowman.com/gallery and http://josephcowman.com/gallery/untitled. The author can put the image anywhere in the post and it will be stripped out using the HTML input filter.

The Blog and Pages feeds, on the other hand, pulls any number of images in and replaces them with local copies of the images, so they would end up looking something like this blog post.

The idea in setting up the site this way is to make management of the content extremely easy. Since Evernote has a desktop application, all the site admin has to do is create or edit a page in Evernote on their computer (even offline), and any changes get pulled into the site on a cron run. So, no log-ins, no working with web forms, it's just working directly with the content without having to deal with the middle man.

I'd love to see more people experimenting with this kind of integration. It makes for a pretty tight workflow. I even take this a little further with my blog (a more detailed article will be forthcoming) by automatically Tweeting and sending my post to Facebook through Evernote as well.

OCR-ed content: 
Evernote Feeds Name Account Type Description Edit Delete Gallery Joseph's account gallery Edit Delete Pages Joseph's account page Edit Delete Blog Joseph's account blog Edit Delete Docs Joseph's account blog Edit Delete Account TYPE :ini LT-T?


You can't get syntax highlighting in Evernote directly, but what you can do is use an online syntax highlighting service and copy the highlighted content straight from the page.

First, I went to http://tohtml.com/auto/ and pasted in some code:

<?php
  for ($i=0; $i<4; $i++) {
    echo 'This is a test of syntax highlighting in Evernote using Pastebin';
  }
?>

Then, I copied the resulting code from the output, which you see here, and paste it into an Evernote note. 

You could also use the Evernote Firefox plugin to create a note straight-up, but it's a pain trying to undo the CSS styling to get some plain text in before your code, so I would create a new note, add a couple of blank lines to the beginning, and paste in the code after that.

The result is what you see below. This works because Evernote stores HTML as HTML, and if there's embedded style tags, those will get copied over too. I first tried this experiment with Pastebin, but it didn't work because the styling is not inline.

<?php
  for ($i=0; $i<4; $i++) {
    echo 'This is a test of syntax highlighting in Evernote using Pastebin';
  }
?> 
OCR-ed content: 
Online syntax highlighting for &quot;PHP&quot; HTML code: 'pre style colon #000000 backgroundi/lf tttt '&gt;&lt;epan stylo- color &lt;npan style- colon #000000; background ic9 &gt;t#xa0; &lt;apan stylo-' colon #000000; sa EOLIAN background:*! foS; &lt;apan style- color bacisiour.d I&lt;«8; THUMB /pro- no,..- reoJOUVV Nfl coupon oay. Ill MM eoing ftr»it 90% of» Gt-JW COME so Preview &lt;?php lor (Si-Oi tl&lt;1&gt; til-) echo 'This ia TOOT of SYNTAX highlighting In Evornoto using Paatobin'; Source code or (Sl-0; Si&lt;*; Si&gt;*) echo 'Thia ia tost of syntax highlighting in jornoto using Past* Style Hi Type: RECENT Type: PEP 00000 xapan ODE OR SHAN FOR colon #00 0000 j background: MUDD WITAN is IN style&quot; color [#000000; NAIROBI COlori#a65700j SCHOOL DAY in |*nH (Si


// $Id:$

CONTENTS OF THIS FILE

  • Introduction
  • Installation
  • Usage

INTRODUCTION

Creator: ChrisShattuck <http://drupal.org/user/166383>

The original idea behind the Evernote module was to integrate the pulling of content from Evernote for rapid blogging purposes. My hope is to further abstract out some of the tools used to do this so that the module can be used as an API for open-ended integration with Evernote.

This module will do the following:

  • Establish a connection with an Evernote account
  • Allow an administrator to set up a 'feed' that will perform a one-way sync from Evernote to Drupal based on multiple criteria. For example, you can set up a feed to pull content with a particular tag.
  • Allow 2-way syncing of 'tags' as taxonomy terms
  • Downloading images and other resources from Evernote notes into image or file fields
  • And a bunch more

INSTALLATION

See http://drupal.org/getting-started/install-contrib for instructions on how to install or update Drupal modules.

You will also need to add the Evernote API library to Drupal. Right now the API isn't quite set up for web applications like this, so you'll need to do some finagling. You can use the instructions below to build the library yourself, or you can go to this URL to read about how to download a ZIP file with this already done: http://chrisshattuck.com/blog/instructions-setting-evernote-library-evernote-drupal-module

  1. Download the Evernote API (labeled "Evernote API") - http://www.evernote.com/about/developer/api/
    2. Expand the zip
    3. Copy the folder /sample/php/EDAMWebTest/lib/HTTP to /lib/php
    4. Copy the folder /sample/php/EDAMWebTest/lib/OAuth to /lib/php
  2. Next we need a few PEAR libraries that might not be installed on your server, so...
  3. Download the HTTP_Request PEAR script and add to /lib/php/HTTP - http://pear.php.net/package/HTTP_Request/
  4. Download the Net_URL PEAR script and add to /lib/php/HTTP - http://pear.php.net/package/Net_URL/
  5. Download the Net_Socket PEAR script and add to /lib/php/HTTP -http://pear.php.net/package/Net_Socket/
  6. Rename the folder /lib/php to evernoteand move it to your /sites/all/libraries/folder

USAGE

  1. Go to /admin/build/module and click the 'create a new account' link
  2. If you don't mind saving your Evernote username and password on the server, fill in the username and password at the bottom of the form. To receive a temporary authentication from Evernote, fill in the widget.
  3. Once the account as been added, you can click on 'Add feed' next to the account to create a feed.
  4. Fill out the form to create the criteria for the feed. When cron runs, it will import any new matches and update any changed notes.


Below are instructions for putting together a PHP-based API library for Evernote, particularly for the Evernote Drupal module. I've attached a ZIP file to this post (see the bottom) which can be used temporarily until the brilliant Evernote folks have the time to compile a distribution.

If you use the ZIP file included below the following instructions (evernote-api.zip), just unzip it and add it to your /sites/all/libraries folder. To put it together yourself, use the following instructions.

  1. Download the file here (labeled "Evernote API) 
  2. Expand the zip
  3. Copy the folder /sample/php/EDAMWebTest/lib/HTTP to /lib/php
  4. Copy the folder /sample/php/EDAMWebTest/lib/OAuth to /lib/php
  5. Next we need a few PEAR libraries that might not be installed on your server, so...
  6. Download the HTTP_Request PEAR script and add to /lib/php/HTTP
  7. Download the Net_URL PEAR script and add to /lib/php/HTTP
  8. Download the Net_Socket PEAR script and add to /lib/php/HTTP
  9. Rename the folder /lib/php to evernote and move it to your /sites/all/libraries/folder


The problem

Often I come to a crossroads where I can either experience a moment or capture it. This is a difficult decision. Do I take a picture, or do I watch with my own eyes? Do I think unrestrained, or do I write it down? Do the benefits of having the memento or reminder outweigh being a little more in the moment? 

That question is tough enough. But then the time spent out of the moment is compounded when sharing the moment with others. Downloading images from the camera, uploading them to Flickr, tweeting about it or updating your Facebook status. It takes time, and it's hard to measure the payoff. Are these artifacts that we're sacrificing a little slice of our lives for really worth it?

I'm pretty sure good to share, particularly with the right motive. If it took no time at all, the effort can only land on the side of good to convey interesting experiences or ideas to others. We can add to the global consciousness and do our part in the push towards greater things. But the reason I don't blog, and I don't tweet, and I don't FB these days is because the cost is too steep. I have specific work-oriented goals I'm shooting for, I have a son I'd love to spend a lot more time with, and another one on the way. I have a yard to mow and a body to keep from languishing. I feel like I'll have time to share someday, but usually it's not now. Or, when I share it can only be for very specific reasons that match up with other goals too.

I've been steadily working towards solving the first problem of capturing. A service called Evernote (you may have heard of it) plays a huge part. Of all the data-capturing applications I've worked with, Evernote streamlines the capturing process. It has a global hotkey (at least for Mac), so I can use it even if it's not open. All I need my mind to do is think that hotkey, and in a second (or a couple if the app has to open) I'm capturing. It syncs up with my iPod Touch so I can capture on the road.

In order to enrich my ability to capture other media, I recently purchased a mobile phone with audio and video capturing abilities. I can e-mail these to my Evernote account. This streamlines the capturing process so it feels like the cost is about as low as it can get without having embedded photo sensors in your forehead. No transferring of media, it just syncs up on its own.

This wasn't enough for me. I also wanted to tackle the problem of the lowering the overhead of sharing to the point where it felt like it was no longer a matter of if I had the time, but rather if the information was worthy of sharing.

One issue I have with sharing information is the multiplicity of channels. How can I expect that someone will monitor my Flickr, Twitter, Facebook, Blip, Digg and Delicious accounts, plus several of my own media channels. And even though there is some integration between these services, as far as I know there's not a single application that provides a centralized method of distributing media, so managing the distribution of the data I want to share requires hooking into multiple interfaces. Even if there was a unified interface, there's then two places to manage that data - your local copy and the copy on the channel, and I feel like it should be possible to reduce this to one. Change it locally, and it changes on the service as well.

The issue of centralizing the consumption of your media can be solved by pulling in all the data to a centralized feed - like a blog. It can aggregate your tweets, your videos, your blog posts, and anything else. But, there's still the problem of getting that data into the blog in the first place, and managing it once it's there.

The solution

So, I started putting a couple of pieces together. Evernote provides a method of embedding files of various types inside the notes, and it syncs them with a remote server. I remembered reading that Evernote also had an API, so I started looking into it to see if there might be a way to sync up a web site with Evernote. If so, then I could feasibly create a post locally and have it automatically appear in my blog. If I could centralize my media into Evernote and use it as a blog broadcasting tool, then I would have a solution to multiple problems: 1) Having only one interface for distributing multiple types of media, solving the multiple channels issue 2) Since I capture ideas and information in Evernote anyway, sharing it wouldn't add any overhead at all. 3) If I could broadcast out to multiple channels, I could get a lot of leverage for the data I capture, making it more likely that I would want to capture it in the first place - a useful feedback loop.

The idea really excited me, and as I started digging into the Evernote API, I realized it was totally possible. It's times like these that I'm really happy to be a developer.

I'll be posting more about the solution I came up with, but the idea is to use a Drupal site as a hub which polls Evernote for new notes that meet particular criteria (i.e. they have a particular tag) and adds them as nodes (pages) to the site. Any updates that are made in Evernote are automatically pushed to the site. I built a Drupal module (which will be available soon) that manages this process, and allows two types of tagging - the traditional type which organizes the nodes (i.e. family, recipes, etc) and the second which can be used as triggers for other activity. On this site, for example, I can add a tag called *tweetand Drupal will automatically tweet the node with a shortened URL. If I add a *fb tag, then the twitter post will be sent to Facebook as well.

So just to be clear, here's the workflow:

  1. I create a note in Evernote
  2. I give it the tags *tweet and *fb

That's all. The note is broadcasted to my blog, to Twitter and Facebook. You don't even have to save your note in Evernote, it saves it in the background. If there are any media files attached, it automatically saves them to the appropriate place in Drupal. If that media changes in Evernote, it will be updated in Drupal.

You'll have to excuse me, but I think this is pretty bad ass.

One other issue I wanted to solve was the issue of inter-linking between notes. Evernote is suspiciously wiki-ish, but there's no way to link between notes. What this Drupal module will do is post back a new note with a list of the pages that have been published through the module - with links - so you can copy and paste the links in other notes. Because Evernote has awesome search, it's easy to find the link if you know even a single word.

Oh, and one more piece of awesomeness? Evernote OCRs images on their server, and this module will capture the OCR-ed text and pull it back into Drupal to add to your pages in a variety of ways. Images become searchable! Damn!

The upshot is that I now have a tool that makes it amazingly natural to share information. Of the things that I think are worthy of capturing for my own benefit, there's a handful that I can see being useful to others. To share it, I only have to add a tag.

More to come about this, as well as a release of the Drupal Evernote module. 



Syndicate content