A note taking problem and a proposed solution

tl;dr

It’s too painful to quickly get frequent notes into note taking and related platforms. Hypothes.is has an open API and a great UI that can be leveraged to simplify note taking processes.

Note taking tools

I’ve been keeping notes in systems like OneNote and Evernote for ages, but for my memory-related research and work in combination with my commonplace book for the last year, I’ve been alternately using TiddlyWiki (with TiddlyBlink) and WordPress (it’s way more than a blog.)

I’ve also dabbled significantly enough with related systems like Roam Research, Obsidian, Org mode/Org Roam, MediaWiki, DocuWiki, and many others to know what I’m looking for.

Many of these, particularly those that can be used alternately as commonplace books and zettelkasten appeal to me greatly when they include the idea of backlinks. (I’ve been using Webmention to leverage that functionality in WordPress settings, and MediaWiki gives it grudgingly with the “what links to this page” basic functionality that can be leveraged into better transclusion if necessary.)

The major problem with most note taking tools

The final remaining problem I’ve found with almost all of these platforms is being able to quickly and easily get data into them so that I can work with or manipulate it. For me the worst part of note taking is the actual taking of notes. Once I’ve got them, I can do some generally useful things with them—it’s literally the physical method of getting data from a web page, book, or other platform into the actual digital notebook that is the most painful, mindless, and useless thing for me.

Evernote and OneNote

Older note taking services like Evernote and OneNote come with browser bookmarklets or mobile share functionality that make taking notes and extracting data from web sources simple and straightforward. Then once the data is in your notebook you can actually do some work with it. Sadly neither of these services has the backlinking functionality that I find has become de rigueur for my note taking or knowledge wrangling needs.

WordPress

My WordPress solutions are pretty well set since that workflow is entirely web-based and because WordPress has both bookmarklet and Micropub support. There I’m primarily using a variety of feeds and services to format data into a usable form that I can use to ping my Micropub endpoint. The Micropub plugin handles the post and most of the meta data I care about.

It would be great if other web services had support for Micropub this way too, as I could see some massive benefits to MediaWiki, Roam Research, and TiddlyWiki if they had this sort of support. The idea of Micropub has such great potential for great user interfaces. I could also see many of these services modifying projects like Omnibear to extend themselves to create highlighting (quoting) and annotating functionality with a browser extension.

With this said, I’m finding that the user interface piece that I’m missing for almost all of these note taking tools is raw data collection.

I’m not the sort of person whose learning style (or memory) is benefited by writing or typing out notes into my notebooks. I’d far rather just have it magically happen. Even copying and pasting data from a web browser into my digital notebook is a painful and annoying process, especially when you’re reading and collecting/curating as many notes as I tend to. I’d rather be able to highlight, type some thoughts and have it appear in my notebook. This would prevent the flow of my reading, thinking, and short annotations from being subverted by the note collection process.

Different modalities for content consumption and note taking 

Based on my general experience there are only a handful of different spaces where I’m typically making notes.

Reading online

A large portion of my reading these days is done in online settings. From newspapers, magazines, journal articles and more, I’m usually reading them online and taking notes from them there.

.pdf texts

Some texts I want to read (often books and journal articles) only live in .pdf form. While reading them in an app-specific setting has previously been my preference, I’ve taken to reading them from within browsers. I’ll explain why in just a moment, but it has to do with a tool that treats this method the same as the general online modality. I’ll note that most of the .pdf  specific apps have dreadful data export—if any.

Reading e-books (Kindle, e-readers, etc.)

If it’s not online or in .pdf format, I’m usually reading books within a Kindle or other e-reading device. These are usually fairly easy to add highlights, annotations, and notes to. While there are some paid apps that can extract these notes, I don’t find it too difficult to find the raw file and cut and paste the data into my notebook of choice. Once there, going through my notes, reformatting them (if necessary), tagging them and expanding on them is not only relatively straightforward, but it also serves as a simple method for doing a first pass of spaced repetition and review for better long term recall.

Lectures

Naturally taking notes from live lectures, audiobooks, and other spoken events occurs, but more often in these cases, I’m typically able to type them directly into my notebook of preference or I’m using something like my digital Livescribe pen for notes which get converted by OCR and are easy enough to convert in bulk into a digital notebook. I won’t belabor this part further, though if others have quick methods, I’d love to hear them.

Physical books

While I love a physical book 10x more than the next 100 people, I’ve been trying to stay away from them because I find that though they’re easy to highlight, underline, and annotate the margins, it takes too much time and effort (generally useless for memory purposes for me) to transfer these notes into a digital notebook setting. And after all, it’s the time saving piece I’m after here, so my preference is to read in some digital format if at all possible.

A potential solution for most of these modalities

