Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
Noter Live Instruction Manual
Noter Live is a tool for making IndieWeb live noting (aka live tweeting/live blogging) easier and simpler.
Log in to Twitter
To begin using Noter Live, click the blue
Log In with Twitter button in the top right corner of the interface. This will use OAuth to authenticate your Twitter account and allow Noter Live to post to your Twitter account on your behalf.
The top box on the interface is meant to allow the user to enter a hashtag which can be used to track the longer flow of the conversation. The hashtag should be entered with a prepended # (otherwise posts to Twitter won't hotlink the hashtag in the Tweet though the keyword will still be searchable).
Via Twitter Lookup
Twitter look-up is a quick method for automatically entering the Twitter handle, the speaker's name, and potentially their website URL respectively in the correct fields. Simply enter the speaker's Twitter handle (without the @) in the box labeled "look up Twitter handle here" and click on the "Change Speaker" button. Noter Live will search Twitter and populate the Twitter handle, name, and URL fields with the data on file for that Twitter handle and save the speaker to your speaker list.
Note: Noter Live doesn't allow modifying (and re-saving) corrected versions of the speaker information, so if the Twitter lookup doesn't return the data you'd prefer to use (i.e. the name is oddly customized/unfamiliar or uses emoji, etc. or there is no URL on the Twitter account, but you want to include one you're aware of) then click on
Delete Speaker to remove them from your speaker list, edit the speaker data to your preferred representation, and finally click on
Save Speaker again.
Change Speaker with no information entered in any of the speaker fields will default the speaker to Tantek Çelik. (Historically this was because he was usually the first one to speak at IndieWeb events.)
If you want to enter a different speaker fill in the successive boxes with the
Twitter handle (including the @), their
Name, and their
Website respectively. Finally click on
Save Speaker to save the speaker to your list.
Speakers with no Twitter handle
If you need to enter a speaker who has no Twitter account/handle, it's recommended that you simply enter their name (without a prepended @). Doing so will allow the system to insert their name into the tweet as well as give their speaker button the correct label. Leaving the Twitter handle empty will not correctly attribute the quote in the resultant Tweets and will also result in a label-less speaker button.
To delete a particular speaker from your list, simply click on that speaker's button and then click
Delete Speaker won't work on speakers that weren't initially input with any text in the Twitter handle field. We recommend adding the speaker's name in the Twitter handle field if/when they don't have an actual Twitter account so that the button can not only be deleted, but so that they are properly attributed as the source of their quotes when posted to Twitter.
While using Noter Live one can quickly and easily switch from one saved speaker to another in their speaker list by simply clicking on that speaker's button in the list.
With the appropriate (optional) hashtag included and a speaker selected, enter the text of the quote in the box labeled "enter the speaker's brilliant quote here". The tweet, as it will be sent, appears in the box just below that under which is a character counter that will indicate how many of the 140 characters are left available in an individual tweet.
For longer quotes, one can type the entirety of a quote and then cut and paste from a longer paragraph to fit the character limit.
To send the properly edited Tweet, click the black
There are two log fields located just below the Twitter card representation in the interface.
The first log presents a plain text running list of tweets sent through the Noter Live interface.
HTML Mark Up
The second log presents an html marked-up version of the log which wraps the portions of text with appropriate html code and microformats classes to make it easier to cut and paste the Noter Live session into a blog post or web page with the appropriate mark up quickly and easily.
Mark up with hover cards
At the top of the interface there is a checkbox labeled
add hovercards to html which will automatically add additional html markup to the second log to make it easier to add/create hovercards to the stream of Tweets on blog posts and/or other web pages. When using this option, one will want to include the hovercard.js script to their site in the appropriate place as well as potentially adding hovercard.css (or something equivalent) to their site so that the hovercards render as they expect.
Example: [http://www.kevinmarks.com/hwc2016-09-21.html](Homebrew Website Club 2016-09-21)
Deleting Speakers and Logs
To delete individual speakers, see the section above with instructions about deleting them one at a time.
Noter Live uses local browser storage to allow both speakers and the logs to persist in the browser in case of automatic/accidental page refresh.
To clear both the speakers and the logs and start a new session, click the button 'Clear speakers and logs`. This will also happen if one logs out of Twitter on Noter Live (see below). Be sure you've saved any data from the logs that you may need later before deleting.
To end your Noter Live session, click the
Log Out button in the top right corner of the interface.
Note: Before logging out, make sure you save all the data from the logs as logging out will clear the local caches causing you to lose all of your speaker data and logs.