sanbor/yamemex

yamemex provides a little margin for Chromium (or Google Chrome) in which you can jot notes about the web page you’re reading. It’s an annotation-centered take on bookmarking. This version is very preliminary, but it already provides a reverse-chronological view of your bookmark annotations, and supports Twitter-style #hashtags to categorize them.

It’s free software under the MIT X11 License.

To install

At some point soon, I’ll put up .crx files that you can download and install with just a click. It's not quite ready for that, though.

Put this source directory somewhere, like /home/bob/yamemex. (You can download it from Github with git clone git://github.com/kragen/yamemex.git.)
Load the submodules: cd yamemex; git submodule init; git submodule update.
In Chromium, from the menu, pick Tools → Extensions.
On the Extensions page, if necessary, click the [+] next to Developer Mode to enable Developer Mode.
Click the [ Load unpacked extension... ] button on the left side of the Extensions page.
Pick the directory containing this README file.

You should see the yamemex icon appear to the left of the wrench icon that opens Chrome’s menu.

DONE

saving annotations for bookmarked pages with a resizable annotation popup in-page
reverse-chronological view in browser
icon on page to indicate that there are annotations
add installation instructions
add license
focusing annotation popup when it opens
auto-selecting placeholder text so you can just start typing instead of working to delete the placeholder text for a new annotation
saving page titles
make blog view run a little bit faster
running when page starts loading, rather than when it finishes loading
adding date headers to the reverse-chronological view
a “public” checkbox to allow private annotations
giving blog view a stylesheet to make it look good
dismissing annotation popup
tagging: Twitter-like, #hashtags in the blog view are links to filtered views that show only things tagged with that hashtag.
smoothly animating open annotation popup
making browser-action icon open blog view when on a new-tab page

BUGS

hits disk after every keystroke in the annotation window
malicious JavaScript in a web page can spy on your annotation
annotation button doesn’t work until page finishes loading
doesn’t work on framesets

Rejected names

Rubric Rubricator Gourmet Imhotep Amanuensis yawas yats yanhoo Houyhnhm yafs GNN Pathfinder Bumppo Leatherstocking Memex compoundbow recurved

TODO (possibly)

make annotation popup close button use some clip art from openclipart
add clickable recent tags in annotation popup
make blog view editable (!!)
refactor this database stuff, because this is totally fucking ridiculous. Adding the “public” checkbox involved editing seven places:
1. db.js, to add the column and an index on it;
2. setAnnotation in yamemex.html, to copy it from the request into the database;
3. the getAnnotationsFor handler in yamemex.html, to copy it from the database into a request (already fixed);
4. the global variables in ymcontent.js, to have a place to store it in the page;
5. the handler for the getAnnotationsFor response in ymcontent, to copy it from the response into those variables;
6. openAnnotationWindow in ymcontent, to add the HTML and copy from the variable into the HTML state;
7. sendAnnotation in ymcontent, to copy from the global variable to the updateAnnotationsFor request;
8. sendAnnotation in ymcontent, to copy from the HTML back into the object.
Fixing this should involve the following steps:
- put ourAnnotation and ourPublic into one object, eliminating #4.
- put the URL and title in there too
- change the request sent to the background page to just have that object (the one to insert into the database), eliminating #7.
- changing the database code to insert arbitrary random properties on the object it’s handed instead of a fixed set of properties, eliminating #2.
- changing the getAnnotationsFor handler to send an object containing all columns of the row, eliminating #5.
This would leave only duplications #1, #6, and #8. Unifying #6 and #8 would involve a simple model-view framework, and unifying #1 with them would involve a Django-style schema definition EDSL in JS, so I don’t feel as bad about those.
avoid empty-string unclickable titles in blog view (oh shit. the title in the database for this one is ‘{{ mustache }}’. I think that means mustache.js is fucking with me and double-interpreting the fucking variable.) I'm pretty sure this is a bug because it doesn’t seem to be documented and it isn't represented in the examples directory used for unit tests. Minimal reproduction:
```
  Mustache.to_html('{{b}}', {b: '{{c}x}' }) -> '{{c}x}'
  Mustache.to_html('{{#a}}{{b}}{{/a}}', {a: [{b: '{{c}x}' }]}) -> '{{c}x}'
  Mustache.to_html('{{b}}', {b: '{{c}}' }) -> '{{c}}'
  Mustache.to_html('{{#a}}{{b}}{{/a}}', {a: [{b: '{{c}}' }]}) -> '' (wrong)
```
Looks like the problem in Mustache.js is that it re-interprets the HTML coming out of the inner section as a template:
```
  var html = this.render_section(template, context, partials);
  if(in_recursion) {
    return this.render_tags(html, context, partials, in_recursion);
  }

  this.render_tags(html, context, partials, in_recursion);
```
make titles editable in annotation popup
stop “Type your annotations here.” annotations from being added when you alt-tab away from an unwanted annotation window. This will be a lot easier when we can just copy the object being edited and then see if anything about it has changed, and not send a message if not.
automatically snarf publication date off the page
storing original date for annotations so they stay in order (perhaps linked from latest date)
make annotation pane not fade when keyboard focus is in it
- refactor this into the first version of Kogluktualuk
growing annotation popup taller as you type text into it
hiding annotations from the page in an iframe
handling URL changes that don’t reload the page
centering “see all” link
saving favicons
saving screenshots
archiving page contents
Markdown or similar formatting for annotations. https://github.com/fivesixty/mdext looks like the current home page of the most-maintained version of Showdown, which seems like the best implementation of Markdown in JS. There’s a WYSIWYM editor for it at http://code.google.com/p/wmd-new/.
publishing your bookmarks as a blog on the web
saving previous versions of annotations
syncing across multiple browsers
saving highlighted quotations from pages
automatically parsing dates from pages and displaying bookmarks in a calendar view
Lotus-Agenda-like auto-tagging based on user-specified keywords
plugins to seek bibliographic data and enable bookmarking of it
“friends”
subscribing to friends’ annotations
“like” button on friends’ annotations
Wiki-like editing of friends’ annotations
real-time updates
comment threads on annotations
Agenda-like grid views
full-text search
blog pagination
backends for:
- del.icio.us?
- TiddlySpace?
- AtomPub?
  - AtomPub has support from Wordpress
- identi.ca? (OStatus, StatusNet)
- Twitter?
- WebDAV?
- freelish.us? http://status.net/2011/04/01/new-federated-social-bookmarks-service-freelish-us
contextual tags (what was this?)

Acknowledgements

write.svg and write.png are http://www.openclipart.org/people/aungkarns/write.svg from http://www.openclipart.org/detail/79363, released to the public domain by AK/aungkarns, Aungkarn Sugcharoun, under the CC0 PD Dedication http://creativecommons.org/publicdomain/zero/1.0/.

The Candal font used for titles in blog.html is by Vernon Adams http://www.newtypography.co.uk/ who has licensed it under the SIL Open Font License and made it available through the Google Web Fonts API for free download: http://www.google.com/webfonts/family?family=Candal&subset=latin.

Thanks to Javier Candeira, Nadia Heninger, Joe Blaylock, and Beatrice Murch for their helpful feedback.

sanbor / yamemex