Skip to content

Latest commit

 

History

History
350 lines (265 loc) · 13.3 KB

organice_intro.org

File metadata and controls

350 lines (265 loc) · 13.3 KB

organice

Introduction

About me

Alain M. Lafon

images/alain.jpg

CV

Contact

alain@200ok.ch

Why would you care?

  • I’m a tooling nut
  • I even got the job interview as a lecturer by accident, because I gave a talk on GTD 9 years ago
  • Over the last 15 years, I went over a great many tools
  • Since 6 years, most of my work, reading and communications happen within Emacs
  • Org mode is my daily driver for everything from
    • Project Management
    • Time Tracking
    • Quotes
    • Bookkeeping and Controlling
    • Presentations
  • Hence, I’m happily committed to Org Mode \(^_^)/

What is organice?

If Org mode is so great, why a new tool?

Two pragmatic reasons

  1. It’s not really convenient to have a laptop/PC handy all the time.
  2. Not everyone is an Emacs user.

Are you a fan of Org mode? If so, you probably want to have access to your Org files at any time - even when away from your computer. Or maybe you want to collaborate with other people who are not Emacs users themselves.

Description

organice is an implementation of Org mode without the dependency of Emacs. It is built for mobile and desktop browsers and syncs with Dropbox, Google Drive and WebDAV.

What does it look like?

\center\includegraphics[height=0.9\textheight]{images/screenshot–overview.png}

Development

  • The project is free and open source software, of course
  • It has an AGPL-3.0 license, a public code of conduct and contributing guidelines
  • You can find the source code here: https://github.com/200ok-ch/organice
  • organice is built using the popular front-end frameworks React and Redux
    • Enabling a wide range of contributors

Demo

Demo

  • Optimized for mobile and desktop use
  • https://organice.200ok.ch
  • No back-end
    • No storage of data on our servers
    • We also don’t use analytics

Inception!

  • Let’s check some Org mode features in organice!

Actions

Todos [1/4] [25%]

This header has a few TODO items as subheaders.

Learn how to use TODOs in organice

To advance the todo state of a header, swipe right on it until the background turns green.

Try advancing the todo state of this header a few times!

There’s also a setting once you’re signed in to enable tapping on the TODO label itself to advance the todo state. Its off by default because I thought the behavior would be confusing unless explained, but I recommend turning it on!

Check out organice

START Investigate custom TODO states

organice also supports custom todo states (if declared at the top of the file). Swipe right on this header a few times.

Note that when the cycle restarts, it defaults to the first set of todo states. Manually edit the header to get back to a different todo state cycle (more on editing headers below!)

Editing headers

When you select a header the “header action drawer” appears. The first two buttons in this drawer edit the header and description respectively. Try editing this header.

Tags

The next button in the header action drawer will bring up the tag editor.

This editor lets you add, modify, and reorder tags, as well as giving you easy access to all tags in the file.

Try it out on these headers:

Dogs:

Eloise
Clooney
Murphy
Starla
Rex
Maz

Focusing

The next button in the header action drawer “focuses” on a header, hiding all others and promoting it to the top level. Press the button again to “unfocus”.

This is purely visual - your org file isn’t affected under the hood.

I find this useful for focusing on my “Groceries” list when I go to the grocery store. Give it a shot on this grocery list:

Groceries

  • [ ] Mangoes
  • [ ] Dark chocolate
  • [ ] Carrots

Adding and removing headers

To add a new header, press the + button in the header action drawer

To remove a header, swipe left on the header until the background turns red.

Moving headers

To move a header, click on the four-way arrows button at the bottom of the screen with a header selected. 6 buttons will appear for moving headers.

The center 4 move the header up, down, left, and right. The 2 outermost buttons move the header and its entire nested subtree.

Give them a try on these nested headers to get a feel for how they operate:

A few of my favorite things:

Food
Chocolate
Dark chocolateMilk chocolateCrispy chocolate
Mangoes
Text editors
Emacs
Mountain bikes
Santa Cruz
Trek
Giant
Specialized
Dogs
Eloise
Maz
Starla
Rex
Clooney

Syncing