For several years now, I’ve been enamored of the online Hypothes.is annotation tool. It’s open source, allows me reasonable access to my data from the (free) hosted version, and has a simple, beautiful, and fast process for bookmarking, highlighting, and annotating online texts on desktop and mobile. It works exceptionally well for both web pages and when reading .pdf texts within a browser window.

I’ve used it daily to make several thousand annotations on 800+ online web pages and documents. I’m not sure how I managed without it before. It’s the note taking tool I wished I’d always had. It’s a fun and welcome part of my daily life. It does exactly what I want it to and generally stays out of the way otherwise. I love it and recommend it unreservedly. It’s helped me to think more deeply and interact more directly with countless texts.

When reading on desktop or mobile platforms, it’s very simple to tap a browser extension and have all their functionality immediately available. I can quickly highlight a section of a text and their UI pops open to allow me to annotate, tag it, and publish. I feel like it’s even faster than posting something to Twitter. It is fantastically elegant.

The one problem I have with it is that while it’s great for collecting and aggregating my note data into my Hypothes.is account, there’s not much I can do with it once it’s there. It’s missing the notebook functionality some of these other services provide. I wish I could plug all my annotation and highlight content into spaced repetition systems or move it around and modify it within a notebook where it might be more interactive and cross linked for the long term. Sadly I don’t think that any of this sort of functionality is on Hypothes.is’ roadmap any time soon.

There is some great news however! Hypothes.is is open source and has a reasonable API. This portends some exciting things! This means that any of these wiki, zettelkasten, note taking, or spaced repetition services could leverage the UI for collecting data and pipe it into their interfaces for direct use.

As an example, what if I could quickly tell Obsidian to import all my pre-existing and future Hypothes.is data directly into my Obsidian vault for manipulating as notes? (And wouldn’t you know, the small atomic notes I get by highlighting and annotating are just the sort that one would like in a zettelkasten!) What if I could pick and choose specific course-related data from my reading and note taking in Hypothes.is (perhaps by tag or group) for import into Anki to quickly create some flash cards for spaced repetition review? For me, this combination would be my dream application!

These small pieces, loosely joined can provide some awesome opportunities for knowledge workers, students, researchers, and others. The education focused direction that Hypothes.is, many of these note taking platforms, and spaced repetition systems are all facing positions them to make a super-product that we all want and need.

An experiment

