/Twirlip7

Information organizer using JavaScript, Mithril.js, Tachyons.css, and Ace

Primary LanguageJavaScriptMIT LicenseMIT

Twirlip7 Information Organizer

Try it here: http://rawgit.com/pdfernhout/Twirlip7/master/src/ui/twirlip7.html

The Twirlip project helps you organize information you find interesting and make it accessible and useful to yourself or others you want to share with.

Right now, there are a few experimental applications to play with:

  • a programmable notebook (with some examples including plugins)
  • an IBIS diagramming tool for Dialogue Mapping (with full Compendium support as additional work-in progress called "Collage")
  • a chat app (which can also serve as a personal journal)
  • a "tables" spreadsheet app
  • a filer app that emulates a hierarchical file system
  • a organizer that can read mbox-format email files
  • a hierarchical outliner
  • a sketcher app to create SVG (which can then be pasted into the chat app)
  • a synchronizer tool to synchronize two streams on the same or different servers
  • a monitor to display JSON objects in a stream
  • an intercom to do voice chat (still under development)

The notebook app and the chat app are the most full-featured and useful right now.

About the notebook application

The notebook app is an IDE for playing with JavaScript and Mithril.js which stores snippets of code or text in a local notebook with a collection of items.

As an experiment, questions include how could these snippets be stored, retrieved, visualized, referenced, annotated, shared, versioned, or discussed?

The goal of the experiment is to explore such ideas as another step towards a social semantic desktop.

The notebook items are stored in local storage by default. You can click on the "Notebook" dropdown to switch from using local storage to memory storage or server storage for new items.

And entire notebook of snippets can be exported or imported as JSON. You can also copy and paste individual items (including their history) between Twirlip7 journals via data URLs using the clipboard.

However, all that may change as the experiment progresses in new directions. For example, as one possibility, these snippets and content they generate might someday be distributed through the decentralized Matrix.org.

The IDE supports some functionality inspired by the Smalltalk "Workspace". You can select a section of code in the editor and then "do it" to evaluate the code, "print it" to insert the evaluation result in the editor, or "inspect it" to see the evaluation result (in the JavaScript console in this case). If you don't select anything specific, all the code in the editor is evaluated.

To test this, click "Show example log" which will put some JSON text in the editor window, and then click "Load log" to start using the log of snippets. Then use Previous and Next buttons to scroll through snippets. Click "Do it" to evaluate a snippet. Select text and then Do, Print, or Inspect just that text (e.g. "1 + 1"). Supports Import and Export of editor content to a file. You can edit snippets and click "Save" to add them to the log of snippets.

The UI uses Mithril.js, Tachyons.js, RequireJS, and the ACE editor in plain JavaScript. The UI currently expects ES6 in a modern browser

The UI code is written in ES6 JavaScript. CSS styling is done using the classes defined in the Tachyons stylesheet -- or occasionally inline styles when there is something Tachyons does not cover). Given those two choices, there is no required build step. You can just modify a UI file and reload the page in the browser to see your changes.

The server side

The Server uses Node.js with Express to serve the UI files and to store and retrieve items shared by all users. Using the server requires running "npm install" to load the supporting npm modules and then "npm start" to run the server. If you want to allow the server to proxy requests to avoid CORS issues when retrieving data from different sites, you need to add a proxyKey.txt file with a proxyKey passphrase which must be supplied in proxy requests.

You don't need to install and run the server to do some simple tests. You can just load the UI files directly into your browser (like with the rawgit example). If you run the notebook without the server, however, you can only store data in memory or local storage; the server storage option will be greyed out in the UI. Also, proxy support is not available without the server, so the proxying examples won't work. The other applications besides the notebook generally won't be useable withotu the server. You may be able to play with them, but any changes you make will be lost when you reload the page.

Startup params for Notebook

See Startup params for Notebook

Storage design using streams of items

See Storage design

License: MIT

Screenshots

Note: The IDE screenshots here are significantly out-of-date as more features have been added since it was made.

Screenshot of Twirlip7 notebook showing a code snippet with a simple temperature convertor in Mithril (after having pressed "Do it"):

Twirlip7 Screenshot showing F-to-C snippet in editor

Screenshot showing the same code snippet opened in a new tab as a stand-alone-looking app (after having pressed "Launch it"):

Twirlip7 Screenshot showing F-to-C snippet opened in a new tab