The “cloud” button in the lower left hand corner syncs changes to your chosen sync service (Dropbox or Google Drive).

If there’s a newer version on the server and no local changes, it’ll pull.

If there’s no newer version on the server and there are local changes, it’ll push.

Otherwise, it’ll ask what you want to do.

This button isn’t enabled in this demo :)

If you’d like to automatically push changes as you make them, you can enable “Live sync” in settings.

Undo / Redo

When you’re signed in, you’ll have undo and redo buttons in the headerbar.

Tables

organice has native support for viewing and editing tables.

Try playing around with this one by first clicking on a cell:

Dog nameAgeWeight (in lbs)ParentScore (1-10)
Eloise35.1Erin15
Starla1540Sarah S15
Rex1545Sarah S15
Maz155Brittany15
Clooney0.14.8Sarah R15
Murphy0.525Jordan15

New action drawer items

When a table cell is selected, a table-specific action drawer appears.

The leftmost icon allows you to edit a cell.

On the right side, the top two icons let you add and remove rows. The bottom two icons let you add and remove columns.

Moving rows and columns

When a table cell is selected, the four-way arrow button at the bottom of the screen changes to manipulate tables.

Press up and down to move rows, and left and right to move columns.

Format specifiers (like <r> and <10>) aren’t yet supported, but they’re on my list!

If this is an important feature to you, please let me know by upvoting the issue on GitHub

Lists and checkboxes

organice has native support for displaying plain lists and checkboxes

Plain:

  • plain list item 1
  • plain list item 2
    • sub item 1
  • plain list item 3

Ordered:

  1. Item 1
  2. Item 2
  3. Item 20
  4. Item 21

Checkboxes:

  • [-] 1 [1/2]
    • [ ] 1.1 [0%]
      • [ ] 1.1.1
    • [X] 1. 2
  • [X] 2

Currently, plain lists are mostly display only (except that you can check/uncheck checkboxes). If native support for manipulating plain lists is important to you, please let me know by upvoting the issue on Github

Timestamps

organice has native support for displaying and editing timestamps.

Try tapping on the timestamps below to get a feel for the editor:

<2018-09-17 Sun>

[2018-09-17 Sun]

[2018-09-17 Sun +1d]

[2018-09-17 Sun 10:00-11:30]

<2018-09-17 Sun>–<2018-09-25 Tue>

Property lists

organice has native support for viewing and editing property lists. To bring up an editor, expand the PROPERTIES drawer below and tap on any of the properties.

Example

Planning

organice has native support for adding and editing DEADLINE and SCHEDULED items. It also supports repeaters and delays. Check out these examples:

An item with a deadline

An item that is scheduled

An item with both

An item with a repeater - try swiping right to advance to the DONE state

Capture

organice supports something like org-capture in the form of customizable, quickly accessible buttons for creating new headers.

Click the button in the bottom right corner of the screen to see some examples. The first button, the lemon, will create a new entry in the “Groceries” list below this. The second button adds an entry to a more deeply nested header.

Once signed in, you can set up capture templates that specify header paths (and various other configurations). These capture templates can also sync between your devices (if you enable settings sync).

Inbox

Agenda

organice has a basic agenda view that you can access by tapping the calendar button at the bottom of the page.

Tap a header in this view to jump to it, and tap on the date to switch to a more readable relative date format.

These overdue items with deadlines should show up on today’s entry:

check out the organice agenda view

install organice to your phones homescreen

Closing words

Related work

  • organice has custom parser code for Org files
  • It works quite fine and has unit tests to prove it
  • However, writing a parser for a complex syntax like Org mode in custom code is hard
  • We are also in the in the process of implementing a proper BNF based parser and a set of tests behind that written in Clojure / ClojureScript
  • If you’re interested, please check it out: https://github.com/200ok-ch/org-parser

Further reading

Talk tax

Extend your range of Emacs, use organice!

\thinspace

\includegraphics[height=0.35\textheight]{images/organice.png}

\thinspace

\includegraphics[height=0.25\textheight]{images/heart.png}

\thinspace

\includegraphics[height=0.35\textheight]{images/emacs_logo.png}