So today, as a somewhat limited experiment, I played around with my Hypothes.is atom feed (https://hypothes.is/stream.atom?user=chrisaldrich, because you know you want to subscribe to this) and piped it into IFTTT. Each post creates a new document in a OneDrive file which I can convert to a markdown .md file that can be picked up by my Obsidian client. While I can’t easily get the tags the way I’d like (because they’re not included in the feed) and the formatting is incredibly close, but not quite there, the result is actually quite nice.

Since I can “drop” all my new notes into a particular folder, I can easily process them all at a later date/time if necessary. In fact, I find that the fact that I might want to revisit all my notes to do quick tweaks or adding links or additional thoughts provides the added benefit of a first round of spaced repetition for the notes I took.

Some notes may end up being deleted or reshuffled, but one thing is clear: I’ve never been able to so simply highlight, annotate, and take notes on documents online and get them into my notebook so quickly. And when I want to do something with them, there they are, already sitting in my notebook for manipulation, cross-linking, spaced repetition, and review.

So if the developers of any of these platforms are paying attention, I (and I’m sure others) really can’t wait for plugin integrations using the full power of the Hypothes.is API that allow us to all leverage Hypothes.is’ user interface to make our workflows seamlessly simple.

Read IndieWeb Link Sharing by Max Böck (Max Böck - Frontend Web Developer)
A pain point of the IndieWeb is that it's sometimes not as convenient to share content as it is on the common social media platforms. Let's improve that.
This sounds a lot like some of the bookmarklet tools that I use for my WordPress website. Kudos to Max for making it easier for those with static sites!

👓 Inoreader How-to: Do more with browser extensions | Inoreader blog

Read Inoreader How-to: Do more with browser extensions (Inoreader blog)
When you’re casually browsing the internet, there is nothing better than stumbling across a new source of excellent content – but nowadays you’re rushing so much that you might not put in the extra effort and fire up your Inoreader to add a feed to your subscriptions. Inoreader Companion, our dedicated browser extension, will save …

👓 Civix Releases New Online Media Literacy Videos | Hapgood

Replied to Civix Releases New Online Media Literacy Videos by Mike Caulfield (Hapgood)
I worked with Civix, a Canadian non-profit, to do a series of videos showing students basic web techniques for source verification and contextualization. I had boiled it down to four scripts runnin…
As I read this and tinker around a bit with some of the resources, including one for canadafactcheck.ca mentioned within one of the videos and add the “Wikipedia” to the Omnibar or try the “-site:” trick, the results there aren’t very solid themselves. Similarly a search for NewsWise.ca is rough because there are dozens of similar products with the same name which makes me think about the phrase “Doctor heal thyself.”

On the idea of the “-site:xyz.com” trick, perhaps one could create a browser extension or a bookmarklet that would use javascript to take the URL in the browser bar and massage it to return the requisite string and then execute the appropriate search so that with a simple click of a button, anyone can “remember” how to do it?

Similarly with searching for the root URLs of particular outlets by clipping off the longer paths of URLs one could use a browser bookmarklet to accomplish this with a simple click and save the seconds involved with highlighting and pasting? The more dead simple and quicker it can be, the better off we are. I’ve documented a browser bookmarklet on my site that trims news article URLs down to the base URL: https://boffosocko.com/2017/03/27/to-amp-or-not-to-amp-that-is-the-question/

As an example of this type of functionality, albiet probably with a lot more programming and manual work, Brill’s company NewsGuard has developed a Chrome browser extension that is meant to provide visual indicators on pages and in search for levels of fact checking: https://chrome.google.com/webstore/detail/newsguard/hcgajcpgaalgpeholhdooeddllhedegi?hl=en

👓 TWELP: Twitter Help | Standardista

Read TWELP: Twitter Help by Estelle WeylEstelle Weyl (Standardista)

Sometimes Twitter gets things wrong. Very, very, wrong. A few “features” that I think are bugs include Twitter Moments,

To this end, I created a little bookmarklet called “TWELP”.

The bookmarklet creates a kill function that:

  1. hides promoted tweets by finding the parent tweet containing a promoted-tweet child class
  2. hides any “liked” tweets that contain the heart icon, including uninteresting tweets in your stream suck as the fact that your friend Jane liked a tweet of a picture of her acquaintance Joe, who you are not following, eating an oyster. Seriously, who the fuck cares? It also hides the “people who liked your tweet” feature in your notifications. Not sure if that is a feature or a bug.
  3. The ‘.js-activity-generic’ hides the ‘pat and chris followed leslie’. Seriously, double wtf cares? I am testing in production, so maybe this has some unwanted side effects.
  4. hides the “Moments” tab by hiding the tab that has the  js-moments-tab class
  5. hides promoted modules that I hate like “In Case You Missed It” and “Who to follow”
  6. Calls itself once per second so if you scroll, it will continue killing those annoying tweets mentioned above.
  7. You have to pass window.jQuery to $ because Firefox defines it’s own $. (Thanks to @Potch for that tidbit)

TWELP – You can drag this link to your bookmarks bar, and click TWELP bookmarklet whenever you load Twitter. It kills the “Moments” tab, all ads, and removes the “X liked” tweets.

Reply to Aaron Davis’ Reply to IndieWeb Press This bookmarklets for WordPress

Replied to Reply to IndieWeb Press This bookmarklets for WordPress by Aaron DavisAaron Davis (collect.readwriterespond.com)
I have been using Dave Winer’s Radio3 platform/bookmarklet, but would rather a process which would allow me to store bookmarks on my blog and POSSE them. I was therefore wondering about creating a similar bookmarklet that generates ‘Bookmark’ post-kinds, as well as the possibility of posting from mobile? Am I going down the wrong path, especially as WordPress tinkers with ‘Press This’?
Aaron, the IndieWeb PressThis version bookmarklets are certainly a laudable solution for bookmarking things (even as WordPress moves the functionality of the original out of core), but I suspect you may find a more robust solution given some of your current set up.

Post Kinds Bookmarklets

A screen capture of my browser bookmarklets for my WordPress site with emoji for easier visual use.

A screen capture of my browser bookmarklets for my WordPress site with emoji for easier visual use.

Since you have the Post Kinds plugin set up, you might consider using that for a lot of the distance it can give you instead. I’ve written up some basic usage instructions for the plugin along with screenshots, but you’ll probably be most interested in the section on Bookmarklet Configuration. I’ve created a dozen or so browser bookmarklets, with handy visual emoji, for creating specific bookmark types for my site.

As for mobile posting, I’ll mention that I’ve heard “rumors” that David Shanske has a strong itch for improving the use of Post Kinds with a better mobile flow, so I would expect it to improve in the coming months. Until that time however, you can find some great tips on the wiki page for mobile posting. I recommend reading the entire page (including the section on Known which includes tools like URL Forwarder for Android that will also work with WordPress in conjunction with Post Kinds and the URL scheme described in the Bookmarklet Configuration section noted above.)

Using these details you should be able to make bookmarklets for your desktop browser and an Android phone in under an hour. If for some reason the documentation at these locations isn’t clear enough for you to puzzle out, let me know and I can do a more complete write up with screenshots and full code. (It’s still a piece of the book I need to expand out, or I’d include it here.)

Email

WordPress has the option of setting up an email address by which to post to your site. You can configure this pretty quickly, especially for mobile use to send URLs to your website that way. I typically use this method for quickly bookmarking things to my site for private use at a later date.

PESOS Options

There are also services that do bookmarking and include RSS feeds to your content which you could also potentially use to trigger IFTTT.com actions to post to your website. I have something similar to this set up for Reading.am which I’ve described in the past. You could certainly use this in combination with Diigo, which I see you use. Again, here more often than not I use these methods when I post things to my site as drafts or private posts.

cc: Indieweb Press This Bookmarklets for WordPress

To AMP, or Not To AMP, That is the Question: Whether ’tis Nobler in the Mind to Bookmarklet

“Hi. My name is Chris and I’m a web browser bookmarklet junkie.”

Accelerated Mobile Pages

I’ve been following most of the (Google) Accelerated Mobile Pages (AMP) discussion (most would say debate) through episodes of This Week in Google where Leo Laporte plays an interesting foil to Jeff Jarvis over the issue. The other day I came across a bookmark from Jeremy Keith entitled Need to Catch Up on the AMP Debate? which is a good catch up by CSS-Tricks. It got me thinking about creating a bookmarklet to strip out the canonical URL for AMP pages (the spec requires them to exist in markup) to make them easier to bookmark and share across social media. In addition to social sites wrapping their URLs with short URLs (which often die or disappear as the result of linkrot) or needing to physically exit platforms (I’m looking at you Facebook with your three extra life-sucking clicks meant to protect your walled garden) to properly bookmark canonical URLs for later consumption, I’ve run across several Google prepended URLs which I’d rather not share in lieu of the real ones.

Apparently I wasn’t the first to think of such a thing, nor am I the second. Last night I came across a bit of research and genius by Kevin Marks who referenced a bookmarklet by Alan Storm back in January for switching to an AMP’d version of a web page (in an effort to cut down on the large JavaScript and advertising payloads that come along with most modern web pages). Naturally there was also a bookmarklet to switch back to the canonical (and non-Google) URL included for those who want to share an original.

Clean and Simple URLs

Kevin then took it a step further and included a JavaScript bookmarklet that shortens URLs down to their pure essence.

As an example, his canonical bookmarklet will take something ugly like
http://mashable.com/2017/03/26/dog-chasing-hockey-puck-joy/?utm_cid=mash-com-Tw-main-link#xvCRlgf_vsqY
and strip it down to its most basic
http://mashable.com/2017/03/26/dog-chasing-hockey-puck-joy
so that if you want to share it, it will remove all of the tracking cruft that comes along for the ride.

Even worse offenders like
https://www.nytimes.com/2017/03/24/opinion/sunday/chinas-communists-embrace-religion.html?action=click&pgtype=Homepage&clickSource=story-heading&module=opinion-c-col-left-region&region=opinion-c-col-left-region&WT.nav=opinion-c-col-left-region&_r=0
suddenly become cleaner and clearer
https://www.nytimes.com/2017/03/24/opinion/sunday/chinas-communists-embrace-religion.html

These examples almost remind me of the days of forwarding chain letter emails where friends couldn’t be bothered to cut out the 10 pages of all the blockquoted portions of forwards or the annoying

>  > >>  >>
>  > >>  >>
>  > >>  >>

nonesense before they sent it to you… The only person who gets a pass on this anymore is Grandpa, and even he’s skating on thin ice.

Remember, friends don’t let friends share ridiculous URLs…

So in that spirit, here are the three bookmarklets that you can easily drag and drop into the bookmark bar on your browser:

🔲 To AMP

🔳 Not to AMP

✁ Base URL

The code for the three follow respectively for those who prefer to view the code prior to use, or who wish to fashion their own bookmarklets:

As a bonus tip, Kevin Marks’ post briefly describes how one can use their Chrome browser on mobile to utilize these synced bookmarklets more readily.

Alternatives

Of course, if you want the AMP version of pages just for their clean appearance, then perhaps you may appreciate the Mercury Reader for Chrome. There isn’t a bookmarklet for it (yet?), but it’ll do roughly the same job, but without the mobile view sizing on desktop. And then while looking that link up, I also notice Mercury also has a one line of code AMP solution too, though I recommend you brush up on what AMP is, what it does, and do you really want it before adding it.

👓 Day 7: To AMP or not to AMP? #100DaysOfIndieWeb | Kevin Marks

Read Day 7: To AMP or not to AMP? by Kevin MarksKevin Marks (Kevin Marks's Known site)
Alan made a bookmarklet to go from the AMP version of an article to the canonical one. This is useful for sharing, but as Aaron pointed out, going the other way is handy for removing ad cruft, which can be a 14GB/day download. So, here's the 'to amp' version:javascript:var url = false;var links = do...