A Capital User Interface Idea
A few weeks ago I saw Ben Stokes’ post about PaperWebsite.com and my immediate reaction was, “I have to be able to do that!” I’ve long enjoyed writing by hand over typing as the tactile feel of of pen or pencil and paper is such an enjoyable one. I particularly enjoy using a nice fountain pen on high quality paper.
Obviously there was a route to doing a workflow like this as Ben had shown. I just needed to figure out a method with a low enough barrier that I could personally implement for doing this with my own WordPress website.
A Quick Solution
Not being a serious coder, I immediately began looking for ways I could leverage some of the IndieWeb building blocks my site supports. Micropub seemed like a no-brainer for the posting portion since I’ve got an endpoint using the Micropub WordPress plugin. Certainly not wanting to manually re-type everything once I was finished writing, I needed a way of converting my handwriting to text and then automating a way to plug that into my micropub client.
A short burst of searching revealed that Google Docs could do Optical Character Recognition (OCR) on photos. I pulled out my IFTTT app and found a recipe for taking a photo and saving it to Google Drive. Then I set up another recipe to watch a particular folder in Google Drive and take whatever text appears in new documents and send it to my website using a webhook that uses my Micropub endpoint. The whole thing only took a half hour from idea to a working prototype. In the end it took a tap to open IFTTT on my phone and another tap to take the photo. Then I had to manually open the document to trigger the OCR. Finally, I had to manually open and edit the post before posting.
I had set the micropub client to post as a draft as a default just in case the OCR wasn’t perfect. This was fortunate as the Google photo OCR was so solid that the letters “Dia” of the microscopic text from the word “Diamond” partially visible on my pen cap that was in the photo got pulled into the post.
In the few times I’ve used this workflow so far, I’ve mostly done straight text and syndicated posts to Twitter, Mastodon, and Micro.blog. Perhaps in the future I might set things up to add HTML links, but they’re fairly easy to add at the editing stage.
Since I started my experimentation, a few others in the IndieWeb community have noticed the paperwebsite.com site. Greg McVerry popped up and linked to it as well. He mentioned that he had a digital notebook with OCR capability. This reminded me that I’ve got both a Livescribe Echo pen and a Rocketbook notebook with a Pilot Frixion pen that has an app for uploading digitized images of notebook pages. I hadn’t done OER with Livescribe in ages, so I pulled out the Rocketbook, which is cleverly erasable and thus reusable not to mention being fairly inexpensive. A bit of quick set up allowed me to take a photo of a page which automatically uploads to Google Drive and does its own OCR process. This already dovetails with my prior process, so the whole thing is much smoother. As a result, I’m composing this post in my Rocketbook notebook and will automatically upload and post it to my site as a draft. I’ll probably add some links, a photo or two, and then publish it in a bit.
Rocketbook Interface
The Rocketbook notebook has some solid pages with an odd shiny texture and feel, presumably part of the technology that makes it easy to wipe them clean for reuse. The bottom of each page has seven different faint icon images which are meant to allow the app to determine where to send the digital copy of the notes. One can send them via email or to a variety of storage or sharing services. I could imagine having different recipes set up to allow one to publish their notes to different websites based on the icon X-ed out. Given the micropub possibilities, one could also use the icons as a means of differentiating post kinds (for example, indicating that a particular post is a note, an article, or a bookmark). Another alternate idea would be to use the icons as a means of selecting which services to syndicate your content to (for example, the diamond could mean syndicate this post to Micro.blog, the bell could mean Mastodon, and the clover syndicates the post to Twitter).
The overall process is quite elegant and pleasant. The OCR for Rocketbook is reasonably good aside from a few spelling errors which are easy enough to click and fix. I’ll admit that I far prefer using a fountain pen on some Tomoe River paper to using the Rocketbook paper and the Frixion pen, but really, who wouldn’t?
Handwritten notes for your digital zettelkasten or personal wiki
Since I’ve already got most of the infrastructure, I’ve gone the extra mile and set things up so that I can take notes on index cards zettelkasten-style and use a similar set up to post them to my Obsidian vault using similar IFTTT recipes.
Try it yourself
For those who want to set this up themselves, I’ve documented the IFTTT/micropub portion before. I’ll post the specific code I’m using below for these who may want it. The nice part is that as long as you have a micropub server for your website platform (there are many CMSs that have native or plugin support) the WordPress portion isn’t a deal breaker for others.
I’m sure, now that there are multiple proofs of concept, some enterprising developer will build a custom micropub client to do all of this work automatically or with a few options built into a clever interface.
I could see pen and paper manufacturers (Moleskin, Leuchtturm, Rocketbook, etc.) creating apps for doing this too. I’d love to see and hear about others trying this out for themselves. Hopefully it can be done with almost no code or some easy cut and paste from my example. Ask if you need help, and I’ll see what I can do to help.
IFTTT Webhook settings
This following will be roughly standard for WordPress endpoints using the plugin, but they can obviously be modified for your platform of choice.
- URL:
https://example.com/wp-json/micropub/1.0/endpoint - Method:
POST - Content type:
application/x-www-form-urlencoded - Body:
access_token=PasswordHere&content=<<<{{Body}}>>>&h=entry&category[]=Social%20Stream&post-status=published&visibility=private
Historical examples
While doing some of this I did come across some older examples of handwriting to websites. Aside from handwriting typography which I think is usually ugly, I saw some interesting examples from Jeff Bridges[1] [2], gRegor Morrill, and scrolled through some great examples of handwritten and typed Tweets by Alton Brown. In his case, he was simply taking photos of his writing, but it worked! I’ll admit he had some fun and was definitely creative about it. Hopefully Twitter always exists to save the copies for him.
— Alton Brown (@altonbrown) November 20, 2012
— Alton Brown (@altonbrown) December 22, 2012
— Alton Brown (@altonbrown) December 10, 2012
— Alton Brown (@altonbrown) October 10, 2012
Conclusion
In short, I’ve now got another great way to post to my website. I love the great old school tactile user interface of pen and paper. Now I’m glad to have a reason to be able to do more of it in an ever-digitized culture.
Until I start working on cuneiform solutions…
Write On! 🖋
Editor’s note: This post was originally handwritten on Dec 16, 2021 at 20:15.
Of course, now I’m also realizing that the toughest part of the whole thing is deciding: do I publish the digital post at the date and time I composed it via pen or do I use the date and time that it was uploaded and published digitally? I’ll leave that for another day.
Special thanks to @TheJeffBridges’ OG website and @AltonBrown for the prior art inspiration.
Syndicated copies:
Handwriting my Website with a Digital Amanuensis
Now that I’ve seen the power of this method, I want a collaboration between Rocketbook and Field Notes!
Syndicated copies:
This is very cool!
Always cool to see you experimenting and having fun with post methods. I envy the your tweetstorm posts, too, and am curious how that’s done.
My primary implementation uses this method: https://boffosocko.com/2020/05/28/threadreaderapp-micropub-to-blog/ though there are occasionally other methods I experiment with from time to time.
Naturally I’ve got a tweetstorms category that has some various examples and ideas about the topic: https://boffosocko.com/tag/tweetstorms/
@chrisaldrich I love this movement of handwritten blogs. Myself, I can’t do it. My hand gets sore very quickly while writing with a pen or pencil. That’s due to a lifetime habit of literally pressing the medium into paper. I don’t write. I inscribe. I engrave.
Handwriting my Website with a Digital Amanuensis – Chris Aldrich boffosocko.com/2021/12/20/557…
Handwriting my Website with a Digital Amanuensis – Chris Aldrich 🔗
@josephaleo Maybe my comment at the bottom about a method for cuneiform may have some use? If you could inscribe/engrave into a clay tablet and then post to your site, perhaps this would save your hand some stress? 😃
Cygnoir, congrats on your new IndieWeb wiki template. I’m glad to have another pen/ink enthusiast tinkering around in the space. In case you missed it, I’ve been experimenting with handwriting and the web over the last month. Here’s a summary: Handwriting my Website with a Digital Amanuensis.
If iA is getting into physical notebooks, I’m hoping they’ll also attach the other leg of the triangle with their app’s Micropub support and allow me to publish my handwriting to my website. See: https://boffosocko.com/2021/12/20/55799844/ for details.
From literary Rube Goldberg workflows, distraction-free text editors and e-ink tablets, Julian Lucas dives into the world of distraction-free writing. He unpacks applications and devices such as iA Writer, Ulysses, Bear, Word ‘focus mode’, Hanx Writer, OmmWriter and Freewrite Smart Typewriter and reMarkable. All along, Lucas explores the friction between paper and computers, and the benefits and negatives associates with each.
Personally, I think the challenge for a clean workflow is something that everyone grapples with. Having a distraction-free space to write is central to that.
This also has me thinking about Clive Thompson’s dive into productivity tools and Chris Aldrich’s exploration of posting handwritten notes.
I am also reminded of Marc Scott’s appeal against Word from a few years ago:
@elizabutlermd It is clever, isn’t it? I’ve done a bit of tinkering towards making handwritten notes like this dovetail into my personal commonplace book and Obisidian-based workflows recently: https://boffosocko.com/2021/12/20/55799844/
Syndicated copies:
So cool! I love the idea of handwriting a website!
I know that I have followers who enjoy both digital and analog note-taking… check out this cool setup that @ChrisAldrich has created to integrate his handwritten and digital notes! 🤩
In the bustle of life I missed it a week or so ago, so Happy 8th IndieWeb Birthday to BoffoSocko.com! I’ve been worrying about other things for the past year, so I’ve completely missed the 7 year itch effect, though perhaps improving my PASTA workflow to Obsidian might have been the dalliance?
I think the biggest thing I’ve added to my website this past year was the ability to post to it with pen and paper. I wonder what sort of functionality the 8th year will bring? Pottery is apparently the “traditional gift”, so perhaps posting via clay with cuneiform as someone joked might actually come to fruition? I’m off to fire up the kiln…
Syndicated copies:
Very interesting – and well laid-out description of the process.
I have a rocketbook but got a bit frustrated with the inability to write fast, I would smudge the words a lot. I now only use it for quick notes that I might take in meetings to save paper. There are index cards too.
Hi Chris. Fellow Micro.blog guy here too. Have you started the ANTINET process yet?
May I suggest a slight variation.
If you are building an Antinet, write your cards out as usual.
Make, using rocket books resources, a rocket book page frame to place around your note when finished. By printing out and cutting out the center.
Add ## before and after ## your index code. Say ##5310/2##
When the app scans the contents it should recognise the info between the # symbols and use it as a file name.
Send it to Dropbox or Google drive, whatever, and you should have a digital copy of your paper based Antinet. If your hand writing is better than mine it may even be searchable due to OCR.
Incase of fire or some such disaster, you can print each file back out on 4×6 paper or card.
Please note however your images may prove to be space hungry on your Dropbox.
Rocketbook also has index cards if you just like the physical writing part https://getrocketbook.com/products/rocketbook-cloud-cards?variant=34338773008523. They’ve also got printable paper if you prefer a commonplace book-like experience: https://getrocketbook.com/pages/rocketbook-for-free.
This Article was mentioned on reddit.com
I cut out a frame from my Rocketbook to put it around the notecard and scan them with the app
Until apple notes just got a quite good ocr
That anecdote about Jean Paul is hilarious. Thanks for sharing
IndieWebCamp San Diego 2023-12-17
My goal for the day 2 at camp is to get my site set up so that I can type a post and with a quick photo send it to my website as a post there. As a reach goal, I’d also like to get alt-text working as well for accessibility. I’m hoping I can leverage some of my prior work on posting handwritten posts to get this all done. #IndieWeb #FTW
Photo of a typewritten sheet of paper which reads:
Typecasting with IndieWeb Building Blocks I recently brough my old Smith-Corona out of deep storage and begun using it again as a thinking and writing tool. Because some of that work was ultimately for my website, I wanted to have a way to transfer the work easily to my site. With IndieWebCamp San Diego and a mention of typecasting a few months back, I had a small brainstorm. I figured that could easily leverage some of the workflow I had designed in December 2021 for handwriting posts to do the same thing with my typewriter. As it turns out, I didn’t need to do much work. My flow using micropub in combination with Google Doc’s optical character recognition was just just the ticket. Now I can type up almost anything, take a photo which I open up in Google Docs. Docs does the OCR work, I save the document, and IFTTT.com picks up the new document in my folder. IFTTT then sends aa copy of the post to my site using Micropub as a private post. If necessary, I can tweak it a bit and add tags, categories, etc. When I’m done, I can publish it directly or schedule it to a future date. Naturally with other infrastructure, I can automatically syndicate the post to other social media sites using POSSE as well. I remember people back in the day doing typecasting in the early blogosphere. I’m hoping my new IndieWeb method will make doing this for myself a little bit easier. I love this ‘new’ posting interface.