Save articles from the web on Evernote from iOS

Evernote got a praised redesign to follow the iOS 7 guidelines. But one problem was yet to be fixed: saving pages from the web with your iOS device. Previously we hacked the web clipper, which worked fine on the iPad, but broken with the newer version of iOS. Today we’re going to build a bookmarklet to save web articles on Evernote from Safari.

I kept this idea on hold for quite some time. Drafts has Evernote actions that allows to convert Markdown to HTML when exporting a note. Saving notes in HTML preserve most of the aspects of content on the web. All I needed was a method to grab the Markdown from a web article and send it to Drafts. That’s when things got nasty.

One day I found Brett Terpstra’s project Marky the Markdownifier, which grabs a web page and generates the Markdown from its code, then it displays the result on a page. It is not 100% functional on iOS, but I knew this was how I would create this workflow.

Yesterday, a slow day at work, I learned that Marky goes much deeper and has its own API. I managed to write a Python script to tie both ends with only a couple of lines, yet I didn’t want to appeal to Pythonista this time.

Then, Jonathon Duerig introduced me to the XMLHttpRequest in Javascript, which makes requests and allows to work on them as variables. I bothered Jonathon until we came up with something workable, yet some API limitations stopped us from fulfilling the goal. I emailed Brett and he was extremely helpful, in less than 1 day he modified Marky’s API to make the bookmarklet work. I couldn’t thank them both enough.

Before we proceed, this bookmarklet is not perfect, it works great with web articles, but it selects the correct content using Readability, which means you may keep some leftovers unless the article is optimized. Also, the conversion also skips a couple of elements from the Markdown syntax, I noticed Marky wraps italic text with underlines, meanwhile Drafts doesn’t convert those to HTML, it does with single asterisks.

Disclaimers aside, if you don’t know how to add a bookmarklet to your iOS device, bookmark any page, yes, this one is fine, then edit this bookmark, change the title and paste the script below on the url input. Save and give it a try.

javascript:(function()%7Bvar%20request=new%20XMLHttpRequest();request.open(%22GET%22,%22http://heckyesmarkdown.com/go/?read=1&preview=0&showframe=0&output=url&u=%22+encodeURIComponent(location.href),true);request.send();request.onreadystatechange=function()%7Blocation.href=%22drafts://x-callback-url/create?text=%22+request.responseText+%22&action=Markdown%20to%20Evernote%22%7D;%7D)();

This bookmarklet will ask Marky for the Markdown of the current page, you can change read=1 to read=0 to disable Readability, although I recommend keeping it. Later, you can spot the Drafts action, it automatically grabs the output from Marky and triggers the built-in Markdown to Evernote action. You can use your own Evernote actions, just remember to manually encode them before replacing in the bookmarklet.

I want to thank Jonathon and Brett again for helping me pull through this bookmarklet. You can check Jonathon’s website and follow him on App.net. Brett’s work is supported by his readers, so you can show your appreciation by subscribing to his site. You can also follow him on Twitter.

You know where to find me, but right now I’ll put all those pesky web articles on my Safari’s Reading List where they truly belong.

UPDATE: The feedback has been great so far, so I'm including a couple of tips.

If you don't want to trigger the Drafts action, remove this part of the bookmarklet:

+%22&action=Markdown%20to%20Evernote%22

As many of you have noticed, the current bookmarklet uses a date stamp as title. If you want to use the actual page title, first we have to modify our Drafts action. Go to settings (the cogwheel), then Manage Actions; find the Markdown to Evernote action and tap on it, the action will expand. You're looking for a toggle to First line as title, turn it on.

Then change your bookmarklet to this one here:

javascript:(function()%7Bvar%20request=new%20XMLHttpRequest();request.open(%22GET%22,%22http://heckyesmarkdown.com/go/?read=1&preview=0&showframe=0&output=url&u=%22+encodeURIComponent(location.href),true);request.send();request.onreadystatechange=function()%7Blocation.href=%22drafts://x-callback-url/create?text=%22+encodeURIComponent(window.document.title+%22%5Cn%22)+request.responseText+%22&action=Markdown%20to%20Evernote&afterSuccess=Delete%22%7D;%7D)();

I'm super glad on the feedback I'm receiving and I hope you make good use of these bookmarklets.